Restyle UI with a channel-strip console look and brand icon
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:
Claude Sonnet 5
@@ -1,4 +1,4 @@
|
||||
# sexy
|
||||
# SEXY
|
||||
|
||||
A self-hosted web console for scanning, connecting to, and controlling Bluetooth LE sex toys over the
|
||||
[Buttplug](https://buttplug.io) protocol - the same open-source protocol behind Intiface Central and most
|
||||
|
||||
@@ -4,7 +4,7 @@ export default function ControlPage() {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div>
|
||||
<h1 className="font-display text-2xl font-semibold">Control</h1>
|
||||
<h1 className="font-heading text-2xl font-semibold">Control</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Scan for devices, connect, and control them live. Every command runs directly from your browser
|
||||
to the device over Web Bluetooth - the server never sees it in real time.
|
||||
|
||||
@@ -10,7 +10,7 @@ export default async function DevicesPage() {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div>
|
||||
<h1 className="font-display text-2xl font-semibold">Devices</h1>
|
||||
<h1 className="font-heading text-2xl font-semibold">Devices</h1>
|
||||
<p className="text-sm text-muted-foreground">Devices seen across past sessions. Give them friendlier names.</p>
|
||||
</div>
|
||||
<Card className="bp-glass">
|
||||
|
||||
+24
-22
@@ -1,6 +1,7 @@
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { BrandMark } from "@/components/layout/BrandMark";
|
||||
import { listRecordings } from "@/lib/db/queries/recordings";
|
||||
import { listPlaySessions } from "@/lib/db/queries/play-sessions";
|
||||
import { getSessionsSummary } from "@/lib/db/queries/stats";
|
||||
@@ -23,7 +24,8 @@ export default async function DashboardPage() {
|
||||
<div className="flex flex-col gap-8">
|
||||
<Card className="bp-glass overflow-hidden">
|
||||
<CardContent className="flex flex-col items-start gap-4 py-8">
|
||||
<h1 className="font-display bp-gradient-text text-3xl font-semibold">Welcome back</h1>
|
||||
<BrandMark size={40} className="bp-pulse rounded-[9px]" />
|
||||
<h1 className="font-heading bp-gradient-text text-3xl font-semibold">Welcome back</h1>
|
||||
<p className="max-w-xl text-sm text-muted-foreground">
|
||||
Scan for nearby devices, take control, and record sessions to replay later - all running
|
||||
directly from your browser over Web Bluetooth.
|
||||
@@ -39,13 +41,13 @@ export default async function DashboardPage() {
|
||||
<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 play time</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="font-display text-3xl">
|
||||
<CardContent className="bp-readout text-3xl">
|
||||
{(summary.totalDurationMs / 3_600_000).toFixed(1)}h
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -53,7 +55,7 @@ export default async function DashboardPage() {
|
||||
<CardHeader>
|
||||
<CardTitle className="text-sm text-muted-foreground">Saved recordings</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="font-display text-3xl">{recordings.length}</CardContent>
|
||||
<CardContent className="bp-readout text-3xl">{recordings.length}</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@@ -62,18 +64,17 @@ export default async function DashboardPage() {
|
||||
<CardHeader>
|
||||
<CardTitle>Recent recordings</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-2">
|
||||
<CardContent className="flex flex-col">
|
||||
{recentRecordings.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">Nothing saved yet.</p>
|
||||
)}
|
||||
{recentRecordings.map((r) => (
|
||||
<Link
|
||||
key={r.id}
|
||||
href={`/recordings/${r.id}`}
|
||||
className="flex items-center justify-between rounded-lg px-2 py-1.5 text-sm hover:bg-muted"
|
||||
>
|
||||
<span>{r.name}</span>
|
||||
<span className="text-muted-foreground">{r.playCount} plays</span>
|
||||
{recentRecordings.map((r, i) => (
|
||||
<Link key={r.id} href={`/recordings/${r.id}`} className="group">
|
||||
{i > 0 && <div className="bp-hairline" />}
|
||||
<div className="flex items-center justify-between px-1 py-2 text-sm">
|
||||
<span className="group-hover:text-primary">{r.name}</span>
|
||||
<span className="bp-readout text-xs text-muted-foreground">{r.playCount} plays</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</CardContent>
|
||||
@@ -83,16 +84,17 @@ export default async function DashboardPage() {
|
||||
<CardHeader>
|
||||
<CardTitle>Recent sessions</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-2">
|
||||
<CardContent className="flex flex-col">
|
||||
{recentSessions.length === 0 && <p className="text-sm text-muted-foreground">No sessions yet.</p>}
|
||||
{recentSessions.map((s) => (
|
||||
<Link
|
||||
key={s.id}
|
||||
href={`/sessions/${s.id}`}
|
||||
className="flex items-center justify-between rounded-lg px-2 py-1.5 text-sm hover:bg-muted"
|
||||
>
|
||||
<span>{s.name ?? `Session #${s.id}`}</span>
|
||||
<span className="text-muted-foreground">{new Date(s.startedAt).toLocaleDateString()}</span>
|
||||
{recentSessions.map((s, i) => (
|
||||
<Link key={s.id} href={`/sessions/${s.id}`} className="group">
|
||||
{i > 0 && <div className="bp-hairline" />}
|
||||
<div className="flex items-center justify-between px-1 py-2 text-sm">
|
||||
<span className="group-hover:text-primary">{s.name ?? `Session #${s.id}`}</span>
|
||||
<span className="bp-readout text-xs text-muted-foreground">
|
||||
{new Date(s.startedAt).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</CardContent>
|
||||
|
||||
@@ -23,7 +23,7 @@ export default async function RecordingDetailPage({ params }: { params: Promise<
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="font-display text-2xl font-semibold">{recording.name}</h1>
|
||||
<h1 className="font-heading text-2xl font-semibold">{recording.name}</h1>
|
||||
{recording.description && <p className="text-sm text-muted-foreground">{recording.description}</p>}
|
||||
</div>
|
||||
<Button asChild>
|
||||
|
||||
@@ -4,7 +4,7 @@ export default async function ReplayPage({ params }: { params: Promise<{ id: str
|
||||
const { id } = await params;
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<h1 className="font-display text-2xl font-semibold">Replay</h1>
|
||||
<h1 className="font-heading text-2xl font-semibold">Replay</h1>
|
||||
<ReplayPlayerLoader recordingId={Number(id)} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -10,7 +10,7 @@ export default async function RecordingsPage() {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div>
|
||||
<h1 className="font-display text-2xl font-semibold">Recordings</h1>
|
||||
<h1 className="font-heading text-2xl font-semibold">Recordings</h1>
|
||||
<p className="text-sm text-muted-foreground">Saved sessions you can replay against connected devices.</p>
|
||||
</div>
|
||||
<Card className="bp-glass">
|
||||
|
||||
@@ -21,7 +21,7 @@ export default async function SessionDetailPage({ params }: { params: Promise<{
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div>
|
||||
<h1 className="font-display text-2xl font-semibold">{detail.session.name ?? `Session #${detail.session.id}`}</h1>
|
||||
<h1 className="font-heading text-2xl font-semibold">{detail.session.name ?? `Session #${detail.session.id}`}</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{detail.session.kind} · {detail.session.status} · {formatDuration(detail.session.durationMs)}
|
||||
</p>
|
||||
|
||||
@@ -10,7 +10,7 @@ export default async function SessionsPage() {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div>
|
||||
<h1 className="font-display text-2xl font-semibold">Sessions</h1>
|
||||
<h1 className="font-heading text-2xl font-semibold">Sessions</h1>
|
||||
<p className="text-sm text-muted-foreground">History of live control and replay sessions.</p>
|
||||
</div>
|
||||
<Card className="bp-glass">
|
||||
|
||||
@@ -20,7 +20,7 @@ export default async function StatsPage() {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div>
|
||||
<h1 className="font-display text-2xl font-semibold">Stats</h1>
|
||||
<h1 className="font-heading text-2xl font-semibold">Stats</h1>
|
||||
<p className="text-sm text-muted-foreground">Usage across sessions, devices, and your recording library.</p>
|
||||
</div>
|
||||
|
||||
|
||||
+108
-92
@@ -7,6 +7,7 @@
|
||||
@theme inline {
|
||||
--font-heading: var(--font-display);
|
||||
--font-sans: var(--font-sans);
|
||||
--font-mono: var(--font-mono);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
@@ -48,79 +49,77 @@
|
||||
}
|
||||
|
||||
/*
|
||||
* Palette: dark-mode-first (fits the product's low-lit, intimate register).
|
||||
* Every hue anchors to the pink -> purple -> blue brand sweep; --primary/
|
||||
* --accent/--chart-* are the only places it should read as loud. Card
|
||||
* surfaces stay a near-neutral indigo-black so the sweep doesn't flood
|
||||
* every panel.
|
||||
* Modern pink -> purple -> blue palette (the app's signature sweep, also
|
||||
* used in app/icon.svg / BrandMark). Dark cool near-black base with a vivid
|
||||
* pink primary; violet/blue fill out charts and the wordmark/icon gradient.
|
||||
*/
|
||||
:root {
|
||||
--background: oklch(0.99 0.005 300);
|
||||
--foreground: oklch(0.22 0.03 290);
|
||||
--card: oklch(0.98 0.008 300);
|
||||
--card-foreground: oklch(0.22 0.03 290);
|
||||
--popover: oklch(0.99 0.005 300);
|
||||
--popover-foreground: oklch(0.22 0.03 290);
|
||||
--primary: oklch(0.58 0.23 322);
|
||||
--primary-foreground: oklch(0.99 0.01 322);
|
||||
--secondary: oklch(0.94 0.02 300);
|
||||
--secondary-foreground: oklch(0.3 0.05 300);
|
||||
--muted: oklch(0.95 0.015 300);
|
||||
--muted-foreground: oklch(0.5 0.03 290);
|
||||
--accent: oklch(0.9 0.06 330);
|
||||
--accent-foreground: oklch(0.3 0.1 330);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.9 0.02 300);
|
||||
--input: oklch(0.9 0.02 300);
|
||||
--ring: oklch(0.58 0.23 322);
|
||||
--chart-1: oklch(0.72 0.2 350);
|
||||
--chart-2: oklch(0.62 0.24 320);
|
||||
--chart-3: oklch(0.58 0.22 280);
|
||||
--chart-4: oklch(0.6 0.2 250);
|
||||
--chart-5: oklch(0.68 0.15 220);
|
||||
--radius: 0.9rem;
|
||||
--sidebar: oklch(0.97 0.01 300);
|
||||
--sidebar-foreground: oklch(0.22 0.03 290);
|
||||
--sidebar-primary: oklch(0.58 0.23 322);
|
||||
--sidebar-primary-foreground: oklch(0.99 0.01 322);
|
||||
--sidebar-accent: oklch(0.9 0.06 330);
|
||||
--sidebar-accent-foreground: oklch(0.3 0.1 330);
|
||||
--sidebar-border: oklch(0.9 0.02 300);
|
||||
--sidebar-ring: oklch(0.58 0.23 322);
|
||||
--background: #f5f3fb;
|
||||
--foreground: #1f1b2e;
|
||||
--card: #ffffff;
|
||||
--card-foreground: #1f1b2e;
|
||||
--popover: #ffffff;
|
||||
--popover-foreground: #1f1b2e;
|
||||
--primary: #db2777;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #ede9fe;
|
||||
--secondary-foreground: #3a2d54;
|
||||
--muted: #efeafd;
|
||||
--muted-foreground: #6b6280;
|
||||
--accent: #ede4fb;
|
||||
--accent-foreground: #4c1d95;
|
||||
--destructive: #dc2626;
|
||||
--border: #e4defa;
|
||||
--input: #e4defa;
|
||||
--ring: #db2777;
|
||||
--chart-1: #db2777;
|
||||
--chart-2: #9333ea;
|
||||
--chart-3: #7c3aed;
|
||||
--chart-4: #2563eb;
|
||||
--chart-5: #0284c7;
|
||||
--radius: 0.75rem;
|
||||
--sidebar: #ede9fe;
|
||||
--sidebar-foreground: #1f1b2e;
|
||||
--sidebar-primary: #db2777;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #ede4fb;
|
||||
--sidebar-accent-foreground: #4c1d95;
|
||||
--sidebar-border: #e4defa;
|
||||
--sidebar-ring: #db2777;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.16 0.025 285);
|
||||
--foreground: oklch(0.95 0.015 290);
|
||||
--card: oklch(0.21 0.03 285);
|
||||
--card-foreground: oklch(0.95 0.015 290);
|
||||
--popover: oklch(0.19 0.03 285);
|
||||
--popover-foreground: oklch(0.95 0.015 290);
|
||||
--primary: oklch(0.7 0.2 322);
|
||||
--primary-foreground: oklch(0.15 0.03 322);
|
||||
--secondary: oklch(0.28 0.04 285);
|
||||
--secondary-foreground: oklch(0.92 0.02 290);
|
||||
--muted: oklch(0.26 0.03 285);
|
||||
--muted-foreground: oklch(0.68 0.03 290);
|
||||
--accent: oklch(0.35 0.09 330);
|
||||
--accent-foreground: oklch(0.95 0.03 330);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 14%);
|
||||
--ring: oklch(0.7 0.2 322);
|
||||
--chart-1: oklch(0.75 0.19 350);
|
||||
--chart-2: oklch(0.7 0.22 320);
|
||||
--chart-3: oklch(0.68 0.2 280);
|
||||
--chart-4: oklch(0.68 0.19 250);
|
||||
--chart-5: oklch(0.72 0.15 220);
|
||||
--sidebar: oklch(0.19 0.03 285);
|
||||
--sidebar-foreground: oklch(0.95 0.015 290);
|
||||
--sidebar-primary: oklch(0.7 0.2 322);
|
||||
--sidebar-primary-foreground: oklch(0.15 0.03 322);
|
||||
--sidebar-accent: oklch(0.35 0.09 330);
|
||||
--sidebar-accent-foreground: oklch(0.95 0.03 330);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.7 0.2 322);
|
||||
--background: #15131f;
|
||||
--foreground: #f2f0f7;
|
||||
--card: #1f1b2c;
|
||||
--card-foreground: #f2f0f7;
|
||||
--popover: #1c1829;
|
||||
--popover-foreground: #f2f0f7;
|
||||
--primary: #ec4899;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #2a2440;
|
||||
--secondary-foreground: #e5e1f0;
|
||||
--muted: #272138;
|
||||
--muted-foreground: #a79fc0;
|
||||
--accent: #3a2d54;
|
||||
--accent-foreground: #efeaff;
|
||||
--destructive: #ef4444;
|
||||
--border: color-mix(in srgb, #a78bfa 25%, transparent);
|
||||
--input: color-mix(in srgb, #a78bfa 18%, transparent);
|
||||
--ring: #ec4899;
|
||||
--chart-1: #f472b6;
|
||||
--chart-2: #c084fc;
|
||||
--chart-3: #a78bfa;
|
||||
--chart-4: #60a5fa;
|
||||
--chart-5: #38bdf8;
|
||||
--sidebar: #1c1829;
|
||||
--sidebar-foreground: #f2f0f7;
|
||||
--sidebar-primary: #ec4899;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #3a2d54;
|
||||
--sidebar-accent-foreground: #efeaff;
|
||||
--sidebar-border: color-mix(in srgb, #a78bfa 25%, transparent);
|
||||
--sidebar-ring: #ec4899;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -135,52 +134,69 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Signature pink -> purple -> blue sweep, used sparingly (primary CTAs,
|
||||
active rings, headline accents) rather than flooding every surface. */
|
||||
/* Signature pink -> purple -> blue sweep (matches app/icon.svg), used for
|
||||
the wordmark and one hero moment - not smeared across every surface. */
|
||||
.bp-gradient-text {
|
||||
background: linear-gradient(
|
||||
100deg,
|
||||
oklch(0.75 0.19 350),
|
||||
oklch(0.65 0.23 322),
|
||||
oklch(0.62 0.2 260)
|
||||
);
|
||||
background: linear-gradient(100deg, #ff6fb0, #b34bde 50%, #4f7fe0);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.bp-gradient-ring {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
oklch(0.75 0.19 350),
|
||||
oklch(0.65 0.23 322),
|
||||
oklch(0.62 0.2 260)
|
||||
);
|
||||
background: linear-gradient(135deg, #ff6fb0, #b34bde 50%, #4f7fe0);
|
||||
}
|
||||
|
||||
/* Glassy translucent card surface, subtle glow on hover. */
|
||||
/* Console-module surface: hairline border + a soft inset top highlight,
|
||||
standing in for backdrop-blur glassmorphism. */
|
||||
.bp-glass {
|
||||
background: color-mix(in oklch, var(--card) 72%, transparent);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--foreground) 8%, transparent);
|
||||
transition:
|
||||
box-shadow 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
.bp-glass:hover {
|
||||
border-color: color-mix(in oklch, var(--primary) 45%, var(--border));
|
||||
box-shadow: 0 0 0 1px color-mix(in oklch, var(--primary) 25%, transparent), 0 10px 30px -12px rgba(0, 0, 0, 0.45);
|
||||
border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
|
||||
box-shadow:
|
||||
inset 0 1px 0 color-mix(in srgb, var(--foreground) 10%, transparent),
|
||||
0 10px 30px -14px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
/* Illuminated indicator dot - reused on connection status and per-actuator
|
||||
transmit indicators. */
|
||||
.bp-led {
|
||||
display: inline-block;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 999px;
|
||||
background: var(--muted-foreground);
|
||||
}
|
||||
.bp-led[data-on="true"] {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
/* Thin panel seam - a hardware "trim line," not a plain UI divider. */
|
||||
.bp-hairline {
|
||||
height: 1px;
|
||||
background: color-mix(in srgb, #a78bfa 35%, transparent);
|
||||
}
|
||||
|
||||
/* Instrument-readout numerals: tabular mono for actuator %, timers, stats. */
|
||||
.bp-readout {
|
||||
font-family: var(--font-mono);
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
@keyframes bp-pulse-glow {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 color-mix(in oklch, var(--primary) 55%, transparent);
|
||||
box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 55%, transparent);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 6px color-mix(in oklch, var(--primary) 0%, transparent);
|
||||
box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 0%, transparent);
|
||||
}
|
||||
}
|
||||
.bp-pulse {
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="bpGrad" x1="2" y1="2" x2="30" y2="30" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#ff6fb0" />
|
||||
<stop offset="52%" stop-color="#b34bde" />
|
||||
<stop offset="100%" stop-color="#4f7fe0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="30" height="30" rx="9" fill="url(#bpGrad)" />
|
||||
<path
|
||||
d="M16 22.6c-.3 0-.5-.1-.7-.3C11.7 19 8 15.6 8 12.3 8 9.9 9.9 8 12.3 8c1.3 0 2.6.6 3.4 1.7.1.1.2.1.3 0 .8-1.1 2.1-1.7 3.4-1.7C21.8 8 23.7 9.9 23.7 12.3c0 3.3-3.7 6.7-7.3 10-.2.2-.4.3-.7.3z"
|
||||
fill="rgba(255,255,255,0.22)"
|
||||
/>
|
||||
<polyline
|
||||
points="6,15 10,15 12,9 15,21 18,13 20,15 26,15"
|
||||
fill="none"
|
||||
stroke="#ffffff"
|
||||
stroke-width="1.7"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 884 B |
+5
-4
@@ -1,15 +1,16 @@
|
||||
import type { Metadata } from "next";
|
||||
import "./globals.css";
|
||||
import { Geist, Space_Grotesk } from "next/font/google";
|
||||
import { Inter, Space_Grotesk, JetBrains_Mono } from "next/font/google";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { ThemeProvider } from "@/components/layout/ThemeProvider";
|
||||
import { Toaster } from "@/components/ui/sonner";
|
||||
|
||||
const geist = Geist({ subsets: ["latin"], variable: "--font-sans" });
|
||||
const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
|
||||
const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], variable: "--font-display" });
|
||||
const jetbrainsMono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-mono" });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "sexy",
|
||||
title: "SEXY",
|
||||
description: "Bluetooth toy control console",
|
||||
};
|
||||
|
||||
@@ -18,7 +19,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
<html
|
||||
lang="en"
|
||||
suppressHydrationWarning
|
||||
className={cn("font-sans", geist.variable, spaceGrotesk.variable)}
|
||||
className={cn("font-sans", inter.variable, spaceGrotesk.variable, jetbrainsMono.variable)}
|
||||
>
|
||||
<body>
|
||||
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
|
||||
|
||||
+5
-1
@@ -1,13 +1,17 @@
|
||||
import { Suspense } from "react";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { LoginForm } from "@/components/auth/LoginForm";
|
||||
import { BrandMark } from "@/components/layout/BrandMark";
|
||||
|
||||
export default function LoginPage() {
|
||||
return (
|
||||
<div className="flex min-h-dvh items-center justify-center p-4">
|
||||
<Card className="bp-glass w-full max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="font-display bp-gradient-text text-2xl">sexy</CardTitle>
|
||||
<div className="flex items-center gap-2">
|
||||
<BrandMark size={32} />
|
||||
<CardTitle className="font-heading bp-gradient-text text-2xl">SEXY</CardTitle>
|
||||
</div>
|
||||
<CardDescription>Enter the shared access secret to continue.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
|
||||
@@ -12,20 +12,17 @@ interface ActuatorSliderProps {
|
||||
|
||||
export function ActuatorSlider({ actuator, value, transmitting, onChange }: ActuatorSliderProps) {
|
||||
return (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex flex-col gap-2 rounded-md border border-border/70 bg-background/40 p-3">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="font-medium text-foreground">{actuator.descriptor}</span>
|
||||
<span className={transmitting ? "bp-gradient-text font-semibold" : "text-muted-foreground"}>
|
||||
<span className="flex items-center gap-2 font-medium text-foreground">
|
||||
<span className="bp-led" data-on={transmitting} aria-hidden />
|
||||
{actuator.descriptor}
|
||||
</span>
|
||||
<span className="bp-readout text-sm text-muted-foreground data-[on=true]:text-primary" data-on={transmitting}>
|
||||
{Math.round(value * 100)}%
|
||||
</span>
|
||||
</div>
|
||||
<Slider
|
||||
value={[value * 100]}
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
onValueChange={([v]) => onChange(v / 100)}
|
||||
/>
|
||||
<Slider value={[value * 100]} min={0} max={100} step={1} onValueChange={([v]) => onChange(v / 100)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ActuatorSlider } from "./ActuatorSlider";
|
||||
import type { ConnectedDeviceInfo } from "@/lib/buttplug/types";
|
||||
@@ -22,13 +22,14 @@ export function DeviceCard({
|
||||
}: DeviceCardProps) {
|
||||
return (
|
||||
<Card className="bp-glass">
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle>{device.displayName ?? device.name}</CardTitle>
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-3">
|
||||
<span className="text-sm font-medium text-foreground">{device.displayName ?? device.name}</span>
|
||||
<Button variant="outline" size="sm" onClick={onStop}>
|
||||
Stop
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-4">
|
||||
<div className="bp-hairline mx-4" />
|
||||
<CardContent className="flex flex-col gap-3 pt-3">
|
||||
{device.actuators.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No controllable actuators reported.</p>
|
||||
) : (
|
||||
|
||||
@@ -66,8 +66,8 @@ export function DevicesTable({ devices }: { devices: DeviceRow[] }) {
|
||||
<TableCell>
|
||||
<DeviceNameCell device={d} />
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">{d.bleName}</TableCell>
|
||||
<TableCell className="text-muted-foreground">
|
||||
<TableCell className="bp-readout text-muted-foreground">{d.bleName}</TableCell>
|
||||
<TableCell className="bp-readout text-muted-foreground">
|
||||
{d.lastConnectedAt ? new Date(d.lastConnectedAt).toLocaleString() : "Never"}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface BrandMarkProps {
|
||||
size?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/** Inline twin of app/icon.svg (the favicon) - kept as markup, not an <img>, so it can be sized/animated with CSS. */
|
||||
export function BrandMark({ size = 28, className }: BrandMarkProps) {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={cn("shrink-0", className)}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="bpGradMark" x1="2" y1="2" x2="30" y2="30" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stopColor="#ff6fb0" />
|
||||
<stop offset="52%" stopColor="#b34bde" />
|
||||
<stop offset="100%" stopColor="#4f7fe0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1" y="1" width="30" height="30" rx="9" fill="url(#bpGradMark)" />
|
||||
<path
|
||||
d="M16 22.6c-.3 0-.5-.1-.7-.3C11.7 19 8 15.6 8 12.3 8 9.9 9.9 8 12.3 8c1.3 0 2.6.6 3.4 1.7.1.1.2.1.3 0 .8-1.1 2.1-1.7 3.4-1.7C21.8 8 23.7 9.9 23.7 12.3c0 3.3-3.7 6.7-7.3 10-.2.2-.4.3-.7.3z"
|
||||
fill="rgba(255,255,255,0.22)"
|
||||
/>
|
||||
<polyline
|
||||
points="6,15 10,15 12,9 15,21 18,13 20,15 26,15"
|
||||
fill="none"
|
||||
stroke="#ffffff"
|
||||
strokeWidth={1.7}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -8,15 +8,10 @@ export function ConnectionStatus() {
|
||||
const deviceCount = useButtplugStore((s) => Object.keys(s.devices).length);
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 rounded-full border border-border bg-card/60 px-3 py-1 text-xs">
|
||||
<span
|
||||
className={cn(
|
||||
"size-2 rounded-full",
|
||||
connected ? "bg-primary bp-pulse" : "bg-muted-foreground/50",
|
||||
)}
|
||||
/>
|
||||
<span className="text-muted-foreground">
|
||||
{connected ? `${deviceCount} device${deviceCount === 1 ? "" : "s"} connected` : "Not connected"}
|
||||
<div className="flex items-center gap-2 rounded-md border border-border bg-card/60 px-3 py-1 text-xs">
|
||||
<span className={cn("bp-led", connected && "bp-pulse")} data-on={connected} aria-hidden />
|
||||
<span className="bp-readout text-muted-foreground">
|
||||
{connected ? `${deviceCount} device${deviceCount === 1 ? "" : "s"} connected` : "not connected"}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -7,6 +7,7 @@ import { Menu, Moon, Sun, LogOut } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
|
||||
import { ConnectionStatus } from "./ConnectionStatus";
|
||||
import { BrandMark } from "./BrandMark";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const LINKS = [
|
||||
@@ -28,10 +29,10 @@ function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
|
||||
href={link.href}
|
||||
onClick={onNavigate}
|
||||
className={cn(
|
||||
"rounded-lg px-3 py-1.5 text-sm font-medium transition-colors",
|
||||
"border-b-2 px-2.5 py-1.5 text-xs font-medium tracking-wide uppercase transition-colors",
|
||||
pathname === link.href
|
||||
? "bg-primary/15 text-primary"
|
||||
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
||||
? "border-primary text-foreground"
|
||||
: "border-transparent text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
{link.label}
|
||||
@@ -54,8 +55,9 @@ export function NavBar() {
|
||||
return (
|
||||
<header className="sticky top-0 z-40 border-b border-border bg-background/80 backdrop-blur-lg">
|
||||
<div className="mx-auto flex h-14 max-w-6xl items-center gap-3 px-4">
|
||||
<Link href="/" className="font-display bp-gradient-text mr-2 text-lg font-semibold">
|
||||
sexy
|
||||
<Link href="/" className="mr-2 flex items-center gap-2">
|
||||
<BrandMark size={26} />
|
||||
<span className="font-heading bp-gradient-text text-lg font-semibold">SEXY</span>
|
||||
</Link>
|
||||
|
||||
<nav className="hidden items-center gap-1 md:flex">
|
||||
|
||||
@@ -64,11 +64,13 @@ export function RecordingsTable({ recordings }: { recordings: RecordingRow[] })
|
||||
{r.name}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell>{formatDuration(r.durationMs)}</TableCell>
|
||||
<TableCell className="bp-readout">{formatDuration(r.durationMs)}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="secondary">{r.playCount}</Badge>
|
||||
<Badge variant="secondary" className="bp-readout">
|
||||
{r.playCount}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">
|
||||
<TableCell className="bp-readout text-muted-foreground">
|
||||
{r.lastPlayedAt ? new Date(r.lastPlayedAt).toLocaleString() : "Never"}
|
||||
</TableCell>
|
||||
<TableCell className="flex justify-end gap-1">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
|
||||
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
|
||||
import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart";
|
||||
|
||||
export interface TimelineRow {
|
||||
@@ -46,27 +46,36 @@ export function SessionTimelineChart({ timeline }: { timeline: TimelineRow[] })
|
||||
|
||||
return (
|
||||
<ChartContainer config={config} className="h-64 w-full">
|
||||
<LineChart data={data}>
|
||||
<CartesianGrid vertical={false} />
|
||||
<AreaChart data={data}>
|
||||
<defs>
|
||||
{series.map(([sessionDeviceId]) => (
|
||||
<linearGradient key={sessionDeviceId} id={`fill-${seriesKey(sessionDeviceId)}`} x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor={`var(--color-${seriesKey(sessionDeviceId)})`} stopOpacity={0.5} />
|
||||
<stop offset="95%" stopColor={`var(--color-${seriesKey(sessionDeviceId)})`} stopOpacity={0.03} />
|
||||
</linearGradient>
|
||||
))}
|
||||
</defs>
|
||||
<CartesianGrid vertical={false} stroke="var(--border)" />
|
||||
<XAxis
|
||||
dataKey="bucket"
|
||||
tickFormatter={(v: number) => `${Math.round(v / 1000)}s`}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
className="bp-readout text-xs"
|
||||
/>
|
||||
<YAxis domain={[0, 100]} tickLine={false} axisLine={false} width={32} />
|
||||
<YAxis domain={[0, 100]} tickLine={false} axisLine={false} width={32} className="bp-readout text-xs" />
|
||||
<ChartTooltip content={<ChartTooltipContent />} />
|
||||
{series.map(([sessionDeviceId]) => (
|
||||
<Line
|
||||
<Area
|
||||
key={sessionDeviceId}
|
||||
type="monotone"
|
||||
dataKey={seriesKey(sessionDeviceId)}
|
||||
stroke={`var(--color-${seriesKey(sessionDeviceId)})`}
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
fill={`url(#fill-${seriesKey(sessionDeviceId)})`}
|
||||
/>
|
||||
))}
|
||||
</LineChart>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -68,8 +68,10 @@ export function SessionsTable({ sessions }: { sessions: SessionRow[] }) {
|
||||
<Badge variant={s.kind === "live" ? "default" : "secondary"}>{s.kind}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">{s.status}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{new Date(s.startedAt).toLocaleString()}</TableCell>
|
||||
<TableCell>{formatDuration(s.durationMs)}</TableCell>
|
||||
<TableCell className="bp-readout text-muted-foreground">
|
||||
{new Date(s.startedAt).toLocaleString()}
|
||||
</TableCell>
|
||||
<TableCell className="bp-readout">{formatDuration(s.durationMs)}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button variant="ghost" size="icon-sm" onClick={() => void handleDelete(s.id)} aria-label="Delete">
|
||||
<Trash2 className="size-3.5" />
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -22,5 +22,5 @@ export default async function proxy(req: NextRequest) {
|
||||
}
|
||||
|
||||
export const config = {
|
||||
matcher: ["/((?!_next/static|_next/image|favicon.ico|login|api/auth/login|api/health).*)"],
|
||||
matcher: ["/((?!_next/static|_next/image|favicon.ico|icon.svg|login|api/auth/login|api/health).*)"],
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user