danvics/openreader
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change folder creation popover

Browse source
This commit is contained in:
Richard Roberson 2025-02-12 21:12:49 -07:00
parent cc654f5f1d
commit c21302815c
1 changed files with 39 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
src/components/DocumentList.tsx
View file

@ -70,7 +70,6 @@ export function DocumentList() {
const [newFolderName, setNewFolderName] = useState(''); const [newFolderName, setNewFolderName] = useState('');
const [pendingFolderDocs, setPendingFolderDocs] = useState<{ source: DocumentListDocument, target: DocumentListDocument } | null>(null); const [pendingFolderDocs, setPendingFolderDocs] = useState<{ source: DocumentListDocument, target: DocumentListDocument } | null>(null);
const [collapsedFolders, setCollapsedFolders] = useState<Set<string>>(new Set()); const [collapsedFolders, setCollapsedFolders] = useState<Set<string>>(new Set());
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
useEffect(() => { useEffect(() => {
// Load saved state // Load saved state
@ -164,7 +163,6 @@ export function DocumentList() {
// Only highlight target if neither document is in a folder // Only highlight target if neither document is in a folder
if (!doc.folderId) { if (!doc.folderId) {
setDropTargetDoc(doc); setDropTargetDoc(doc);
setMousePosition({ x: e.clientX, y: e.clientY });
} }
} }
}; };
@ -213,9 +211,12 @@ export function DocumentList() {
}, [pendingFolderDocs, newFolderName]); }, [pendingFolderDocs, newFolderName]);
const handleFolderNameKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { const handleFolderNameKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter' || e.key === 'Escape') { if (e.key === 'Enter') {
e.preventDefault(); e.preventDefault();
createFolder(); createFolder();
} else if (e.key === 'Escape') {
setPendingFolderDocs(null);
setNewFolderName('');
} }
}; };
@ -328,17 +329,16 @@ export function DocumentList() {
{(doc.size / 1024 / 1024).toFixed(2)} MB {(doc.size / 1024 / 1024).toFixed(2)} MB
</p> </p>
</div> </div>
<Button
onClick={() => setDocumentToDelete({ id: doc.id, name: doc.name, type: doc.type })}
className="ml-4 p-2 text-muted hover:text-red-500 rounded-lg hover:bg-red-50 transition-colors"
aria-label="Delete document"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</Button>
</Link> </Link>
<Button
onClick={() => setDocumentToDelete({ id: doc.id, name: doc.name, type: doc.type })}
className="ml-4 p-2 text-muted hover:text-red-500 rounded-lg hover:bg-red-50 transition-colors"
aria-label="Delete document"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</Button>
</div> </div>
</div> </div>
); );
@ -387,7 +387,7 @@ export function DocumentList() {
className={`rounded-lg p-2 transition-all bg-offbase shadow-lg transition-shadow ${dropTargetDoc?.folderId === folder.id ? 'ring-2 ring-primary bg-primary/10' : '' className={`rounded-lg p-2 transition-all bg-offbase shadow-lg transition-shadow ${dropTargetDoc?.folderId === folder.id ? 'ring-2 ring-primary bg-primary/10' : ''
}`} }`}
> >
<div className={`flex items-center justify-between ${collapsedFolders.has(folder.id) ? 'mb-0': 'mb-2'}`}> <div className={`flex items-center justify-between ${collapsedFolders.has(folder.id) ? 'mb-0' : 'mb-2'}`}>
<div className="flex items-center"> <div className="flex items-center">
<h3 className="text-lg px-1 font-semibold">{folder.name}</h3> <h3 className="text-lg px-1 font-semibold">{folder.name}</h3>
<Button <Button
@ -452,35 +452,32 @@ export function DocumentList() {
</div> </div>
</div> </div>
<Popover className="fixed z-50"> <Popover className="fixed">
<> {pendingFolderDocs && (
{pendingFolderDocs && ( <div className="fixed inset-0 flex items-center justify-center">
<div style={{ <div className="fixed inset-0 bg-black/30 backdrop-blur-sm" />
position: 'fixed', <PopoverPanel
left: `${mousePosition.x}px`, static
top: `${mousePosition.y}px` className="relative bg-background p-6 rounded-lg shadow-lg max-w-sm w-full"
}}> >
<PopoverPanel <div className="space-y-2">
static <h3 className="text-lg font-semibold text-foreground">Create New Folder</h3>
className="bg-transparent backdrop-blur-md p-4 rounded-lg shadow-lg transform -translate-x-1/2 -translate-y-1/2" <div className="space-y-2">
> <input
<div className="space-y-2"> type="text"
<p className="text-sm font-medium text-foreground">Name your new folder</p> value={newFolderName}
<input onChange={(e) => setNewFolderName(e.target.value)}
type="text" onKeyDown={handleFolderNameKeyDown}
value={newFolderName} placeholder="Enter folder name"
onChange={(e) => setNewFolderName(e.target.value)} className="w-full rounded-lg bg-base py-2 px-3 text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-accent"
onKeyDown={handleFolderNameKeyDown} autoFocus
placeholder="Enter folder name" />
className="w-full rounded-lg bg-background py-2 px-3 text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-accent" <p className="text-xs text-muted"> Press Enter to create or Escape to cancel</p>
autoFocus </div>
/>
<p className="text-xs text-muted">Press Enter to create</p>
</div>
</PopoverPanel>
</div> </div>
)} </PopoverPanel>
</> </div>
)}
</Popover> </Popover>
<ConfirmDialog <ConfirmDialog