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>