From 1efd08974958bd27769779604203a40666e1f095 Mon Sep 17 00:00:00 2001 From: npeter83 Date: Sun, 12 Jul 2026 00:29:04 +0200 Subject: [PATCH] chore(ui): extract shared inputCls + btnCls to ui/form.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The standard input style was copy-pasted verbatim into 5 components (DownloadCenter/DownloadDialog/ProfileEditor/ShareDialog/VideoEditor) and the text-button style into 2 (ShareDialog/VideoEditor). Export both from ui/form.tsx and import them. Byte-identical strings → no visual change. The settings-family panels (Settings/Config/Setup/Welcome) use a DIFFERENT input style (bg-card/rounded-xl/focus:border-accent); unifying the two is a design call left to the glass-consistency epic, not this DRY extract. --- frontend/src/components/DownloadCenter.tsx | 3 +-- frontend/src/components/DownloadDialog.tsx | 4 +--- frontend/src/components/ProfileEditor.tsx | 3 +-- frontend/src/components/ShareDialog.tsx | 11 ++++------- frontend/src/components/VideoEditor.tsx | 10 ++++------ frontend/src/components/ui/form.tsx | 11 +++++++++++ 6 files changed, 22 insertions(+), 20 deletions(-) diff --git a/frontend/src/components/DownloadCenter.tsx b/frontend/src/components/DownloadCenter.tsx index 6adb61b..a192869 100644 --- a/frontend/src/components/DownloadCenter.tsx +++ b/frontend/src/components/DownloadCenter.tsx @@ -30,9 +30,8 @@ import { api, type DownloadJob, type Me } from "../lib/api"; import { invalidateDownloads } from "../lib/downloads"; import { notify } from "../lib/notifications"; import { formatBytes, formatDuration, formatEta, formatSpeed } from "../lib/format"; +import { inputCls } from "./ui/form"; -const inputCls = - "w-full rounded-lg bg-surface border border-border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent/40"; const GiB = 1024 ** 3; const STATUS_CLS: Record = { diff --git a/frontend/src/components/DownloadDialog.tsx b/frontend/src/components/DownloadDialog.tsx index 70c7b54..8340ee6 100644 --- a/frontend/src/components/DownloadDialog.tsx +++ b/frontend/src/components/DownloadDialog.tsx @@ -9,9 +9,7 @@ import { invalidateDownloads } from "../lib/downloads"; const ProfileEditor = lazy(() => import("./ProfileEditor")); import { notify } from "../lib/notifications"; import { navigateTo } from "../lib/nav"; - -const inputCls = - "w-full rounded-lg bg-surface border border-border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent/40"; +import { inputCls } from "./ui/form"; // Preset picker shown when the user hits Download on a card / in the player, or adds a URL from // the Download Center. Enqueues via the API and points the user at the Download Center. diff --git a/frontend/src/components/ProfileEditor.tsx b/frontend/src/components/ProfileEditor.tsx index 4178dc7..e1901b5 100644 --- a/frontend/src/components/ProfileEditor.tsx +++ b/frontend/src/components/ProfileEditor.tsx @@ -5,9 +5,8 @@ import { Lock, Pencil, Plus, Trash2 } from "lucide-react"; import Modal from "./Modal"; import { useConfirm } from "./ConfirmProvider"; import { api, type DownloadProfile, type DownloadSpec } from "../lib/api"; +import { inputCls } from "./ui/form"; -const inputCls = - "w-full rounded-lg bg-surface border border-border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent/40"; const HEIGHTS = [null, 2160, 1440, 1080, 720, 480, 360]; const BLANK: DownloadSpec = { diff --git a/frontend/src/components/ShareDialog.tsx b/frontend/src/components/ShareDialog.tsx index 6bacfd1..1b58d22 100644 --- a/frontend/src/components/ShareDialog.tsx +++ b/frontend/src/components/ShareDialog.tsx @@ -7,10 +7,7 @@ import Modal from "./Modal"; import { useConfirm } from "./ConfirmProvider"; import { notify } from "../lib/notifications"; import { api, type DownloadJob, type ShareLink } from "../lib/api"; - -const inputCls = - "w-full rounded-lg bg-surface border border-border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent/40"; -const btn = "px-3 py-1.5 rounded-lg text-sm font-medium transition disabled:opacity-50"; +import { inputCls, btnCls } from "./ui/form"; const EXPIRY_DAYS = [null, 1, 7, 30] as const; // --- share with a registered user (ACL) ----------------------------------------------------- @@ -221,10 +218,10 @@ function LinkShare({ job }: { job: DownloadJob }) { autoComplete="new-password" />
- -
@@ -232,7 +229,7 @@ function LinkShare({ job }: { job: DownloadJob }) { ) : ( diff --git a/frontend/src/components/VideoEditor.tsx b/frontend/src/components/VideoEditor.tsx index 971e7d1..3f52c70 100644 --- a/frontend/src/components/VideoEditor.tsx +++ b/frontend/src/components/VideoEditor.tsx @@ -6,6 +6,7 @@ import clsx from "clsx"; import Modal from "./Modal"; import { notify } from "../lib/notifications"; import { api, type DownloadJob, type EditSpec } from "../lib/api"; +import { inputCls, btnCls } from "./ui/form"; // mm:ss.d timecode <-> seconds. function tc(s: number): string { @@ -30,9 +31,6 @@ type Seg = { id: number; start: number; end: number; keep: boolean }; type Frac = { x: number; y: number; w: number; h: number }; type Drag = { type: "seek" } | { type: "boundary"; bi: number }; -const btn = "px-3 py-1.5 rounded-lg text-sm font-medium transition disabled:opacity-50"; -const inputCls = - "w-full rounded-lg bg-surface border border-border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent/40"; const numCls = "w-24 rounded-md bg-surface border border-border px-2 py-1 text-sm tabular-nums focus:outline-none focus:ring-2 focus:ring-accent/40"; const MIN_SEG = 0.1; @@ -338,7 +336,7 @@ export default function VideoEditor({ job, onClose }: { job: DownloadJob; onClos
{tc(current)} / {tc(duration)}
-
@@ -553,13 +551,13 @@ export default function VideoEditor({ job, onClose }: { job: DownloadJob; onClos
{reencode ? t("editor.willReencode") : t("editor.willCopy")}
-