Gallery folder creation uses `window.prompt` instead of an in-app dialog #73

New issue

Closed

opened 2026-09-14 03:17:02 +00:00 by Mark · 0 comments

Mark commented

2026-09-14 03:17:02 +00:00

Owner

Where: src/pages/Gallery.tsx:362-385 (New Folder button).

Bug: The button calls window.prompt('Enter folder name:') (line 365). Native prompt is blocking, unstyled, breaks the visual language, and bypasses keyboard focus management.

Fix consistent with existing patterns:
Mirror src/components/gallery/DeleteDialog.tsx. Concretely:

Create src/components/gallery/NewFolderDialog.tsx with the same prop shape as DeleteDialog (open, onClose, onConfirm(name), plus existingFolders: string[] for duplicate-name check).
In Gallery.tsx: add const [showNewFolder, setShowNewFolder] = useState(false); replace the button onClick with () => setShowNewFolder(true); render <NewFolderDialog open={showNewFolder} onClose={() => setShowNewFolder(false)} onConfirm={handleCreateFolder} existingFolders={folders.map(f => f.name)} /> near the existing DeleteDialog mount.
Validation in the dialog: empty name → disable Confirm; duplicate name (case-insensitive) → inline error and disable Confirm; Escape → close.

Acceptance: the New Folder button opens an in-app modal; Cancel/Confirm/Escape all behave like the rest of the app.

**Where:** `src/pages/Gallery.tsx:362-385` (New Folder button). **Bug:** The button calls `window.prompt('Enter folder name:')` (line 365). Native prompt is blocking, unstyled, breaks the visual language, and bypasses keyboard focus management. **Fix consistent with existing patterns:** Mirror `src/components/gallery/DeleteDialog.tsx`. Concretely: 1. Create `src/components/gallery/NewFolderDialog.tsx` with the same prop shape as `DeleteDialog` (`open`, `onClose`, `onConfirm(name)`, plus `existingFolders: string[]` for duplicate-name check). 2. In `Gallery.tsx`: add `const [showNewFolder, setShowNewFolder] = useState(false)`; replace the button onClick with `() => setShowNewFolder(true)`; render `<NewFolderDialog open={showNewFolder} onClose={() => setShowNewFolder(false)} onConfirm={handleCreateFolder} existingFolders={folders.map(f => f.name)} />` near the existing `DeleteDialog` mount. 3. Validation in the dialog: empty name → disable Confirm; duplicate name (case-insensitive) → inline error and disable Confirm; Escape → close. Acceptance: the New Folder button opens an in-app modal; Cancel/Confirm/Escape all behave like the rest of the app.