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

Add animated glass background, breadcrumbs, and brand mark polish

Browse Source 
Cards now sit on an animated signature-gradient background and use a
translucent, blurred bp-glass surface so it shines through; extended
bp-glass to every stat surface on the Stats page and to its tab switcher.
Adds a Breadcrumbs component below the header on all app pages.

Also: drop the gradient text fill from the wordmark/heading, animate the
BrandMark's heart and curve on the dashboard hero instead of a plain pulse
ring, recenter the heart/curve artwork in icon.svg and BrandMark, close the
mobile nav menu on link click, remove the redundant "back to recordings"
button, and match the "Start session"/"Scan for devices" button sizes.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
valknar
2026-08-26 18:47:30 +02:00
co-authored by Claude Sonnet 5
parent 9e0380ec75
commit c46adf788f
14 changed files with 248 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/stats/DeviceUsageTable.tsx
+34 -25
View File
@@ -1,3 +1,4 @@
import { Card, CardContent } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
export interface DeviceUsageRow {
@@ -12,33 +13,41 @@ export interface DeviceUsageRow {
export function DeviceUsageTable({ devices }: { devices: DeviceUsageRow[] }) {
if (devices.length === 0) {
return <p className="text-sm text-muted-foreground">No device activity yet.</p>;
return (
<Card className="bp-glass">
<CardContent className="py-6 text-sm text-muted-foreground">No device activity yet.</CardContent>
</Card>
);
}
return (
<Table>
<TableHeader>
<TableRow>
<TableHead>Device</TableHead>
<TableHead>Sessions</TableHead>
<TableHead>Active time</TableHead>
<TableHead>Commands</TableHead>
<TableHead>Last used</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{devices.map((d) => (
<TableRow key={d.deviceId}>
<TableCell className="font-medium">{d.displayName ?? d.bleName}</TableCell>
<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>
))}
</TableBody>
</Table>
<Card className="bp-glass">
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>Device</TableHead>
<TableHead>Sessions</TableHead>
<TableHead>Active time</TableHead>
<TableHead>Commands</TableHead>
<TableHead>Last used</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{devices.map((d) => (
<TableRow key={d.deviceId}>
<TableCell className="font-medium">{d.displayName ?? d.bleName}</TableCell>
<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>
))}
</TableBody>
</Table>
</CardContent>
</Card>
);
}
components/stats/RecordingLibraryStats.tsx
+24 -20
View File
@@ -35,26 +35,30 @@ export function RecordingLibraryStats({ stats }: { stats: RecordingLibrarySummar
</div>
{stats.list.length > 0 && (
<Table>
<TableHeader>
<TableRow>
<TableHead>Recording</TableHead>
<TableHead>Plays</TableHead>
<TableHead>Last played</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{stats.list.map((r) => (
<TableRow key={r.id}>
<TableCell className="font-medium">{r.name}</TableCell>
<TableCell className="bp-readout">{r.playCount}</TableCell>
<TableCell className="bp-readout text-muted-foreground">
{r.lastPlayedAt ? new Date(r.lastPlayedAt).toLocaleString() : "Never"}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
<Card className="bp-glass">
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>Recording</TableHead>
<TableHead>Plays</TableHead>
<TableHead>Last played</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{stats.list.map((r) => (
<TableRow key={r.id}>
<TableCell className="font-medium">{r.name}</TableCell>
<TableCell className="bp-readout">{r.playCount}</TableCell>
<TableCell className="bp-readout text-muted-foreground">
{r.lastPlayedAt ? new Date(r.lastPlayedAt).toLocaleString() : "Never"}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</CardContent>
</Card>
)}
</div>
);
components/stats/SessionsSummaryCards.tsx
+5 -3
View File
@@ -40,9 +40,11 @@ export function SessionsSummaryCards({ summary }: { summary: SessionsSummary })
</CardContent>
</Card>
</div>
<p className="text-sm text-muted-foreground">
{liveCount} live · {replayCount} replay
</p>
<Card className="bp-glass">
<CardContent className="py-3 text-sm text-muted-foreground">
{liveCount} live · {replayCount} replay
</CardContent>
</Card>
{summary.durationPerDevice.length > 0 && (
<Card className="bp-glass">
<CardHeader>