diff --git a/src/components/DocumentList.tsx b/src/components/DocumentList.tsx index cff2478..b67991b 100644 --- a/src/components/DocumentList.tsx +++ b/src/components/DocumentList.tsx @@ -42,6 +42,8 @@ const generateDefaultFolderName = (doc1: DocumentListDocument, doc2: DocumentLis // Use the first common word that's at least 3 characters long const significant = commonWords.find(word => word.length >= 3); if (significant) { + if (significant === 'pdf') return 'PDFs'; + if (significant === 'epub') return 'EPUBs'; return `${significant.charAt(0).toUpperCase()}${significant.slice(1)}`; } } @@ -61,7 +63,7 @@ export function DocumentList() { isEPUBLoading, } = useDocuments(); - const [sortBy, setSortBy] = useState('date'); + const [sortBy, setSortBy] = useState('name'); const [sortDirection, setSortDirection] = useState('desc'); const [folders, setFolders] = useState([]); const [documentToDelete, setDocumentToDelete] = useState(null); @@ -71,6 +73,7 @@ export function DocumentList() { const [pendingFolderDocs, setPendingFolderDocs] = useState<{ source: DocumentListDocument, target: DocumentListDocument } | null>(null); const [collapsedFolders, setCollapsedFolders] = useState>(new Set()); const [isInitialized, setIsInitialized] = useState(false); + const [showHint, setShowHint] = useState(true); useEffect(() => { // Load saved state @@ -81,6 +84,7 @@ export function DocumentList() { setSortDirection(savedState.sortDirection); setFolders(savedState.folders); setCollapsedFolders(new Set(savedState.collapsedFolders)); + setShowHint(savedState.showHint ?? true); // Use saved hint state or default to true } setIsInitialized(true); }; @@ -94,7 +98,8 @@ export function DocumentList() { sortBy, sortDirection, folders, - collapsedFolders: Array.from(collapsedFolders) + collapsedFolders: Array.from(collapsedFolders), + showHint }; await saveDocumentListState(state); }; @@ -102,7 +107,7 @@ export function DocumentList() { if (isInitialized) { // Prevents saving empty state on first render or back navigation saveState(); } - }, [sortBy, sortDirection, folders, collapsedFolders]); + }, [sortBy, sortDirection, folders, collapsedFolders, showHint, isInitialized]); const allDocuments: DocumentListDocument[] = [ ...pdfDocs.map(doc => ({ @@ -214,6 +219,7 @@ export function DocumentList() { setNewFolderName(''); setDropTargetDoc(null); setDraggedDoc(null); + setShowHint(false); }, [pendingFolderDocs, newFolderName]); const handleFolderNameKeyDown = (e: React.KeyboardEvent) => { @@ -443,6 +449,21 @@ export function DocumentList() {
+ {showHint && allDocuments.length > 1 && ( +
+

Drag files on top of each other to make folders

+ +
+ )} + {folders.map(renderFolder)}
diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx index 28a58ab..a4784ac 100644 --- a/src/components/SettingsModal.tsx +++ b/src/components/SettingsModal.tsx @@ -197,17 +197,6 @@ export function SettingsModal({ isOpen, setIsOpen }: SettingsModalProps) { {isDev &&
- +
}
- +