formating, added prettierrc.json

.prettierrc.json

@@ -0,0 +1,4 @@
+
+{
+    "trailingComma": "none"
+}

src/App.tsx

@@ -37,7 +37,7 @@ function App() {
           setShowDialog(true);
         } else {
           setFetchError(
-            `Error fetching database from URL (with proxy): ${url} - ${error.message}`,
+            `Error fetching database from URL (with proxy): ${url} - ${error.message}`
           );
         }
       }

src/components/dialog.tsx

@@ -6,7 +6,7 @@ import {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogTitle,
+  AlertDialogTitle
 } from "@/components/ui/alert-dialog";
 
 interface DialogProps {

src/components/dropzone-helpers.tsx

@@ -19,7 +19,7 @@ export function FileStats({ errors }: { errors?: FileError[] }) {
   errors && (
     <>
       {errors.map((error) =>
-        toast(error.message, { position: "bottom-right" }),
+        toast(error.message, { position: "bottom-right" })
       )}
     </>
   );

src/components/dropzone.tsx

@@ -12,7 +12,7 @@ export default function UploadFile() {
   const onDrop = useCallback(
     async (
       acceptedFiles: File[],
-      fileRejections: { file: File; errors: FileError[] }[],
+      fileRejections: { file: File; errors: FileError[] }[]
     ) => {
       setErrors([]);
       setTables([]);
@@ -25,12 +25,12 @@ export default function UploadFile() {
 
       if (fileRejections.length > 0) {
         const rejectionErrors = fileRejections.flatMap(
-          (rejection) => rejection.errors,
+          (rejection) => rejection.errors
         );
         setErrors(rejectionErrors);
       }
     },
-    [loadDatabase, setTables, setSelectedTable],
+    [loadDatabase, setTables, setSelectedTable]
   );
 
   const { getRootProps, getInputProps } = useDropzone({
@@ -40,8 +40,8 @@ export default function UploadFile() {
       "application/vnd.sqlite3": [".sqlite", ".sqlite3"],
       "application/x-sqlite3": [".sqlite", ".sqlite3"],
       "application/octet-stream": [".db"],
-      "application/sql": [".sql"],
-    },
+      "application/sql": [".sql"]
+    }
   });
 
   const renderDropzoneContent = (hasDatabase: boolean) => (

src/components/error.tsx

@@ -1,5 +1,5 @@
 export default function ErrorMessage({
-  children,
+  children
 }: {
   children: React.ReactNode;
 }) {

src/components/logo.tsx

@@ -21,7 +21,7 @@ export default function Logo() {
     const observer = new MutationObserver(updateLogoSrc);
     observer.observe(document.body, {
       attributes: true,
-      attributeFilter: ["class"],
+      attributeFilter: ["class"]
     });
 
     return () => observer.disconnect();

src/components/page-select.tsx

@@ -12,7 +12,7 @@ export default function PageSelect({
   page,
   setPage,
   rowsPerPage,
-  rowCount,
+  rowCount
 }: PageSelectProps) {
   const totalPages = Math.ceil(rowCount / rowsPerPage);
   const currentPage = Math.floor(page / rowsPerPage) + 1;

src/components/settings.tsx

@@ -6,7 +6,7 @@ import { toast } from "sonner";
 import {
   exportTableAsCSV,
   exportAllTablesAsCSV,
-  downloadDatabase,
+  downloadDatabase
 } from "@/lib/sqlite";
 import {
   Drawer,
@@ -16,7 +16,7 @@ import {
   DrawerFooter,
   DrawerHeader,
   DrawerTitle,
-  DrawerTrigger,
+  DrawerTrigger
 } from "./ui/drawer";
 import { Input } from "./ui/input";
 import { Button } from "./ui/button";
@@ -27,7 +27,7 @@ export default function Settings() {
     useSQLiteStore();
 
   const [selectedRowsPerPage, setSelectedRowsPerPage] = useState<number | null>(
-    null,
+    null
   );
   const [isAutoRowsPerPage, setIsAutoRowsPerPage] = useState(false);
 
@@ -63,23 +63,23 @@ export default function Settings() {
     setIsCustomQuery(false);
     if (selectedRowsPerPage === null) {
       return toast.error(
-        "Please provide a number of rows per page or set it to auto.",
+        "Please provide a number of rows per page or set it to auto."
       );
     }
     if (selectedRowsPerPage < 1) {
       return toast.error("Please provide a positive number of rows per page.");
     }
     localStorage.setItem(
       "rowsPerPage",
-      isAutoRowsPerPage ? "auto" : selectedRowsPerPage.toString(),
+      isAutoRowsPerPage ? "auto" : selectedRowsPerPage.toString()
     );
     setRowPerPageOrAuto(isAutoRowsPerPage ? "auto" : selectedRowsPerPage);
   };
 
   const renderExportButton = (
     onClick: () => void,
     label: string,
-    className?: string,
+    className?: string
   ) => (
     <Button variant="outline" onClick={onClick} className={className}>
       <span className="ml-2">{label}</span>
@@ -145,15 +145,15 @@ export default function Settings() {
                 <div className="border rounded p-2 flex flex-col gap-1">
                   {renderExportButton(
                     () => downloadDatabase(db),
-                    "Export as SQLite",
+                    "Export as SQLite"
                   )}
                   {renderExportButton(
                     () => exportTableAsCSV(db, parseInt(selectedTable)),
-                    "Export selected table as CSV",
+                    "Export selected table as CSV"
                   )}
                   {renderExportButton(
                     () => exportAllTablesAsCSV(db),
-                    "Export all tables as CSV",
+                    "Export all tables as CSV"
                   )}
                 </div>
               )}

src/components/table-data.tsx

@@ -7,7 +7,7 @@ import {
   TableCell,
   TableHead,
   TableHeader,
-  TableRow as TTableRow,
+  TableRow as TTableRow
 } from "./ui/table";
 import { KeyRound, KeySquare, Cuboid, Clock9 } from "lucide-react";
 
@@ -29,7 +29,7 @@ const getIcon = (columnSchema: any) => {
 const renderTableHead = (
   columns: string[],
   tableSchemas: TableInfo,
-  tableName: string,
+  tableName: string
 ) => (
   <TableHeader>
     <TTableRow>
@@ -58,7 +58,7 @@ const renderTableBody = (
   data: TableRow[],
   columns: string[],
   tableSchemas: TableInfo,
-  tableName: string,
+  tableName: string
 ) => (
   <TableBody>
     {data.map((row, rowIndex) => (
@@ -84,7 +84,7 @@ export default function DBTableComponent({
   data,
   columns,
   tableName,
-  tableSchemas,
+  tableSchemas
 }: DBTableComponentProps) {
   return (
     <Table>

src/components/table-select.tsx

@@ -7,7 +7,7 @@ import {
   SelectItem,
   SelectLabel,
   SelectTrigger,
-  SelectValue,
+  SelectValue
 } from "./ui/select";
 import { Badge } from "./ui/badge";
 

src/components/table.tsx

@@ -26,7 +26,7 @@ export function DBTable() {
     setQueryError,
     rowPerPageOrAuto,
     isCustomQuery,
-    setIsCustomQuery,
+    setIsCustomQuery
   } = useSQLiteStore();
 
   const [data, setData] = useState<TableRow[]>([]);
@@ -123,7 +123,7 @@ export function DBTable() {
       { height: 600, rowHeight: 120 },
       { height: 550, rowHeight: 150 },
       { height: 500, rowHeight: 190 },
-      { height: 0, rowHeight: 280 },
+      { height: 0, rowHeight: 280 }
     ];
     const defaultRowHeight = 120;
     let rowHeight = defaultRowHeight;

src/components/ui/alert-dialog.tsx

@@ -17,7 +17,7 @@ const AlertDialogOverlay = React.forwardRef<
   <AlertDialogPrimitive.Overlay
     className={cn(
       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
+      className
     )}
     {...props}
     ref={ref}
@@ -35,7 +35,7 @@ const AlertDialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className,
+        className
       )}
       {...props}
     />
@@ -61,7 +61,7 @@ const AlertDialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
+      className
     )}
     {...props}
   />
@@ -114,7 +114,7 @@ const AlertDialogCancel = React.forwardRef<
     className={cn(
       buttonVariants({ variant: "outline" }),
       "mt-2 sm:mt-0",
-      className,
+      className
     )}
     {...props}
   />
@@ -132,5 +132,5 @@ export {
   AlertDialogTitle,
   AlertDialogDescription,
   AlertDialogAction,
-  AlertDialogCancel,
+  AlertDialogCancel
 };

src/components/ui/badge.tsx

@@ -14,13 +14,13 @@ const badgeVariants = cva(
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
+        outline: "text-foreground"
+      }
     },
     defaultVariants: {
-      variant: "default",
-    },
-  },
+      variant: "default"
+    }
+  }
 );
 
 export interface BadgeProps

src/components/ui/button.tsx

@@ -20,7 +20,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       />
     );
-  },
+  }
 );
 
 Button.displayName = "Button";

src/components/ui/buttonVariants.ts

@@ -13,18 +13,18 @@ export const buttonVariants = cva(
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+        link: "text-primary underline-offset-4 hover:underline"
       },
       size: {
         default: "h-10 px-4 py-2",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
-      },
+        icon: "h-10 w-10"
+      }
     },
     defaultVariants: {
       variant: "default",
-      size: "default",
-    },
-  },
+      size: "default"
+    }
+  }
 );

src/components/ui/drawer.tsx

@@ -42,7 +42,7 @@ const DrawerContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-        className,
+        className
       )}
       {...props}
     >
@@ -83,7 +83,7 @@ const DrawerTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
-      className,
+      className
     )}
     {...props}
   />
@@ -112,5 +112,5 @@ export {
   DrawerHeader,
   DrawerFooter,
   DrawerTitle,
-  DrawerDescription,
+  DrawerDescription
 };

src/components/ui/hover-card.tsx

@@ -13,7 +13,7 @@ const HoverCardContent = React.forwardRef<
 >(
   (
     { className, align = "start", side = "bottom", sideOffset = 4, ...props },
-    ref,
+    ref
   ) => (
     <HoverCardPrimitive.Content
       ref={ref}
@@ -22,11 +22,11 @@ const HoverCardContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 text-balance break-words",
-        className,
+        className
       )}
       {...props}
     />
-  ),
+  )
 );
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 

src/components/ui/input.tsx

@@ -12,13 +12,13 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         type={type}
         className={cn(
           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className,
+          className
         )}
         ref={ref}
         {...props}
       />
     );
-  },
+  }
 );
 Input.displayName = "Input";