christin #10

Merged

christin merged 5 commits from christin into main

2026-07-21 17:54:02 +02:00

christin commented

2026-07-21 17:53:58 +02:00

Owner

No description provided.

christin added 5 commits

2026-07-21 17:53:58 +02:00

feat(dashboard): mockup-accurate Übersicht hero row, chart dot markers, remaining token debt 903c60605a

Continues the FediSuite redesign per Christin's mockup review feedback:

- Add dot/activeDot markers to every Area chart app-wide (10 series across
  Dashboard.tsx + DashboardHome.tsx) — none had ever set a `dot` prop, so no
  chart showed visible data points, unlike the reference mockups.
- Replace the Übersicht tab's 4 big stat cards (Total Reach/Scheduled/Total
  Posts/Failed) with the mockup's compact 5-tile hero row (Follower/Neue
  Follower/Beiträge/Engagement Rate/Reichweite + growth-% badges), derived
  from data already loaded for the Wachstum/Engagement tabs — no new API
  calls. Scheduled/Failed Posts (not in the mockup but still operationally
  useful) move to a compact secondary chip strip below the hero row instead
  of disappearing.
- Migrate the still-hardcoded Phase-2/3 leftover chrome colors flagged in
  the redesign notes: widget h3 titles (text-white, invisible in light
  mode), empty-state text, LoadingSpinner/HelpText, and two info banners
  that still used the old #5BC8F5 brand cyan literal.
- Loosen the Follower-Wachstum chart's render gate from >1 to >0 data
  points (DashboardHome + Dashboard "Wachstum" tab) so a fresh account with
  only one recorded snapshot still shows a point instead of an empty state;
  the "Neue Follower"/"Wachstum" footer stays hidden until there's actually
  a second point to compare against, with a small explanatory note instead.

New i18n keys (de/en/it): dashboard.stats.engagementRate,
dashboardHome.followerGrowth.notEnoughData.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

feat(ui): unify every button app-wide to the Sidebar nav-button look faff80b56a

Christin: "wirklich alle Buttons" should look like the Sidebar nav
buttons (soft bg-accent-wash/text-accent pill, borderless, no shadow),
not the mixed bag of solid-fill CTAs, bordered "outline" buttons, and
bordered destructive buttons still scattered across Settings, Admin,
Composer, Auth, Notifications, Postings, Toast, and friends.

Highest-leverage fix: redefined the shared `.gradient-btn` utility (and
its two dark/light `:not(.token-styled)` cascade-layer carve-outs, kept
in sync per the established Phase-1 lesson) from a solid accent fill
(font-extrabold, shadow-lg) to the same soft accent-wash pill the
Sidebar already used (font-medium, no shadow) — new
--color-accent-wash-hover token for :hover. This alone restyles every
one of the ~13 files / 20+ call sites using gradient-btn with zero
per-component changes. Also stripped the now-redundant/conflicting
`rounded-xl`/`font-bold`/`font-semibold` classes at each gradient-btn
call site, since the utility already carries rounded-control/font-medium
and a second radius/weight class at equal specificity made the actual
rendered result depend on Tailwind's internal generation order.

Then swept every remaining <button> across src/components for anything
that still deviated from the two Sidebar patterns (bg-accent-wash
text-accent active / text-text-secondary hover:text-text-primary
hover:bg-surface-sunken inactive, both borderless, rounded-control):

- Bordered "secondary" buttons (pagination, refresh, reply/favourite/
  mark-read, cancel/reset, save-meta/sync-now, ~15+ call sites across
  AdminPanel/AdminUsersPage/AdminPluginsPage/Auth/Notifications/
  Postings/FocalPointModal/Toast/SessionManagement) lost their border
  and permanent surface-sunken fill in favor of the borderless inactive
  treatment.
- Destructive buttons (delete account, disable TOTP, confirm-dialog
  destructive action) switched from a solid red fill (+ one with
  shadow-lg) to a status-critical wash, matching the accent-wash
  pattern used for the same reason gradient-btn changed. Two floating
  circular "remove" badges that overlay photo thumbnails (Composer,
  ComposerMediaTile) were deliberately left as a solid-ish fill —
  a fully transparent wash would be illegible over arbitrary image
  content, a real UX constraint the Sidebar's chrome-only context
  doesn't have.
- Bordered toggle/pill controls (Composer account-tiles, scheduler
  toggle, visibility icons, alt-text/focal-point chips, Notifications
  account selector, Dashboard top-posts/top-hashtags sort pills) lost
  their border and gained the exact Sidebar active/inactive pair.
- Two real bugs found along the way: Settings.tsx's theme-picker tiles
  never had `token-styled` and were still running on a bespoke
  `.theme-choice-btn-active` CSS class with an old cyan/violet/teal
  brand gradient literal (a Phase-4c-era leftover) — replaced with
  plain token-styled + bg-accent-wash/text-accent, and the now-dead
  `.theme-choice-btn*` CSS classes and their light-mode carve-out
  removed. Composer.tsx's two alt-text modals were entirely
  unmigrated (text-white/text-slate-*/bg-white/#5BC8F5) since before
  the redesign started — title, close button, image border, label,
  textarea, and cancel button all moved onto the token system.
- Composer's disabled-state CTA fallback used hardcoded
  `bg-white/6 text-slate-400` (which the button:not(.token-styled)
  global override would have clobbered anyway, same historical bug
  pattern as the gradient-btn dark-mode issue from Phase 4c) — now
  `token-styled bg-surface-sunken text-text-muted`, applied
  conditionally only on the disabled branch so the enabled branch
  keeps relying on gradient-btn's own carve-out as established.
- CW toggle's raw yellow (text-yellow-400/bg-yellow-500) migrated to
  the existing status-warning token.

Deliberately left alone: the Accounts.tsx "Reconnect" button inside a
warning/critical alert card (its border intentionally matches the
alert box it lives in, not an ad-hoc deviation) and AdminPanel's one
iOS-style toggle switch (a different control type, not a button
look-alike).

Verification: npx tsc --noEmit, npm run build, npm run test (130
tests / 25 files) all green. Compiled CSS bundle shrank slightly
(102.76kB -> 100.24kB) from removing the dead gradient CSS.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

fix(a11y): make selected-state visible in light mode for radio-tile pickers 9a13e7067e

Christin: in Settings > Ansicht (Dark/Light theme picker), light mode
shows no visible indication of which tile is selected.

Root cause: Phase 6 replaced the theme picker's bordered active state
with the same bg-accent-wash/text-accent-only treatment used for plain
action buttons. That works fine for the Sidebar (one obviously-active
item, page navigation gives an extra cue) but not for a radio-style
picker where the wash is the *only* selection signal — and a 10%-opacity
accent tint on light mode's pure-white glass-card is barely perceptible
(the same relative opacity reads much stronger against dark mode's
near-black surface, so the bug was invisible while testing dark mode).

Fix: selected tiles now get a CheckCircle2 icon plus a visible
accent-colored border (border-accent/50), unselected tiles keep
border-transparent so the resting state stays exactly as borderless as
the rest of Phase 6's button contract -- the border only appears to mark
"this one is chosen", same rationale as the alert-embedded and
photo-overlay button exceptions already documented in the redesign
notes. Applied to both instances of this pattern: Settings.tsx's theme
picker (the reported bug) and Composer.tsx's account-tile selector
(identical radio-tile semantics, same Phase 6 change, same risk).

Deliberately not touched: the smaller pill/icon toggles from Phase 6
(CW toggle, scheduler toggle, visibility icons, sort pills) -- those
already carry a secondary non-color cue (icon shape changes, e.g.
Eye/EyeOff) and weren't reported; flagged as a lower-priority follow-up
in the redesign notes in case they turn out to have the same issue.

Verification: npx tsc --noEmit, npm run build, npm run test (130
tests / 25 files) all green.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

feat(theme): give dark mode real depth and contrast — light mode untouched ccb1160486

Christin: dark mode looks "flat" compared to light mode ("wow, sieht gut
aus" for light; dark needs "mehr Kontraste, aber trotzdem pastelligere
Farben"). Confirmed with real screenshots of the logged-in app (Dashboard,
Übersicht, Composer, Konten, Einstellungen) — every card was nearly
indistinguishable from the page background.

Root causes, found by comparing the dark vs. light token pairs directly:

1. --color-surface (#0a0a14) and --color-surface-elevated (#12121e) were
   only ~8-10 RGB steps apart — imperceptible at normal monitor
   brightness. Light mode's pair (white card on off-white page) has a
   much bigger visible step.
2. --shadow-elevation-1 in dark mode is rgba(0,0,0,0.35) — a black
   shadow literally cannot out-contrast a background that's already
   near-black, so it contributed nothing. Light mode's shadow (a dark
   warm rgba on a bright page) is clearly visible by contrast, which is
   why light mode's cards read as "floating" and dark mode's didn't.
3. Light mode's body background already layers two soft radial-gradient
   glows over its base color (html[data-theme='light'] body); dark
   mode's body was one completely flat hex value with zero ambient
   variation — a real, if easy to miss, contributor to "richness".
4. status-good/chart-2/chart-4 were the most desaturated colors in the
   dark palette (WCAG contrast 5.0-5.9 against the old elevated surface)
   next to already-vivid chart-1/chart-3/status-warning/-critical.

Fixes (all scoped to dark/default tokens only — every html[data-theme=
'light'] block is untouched, and light-mode resets were added anywhere
a dark-only addition could otherwise leak through):

- --color-surface-elevated: #12121e -> #171c30 (clearly separable step).
- --color-surface-sunken / --color-border-subtle opacity bumped slightly
  (0.04->0.055, 0.08->0.1) so nested card-inset rows and the new card
  border read clearly too.
- --shadow-elevation-1 (dark): deepened to rgba(0,0,0,0.45) at a larger
  spread — still mostly a depth cue now, not the primary edge.
- .glass-card/.glass-card-hover: new 1px border(--color-border-subtle)
  in the @utility, since a shadow alone can't carry the edge on dark
  backgrounds the way it does on light ones. Explicitly reset to `border:
  none` under html[data-theme='light'] so light mode's already-good
  borderless look is byte-for-byte unchanged.
- Dark body background gained the same two-radial-gradient ambient glow
  treatment light mode already had (dark-appropriate accent/blue tones
  at low opacity, still resolving to near-black overall).
- --color-accent-wash / -wash-hover (dark only): 0.14/0.24 -> 0.17/0.28
  for slightly more presence on wash-styled buttons, icon backgrounds,
  and selected states.
- --color-status-good/#0ca30c->#22c55e, --color-chart-2/#199e70->#16c98a,
  --color-chart-4/#c98500->#e0a400: brighter, more saturated dark-mode
  values for the three most washed-out tokens. All three re-checked
  against the new --color-surface-elevated with a WCAG contrast script
  (7.4-8.9, comfortably past the old values' 5.0-5.9 and past AA/AAA) —
  chart-1/chart-3/accent/status-warning/status-critical were already
  vivid enough and left alone. Note: this only affects token-driven
  usages (stat-card icons, badges, borders) — the actual recharts line/
  bar colors are separately hardcoded literal hex per the pre-existing
  "same hex in both themes" simplification (Phase 2) and are out of
  scope here.

Verified against the real compiled CSS, not just on paper: ran the Vite
dev server locally, used Playwright to render both the Auth screen and
an injected mock stat-card/chart-card grid (mirroring Christin's actual
Dashboard screenshots) in both themes. Dark now shows a clearly readable
card edge and ambient depth; light mode screenshot is pixel-identical
to its prior look (no border, same white cards).

npx tsc --noEmit, npm run build, npm run test (130 tests / 25 files)
all green.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

chore(release): bump version to 1.6.1 76028525ef

Covers today's post-redesign polish: chart data-point markers, the
Übersicht compact stat row, app-wide button unification, the light-mode
selection-visibility fix, and the dark mode depth/contrast pass.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

christin merged commit 4fd4d70967 into main

2026-07-21 17:54:02 +02:00

christin referenced this pull request from a commit

2026-07-21 17:54:03 +02:00

Merge pull request 'christin' (#10) from christin into main