code refactor

components.json

@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.js",
-    "css": "src/index.css",
+    "css": "src/styles/index.css",
     "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""
@@ -14,4 +14,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}

package.json

@@ -9,20 +9,12 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx}'",
     "format:check": "prettier --check 'src/**/*.{js,jsx,ts,tsx}'",
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -d dist"
+    "gh:deploy": "gh-pages -d dist"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/vwh/sqlite-viewer.git"
   },
-  "keywords": [
-    "sqlite",
-    "viewer",
-    "browser",
-    "sql.js",
-    "react"
-  ],
   "author": "vwh",
   "license": "MIT",
   "dependencies": {
@@ -48,6 +40,7 @@
     "sql.js": "^1.11.0",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.9.1",
     "zustand": "^4.5.4"
   },
   "devDependencies": {

src/App.tsx

@@ -1,16 +1,22 @@
 import { useEffect, useState, useRef, useCallback } from "react";
 import useSQLiteStore from "./store/useSQLiteStore";
 
-import DBTable from "./components/table/table";
-import UploadFile from "./components/landing/dropzone";
-import StatusMessage from "./components/table/stats-message";
-import Logo from "./components/landing/logo";
-import Dialog from "./components/landing/dialog";
+import DBTable from "./components/table/table-section";
+import UploadFile from "./components/dropzone";
+import StatusMessage from "./components/stats-message";
+import Hero from "./components/landing/hero";
+import ProxyMessage from "./components/landing/proxy-message";
 import Footer from "./components/landing/footer";
 import Features from "./components/landing/features";
 
 function App() {
-  const { db, tables, isLoading, loadDatabase, expandPage } = useSQLiteStore();
+  const {
+    db: isDatabaseLoaded,
+    tables,
+    isLoading,
+    loadDatabase,
+    expandPage
+  } = useSQLiteStore();
   const [fetchError, setFetchError] = useState<string | null>(null);
   const [showDialog, setShowDialog] = useState(false);
   const [urlToFetch, setUrlToFetch] = useState<string | null>(null);
@@ -56,6 +62,7 @@ function App() {
     [loadDatabase]
   );
 
+  // Fetch database on page load if url in url params
   useEffect(() => {
     if (hasFetched.current) return;
 
@@ -83,10 +90,10 @@ function App() {
         </StatusMessage>
       );
     }
-    if (fetchError && !db) {
+    if (fetchError && !isDatabaseLoaded) {
       return <StatusMessage type="error">{fetchError}</StatusMessage>;
     }
-    if (db) {
+    if (isDatabaseLoaded) {
       return tables.length > 0 ? (
         <DBTable />
       ) : (
@@ -101,21 +108,21 @@ function App() {
   return (
     <main
       id="main"
-      className={`mx-auto flex h-screen flex-col ${db ? "gap-3" : "gap-4"} p-4 ${expandPage ? "w-full" : "container"}`}
+      className={`mx-auto flex h-screen flex-col ${isDatabaseLoaded ? "gap-3" : "gap-4"} p-4 ${expandPage ? "w-full" : "container"}`}
     >
-      {!db && <Logo />}
+      {!isDatabaseLoaded && <Hero />}
       <UploadFile />
       {renderContent()}
-      <Dialog
-        showDialog={showDialog}
-        setShowDialog={setShowDialog}
-        fn={handleRetryWithProxy}
-      />
-      {!db && (
+      {!isDatabaseLoaded && (
         <>
           <Features /> <Footer />
         </>
       )}
+      <ProxyMessage
+        showDialog={showDialog}
+        setShowDialog={setShowDialog}
+        fn={handleRetryWithProxy}
+      />
     </main>
   );
 }

src/components/landing/dropzone.tsx → src/components/dropzone.tsx

@@ -23,10 +23,6 @@ export default function UploadFile() {
 
   const onDrop = useCallback(
     async (acceptedFiles: File[], fileRejections: FileRejection[]) => {
-      setErrors([]);
-      setTables([]);
-      setSelectedTable("0");
-
       if (fileRejections.length > 0) {
         const rejectionErrors = fileRejections.flatMap(
           (rejection) => rejection.errors
@@ -35,11 +31,14 @@ export default function UploadFile() {
         return;
       }
 
+      setErrors([]);
+      setTables([]);
+      setSelectedTable("0");
+
       if (acceptedFiles.length > 0) {
         try {
           await loadDatabase(acceptedFiles[0]);
         } catch (error) {
-          console.error("Failed to load database:", error);
           if (error instanceof Error) {
             return toast(error.message, { position: "bottom-right" });
           } else {

src/components/landing/footer.tsx

@@ -1,8 +1,6 @@
 import ThemeModeToggle from "@/components/settings/theme-mode-toggle";
 import { GithubIcon } from "lucide-react";
 
-export const REPO = "https://github.com/vwh/sqlite-viewer";
-
 export default function Footer() {
   return (
     <footer className="fixed bottom-0 left-0 right-0 border-t-2 bg-background shadow-md">
@@ -16,7 +14,7 @@ export default function Footer() {
               <p className="text-sm sm:hidden">No file uploads to server.</p>
             </div>
             <a
-              href={REPO}
+              href="https://github.com/vwh/sqlite-viewer"
               target="_blank"
               rel="noopener noreferrer"
               className="flex items-center space-x-2 text-blue-500 transition-colors dark:text-blue-400"

src/components/landing/logo.tsx → src/components/landing/hero.tsx

@@ -1,4 +1,4 @@
-export default function Logo() {
+export default function Hero() {
   return (
     <header className="rounded bg-gradient-to-r shadow-md dark:from-gray-800 dark:to-indigo-900">
       <div className="mx-auto max-w-4xl px-4 py-8 sm:py-12">

src/components/landing/dialog.tsx → src/components/landing/proxy-message.tsx

@@ -9,13 +9,17 @@ import {
   AlertDialogTitle
 } from "@/components/ui/alert-dialog";
 
-interface DialogProps {
+interface ProxyMessageProps {
   showDialog: boolean;
   setShowDialog: React.Dispatch<React.SetStateAction<boolean>>;
   fn: () => void;
 }
 
-export default function Dialog({ showDialog, setShowDialog, fn }: DialogProps) {
+export default function ProxyMessage({
+  showDialog,
+  setShowDialog,
+  fn
+}: ProxyMessageProps) {
   return (
     <AlertDialog open={showDialog} onOpenChange={setShowDialog}>
       <AlertDialogContent>