refactor: small refactor

src/App.tsx

@@ -1,10 +1,10 @@
-import { useEffect, memo } from "react";
+import { memo } from "react";
 import useSQLiteStore from "@/store/useSQLiteStore";
 
 import type { Database } from "sql.js";
 
 import DBTable from "@/components/database/upper-section";
-import UploadFile from "@/components/dropzone";
+import UploadFile from "@/components/landing/dropzone";
 import Hero from "@/components/landing/hero";
 import Features from "@/components/landing/features";
 import UrlFetch from "@/components/landing/url-fetch";
@@ -14,55 +14,12 @@ interface DBTableProps {
   isDatabaseLoaded: Database;
 }
 
-const areEqual = (
-  prevProps: DBTableProps,
-  nextProps: DBTableProps
-): boolean => {
-  if (prevProps == null || nextProps == null) {
-    return false;
-  }
-  return prevProps.isDatabaseLoaded === nextProps.isDatabaseLoaded;
-};
-
-const MemoizedDBTable = memo<DBTableProps>(DBTable, areEqual);
+const MemoizedDBTable = memo<DBTableProps>(DBTable);
 const MemoizedUploadFile = memo(UploadFile);
 const MemoizedUrlFetch = memo(UrlFetch);
 
 export default function App() {
-  const {
-    db: isDatabaseLoaded,
-    loadDatabaseBytes,
-    expandPage
-  } = useSQLiteStore();
-
-  // useEffect for window message handling
-  useEffect(() => {
-    window.loadDatabaseBytes = loadDatabaseBytes;
-    const handleMessage = async (event: MessageEvent) => {
-      if (event.data.type === "invokeLoadDatabaseBytes") {
-        try {
-          const bytes = event.data.bytes;
-          await loadDatabaseBytes(bytes);
-          event.source?.postMessage(
-            { type: "loadDatabaseBytesSuccess" },
-            event.origin as WindowPostMessageOptions
-          );
-        } catch (error) {
-          event.source?.postMessage(
-            {
-              type: "loadDatabaseBytesError",
-              error: error instanceof Error ? error.message : String(error)
-            },
-            event.origin as WindowPostMessageOptions
-          );
-        }
-      }
-    };
-    window.addEventListener("message", handleMessage);
-    return () => {
-      window.removeEventListener("message", handleMessage);
-    };
-  }, [loadDatabaseBytes]);
+  const { db: isDatabaseLoaded, expandPage } = useSQLiteStore();
 
   return (
     <main

src/components/database/query-textarea.tsx

@@ -144,7 +144,7 @@ interface QueryTextareaProps {
   columnNames: string[];
 }
 
-export default function QueryTextarea({ columnNames }: QueryTextareaProps) {
+export default function SQLRepl({ columnNames }: QueryTextareaProps) {
   const { customQuery, setCustomQuery, tables } = useSQLiteStore();
 
   const isDark = useTheme();

src/components/database/upper-section.tsx

@@ -118,27 +118,30 @@ export default function DBTable() {
       >
         <AccordionItem value="item-1">
           <AccordionTrigger className="text-sm">Execute Query</AccordionTrigger>
-          <AccordionContent className="flex flex-col gap-1">
+          <AccordionContent className="flex flex-col gap-[6px]">
             <div className="flex-grow">
               <QueryTextarea columnNames={savedColumns} />
             </div>
-            <div className="flex flex-row gap-1">
+            <div className="flex flex-row gap-1 md:gap-2">
               <Button
-                className="grow opacity-80"
+                className="grow"
+                variant="secondary"
                 onClick={handleCustomQuery}
                 title="Run custom query"
               >
                 <PlayIcon className="h-5 w-5" />
               </Button>
               <Button
                 className="grow opacity-80"
+                variant="secondary"
                 onClick={handleQueryRemove}
                 title="Remove query"
               >
                 <Trash2Icon className="h-5 w-5" />
               </Button>
               <Button
                 className="grow opacity-80"
+                variant="secondary"
                 onClick={handleSQLFormatter}
                 title="Format SQL"
               >
@@ -194,9 +197,9 @@ export default function DBTable() {
     <>
       <div className="flex flex-col gap-3 pb-8">
         <section className="rounded-lg bg-gray-100 p-4 shadow-sm dark:bg-gray-700">
-          <div className="mb-[5px] flex items-center justify-between gap-1">
+          <div className="mb-[5px] flex items-center justify-between gap-[6px]">
             <MemoizedTableSelect />
-            <div className="flex items-center justify-center gap-1">
+            <div className="g-1 flex items-center justify-center gap-1">
               {MemoizedExportButtonsComponent}
               <Button
                 className="hidden expand:block"

src/components/stats-message.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { type ReactNode, memo } from "react";
 
 import {
   AlertTriangleIcon,
@@ -7,6 +7,8 @@ import {
   InfoIcon
 } from "lucide-react";
 
+const MemoizedLoaderIcon = memo(Loader2Icon);
+
 type MessageType = "error" | "loading" | "success" | "info";
 
 interface StatusMessageProps {
@@ -28,12 +30,13 @@ export default function StatusMessage({
       icon = <AlertTriangleIcon className="mr-3 h-6 w-6 text-red-500" />;
       typeClasses = "bg-red-100 text-red-800 border-l-4 border-red-500";
       break;
-    case "loading":
+    case "loading": {
       icon = (
-        <Loader2Icon className="mr-3 h-6 w-6 animate-spin text-blue-500" />
+        <MemoizedLoaderIcon className="mr-3 h-6 w-6 animate-spin text-blue-500" />
       );
       typeClasses = "bg-blue-100 text-blue-800 border-l-4 border-blue-500";
       break;
+    }
     case "success":
       icon = <CheckCircleIcon className="mr-3 h-6 w-6 text-green-500" />;
       typeClasses = "bg-green-100 text-green-800 border-l-4 border-green-500";

src/hooks/useQueryData.ts

@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
 import useSQLiteStore from "@/store/useSQLiteStore";
+
 import { mapQueryResults } from "@/lib/sqlite";
 import type { QueryExecResult } from "sql.js";
 import type { TableRow } from "@/types";