good enough for now, would like to re-visit after the demo. Added the figma styling with slight modifications, renamed read -> viewer in top controls, made rainbow mode appear after 10 clicks rather than 6

This commit is contained in:
EthanHealy01 2025-08-26 01:31:52 +01:00
parent 60d6c0d809
commit c641dd7c43
5 changed files with 527 additions and 299 deletions

View File

@ -1,11 +1,14 @@
import React, { useState, useCallback, useRef, useEffect } from 'react'; import React, { useState, useCallback, useRef, useMemo, useEffect } from 'react';
import { Text, Checkbox, Tooltip, ActionIcon, Badge } from '@mantine/core'; import { Text, ActionIcon, CheckboxIndicator } from '@mantine/core';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import CloseIcon from '@mui/icons-material/Close'; import MoreVertIcon from '@mui/icons-material/MoreVert';
import DownloadOutlinedIcon from '@mui/icons-material/DownloadOutlined';
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
import PushPinIcon from '@mui/icons-material/PushPin'; import PushPinIcon from '@mui/icons-material/PushPin';
import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined'; import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
import DragIndicatorIcon from '@mui/icons-material/DragIndicator'; import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'; import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
import styles from './PageEditor.module.css'; import styles from './PageEditor.module.css';
import { useFileContext } from '../../contexts/FileContext'; import { useFileContext } from '../../contexts/FileContext';
@ -15,7 +18,7 @@ interface FileItem {
pageCount: number; pageCount: number;
thumbnail: string; thumbnail: string;
size: number; size: number;
splitBefore?: boolean; modifiedAt?: number | string | Date;
} }
interface FileThumbnailProps { interface FileThumbnailProps {
@ -29,6 +32,7 @@ interface FileThumbnailProps {
onViewFile: (fileId: string) => void; onViewFile: (fileId: string) => void;
onSetStatus: (status: string) => void; onSetStatus: (status: string) => void;
onReorderFiles?: (sourceFileId: string, targetFileId: string, selectedFileIds: string[]) => void; onReorderFiles?: (sourceFileId: string, targetFileId: string, selectedFileIds: string[]) => void;
onDownloadFile?: (fileId: string) => void;
toolMode?: boolean; toolMode?: boolean;
isSupported?: boolean; isSupported?: boolean;
} }
@ -36,36 +40,93 @@ interface FileThumbnailProps {
const FileThumbnail = ({ const FileThumbnail = ({
file, file,
index, index,
totalFiles,
selectedFiles, selectedFiles,
selectionMode,
onToggleFile, onToggleFile,
onDeleteFile, onDeleteFile,
onViewFile, onViewFile,
onSetStatus, onSetStatus,
onReorderFiles, onReorderFiles,
toolMode = false, onDownloadFile,
isSupported = true, isSupported = true,
}: FileThumbnailProps) => { }: FileThumbnailProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { pinnedFiles, pinFile, unpinFile, isFilePinned, activeFiles } = useFileContext(); const { pinFile, unpinFile, isFilePinned, activeFiles } = useFileContext();
// Drag and drop state // ---- Drag state ----
const [isDragging, setIsDragging] = useState(false); const [isDragging, setIsDragging] = useState(false);
const dragElementRef = useRef<HTMLDivElement | null>(null); const dragElementRef = useRef<HTMLDivElement | null>(null);
const [actionsWidth, setActionsWidth] = useState<number | undefined>(undefined);
const [showActions, setShowActions] = useState(false);
// Find the actual File object that corresponds to this FileItem // Resolve the actual File object for pin/unpin operations
const actualFile = activeFiles.find(f => f.name === file.name && f.size === file.size); const actualFile = useMemo(() => {
return activeFiles.find((f: File) => f.name === file.name && f.size === file.size);
}, [activeFiles, file.name, file.size]);
const isPinned = actualFile ? isFilePinned(actualFile) : false;
const formatFileSize = (bytes: number) => { const downloadSelectedFile = useCallback(() => {
// Prefer parent-provided handler if available
if (typeof onDownloadFile === 'function') {
onDownloadFile(file.id);
return;
}
// Fallback: attempt to download using the File object if provided
const maybeFile = (file as unknown as { file?: File }).file;
if (maybeFile instanceof File) {
const link = document.createElement('a');
link.href = URL.createObjectURL(maybeFile);
link.download = maybeFile.name || file.name || 'download';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(link.href);
return;
}
// If we can't find a way to download, surface a status message
onSetStatus?.(typeof t === 'function' ? t('downloadUnavailable', 'Download unavailable for this item') : 'Download unavailable for this item');
}, [file, onDownloadFile, onSetStatus, t]);
const handleRef = useRef<HTMLSpanElement | null>(null);
// ---- Selection ----
const isSelected = selectedFiles.includes(file.id);
// ---- Meta formatting ----
const prettySize = useMemo(() => {
const bytes = file.size ?? 0;
if (bytes === 0) return '0 B'; if (bytes === 0) return '0 B';
const k = 1024; const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB']; const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
const i = Math.floor(Math.log(bytes) / Math.log(k)); const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]; return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
}; }, [file.size]);
// Setup drag and drop using @atlaskit/pragmatic-drag-and-drop const extUpper = useMemo(() => {
const m = /\.([a-z0-9]+)$/i.exec(file.name ?? '');
return (m?.[1] || '').toUpperCase();
}, [file.name]);
const pageLabel = useMemo(
() =>
file.pageCount > 0
? `${file.pageCount} ${file.pageCount === 1 ? 'Page' : 'Pages'}`
: '',
[file.pageCount]
);
const dateLabel = useMemo(() => {
const d =
file.modifiedAt != null ? new Date(file.modifiedAt) : new Date(); // fallback
if (Number.isNaN(d.getTime())) return '';
return new Intl.DateTimeFormat(undefined, {
month: 'short',
day: '2-digit',
year: 'numeric',
}).format(d);
}, [file.modifiedAt]);
// ---- Drag & drop wiring ----
const fileElementRef = useCallback((element: HTMLDivElement | null) => { const fileElementRef = useCallback((element: HTMLDivElement | null) => {
if (!element) return; if (!element) return;
@ -111,252 +172,203 @@ const FileThumbnail = ({
dragCleanup(); dragCleanup();
dropCleanup(); dropCleanup();
}; };
}, [file.id, file.name, selectionMode, selectedFiles, onReorderFiles]); }, [file.id, file.name, selectedFiles, onReorderFiles]);
// Update dropdown width on resize
useEffect(() => {
const update = () => {
if (dragElementRef.current) setActionsWidth(dragElementRef.current.offsetWidth);
};
update();
window.addEventListener('resize', update);
return () => window.removeEventListener('resize', update);
}, []);
// ---- Card interactions ----
const handleCardClick = () => {
if (!isSupported) return;
onToggleFile(file.id);
};
return ( return (
<div <div
ref={fileElementRef} ref={fileElementRef}
data-file-id={file.id} data-file-id={file.id}
data-testid="file-thumbnail" data-testid="file-thumbnail"
className={` data-selected={isSelected}
${styles.pageContainer} data-supported={isSupported}
!rounded-lg className={`${styles.card} w-[18rem] h-[22rem] select-none flex flex-col shadow-sm transition-all relative`}
cursor-grab
select-none
w-[20rem]
h-[24rem]
flex flex-col items-center justify-center
flex-shrink-0
shadow-sm
hover:shadow-md
transition-all
relative
${selectionMode
? 'bg-white hover:bg-gray-50'
: 'bg-white hover:bg-gray-50'}
${isDragging ? 'opacity-50 scale-95' : ''}
`}
style={{ style={{
opacity: isSupported ? (isDragging ? 0.5 : 1) : 0.5, opacity: isSupported ? (isDragging ? 0.9 : 1) : 0.5,
filter: isSupported ? 'none' : 'grayscale(50%)' filter: isSupported ? 'none' : 'grayscale(50%)',
}} }}
tabIndex={0}
role="listitem"
aria-selected={isSelected}
onClick={handleCardClick}
> >
<div {/* Header bar */}
className={styles.checkboxContainer} <div
data-testid="file-thumbnail-checkbox" className={`${styles.header} ${
style={{ isSelected ? styles.headerSelected : styles.headerResting
position: 'absolute', }`}
top: 8, >
right: 8, {/* Logo/checkbox area */}
zIndex: 4, <div className={styles.logoMark}>
backgroundColor: 'white', {isSupported ? (
borderRadius: '4px', <CheckboxIndicator
padding: '2px', checked={isSelected}
boxShadow: '0 2px 4px rgba(0,0,0,0.1)', onChange={() => onToggleFile(file.id)}
pointerEvents: 'auto' color="var(--checkbox-checked-bg)"
}} />
onMouseDown={(e) => e.stopPropagation()} ) : (
onDragStart={(e) => { <div className={styles.unsupportedPill}>
e.preventDefault(); <span>
e.stopPropagation(); {t('unsupported', 'Unsupported')}
}} </span>
> </div>
<Checkbox )}
checked={selectedFiles.includes(file.id)}
onChange={(event) => {
event.stopPropagation();
if (isSupported) {
onToggleFile(file.id);
}
}}
onClick={(e) => e.stopPropagation()}
disabled={!isSupported}
size="sm"
/>
</div> </div>
{/* File content area */} {/* Centered index */}
<div className="file-container w-[90%] h-[80%] relative"> <div className={styles.headerIndex} aria-label={`Position ${index + 1}`}>
{/* Stacked file effect - multiple shadows to simulate pages */} {index + 1}
<div </div>
style={{
width: '100%', {/* Kebab menu */}
height: '100%', <ActionIcon
backgroundColor: 'var(--mantine-color-gray-1)', aria-label={t('moreOptions', 'More options')}
borderRadius: 6, variant="subtle"
border: '1px solid var(--mantine-color-gray-3)', className={styles.kebab}
padding: 4, onClick={(e) => {
display: 'flex', e.stopPropagation();
alignItems: 'center', setShowActions((v) => !v);
justifyContent: 'center',
position: 'relative',
boxShadow: '2px 2px 0 rgba(0,0,0,0.1), 4px 4px 0 rgba(0,0,0,0.05)'
}} }}
> >
<MoreVertIcon fontSize="small" />
</ActionIcon>
</div>
{/* Actions overlay */}
{showActions && (
<div
className={styles.actionsOverlay}
style={{ width: actionsWidth }}
onClick={(e) => e.stopPropagation()}
>
<button
className={styles.actionRow}
onClick={() => {
if (actualFile) {
if (isPinned) {
unpinFile(actualFile);
onSetStatus?.(`Unpinned ${file.name}`);
} else {
pinFile(actualFile);
onSetStatus?.(`Pinned ${file.name}`);
}
}
setShowActions(false);
}}
>
{isPinned ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
<span>{isPinned ? t('unpin', 'Unpin') : t('pin', 'Pin')}</span>
</button>
<button
className={styles.actionRow}
onClick={() => { downloadSelectedFile(); setShowActions(false); }}
>
<DownloadOutlinedIcon fontSize="small" />
<span>{t('download', 'Download')}</span>
</button>
<div className={styles.actionsDivider} />
<button
className={`${styles.actionRow} ${styles.actionDanger}`}
onClick={() => {
onDeleteFile(file.id);
onSetStatus(`Deleted ${file.name}`);
setShowActions(false);
}}
>
<DeleteOutlineIcon fontSize="small" />
<span>{t('delete', 'Delete')}</span>
</button>
</div>
)}
{/* Title + meta line */}
<div
style={{
padding: '0.5rem',
textAlign: 'center',
background: 'var(--file-card-bg)',
marginTop: '0.5rem',
marginBottom: '0.5rem',
}}>
<Text size="lg" fw={700} className={styles.title} lineClamp={2}>
{file.name}
</Text>
<Text
size="sm"
c="dimmed"
className={styles.meta}
lineClamp={3}
title={`${extUpper || 'FILE'}${prettySize}`}
>
{/* e.g., Jan 29, 2025 - PDF file - 3 Pages */}
{dateLabel}
{extUpper ? ` - ${extUpper} file` : ''}
{pageLabel ? ` - ${pageLabel}` : ''}
</Text>
</div>
{/* Preview area */}
<div className={`${styles.previewBox} mx-6 mb-4 relative flex-1`}>
<div className={styles.previewPaper}>
<img <img
src={file.thumbnail} src={file.thumbnail}
alt={file.name} alt={file.name}
draggable={false} draggable={false}
loading="lazy"
decoding="async"
onError={(e) => { onError={(e) => {
// Hide broken image if blob URL was revoked const img = e.currentTarget;
const img = e.target as HTMLImageElement;
img.style.display = 'none'; img.style.display = 'none';
img.parentElement?.setAttribute('data-thumb-missing', 'true');
}} }}
style={{ style={{
maxWidth: '100%', maxWidth: '80%',
maxHeight: '100%', maxHeight: '80%',
objectFit: 'contain', objectFit: 'contain',
borderRadius: 2, borderRadius: 0,
background: '#ffffff',
border: '1px solid var(--border-default)',
display: 'block',
marginLeft: 'auto',
marginRight: 'auto',
alignSelf: 'start'
}} }}
/> />
</div> </div>
{/* Page count badge - only show for PDFs */} {/* Pin indicator (bottom-left) */}
{file.pageCount > 0 && ( {isPinned && (
<Badge <span className={styles.pinIndicator} aria-hidden>
size="sm" <PushPinIcon fontSize="small" />
variant="filled" </span>
color="blue"
style={{
position: 'absolute',
top: 8,
left: 8,
zIndex: 3,
}}
>
{file.pageCount} {file.pageCount === 1 ? 'page' : 'pages'}
</Badge>
)} )}
{/* Unsupported badge */} {/* Drag handle (span wrapper so we can attach a ref reliably) */}
{!isSupported && ( <span ref={handleRef} className={styles.dragHandle} aria-hidden>
<Badge <DragIndicatorIcon fontSize="small" />
size="sm" </span>
variant="filled"
color="orange"
style={{
position: 'absolute',
top: 8,
right: selectionMode ? 48 : 8, // Avoid overlap with checkbox
zIndex: 3,
}}
>
{t("fileManager.unsupported", "Unsupported")}
</Badge>
)}
{/* File name overlay */}
<Text
className={styles.pageNumber}
size="xs"
fw={500}
c="white"
style={{
position: 'absolute',
bottom: 5,
left: 5,
right: 5,
background: 'rgba(0, 0, 0, 0.8)',
padding: '4px 6px',
borderRadius: 4,
zIndex: 2,
opacity: 0,
transition: 'opacity 0.2s ease-in-out',
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap'
}}
>
{file.name}
</Text>
{/* Hover controls */}
<div
className={styles.pageHoverControls}
style={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
background: 'rgba(0, 0, 0, 0.8)',
padding: '8px 12px',
borderRadius: 20,
opacity: 0,
transition: 'opacity 0.2s ease-in-out',
zIndex: 3,
display: 'flex',
gap: '8px',
alignItems: 'center',
whiteSpace: 'nowrap'
}}
>
{actualFile && (
<Tooltip label={isFilePinned(actualFile) ? "Unpin File" : "Pin File"}>
<ActionIcon
size="md"
variant="subtle"
c={isFilePinned(actualFile) ? "yellow" : "white"}
onClick={(e) => {
e.stopPropagation();
if (isFilePinned(actualFile)) {
unpinFile(actualFile);
onSetStatus(`Unpinned ${file.name}`);
} else {
pinFile(actualFile);
onSetStatus(`Pinned ${file.name}`);
}
}}
>
{isFilePinned(actualFile) ? (
<PushPinIcon style={{ fontSize: 20 }} />
) : (
<PushPinOutlinedIcon style={{ fontSize: 20 }} />
)}
</ActionIcon>
</Tooltip>
)}
<Tooltip label="Close File">
<ActionIcon
size="md"
variant="subtle"
c="orange"
onClick={(e) => {
e.stopPropagation();
onDeleteFile(file.id);
onSetStatus(`Closed ${file.name}`);
}}
>
<CloseIcon style={{ fontSize: 20 }} />
</ActionIcon>
</Tooltip>
</div>
<DragIndicatorIcon
style={{
position: 'absolute',
bottom: 4,
right: 4,
color: 'rgba(0,0,0,0.3)',
fontSize: 16,
zIndex: 1
}}
/>
</div> </div>
{/* File info */}
<div className="w-full px-4 py-2 text-center">
<Text size="sm" fw={500} truncate>
{file.name}
</Text>
<Text size="xs" c="dimmed">
{formatFileSize(file.size)}
</Text>
</div>
</div> </div>
); );
}; };
export default FileThumbnail; export default React.memo(FileThumbnail);

View File

@ -1,67 +1,265 @@
/* Page container hover effects - optimized for smooth scrolling */ /* =========================
.pageContainer { NEW styles for card UI
transition: transform 0.2s ease-in-out; ========================= */
/* Enable hardware acceleration for smoother scrolling */
will-change: transform; .card {
transform: translateZ(0); background: var(--file-card-bg);
backface-visibility: hidden; border-radius: 0.0625rem;
cursor: pointer;
transition: box-shadow 0.18s ease, outline-color 0.18s ease, transform 0.18s ease;
max-width: 100%;
max-height: 100%;
overflow: hidden;
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.card:hover {
box-shadow: var(--shadow-md);
}
.card[data-selected="true"] {
box-shadow: var(--shadow-sm);
}
/* While dragging */
.card.dragging,
.card:global(.dragging) {
outline: 1px solid var(--border-strong);
box-shadow: var(--shadow-md);
transform: none !important;
}
/* -------- Header -------- */
.header {
height: 2.25rem;
border-radius: 0.0625rem 0.0625rem 0 0;
display: grid;
grid-template-columns: 44px 1fr 44px;
align-items: center;
padding: 0 6px;
user-select: none;
background: var(--bg-toolbar);
color: var(--text-primary);
border-bottom: 1px solid var(--border-default);
}
.headerResting {
background: #3B4B6E; /* dark blue for unselected in light mode */
color: #FFFFFF;
border-bottom: 1px solid var(--border-default);
}
.headerSelected {
background: var(--header-selected-bg);
color: var(--header-selected-fg);
border-bottom: 1px solid var(--header-selected-bg);
}
/* Selected border color in light mode */
:global([data-mantine-color-scheme="light"]) .card[data-selected="true"] {
outline-color: var(--card-selected-border);
}
/* Reserve space for checkbox instead of logo */
.logoMark {
margin-left: 8px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
}
.headerIndex {
text-align: center;
font-weight: 500;
font-size: 18px;
letter-spacing: 0.04em;
}
.kebab {
justify-self: end;
color: inherit;
}
/* Menu dropdown */
.menuDropdown {
min-width: 210px;
}
/* -------- Title / Meta -------- */
.title {
line-height: 1.2;
color: var(--text-primary);
}
.meta {
margin-top: 2px;
color: var(--text-secondary);
}
/* -------- Preview area -------- */
.previewBox {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: var(--file-card-bg);
}
.previewPaper {
width: 100%;
height: calc(100% - 6px);
min-height: 9rem;
justify-content: center;
display: grid;
position: relative;
overflow: hidden;
background: var(--file-card-bg);
}
/* Thumbnail fallback */
.previewPaper[data-thumb-missing="true"]::after {
content: "No preview";
position: absolute; inset: 0;
display: grid; place-items: center;
color: var(--text-secondary);
font-weight: 600; font-size: 12px;
}
/* Drag handle grip */
.dragHandle {
position: absolute;
bottom: 6px;
right: 6px;
color: var(--text-secondary);
z-index: 1;
cursor: grab;
display: inline-flex;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.card,
.menuDropdown {
transition: none !important;
}
}
/* =========================
DARK MODE OVERRIDES
========================= */
:global([data-mantine-color-scheme="dark"]) .card {
outline-color: #3A4047; /* deselected stroke */
}
:global([data-mantine-color-scheme="dark"]) .card[data-selected="true"] {
outline-color: #4B525A; /* selected stroke (subtle grey) */
}
:global([data-mantine-color-scheme="dark"]) .headerResting {
background: #1F2329; /* requested default unselected color */
color: var(--tool-header-text); /* #D0D6DC */
border-bottom-color: var(--tool-header-border); /* #3A4047 */
}
:global([data-mantine-color-scheme="dark"]) .headerSelected {
background: var(--tool-header-border); /* #3A4047 */
color: var(--tool-header-text); /* #D0D6DC */
border-bottom-color: var(--tool-header-border);
}
:global([data-mantine-color-scheme="dark"]) .title {
color: #D0D6DC; /* title text */
}
:global([data-mantine-color-scheme="dark"]) .meta {
color: #6B7280; /* subtitle text */
}
/* Light mode selected header stroke override */
:global([data-mantine-color-scheme="light"]) .card[data-selected="true"] {
outline-color: #3B4B6E;
}
/* =========================
(Optional) legacy styles from your
previous component kept here to
avoid breaking other imports.
They are not used by the new card.
========================= */
.pageContainer {
transition: transform 0.2s ease-in-out;
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
}
.pageContainer:hover { transform: scale(1.02) translateZ(0); }
.pageContainer:hover .pageNumber { opacity: 1 !important; }
.pageContainer:hover .pageHoverControls { opacity: 1 !important; }
.checkboxContainer { transform: none !important; transition: none !important; }
.pageMoveAnimation { transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.pageMoving { z-index: 10; transform: scale(1.05); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.multiDragIndicator {
position: fixed;
background: rgba(59, 130, 246, 0.9);
color: white;
padding: 8px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
pointer-events: none;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
transform: translate(-50%, -50%);
backdrop-filter: blur(4px);
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.pulse { animation: pulse 1s infinite; }
.actionsOverlay {
position: absolute;
left: 0;
top: 44px; /* just below header */
background: var(--bg-toolbar);
border-bottom: 1px solid var(--border-default);
z-index: 20;
overflow: hidden;
animation: slideDown 140ms ease-out;
color: var(--text-primary);
}
@keyframes slideDown { from { transform: translateY(-8px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.actionRow {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: transparent;
border: none;
color: var(--text-primary);
cursor: pointer;
text-align: left;
}
.actionRow:hover { background: var(--hover-bg); }
.actionDanger { color: var(--text-brand-accent); }
.actionsDivider { height: 1px; background: var(--border-default); margin: 4px 0; }
.pinIndicator {
position: absolute;
bottom: 4px;
left: 4px;
z-index: 1;
color: rgba(0, 0, 0, 0.35); /* match drag handle color */
} }
.pageContainer:hover { .unsupportedPill {
transform: scale(1.02) translateZ(0); margin-left: 1.75rem;
} background: #6B7280;
.pageContainer:hover .pageNumber {
opacity: 1 !important;
}
.pageContainer:hover .pageHoverControls {
opacity: 1 !important;
}
/* Checkbox container - prevent transform inheritance */
.checkboxContainer {
transform: none !important;
transition: none !important;
}
/* Page movement animations */
.pageMoveAnimation {
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pageMoving {
z-index: 10;
transform: scale(1.05);
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
/* Multi-page drag indicator */
.multiDragIndicator {
position: fixed;
background: rgba(59, 130, 246, 0.9);
color: white; color: white;
padding: 8px 12px; padding: 4px 8px;
border-radius: 20px; border-radius: 12px;
font-size: 12px; font-size: 10px;
font-weight: 600; font-weight: 500;
pointer-events: none; display: flex;
z-index: 1000; align-items: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.3); justify-content: center;
transform: translate(-50%, -50%); min-width: 80px;
backdrop-filter: blur(4px); height: 20px;
} }
/* Animations */
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.pulse {
animation: pulse 1s infinite;
}

View File

@ -27,7 +27,7 @@ const createViewOptions = (switchingTo: ModeType | null) => [
) : ( ) : (
<VisibilityIcon fontSize="small" /> <VisibilityIcon fontSize="small" />
)} )}
<span>Read</span> <span>Viewer</span>
</div> </div>
), ),
value: "viewer", value: "viewer",

View File

@ -161,8 +161,8 @@ export function useRainbowTheme(initialTheme: 'light' | 'dark' = 'light'): Rainb
} }
lastToggleTime.current = currentTime; lastToggleTime.current = currentTime;
// Easter egg: Activate rainbow mode after 6 rapid toggles // Easter egg: Activate rainbow mode after 10 rapid toggles
if (toggleCount.current >= 6) { if (toggleCount.current >= 10) {
setThemeMode('rainbow'); setThemeMode('rainbow');
console.log('🌈 RAINBOW MODE ACTIVATED! 🌈 You found the secret easter egg!'); console.log('🌈 RAINBOW MODE ACTIVATED! 🌈 You found the secret easter egg!');
console.log('🌈 Button will be disabled for 3 seconds, then click once to exit!'); console.log('🌈 Button will be disabled for 3 seconds, then click once to exit!');

View File

@ -162,10 +162,22 @@
--landing-drop-inner-paper-bg: #BBDEFB; --landing-drop-inner-paper-bg: #BBDEFB;
--landing-drop-inner-paper-border: #90CAF9; --landing-drop-inner-paper-border: #90CAF9;
/* selected file header colors */
--header-selected-bg: #1E88E5; /* light mode selected header matches dark */
--header-selected-fg: #FFFFFF;
--file-card-bg: #FFFFFF; /* file card background (light/dark paired) */
/* shadows */ /* shadows */
--drop-shadow-color: rgba(0, 0, 0, 0.08); --drop-shadow-color: rgba(0, 0, 0, 0.08);
--drop-shadow-color-strong: rgba(0, 0, 0, 0.04); --drop-shadow-color-strong: rgba(0, 0, 0, 0.04);
--drop-shadow-filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.08)) drop-shadow(0 0.6rem 0.6rem rgba(0, 0, 0, 0.06)) drop-shadow(0 1.2rem 1rem rgba(0, 0, 0, 0.04)); --drop-shadow-filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.08)) drop-shadow(0 0.6rem 0.6rem rgba(0, 0, 0, 0.06)) drop-shadow(0 1.2rem 1rem rgba(0, 0, 0, 0.04));
/* Light mode card hover and selection */
--header-hover-bg: #3B4B6E; /* same family as selected, a touch muted for hover */
--card-selected-border: #3FAFFF; /* slightly more blue than dark mode header */
--checkbox-border: #2F83BF;
--checkbox-checked-bg: #3FAFFF;
--checkbox-tick: #FFFFFF;
} }
[data-mantine-color-scheme="dark"] { [data-mantine-color-scheme="dark"] {
@ -272,6 +284,12 @@
--landing-drop-inner-paper-bg: #2A3441; --landing-drop-inner-paper-bg: #2A3441;
--landing-drop-inner-paper-border: #3A4451; --landing-drop-inner-paper-border: #3A4451;
/* selected file header colors for dark */
--header-selected-bg: #1E88E5;
--header-selected-fg: #FFFFFF;
/* file card background (dark) */
--file-card-bg: #1F2329;
/* shadows */ /* shadows */
--drop-shadow-color: rgba(255, 255, 255, 0.08); --drop-shadow-color: rgba(255, 255, 255, 0.08);
--drop-shadow-color-strong: rgba(255, 255, 255, 0.04); --drop-shadow-color-strong: rgba(255, 255, 255, 0.04);