[rene-roid]

Summary

Adds a Liquid Glass interface style, modelled on the Umbrel App Store, next to the existing look, and makes the phone layout work properly. The original look stays the default, and a one-time prompt asks which one to use.

• Interface style setting (ui_style: classic | glass, default classic). It's stored on the server and copied to localStorage so the right style paints before settings load. Updating doesn't restyle anyone's install.
• One-time style picker. Right after login, a "Pick your look" dialog asks which style to use, with Original preselected. The answer is stored on the server (ui_style_chosen), so it shows once per install, including existing installs the first time they load this version. The "What's new" dialog waits until it's answered, so the two never stack.
• Liquid Glass style: frosted top bar and dock, pill navigation with plain monochrome icons, pill buttons and search, subtle white borders and a soft glow in the accent colour. Thumbnails and covers keep modest 10px corners.
• Dashboard banner (Glass only): headline, library stats and a few floating thumbnails from recently added media. It has a close button, and the "Dashboard banner" switch (dashboard_hero) in Appearance brings it back.
• Responsive navbar. Nav links show as icons between 768 and 1279px wide so nothing gets pushed off the bar. Under 768px they move to a bottom dock: floating and frosted in Glass, a plain tab bar in Original. All five labels fit down to a 320px screen.
• Phones:
  • The top bar and the sticky filter bar slide away when you scroll down and come back when you scroll up.
  • The thin tag-sidebar strip is gone. A "Libraries & tags" button opens the drawer instead.
  • Opening another page starts it at the top with the bars showing, instead of keeping the previous page's scroll offset.
• Layout fixes:
  • Sticky toolbars and full-height panes used to assume the navbar is always 60px, so they overlapped when it wrapped to two rows. They now follow its real height (--nav-h).
  • The selection bar and toasts sit above the dock.
  • The dock's bottom spacing lives on the app wrapper, so pages that fit the screen, like Settings and the login screen, don't scroll by the dock's height.

How it's built

• Shared borders, surfaces and corner radii are Tailwind theme tokens (border-line, bg-surface, bg-bar, rounded-btn, rounded-field, rounded-panel, rounded-media). Their default values give the Original look, and [data-ui='glass'] on <html> swaps them.
• Styling that only applies to Glass uses a glass: Tailwind custom variant. Only the Dashboard renders different markup per style.
• Server: three new editable settings (ui_style, ui_style_chosen, dashboard_hero). An unknown ui_style is rejected up front, together with master's new check, so a bad request saves nothing.

Screenshots

First visit: the style picker

Desktop	Phone

Original, the default

Desktop	Phone

Liquid Glass

Desktop	Phone

Tablet (900px): icon-only nav	Settings → Appearance

Testing

• bun test --isolate: 129 pass, including new tests for the default style, saving the picker's answer, and rejecting an unknown style without saving the rest of the request.
• Typecheck, lint (no errors) and vite build are clean.
• Checked in a browser in both styles at 320, 360, 375, 390, 800, 900, 1280 and 1440px: dock labels, hide-on-scroll, the tag drawer, the selection bar, the media viewer, Settings, the login screen, and the picker flow (shown once, then "What's new", not shown again after a reload).