From b359d663522f8f8de285d4e17d69fdf4ea765b2d Mon Sep 17 00:00:00 2001
From: Richard R <me@richardr.dev>
Date: Sat, 30 May 2026 18:06:12 -0600
Subject: [PATCH] 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.
---
 src/components/doclist/views/GalleryView.tsx  | 13 ++++++++++---
 src/components/doclist/window/finderIcons.tsx |  6 ++----
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/doclist/views/GalleryView.tsx b/src/components/doclist/views/GalleryView.tsx
index 862f523..339fa51 100644
--- a/src/components/doclist/views/GalleryView.tsx
+++ b/src/components/doclist/views/GalleryView.tsx
@@ -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>
diff --git a/src/components/doclist/window/finderIcons.tsx b/src/components/doclist/window/finderIcons.tsx
index f2f0fa3..dd376ad 100644
--- a/src/components/doclist/window/finderIcons.tsx
+++ b/src/components/doclist/window/finderIcons.tsx
@@ -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>
 );