Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: several improvements 🎨 #93

Merged
merged 10 commits into from
Aug 29, 2024
5 changes: 5 additions & 0 deletions .changeset/afraid-chefs-protect.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@tablex/core": patch
---

Removes the splash screen + replace background images with procedural ones to reduce bundle size
1 change: 1 addition & 0 deletions apps/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
9 changes: 0 additions & 9 deletions apps/core/public/connect.svg

This file was deleted.

File renamed without changes
16 changes: 0 additions & 16 deletions apps/core/public/icons/icon.svg

This file was deleted.

9 changes: 0 additions & 9 deletions apps/core/public/landing.svg

This file was deleted.

24 changes: 0 additions & 24 deletions apps/core/public/splashscreen.html

This file was deleted.

9 changes: 0 additions & 9 deletions apps/core/public/splashscreen.svg

This file was deleted.

5 changes: 0 additions & 5 deletions apps/core/src-tauri/src/cli.rs
Original file line number Diff line number Diff line change
Expand Up @@ -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)))]
Expand All @@ -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);
}
}
Expand Down
23 changes: 5 additions & 18 deletions apps/core/src-tauri/src/main.rs
Original file line number Diff line number Diff line change
Expand Up @@ -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)?)?;
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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);

Expand All @@ -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())?;
}
}
Expand Down
13 changes: 1 addition & 12 deletions apps/core/src-tauri/tauri.conf.json
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
3 changes: 0 additions & 3 deletions apps/core/src/bindings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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") };
Expand Down
2 changes: 1 addition & 1 deletion apps/core/src/components/create-connection-btn.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 0 additions & 2 deletions apps/core/src/routes/__root.tsx
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -14,7 +13,6 @@ const TanStackRouterDevtools =
)

export const Route = createRootRoute({
onEnter: commands.closeSplashscreen,
component: () => {
return (
<main className="dark h-full w-full">
Expand Down
70 changes: 70 additions & 0 deletions apps/core/src/routes/connect/-components/driver-selector.tsx
Original file line number Diff line number Diff line change
@@ -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
71 changes: 8 additions & 63 deletions apps/core/src/routes/connect/route.tsx
Original file line number Diff line number Diff line change
@@ -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"

Expand All @@ -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>
)
}
11 changes: 3 additions & 8 deletions apps/core/src/routes/connections/route.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
2 changes: 1 addition & 1 deletion apps/core/src/routes/dashboard/_layout/land/route.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading
Loading