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

31
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,7 +329,7 @@ export function DocumentList() {
{(doc.size / 1024 / 1024).toFixed(2)} MB {(doc.size / 1024 / 1024).toFixed(2)} MB
</p> </p>
</div> </div>
</Link>
<Button <Button
onClick={() => setDocumentToDelete({ id: doc.id, name: doc.name, type: doc.type })} 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" className="ml-4 p-2 text-muted hover:text-red-500 rounded-lg hover:bg-red-50 transition-colors"
@ -338,7 +339,6 @@ export function DocumentList() {
<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" /> <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> </svg>
</Button> </Button>
</Link>
</div> </div>
</div> </div>
); );
@ -452,35 +452,32 @@ export function DocumentList() {
</div> </div>
</div> </div>
<Popover className="fixed z-50"> <Popover className="fixed">
<>
{pendingFolderDocs && ( {pendingFolderDocs && (
<div style={{ <div className="fixed inset-0 flex items-center justify-center">
position: 'fixed', <div className="fixed inset-0 bg-black/30 backdrop-blur-sm" />
left: `${mousePosition.x}px`,
top: `${mousePosition.y}px`
}}>
<PopoverPanel <PopoverPanel
static static
className="bg-transparent backdrop-blur-md p-4 rounded-lg shadow-lg transform -translate-x-1/2 -translate-y-1/2" className="relative bg-background p-6 rounded-lg shadow-lg max-w-sm w-full"
> >
<div className="space-y-2"> <div className="space-y-2">
<p className="text-sm font-medium text-foreground">Name your new folder</p> <h3 className="text-lg font-semibold text-foreground">Create New Folder</h3>
<div className="space-y-2">
<input <input
type="text" type="text"
value={newFolderName} value={newFolderName}
onChange={(e) => setNewFolderName(e.target.value)} onChange={(e) => setNewFolderName(e.target.value)}
onKeyDown={handleFolderNameKeyDown} onKeyDown={handleFolderNameKeyDown}
placeholder="Enter folder name" 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" className="w-full rounded-lg bg-base py-2 px-3 text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-accent"
autoFocus autoFocus
/> />
<p className="text-xs text-muted">Press Enter to create</p> <p className="text-xs text-muted"> Press Enter to create or Escape to cancel</p>
</div>
</div> </div>
</PopoverPanel> </PopoverPanel>
</div> </div>
)} )}
</>
</Popover> </Popover>
<ConfirmDialog <ConfirmDialog