fix(web): import globals.css directly instead of as a URL stylesheet link

apps/web/src/components/settings/system-health-section.tsx

@@ -105,7 +105,7 @@ function LiveTimeAgo({
   fallback?: string;
 }) {
   const text = useTimeAgo(date, { fallback });
-  return <>{text}</>;
+  return <span suppressHydrationWarning>{text}</span>;
 }
 
 /** Hydrates system health state and renders the 3 cards */
@@ -192,7 +192,7 @@ function SystemStatusCard({
               <CardTitle>
                 <Trans>Health status</Trans>
               </CardTitle>
-              <CardDescription suppressHydrationWarning>
+              <CardDescription>
                 <Trans>
                   Checked <LiveTimeAgo date={checkedAt} />
                 </Trans>
@@ -431,10 +431,7 @@ function BackgroundJobsCard({
                       <Tooltip>
                         <TooltipTrigger className="cursor-default">
                           <div className="flex items-baseline gap-1.5">
-                            <span
-                              className="text-muted-foreground/80 text-xs"
-                              suppressHydrationWarning
-                            >
+                            <span className="text-muted-foreground/80 text-xs">
                               <LiveTimeAgo date={job.lastRunAt} />
                             </span>
                             {job.lastDurationMs !== null && job.lastDurationMs > 0 && (
@@ -463,10 +460,7 @@ function BackgroundJobsCard({
                     {job.nextRunAt ? (
                       <Tooltip>
                         <TooltipTrigger className="cursor-default">
-                          <span
-                            className="text-muted-foreground/80 text-xs"
-                            suppressHydrationWarning
-                          >
+                          <span className="text-muted-foreground/80 text-xs">
                             <LiveTimeAgo date={job.nextRunAt} />
                           </span>
                         </TooltipTrigger>
@@ -595,7 +589,7 @@ function StorageCard({
           )}
         </div>
         {backups.backupCount > 0 ? (
-          <p className="text-muted-foreground mt-1 text-xs" suppressHydrationWarning>
+          <p className="text-muted-foreground mt-1 text-xs">
             <Trans>
               {backups.backupCount} backups · last{" "}
               <LiveTimeAgo date={backups.lastBackupAt} fallback={t`unknown`} />

apps/web/src/components/titles/title-keyboard-shortcuts.tsx

@@ -1,4 +1,3 @@
-import type { Hotkey } from "@tanstack/react-hotkeys";
 import { useHotkey } from "@tanstack/react-hotkeys";
 import { useAtomValue } from "jotai";
 
@@ -37,9 +36,11 @@ export function TitleKeyboardShortcuts() {
     { enabled },
   );
 
-  for (const n of [1, 2, 3, 4, 5]) {
-    useHotkey(String(n) as Hotkey, () => handleRating(n), { enabled });
-  }
+  useHotkey("1", () => handleRating(1), { enabled });
+  useHotkey("2", () => handleRating(2), { enabled });
+  useHotkey("3", () => handleRating(3), { enabled });
+  useHotkey("4", () => handleRating(4), { enabled });
+  useHotkey("5", () => handleRating(5), { enabled });
 
   return null;
 }

apps/web/src/main.tsx

@@ -10,7 +10,8 @@ import { routeTree } from "./routeTree.gen";
 const router = createRouter({
   routeTree,
   defaultPreload: "intent",
-  defaultPreloadStaleTime: 0,
+  defaultPreloadStaleTime: 60_000,
+  defaultPendingMs: 0,
   scrollRestoration: true,
   context: { orpc, queryClient },
   Wrap: function WrapComponent({ children }: { children: React.ReactNode }) {

apps/web/src/routes/__root.tsx

@@ -15,9 +15,10 @@ import { Toaster } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { initLocale } from "@/lib/i18n";
 import type { orpc } from "@/lib/orpc/client";
-import globalsCss from "@/styles/globals.css?url";
 import { i18n } from "@sofa/i18n";
 
+import "@/styles/globals.css";
+
 export const Route = createRootRouteWithContext<{
   orpc: typeof orpc;
   queryClient: QueryClient;
@@ -37,7 +38,6 @@ export const Route = createRootRouteWithContext<{
       { name: "description", content: "Track your movies and TV shows" },
     ],
     links: [
-      { rel: "stylesheet", href: globalsCss },
       { rel: "manifest", href: "/manifest.webmanifest" },
       { rel: "apple-touch-icon", href: "/apple-icon.png" },
     ],

apps/web/src/routes/_app/explore.tsx

@@ -11,19 +11,21 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { orpc } from "@/lib/orpc/client";
 
 export const Route = createFileRoute("/_app/explore")({
-  loader: ({ context }) => {
-    context.queryClient.ensureQueryData(
-      orpc.explore.popular.queryOptions({ input: { type: "movie" } }),
-    );
-    context.queryClient.ensureQueryData(
-      orpc.explore.popular.queryOptions({ input: { type: "tv" } }),
-    );
-    context.queryClient.ensureQueryData(
-      orpc.explore.genres.queryOptions({ input: { type: "movie" } }),
-    );
-    context.queryClient.ensureQueryData(
-      orpc.explore.genres.queryOptions({ input: { type: "tv" } }),
-    );
+  loader: async ({ context }) => {
+    await Promise.all([
+      context.queryClient.ensureQueryData(
+        orpc.explore.popular.queryOptions({ input: { type: "movie" } }),
+      ),
+      context.queryClient.ensureQueryData(
+        orpc.explore.popular.queryOptions({ input: { type: "tv" } }),
+      ),
+      context.queryClient.ensureQueryData(
+        orpc.explore.genres.queryOptions({ input: { type: "movie" } }),
+      ),
+      context.queryClient.ensureQueryData(
+        orpc.explore.genres.queryOptions({ input: { type: "tv" } }),
+      ),
+    ]);
   },
   pendingComponent: ExploreSkeletons,
   component: ExplorePage,

apps/web/src/routes/index.tsx

@@ -6,9 +6,11 @@ import { client } from "@/lib/orpc/client";
 
 export const Route = createFileRoute("/")({
   beforeLoad: async () => {
-    const { data: session } = await authClient.getSession();
+    const [{ data: session }, info] = await Promise.all([
+      authClient.getSession(),
+      client.system.publicInfo({}),
+    ]);
     if (session?.user) throw redirect({ to: "/dashboard" });
-    const info = await client.system.publicInfo({});
     if (!info.tmdbConfigured) throw redirect({ to: "/setup" });
     return { info };
   },