Repository navigation
Add accent colors, a community tab and top-creator sorting - #89
Merged
Merged
Conversation
- Account → Accent color: pick from nine accents, kept in localStorage and applied by overriding --color-accent on <html>; the default removes the override. - Market: a "Join Community" tab (?community) backed by lib/community.ts, visible to guests too. - Market: a "From top creators" sort that admits creators over combined downloads and likes (lib/top-creators). - Phone nav bar becomes dark glass, with opaque and reduced-transparency fallbacks. - Tests for the accent mapping and the creator thresholds.
- The accent swatches are controls, so their labels run at 1rem (CLAUDE.md); they fit the three-column grid down to a 320px screen. - Rename the tab to "Community": split evenly three-up on a phone, "Join Community" clipped to an ellipsis even on a Pro Max; 0.375rem side padding clears 320px too.
… rail of faces The creators view was the face grid filtered to top creators — which only reads as "top creators" if you notice the author on each card. It is now its own view: a vertical stack of creator cards (avatar, name, the totals behind the threshold) with the creator's own faces on a horizontal scroller inside each card. - topCreatorIds -> topCreators: groups the catalog per owner instead of returning ids, sorted by downloads (ties on likes), faces sorted too; the thresholds are unchanged. - The search and the device filter narrow the rail, not the totals; a creator drops out only when nothing of theirs matches. On ?mine the shelf is just you, if you qualify. - Reworked the unit test for the grouped shape and the ordering.
1800 downloads + 100 likes admitted only 3 creators of the live catalog — the shelf rendered as one card and a half. At 800 + 50 it admits seven, out of ~150 creators with published faces, and the bar still means something (each card is a creator with at least 50 genuine likes). The values are the two constants in the lib; if the shelf wants to be longer or shorter, that's the knob.
The tint was a fixed dark in both schemes. It now derives from --color-background at partial alpha, so light mode gets light glass; the ink, border and pills come from the token-derived base rules and needed no phone overrides at all — three of them deleted.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
localStorage, keyfmc:accent) and applied by overriding--color-accenton<html>, so every component follows without knowing about it. The default (yellow) removes the override, leaving the stylesheet's token in charge./?community) with a panel of community links. The list is data inmarket/lib/community.ts— Reddit is live, the rest are "Coming soon" placeholders. The tab is visible to signed-out visitors; Mine still requires an account.market/lib/top-creators.ts), each card with the creator's header (avatar, name, totals) over a horizontal rail of their own faces, richest first.--color-background, so it follows the colour scheme — light glass in light mode, dark in dark — with an opaque fallback where the filter is unsupported orprefers-reduced-transparencyis set; the market page reserves space so cards still clear the bar.Checks
pnpm check— cleanpnpm lint— cleanpnpm format:check— cleanpnpm test --project unit— 189 passed, 1 skippedpnpm build— succeeds