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)/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>