feat(admin): brand-restyle core CRUD surfaces (Living systems)#438
Merged
Conversation
Sidebar adopts the forest-dark surface from docs/design/ui_kits/admin/index.html — org switcher chip with GoNext wordmark + plan dot, sectioned nav (Workspace · Content · Studio · Operator), Lucide icons that retune to emerald-bright on the active row, and the radial-glow "Grow to Agency" upgrade card. Adds an emerald initials avatar + sign-out trigger in the foot. A new <TopHeader> carries the GoNext wordmark (italic "Next" accent), an "Admin" eyebrow, a "view site" anchor, and a notifications bell — matching the 54px topbar in the design prototype. The legacy Sidebar.test.tsx contract (collapse toggle + 13 canonical destinations) is preserved without modification. Add recharts as a dependency so the dashboard data-viz can be built without each call site bringing its own chart library. Signed-off-by: Mohamed Tayeb Mokni <tayeb.mokni@gmail.com>
Rebuilds the admin landing page from the scaffold four-widget grid
into the brand's vital-signs view. Mirrors the layout patterns from
docs/design/ui_kits/admin/index.html + pulse.html:
• Display headline with the italic-serif accent rule
("Site *pulse*.") and a live-indicator chip with an animated
emerald dot.
• Four stat tiles on paper-2 surfaces — Archivo numbers, delta
badges (up = emerald-soft, down = danger-soft), and inline
sparklines (emerald and lavender peaks).
• A forest pulse card with the organic radial-glow backdrop, a
recharts area chart showing views (emerald) + conversions
(lavender), and an inspector column with top post / session
/ TTFB stats.
• A "Where they linger" histogram (lavender bars, emerald peaks)
plus a "What just happened" recent-activity panel.
Adds <BrandChart> primitives (BarChartSurface / LineChartSurface /
Sparkline) that concentrate the brand's data-viz language onto
recharts so future report screens stay consistent without each
caller threading colours.
Snapshot pins the page-head (not the recharts subtree — recharts
DOM is unstable across releases).
Signed-off-by: Mohamed Tayeb Mokni <tayeb.mokni@gmail.com>
Adopts the brand display-type header from docs/design/ui_kits/admin/index.html — "All *posts*." with the italic-serif accent on "posts", a sub-line in fg-muted, and the Import / New post action cluster on the right. The actions migrate to the shadcn <Button> primitive so they pick up the brand button treatments (paper-2 default + ink primary) for free. posts.module.css moves from --color-* aliases to direct brand tokens. Filter chips now sit in a paper-3 segmented strip with emerald-soft active state — matching the .tag--emerald pattern. Table rows hover with paper-3, headers carry Geist Mono labels, and a new "Scheduled" status badge gets the lavender-soft / lavender- deep treatment from the moodboard. Adds a snapshot test that pins the page-head Headline composition. Signed-off-by: Mohamed Tayeb Mokni <tayeb.mokni@gmail.com>
Adds the per-resource edit-metadata pages for posts and pages, and
turns the pages list from a "Coming soon" placeholder into a real
brand-styled CRUD surface.
• /posts/[id] — metadata-only edit surface (the block editor opens
via /posts/[id]/edit, which arrives in N3). Italic-accent headline
("Edit *post*."), a 1fr/320px split with a paper-2 main column
(Headline-styled title input + slug + excerpt) and a sidebar
inspector with Status / Schedule / Categories & tags / SEO
panels. Geist labels, emerald-soft success badges, lavender for
scheduled, ink for private — all token-driven.
• /pages — mirror of the posts list. Italic-accent headline
("All *pages*."), an emerald-soft active filter chip strip on
paper-3, hover-paper-3 table rows. Seed data until the
type=page endpoint ships (issue #76).
• /pages/[id] — sibling of posts/[id], with the page-specific
metadata trim (no scheduling-as-publication, no taxonomy).
Each new page gets a snapshot test that pins the page-head and
inspector structure. The existing posts client-island tests are
untouched.
Signed-off-by: Mohamed Tayeb Mokni <tayeb.mokni@gmail.com>
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Signed-off-by: Tayeb Mokni <tayeb.mokni@gmail.com>
tayebmokni
force-pushed
the
feat/brand-admin-dashboard
branch
from
79d0f3b to
f21038c
Compare
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
2 participants
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.
Summary
Applies the "Living systems" brand to the admin's core CRUD surfaces, building on the foundation from #432 (tokens, fonts, shadcn primitives,
<Headline>)./) — "Site pulse." display headline, four-up stat tiles with sparklines, recharts area chart (emerald views + lavender conversions) inside a forest pulse card with the organic radial-glow backdrop, "Where they linger" lavender histogram with emerald-bright peaks./posts) — "All posts." headline, emerald-soft active filter chip strip, paper-3 row hover, token-driven status badges (success / lavender / danger). PostListClient contract preserved (all 12 existing tests pass without modification)./posts/[id]) — metadata-only edit surface (block editor opens via/posts/[id]/editin N3). 1fr/320px split: paper-2 main column with Headline-styled title input + slug + excerpt; sidebar inspector with Status / Schedule / Categories & tags / SEO panels./pages,/pages/[id]) — mirror of posts, trimmed for evergreen content.Adds
<BrandChart>recharts wrapper (BarChartSurface / LineChartSurface / Sparkline) so future report screens stay consistent without each caller threading brand colours.Tokens are honoured — no drift. Lucide icons use
emerald-brighton dark,emerald-deepon cream; italic accents usefont-serifitalicfont-normalper the handoff.Test plan
pnpm --filter @gonext/admin lint— clean (pre-existing media<img>warnings only)pnpm --filter @gonext/admin typecheck— cleanpnpm --filter @gonext/admin test— 361 tests pass (was 340; +21 new snapshot / structure tests)pnpm --filter @gonext/admin build— all 39 routes build, including 4 restyled🤖 Generated with Claude Code