11 files changed, 609 insertions, 542 deletions
diff --git a/apps/web/components/admin/AddUserDialog.tsx b/apps/web/components/admin/AddUserDialog.tsx
index 3c578eca..2e29c6da 100644
--- a/apps/web/components/admin/AddUserDialog.tsx
+++ b/apps/web/components/admin/AddUserDialog.tsx
@@ -1,213 +1,217 @@
-import { useEffect, useState } from "react";
-import { ActionButton } from "@/components/ui/action-button";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { toast } from "@/components/ui/sonner";
-import { api } from "@/lib/trpc";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { TRPCClientError } from "@trpc/client";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-
-import { zAdminCreateUserSchema } from "@karakeep/shared/types/admin";
-
-type AdminCreateUserSchema = z.infer<typeof zAdminCreateUserSchema>;
-
-export default function AddUserDialog({
-  children,
-}: {
-  children?: React.ReactNode;
-}) {
-  const apiUtils = api.useUtils();
-  const [isOpen, onOpenChange] = useState(false);
-  const form = useForm<AdminCreateUserSchema>({
-    resolver: zodResolver(zAdminCreateUserSchema),
-    defaultValues: {
-      name: "",
-      email: "",
-      password: "",
-      confirmPassword: "",
-      role: "user",
-    },
-  });
-  const { mutate, isPending } = api.admin.createUser.useMutation({
-    onSuccess: () => {
-      toast({
-        description: "User created successfully",
-      });
-      onOpenChange(false);
-      apiUtils.users.list.invalidate();
-      apiUtils.admin.userStats.invalidate();
-    },
-    onError: (error) => {
-      if (error instanceof TRPCClientError) {
-        toast({
-          variant: "destructive",
-          description: error.message,
-        });
-      } else {
-        toast({
-          variant: "destructive",
-          description: "Failed to create user",
-        });
-      }
-    },
-  });
-
-  useEffect(() => {
-    if (!isOpen) {
-      form.reset();
-    }
-  }, [isOpen, form]);
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Add User</DialogTitle>
-        </DialogHeader>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit((val) => mutate(val))}>
-            <div className="flex w-full flex-col space-y-2">
-              <FormField
-                control={form.control}
-                name="name"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Name</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="text"
-                        placeholder="Name"
-                        {...field}
-                        className="w-full rounded border p-2"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="email"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Email</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="email"
-                        placeholder="Email"
-                        {...field}
-                        className="w-full rounded border p-2"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="password"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Password</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="password"
-                        placeholder="Password"
-                        {...field}
-                        className="w-full rounded border p-2"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="confirmPassword"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Confirm Password</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="password"
-                        placeholder="Confirm Password"
-                        {...field}
-                        className="w-full rounded border p-2"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="role"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Role</FormLabel>
-                    <FormControl>
-                      <Select
-                        value={field.value}
-                        onValueChange={field.onChange}
-                      >
-                        <SelectTrigger className="w-full">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="user">User</SelectItem>
-                          <SelectItem value="admin">Admin</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <DialogFooter className="sm:justify-end">
-                <DialogClose asChild>
-                  <Button type="button" variant="secondary">
-                    Close
-                  </Button>
-                </DialogClose>
-                <ActionButton
-                  type="submit"
-                  loading={isPending}
-                  disabled={isPending}
-                >
-                  Create
-                </ActionButton>
-              </DialogFooter>
-            </div>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-}
+import { useEffect, useState } from "react";
+import { ActionButton } from "@/components/ui/action-button";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { toast } from "@/components/ui/sonner";
+import { useTRPC } from "@/lib/trpc";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { TRPCClientError } from "@trpc/client";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { zAdminCreateUserSchema } from "@karakeep/shared/types/admin";
+
+type AdminCreateUserSchema = z.infer<typeof zAdminCreateUserSchema>;
+
+export default function AddUserDialog({
+  children,
+}: {
+  children?: React.ReactNode;
+}) {
+  const api = useTRPC();
+  const queryClient = useQueryClient();
+  const [isOpen, onOpenChange] = useState(false);
+  const form = useForm<AdminCreateUserSchema>({
+    resolver: zodResolver(zAdminCreateUserSchema),
+    defaultValues: {
+      name: "",
+      email: "",
+      password: "",
+      confirmPassword: "",
+      role: "user",
+    },
+  });
+  const { mutate, isPending } = useMutation(
+    api.admin.createUser.mutationOptions({
+      onSuccess: () => {
+        toast({
+          description: "User created successfully",
+        });
+        onOpenChange(false);
+        queryClient.invalidateQueries(api.users.list.pathFilter());
+        queryClient.invalidateQueries(api.admin.userStats.pathFilter());
+      },
+      onError: (error) => {
+        if (error instanceof TRPCClientError) {
+          toast({
+            variant: "destructive",
+            description: error.message,
+          });
+        } else {
+          toast({
+            variant: "destructive",
+            description: "Failed to create user",
+          });
+        }
+      },
+    }),
+  );
+
+  useEffect(() => {
+    if (!isOpen) {
+      form.reset();
+    }
+  }, [isOpen, form]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Add User</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit((val) => mutate(val))}>
+            <div className="flex w-full flex-col space-y-2">
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Name</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="text"
+                        placeholder="Name"
+                        {...field}
+                        className="w-full rounded border p-2"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Email</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="email"
+                        placeholder="Email"
+                        {...field}
+                        className="w-full rounded border p-2"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Password</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="password"
+                        placeholder="Password"
+                        {...field}
+                        className="w-full rounded border p-2"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="confirmPassword"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Confirm Password</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="password"
+                        placeholder="Confirm Password"
+                        {...field}
+                        className="w-full rounded border p-2"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="role"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Role</FormLabel>
+                    <FormControl>
+                      <Select
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="user">User</SelectItem>
+                          <SelectItem value="admin">Admin</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <DialogFooter className="sm:justify-end">
+                <DialogClose asChild>
+                  <Button type="button" variant="secondary">
+                    Close
+                  </Button>
+                </DialogClose>
+                <ActionButton
+                  type="submit"
+                  loading={isPending}
+                  disabled={isPending}
+                >
+                  Create
+                </ActionButton>
+              </DialogFooter>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/components/admin/AdminNotices.tsx b/apps/web/components/admin/AdminNotices.tsx
index 77b1b481..e9d9a692 100644
--- a/apps/web/components/admin/AdminNotices.tsx
+++ b/apps/web/components/admin/AdminNotices.tsx
@@ -2,7 +2,8 @@
 
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
+import { useQuery } from "@tanstack/react-query";
 import { AlertCircle } from "lucide-react";
 
 import { AdminCard } from "./AdminCard";
@@ -14,7 +15,8 @@ interface AdminNotice {
 }
 
 function useAdminNotices() {
-  const { data } = api.admin.getAdminNoticies.useQuery();
+  const api = useTRPC();
+  const { data } = useQuery(api.admin.getAdminNoticies.queryOptions());
   if (!data) {
     return [];
   }
diff --git a/apps/web/components/admin/BackgroundJobs.tsx b/apps/web/components/admin/BackgroundJobs.tsx
index 382069c8..3dab3c54 100644
--- a/apps/web/components/admin/BackgroundJobs.tsx
+++ b/apps/web/components/admin/BackgroundJobs.tsx
@@ -13,8 +13,8 @@ import {
 import { Skeleton } from "@/components/ui/skeleton";
 import { toast } from "@/components/ui/sonner";
 import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
-import { keepPreviousData } from "@tanstack/react-query";
+import { useTRPC } from "@/lib/trpc";
+import { keepPreviousData, useMutation, useQuery } from "@tanstack/react-query";
 import {
   Activity,
   AlertTriangle,
@@ -254,13 +254,51 @@ function JobCard({
 }
 
 function useJobActions() {
+  const api = useTRPC();
   const { t } = useTranslation();
 
   const { mutateAsync: recrawlLinks, isPending: isRecrawlPending } =
-    api.admin.recrawlLinks.useMutation({
+    useMutation(
+      api.admin.recrawlLinks.mutationOptions({
+        onSuccess: () => {
+          toast({
+            description: "Recrawl enqueued",
+          });
+        },
+        onError: (e) => {
+          toast({
+            variant: "destructive",
+            description: e.message,
+          });
+        },
+      }),
+    );
+
+  const { mutateAsync: reindexBookmarks, isPending: isReindexPending } =
+    useMutation(
+      api.admin.reindexAllBookmarks.mutationOptions({
+        onSuccess: () => {
+          toast({
+            description: "Reindex enqueued",
+          });
+        },
+        onError: (e) => {
+          toast({
+            variant: "destructive",
+            description: e.message,
+          });
+        },
+      }),
+    );
+
+  const {
+    mutateAsync: reprocessAssetsFixMode,
+    isPending: isReprocessingPending,
+  } = useMutation(
+    api.admin.reprocessAssetsFixMode.mutationOptions({
       onSuccess: () => {
         toast({
-          description: "Recrawl enqueued",
+          description: "Reprocessing enqueued",
         });
       },
       onError: (e) => {
@@ -269,13 +307,17 @@ function useJobActions() {
           description: e.message,
         });
       },
-    });
+    }),
+  );
 
-  const { mutateAsync: reindexBookmarks, isPending: isReindexPending } =
-    api.admin.reindexAllBookmarks.useMutation({
+  const {
+    mutateAsync: reRunInferenceOnAllBookmarks,
+    isPending: isInferencePending,
+  } = useMutation(
+    api.admin.reRunInferenceOnAllBookmarks.mutationOptions({
       onSuccess: () => {
         toast({
-          description: "Reindex enqueued",
+          description: "Inference jobs enqueued",
         });
       },
       onError: (e) => {
@@ -284,58 +326,27 @@ function useJobActions() {
           description: e.message,
         });
       },
-    });
-
-  const {
-    mutateAsync: reprocessAssetsFixMode,
-    isPending: isReprocessingPending,
-  } = api.admin.reprocessAssetsFixMode.useMutation({
-    onSuccess: () => {
-      toast({
-        description: "Reprocessing enqueued",
-      });
-    },
-    onError: (e) => {
-      toast({
-        variant: "destructive",
-        description: e.message,
-      });
-    },
-  });
-
-  const {
-    mutateAsync: reRunInferenceOnAllBookmarks,
-    isPending: isInferencePending,
-  } = api.admin.reRunInferenceOnAllBookmarks.useMutation({
-    onSuccess: () => {
-      toast({
-        description: "Inference jobs enqueued",
-      });
-    },
-    onError: (e) => {
-      toast({
-        variant: "destructive",
-        description: e.message,
-      });
-    },
-  });
+    }),
+  );
 
   const {
     mutateAsync: runAdminMaintenanceTask,
     isPending: isAdminMaintenancePending,
-  } = api.admin.runAdminMaintenanceTask.useMutation({
-    onSuccess: () => {
-      toast({
-        description: "Admin maintenance request has been enqueued!",
-      });
-    },
-    onError: (e) => {
-      toast({
-        variant: "destructive",
-        description: e.message,
-      });
-    },
-  });
+  } = useMutation(
+    api.admin.runAdminMaintenanceTask.mutationOptions({
+      onSuccess: () => {
+        toast({
+          description: "Admin maintenance request has been enqueued!",
+        });
+      },
+      onError: (e) => {
+        toast({
+          variant: "destructive",
+          description: e.message,
+        });
+      },
+    }),
+  );
 
   return {
     crawlActions: [
@@ -466,13 +477,13 @@ function useJobActions() {
 }
 
 export default function BackgroundJobs() {
+  const api = useTRPC();
   const { t } = useTranslation();
-  const { data: serverStats } = api.admin.backgroundJobsStats.useQuery(
-    undefined,
-    {
+  const { data: serverStats } = useQuery(
+    api.admin.backgroundJobsStats.queryOptions(undefined, {
       refetchInterval: 1000,
       placeholderData: keepPreviousData,
-    },
+    }),
   );
 
   const actions = useJobActions();
diff --git a/apps/web/components/admin/BasicStats.tsx b/apps/web/components/admin/BasicStats.tsx
index 67352f66..9c88ba83 100644
--- a/apps/web/components/admin/BasicStats.tsx
+++ b/apps/web/components/admin/BasicStats.tsx
@@ -3,7 +3,7 @@
 import { AdminCard } from "@/components/admin/AdminCard";
 import { useClientConfig } from "@/lib/clientConfig";
 import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
 import { useQuery } from "@tanstack/react-query";
 
 const REPO_LATEST_RELEASE_API =
@@ -42,7 +42,7 @@ function ReleaseInfo() {
         rel="noreferrer"
         title="Update available"
       >
-        ({latestRelease} ⬆️)
+        ({latestRelease}⬆️)
       </a>
     );
   }
@@ -71,10 +71,13 @@ function StatsSkeleton() {
 }
 
 export default function BasicStats() {
+  const api = useTRPC();
   const { t } = useTranslation();
-  const { data: serverStats } = api.admin.stats.useQuery(undefined, {
-    refetchInterval: 5000,
-  });
+  const { data: serverStats } = useQuery(
+    api.admin.stats.queryOptions(undefined, {
+      refetchInterval: 5000,
+    }),
+  );
 
   if (!serverStats) {
     return <StatsSkeleton />;
diff --git a/apps/web/components/admin/BookmarkDebugger.tsx b/apps/web/components/admin/BookmarkDebugger.tsx
index 1628fdcc..78eb2c85 100644
--- a/apps/web/components/admin/BookmarkDebugger.tsx
+++ b/apps/web/components/admin/BookmarkDebugger.tsx
@@ -8,8 +8,9 @@ import { Button } from "@/components/ui/button";
 import InfoTooltip from "@/components/ui/info-tooltip";
 import { Input } from "@/components/ui/input";
 import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
 import { formatBytes } from "@/lib/utils";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { formatDistanceToNow } from "date-fns";
 import {
   AlertCircle,
@@ -37,6 +38,7 @@ import { toast } from "sonner";
 import { BookmarkTypes } from "@karakeep/shared/types/bookmarks";
 
 export default function BookmarkDebugger() {
+  const api = useTRPC();
   const { t } = useTranslation();
   const [inputValue, setInputValue] = useState("");
   const [bookmarkId, setBookmarkId] = useQueryState(
@@ -56,9 +58,11 @@ export default function BookmarkDebugger() {
     data: debugInfo,
     isLoading,
     error,
-  } = api.admin.getBookmarkDebugInfo.useQuery(
-    { bookmarkId: bookmarkId },
-    { enabled: !!bookmarkId && bookmarkId.length > 0 },
+  } = useQuery(
+    api.admin.getBookmarkDebugInfo.queryOptions(
+      { bookmarkId: bookmarkId },
+      { enabled: !!bookmarkId && bookmarkId.length > 0 },
+    ),
   );
 
   const handleLookup = () => {
@@ -67,57 +71,65 @@ export default function BookmarkDebugger() {
     }
   };
 
-  const recrawlMutation = api.admin.adminRecrawlBookmark.useMutation({
-    onSuccess: () => {
-      toast.success(t("admin.admin_tools.action_success"), {
-        description: t("admin.admin_tools.recrawl_queued"),
-      });
-    },
-    onError: (error) => {
-      toast.error(t("admin.admin_tools.action_failed"), {
-        description: error.message,
-      });
-    },
-  });
+  const recrawlMutation = useMutation(
+    api.admin.adminRecrawlBookmark.mutationOptions({
+      onSuccess: () => {
+        toast.success(t("admin.admin_tools.action_success"), {
+          description: t("admin.admin_tools.recrawl_queued"),
+        });
+      },
+      onError: (error) => {
+        toast.error(t("admin.admin_tools.action_failed"), {
+          description: error.message,
+        });
+      },
+    }),
+  );
 
-  const reindexMutation = api.admin.adminReindexBookmark.useMutation({
-    onSuccess: () => {
-      toast.success(t("admin.admin_tools.action_success"), {
-        description: t("admin.admin_tools.reindex_queued"),
-      });
-    },
-    onError: (error) => {
-      toast.error(t("admin.admin_tools.action_failed"), {
-        description: error.message,
-      });
-    },
-  });
+  const reindexMutation = useMutation(
+    api.admin.adminReindexBookmark.mutationOptions({
+      onSuccess: () => {
+        toast.success(t("admin.admin_tools.action_success"), {
+          description: t("admin.admin_tools.reindex_queued"),
+        });
+      },
+      onError: (error) => {
+        toast.error(t("admin.admin_tools.action_failed"), {
+          description: error.message,
+        });
+      },
+    }),
+  );
 
-  const retagMutation = api.admin.adminRetagBookmark.useMutation({
-    onSuccess: () => {
-      toast.success(t("admin.admin_tools.action_success"), {
-        description: t("admin.admin_tools.retag_queued"),
-      });
-    },
-    onError: (error) => {
-      toast.error(t("admin.admin_tools.action_failed"), {
-        description: error.message,
-      });
-    },
-  });
+  const retagMutation = useMutation(
+    api.admin.adminRetagBookmark.mutationOptions({
+      onSuccess: () => {
+        toast.success(t("admin.admin_tools.action_success"), {
+          description: t("admin.admin_tools.retag_queued"),
+        });
+      },
+      onError: (error) => {
+        toast.error(t("admin.admin_tools.action_failed"), {
+          description: error.message,
+        });
+      },
+    }),
+  );
 
-  const resummarizeMutation = api.admin.adminResummarizeBookmark.useMutation({
-    onSuccess: () => {
-      toast.success(t("admin.admin_tools.action_success"), {
-        description: t("admin.admin_tools.resummarize_queued"),
-      });
-    },
-    onError: (error) => {
-      toast.error(t("admin.admin_tools.action_failed"), {
-        description: error.message,
-      });
-    },
-  });
+  const resummarizeMutation = useMutation(
+    api.admin.adminResummarizeBookmark.mutationOptions({
+      onSuccess: () => {
+        toast.success(t("admin.admin_tools.action_success"), {
+          description: t("admin.admin_tools.resummarize_queued"),
+        });
+      },
+      onError: (error) => {
+        toast.error(t("admin.admin_tools.action_failed"), {
+          description: error.message,
+        });
+      },
+    }),
+  );
 
   const handleRecrawl = () => {
     if (bookmarkId) {
diff --git a/apps/web/components/admin/CreateInviteDialog.tsx b/apps/web/components/admin/CreateInviteDialog.tsx
index 6738adc9..c8b6be8c 100644
--- a/apps/web/components/admin/CreateInviteDialog.tsx
+++ b/apps/web/components/admin/CreateInviteDialog.tsx
@@ -20,8 +20,9 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/sonner";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { TRPCClientError } from "@trpc/client";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -37,6 +38,8 @@ interface CreateInviteDialogProps {
 export default function CreateInviteDialog({
   children,
 }: CreateInviteDialogProps) {
+  const api = useTRPC();
+  const queryClient = useQueryClient();
   const [open, setOpen] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
 
@@ -47,25 +50,26 @@ export default function CreateInviteDialog({
     },
   });
 
-  const invalidateInvitesList = api.useUtils().invites.list.invalidate;
-  const createInviteMutation = api.invites.create.useMutation({
-    onSuccess: () => {
-      toast({
-        description: "Invite sent successfully",
-      });
-      invalidateInvitesList();
-      setOpen(false);
-      form.reset();
-      setErrorMessage("");
-    },
-    onError: (e) => {
-      if (e instanceof TRPCClientError) {
-        setErrorMessage(e.message);
-      } else {
-        setErrorMessage("Failed to send invite");
-      }
-    },
-  });
+  const createInviteMutation = useMutation(
+    api.invites.create.mutationOptions({
+      onSuccess: () => {
+        toast({
+          description: "Invite sent successfully",
+        });
+        queryClient.invalidateQueries(api.invites.list.pathFilter());
+        setOpen(false);
+        form.reset();
+        setErrorMessage("");
+      },
+      onError: (e) => {
+        if (e instanceof TRPCClientError) {
+          setErrorMessage(e.message);
+        } else {
+          setErrorMessage("Failed to send invite");
+        }
+      },
+    }),
+  );
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
diff --git a/apps/web/components/admin/InvitesList.tsx b/apps/web/components/admin/InvitesList.tsx
index 75d29748..9d94f0a0 100644
--- a/apps/web/components/admin/InvitesList.tsx
+++ b/apps/web/components/admin/InvitesList.tsx
@@ -11,7 +11,12 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
+import {
+  useMutation,
+  useQueryClient,
+  useSuspenseQuery,
+} from "@tanstack/react-query";
 import { formatDistanceToNow } from "date-fns";
 import { Mail, MailX, UserPlus } from "lucide-react";
 
@@ -20,16 +25,17 @@ import { AdminCard } from "./AdminCard";
 import CreateInviteDialog from "./CreateInviteDialog";
 
 export default function InvitesList() {
-  const invalidateInvitesList = api.useUtils().invites.list.invalidate;
-  const [invites] = api.invites.list.useSuspenseQuery();
+  const api = useTRPC();
+  const queryClient = useQueryClient();
+  const { data: invites } = useSuspenseQuery(api.invites.list.queryOptions());
 
-  const { mutateAsync: revokeInvite, isPending: isRevokePending } =
-    api.invites.revoke.useMutation({
+  const { mutateAsync: revokeInvite, isPending: isRevokePending } = useMutation(
+    api.invites.revoke.mutationOptions({
       onSuccess: () => {
         toast({
           description: "Invite revoked successfully",
         });
-        invalidateInvitesList();
+        queryClient.invalidateQueries(api.invites.list.pathFilter());
       },
       onError: (e) => {
         toast({
@@ -37,15 +43,16 @@ export default function InvitesList() {
           description: `Failed to revoke invite: ${e.message}`,
         });
       },
-    });
+    }),
+  );
 
-  const { mutateAsync: resendInvite, isPending: isResendPending } =
-    api.invites.resend.useMutation({
+  const { mutateAsync: resendInvite, isPending: isResendPending } = useMutation(
+    api.invites.resend.mutationOptions({
       onSuccess: () => {
         toast({
           description: "Invite resent successfully",
         });
-        invalidateInvitesList();
+        queryClient.invalidateQueries(api.invites.list.pathFilter());
       },
       onError: (e) => {
         toast({
@@ -53,7 +60,8 @@ export default function InvitesList() {
           description: `Failed to resend invite: ${e.message}`,
         });
       },
-    });
+    }),
+  );
 
   const activeInvites = invites?.invites || [];
 
diff --git a/apps/web/components/admin/ResetPasswordDialog.tsx b/apps/web/components/admin/ResetPasswordDialog.tsx
index 4e71d42b..59886d54 100644
--- a/apps/web/components/admin/ResetPasswordDialog.tsx
+++ b/apps/web/components/admin/ResetPasswordDialog.tsx
@@ -1,145 +1,149 @@
-import { useEffect, useState } from "react";
-import { ActionButton } from "@/components/ui/action-button";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { toast } from "@/components/ui/sonner";
-import { api } from "@/lib/trpc"; // Adjust the import path as needed
-import { zodResolver } from "@hookform/resolvers/zod";
-import { TRPCClientError } from "@trpc/client";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-
-import { resetPasswordSchema } from "@karakeep/shared/types/admin";
-
-interface ResetPasswordDialogProps {
-  userId: string;
-  children?: React.ReactNode;
-}
-
-type ResetPasswordSchema = z.infer<typeof resetPasswordSchema>;
-
-export default function ResetPasswordDialog({
-  children,
-  userId,
-}: ResetPasswordDialogProps) {
-  const [isOpen, onOpenChange] = useState(false);
-  const form = useForm<ResetPasswordSchema>({
-    resolver: zodResolver(resetPasswordSchema),
-    defaultValues: {
-      userId,
-      newPassword: "",
-      newPasswordConfirm: "",
-    },
-  });
-  const { mutate, isPending } = api.admin.resetPassword.useMutation({
-    onSuccess: () => {
-      toast({
-        description: "Password reset successfully",
-      });
-      onOpenChange(false);
-    },
-    onError: (error) => {
-      if (error instanceof TRPCClientError) {
-        toast({
-          variant: "destructive",
-          description: error.message,
-        });
-      } else {
-        toast({
-          variant: "destructive",
-          description: "Failed to reset password",
-        });
-      }
-    },
-  });
-
-  useEffect(() => {
-    if (isOpen) {
-      form.reset();
-    }
-  }, [isOpen, form]);
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Reset Password</DialogTitle>
-        </DialogHeader>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit((val) => mutate(val))}>
-            <div className="flex w-full flex-col space-y-2">
-              <FormField
-                control={form.control}
-                name="newPassword"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>New Password</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="password"
-                        placeholder="New Password"
-                        {...field}
-                        className="w-full rounded border p-2"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="newPasswordConfirm"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Confirm New Password</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="password"
-                        placeholder="Confirm New Password"
-                        {...field}
-                        className="w-full rounded border p-2"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <DialogFooter className="sm:justify-end">
-                <DialogClose asChild>
-                  <Button type="button" variant="secondary">
-                    Close
-                  </Button>
-                </DialogClose>
-                <ActionButton
-                  type="submit"
-                  loading={isPending}
-                  disabled={isPending}
-                >
-                  Reset
-                </ActionButton>
-              </DialogFooter>
-            </div>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-}
+import { useEffect, useState } from "react";
+import { ActionButton } from "@/components/ui/action-button";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { toast } from "@/components/ui/sonner";
+import { useTRPC } from "@/lib/trpc"; // Adjust the import path as needed
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
+import { TRPCClientError } from "@trpc/client";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { resetPasswordSchema } from "@karakeep/shared/types/admin";
+
+interface ResetPasswordDialogProps {
+  userId: string;
+  children?: React.ReactNode;
+}
+
+type ResetPasswordSchema = z.infer<typeof resetPasswordSchema>;
+
+export default function ResetPasswordDialog({
+  children,
+  userId,
+}: ResetPasswordDialogProps) {
+  const api = useTRPC();
+  const [isOpen, onOpenChange] = useState(false);
+  const form = useForm<ResetPasswordSchema>({
+    resolver: zodResolver(resetPasswordSchema),
+    defaultValues: {
+      userId,
+      newPassword: "",
+      newPasswordConfirm: "",
+    },
+  });
+  const { mutate, isPending } = useMutation(
+    api.admin.resetPassword.mutationOptions({
+      onSuccess: () => {
+        toast({
+          description: "Password reset successfully",
+        });
+        onOpenChange(false);
+      },
+      onError: (error) => {
+        if (error instanceof TRPCClientError) {
+          toast({
+            variant: "destructive",
+            description: error.message,
+          });
+        } else {
+          toast({
+            variant: "destructive",
+            description: "Failed to reset password",
+          });
+        }
+      },
+    }),
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+      form.reset();
+    }
+  }, [isOpen, form]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Reset Password</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit((val) => mutate(val))}>
+            <div className="flex w-full flex-col space-y-2">
+              <FormField
+                control={form.control}
+                name="newPassword"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>New Password</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="password"
+                        placeholder="New Password"
+                        {...field}
+                        className="w-full rounded border p-2"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="newPasswordConfirm"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Confirm New Password</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="password"
+                        placeholder="Confirm New Password"
+                        {...field}
+                        className="w-full rounded border p-2"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <DialogFooter className="sm:justify-end">
+                <DialogClose asChild>
+                  <Button type="button" variant="secondary">
+                    Close
+                  </Button>
+                </DialogClose>
+                <ActionButton
+                  type="submit"
+                  loading={isPending}
+                  disabled={isPending}
+                >
+                  Reset
+                </ActionButton>
+              </DialogFooter>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/components/admin/ServiceConnections.tsx b/apps/web/components/admin/ServiceConnections.tsx
index 8d79d8bb..0509f352 100644
--- a/apps/web/components/admin/ServiceConnections.tsx
+++ b/apps/web/components/admin/ServiceConnections.tsx
@@ -2,7 +2,8 @@
 
 import { AdminCard } from "@/components/admin/AdminCard";
 import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
+import { useQuery } from "@tanstack/react-query";
 
 function ConnectionStatus({
   label,
@@ -105,10 +106,13 @@ function ConnectionsSkeleton() {
 }
 
 export default function ServiceConnections() {
+  const api = useTRPC();
   const { t } = useTranslation();
-  const { data: connections } = api.admin.checkConnections.useQuery(undefined, {
-    refetchInterval: 10000,
-  });
+  const { data: connections } = useQuery(
+    api.admin.checkConnections.queryOptions(undefined, {
+      refetchInterval: 10000,
+    }),
+  );
 
   if (!connections) {
     return <ConnectionsSkeleton />;
diff --git a/apps/web/components/admin/UpdateUserDialog.tsx b/apps/web/components/admin/UpdateUserDialog.tsx
index 453f4fab..aeec9d4e 100644
--- a/apps/web/components/admin/UpdateUserDialog.tsx
+++ b/apps/web/components/admin/UpdateUserDialog.tsx
@@ -27,8 +27,9 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { toast } from "@/components/ui/sonner";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { TRPCClientError } from "@trpc/client";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -51,7 +52,8 @@ export default function UpdateUserDialog({
   currentStorageQuota,
   children,
 }: UpdateUserDialogProps) {
-  const apiUtils = api.useUtils();
+  const api = useTRPC();
+  const queryClient = useQueryClient();
   const [isOpen, onOpenChange] = useState(false);
   const defaultValues = {
     userId,
@@ -63,28 +65,30 @@ export default function UpdateUserDialog({
     resolver: zodResolver(updateUserSchema),
     defaultValues,
   });
-  const { mutate, isPending } = api.admin.updateUser.useMutation({
-    onSuccess: () => {
-      toast({
-        description: "User updated successfully",
-      });
-      apiUtils.users.list.invalidate();
-      onOpenChange(false);
-    },
-    onError: (error) => {
-      if (error instanceof TRPCClientError) {
+  const { mutate, isPending } = useMutation(
+    api.admin.updateUser.mutationOptions({
+      onSuccess: () => {
         toast({
-          variant: "destructive",
-          description: error.message,
+          description: "User updated successfully",
         });
-      } else {
-        toast({
-          variant: "destructive",
-          description: "Failed to update user",
-        });
-      }
-    },
-  });
+        queryClient.invalidateQueries(api.users.list.pathFilter());
+        onOpenChange(false);
+      },
+      onError: (error) => {
+        if (error instanceof TRPCClientError) {
+          toast({
+            variant: "destructive",
+            description: error.message,
+          });
+        } else {
+          toast({
+            variant: "destructive",
+            description: "Failed to update user",
+          });
+        }
+      },
+    }),
+  );
 
   useEffect(() => {
     if (isOpen) {
diff --git a/apps/web/components/admin/UserList.tsx b/apps/web/components/admin/UserList.tsx
index 69f9e3b9..810a945f 100644
--- a/apps/web/components/admin/UserList.tsx
+++ b/apps/web/components/admin/UserList.tsx
@@ -13,7 +13,12 @@ import {
 } from "@/components/ui/table";
 import { useSession } from "@/lib/auth/client";
 import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
+import {
+  useMutation,
+  useQueryClient,
+  useSuspenseQuery,
+} from "@tanstack/react-query";
 import { Check, KeyRound, Pencil, Trash, UserPlus, X } from "lucide-react";
 
 import ActionConfirmingDialog from "../ui/action-confirming-dialog";
@@ -30,18 +35,23 @@ function toHumanReadableSize(size: number) {
 }
 
 export default function UsersSection() {
+  const api = useTRPC();
+  const queryClient = useQueryClient();
   const { t } = useTranslation();
   const { data: session } = useSession();
-  const invalidateUserList = api.useUtils().users.list.invalidate;
-  const [{ users }] = api.users.list.useSuspenseQuery();
-  const [userStats] = api.admin.userStats.useSuspenseQuery();
-  const { mutateAsync: deleteUser, isPending: isDeletionPending } =
-    api.users.delete.useMutation({
+  const {
+    data: { users },
+  } = useSuspenseQuery(api.users.list.queryOptions());
+  const { data: userStats } = useSuspenseQuery(
+    api.admin.userStats.queryOptions(),
+  );
+  const { mutateAsync: deleteUser, isPending: isDeletionPending } = useMutation(
+    api.users.delete.mutationOptions({
       onSuccess: () => {
         toast({
           description: "User deleted",
         });
-        invalidateUserList();
+        queryClient.invalidateQueries(api.users.list.pathFilter());
       },
       onError: (e) => {
         toast({
@@ -49,7 +59,8 @@ export default function UsersSection() {
           description: `Something went wrong: ${e.message}`,
         });
       },
-    });
+    }),
+  );
 
   return (
     <AdminCard>