1 files changed, 19 insertions, 19 deletions
diff --git a/apps/web/app/settings/stats/page.tsx b/apps/web/app/settings/stats/page.tsx
index 944d1c59..a8896a03 100644
--- a/apps/web/app/settings/stats/page.tsx
+++ b/apps/web/app/settings/stats/page.tsx
@@ -6,7 +6,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
+import { useQuery } from "@tanstack/react-query";
 import {
   Archive,
   BarChart3,
@@ -32,6 +32,7 @@ import {
 } from "lucide-react";
 import { z } from "zod";
 
+import { useTRPC } from "@karakeep/shared-react/trpc";
 import { zBookmarkSourceSchema } from "@karakeep/shared/types/bookmarks";
 
 type BookmarkSource = z.infer<typeof zBookmarkSourceSchema>;
@@ -159,9 +160,10 @@ function StatCard({
 }
 
 export default function StatsPage() {
+  const api = useTRPC();
   const { t } = useTranslation();
-  const { data: stats, isLoading } = api.users.stats.useQuery();
-  const { data: userSettings } = api.users.settings.useQuery();
+  const { data: stats, isLoading } = useQuery(api.users.stats.queryOptions());
+  const { data: userSettings } = useQuery(api.users.settings.queryOptions());
 
   const maxHourlyActivity = useMemo(() => {
     if (!stats) return 0;
@@ -222,20 +224,21 @@ export default function StatsPage() {
 
   return (
     <div className="space-y-6">
-      <div>
-        <h1 className="text-3xl font-bold">
-          {t("settings.stats.usage_statistics")}
-        </h1>
-        <p className="text-muted-foreground">
-          Insights into your bookmarking habits and collection
-          {userSettings?.timezone && userSettings.timezone !== "UTC" && (
-            <span className="block text-sm">
-              Times shown in {userSettings.timezone} timezone
-            </span>
-          )}
-        </p>
+      <div className="flex items-start justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">
+            {t("settings.stats.usage_statistics")}
+          </h1>
+          <p className="text-muted-foreground">
+            Insights into your bookmarking habits and collection
+            {userSettings?.timezone && userSettings.timezone !== "UTC" && (
+              <span className="block text-sm">
+                Times shown in {userSettings.timezone} timezone
+              </span>
+            )}
+          </p>
+        </div>
       </div>
-
       {/* Overview Stats */}
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
         <StatCard
@@ -287,7 +290,6 @@ export default function StatsPage() {
           description={t("settings.stats.overview.bookmarks_added")}
         />
       </div>
-
       <div className="grid gap-6 md:grid-cols-2">
         {/* Bookmark Types */}
         <Card>
@@ -530,7 +532,6 @@ export default function StatsPage() {
           </CardContent>
         </Card>
       </div>
-
       {/* Activity Patterns */}
       <div className="grid gap-6 md:grid-cols-2">
         {/* Hourly Activity */}
@@ -581,7 +582,6 @@ export default function StatsPage() {
           </CardContent>
         </Card>
       </div>
-
       {/* Asset Storage */}
       {stats.assetsByType.length > 0 && (
         <Card>