Skip to content

feat: design system polish (in-page headers, indies tabs, sidebar collapse removal)#19

Merged
paulocastellano merged 8 commits into
mainfrom
feature/site-design-system
May 6, 2026
Merged

feat: design system polish (in-page headers, indies tabs, sidebar collapse removal)#19
paulocastellano merged 8 commits into
mainfrom
feature/site-design-system

Conversation

@paulocastellano
Copy link
Copy Markdown
Contributor

Summary

Branch design-system polish across the app: in-page page headers replacing the global AppHeader slots on Calendar / Edit / Show, redesigned shadcn Tabs to match the indies button vocabulary, removed the desktop sidebar collapse, and a few targeted UX fixes.

  • In-page page headers: Calendar, Edit (post), and Show (post) now render their controls in their own ink-bordered bar inside the layout instead of pushing them through #header / #header-actions slots. Calendar header uses a 3-col grid with the date title centered. Show header swapped for back-button-left + date/status-right.
  • Sidebar collapse removed: dropped Cmd+B keyboard shortcut, forced defaultOpen=true (ignore persisted cookie), toggleSidebar is now a no-op on desktop. Mobile sheet behavior preserved. AppSidebar now uses collapsible="offcanvas" with the icon-mode logic in Create Post button cleaned up.
  • Tabs redesign (global): each TabsTrigger is now a standalone button-style sticker (border-2 border-foreground rounded-md shadow-xs), matching the rest of the system. Active state uses bg-amber-200 mirroring the "POST" badge from post-templates. TabsList is just a flex row with gap-2 (no outer container).
  • Global control sizing: bumped Button (default h-9→h-10, sm h-8→h-9, lg h-10→h-11, icons +1), Input (h-9→h-10), SelectTrigger (default h-9→h-10, sm h-8→h-9), and HexColorInput swatch (size-9→size-10). Tabs match new h-10.
  • Analytics: replaced the second-column accounts sidebar with a Popover + Command AnalyticsAccountSelector in the header (avatar + handle, searchable by name/username/platform). Localized all metric labels backend-side via analytics.metrics.* keys + multi-locale keyword matching for the icon mapping. Removed lang/{en,pt,es}/analytics.php channels key.
  • Show page: capped post preview Card to max-w-xl, preserve natural aspect ratio for single-image posts (object-contain, max-h-[480px]); dropped redundant Platforms/Published/Failed stats grid; metric loading bug fixed (hoisted useHttp out of onMounted, response array read at root).
  • Assets: search inputs in GalleryBrowser (Uploads / Unsplash / Giphy) bumped to h-12 for comfortable browsing.
  • Workspace creation flow: WorkspaceController@store now always redirects to /accounts?openDialog=true (dropped the $isFirstWorkspace branch). SocialController@index reads ?openDialog=true and ships openDialog: bool as an Inertia prop, so accounts/Index.vue opens AddSocialDialog automatically without touching URLSearchParams. Renamed the i18n key workspaces.create.first_workspace_success → reused success with the social-account copy.
  • Auth/legal copy: moved the legal text out of AuthSplitLayout into Register.vue directly (only consumer), with selfHosted check via usePage(). Dropped the showLegal prop from AuthLayout + AuthSplitLayout.

Test plan

  • Navigate /calendar, /posts/{id}/edit, /posts/{id} — confirm header bar renders inside the page (no global app header), full-width canvas, controls aligned
  • On desktop, confirm Cmd+B does nothing and the sidebar can't be collapsed; mobile drawer still opens via the floating trigger
  • Confirm Tabs render as standalone sticker buttons in Settings tabs, Calendar Day/Week/Month, post editor sidebar tabs
  • /analytics: pick an account from the popover, verify search by display name / username / platform; metrics labels render in pt-BR with correct sticker icons
  • /posts/{id} with multi-platform published post: per-platform metrics fetch resolves (no infinite spinner)
  • Create first workspace → lands on /accounts?openDialog=true with the connect dialog auto-open
  • Create non-first workspace → same destination/behavior
  • /register (saas mode) shows legal block; setting TRYPOST_SELF_HOSTED=true hides it

…, and remove legacy appearance management middleware.
- Replace global AppHeader slots with in-page headers on Calendar, Edit,
  and Show pages — full-width canvas with the page-specific controls
  living in their own ink-bordered bar.
- Remove sidebar collapse mechanism: drop Cmd+B keyboard shortcut, force
  defaultOpen=true (ignore persisted cookie), make toggleSidebar a no-op
  on desktop. Sidebar is permanent on desktop, sheet behavior preserved
  on mobile.
- Redesign Tabs to match the design system: each TabsTrigger renders as
  a standalone sticker button (border-2 + rounded-md + shadow-xs), with
  amber-200 active state mirroring the "POST" badge from post-templates.
- Show page layout: cap preview Card to max-w-xl, preserve natural
  aspect for single-image posts (object-contain, max-h-[480px]), drop
  redundant stats grid, swap header sides (Back button left, status +
  date right with date first).
- Assets: bump GalleryBrowser search inputs to h-12 for comfortable
  browsing across uploads, Unsplash, and Giphy tabs.
- Fix PostPlatformMetrics loading-forever bug: hoist useHttp out of the
  onMounted callback into setup, and read the response array directly
  (backend returns the array at root, not under .data).
- i18n: rename posts.show.back_to_posts → posts.show.back; remove unused
  posts.show.summary.* keys.
…hetic

- Billing settings page restructured around the design system: dropped
  the 280px-label / 1fr-content split for stacked HeadingSmall sections;
  current plan rendered as a hero card with display-font name, price,
  amber sticker tile, and an inline primary "Change plan" CTA; payment
  method consolidated into a single sticker row with a violet card-icon
  tile and the manage CTA on the same line; empty payment-method state
  handled. Invoices keep the sticker-row treatment.
- Upgrade dialog mirrors Subscribe.vue end-to-end: planTones backgrounds
  per slug, ⭐ POPULAR / CURRENT badges absolute-positioned, ink-bordered
  rounded-full CTA pill, sticker check icons, "Everything in {plan}"
  copy, IconInfoCircle tooltip on credits, yearly/monthly toggle pill
  with rotating amber save-months badge. While a request is in flight
  every plan button is disabled and the active one shows IconLoader2
  spinner.
- Account model gains `displayablePaymentMethod()` returning the
  card array used by the UI. Resolves the customer-level default first,
  falls back to the first attached payment method (Stripe Checkout trials
  anchor the card to the subscription rather than the customer, so the
  customer-level lookup returns null even when a card exists).
- i18n: added `billing.subscription.expires_on` and `no_payment_method`
  in en/pt-BR/es.
@paulocastellano paulocastellano merged commit 3953654 into main May 6, 2026
2 checks passed
@paulocastellano paulocastellano deleted the feature/site-design-system branch May 6, 2026 20:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant