session selector working

frontend/src/routes/__root.tsx

@@ -1,3 +1,4 @@
+import { SessionSelector } from "@/components/session-selector";
 import { SettingsDialog } from "@/components/settings-dialog";
 import {
   Button,
@@ -12,7 +13,6 @@ import {
 import { cn } from "@/lib/utils";
 import { useDatabasesListQuery, useTablesListQuery } from "@/services/db";
 import { useUiStore } from "@/state";
-import { useSessionStore } from "@/state/db-session-store";
 import {
   Link,
   Outlet,
@@ -30,8 +30,6 @@ export const Route = createRootRoute({
 function Root() {
   const showSidebar = useUiStore.use.showSidebar();
   const toggleSidebar = useUiStore.use.toggleSidebar();
-  const sessions = useSessionStore.use.sessions();
-  const currentSessionId = useSessionStore.use.currentSessionId();
 
   const { data } = useDatabasesListQuery();
   const params = useParams({ strict: false });
@@ -76,31 +74,7 @@ function Root() {
         <aside className={"p-3"}>
           {showSidebar && (
             <>
-              {sessions.length > 0 && (
-                <Select
-                  value={currentSessionId ? currentSessionId.toString() : ""}
-                >
-                  <SelectTrigger className="max-w-full">
-                    <SelectValue placeholder="Select a Database" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {sessions?.map((session) => {
-                      const text =
-                        "connectionString" in session
-                          ? session.connectionString
-                          : `${session.host}:${session.port}/${session.database}`;
-                      return (
-                        <SelectItem
-                          value={session.id.toString()}
-                          key={session.id}
-                        >
-                          {text}
-                        </SelectItem>
-                      );
-                    })}
-                  </SelectContent>
-                </Select>
-              )}
+              <SessionSelector />
               <Select value={dbName} onValueChange={handleSelectedDb}>
                 <SelectTrigger className="w-full mt-4">
                   <SelectValue placeholder="Select a Database" />