Skip to content

feat(frontend): replace native controls with styled components #190

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KyleTryon merged 2 commits into from
Sep 10, 2026
Merged

feat(frontend): replace native controls with styled components #190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
267e44f
feat(frontend): add bouncy filename settings accordion
KyleTryon Sep 10, 2026
0a01f13
feat(frontend): replace native controls with styled components
KyleTryon Sep 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 90 additions & 83 deletions apps/frontend/src/components/DashboardScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { ControlTooltip } from "@/components/ui/tooltip";
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import {
Expand Down Expand Up @@ -546,16 +547,18 @@ export function DashboardVersionBadge({

if (!latestRelease) {
return (
<span
className={DASHBOARD_VERSION_BADGE_CLASS}
title={releaseChecksDisabledReason ?? undefined}
data-dashboard-version-badge
data-dashboard-release-check-disabled={
releaseChecksDisabledReason ? true : undefined
}
>
{versionLabel}
</span>
<ControlTooltip label={releaseChecksDisabledReason ?? undefined}>
<span
className={DASHBOARD_VERSION_BADGE_CLASS}
tabIndex={releaseChecksDisabledReason ? 0 : undefined}
data-dashboard-version-badge
data-dashboard-release-check-disabled={
releaseChecksDisabledReason ? true : undefined
}
>
{versionLabel}
</span>
</ControlTooltip>
);
}

Expand All @@ -573,7 +576,6 @@ export function DashboardVersionBadge({
"gap-1.5 border-primary/40 bg-primary/10 text-primary transition-colors hover:bg-primary/15 focus-visible:ring-2 focus-visible:ring-primary/35 focus-visible:outline-none",
)}
aria-label={`${updateLabel}. View release notes.`}
title={updateLabel}
data-dashboard-version-badge
data-dashboard-update-available
>
Expand Down Expand Up @@ -824,17 +826,18 @@ export default function DashboardScreen({
<span className="truncate">Sources</span>
</button>
{renderViewerFilterPicker()}
<button
type="button"
onClick={fetchSessions}
className="inline-flex h-11 w-11 items-center justify-center rounded-lg border border-border text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
aria-label="Refresh sessions"
title="Refresh"
>
<RefreshCw
className={`h-5 w-5 ${loading || refreshing ? "animate-spin text-primary" : ""}`}
/>
</button>
<ControlTooltip label="Refresh">
<button
type="button"
onClick={fetchSessions}
className="inline-flex h-11 w-11 items-center justify-center rounded-lg border border-border text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
aria-label="Refresh sessions"
>
<RefreshCw
className={`h-5 w-5 ${loading || refreshing ? "animate-spin text-primary" : ""}`}
/>
</button>
</ControlTooltip>
</div>
<MobilePwaInstallNudge />
<div className="hidden flex-wrap items-center gap-3 sm:flex sm:justify-end">
Expand All @@ -855,67 +858,71 @@ export default function DashboardScreen({
Sources
</button>
{renderViewerFilterPicker()}
<button
type="button"
onClick={fetchSessions}
className="p-2 text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg transition-colors"
aria-label="Refresh sessions"
title="Refresh"
>
<RefreshCw
className={`w-5 h-5 ${loading || refreshing ? "animate-spin text-primary" : ""}`}
/>
</button>
<a
href={CLIPARR_WEBSITE_URL}
target="_blank"
rel="noreferrer"
className="p-2 text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg transition-colors"
aria-label="Open Cliparr website"
title="Open Cliparr website"
>
<Globe className="h-5 w-5" />
</a>
<a
href={CLIPARR_GITHUB_URL}
target="_blank"
rel="noreferrer"
className="p-2 text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg transition-colors"
aria-label="View Cliparr on GitHub"
title="View Cliparr on GitHub"
>
<GithubIcon className="h-5 w-5" />
</a>
<motion.button
type="button"
onClick={onDisconnect}
className={cn(
"flex items-center gap-2 rounded-lg text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/35 focus-visible:outline-none",
showViewerFilterControl
? "h-9 w-9 justify-center p-2"
: "px-4 py-2",
)}
aria-label="Disconnect"
title="Disconnect"
whileHover={
showViewerFilterControl && !reduceDashboardMotion
? { y: -1 }
: undefined
}
whileTap={
showViewerFilterControl && !reduceDashboardMotion
? { scale: 0.985 }
: undefined
}
transition={
reduceDashboardMotion
? { duration: 0 }
: cliparrMotionTransitions.fast
}
>
<LogOut className="w-4 h-4" />
{!showViewerFilterControl && "Disconnect"}
</motion.button>
<ControlTooltip label="Refresh">
<button
type="button"
onClick={fetchSessions}
className="p-2 text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg transition-colors"
aria-label="Refresh sessions"
>
<RefreshCw
className={`w-5 h-5 ${loading || refreshing ? "animate-spin text-primary" : ""}`}
/>
</button>
</ControlTooltip>
<ControlTooltip label="Open Cliparr website">
<a
href={CLIPARR_WEBSITE_URL}
target="_blank"
rel="noreferrer"
className="p-2 text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg transition-colors"
aria-label="Open Cliparr website"
>
<Globe className="h-5 w-5" />
</a>
</ControlTooltip>
<ControlTooltip label="View Cliparr on GitHub">
<a
href={CLIPARR_GITHUB_URL}
target="_blank"
rel="noreferrer"
className="p-2 text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg transition-colors"
aria-label="View Cliparr on GitHub"
>
<GithubIcon className="h-5 w-5" />
</a>
</ControlTooltip>
<ControlTooltip label="Disconnect">
<motion.button
type="button"
onClick={onDisconnect}
className={cn(
"flex items-center gap-2 rounded-lg text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/35 focus-visible:outline-none",
showViewerFilterControl
? "h-9 w-9 justify-center p-2"
: "px-4 py-2",
)}
aria-label="Disconnect"
whileHover={
showViewerFilterControl && !reduceDashboardMotion
? { y: -1 }
: undefined
}
whileTap={
showViewerFilterControl && !reduceDashboardMotion
? { scale: 0.985 }
: undefined
}
transition={
reduceDashboardMotion
? { duration: 0 }
: cliparrMotionTransitions.fast
}
>
<LogOut className="w-4 h-4" />
{!showViewerFilterControl && "Disconnect"}
</motion.button>
</ControlTooltip>
</div>
</header>

Expand Down
20 changes: 11 additions & 9 deletions apps/frontend/src/components/MobilePwaInstallNudge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { ControlTooltip } from "@/components/ui/tooltip";
import { Download, Share, Smartphone, X } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import {
Expand Down Expand Up @@ -99,15 +100,16 @@ export function MobilePwaInstallNudgeCard({
: "Open it like an app with a faster, full-screen experience."}
</p>
</div>
<button
type="button"
onClick={onDismiss}
className={cn(iconButtonClasses, "h-8 w-8 shrink-0")}
aria-label="Dismiss install prompt"
title="Dismiss"
>
<X className="h-4 w-4" />
</button>
<ControlTooltip label="Dismiss">
<button
type="button"
onClick={onDismiss}
className={cn(iconButtonClasses, "h-8 w-8 shrink-0")}
aria-label="Dismiss install prompt"
>
<X className="h-4 w-4" />
</button>
</ControlTooltip>
</div>

<div className="mt-3 flex flex-wrap items-center gap-2 pl-12">
Expand Down
38 changes: 2 additions & 36 deletions apps/frontend/src/components/editor/EditorControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
import {
useMemo,
type CSSProperties,
type ReactElement,
type ReactNode,
} from "react";
import { useMemo, type CSSProperties, type ReactNode } from "react";
import {
Camera,
Pause,
Expand All @@ -15,11 +10,7 @@ import {
ZoomIn,
ZoomOut,
} from "lucide-react";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { ControlTooltip } from "@/components/ui/tooltip";
import {
Drawer,
DrawerContent,
Expand Down Expand Up @@ -67,31 +58,6 @@ interface EditorControlsProperties {
onFitSelection: () => void;
}

function ControlTooltip({
label,
disabled = false,
children,
}: {
label: string;
disabled?: boolean;
children: ReactElement;
}) {
return (
<Tooltip>
<TooltipTrigger asChild>
{disabled ? (
<span className="inline-flex" tabIndex={0}>
{children}
</span>
) : (
children
)}
</TooltipTrigger>
<TooltipContent side="bottom">{label}</TooltipContent>
</Tooltip>
);
}

export function EditorControls({
variant = "desktop",
playbackSourcePanel,
Expand Down
35 changes: 20 additions & 15 deletions apps/frontend/src/components/editor/EditorExportDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Download } from "lucide-react";
import { Download, FileText } from "lucide-react";
import { BouncyAccordion } from "@/components/ui/bouncy-accordion";
import type {
ExportFormat,
ExportResolution,
Expand Down Expand Up @@ -185,20 +186,24 @@ export function EditorExportDialog({
hlsSourceLabel={hlsSourceLabel}
/>

<details className="rounded-md border border-border bg-card">
<summary className="cursor-pointer rounded-md px-3 py-3 text-sm font-medium focus-visible:ring-2 focus-visible:ring-ring">
Advanced filename settings
</summary>
<div className="px-3 pb-3">
<EditorFilenameTemplateSection
editingTemplateKind={editingTemplateKind}
onEditingTemplateKindChange={onEditingTemplateKindChange}
fileNameTemplates={fileNameTemplates}
onFileNameTemplateChange={onFileNameTemplateChange}
onResetFileNameTemplate={onResetFileNameTemplate}
/>
</div>
</details>
<BouncyAccordion
items={[
{
id: "filename-settings",
title: "Advanced filename settings",
icon: <FileText className="h-4 w-4" />,
description: (
<EditorFilenameTemplateSection
editingTemplateKind={editingTemplateKind}
onEditingTemplateKindChange={onEditingTemplateKindChange}
fileNameTemplates={fileNameTemplates}
onFileNameTemplateChange={onFileNameTemplateChange}
onResetFileNameTemplate={onResetFileNameTemplate}
/>
),
},
]}
/>
</fieldset>
</div>

Expand Down
Loading