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 { DocumentPreview } from '@/components/doclist/DocumentPreview';
import { formatDocumentSize } from '@/components/doclist/formatSize';
import { buttonClass } from '@/components/formPrimitives';
import { useDocumentSelection } from '../dnd/DocumentSelectionContext';
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));
} else if (e.key === 'ArrowLeft') {
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);
return () => window.removeEventListener('keydown', onKey);
}, [documents.length]);
}, [documents, activeIdx, onDeleteDoc]);
return (
<div className="flex-1 min-h-0 flex flex-col">
@ -194,14 +201,14 @@ export function GalleryView({
<Link
href={openHref || '/app'}
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
</Link>
<button
type="button"
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
</button>

View file

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