Gallery's per-card rename silently drops empty-string input — user types a name, presses Enter, nothing happens, no toast or visual feedback #193

New issue

Closed

opened 2026-10-03 23:48:37 +00:00 by Mark · 0 comments

Mark commented

2026-10-03 23:48:37 +00:00

Owner

Finding

src/components/gallery/DesignCard.tsx:79-83:

const handleRenameSubmit = () => {
  if (renameValue.trim() && renameValue !== design.filename) {
    onRename(design.id, renameValue.trim());
  }
  setIsRenaming(false);
};

If the user clears the field and presses Enter (or Escape, or clicks away), the if is false, the rename is not dispatched, and setIsRenaming(false) exits edit mode. The user sees their input vanish with no feedback.

This is the same UX as the validation not happening — empty input is silently treated as "cancel," but the user has no signal that "empty" is the reason.

Compare to the same flow on the Workspace's inline filename edit (AppHeader.tsx:120-130): same pattern, same silence on empty input.

A user who:

Clicks the filename to rename
Accidentally selects all and types nothing (or types only spaces)
Presses Enter

...sees the field revert to the original name with no error message. They might think the rename worked.

Where

Gallery: src/components/gallery/DesignCard.tsx:79-83
Workspace filename: src/components/workspace/AppHeader.tsx:120-130
No toast: addToast is imported in the App but no call site fires for empty rename

Suggested fix shape

Two options:

Show an error toast when the user enters an empty name:

const handleRenameSubmit = () => {
  if (!renameValue.trim()) {
    addToast('error', 'Filename cannot be empty');
    setRenameValue(design.filename); // restore the original
    setIsRenaming(false);
    return;
  }
  if (renameValue !== design.filename) {
    onRename(design.id, renameValue.trim());
  }
  setIsRenaming(false);
};

The toast needs to be plumbed from the parent (Gallery) into DesignCard as a new prop, or via a shared useToast hook.

Disable the input on empty value: visually gray out the input when renameValue.trim() is empty, and don't accept Enter until the user has a non-empty value. Less informative but more discoverable.

Option 1 is the right product move; option 2 is the lightweight alternative.

Severity

Low. The user can try again with a valid name. The silent failure is confusing.

Discovered by

Gap analysis (2026-10-02) of gallery UX edge cases.

#151 (closed) — Gallery sort + favorites quick-filter. Same surface, related polish.
The Workspace's AppHeader has the same issue (referenced above).

## Finding `src/components/gallery/DesignCard.tsx:79-83`: ```ts const handleRenameSubmit = () => { if (renameValue.trim() && renameValue !== design.filename) { onRename(design.id, renameValue.trim()); } setIsRenaming(false); }; ``` If the user clears the field and presses Enter (or Escape, or clicks away), the `if` is false, the rename is not dispatched, and `setIsRenaming(false)` exits edit mode. The user sees their input vanish with no feedback. This is the same UX as the validation not happening — empty input is silently treated as "cancel," but the user has no signal that "empty" is the reason. Compare to the same flow on the Workspace's inline filename edit (`AppHeader.tsx:120-130`): same pattern, same silence on empty input. A user who: - Clicks the filename to rename - Accidentally selects all and types nothing (or types only spaces) - Presses Enter ...sees the field revert to the original name with no error message. They might think the rename worked. ## Where - Gallery: `src/components/gallery/DesignCard.tsx:79-83` - Workspace filename: `src/components/workspace/AppHeader.tsx:120-130` - No toast: `addToast` is imported in the App but no call site fires for empty rename ## Suggested fix shape Two options: 1. **Show an error toast** when the user enters an empty name: ```ts const handleRenameSubmit = () => { if (!renameValue.trim()) { addToast('error', 'Filename cannot be empty'); setRenameValue(design.filename); // restore the original setIsRenaming(false); return; } if (renameValue !== design.filename) { onRename(design.id, renameValue.trim()); } setIsRenaming(false); }; ``` The toast needs to be plumbed from the parent (Gallery) into DesignCard as a new prop, or via a shared `useToast` hook. 2. **Disable the input on empty value**: visually gray out the input when `renameValue.trim()` is empty, and don't accept Enter until the user has a non-empty value. Less informative but more discoverable. Option 1 is the right product move; option 2 is the lightweight alternative. ## Severity Low. The user can try again with a valid name. The silent failure is confusing. ## Discovered by Gap analysis (2026-10-02) of gallery UX edge cases. ## Related - #151 (closed) — Gallery sort + favorites quick-filter. Same surface, related polish. - The Workspace's AppHeader has the same issue (referenced above).