Unify inline-editable field styling app-wide
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:
@@ -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",
|
||||
)}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user