Skip to content

refactor(staged): migrate UI to shadcn-svelte + Tailwind v4 #765

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
matt2e merged 28 commits into from
Jun 5, 2026
Merged

refactor(staged): migrate UI to shadcn-svelte + Tailwind v4 #765

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
eb3034d
refactor(staged): migrate UI to shadcn-svelte + Tailwind v4
matt2e Jun 2, 2026
6188d8c
refactor(staged): decouple app chrome mode from the diff theme
matt2e Jun 2, 2026
2cbb96a
fix(staged): bump global --radius to restore button roundness
matt2e Jun 2, 2026
8215798
fix(staged): restore lighter light-mode git accent greens
matt2e Jun 2, 2026
4e69a2c
fix(staged): drop shadow-xs from the outline button variant
matt2e Jun 3, 2026
5be1968
fix(staged): lift light-mode floating surfaces off the dirty gray
matt2e Jun 3, 2026
06417f9
fix(staged): reload session when SessionModal is reopened
matt2e Jun 3, 2026
7b84b25
style(staged): blend chat messages background toward the composer sur…
matt2e Jun 3, 2026
9ba88cb
style(staged): blend note dialog content background toward the chrome…
matt2e Jun 3, 2026
8088139
fix(staged): use mode-aware token for light-mode dialog scrim
matt2e Jun 3, 2026
e82751c
fix(staged): stop header tooltip auto-opening when dialogs open
matt2e Jun 3, 2026
bd452c5
fix(staged): make note dialog content tint visible in light mode
matt2e Jun 3, 2026
36f4633
fix(staged): stop dialog titles clipping descenders
matt2e Jun 3, 2026
7877d40
style(staged): lighten light-mode chrome background
matt2e Jun 3, 2026
be35269
style(staged): lighten light-mode chrome further
matt2e Jun 4, 2026
7ef5ef4
style(staged): nudge light-mode chrome back toward its original tone
matt2e Jun 4, 2026
67e699c
fix(staged): anchor repo search dropdown to its input inside dialogs
matt2e Jun 4, 2026
aaed500
fix(staged): make New Project location toggles fill the dialog width
matt2e Jun 4, 2026
93538dd
style(staged): remove vertical gap between New Project location toggles
matt2e Jun 4, 2026
d3d459b
fix(staged): give New Project form fields a white surface in light mode
matt2e Jun 4, 2026
cc462a3
fix(staged): give unselected New Project location toggle a solid surface
matt2e Jun 4, 2026
f445ccf
fix(staged): bridge Tailwind text scale to the Staged 13px size tokens
matt2e Jun 5, 2026
88628a0
fix(staged): decouple --ui-accent from git green, switch primary high…
matt2e Jun 5, 2026
0b8991a
fix(staged): brighten light-mode accent blue to match the old green
matt2e Jun 5, 2026
62cf25a
fix(staged): match left footer button height to the RHS footer buttons
matt2e Jun 5, 2026
d931239
fix(staged): give branch-card footer buttons full-contrast text and i…
matt2e Jun 5, 2026
68d94f2
fix(staged): stop closed ActionOutputModal from loading and listening
matt2e Jun 5, 2026
4b20d9d
fix(staged): only register session search shortcut while the modal is…
matt2e Jun 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions apps/staged/components.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"$schema": "https://shadcn-svelte.com/schema.json",
"tailwind": {
"css": "src/app.css",
"baseColor": "neutral"
},
"aliases": {
"components": "$lib/components",
"utils": "$lib/components/utils",
"ui": "$lib/components/ui",
"hooks": "$lib/components/hooks",
"lib": "$lib"
},
"typescript": true,
"registry": "https://shadcn-svelte.com/registry",
"style": "vega",
"iconLibrary": "lucide",
"menuColor": "default",
"menuAccent": "subtle"
}
14 changes: 12 additions & 2 deletions apps/staged/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
"type": "module",
"scripts": {
"dev": "vite",

"build": "vite build",
"preview": "vite preview",
"check": "svelte-check --tsconfig ./tsconfig.app.json --fail-on-warnings && tsc -p tsconfig.node.json",
Expand All @@ -19,14 +18,26 @@
"test:watch": "vitest"
},
"devDependencies": {
"@fontsource-variable/inter": "^5.2.8",
"@internationalized/date": "^3.12.2",
"@lucide/svelte": "^1.17.0",
"@sveltejs/vite-plugin-svelte": "^6.2.1",
"@tailwindcss/vite": "^4.0.0",
"@tauri-apps/cli": "^2.10.0",
"@tsconfig/svelte": "^5.0.6",
"@types/node": "^24.10.1",
"bits-ui": "^2.18.1",
"clsx": "^2.1.1",
"prettier": "^3.7.4",
"prettier-plugin-svelte": "^3.4.1",
"shadcn-svelte": "^1.2.7",
"svelte": "^5.46.4",
"svelte-check": "^4.3.4",
"svelte-sonner": "^1.1.1",
"tailwind-merge": "^3.6.0",
"tailwind-variants": "^3.2.2",
"tailwindcss": "^4.0.0",
"tw-animate-css": "^1.4.0",
"typescript": "~5.9.3",
"vite": "^7.2.4",
"vitest": "^4.0.18"
Expand All @@ -41,7 +52,6 @@
"@tauri-apps/plugin-store": "^2.4.2",
"@tauri-apps/plugin-updater": "^2.10.0",
"ansi-to-html": "^0.7.2",
"lucide-svelte": "^0.577.0",
"marked": "^17.0.1",
"sanitize-html": "^2.17.0",
"shiki": "^3.20.0"
Expand Down
178 changes: 72 additions & 106 deletions apps/staged/src/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@
import ReposListView from './lib/features/projects/ReposListView.svelte';
import SessionLauncher from './lib/features/sessions/SessionLauncher.svelte';
import SettingsPage from './lib/features/settings/SettingsPage.svelte';
import ToastHost from './lib/shared/ToastHost.svelte';
import { Toaster } from '$lib/components/ui/sonner';
import { Button } from '$lib/components/ui/button';
import { TooltipProvider } from '$lib/components/ui/tooltip';
import {
preferences,
initPreferences,
Expand Down Expand Up @@ -442,80 +444,82 @@
</script>

{#if preferences.loaded}
{#if storeIncompat && storeIncompat.kind === 'needs_reset'}
<main class="reset-shell">
<div class="update-state">
<div class="update-card">
<div class="update-header">
<h1 class="update-title">Update Required</h1>
<span class="version-badge new">v{storeIncompat.appVersion}</span>
</div>
<p>
Staged beta updates can require backwards-incompatible changes. The info stored by
Staged (session history, notes) will be cleared, but your
<strong>git repos and branches are not affected</strong>.
</p>
<div class="update-footer">
<p class="version-hint">
Not ready? Install <code>v{storeIncompat.dbAppVersion}</code> instead.
<TooltipProvider delayDuration={500} disableHoverableContent>
{#if storeIncompat && storeIncompat.kind === 'needs_reset'}
<main class="reset-shell">
<div class="update-state">
<div class="update-card">
<div class="update-header">
<h1 class="update-title">Update Required</h1>
<span class="version-badge new">v{storeIncompat.appVersion}</span>
</div>
<p>
Staged beta updates can require backwards-incompatible changes. The info stored by
Staged (session history, notes) will be cleared, but your
<strong>git repos and branches are not affected</strong>.
</p>
<div class="update-actions">
<button class="close-button" onclick={handleClose}>Close</button>
<button class="reset-button" onclick={handleResetStore} disabled={resetting}>
{resetting ? 'Resetting…' : 'Reset & Update'}
</button>
<div class="update-footer">
<p class="version-hint">
Not ready? Install <code>v{storeIncompat.dbAppVersion}</code> instead.
</p>
<div class="update-actions">
<Button variant="ghost" size="sm" onclick={handleClose}>Close</Button>
<Button variant="outline" size="sm" onclick={handleResetStore} disabled={resetting}>
{resetting ? 'Resetting…' : 'Reset & Update'}
</Button>
</div>
</div>
</div>
</div>
</div>
</main>
{:else if storeIncompat && storeIncompat.kind === 'too_new'}
<main class="reset-shell">
<div class="update-state">
<div class="update-card">
<div class="update-header">
<h1 class="update-title">Update Staged</h1>
<span class="version-badge new">v{storeIncompat.dbAppVersion}</span>
</div>
<p>
This database was last used by a newer version of Staged. Please install
<strong>v{storeIncompat.dbAppVersion}</strong> or newer to continue.
</p>
<div class="update-footer">
<div></div>
<div class="update-actions">
<button class="close-button" onclick={handleClose}>Close</button>
</main>
{:else if storeIncompat && storeIncompat.kind === 'too_new'}
<main class="reset-shell">
<div class="update-state">
<div class="update-card">
<div class="update-header">
<h1 class="update-title">Update Staged</h1>
<span class="version-badge new">v{storeIncompat.dbAppVersion}</span>
</div>
<p>
This database was last used by a newer version of Staged. Please install
<strong>v{storeIncompat.dbAppVersion}</strong> or newer to continue.
</p>
<div class="update-footer">
<div></div>
<div class="update-actions">
<Button variant="ghost" size="sm" onclick={handleClose}>Close</Button>
</div>
</div>
</div>
</div>
</div>
</main>
{:else}
<main>
<TopBar />
<div class="content">
{#if storeError}
<div class="error-state">
<p>{storeError}</p>
</div>
{:else if navigation.activeView === 'settings'}
<SettingsPage />
{:else if reposUiEnabled && navigation.showReposList}
<ReposListView />
{:else if navigation.selectedProjectId}
<ProjectHome selectedProjectId={navigation.selectedProjectId} />
{:else}
<ProjectsList />
{/if}
</div>
</main>
{/if}

{#if showSessionLab}
<SessionLauncher onClose={() => (showSessionLab = false)} />
{/if}

<ToastHost />
</main>
{:else}
<main>
<TopBar />
<div class="content">
{#if storeError}
<div class="error-state">
<p>{storeError}</p>
</div>
{:else if navigation.activeView === 'settings'}
<SettingsPage />
{:else if reposUiEnabled && navigation.showReposList}
<ReposListView />
{:else if navigation.selectedProjectId}
<ProjectHome selectedProjectId={navigation.selectedProjectId} />
{:else}
<ProjectsList />
{/if}
</div>
</main>
{/if}

{#if showSessionLab}
<SessionLauncher onClose={() => (showSessionLab = false)} />
{/if}

<Toaster position="bottom-right" visibleToasts={4} duration={8000} closeButton expand />
</TooltipProvider>
{/if}

<style>
Expand Down Expand Up @@ -629,42 +633,4 @@
gap: 8px;
flex-shrink: 0;
}

.close-button {
padding: 7px 16px;
background: none;
border: 1px solid var(--border-muted);
border-radius: 8px;
color: var(--text-muted);
font-size: var(--size-sm);
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}

.close-button:hover {
border-color: var(--border-emphasis);
color: var(--text-primary);
}

.reset-button {
padding: 7px 16px;
background-color: var(--ui-accent);
border: none;
border-radius: 8px;
color: var(--bg-deepest);
font-size: var(--size-sm);
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease;
}

.reset-button:hover {
background-color: var(--ui-accent-hover);
}

.reset-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
</style>
Loading