refactor(doclist): update GalleryView keyboard handling and icon visuals

- Add Delete/Backspace keyboard shortcut for document deletion in GalleryView
- Use buttonClass utility for consistent button styling
- Simplify GalleryViewIcon SVG for improved clarity and alignment

These changes streamline user interactions and enhance visual consistency in the document gallery view.
This commit is contained in:
Richard R 2026-05-30 18:06:12 -06:00
parent e6df984646
commit b359d66352
2 changed files with 12 additions and 7 deletions

View file

@ -7,6 +7,7 @@ import type { DocumentListDocument } from '@/types/documents';
import { PDFIcon, EPUBIcon, FileIcon } from '@/components/icons/Icons'; import { PDFIcon, EPUBIcon, FileIcon } from '@/components/icons/Icons';
import { DocumentPreview } from '@/components/doclist/DocumentPreview'; import { DocumentPreview } from '@/components/doclist/DocumentPreview';
import { formatDocumentSize } from '@/components/doclist/formatSize'; import { formatDocumentSize } from '@/components/doclist/formatSize';
import { buttonClass } from '@/components/formPrimitives';
import { useDocumentSelection } from '../dnd/DocumentSelectionContext'; import { useDocumentSelection } from '../dnd/DocumentSelectionContext';
import { DND_DOCUMENT, documentIdentityKey, type DocumentDragItem } from '../dnd/dndTypes'; import { DND_DOCUMENT, documentIdentityKey, type DocumentDragItem } from '../dnd/dndTypes';
@ -166,11 +167,17 @@ export function GalleryView({
setActiveIdx((i) => Math.min(documents.length - 1, i + 1)); setActiveIdx((i) => Math.min(documents.length - 1, i + 1));
} else if (e.key === 'ArrowLeft') { } else if (e.key === 'ArrowLeft') {
setActiveIdx((i) => Math.max(0, i - 1)); setActiveIdx((i) => Math.max(0, i - 1));
} else if (e.key === 'Delete' || e.key === 'Backspace') {
const doc = documents[activeIdx];
if (doc) {
e.preventDefault();
onDeleteDoc(doc);
}
} }
}; };
window.addEventListener('keydown', onKey); window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey);
}, [documents.length]); }, [documents, activeIdx, onDeleteDoc]);
return ( return (
<div className="flex-1 min-h-0 flex flex-col"> <div className="flex-1 min-h-0 flex flex-col">
@ -194,14 +201,14 @@ export function GalleryView({
<Link <Link
href={openHref || '/app'} href={openHref || '/app'}
prefetch={false} prefetch={false}
className="h-8 px-4 inline-flex items-center justify-center rounded-md bg-accent text-background text-[12px] font-medium hover:bg-secondary-accent hover:scale-[1.01] transition-all duration-200 ease-out" className={buttonClass({ variant: 'primary', size: 'sm' })}
> >
Open Open
</Link> </Link>
<button <button
type="button" type="button"
onClick={() => onDeleteDoc(activeDoc)} onClick={() => onDeleteDoc(activeDoc)}
className="h-8 px-3 rounded-md border border-offbase bg-base text-[12px] text-muted hover:text-accent hover:border-accent hover:bg-offbase hover:scale-[1.01] transition-all duration-200 ease-out" className={buttonClass({ variant: 'secondary', size: 'sm' })}
> >
Delete Delete
</button> </button>

View file

@ -62,10 +62,8 @@ export const ListViewIcon = (props: IconProps) => (
export const GalleryViewIcon = (props: IconProps) => ( export const GalleryViewIcon = (props: IconProps) => (
<svg {...baseSvg(props)}> <svg {...baseSvg(props)}>
<rect x="3" y="4" width="18" height="11" rx="1.5" /> <rect x="4" y="4" width="16" height="13" rx="1.5" />
<rect x="4" y="17" width="4" height="3" rx="0.6" /> <path d="M5 20h14" />
<rect x="10" y="17" width="4" height="3" rx="0.6" />
<rect x="16" y="17" width="4" height="3" rx="0.6" />
</svg> </svg>
); );