From e6df9846464f70b27f7f54ed6376abfe646bba91 Mon Sep 17 00:00:00 2001 From: Richard R Date: Sat, 30 May 2026 17:59:16 -0600 Subject: [PATCH 1/3] fix(ui): improve mobile layout and spacing for document list and gallery views - Adjust GalleryView container structure and paddings for better mobile scrolling - Refine document preview and details sizing for smaller screens - Update ListView grid columns and icon sizing for improved mobile fit - Ensure icons do not shrink and maintain alignment on all devices These changes enhance usability and visual consistency of document views on mobile devices. --- src/components/doclist/views/GalleryView.tsx | 8 +++++--- src/components/doclist/views/ListView.tsx | 10 +++++----- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/doclist/views/GalleryView.tsx b/src/components/doclist/views/GalleryView.tsx index eb8fd7b..862f523 100644 --- a/src/components/doclist/views/GalleryView.tsx +++ b/src/components/doclist/views/GalleryView.tsx @@ -174,10 +174,11 @@ export function GalleryView({ return (
-
+
+
{activeDoc ? (
-
+
@@ -206,7 +207,7 @@ export function GalleryView({
-
+
Type
{activeDoc.type}
Size
@@ -234,6 +235,7 @@ export function GalleryView({ ) : (

No documents to show

)} +
diff --git a/src/components/doclist/views/ListView.tsx b/src/components/doclist/views/ListView.tsx index e73f3ab..676b157 100644 --- a/src/components/doclist/views/ListView.tsx +++ b/src/components/doclist/views/ListView.tsx @@ -29,9 +29,9 @@ function formatDate(ms: number): string { } function KindIcon({ doc }: { doc: DocumentListDocument }) { - if (doc.type === 'pdf') return ; - if (doc.type === 'epub') return ; - return ; + if (doc.type === 'pdf') return ; + if (doc.type === 'epub') return ; + return ; } function HeaderCell({ @@ -131,7 +131,7 @@ function DocRow({ data-doc-tile aria-selected={isSelected} className={ - 'grid grid-cols-[minmax(0,1fr)_72px_88px_120px_28px] sm:grid-cols-[minmax(0,1fr)_88px_96px_140px_32px] items-center text-[12px] border-b border-offbase transition-colors duration-200 ease-out ' + + 'grid grid-cols-[minmax(0,1fr)_44px_72px_104px_28px] sm:grid-cols-[minmax(0,1fr)_56px_96px_140px_32px] items-center text-[12px] border-b border-offbase transition-colors duration-200 ease-out ' + (isSelected ? 'bg-offbase text-accent' : 'text-foreground hover:bg-offbase') + @@ -198,7 +198,7 @@ export function ListView({ return (
-
+
From b359d663522f8f8de285d4e17d69fdf4ea765b2d Mon Sep 17 00:00:00 2001 From: Richard R Date: Sat, 30 May 2026 18:06:12 -0600 Subject: [PATCH 2/3] 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 (
@@ -194,14 +201,14 @@ export function GalleryView({ Open 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) => ( - - - - + + ); From 1b075a35d37f90f0d9f8db76bda4d32226580648 Mon Sep 17 00:00:00 2001 From: Richard R Date: Sat, 30 May 2026 20:12:27 -0600 Subject: [PATCH 3/3] style(doclist): adjust skeleton grid columns for improved mobile responsiveness Update grid column widths in DocumentListSkeleton to better fit smaller screens, enhancing the mobile viewing experience and alignment consistency. --- src/components/doclist/DocumentListSkeleton.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/doclist/DocumentListSkeleton.tsx b/src/components/doclist/DocumentListSkeleton.tsx index d80c076..e717f40 100644 --- a/src/components/doclist/DocumentListSkeleton.tsx +++ b/src/components/doclist/DocumentListSkeleton.tsx @@ -31,7 +31,7 @@ function IconsSkeleton({ iconSize }: { iconSize: IconSize }) { function ListSkeleton() { return (
-
+
@@ -50,7 +50,7 @@ function ListSkeleton() { {Array.from({ length: 10 }).map((_, index) => (