pnpm run check

Author: BetrixDev

app/api.ts

@@ -1,6 +1,3 @@
-import {
-  createStartAPIHandler,
-  defaultAPIFileRouteHandler,
-} from "@tanstack/start/api";
+import { createStartAPIHandler, defaultAPIFileRouteHandler } from "@tanstack/start/api";
 
 export default createStartAPIHandler(defaultAPIFileRouteHandler);

app/client.tsx

@@ -1,6 +1,6 @@
+import { StartClient } from "@tanstack/start";
 /// <reference types="vinxi/types/client" />
 import { hydrateRoot } from "react-dom/client";
-import { StartClient } from "@tanstack/start";
 import { createRouter } from "./router";
 
 const router = createRouter();

app/components/account-tier-text.tsx

@@ -16,7 +16,7 @@ export function AccountTierText({
       <span
         className={cn(
           "bg-gradient-to-r from-orange-400 to-red-400 bg-clip-text text-transparent font-bold",
-          className
+          className,
         )}
       >
         {children}
@@ -29,15 +29,13 @@ export function AccountTierText({
       <span
         className={cn(
           "bg-gradient-to-r from-pink-500 to-purple-300 bg-clip-text text-transparent font-bold",
-          className
+          className,
         )}
       >
         {children}
       </span>
     );
   }
 
-  return (
-    <span className={cn(defaultColor, "font-bold", className)}>{children}</span>
-  );
+  return <span className={cn(defaultColor, "font-bold", className)}>{children}</span>;
 }

app/components/author-info.tsx

@@ -1,6 +1,6 @@
 import { AccountTierText } from "@/components/account-tier-text";
-import { useQuery } from "@tanstack/react-query";
 import { authorDataQueryOptions } from "@/lib/query-utils";
+import { useQuery } from "@tanstack/react-query";
 
 export function AuthorInfo({ authorId }: { authorId: string }) {
   const { data } = useQuery(authorDataQueryOptions(authorId));

app/components/blur-fade-text.tsx

@@ -1,11 +1,11 @@
-import { useRef } from "react";
 import {
   AnimatePresence,
-  motion,
-  useInView,
   type UseInViewOptions,
   type Variants,
+  motion,
+  useInView,
 } from "framer-motion";
+import { useRef } from "react";
 
 type MarginType = UseInViewOptions["margin"];
 

app/components/dialogs/delete-video-dialog.tsx

@@ -1,40 +1,26 @@
 import { Button } from "@/components/ui/button";
-import { toast } from "sonner";
 import { usageDataQueryOptions, videosQueryOptions } from "@/lib/query-utils";
+import { useDialogsStore } from "@/lib/stores/dialogs";
 import { notNanOrDefault } from "@/lib/utils";
 import { deleteVideoServerFn } from "@/server-fns/videos";
-import { useDialogsStore } from "@/lib/stores/dialogs";
 import { useQueryClient } from "@tanstack/react-query";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} from "../ui/dialog";
+import { toast } from "sonner";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../ui/dialog";
 
 export function DeleteVideoDialog() {
   const queryClient = useQueryClient();
 
-  const closeDeleteVideoDialog = useDialogsStore(
-    (state) => state.closeDeleteVideoDialog
-  );
-  const deleteVideoDialogData = useDialogsStore(
-    (state) => state.deleteVideoDialogData
-  );
-  const isDeleteVideoDialogOpen = useDialogsStore(
-    (state) => state.isDeleteVideoDialogOpen
-  );
+  const closeDeleteVideoDialog = useDialogsStore((state) => state.closeDeleteVideoDialog);
+  const deleteVideoDialogData = useDialogsStore((state) => state.deleteVideoDialogData);
+  const isDeleteVideoDialogOpen = useDialogsStore((state) => state.isDeleteVideoDialogOpen);
 
   async function doDeleteVideo() {
     if (!isDeleteVideoDialogOpen || !deleteVideoDialogData) {
       return;
     }
 
     const oldVideos = queryClient.getQueryData(videosQueryOptions.queryKey);
-    const oldUsageData = queryClient.getQueryData(
-      usageDataQueryOptions.queryKey
-    );
+    const oldUsageData = queryClient.getQueryData(usageDataQueryOptions.queryKey);
 
     function reset(message?: string) {
       queryClient.setQueryData(usageDataQueryOptions.queryKey, oldUsageData);
@@ -50,8 +36,7 @@ export function DeleteVideoDialog() {
     }
 
     try {
-      const videos =
-        queryClient.getQueryData(videosQueryOptions.queryKey)?.videos ?? [];
+      const videos = queryClient.getQueryData(videosQueryOptions.queryKey)?.videos ?? [];
 
       const video = videos.find((v) => v.id === deleteVideoDialogData.videoId);
 
@@ -63,9 +48,8 @@ export function DeleteVideoDialog() {
         return {
           ...old,
           totalStorageUsed: Math.max(
-            (old?.totalStorageUsed ?? 0) -
-              notNanOrDefault(video?.fileSizeBytes),
-            0
+            (old?.totalStorageUsed ?? 0) - notNanOrDefault(video?.fileSizeBytes),
+            0,
           ),
         };
       });
@@ -77,9 +61,7 @@ export function DeleteVideoDialog() {
 
         return {
           ...old,
-          videos: old.videos.filter(
-            (v) => v.id !== deleteVideoDialogData.videoId
-          ),
+          videos: old.videos.filter((v) => v.id !== deleteVideoDialogData.videoId),
         };
       });
 
@@ -93,7 +75,7 @@ export function DeleteVideoDialog() {
           loading: "Queueing video for deletion...",
           error: "Error deleting video",
           success: (result) => result.message,
-        }
+        },
       );
     } catch (e) {
       console.error(e);
@@ -118,8 +100,7 @@ export function DeleteVideoDialog() {
         <DialogHeader>
           <DialogTitle>Confirm Video Deletion</DialogTitle>
           <DialogDescription>
-            Are you sure you want to delete{" "}
-            <strong>{deleteVideoDialogData.videoTitle}</strong>?
+            Are you sure you want to delete <strong>{deleteVideoDialogData.videoTitle}</strong>?
           </DialogDescription>
         </DialogHeader>
         <div className="flex gap-2 items-end">

app/components/dialogs/edit-video-dialog.tsx

@@ -2,16 +2,16 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
+import { videosQueryOptions } from "@/lib/query-utils";
+import { useDialogsStore } from "@/lib/stores/dialogs";
+import { updateVideoDataServerFn } from "@/server-fns/videos";
 import { useForm } from "@tanstack/react-form";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "@tanstack/react-router";
 import { useEffect } from "react";
 import { toast } from "sonner";
-import { FieldInfo } from "./upload-video-dialog";
-import { useRouter } from "@tanstack/react-router";
-import { updateVideoDataServerFn } from "@/server-fns/videos";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { videosQueryOptions } from "@/lib/query-utils";
-import { useDialogsStore } from "@/lib/stores/dialogs";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
+import { FieldInfo } from "./upload-video-dialog";
 
 type FormData = {
   title?: string;
@@ -23,19 +23,11 @@ export function EditVideoDialog() {
   const queryClient = useQueryClient();
   const { data } = useQuery(videosQueryOptions);
 
-  const editVideoDialogData = useDialogsStore(
-    (state) => state.editVideoDialogData
-  );
-  const isEditVideoDialogOpen = useDialogsStore(
-    (state) => state.isEditVideoDialogOpen
-  );
-  const closeEditVideoDialog = useDialogsStore(
-    (state) => state.closeEditVideoDialog
-  );
+  const editVideoDialogData = useDialogsStore((state) => state.editVideoDialogData);
+  const isEditVideoDialogOpen = useDialogsStore((state) => state.isEditVideoDialogOpen);
+  const closeEditVideoDialog = useDialogsStore((state) => state.closeEditVideoDialog);
 
-  const videoData = data?.videos.find(
-    (v) => v.id === editVideoDialogData?.videoId
-  );
+  const videoData = data?.videos.find((v) => v.id === editVideoDialogData?.videoId);
 
   async function handleUpdateVideo(data: FormData) {
     try {
@@ -134,8 +126,7 @@ export function EditVideoDialog() {
             validators={{
               onChange: ({ value }) => {
                 if (!value) return "A video title is required";
-                if (value.length > 100)
-                  return "Title must be 100 characters or less";
+                if (value.length > 100) return "Title must be 100 characters or less";
                 return undefined;
               },
             }}
@@ -177,11 +168,7 @@ export function EditVideoDialog() {
             }}
           />
           <div className="flex gap-2 mt-2">
-            <Button
-              variant="outline"
-              className="grow basis-1/2"
-              onClick={closeEditVideoDialog}
-            >
+            <Button variant="outline" className="grow basis-1/2" onClick={closeEditVideoDialog}>
               Cancel
             </Button>
             <Button className="grow basis-1/2" type="submit">