#11 added query history

package.json

@@ -31,6 +31,7 @@
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",

src/components/settings.tsx

@@ -14,13 +14,16 @@ import {
 } from "./ui/drawer";
 import { Input } from "./ui/input";
 import { Button } from "./ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
 
 import { Settings2Icon } from "lucide-react";
 
 const ROWS_PER_PAGE_KEY = "rowsPerPage";
 
 export default function Settings() {
-  const { setRowPerPageOrAuto, setIsCustomQuery } = useSQLiteStore();
+  const { setRowPerPageOrAuto, setIsCustomQuery, queryHestory } =
+    useSQLiteStore();
   const [selectedRowsPerPage, setSelectedRowsPerPage] = useState<number | null>(
     null
   );
@@ -124,11 +127,23 @@ export default function Settings() {
                 <span>Save</span>
               </Button>
             </div>
-            {/* <div>
+            <div>
               <p className="mb-1 text-sm text-muted-foreground">
-                Soon
+                Query History
               </p>
-            </div> */}
+              <ScrollArea className="h-72 rounded-md border">
+                <div className="p-4">
+                  {queryHestory.map((query, index) => (
+                    <>
+                      <div key={index} className="text-sm">
+                        {query}
+                      </div>
+                      <Separator className="my-2" />
+                    </>
+                  ))}
+                </div>
+              </ScrollArea>
+            </div>
           </div>
           <DrawerFooter>
             <DrawerClose asChild>

src/components/ui/scroll-area.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import { cn } from "@/lib/utils";
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

src/hooks/useQueryData.ts

@@ -11,7 +11,8 @@ export function useQueryData(
   page: number,
   isCustomQuery: boolean
 ) {
-  const { db, setQueryError, setIsCustomQuery, query } = useSQLiteStore();
+  const { db, setQueryError, setIsCustomQuery, query, appendToQueryHestory } =
+    useSQLiteStore();
 
   const [data, setData] = useState<TableRow[]>([]);
   const [columns, setColumns] = useState<string[]>([]);
@@ -34,6 +35,7 @@ export function useQueryData(
           if (error instanceof Error) setQueryError(error.message);
         } finally {
           setIsQueryLoading(false);
+          appendToQueryHestory(queryString);
         }
       })();
     }

src/store/useSQLiteStore.ts

@@ -21,6 +21,9 @@ interface SQLiteState {
   setRowPerPageOrAuto: (value: number | "auto") => void;
   isCustomQuery: boolean;
   setIsCustomQuery: (value: boolean) => void;
+  queryHestory: string[];
+  setQueryHestory: (value: string[]) => void;
+  appendToQueryHestory: (value: string) => void;
 }
 
 const initializeStore = create<SQLiteState>((set, get) => ({
@@ -84,7 +87,12 @@ const initializeStore = create<SQLiteState>((set, get) => ({
   setRowPerPageOrAuto: (value: number | "auto") =>
     set({ rowPerPageOrAuto: value }),
 
-  setIsCustomQuery: (value: boolean) => set({ isCustomQuery: value })
+  setIsCustomQuery: (value: boolean) => set({ isCustomQuery: value }),
+
+  queryHestory: [],
+  setQueryHestory: (value: string[]) => set({ queryHestory: value }),
+  appendToQueryHestory: (value: string) =>
+    set((state) => ({ queryHestory: [...state.queryHestory, value] }))
 }));
 
 export default initializeStore;