From 98736bf6e39d2948143f35201557becce556753d Mon Sep 17 00:00:00 2001 From: Richard R Date: Thu, 28 May 2026 17:20:02 -0600 Subject: [PATCH] refactor(doclist): remove columns view and update text labeling Eliminate the deprecated "columns" view mode from the document list, toolbar, icons, and skeleton components. Update all related types and logic to only support "icons", "list", and "gallery" views. Standardize user-facing labels from "HTML" to "Text" for improved clarity across the sidebar, segment locator labels, and document counts. Clean up associated code and types to reflect these changes. --- src/components/doclist/DocumentList.tsx | 17 +- .../doclist/DocumentListSkeleton.tsx | 32 ---- src/components/doclist/views/ColumnsView.tsx | 179 ------------------ .../doclist/window/FinderSidebar.tsx | 2 +- .../doclist/window/FinderToolbar.tsx | 12 +- src/components/doclist/window/finderIcons.tsx | 8 - src/components/reader/SegmentsSidebar.tsx | 4 +- src/types/documents.ts | 4 +- 8 files changed, 11 insertions(+), 247 deletions(-) delete mode 100644 src/components/doclist/views/ColumnsView.tsx diff --git a/src/components/doclist/DocumentList.tsx b/src/components/doclist/DocumentList.tsx index 6e484e6..684c102 100644 --- a/src/components/doclist/DocumentList.tsx +++ b/src/components/doclist/DocumentList.tsx @@ -33,7 +33,6 @@ import { FinderSidebar } from './window/FinderSidebar'; import { FinderStatusBar } from './window/FinderStatusBar'; import { IconsView } from './views/IconsView'; import { ListView } from './views/ListView'; -import { ColumnsView } from './views/ColumnsView'; import { GalleryView } from './views/GalleryView'; let cachedDocumentListState: DocumentListState | null = null; @@ -71,7 +70,8 @@ const DEFAULT_STATE: Required< function normalizeViewMode(stored: DocumentListState['viewMode']): ViewMode { if (stored === 'grid' || stored === undefined) return 'icons'; if (stored === 'list') return 'list'; - return stored; + if (stored === 'gallery') return 'gallery'; + return 'icons'; } function generateDefaultFolderName( @@ -463,7 +463,7 @@ function DocumentListInner({ brand, appActions }: DocumentListInnerProps) { const parts: string[] = []; if (counts.pdf) parts.push(`${counts.pdf} PDF${counts.pdf === 1 ? '' : 's'}`); if (counts.epub) parts.push(`${counts.epub} EPUB${counts.epub === 1 ? '' : 's'}`); - if (counts.html) parts.push(`${counts.html} HTML${counts.html === 1 ? '' : 's'}`); + if (counts.html) parts.push(`${counts.html} Text${counts.html === 1 ? ' Doc' : ' Docs'}`); return parts.join(' • '); }, [counts]); @@ -474,8 +474,7 @@ function DocumentListInner({ brand, appActions }: DocumentListInnerProps) { const isLoading = isPDFLoading || isEPUBLoading || isHTMLLoading; - const fallbackViewMode: ViewMode = - viewMode === 'columns' && isNarrow ? 'list' : viewMode; + const fallbackViewMode: ViewMode = viewMode; const effectiveSidebarOpen = isNarrow ? mobileSidebarOpen : sidebarOpen; return ( @@ -500,7 +499,6 @@ function DocumentListInner({ brand, appActions }: DocumentListInnerProps) { : setSidebarOpen((p) => !p) } isSidebarOpen={effectiveSidebarOpen} - isNarrow={isNarrow} leftSlot={brand} /> } @@ -588,13 +586,6 @@ function DocumentListInner({ brand, appActions }: DocumentListInnerProps) { onMergeIntoFolder={handleMergeIntoFolder} /> )} - {fallbackViewMode === 'columns' && ( - - )} {fallbackViewMode === 'gallery' && ( -
-
-
-
-
- {Array.from({ length: 11 }).map((_, rowIndex) => ( -
- ))} -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ); -} - function GallerySkeleton() { return (
@@ -142,8 +112,6 @@ export function DocumentListSkeleton({ let body; if (viewMode === 'list') { body = ; - } else if (viewMode === 'columns') { - body = ; } else if (viewMode === 'gallery') { body = ; } else { diff --git a/src/components/doclist/views/ColumnsView.tsx b/src/components/doclist/views/ColumnsView.tsx deleted file mode 100644 index 922c07a..0000000 --- a/src/components/doclist/views/ColumnsView.tsx +++ /dev/null @@ -1,179 +0,0 @@ -'use client'; - -import Link from 'next/link'; -import { useEffect, useState } from 'react'; -import { useDrag, useDrop } from 'react-dnd'; -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 { useDocumentSelection } from '../dnd/DocumentSelectionContext'; -import { DND_DOCUMENT, type DocumentDragItem } from '../dnd/dndTypes'; - -interface ColumnsViewProps { - documents: DocumentListDocument[]; - onDeleteDoc: (doc: DocumentListDocument) => void; - onMergeIntoFolder: (sources: DocumentListDocument[], target: DocumentListDocument) => void; -} - -function KindIcon({ doc }: { doc: DocumentListDocument }) { - if (doc.type === 'pdf') return ; - if (doc.type === 'epub') return ; - return ; -} - -function ColumnDocRow({ - doc, - active, - onClick, - onMergeIntoFolder, -}: { - doc: DocumentListDocument; - active: boolean; - onClick: () => void; - onMergeIntoFolder: (sources: DocumentListDocument[], target: DocumentListDocument) => void; -}) { - const selection = useDocumentSelection(); - const isSelected = selection.isSelected(doc); - const isInFolder = Boolean(doc.folderId); - - const [{ isDragging }, dragRef] = useDrag(() => ({ - type: DND_DOCUMENT, - item: () => { - const sel = selection.getSelectedDocs(); - const dragging = isSelected && sel.length > 1 ? sel : [doc]; - if (!isSelected) selection.replace([doc]); - return { ids: dragging.map((d) => d.id), docs: dragging, fromFolderId: doc.folderId }; - }, - collect: (m) => ({ isDragging: m.isDragging() }), - }), [doc, isSelected]); - - const [{ isOver, canDrop }, dropRef] = useDrop(() => ({ - accept: DND_DOCUMENT, - canDrop: (item) => !isInFolder && !item.ids.includes(doc.id), - drop: (item) => onMergeIntoFolder(item.docs, doc), - collect: (m) => ({ isOver: m.isOver({ shallow: true }), canDrop: m.canDrop() }), - }), [doc, isInFolder, onMergeIntoFolder]); - - const setRefs = (node: HTMLDivElement | null) => { - dragRef(node); - dropRef(node); - }; - - return ( -
- - - - {doc.name} -
- ); -} - -function Column({ children, title }: { children: React.ReactNode; title?: string }) { - return ( -
- {title && ( -
- {title} -
- )} -
{children}
-
- ); -} - -export function ColumnsView({ - documents, - onDeleteDoc, - onMergeIntoFolder, -}: ColumnsViewProps) { - const { setVisibleOrder } = useDocumentSelection(); - const [selectedDoc, setSelectedDoc] = useState(null); - const openHref = selectedDoc - ? `/${selectedDoc.type}/${encodeURIComponent(selectedDoc.id)}` - : null; - - useEffect(() => { - setVisibleOrder(documents); - }, [documents, setVisibleOrder]); - - useEffect(() => { - if (documents.length === 0) { - if (selectedDoc !== null) setSelectedDoc(null); - return; - } - - if (!selectedDoc) { - setSelectedDoc(documents[0]); - return; - } - - const selectedStillExists = documents.some( - (d) => d.id === selectedDoc.id && d.type === selectedDoc.type, - ); - if (!selectedStillExists) { - setSelectedDoc(documents[0]); - } - }, [documents, selectedDoc]); - - return ( -
- - {documents.map((doc) => ( - setSelectedDoc(doc)} - onMergeIntoFolder={onMergeIntoFolder} - /> - ))} - - - {selectedDoc && ( -
-
-
- -
-

- {selectedDoc.name} -

-

- {selectedDoc.type.toUpperCase()} • {formatDocumentSize(selectedDoc.size)} -

-
- - Open - - -
-
-
- )} -
- ); -} diff --git a/src/components/doclist/window/FinderSidebar.tsx b/src/components/doclist/window/FinderSidebar.tsx index d754336..c8e4c82 100644 --- a/src/components/doclist/window/FinderSidebar.tsx +++ b/src/components/doclist/window/FinderSidebar.tsx @@ -246,7 +246,7 @@ export function FinderSidebar({ active={filter === 'html'} onClick={() => onFilterChange('html')} icon={} - label="HTML / Text" + label="Text" count={counts.html} /> diff --git a/src/components/doclist/window/FinderToolbar.tsx b/src/components/doclist/window/FinderToolbar.tsx index 92798ee..9c32dab 100644 --- a/src/components/doclist/window/FinderToolbar.tsx +++ b/src/components/doclist/window/FinderToolbar.tsx @@ -5,7 +5,6 @@ import type { IconSize, SortBy, SortDirection, ViewMode } from '@/types/document import { IconsViewIcon, ListViewIcon, - ColumnsViewIcon, GalleryViewIcon, SearchIcon, HamburgerIcon, @@ -26,8 +25,6 @@ interface FinderToolbarProps { onQueryChange: (q: string) => void; onToggleSidebar: () => void; isSidebarOpen: boolean; - /** True when the columns view should be disabled (mobile viewport). */ - isNarrow: boolean; /** App-level content rendered at the far left (brand/logo). */ leftSlot?: ReactNode; /** App-level content rendered at the far right (settings, user menu). */ @@ -37,7 +34,6 @@ interface FinderToolbarProps { const VIEW_BUTTONS: Array<{ value: ViewMode; label: string; Icon: typeof IconsViewIcon }> = [ { value: 'icons', label: 'Icons', Icon: IconsViewIcon }, { value: 'list', label: 'List', Icon: ListViewIcon }, - { value: 'columns', label: 'Columns', Icon: ColumnsViewIcon }, { value: 'gallery', label: 'Gallery', Icon: GalleryViewIcon }, ]; @@ -84,7 +80,6 @@ export function FinderToolbar({ onQueryChange, onToggleSidebar, isSidebarOpen, - isNarrow, leftSlot, rightSlot, }: FinderToolbarProps) { @@ -113,7 +108,6 @@ export function FinderToolbar({
{VIEW_BUTTONS.map(({ value, label, Icon }) => { - const disabled = value === 'columns' && isNarrow; const active = viewMode === value; const isIconsToggle = value === 'icons'; return ( @@ -123,16 +117,14 @@ export function FinderToolbar({ >