Repository navigation
Redesign the app UI and add the invite-only partner program - #104
Coder-soft wants to merge 47 commits into
Conversation
First layer of the UI redesign. Establishes the foundation the page-by-page sweep will build on, without touching component structure yet. - Collapse the two competing theme files (index.css + global.css) into a single source; global.css is deleted and its scrollbar utilities merged. - Replace the token set with one dark-only palette: cool near-black surfaces, near-white ink, and #F199D8 as the single brand colour (dark foreground for accessible contrast). Remove the glow/neon keyframes. - Wire Geist Sans + Geist Mono as the UI/heading/body type system; headings no longer use the pixel display font. - Remove light mode: drop ThemeToggle, the navbar/drawer toggles, the theme init in App, the `.dark` token block, and the light theme-color meta. - Set `class="dark"` on <html>, modernise the base Card, and hardcode Sonner to dark.
- Revert the brand token from the pink test value back to the original #9B87F5 (hsl 251 85% 75%), including the ring, sidebar and cow-* aliases. - Give the primary button a dark foreground for accessible contrast instead of white. - Drop `height: 100%` from html/body (inherited from the removed global.css); it collapsed the documentElement scroll height and broke window scrolling and the navbar scroll listener.
Rename the home page's pixel call sites to the new design system. Structure and copy are unchanged; only the visual language moves. - Headings: Geist, semibold, tracking-tight; body copy and labels move off the monospace/pixel fonts to Geist with muted-foreground. - Cards: `pixel-card`/`pixel-corners`/2px borders replaced with rounded-xl surfaces, hairline borders and surface steps. Hover is a subtle lift and border tint, no glow. - Buttons: pixel-btn variants replaced with rounded, token-based buttons (primary fill / outline) with consistent padding. - Section dividers drop the heavy 4px purple borders for hairlines. - The RenderDragon wordmark keeps the pixel font as the single brand accent. ResourceCard itself (rendered in Featured) is untouched; it is scheduled for the resources batch.
Steer from review: all buttons are fully rounded. - Button primitive (button-variants) goes rounded-md -> rounded-full. - Inline CTA links on the home page match. - Legacy pixel-btn variants drop the pixel-corners clip and round fully, so buttons on not-yet-swept pages stay pill-shaped too.
Sweep the resources browse experience onto the new system. - ResourceCard: rounded-xl surface, hairline border, lift-on-hover, hairline preview frames, muted title, token-based copyright button and spinner. - ResourceCardSkeleton matches the new card shape. - Filters/sort: drop pixel-corners; category controls are pill buttons, search uses the standard input. - ResourcesList: empty-state and contribute buttons use token buttons. - ResourcesHub: Geist heading, pill tabs, token scroll-to-top, primary badges. Not in this batch: ResourceDetailDialog, creator/music pack tabs and the sidebar browsers still use the old classes; they are a follow-up.
Steer from review: headings use Montserrat Bold. - Add @fontsource/montserrat (600/700) and a `font-heading` family token. - Base h1-h6 use Montserrat bold; swept headings drop font-semibold for font-bold so they render at 700. - The hero wordmark keeps the pixel font at normal weight.
Finish the resources experience: detail dialog, pack tabs, favorite views, sidebar browsers, filters, players and popups all move to the new system. - Replace cow-* / pixel-* / pixel-input and the pixel fonts with token classes: primary/primary-foreground accents, muted-foreground text, hairline borders. - CreatorPackCard becomes a rounded surface; dialogs use border-border instead of a 2px primary outline; buttons are pills; AudioPlayer/ResourcePreview use the primary token. - Creator/music pack tabs, favorites tabs + sidebar, and the McSounds/McIcons browsers swept with the same replacements. Only the sidebar/tab internals differ from the card grid; structure unchanged.
Apply the design system across everything that was still using the old classes: generators, utilities, community/guides/blogs, auth, profile, admin, analytics, static pages, skeletons and shared components. Mechanical, token-for-token replacements: - cow-purple/cow-dark accents -> primary / background tokens - pixel-card -> rounded-xl border bg-card p-4 - pixel-btn-primary/secondary -> rounded pill primary/outline utilities - pixel-input -> rounded input surface - pixel-corners removed - pixel + monospace fonts dropped from chrome headings/body Intentionally preserved as pixel output: Logo, PixelSvgIcon, the hero/navbar/ footer wordmark, MinecraftNametagGenerator, the text-generator preview and the menu/gallery art components.
Every call site is now on the token system, so remove the legacy definitions. - Delete .pixel-* (btn/card/input/corners), .neon-border, .parallax-*, .tool-planks-hover, .font-pixel, .font-chakra and all cow-* color utilities and their --cow-* variables from index.css. - Remove the cow palette and jetbrains-mono family from the Tailwind theme. - Stop importing @fontsource/jetbrains-mono (no remaining usage). Kept: .cow-grid-bg (used as the subtle background grid), .pixelated, the Minecraftia/Minecraft Seven/Minecraft Five fonts (brand + generator output) and the Video.js theme.
- Add accessible titles to the mobile nav drawer (DrawerTitle/Description), the resource filter sheets (SheetTitle) and the changelog dialog (DialogTitle), clearing Radix "requires a DialogTitle/Description" warnings. - Repair hover:bg-primary/90/<n> classes accidentally produced by the batch-5 replacement across ~13 files.
Same fix as the standalone creatorcluster#103, applied to the redesigned card so the redesign branch does not carry the pre-existing id/URL mismatch.
- Donate button now pops out (spring scale + fade + lift) instead of a plain opacity fade. - Back-to-top button pops in with a matching spring; its arrow is white. - Back-to-top scroll detection listens in the capture phase and reads any scrolling element, so it fires reliably.
The full-bleed pattern image + dark vignette covered the whole card and washed out the title/description. Replace it with a top header band: a rounded preview that fades in behind the icon row, a subtle zoom, and a gradient into the card so the copy stays legible. The icon tile picks up a translucent backdrop over the image.
- Remove the back-to-top button from the Resources Hub. - Fix horizontal overflow in the Minecraft Icons/Sounds layout (max-w-7xl exceeded the container), which is what blocked comfortable scrolling. - Restyle the category count chips from low-contrast grey (bg-secondary/50 + muted text) to a branded primary chip. - Center the audio player transport: the skip/play/skip group is centered in the player with the time beneath, and the play glyph nudge is corrected (ml-1 over-shifted it; now translate-x-[1px]).
The Radix ScrollArea is a flex-1 child of a fixed-height, overflow-hidden column. Without min-h-0 its default min-height:auto made it grow to the full tree height, so the parent clipped it and the viewport never scrolled. Adding min-h-0 lets it shrink to the available space and scroll. Same fix for the Minecraft Sounds browser.
`overflow-x: hidden` on html/body computes the root's overflow-y to hidden, which stops wheel/touch scrolling of the whole document (programmatic scroll still worked, hiding the bug). `clip` clips horizontal overflow without forcing the other axis, so vertical scrolling works normally.
Replace the Radix ScrollArea with a plain overflow-y-auto div (keeping the min-h-0 fix). The ScrollArea's viewport sizing is finicky in some browsers, which can leave the long Minecraft Icons tree unscrollable even though the Sounds tree appears fine. A plain scroll container is dependable everywhere.
SelectContent ran a custom effect on mount that set `document.documentElement.style.overflow = 'hidden'` (to avoid a scrollbar layout shift). It did not reliably restore it, so after using a dropdown (e.g. the Minecraft Icons subcategory filter) the <html> element kept an inline overflow:hidden and the whole page stopped scrolling — even though scrollTop still worked programmatically. Removed the effect; Radix already handles scroll-locking while the dropdown is actually open.
- MC Sounds/Icons Browser headers: drop the bold (h3 inherits Montserrat font-bold) for font-medium, and swap the tabler glyphs for pixel-art icons (added `sound` and `icons` to PixelSvgIcon, from the pixelarticons set). - Audio player: reduce waveform (48px), transport (h-11 play, h-7 skips) and spacing so the time digits no longer clip inside the card preview.
Use a div instead of h3 so the global h1-h6 Montserrat-bold rule does not apply; these are small UI labels, not document headings.
Replace the coloured icon chip with a single-line, dark-grey subtext label: no icon, no box, truncates instead of wrapping to two lines, and spaces path separators for readability.
- Count badges were clipped: the Radix ScrollArea's overlay scrollbar sat on the right edge, and nested rows were `w-full` + `ml-6` (which overflowed the container by the left margin). Switched to the plain scroll container and sized nested rows with calc so their right edge stays inside. - Match the other browsers: non-bold header, pixel music icon, primary-tinted count chips.
Users disliked semi-transparent panels and cards that went semi-transparent on hover. Solidify the surface tokens: card/muted/secondary/accent/background opacity modifiers (and their hover variants) become fully opaque. Image scrims (bg-black/*) and accent tints (bg-primary/*) are left as-is.
Replace the raw link text with a YouTube icon and the video's title, resolved via oEmbed (noembed, CORS-friendly) and cached per video id. Non-YouTube links fall back to the URL.
Fetch GET /music_moods from the assets API (with the existing fallback base)
instead of the bundled /data/music_moods.json. Same { filename, moods, source }
shape.
cursorWidth was set to 0 earlier (hiding the cursor). Bring it back at 2px in a lighter purple so the playhead is visible over the progress colour.
…aveform (bg-muted)
- Font previews never loaded: `document.fonts.check()` returns true for any family (even bogus), so the loader short-circuited and previews fell back to a default face. Track loaded families in a module set and always load. Also stop double-encoding the URL (`encodeURI` turned existing %20 into %2520) which broke space-named fonts. - Resource detail dialog: replace the old coloured category chip with the same dark-grey single-line label used on the cards. - Redesign the Contact page: clean header, rounded email/community panels, pill Discord button, and a tidy team grid with solid social buttons.
Starting a new asset's preview left the previous one playing (each AudioPlayer was independent). Add a window-level coordinator: when a player starts it broadcasts `rd:audio-play` with its id, and every other player pauses itself.
Replace the rounded/pill shape language with a 45° chamfer on the top-left and bottom-right corners of panels, cards, buttons and inputs. Implemented as an unlayered `.chamfer` class (and applied to the panel radius utilities) so it out-specifies the radius utilities; circles (avatars, spinners, switches) keep rounded-full.
Preserved working-tree changes from the admin-panel-redesign session: - new McIconAnimationDialog + lib/mcIconAnimation, "Animate" action on mcicons - admin page rebuilt as tabs (Analytics / Blogs / Creator Packs); drop the resources manager + migration - AnalyticsDashboard export; api/server/index.html + profile font tweaks
…imation, analytics) - admin rebuilt as tabs (Traffic Analytics / Blogs / Creator Packs); drop the resources manager + migration; AnalyticsDashboard exported for the tab - mcicons: new "Animate" action + McIconAnimationDialog, styled to the redesign - corners: sharp 90° on every non-circular surface (no chamfer) - creator packs: full-bleed card redesign - music packs: real YouTube logo, embeds render by default (thumbnail + spinner while loading), "Check copyright" button opening the music link dialog - mobile: music packs browser stacks on small screens; footer link row wraps
- Add /partners, /partners/dashboard, and /oauth/consent routes with docs - Add partner org/app/consent/api-key schema + RLS migrations and partner-keys Edge Function - Enforce read-only assets:read scopes and per-key rate limits in workers/api-router - Sign export_resources requests via HMAC; add assets-gateway worker - Allow new codersoft origins in CORS
Viewer on the left, options on the right, toolbar with the image/video toggle, drop the how-to-use section, and align the rotation marks to the slider's travel range (each mark clickable).
Extend the corner rule past the direction-less utilities so directional (rounded-t-xl, first:rounded-l-md), arbitrary (rounded-[2px]) and inherited radii are covered too, and drop the video.js player radius. Circles keep rounded-full.
# Conflicts: # vite.config.ts
…uage Remove rounded-full from the invite chip and hero buttons, and add Partners to the footer navigation.
|
@Coder-soft is attempting to deploy a commit to the yamura3's projects Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
Important Review skippedToo many files! This PR contains 208 files, which is 108 over the limit of 100. To get a review, reduce the PR to 100 files or fewer by splitting it into smaller PRs or changing its base branch. Upgrade to a paid plan to raise the limit. This review couldn't start because sufficient usage credits or metered capacity aren't available. Add credits or update usage-based reviews in the billing tab, then retry. ⚙️ Run configuration
⛔ Files ignored due to path filters: 3
📒 Files selected for processing: 208
You can disable this status message by setting the
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
- rebuild partner onboarding as a full-screen rail wizard - trim app permissions to profile/email/favourites; add-then-list redirect URIs - add self-serve 'Connected apps' with revoke in Account settings - fix consent screen (single read + auto-approve redirect handling) - serve avatars same-origin via /api/avatar (blocker-proof) - host the assets gateway on gateway.codersoft.xyz (CORS + SameSite=None) - Twitter-style verified badge - dev: proxy assets to public upstreams; refresh gateway/README
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
- partner-keys: require owner role to mint/revoke API keys - assets-gateway: require a Turnstile hostname (an absent one no longer passes) - api-router: drop private/loopback Origin trust from CORS (prod) - consent: unknown/unprovisioned client errors instead of approving; only store the email when requested; show app description, redirect host, and TOS/Privacy - permissions registry: remove unused apiScopesFor - client: dedupe revokeMyConsent; drop dead submitPartnerRequest/PartnerRequestInput - footer: point the partner link at /contact (no public /partners page) - use chamfer instead of rounded-* in Partnership/PartnerStatsPanel - docs: gateway SameSite=None, AGENTS openid wording, data-model key note - migration: partner_app_public returns description
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
- new public partner integration guide (shadcn blocks) covering the signed asset API and RenderDragon sign-in, with the OAuth flow shown both raw and via Supabase - llms.txt at the site root describing the API and OAuth integration for agents - footer 'Partner docs' link
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
- add highlight.js and a CodeBlock component (core build, bash/js/json, github-dark theme, escaped fallback for plain text) - use it on the partner docs page
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
- remove the Edit Profile item (and its unused icon) from the account dropdown - My Favorites now opens /resources?tab=favorites (it pointed at /account, which has no favorites); the hub reacts to the ?tab= search param so it switches even when you are already on /resources
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
- RESOURCES_ORIGINS / ASSETS_ORIGINS: ordered, comma-separated pools (primary first), defaulting to the existing e3 + fallback origins - try each origin in order, healthy first; mark an origin down for FAILOVER_COOLDOWN_MS on a failed probe (no first byte within PRIMARY_TIMEOUT_MS) or a 5xx, and retry it last - time-box only the probe, so the chosen origin's body streams in full (fixes the /all timeout on the fallback) - 502 only when every origin fails; /__router/health reports per-origin state - docs: README + AGENTS updated
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
Summary
The UI redesign plus the invite-only partner program.
rule is now an unlayered attribute selector, so directional (
rounded-t-xl,first:rounded-l-md), arbitrary (rounded-[2px]), inherited and inline radiiare all covered — new usages can't drift back to rounded corners. Circles keep
rounded-full.right), toolbar with the image/video toggle, rotation marks aligned to the
slider's travel range and clickable, "How to Use" removed.
matches the sharp language; Partners added to the footer.
Also brings
redesign/appup to date with the partner program that landed on itseparately (OAuth + read-only assets API, Supabase migrations,
workers/api-router,assets-gateway).
Evidence
pnpm build(vite) succeeds;eslintclean on touched files./partners,/partners/dashboard,/oauth/consentall 200;a DOM sweep reports 0 non-circular radii across every route.
Merge Danger
Door: two-way for the UI; the bundled Supabase migrations are the sharper edge.
Blast Radius: whole app — design system, router, and database schema.