refactoring UI

vwh · Jul 24, 2024 · 73ac469 · 73ac469
1 parent de7c237
commit 73ac469
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 51 deletions.
diff --git a/src/components/dark-mode.tsx b/src/components/dark-mode.tsx
@@ -42,7 +42,7 @@ export default function DarkModeToggle() {
       onClick={() => {
         applyDarkMode(!darkMode);
       }}
-      className="relative"
+      className="relative grow"
       variant="outline"
     >
       {darkMode ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}

diff --git a/src/components/dropzone-helpers.tsx b/src/components/dropzone-helpers.tsx
@@ -9,7 +9,7 @@ export function FileData({ file }: { file: File }) {
       className="flex w-full items-center justify-center gap-2 font-mono text-sm"
       title={file.name}
     >
-      <p className="max-w-[250px] truncate">{file.name}</p>
+      <p className="max-w-[250px] truncate font-semibold">{file.name}</p>
       <span className="text-xs font-semibold">{bytesToValue(file.size)}</span>
     </li>
   );

diff --git a/src/components/dropzone.tsx b/src/components/dropzone.tsx
@@ -3,6 +3,8 @@ import useSQLiteStore from "@/store/useSQLiteStore";
 
 import { useDropzone, type FileError } from "react-dropzone";
 import { FileStats, FileData } from "./dropzone-helpers";
+import Settings from "./settings";
+import DarkModeToggle from "./dark-mode";
 
 export default function UploadFile() {
   const { loadDatabase, setTables, setSelectedTable, db } = useSQLiteStore();
@@ -46,39 +48,47 @@ export default function UploadFile() {
   });
 
   const renderDropzoneContent = (hasDatabase: boolean) => (
-    <div
-      {...getRootProps()}
-      className={`border p-6 rounded cursor-pointer text-center ${
-        hasDatabase ? "" : "py-24"
-      }`}
-    >
-      <input id="file-upload" {...getInputProps()} />
-      <label htmlFor="file-upload" className="sr-only">
-        Upload SQLite File
-      </label>
-      <p className="hidden sm:block">
-        Drag and drop a SQLite file here, or click to select one
-      </p>
-      <p className="block sm:hidden">Click to select a SQLite file</p>
-      {!hasDatabase && (
-        <a
-          href="https://github.com/vwh/sqlite-viewer/raw/main/db_examples/chinook.db"
-          className="text-sm text-link hover:underline"
-          title="Download sample file"
-        >
-          Or download & try this sample file
-        </a>
-      )}
-    </div>
-  );
-
-  return (
-    <section>
-      {renderDropzoneContent(Boolean(db))}
-      <div className="mt-2">
-        {file && <FileData file={file} />}
-        <FileStats errors={errors} />
+    <section className="flex gap-2">
+      <div
+        {...getRootProps()}
+        className={`grow border p-4 rounded cursor-pointer text-center ${
+          hasDatabase ? "" : "py-24"
+        }`}
+      >
+        <input id="file-upload" {...getInputProps()} />
+        <label htmlFor="file-upload" className="sr-only">
+          Upload SQLite File
+        </label>
+        <p className="hidden sm:block">
+          Drag and drop a SQLite file here, or click to select one
+        </p>
+        {!hasDatabase ? (
+          <>
+            <p className="block sm:hidden">Click to select a SQLite file</p>
+            <a
+              href="https://github.com/vwh/sqlite-viewer/raw/main/db_examples/chinook.db"
+              className="text-sm text-link hover:underline"
+              title="Download sample file"
+            >
+              Or download & try this sample file
+            </a>
+          </>
+        ) : (
+          <p className="block sm:hidden">Click to select a file</p>
+        )}
+        <div className="mt-1">
+          {file && <FileData file={file} />}
+          <FileStats errors={errors} />
+        </div>
       </div>
+      {hasDatabase && (
+        <div className="flex flex-col gap-1">
+          <Settings />
+          <DarkModeToggle />
+        </div>
+      )}
     </section>
   );
+
+  return <section>{renderDropzoneContent(Boolean(db))}</section>;
 }
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -1,15 +1,10 @@
-import useSQLiteStore from "@/store/useSQLiteStore";
-
 import DarkModeToggle from "./dark-mode";
-import Settings from "./settings";
 
 import { Github } from "lucide-react";
 
 export default function Footer() {
-  const { db } = useSQLiteStore();
-
   return (
-    <footer className="flex items-center justify-between my-1 p-4 border rounded">
+    <footer className="flex items-center justify-between my-1 p-4 border rounded mt-3">
       <div>
         <p className="hidden sm:block text-xs">
           No file will be uploaded to server. using JavaScript, sql.js
@@ -27,7 +22,6 @@ export default function Footer() {
       </div>
       <div className="flex gap-1">
         <DarkModeToggle />
-        {db && <Settings />}
       </div>
     </footer>
   );

diff --git a/src/components/settings.tsx b/src/components/settings.tsx
@@ -58,7 +58,7 @@ export default function Settings() {
   return (
     <Drawer>
       <DrawerTrigger asChild>
-        <Button variant="outline">
+        <Button variant="outline" className="grow">
           <Settings2 className="h-5 w-5" />
         </Button>
       </DrawerTrigger>

diff --git a/src/components/table-select.tsx b/src/components/table-select.tsx
@@ -16,7 +16,7 @@ export default function TableSelect() {
   return (
     <section className="flex justify-center items-center gap-2">
       <Select value={selectedTable} onValueChange={setSelectedTable}>
-        <SelectTrigger className="w-[200px] md:w-[300px]">
+        <SelectTrigger className="grow">
           <SelectValue placeholder="Select a table" />
         </SelectTrigger>
         <SelectContent>
@@ -30,8 +30,13 @@ export default function TableSelect() {
           </SelectGroup>
         </SelectContent>
       </Select>
-      <Badge className="text-sm">
-        {tables[parseInt(selectedTable)].count} rows
+      <Badge
+        title="Rows"
+        className="text-sm grow min-w-[100px] md:min-w-[200px] py-2"
+      >
+        <span className="text-center w-full">
+          {tables[parseInt(selectedTable)].count}
+        </span>
       </Badge>
     </section>
   );

diff --git a/src/components/table.tsx b/src/components/table.tsx
@@ -109,14 +109,17 @@ export function DBTable() {
   if (rowPerPageOrAuto === "auto") {
     const screenHeight = window.innerHeight;
     const thresholds = [
-      { height: 1600, rowHeight: 60 },
-      { height: 1400, rowHeight: 65 },
+      { height: 1700, rowHeight: 65 },
+      { height: 1300, rowHeight: 70 },
+      { height: 1200, rowHeight: 75 },
       { height: 1100, rowHeight: 75 },
       { height: 1000, rowHeight: 80 },
-      { height: 900, rowHeight: 90 },
-      { height: 850, rowHeight: 90 },
-      { height: 750, rowHeight: 100 },
-      { height: 700, rowHeight: 110 },
+      { height: 950, rowHeight: 80 },
+      { height: 900, rowHeight: 85 },
+      { height: 850, rowHeight: 85 },
+      { height: 800, rowHeight: 90 },
+      { height: 750, rowHeight: 95 },
+      { height: 700, rowHeight: 100 },
       { height: 600, rowHeight: 120 },
       { height: 550, rowHeight: 140 },
       { height: 500, rowHeight: 180 },