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