Skip to content

Favicon, and fold the upload and link import behind a + button - #32

Merged
davior merged 1 commit into
mainfrom
claude/determined-maxwell-wngvdd
Sep 28, 2026
Merged

davior merged 1 commit into
mainfrom
claude/determined-maxwell-wngvdd

Conversation

@davior

@davior davior commented Sep 28, 2026

Copy link
Copy Markdown
Owner

Summary

The drop zone and the link-import box sat above the library on every visit and pushed the grid down by both their heights. They're used in bursts, so now they fold away behind a + Add button.

Add panel

  • AddPanel: the drop zone and link import now share one "Add to library" panel with a ✕ close button. When closed it is hidden, not unmounted, so a half-pasted link, the import options and an upload's progress bar are still there when it reopens.
  • + Add button beside the search box opens and closes the panel (aria-expanded, aria-controls). It turns darker blue while the panel is open. The panel starts closed.
  • ✕ puts focus back on +, because the focused button is about to be hidden and focus would otherwise drop to <body>.
  • Dragging files over the library opens the panel, so hiding the drop zone doesn't remove drag-and-drop. Other drags (text, links, thumbnails) don't open it.
  • An upload still running behind a closed panel shows a spinner and its percentage on the + button.
  • An empty library shows an "Add files or a link" button instead of pointing "above" at a closed panel.

Favicon

  • A gecko on GAM's blue instead of green, so its tab can be told apart from Gecko Notes when both are open.
  • favicon.svg, plus a 32px PNG fallback and a 180px apple-touch-icon with square corners (iOS applies its own mask).
  • All three are served from src/assets, not public/, so Vite adds a content hash to their filenames. nginx serves .svg as immutable for a year, which is only safe for a hashed name.

Testing

  • npm run format:check, npm run lint, npm test (299 passed, 6 of them new in LibraryView.test.tsx) and npm run build all pass. The build emits the icons as hashed files.
  • New tests cover:
    • the panel starting closed, and + toggling it
    • ✕ closing it and returning focus
    • a half-pasted link and the import options surviving a close
    • file drags opening it and other drags not
    • upload progress showing on +
    • the empty-library button
  • Checked in Chromium (Playwright, mocked API):
    • light mode at 1280px and dark mode at 390px
    • the button and search box are both 38px tall with their tops aligned
    • ✕ returns focus to +
  • The favicon was checked at 16, 32, 64 and 180px on light and dark tab strips.
  • Backend pytest: 10 failures in this container, the same 10 with and without this change. ffmpeg, ffprobe and exiftool aren't installed here, and CI installs ffmpeg. No backend files changed.

🤖 Generated with Claude Code

https://claude.ai/code/session_0152keevURYGHzPysdHaz5ET


Generated by Claude Code

… + button

The drop zone and the link-import box sat above the library on every
visit and pushed the grid down by both their heights, even though they
are used in bursts.

- AddPanel: both now live in one "Add to library" panel with a close
  button. Hidden rather than unmounted when closed, so a half-pasted
  link, the import options and an upload's progress survive a close.
- LibraryView: a "+ Add" button beside the search box toggles it
  (aria-expanded, aria-controls). Closed by default. The close button
  hands focus back to +, since the focused button is about to be hidden.
- Dragging files over the library opens the panel, so hiding the drop
  zone does not remove drag-and-drop. Other drags are left alone.
- An upload still running behind a closed panel shows its percentage
  on the + button.
- The empty library offers an "Add files or a link" button instead of
  pointing "above" at a folded panel.
- Favicon: a gecko on GAM's blue, not green, so its tab is not the
  same as Notes' when the two are open side by side. SVG plus a 32px
  PNG fallback and a 180px apple-touch-icon, all taken from src/assets
  so Vite fingerprints them. nginx serves .svg as immutable for a year,
  which is only safe with a hashed name.

Six new LibraryView tests. The favicon was checked rendered at 16-180px
on light and dark tab strips. The toolbar was checked in Chromium at
1280px and 390px: button and search box are both 38px with tops aligned.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0152keevURYGHzPysdHaz5ET
@davior
davior marked this pull request as ready for review September 28, 2026 13:58
@davior
davior merged commit 1a9752a into main Sep 28, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants