Optimize frontend: memoization, modern React hooks, reduced render overhead

- useTimeAgo: replace per-instance intervals with shared useSyncExternalStore ticker
- useTiltEffect: gate to fine-pointer devices, skip motion graphs on touch
- Carousel: bake WheelGesturesPlugin into primitive, remove from all consumers
- TitleSeasons: use memoized Set + precomputed progress map instead of Array.includes
- useSearch: stabilize results identity with useMemo
- CommandPalette: hoist shortcut grouping to module scope, stabilize effect deps
- StarRating: hoist static spring transition to module constant
- Settings toggles: use useOptimistic + useTransition for auto-rollback

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

app/(pages)/explore/_components/filterable-title-row.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures";
 import { createStore, Provider, useAtom, useAtomValue } from "jotai";
 import { useState } from "react";
 import { TitleCardSkeleton } from "@/components/skeletons";
@@ -162,7 +161,6 @@ function FilterableTitleRowInner({
               dragFree: true,
               containScroll: "trimSnaps",
             }}
-            plugins={[WheelGesturesPlugin({ forceWheelAxis: "x" })]}
             className="-mx-6 sm:-mx-2 carousel-tilt"
           >
             <CarouselContent className="px-6 sm:px-2">

app/(pages)/explore/_components/title-row.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures";
 import { TitleCard } from "@/components/title-card";
 import {
   Carousel,
@@ -44,7 +43,6 @@ export function TitleRow({
       </div>
       <Carousel
         opts={{ align: "start", dragFree: true, containScroll: "trimSnaps" }}
-        plugins={[WheelGesturesPlugin({ forceWheelAxis: "x" })]}
         className="-mx-6 sm:-mx-2 carousel-tilt"
       >
         <CarouselContent className="px-6 sm:px-2">