Improve website UX: theming, navigation, Studio and uploads

[pedrobritx]

Summary

A round of mobile testing surfaced several UX issues. This PR addresses all of them in one branch.

1. Theme bug — light mode showed dark on mobile 🐞

styles/tokens.css defined dark tokens via @media (prefers-color-scheme: dark) { :root { … } }, which has equal specificity to [data-theme='light'] but comes later in source order — so on a device set to dark, an explicit Light choice was overridden. Scoping the media block to :root:not([data-theme]) lets the explicit attribute selectors always win, while still honouring system preference before/without a choice.

2. Manifesto surfaced on the front page

Added a footer to the home page with a prominent "Read the manifesto →" link plus Source on GitHub / MIT License links. Previously the manifesto was only reachable via the sidebar (desktop) or buried in Settings (mobile).

3. Mobile top bar — theme toggle vs settings no longer confusable

Added a divider and more spacing between the sun/moon theme toggle and the gear settings link.

4. Settings — redundant titles, clickable sources, fixed About text

• Collapsed the duplicate "Settings" eyebrow + "Preferences" heading into a single identity.
• Restructured the cramped Sources row so the museum names wrap full-width as clickable links instead of being squeezed into the right column.

5. About — clickable source list

The Collections list now links each museum to its website. A shared lib/museums.ts keeps Settings and About in sync.

6. Multiple TV sizes (Settings-only picker, 55″ default)

• New FRAME_SIZES list + a persisted framio:frame preference (mirrors the theme pattern).
• A FrameSetting control in Settings (32″–85″, default 55″); the Output line updates with the chosen resolution.
• The selected width/height thread through composeCanvas; the 32″ exports at 1920×1080, all others at 3840×2160. The crop UI (aspect-locked to 16:9) is unchanged.

7. Studio — crop directly without browsing first

The empty Studio state now has a drop/choose-a-file uploader, so a reader can crop and export an image immediately. The file→data-URL logic is extracted to lib/studio/upload.ts and shared with the Library uploader.

8. Bundle uploads → date/time collection

Every upload batch now also creates a collection named after the moment (e.g. Upload · 15 Jun 2026, 23:46) via a new createCollectionWithItems store helper; images still appear in Library uploads.

Verification

• npm run typecheck, npm run lint, npm run build all pass.
• Manual checks per the plan (theme persistence across reloads/mobile, footer link, source links, TV-size export resolution, Studio drop-to-crop, dated upload collection).

https://claude.ai/code/session_01NDgHNC6vqa4XEqhB6XKEz7

---

Generated by Claude Code