add sorting to table data

frontend/src/routes/__root.tsx

@@ -18,15 +18,9 @@ import {
 } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/router-devtools";
 import { Database, Rows3, Table2 } from "lucide-react";
-import { z } from "zod";
-
-const searchSchema = z.object({
-  dbSchema: z.string().optional().catch(""),
-});
 
 export const Route = createRootRoute({
   component: Root,
-  validateSearch: (search) => searchSchema.parse(search),
 });
 
 function Root() {
@@ -36,8 +30,8 @@ function Root() {
   const dbName = params.dbName ?? "";
   const navigate = useNavigate({ from: Route.fullPath });
 
-  const handleSelectedSchema = (schema: string) => {
-    void navigate({ to: "/db/$dbName/tables", params: { dbName: schema } });
+  const handleSelectedDb = (dbName: string) => {
+    void navigate({ to: "/db/$dbName/tables", params: { dbName } });
   };
 
   const { data: tables } = useTablesListQuery({ dbName });
@@ -52,15 +46,15 @@ function Root() {
           </Link>
         </header>
         <aside className={"p-3"}>
-          <Select value={dbName} onValueChange={handleSelectedSchema}>
+          <Select value={dbName} onValueChange={handleSelectedDb}>
             <SelectTrigger className="w-full">
-              <SelectValue placeholder="Database Schema" />
+              <SelectValue placeholder="Database" />
             </SelectTrigger>
             <SelectContent>
-              {data?.map((schema) => {
+              {data?.map((db) => {
                 return (
-                  <SelectItem value={schema} key={schema}>
-                    {schema}
+                  <SelectItem value={db} key={db}>
+                    {db}
                   </SelectItem>
                 );
               })}

frontend/src/routes/db/$dbName/tables/index.tsx

@@ -194,7 +194,7 @@ function Component() {
                                 )}
                             <ArrowUp
                               className={cn(
-                                "ml-2 size-4 opacity-0",
+                                "ml-2 size-4 opacity-0 transition-transform",
                                 sorted && "opacity-100",
                                 (sorted as string) === "desc" && "rotate-180",
                               )}

frontend/src/routes/index.tsx

@@ -1,26 +1,16 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from "@tanstack/react-router";
 
-export const Route = createFileRoute('/')({
+export const Route = createFileRoute("/")({
   component: Index,
-})
+});
 
 function Index() {
-  const { dbSchema } = Route.useSearch()
-  if (!dbSchema) {
-    return (
-      <div className="p-2">
-        <h3>Welcome Home!</h3>
-      </div>
-    )
-  }
-  return <TableView dbSchema={dbSchema} />
-}
-
-function TableView({ dbSchema }: { dbSchema: string }) {
   return (
-    <div className="p-2">
-      <h3>Table View</h3>
-      {dbSchema}
+    <div className="p-2 h-layout w-layout grid place-items-center">
+      <div>
+        <h1 className={"text-xl text-center font-semibold"}>Welcome!</h1>
+        <p>Select a database to continue.</p>
+      </div>
     </div>
-  )
+  );
 }