feat: design system polish (in-page headers, indies tabs, sidebar collapse removal)#19
Merged
Merged
Conversation
…, 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.
…across multiple languages
…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.
…late application flows
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.
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.
#header/#header-actionsslots. Calendar header uses a 3-col grid with the date title centered. Show header swapped for back-button-left + date/status-right.defaultOpen=true(ignore persisted cookie),toggleSidebaris now a no-op on desktop. Mobile sheet behavior preserved.AppSidebarnow usescollapsible="offcanvas"with the icon-mode logic inCreate Postbutton cleaned up.TabsTriggeris now a standalone button-style sticker (border-2 border-foreground rounded-md shadow-xs), matching the rest of the system. Active state usesbg-amber-200mirroring the "POST" badge from post-templates.TabsListis just a flex row withgap-2(no outer container).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), andHexColorInputswatch (size-9→size-10). Tabs match newh-10.Popover + CommandAnalyticsAccountSelectorin the header (avatar + handle, searchable by name/username/platform). Localized all metric labels backend-side viaanalytics.metrics.*keys + multi-locale keyword matching for the icon mapping. Removedlang/{en,pt,es}/analytics.phpchannelskey.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 (hoisteduseHttpout ofonMounted, response array read at root).GalleryBrowser(Uploads / Unsplash / Giphy) bumped toh-12for comfortable browsing.WorkspaceController@storenow always redirects to/accounts?openDialog=true(dropped the$isFirstWorkspacebranch).SocialController@indexreads?openDialog=trueand shipsopenDialog: boolas an Inertia prop, soaccounts/Index.vueopensAddSocialDialogautomatically without touchingURLSearchParams. Renamed the i18n keyworkspaces.create.first_workspace_success→ reusedsuccesswith the social-account copy.AuthSplitLayoutintoRegister.vuedirectly (only consumer), withselfHostedcheck viausePage(). Dropped theshowLegalprop fromAuthLayout+AuthSplitLayout.Test plan
/calendar,/posts/{id}/edit,/posts/{id}— confirm header bar renders inside the page (no global app header), full-width canvas, controls aligned/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)/accounts?openDialog=truewith the connect dialog auto-open/register(saas mode) shows legal block; settingTRYPOST_SELF_HOSTED=truehides it