diff --git a/ui/src/components/editor.tsx b/ui/src/components/editor.tsx index a20f9ee..352b53d 100644 --- a/ui/src/components/editor.tsx +++ b/ui/src/components/editor.tsx @@ -12,7 +12,8 @@ type Props = { export const Editor: FunctionComponent = ({ value, onChange }) => { const currentTheme = useTheme(); - const [editor, setEditor] = useState(null); + const [editor, setEditor] = + useState(null); const monacoEl = useRef(null); useEffect(() => { diff --git a/ui/src/lib/makeStore.tsx b/ui/src/lib/makeStore.tsx index 72720b4..d253ec0 100644 --- a/ui/src/lib/makeStore.tsx +++ b/ui/src/lib/makeStore.tsx @@ -1,4 +1,10 @@ -import { Dispatch, PropsWithChildren, createContext, useContext, useReducer } from "react"; +import { + Dispatch, + PropsWithChildren, + createContext, + useContext, + useReducer, +} from "react"; /** * Creates a store with the specified reducer and initial state. @@ -11,7 +17,7 @@ import { Dispatch, PropsWithChildren, createContext, useContext, useReducer } fr */ export default function createStore( reducer: (state: State, action: Action) => State, - initialState: State + initialState: State, ) { const StoreContext = createContext(initialState); const DispatchContext = createContext>(() => {}); @@ -21,7 +27,9 @@ export default function createStore( return ( - {children} + + {children} + ); } diff --git a/ui/src/main.tsx b/ui/src/main.tsx index 20227ab..12590d9 100644 --- a/ui/src/main.tsx +++ b/ui/src/main.tsx @@ -24,7 +24,7 @@ const ReactQueryDevtools = import.meta.env.PROD : React.lazy(() => import("@tanstack/react-query-devtools").then((res) => ({ default: res.ReactQueryDevtools, - })) + })), ); const queryClient = new QueryClient(); @@ -41,6 +41,6 @@ if (!rootElement.innerHTML) { - + , ); } diff --git a/ui/src/provider/theme.provider.tsx b/ui/src/provider/theme.provider.tsx index 14d32ab..9117f27 100644 --- a/ui/src/provider/theme.provider.tsx +++ b/ui/src/provider/theme.provider.tsx @@ -11,5 +11,5 @@ export const { localStorage.setItem("theme", next); return next; }, - (localStorage.getItem("theme") === "dark" ? "dark" : "light") as Theme + (localStorage.getItem("theme") === "dark" ? "dark" : "light") as Theme, ); diff --git a/ui/src/routes/__root.tsx b/ui/src/routes/__root.tsx index ac784f0..7a3be06 100644 --- a/ui/src/routes/__root.tsx +++ b/ui/src/routes/__root.tsx @@ -12,7 +12,7 @@ const TanStackRouterDevtools = import.meta.env.PROD : React.lazy(() => import("@tanstack/router-devtools").then((res) => ({ default: res.TanStackRouterDevtools, - })) + })), ); export const Route = createRootRoute({ @@ -26,10 +26,18 @@ export function Root() { const changeTheme = setTheme(); return ( <> -
+
- {data.sqlite_version} + + {data.sqlite_version} + {data.created && ( @@ -110,7 +142,9 @@ function Index() { The date and time when the DB was created.
- {data.created.toUTCString()} + + {data.created.toUTCString()} + )} @@ -121,7 +155,9 @@ function Index() { The date and time when the DB was last modified. - {data.modified.toUTCString()} + + {data.modified.toUTCString()} + @@ -148,7 +184,13 @@ export function TheBarChart({ counts }: TheBarChartProps) { return ( - + - ); diff --git a/ui/src/routes/tables.lazy.tsx b/ui/src/routes/tables.lazy.tsx index 3244592..301ca09 100644 --- a/ui/src/routes/tables.lazy.tsx +++ b/ui/src/routes/tables.lazy.tsx @@ -1,8 +1,13 @@ import "react-data-grid/lib/styles.css"; import { useInfiniteQuery, useQuery } from "@tanstack/react-query"; -import { Link, createLazyFileRoute } from "@tanstack/react-router"; -import { DatabaseZap, HardDrive, Table as TableIcon, TableProperties } from "lucide-react"; +import { Link, createFileRoute } from "@tanstack/react-router"; +import { + DatabaseZap, + HardDrive, + Table as TableIcon, + TableProperties, +} from "lucide-react"; import { CodeBlock, irBlack as CodeDarkTheme } from "react-code-blocks"; import DataGrid from "react-data-grid"; import { z } from "zod"; @@ -15,7 +20,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { cn } from "@/lib/utils"; import { useTheme } from "@/provider/theme.provider"; -export const Route = createLazyFileRoute("/tables")({ +export const Route = createFileRoute("/tables")({ component: Tables, loader: () => fetchTables(), pendingComponent: TablesSkeleton, @@ -26,7 +31,9 @@ function Tables() { const data = Route.useLoaderData(); const { table } = Route.useSearch(); - const tab = table ? data.tables.findIndex(({ name }) => name === table).toString() : "0"; + const tab = table + ? data.tables.findIndex(({ name }) => name === table).toString() + : "0"; return ( @@ -77,8 +84,12 @@ function Table({ name }: Props) { -
{data.row_count.toLocaleString()}
-

The number of rows in the table.

+
+ {data.row_count.toLocaleString()} +
+

+ The number of rows in the table. +

@@ -87,8 +98,12 @@ function Table({ name }: Props) { -
{data.index_count.toLocaleString()}
-

The number of indexes in the table.

+
+ {data.index_count.toLocaleString()} +
+

+ The number of indexes in the table. +

@@ -97,8 +112,12 @@ function Table({ name }: Props) { -
{data.column_count.toLocaleString()}
-

The number of columns in the table.

+
+ {data.column_count.toLocaleString()} +
+

+ The number of columns in the table. +

@@ -108,7 +127,9 @@ function Table({ name }: Props) {
{data.table_size}
-

The size of the table on disk.

+

+ The size of the table on disk. +

@@ -149,7 +170,10 @@ function TableSkeleton() { } function isAtBottom({ currentTarget }: React.UIEvent): boolean { - return currentTarget.scrollTop + 10 >= currentTarget.scrollHeight - currentTarget.clientHeight; + return ( + currentTarget.scrollTop + 10 >= + currentTarget.scrollHeight - currentTarget.clientHeight + ); } type TableDataProps = { @@ -181,8 +205,8 @@ function TableData({ name }: TableDataProps) { row.reduce((acc, curr, i) => { acc[page.columns[i]] = curr; return acc; - }, {}) - ) + }, {}), + ), ) as never[][]; const rows = [].concat(...grouped);