valknar/sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle UI with a channel-strip console look and brand icon
CI / Static checks (push) Successful in 1m9s
Details
CI / Build and push image (push) Failing after 1m2s
Details

Browse Source 
Adds a pink/purple/blue SVG brand mark (favicon + header) and reworks
the visual language around the app's actual interaction - fader-driven
device control - via LED-style indicators, mono instrument readouts,
hairline-framed cards, console-tab nav, and an oscilloscope-style
session timeline. Leaves components/ui/* untouched, restyling only via
design tokens and the app's own composed components. Also fixes a
proxy.ts matcher gap that was gating /icon.svg behind auth.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W8WkFF5ppURBAB918593Eb
This commit is contained in:
valknar
2026-08-25 16:43:28 +02:00
co-authored by Claude Sonnet 5
parent 1119c8eea0
commit f7503d03d0
27 changed files with 278 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/stats/DeviceUsageTable.tsx
+4 -4
View File
@@ -30,10 +30,10 @@ export function DeviceUsageTable({ devices }: { devices: DeviceUsageRow[] }) {
{devices.map((d) => (
<TableRow key={d.deviceId}>
<TableCell className="font-medium">{d.displayName ?? d.bleName}</TableCell>
<TableCell>{d.sessionCount}</TableCell>
<TableCell>{(d.totalActiveMs / 60_000).toFixed(1)}m</TableCell>
<TableCell>{d.commandCount}</TableCell>
<TableCell className="text-muted-foreground">
<TableCell className="bp-readout">{d.sessionCount}</TableCell>
<TableCell className="bp-readout">{(d.totalActiveMs / 60_000).toFixed(1)}m</TableCell>
<TableCell className="bp-readout">{d.commandCount}</TableCell>
<TableCell className="bp-readout text-muted-foreground">
{d.lastUsedAt ? new Date(d.lastUsedAt).toLocaleString() : "Never"}
</TableCell>
</TableRow>
components/stats/RecordingLibraryStats.tsx
+5 -5
View File
@@ -16,13 +16,13 @@ export function RecordingLibraryStats({ stats }: { stats: RecordingLibrarySummar
<CardHeader>
<CardTitle className="text-sm text-muted-foreground">Recordings</CardTitle>
</CardHeader>
<CardContent className="font-display text-3xl">{stats.count}</CardContent>
<CardContent className="bp-readout text-3xl">{stats.count}</CardContent>
</Card>
<Card className="bp-glass">
<CardHeader>
<CardTitle className="text-sm text-muted-foreground">Avg length</CardTitle>
</CardHeader>
<CardContent className="font-display text-3xl">
<CardContent className="bp-readout text-3xl">
{Math.round(stats.avgDurationMs / 1000)}s
</CardContent>
</Card>
@@ -30,7 +30,7 @@ export function RecordingLibraryStats({ stats }: { stats: RecordingLibrarySummar
<CardHeader>
<CardTitle className="text-sm text-muted-foreground">Total plays</CardTitle>
</CardHeader>
<CardContent className="font-display text-3xl">{stats.totalPlayCount}</CardContent>
<CardContent className="bp-readout text-3xl">{stats.totalPlayCount}</CardContent>
</Card>
</div>
@@ -47,8 +47,8 @@ export function RecordingLibraryStats({ stats }: { stats: RecordingLibrarySummar
{stats.list.map((r) => (
<TableRow key={r.id}>
<TableCell className="font-medium">{r.name}</TableCell>
<TableCell>{r.playCount}</TableCell>
<TableCell className="text-muted-foreground">
<TableCell className="bp-readout">{r.playCount}</TableCell>
<TableCell className="bp-readout text-muted-foreground">
{r.lastPlayedAt ? new Date(r.lastPlayedAt).toLocaleString() : "Never"}
</TableCell>
</TableRow>
components/stats/SessionsSummaryCards.tsx
+3 -3
View File
@@ -23,19 +23,19 @@ export function SessionsSummaryCards({ summary }: { summary: SessionsSummary })
<CardHeader>
<CardTitle className="text-sm text-muted-foreground">Completed sessions</CardTitle>
</CardHeader>
<CardContent className="font-display text-3xl">{summary.count}</CardContent>
<CardContent className="bp-readout text-3xl">{summary.count}</CardContent>
</Card>
<Card className="bp-glass">
<CardHeader>
<CardTitle className="text-sm text-muted-foreground">Total time</CardTitle>
</CardHeader>
<CardContent className="font-display text-3xl">{formatHours(summary.totalDurationMs)}</CardContent>
<CardContent className="bp-readout text-3xl">{formatHours(summary.totalDurationMs)}</CardContent>
</Card>
<Card className="bp-glass">
<CardHeader>
<CardTitle className="text-sm text-muted-foreground">Avg session length</CardTitle>
</CardHeader>
<CardContent className="font-display text-3xl">
<CardContent className="bp-readout text-3xl">
{Math.round(summary.avgDurationMs / 60_000)}m
</CardContent>
</Card>