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

Unify inline-editable field styling app-wide

Browse Source 
Device display name, session title, and session description editors
now share one style: underline is invisible until hover/focus (then
primary), the caret is primary while editing, and text keeps its own
default color at all times instead of shifting on focus.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WzyfRyA7h5rs5SCAahLAWd
This commit is contained in:
valknar
2026-08-31 19:41:13 +02:00
co-authored by Claude Sonnet 5
parent fc7fd74d17
commit fe017497a2
3 changed files with 8 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/devices/DevicesTable.tsx
+6 -7
View File
@@ -3,7 +3,6 @@
import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Input } from "@/components/ui/input";
import { Check, Loader2 } from "lucide-react";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
@@ -55,23 +54,23 @@ function DeviceNameCell({ device }: { device: DeviceRow }) {
}, [status]);
return (
<div className="relative w-48">
<Input
<div className="flex items-center gap-2">
<input
value={value}
onChange={(e) => setValue(e.target.value)}
className="h-8 pr-8"
aria-label="Device display name"
className="max-w-48 min-w-0 border-b-2 border-transparent bg-transparent text-sm font-medium text-foreground caret-primary outline-none transition-colors placeholder:text-muted-foreground/70 hover:border-b-primary focus:border-b-primary [field-sizing:content]"
/>
<div className="pointer-events-none absolute inset-y-0 right-2 flex w-3.5 items-center justify-center">
<div className="relative flex size-4 shrink-0 items-center justify-center">
<Loader2
className={cn(
"absolute size-3.5 animate-spin text-muted-foreground transition-opacity",
"absolute size-4 animate-spin text-muted-foreground transition-opacity",
status === "saving" ? "opacity-100" : "opacity-0",
)}
/>
<Check
className={cn(
"absolute size-3.5 text-primary transition-opacity",
"absolute size-4 text-primary transition-opacity",
status === "saved" ? "opacity-100" : "opacity-0",
)}
/>
components/sessions/SessionDescriptionEditor.tsx
+1 -1
View File
@@ -60,7 +60,7 @@ export function SessionDescriptionEditor({
placeholder="Add a description..."
aria-label="Session description"
rows={1}
className="max-w-full min-w-0 resize-none border-b-2 border-transparent bg-transparent text-sm text-muted-foreground outline-none transition-colors placeholder:text-muted-foreground/60 hover:border-b-border focus:border-b-foreground/40 focus:text-foreground sm:max-w-xl [field-sizing:content]"
className="max-w-full min-w-0 resize-none border-b-2 border-transparent bg-transparent text-sm text-muted-foreground caret-primary outline-none transition-colors placeholder:text-muted-foreground/60 hover:border-b-primary focus:border-b-primary sm:max-w-xl [field-sizing:content]"
/>
<div className="relative mt-0.5 flex size-4 shrink-0 items-center justify-center">
<Loader2
components/sessions/SessionTitleEditor.tsx
+1 -1
View File
@@ -52,7 +52,7 @@ export function SessionTitleEditor({ sessionId, initialName }: { sessionId: numb
onChange={(e) => setValue(e.target.value)}
placeholder={`Session #${sessionId}`}
aria-label="Session name"
className="max-w-full min-w-0 border-b-2 border-transparent bg-transparent font-heading text-2xl font-semibold text-foreground outline-none transition-colors placeholder:text-muted-foreground/70 hover:border-b-border focus:border-b-foreground/40 sm:max-w-xl [field-sizing:content]"
className="max-w-full min-w-0 border-b-2 border-transparent bg-transparent font-heading text-2xl font-semibold text-foreground caret-primary outline-none transition-colors placeholder:text-muted-foreground/70 hover:border-b-primary focus:border-b-primary sm:max-w-xl [field-sizing:content]"
/>
<div className="relative flex size-4 shrink-0 items-center justify-center">
<Loader2