refactor: several improvements 🎨 (#93)

.changeset/afraid-chefs-protect.md

@@ -0,0 +1,5 @@
+---
+"@tablex/core": patch
+---
+
+Removes the splash screen + replace background images with procedural ones to reduce bundle size

apps/core/package.json

@@ -47,6 +47,7 @@
     "date-fns": "^3.6.0",
     "hotkeys-js": "^3.13.7",
     "lucide-react": "^0.292.0",
+    "mini-svg-data-uri": "^1.4.4",
     "react": "^18.3.1",
     "react-day-picker": "8.10.1",
     "react-dom": "^18.3.1",

apps/core/src-tauri/src/cli.rs

@@ -62,7 +62,6 @@ pub fn parse_cli_args() -> (Args, Command) {
 /// - If `--save` is set without `-c`.
 pub async fn handle_cli_args(app: &AppHandle, args: Args, mut cmd: Command) {
     let main_window = app.get_webview_window("main").unwrap();
-    let splash_screen = app.get_webview_window("splashscreen").unwrap();
 
     if let Some(conn_string) = args.conn_string {
         #[cfg(all(windows, not(dev)))]
@@ -86,16 +85,12 @@ pub async fn handle_cli_args(app: &AppHandle, args: Args, mut cmd: Command) {
         #[cfg(all(windows, not(dev)))]
         free_console();
 
-        splash_screen.show().unwrap();
-
         let url = format!(
             "/dashboard/land?connectionName={}",
             &args.conn_name.unwrap_or("Temp".into())
         );
         let _ = main_window.eval(format!("window.location.replace('{url}')").as_str());
     } else {
-        splash_screen.show().unwrap();
-
         normal_navigation(app, main_window);
     }
 }

apps/core/src-tauri/src/main.rs

@@ -14,27 +14,13 @@ use commands::{connection::*, fs::*, row::*, table::*};
 #[cfg(debug_assertions)]
 use specta_typescript::{BigIntExportBehavior, Typescript};
 use state::SharedState;
-use tauri::{async_runtime::Mutex, AppHandle, Manager, Window, WindowEvent};
+use tauri::{async_runtime::Mutex, AppHandle, Manager, WindowEvent};
 use tauri_plugin_log::{RotationStrategy, Target, TargetKind, TimezoneStrategy};
 use tauri_specta::{collect_commands, collect_events, Builder};
 use tx_keybindings::*;
 use tx_lib::{events::*, TxError};
 use tx_settings::*;
 
-#[tauri::command]
-#[specta::specta]
-fn close_splashscreen(window: Window) {
-    if let Some(splashscreen) = window.get_webview_window("splashscreen") {
-        splashscreen.close().unwrap();
-
-        window
-            .get_webview_window("main")
-            .expect("no window labeled 'main' found")
-            .show()
-            .unwrap();
-    }
-}
-
 fn ensure_config_files_exist(app: &AppHandle) -> Result<(), TxError> {
     ensure_settings_file_exist(&get_settings_file_path(app)?)?;
     ensure_keybindings_file_exist(&get_keybindings_file_path(app)?)?;
@@ -86,7 +72,6 @@ fn main() {
         .constant("KEYBINDINGS_FILE_NAME", KEYBINDINGS_FILE_NAME)
         .constant("SETTINGS_FILE_NAME", SETTINGS_FILE_NAME)
         .commands(collect_commands![
-            close_splashscreen,
             kill_metax,
             // Connection commands.
             test_connection,
@@ -138,7 +123,6 @@ fn main() {
             let rt = tokio::runtime::Runtime::new().unwrap();
 
             ensure_config_files_exist(app_handle)?;
-            let _settings = load_settings_file(app_handle.clone())?;
 
             builder.mount_events(app);
 
@@ -154,7 +138,10 @@ fn main() {
             #[cfg(feature = "updater")]
             {
                 app_handle.plugin(tauri_plugin_updater::Builder::new().build())?;
-                if _settings.check_for_updates {
+
+                let settings = load_settings_file(app_handle.clone())?;
+
+                if settings.check_for_updates {
                     updater::check_for_update(app_handle.clone())?;
                 }
             }

apps/core/src-tauri/tauri.conf.json

@@ -48,18 +48,7 @@
         "resizable": true,
         "title": "TableX",
         "width": 800,
-        "center": true,
-        "visible": false
-      },
-      {
-        "width": 600,
-        "height": 350,
-        "decorations": false,
-        "url": "splashscreen.html",
-        "label": "splashscreen",
-        "center": true,
-        "visible": false
-      }
+        "center": true      }
     ],
     "security": {
       "csp": null,

apps/core/src/bindings.ts

@@ -5,9 +5,6 @@
 
 
 export const commands = {
-async closeSplashscreen() : Promise<void> {
-    await TAURI_INVOKE("close_splashscreen");
-},
 async killMetax() : Promise<Result<null, TxError>> {
     try {
     return { status: "ok", data: await TAURI_INVOKE("kill_metax") };

apps/core/src/components/create-connection-btn.tsx

@@ -7,7 +7,7 @@ const CreateConnectionBtn = () => {
   return (
     <Link
       to={"/connect"}
-      className={cn(buttonVariants({ size: "sm" }), "space-x-2")}
+      className={cn(buttonVariants({ size: "sm" }), "z-10 space-x-2")}
     >
       <LinkIcon className="text-muted-foreground" size={20} />
       <p>Start a connection</p>

apps/core/src/routes/__root.tsx

@@ -1,4 +1,3 @@
-import { commands } from "@/bindings"
 import { createRootRoute, Outlet } from "@tanstack/react-router"
 import React, { Suspense } from "react"
 import { Toaster } from "react-hot-toast"
@@ -14,7 +13,6 @@ const TanStackRouterDevtools =
       )
 
 export const Route = createRootRoute({
-  onEnter: commands.closeSplashscreen,
   component: () => {
     return (
       <main className="dark h-full w-full">

apps/core/src/routes/connect/-components/driver-selector.tsx

@@ -0,0 +1,70 @@
+import type { Drivers } from "@/bindings"
+import { Button } from "@/components/ui/button"
+import { Command, CommandGroup, CommandItem } from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "@/components/ui/popover"
+import { MappedDrivers } from "@/lib/types"
+import { cn } from "@tablex/lib/utils"
+import { Check, ChevronsUpDown } from "lucide-react"
+import { useState, type Dispatch, type SetStateAction } from "react"
+
+type Props = {
+  selectedDriver: Drivers | null
+  setSelectedDriver: Dispatch<SetStateAction<Drivers | null>>
+}
+const DriverSelector = ({ selectedDriver, setSelectedDriver }: Props) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+
+  return (
+    <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          role="combobox"
+          aria-expanded={isPopoverOpen}
+          className="w-[230px] justify-between"
+        >
+          {selectedDriver
+            ? MappedDrivers.find((driver) => driver.value === selectedDriver)
+                ?.label
+            : "Select a Database Driver"}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandGroup>
+            {MappedDrivers.map((driver) => (
+              <CommandItem
+                key={driver.value}
+                value={driver.value}
+                onSelect={(currentValue) => {
+                  setSelectedDriver(
+                    currentValue === selectedDriver
+                      ? null
+                      : (currentValue as Drivers)
+                  )
+                  setIsPopoverOpen(false)
+                }}
+              >
+                <Check
+                  className={cn(
+                    "mr-2 h-4 w-4",
+                    driver.value === selectedDriver
+                      ? "opacity-100"
+                      : "opacity-0"
+                  )}
+                />
+                {driver.label}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default DriverSelector

apps/core/src/routes/connect/route.tsx

@@ -1,16 +1,7 @@
 import { Drivers } from "@/bindings"
-import { Button } from "@/components/ui/button"
-import { Command, CommandGroup, CommandItem } from "@/components/ui/command"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger
-} from "@/components/ui/popover"
-import { MappedDrivers } from "@/lib/types"
-import { cn } from "@tablex/lib/utils"
 import { createFileRoute } from "@tanstack/react-router"
-import { Check, ChevronsUpDown } from "lucide-react"
 import { useState } from "react"
+import DriverSelector from "./-components/driver-selector"
 import PgMySQLConnection from "./-components/pg-mysql-connection"
 import SqliteConnection from "./-components/sqlite-connection"
 
@@ -19,66 +10,20 @@ export const Route = createFileRoute("/connect")({
 })
 
 function CreateConnection() {
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
   const [selectedDriver, setSelectedDriver] = useState<Drivers | null>(null)
+
   return (
-    <section className="flex h-full flex-col items-center justify-center gap-y-9 overflow-hidden">
-      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            role="combobox"
-            aria-expanded={isPopoverOpen}
-            className="w-[230px] justify-between"
-          >
-            {selectedDriver
-              ? MappedDrivers.find((driver) => driver.value === selectedDriver)
-                  ?.label
-              : "Select a Database Driver"}
-            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-[200px] p-0">
-          <Command>
-            <CommandGroup>
-              {MappedDrivers.map((driver) => (
-                <CommandItem
-                  key={driver.value}
-                  value={driver.value}
-                  onSelect={(currentValue) => {
-                    setSelectedDriver(
-                      currentValue === selectedDriver
-                        ? null
-                        : (currentValue as Drivers)
-                    )
-                    setIsPopoverOpen(false)
-                  }}
-                >
-                  <Check
-                    className={cn(
-                      "mr-2 h-4 w-4",
-                      driver.value === selectedDriver
-                        ? "opacity-100"
-                        : "opacity-0"
-                    )}
-                  />
-                  {driver.label}
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </Command>
-        </PopoverContent>
-      </Popover>
+    <section className="dark:bg-grid-white/[0.2] bg-grid-black/[0.2] flex h-full flex-col items-center justify-center gap-y-9 overflow-hidden bg-white dark:bg-black">
+      <DriverSelector
+        selectedDriver={selectedDriver}
+        setSelectedDriver={setSelectedDriver}
+      />
       {selectedDriver === "sqlite" ? (
         <SqliteConnection />
       ) : (
         selectedDriver && <PgMySQLConnection driver={selectedDriver} />
       )}
-      <img
-        src={"/connect.svg"}
-        alt="bg"
-        aria-hidden
-        className="absolute -z-10 h-full w-full object-cover object-center opacity-50"
-      />
+      <div className="pointer-events-none absolute inset-0 -z-10 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-black"></div>
     </section>
   )
 }

apps/core/src/routes/connections/route.tsx

@@ -101,20 +101,15 @@ function ConnectionsPage() {
           })}
         </Suspense>
       </ul>
-      <aside className="relative flex h-full flex-[0.5] flex-col items-center justify-center gap-y-14 lg:gap-y-20">
+      <aside className="dark:bg-grid-white/[0.2] bg-grid-black/[0.2] relative flex h-full flex-[0.5] flex-col items-center justify-center gap-y-14 bg-white lg:gap-y-20 dark:bg-black">
         <img
           src="/icons/planet.svg"
           alt="planet"
-          className="h-[120px] w-[120px] lg:h-[170px] lg:w-[170px]"
+          className="z-10 h-[120px] w-[120px] lg:h-[170px] lg:w-[170px]"
           aria-hidden
         />
         <CreateConnectionBtn />
-        <img
-          src={"/connect.svg"}
-          alt="background"
-          className="absolute -z-10 h-full w-full object-cover object-center opacity-30"
-          aria-hidden
-        />
+        <div className="pointer-events-none absolute inset-0 z-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-black"></div>
       </aside>
     </main>
   )

apps/core/src/routes/dashboard/_layout/land/route.tsx

@@ -7,7 +7,7 @@ export const Route = createFileRoute("/dashboard/_layout/land")({
 function DashboardPage() {
   return (
     <div className="flex h-full w-full flex-col items-center justify-center gap-y-3 break-words text-center text-2xl font-bold text-gray-500 opacity-50">
-      <img src={"/cube.svg"} alt="cube" width={100} height={100} />
+      <img src={"/icons/cube.svg"} alt="cube" width={100} height={100} />
       Choose a table
       <br />
       to get started