feat(ui): add tool tip and update codeblock style (#11)

* chore: Add JetBrains Mono font * feat(ui): add tool tip and update codeblock style * chore: Format code abd remove lock file
frectonz · Jun 20, 2024 · e642dbd · e642dbd
1 parent 3ed6d90
commit e642dbd
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 8 deletions.
diff --git a/ui/index.html b/ui/index.html
@@ -5,6 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="/icon.svg" type="image/svg+xml" />
     <title>SQLite Studio</title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
+      rel="stylesheet"
+    />
   </head>
 
   <body>

diff --git a/ui/src/components/editor.tsx b/ui/src/components/editor.tsx
@@ -32,6 +32,7 @@ export const Editor: FunctionComponent<Props> = ({ value, onChange }) => {
             top: 20,
             bottom: 20,
           },
+          fontFamily: "JetBrains Mono",
           cursorStyle: "block",
           automaticLayout: true,
           readOnly: onChange === undefined,

diff --git a/ui/src/index.css b/ui/src/index.css
@@ -64,6 +64,6 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground font-mono;
   }
 }
diff --git a/ui/src/routes/index.lazy.tsx b/ui/src/routes/index.lazy.tsx
@@ -1,11 +1,19 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createLazyFileRoute } from "@tanstack/react-router";
 import {
   DatabaseZap,
   Table as TableIcon,
   TextSearch,
   Workflow,
 } from "lucide-react";
-import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
+import {
+  Bar,
+  BarChart,
+  ResponsiveContainer,
+  Tooltip,
+  TooltipProps,
+  XAxis,
+  YAxis,
+} from "recharts";
 
 import { fetchOverview } from "@/api";
 import {
@@ -17,8 +25,12 @@ import {
 } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
+import {
+  NameType,
+  ValueType,
+} from "recharts/types/component/DefaultTooltipContent";
 
-export const Route = createFileRoute("/")({
+export const Route = createLazyFileRoute("/")({
   component: Index,
   loader: () => fetchOverview(),
   pendingComponent: IndexSkeleton,
@@ -93,7 +105,7 @@ function Index() {
         </Card>
       </div>
 
-      <div className="grid gap-4 lg:grid-cols-2 xl:grid-cols-7">
+      <div className="grid gap-8 lg:grid-cols-2 xl:grid-cols-7">
         <Card className="xl:col-span-4">
           <CardHeader>
             <CardTitle>Rows Per Table</CardTitle>
@@ -177,7 +189,7 @@ type TheBarChartProps = {
   }[];
 };
 
-const compactrer = Intl.NumberFormat("en-US", {
+const compactNumberFormatter = Intl.NumberFormat("en-US", {
   notation: "compact",
   maximumFractionDigits: 1,
 });
@@ -198,14 +210,15 @@ export function TheBarChart({ counts }: TheBarChartProps) {
           fontSize={12}
           tickLine={false}
           axisLine={false}
-          tickFormatter={(number) => compactrer.format(number)}
+          tickFormatter={(number) => compactNumberFormatter.format(number)}
         />
         <Bar
           dataKey="count"
           fill="currentColor"
           radius={[4, 4, 0, 0]}
           className="fill-primary"
         />
+        <Tooltip content={<CustomTooltip />} cursor={{ fill: "#00ffa61e" }} />
       </BarChart>
     </ResponsiveContainer>
   );
@@ -233,3 +246,26 @@ function IndexSkeleton() {
     </>
   );
 }
+
+function CustomTooltip({
+  active,
+  payload,
+  label,
+}: TooltipProps<ValueType, NameType>) {
+  if (!active || !payload || !payload.length) return null;
+
+  return (
+    <Card className="p-3">
+      <CardContent className="p-0">
+        <div className="font-bold"># {payload[0]?.value?.toLocaleString()}</div>
+        <p className="text-xs text-muted-foreground">
+          Table <span className="text-primary font-semibold">{label}</span> have{" "}
+          <span className="text-primary font-semibold">
+            {compactNumberFormatter.format(payload[0]?.value as number)}
+          </span>{" "}
+          rows.
+        </p>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/ui/src/routes/tables.lazy.tsx b/ui/src/routes/tables.lazy.tsx
@@ -41,7 +41,7 @@ function Tables() {
         {data.tables.map((n, i) => (
           <TabsTrigger key={i} value={i.toString()}>
             <Link search={{ table: n.name }}>
-              {n.name} ({n.count.toLocaleString()})
+              {n.name} [{n.count.toLocaleString()}]
             </Link>
           </TabsTrigger>
         ))}
@@ -140,6 +140,12 @@ function Table({ name }: Props) {
           language="sql"
           theme={currentTheme === "dark" ? CodeDarkTheme : undefined}
           showLineNumbers={false}
+          customStyle={{
+            FontFace: "JetBrains Mono",
+            padding: "10px",
+            backgroundColor: currentTheme === "dark" ? "#091813" : "#f5faf9",
+            borderRadius: "10px",
+          }}
         />
       </Card>
 

diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
@@ -9,6 +9,9 @@ module.exports = {
   ],
   prefix: "",
   theme: {
+    fontFamily: {
+      mono: ["JetBrains Mono"],
+    },
     container: {
       center: true,
       padding: "2rem",