Polish settings UI, add tooltips, replace timeAgo with date-fns

Clean up settings section design: consolidate backup cards, add
hover-reveal actions with tooltips, improve icon sizing across
components, and replace custom timeAgo helper with date-fns
formatDistanceToNow in webhook card.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/(pages)/dashboard/_components/continue-watching-card.tsx

@@ -48,7 +48,7 @@ export function ContinueWatchingCard({
           />
         ) : (
           <div className="flex h-full items-center justify-center bg-gradient-to-br from-card via-secondary to-muted">
-            <IconPlayerPlay size={32} className="text-muted-foreground/30" />
+            <IconPlayerPlay className="size-8 text-muted-foreground/30" />
           </div>
         )}
         <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
@@ -76,7 +76,7 @@ export function ContinueWatchingCard({
           </p>
         </div>
         <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
-          <IconPlayerPlay size={14} />
+          <IconPlayerPlay className="size-3.5" />
         </div>
       </div>
       {progress > 0 && (

app/(pages)/dashboard/_components/continue-watching-section.tsx

@@ -34,7 +34,7 @@ export async function ContinueWatchingSection({ userId }: { userId: string }) {
   return (
     <FeedSection
       title="Continue Watching"
-      icon={<IconPlayerPlay size={20} className="text-primary" />}
+      icon={<IconPlayerPlay className="size-5 text-primary" />}
     >
       <ContinueWatchingList items={items} />
     </FeedSection>

app/(pages)/dashboard/_components/library-section.tsx

@@ -21,7 +21,7 @@ export async function LibrarySection({ userId }: { userId: string }) {
   return (
     <FeedSection
       title="In Your Library"
-      icon={<IconSparkles size={20} className="text-primary" />}
+      icon={<IconSparkles className="size-5 text-primary" />}
     >
       <TitleGrid items={items} />
     </FeedSection>

app/(pages)/dashboard/_components/recommendations-section.tsx

@@ -24,7 +24,7 @@ export async function RecommendationsSection({ userId }: { userId: string }) {
   return (
     <FeedSection
       title="Recommended for You"
-      icon={<IconSparkles size={20} className="text-primary" />}
+      icon={<IconSparkles className="size-5 text-primary" />}
     >
       <TitleGrid items={items} />
     </FeedSection>

app/(pages)/dashboard/_components/stats-display.tsx

@@ -63,7 +63,7 @@ export function StatsDisplay({ stats }: { stats: DashboardStats }) {
               <div
                 className={`flex h-6 w-6 items-center justify-center rounded-md ${def.bgColor}`}
               >
-                <Icon size={13} className={def.color} />
+                <Icon className={`size-[13px] ${def.color}`} />
               </div>
               <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
                 {def.label}

app/(pages)/dashboard/_components/stats-section.tsx

@@ -18,7 +18,7 @@ export async function StatsSection({ userId }: { userId: string }) {
       {isEmpty && (
         <div className="flex flex-col items-center gap-4 rounded-xl border border-dashed border-border/50 py-16 text-center">
           <div className="animate-gentle-float rounded-full bg-primary/10 p-4">
-            <IconDeviceTv size={32} className="text-primary" />
+            <IconDeviceTv className="size-8 text-primary" />
           </div>
           <div className="space-y-1">
             <p className="font-medium">Your library is empty</p>

app/(pages)/explore/hero-banner.tsx

@@ -68,7 +68,7 @@ export function HeroBanner({
                   </span>
                   {voteAverage > 0 && (
                     <span className="flex items-center gap-1 text-sm text-primary">
-                      <IconStar size={14} className="fill-primary" />
+                      <IconStar className="size-3.5 fill-primary" />
                       {voteAverage.toFixed(1)}
                     </span>
                   )}
@@ -88,7 +88,7 @@ export function HeroBanner({
                   href={href}
                   className="mt-4 inline-flex h-9 items-center gap-2 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-all hover:shadow-md hover:shadow-primary/20"
                 >
-                  <IconPlus size={16} />
+                  <IconPlus className="size-4" />
                   Add to Library
                 </Link>
               </motion.div>

app/(pages)/explore/page.tsx

@@ -66,19 +66,19 @@ export default async function ExplorePage() {
 
       <TitleRow
         heading="Trending Today"
-        icon={<IconFlame size={20} className="text-primary" />}
+        icon={<IconFlame className="size-5 text-primary" />}
         items={trendingItems.slice(0, 20)}
       />
 
       <TitleRow
         heading="Popular Movies"
-        icon={<IconMovie size={20} className="text-primary" />}
+        icon={<IconMovie className="size-5 text-primary" />}
         items={popularMovieItems.slice(0, 20)}
       />
 
       <TitleRow
         heading="Popular TV Shows"
-        icon={<IconDeviceTv size={20} className="text-primary" />}
+        icon={<IconDeviceTv className="size-5 text-primary" />}
         items={popularTvItems.slice(0, 20)}
       />
 

app/(pages)/settings/_components/account-section.tsx

@@ -27,7 +27,7 @@ export function AccountSection({
   return (
     <div>
       <div className="mb-3 flex items-center gap-2">
-        <IconUser size={16} className="text-muted-foreground" />
+        <IconUser className="size-4 text-muted-foreground" />
         <h2 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
           Account
         </h2>
@@ -59,7 +59,7 @@ export function AccountSection({
               router.refresh();
             }}
           >
-            <IconLogout size={14} />
+            <IconLogout />
             Sign out
           </Button>
         </CardContent>

app/(pages)/settings/_components/backup-section.tsx

@@ -27,6 +27,11 @@ import { Button } from "@/components/ui/button";
 import { CardContent, CardDescription, CardTitle } from "@/components/ui/card";
 import { Spinner } from "@/components/ui/spinner";
 import { Switch } from "@/components/ui/switch";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import type { BackupInfo } from "@/lib/services/backup";
 import {
   createBackupAction,
@@ -208,38 +213,50 @@ export function BackupSection({
                       )}
                     </div>
                     <div className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
-                      <Button
-                        variant="ghost"
-                        size="icon-sm"
-                        nativeButton={false}
-                        render={
-                          <a
-                            href={`/api/backup/${backup.filename}`}
-                            download
-                            title="Download"
-                            aria-label="Download backup"
-                          >
-                            <IconCloudDownload />
-                          </a>
-                        }
-                      />
-                      <AlertDialog>
-                        <AlertDialogTrigger
+                      <Tooltip>
+                        <TooltipTrigger
                           render={
                             <Button
                               variant="ghost"
                               size="icon-sm"
-                              disabled={deleting === backup.filename}
-                              title="Delete"
+                              nativeButton={false}
+                              render={
+                                <a
+                                  href={`/api/backup/${backup.filename}`}
+                                  download
+                                  aria-label="Download backup"
+                                >
+                                  <IconCloudDownload />
+                                </a>
+                              }
                             />
                           }
-                        >
-                          {deleting === backup.filename ? (
-                            <Spinner />
-                          ) : (
-                            <IconTrash />
-                          )}
-                        </AlertDialogTrigger>
+                        />
+                        <TooltipContent>Download</TooltipContent>
+                      </Tooltip>
+                      <AlertDialog>
+                        <Tooltip>
+                          <AlertDialogTrigger
+                            render={
+                              <TooltipTrigger
+                                render={
+                                  <Button
+                                    variant="ghost"
+                                    size="icon-sm"
+                                    disabled={deleting === backup.filename}
+                                  />
+                                }
+                              />
+                            }
+                          >
+                            {deleting === backup.filename ? (
+                              <Spinner />
+                            ) : (
+                              <IconTrash />
+                            )}
+                          </AlertDialogTrigger>
+                          <TooltipContent>Delete</TooltipContent>
+                        </Tooltip>
                         <AlertDialogContent>
                           <AlertDialogHeader>
                             <AlertDialogTitle>Delete backup?</AlertDialogTitle>

app/(pages)/settings/_components/integrations-section.tsx

@@ -95,7 +95,7 @@ export function IntegrationsSection({
   return (
     <div>
       <div className="mb-3 flex items-center gap-2">
-        <IconWebhook size={16} className="text-muted-foreground" />
+        <IconWebhook className="size-4 text-muted-foreground" />
         <h2 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
           Integrations
         </h2>

app/(pages)/settings/_components/server-section.tsx

@@ -37,7 +37,7 @@ export function ServerSection({
       <div className="flex items-center justify-between gap-4">
         <div className="flex items-start gap-3">
           <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10">
-            <IconUserPlus size={16} className="text-primary" />
+            <IconUserPlus className="size-4 text-primary" />
           </div>
           <div>
             <CardTitle>Open registration</CardTitle>

app/(pages)/settings/_components/settings-shell.tsx

@@ -32,7 +32,7 @@ export function SettingsShell({
     >
       <motion.div variants={sectionVariants}>
         <div className="flex items-center gap-2">
-          <IconSettings size={20} className="text-primary" />
+          <IconSettings className="size-5 text-primary" />
           <h1 className="font-display text-3xl tracking-tight">Settings</h1>
         </div>
         <p className="mt-1 text-sm text-muted-foreground">

app/(pages)/settings/_components/webhook-card.tsx

@@ -9,6 +9,7 @@ import {
   IconRefresh,
   IconTrash,
 } from "@tabler/icons-react";
+import { formatDistanceToNow } from "date-fns";
 import { AnimatePresence, motion } from "motion/react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
@@ -49,17 +50,6 @@ export interface WebhookConnection {
   }[];
 }
 
-export function timeAgo(dateStr: string): string {
-  const diff = Date.now() - new Date(dateStr).getTime();
-  const mins = Math.floor(diff / 60000);
-  if (mins < 1) return "just now";
-  if (mins < 60) return `${mins}m ago`;
-  const hours = Math.floor(mins / 60);
-  if (hours < 24) return `${hours}h ago`;
-  const days = Math.floor(hours / 24);
-  return `${days}d ago`;
-}
-
 export function WebhookCard({
   provider,
   connection,
@@ -122,15 +112,14 @@ export function WebhookCard({
                 <CardDescription>
                   {connection
                     ? connection.lastEventAt
-                      ? `Last event ${timeAgo(connection.lastEventAt)}`
+                      ? `Last event ${formatDistanceToNow(new Date(connection.lastEventAt), { addSuffix: true })}`
                       : "Connected — no events yet"
                     : "Not configured"}
                 </CardDescription>
               </div>
             </div>
             <IconChevronDown
-              size={16}
-              className={`text-muted-foreground transition-transform duration-200 ${cardOpen ? "rotate-180" : ""}`}
+              className={`size-4 text-muted-foreground transition-transform duration-200 ${cardOpen ? "rotate-180" : ""}`}
             />
           </CollapsibleTrigger>
         </CardContent>
@@ -151,10 +140,7 @@ export function WebhookCard({
 
             {isPlex && (
               <div className="flex gap-2.5 rounded-lg border border-primary/20 bg-primary/5 px-3 py-2.5">
-                <IconInfoCircle
-                  size={14}
-                  className="mt-0.5 shrink-0 text-primary"
-                />
+                <IconInfoCircle className="mt-0.5 size-3.5 shrink-0 text-primary" />
                 <p className="text-xs leading-relaxed text-foreground/80">
                   Plex webhooks require an active{" "}
                   <a
@@ -240,9 +226,9 @@ export function WebhookCard({
                           }
                         >
                           {copied ? (
-                            <IconCheck size={14} className="text-green-400" />
+                            <IconCheck className="text-green-400" />
                           ) : (
-                            <IconCopy size={14} />
+                            <IconCopy />
                           )}
                         </TooltipTrigger>
                         <TooltipContent>Copy URL</TooltipContent>
@@ -256,7 +242,7 @@ export function WebhookCard({
                       size="sm"
                       onClick={() => onRegenerateToken(provider)}
                     >
-                      <IconRefresh size={12} />
+                      <IconRefresh />
                       Regenerate URL
                     </Button>
                     <Button
@@ -264,7 +250,7 @@ export function WebhookCard({
                       size="sm"
                       onClick={() => onDelete(provider)}
                     >
-                      <IconTrash size={12} />
+                      <IconTrash />
                       Disconnect
                     </Button>
                   </div>
@@ -275,8 +261,7 @@ export function WebhookCard({
             <Collapsible open={setupOpen} onOpenChange={setSetupOpen}>
               <CollapsibleTrigger className="flex w-full items-center gap-1.5 rounded-md py-1 text-xs text-muted-foreground transition-colors hover:text-foreground">
                 <IconChevronDown
-                  size={12}
-                  className={`transition-transform ${setupOpen ? "rotate-0" : "-rotate-90"}`}
+                  className={`size-3 transition-transform ${setupOpen ? "rotate-0" : "-rotate-90"}`}
                 />
                 Setup instructions
               </CollapsibleTrigger>

app/(pages)/settings/page.tsx

@@ -112,7 +112,7 @@ export default async function SettingsPage() {
       {isAdmin && (
         <div>
           <div className="mb-3 flex items-center gap-2">
-            <IconServerCog size={16} className="text-muted-foreground" />
+            <IconServerCog className="size-4 text-muted-foreground" />
             <h2 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
               Server
             </h2>

app/(pages)/setup/page.tsx

@@ -24,7 +24,7 @@ const steps = [
           className="inline-flex items-center gap-1 font-medium text-primary underline decoration-primary/30 underline-offset-2 transition-colors hover:decoration-primary"
         >
           themoviedb.org
-          <IconExternalLink size={14} />
+          <IconExternalLink className="size-3.5" />
         </a>{" "}
         and sign up for a free account.
       </>
@@ -43,7 +43,7 @@ const steps = [
           className="inline-flex items-center gap-1 font-medium text-primary underline decoration-primary/30 underline-offset-2 transition-colors hover:decoration-primary"
         >
           Settings &rarr; API
-          <IconExternalLink size={14} />
+          <IconExternalLink className="size-3.5" />
         </a>{" "}
         and request an API key. Choose &ldquo;Developer&rdquo; when asked. You
         need the{" "}
@@ -133,7 +133,7 @@ export default function SetupPage() {
       {/* Header */}
       <motion.div variants={sectionVariants} className="space-y-3">
         <div className="inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-3 py-1 text-xs font-medium text-primary">
-          <IconKey size={14} />
+          <IconKey className="size-3.5" />
           Setup required
         </div>
         <h1 className="font-display text-3xl tracking-tight sm:text-4xl">
@@ -188,12 +188,12 @@ export default function SetupPage() {
                         >
                           {copiedIdx === idx ? (
                             <>
-                              <IconCheck size={12} className="text-green-400" />
+                              <IconCheck className="size-3 text-green-400" />
                               Copied
                             </>
                           ) : (
                             <>
-                              <IconCopy size={12} />
+                              <IconCopy className="size-3" />
                               Copy
                             </>
                           )}
@@ -217,7 +217,7 @@ export default function SetupPage() {
           {configured === true ? (
             <div className="flex items-center gap-3">
               <div className="flex h-10 w-10 items-center justify-center rounded-full bg-green-500/10">
-                <IconCheck size={20} className="text-green-400" />
+                <IconCheck className="size-5 text-green-400" />
               </div>
               <div>
                 <p className="font-medium text-green-400">

app/(pages)/titles/[id]/_components/star-rating.tsx

@@ -40,9 +40,9 @@ export function StarRating({ value, onChange }: StarRatingProps) {
             }}
           >
             {filled ? (
-              <IconStarFilled size={18} className="text-primary" />
+              <IconStarFilled className="size-4.5 text-primary" />
             ) : (
-              <IconStar size={18} className="text-muted-foreground/30" />
+              <IconStar className="size-4.5 text-muted-foreground/30" />
             )}
           </motion.button>
         );

app/(pages)/titles/[id]/_components/status-button.tsx

@@ -50,7 +50,7 @@ export function StatusButton({ currentStatus, onChange }: StatusButtonProps) {
           transition={{ duration: 0.15 }}
           className="inline-flex h-9 items-center gap-2 rounded-lg bg-primary/10 px-4 text-sm font-medium text-primary ring-1 ring-primary/20 transition-all hover:bg-primary/15 hover:ring-primary/30 active:scale-[0.97]"
         >
-          <IconPlus size={14} strokeWidth={2.5} />
+          <IconPlus className="size-3.5" strokeWidth={2.5} />
           Watchlist
         </motion.button>
       ) : (
@@ -66,14 +66,8 @@ export function StatusButton({ currentStatus, onChange }: StatusButtonProps) {
           className={`group inline-flex h-9 items-center gap-2 rounded-lg px-4 text-sm font-medium ring-1 transition-all active:scale-[0.97] ${config.class} ${config.bgClass} ${config.borderClass} hover:ring-destructive/30 hover:bg-destructive/10 hover:text-destructive`}
         >
           <span className="grid [&>svg]:col-start-1 [&>svg]:row-start-1">
-            <config.icon
-              size={14}
-              className="transition-opacity group-hover:opacity-0"
-            />
-            <IconX
-              size={14}
-              className="opacity-0 text-destructive transition-opacity group-hover:opacity-100"
-            />
+            <config.icon className="size-3.5 transition-opacity group-hover:opacity-0" />
+            <IconX className="size-3.5 opacity-0 text-destructive transition-opacity group-hover:opacity-100" />
           </span>
           <span className="grid [&>span]:col-start-1 [&>span]:row-start-1">
             <span className="transition-opacity group-hover:opacity-0">

app/(pages)/titles/[id]/_components/title-actions.tsx

@@ -30,7 +30,7 @@ export function TitleActions() {
           onClick={handleWatchMovie}
           className="inline-flex h-9 items-center gap-2 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-all active:scale-[0.97] hover:shadow-md hover:shadow-primary/20"
         >
-          <IconPlayerPlay size={14} />
+          <IconPlayerPlay className="size-3.5" />
           Mark Watched
         </button>
       )}

app/(pages)/titles/[id]/_components/title-seasons.tsx

@@ -56,7 +56,7 @@ export function TitleSeasons() {
                   type="button"
                   className="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
                 >
-                  <IconChecks size={14} />
+                  <IconChecks className="size-3.5" />
                   Mark All Watched
                 </button>
               }
@@ -160,15 +160,9 @@ export function TitleSeasons() {
                     </button>
                   )}
                   {isOpen ? (
-                    <IconChevronUp
-                      size={16}
-                      className="text-muted-foreground"
-                    />
+                    <IconChevronUp className="size-4 text-muted-foreground" />
                   ) : (
-                    <IconChevronDown
-                      size={16}
-                      className="text-muted-foreground"
-                    />
+                    <IconChevronDown className="size-4 text-muted-foreground" />
                   )}
                 </div>
               </div>
@@ -221,7 +215,7 @@ export function TitleSeasons() {
                                   damping: 15,
                                 }}
                               >
-                                <IconCheck size={14} />
+                                <IconCheck className="size-3.5" />
                               </motion.div>
                             )}
                           </button>