Merge branch 'main' into feat(ui)--dark-theme

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "sqlite-studio"
-version = "0.1.3"
+version = "0.1.4"
 edition = "2021"
 
 [dependencies]

src/main.rs

@@ -2,7 +2,6 @@ use std::{collections::HashMap, path::Path, sync::Arc};
 
 use clap::Parser;
 use color_eyre::eyre::OptionExt;
-use open::that;
 use tokio_rusqlite::{Connection, OpenFlags};
 use warp::Filter;
 const ROWS_PER_PAGE: i32 = 50;
@@ -54,6 +53,9 @@ async fn main() -> color_eyre::Result<()> {
         .recover(rejections::handle_rejection)
         .with(cors);
 
+    let res = open::that(format!("http://{}", args.address));
+    tracing::info!("tried to open in browser: {res:?}");
+
     let address = args.address.parse::<std::net::SocketAddr>()?;
     warp::serve(routes).run(address).await;
 
@@ -144,7 +146,6 @@ impl TheDB {
             .await?;
 
         tracing::info!("found {tables} tables in {path}");
-        that("http://127.0.0.1:3030").expect("Failed to open browser");
         Ok(Self {
             path,
             conn: Arc::new(conn),

ui/src/routeTree.gen.ts

@@ -8,60 +8,60 @@
 
 // This file is auto-generated by TanStack Router
 
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from "@tanstack/react-router";
 
 // Import Routes
 
-import { Route as rootRoute } from './routes/__root'
+import { Route as rootRoute } from "./routes/__root";
 
 // Create Virtual Routes
 
-const TablesLazyImport = createFileRoute('/tables')()
-const QueryLazyImport = createFileRoute('/query')()
-const IndexLazyImport = createFileRoute('/')()
+const TablesLazyImport = createFileRoute("/tables")();
+const QueryLazyImport = createFileRoute("/query")();
+const IndexLazyImport = createFileRoute("/")();
 
 // Create/Update Routes
 
 const TablesLazyRoute = TablesLazyImport.update({
-  path: '/tables',
+  path: "/tables",
   getParentRoute: () => rootRoute,
-} as any).lazy(() => import('./routes/tables.lazy').then((d) => d.Route))
+} as any).lazy(() => import("./routes/tables.lazy").then((d) => d.Route));
 
 const QueryLazyRoute = QueryLazyImport.update({
-  path: '/query',
+  path: "/query",
   getParentRoute: () => rootRoute,
-} as any).lazy(() => import('./routes/query.lazy').then((d) => d.Route))
+} as any).lazy(() => import("./routes/query.lazy").then((d) => d.Route));
 
 const IndexLazyRoute = IndexLazyImport.update({
-  path: '/',
+  path: "/",
   getParentRoute: () => rootRoute,
-} as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route))
+} as any).lazy(() => import("./routes/index.lazy").then((d) => d.Route));
 
 // Populate the FileRoutesByPath interface
 
-declare module '@tanstack/react-router' {
+declare module "@tanstack/react-router" {
   interface FileRoutesByPath {
-    '/': {
-      id: '/'
-      path: '/'
-      fullPath: '/'
-      preLoaderRoute: typeof IndexLazyImport
-      parentRoute: typeof rootRoute
-    }
-    '/query': {
-      id: '/query'
-      path: '/query'
-      fullPath: '/query'
-      preLoaderRoute: typeof QueryLazyImport
-      parentRoute: typeof rootRoute
-    }
-    '/tables': {
-      id: '/tables'
-      path: '/tables'
-      fullPath: '/tables'
-      preLoaderRoute: typeof TablesLazyImport
-      parentRoute: typeof rootRoute
-    }
+    "/": {
+      id: "/";
+      path: "/";
+      fullPath: "/";
+      preLoaderRoute: typeof IndexLazyImport;
+      parentRoute: typeof rootRoute;
+    };
+    "/query": {
+      id: "/query";
+      path: "/query";
+      fullPath: "/query";
+      preLoaderRoute: typeof QueryLazyImport;
+      parentRoute: typeof rootRoute;
+    };
+    "/tables": {
+      id: "/tables";
+      path: "/tables";
+      fullPath: "/tables";
+      preLoaderRoute: typeof TablesLazyImport;
+      parentRoute: typeof rootRoute;
+    };
   }
 }
 
@@ -71,7 +71,7 @@ export const routeTree = rootRoute.addChildren({
   IndexLazyRoute,
   QueryLazyRoute,
   TablesLazyRoute,
-})
+});
 
 /* prettier-ignore-end */
 

ui/src/routes/index.lazy.tsx

@@ -139,6 +139,11 @@ type TheBarChartProps = {
   }[];
 };
 
+const compactrer = Intl.NumberFormat("en-US", {
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
 export function TheBarChart({ counts }: TheBarChartProps) {
   return (
     <ResponsiveContainer width="100%" height={350}>
@@ -149,9 +154,13 @@ export function TheBarChart({ counts }: TheBarChartProps) {
           fontSize={12}
           tickLine={false}
           axisLine={false}
-          tickFormatter={(number) =>
-            Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 }).format(number)
-          }
+          tickFormatter={(number) => compactrer.format(number)}
+        />
+        <Bar
+          dataKey="count"
+          fill="currentColor"
+          radius={[4, 4, 0, 0]}
+          className="fill-primary"
         />
         <Bar dataKey="count" fill="currentColor" radius={[4, 4, 0, 0]} className="fill-primary" />
       </BarChart>

ui/src/routes/query.lazy.tsx

@@ -32,7 +32,7 @@ function Query() {
         row.reduce((acc, curr, i) => {
           acc[data.columns[i]] = curr;
           return acc;
-        }, {})
+        }, {}),
       )}
       className={cn(currentTheme === "light" ? "rdg-light" : "rdg-dark")}
     />