feat: add current path

This resolves #20

js/src/features/network-selector.tsx

@@ -1,29 +1,51 @@
 import { useNavigate } from "react-router-dom";
-import { LogOut } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Muted } from "@/components/ui/typography";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { useAuthStore } from "@/stores/auth-store";
-import { WindowControls } from "@/components/window-controls";
-import { useQuery } from "@tanstack/react-query";
-import { apiClient } from "@/api/client";
+import { Users } from "lucide-react";
+import { Small } from "@/components/ui/typography";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { useNetworks } from "@/hooks/use-networks";
 import { Progress } from "@/components/ui/progress";
+import type { Network } from "@/api/types";
+
+function NetworkRow({
+  network,
+  onClick,
+}: {
+  network: Network;
+  onClick: () => void;
+}) {
+  const initials = network.name.slice(0, 2).toUpperCase();
+  const memberCount = network.humans.length;
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-accent"
+    >
+      <Avatar>
+        <AvatarFallback className="bg-primary/10 text-primary font-medium">
+          {initials}
+        </AvatarFallback>
+      </Avatar>
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-sm font-medium">{network.name}</p>
+        <div className="text-muted-foreground flex items-center gap-1">
+          <Users className="size-3" />
+          <Small className="text-muted-foreground">
+            {memberCount} {memberCount === 1 ? "member" : "members"}
+          </Small>
+        </div>
+      </div>
+    </button>
+  );
+}
 
 export function NetworkSelector() {
   const navigate = useNavigate();
-  const signOut = useAuthStore((s) => s.signOut);
-  const user = useAuthStore((s) => s.user);
 
-  const { data, isPending, error } = useQuery({
-    queryKey: ["networks"],
-    queryFn: () => apiClient.listNetworks(),
-  });
+  const { data, isPending, error } = useNetworks();
 
   if (isPending) {
     return <Progress />;
@@ -31,7 +53,7 @@ export function NetworkSelector() {
 
   if (error) {
     return (
-      <div className="flex min-h-screen items-center justify-center">
+      <div className="flex h-full items-center justify-center">
         <p className="text-destructive text-sm">Failed to load networks</p>
         <p>{error.message}</p>
       </div>
@@ -40,9 +62,10 @@ export function NetworkSelector() {
 
   if (data?.length === 0) {
     return (
-      <div className="flex min-h-screen flex-col items-center justify-center gap-4 px-4 text-center max-w-sm mx-auto">
+      <div className="mx-auto flex h-full max-w-sm flex-col items-center justify-center gap-4 px-4 text-center">
         <p className="text-muted-foreground">
-          You don't have access to any networks yet. Please email us to get started.
+          You don't have access to any networks yet. Please email us to get
+          started.
         </p>
         <a href="mailto:[email protected]" className="text-primary underline">
           team@flowylabs.ai
@@ -52,35 +75,18 @@ export function NetworkSelector() {
   }
 
   return (
-    <div className="flex h-screen flex-col">
-      <div className="drag-region flex items-center gap-3 border-b px-4 py-3">
-        <WindowControls />
-        <div className="flex-1" />
-        {user && <Muted className="text-xs">{user.email_prefix}</Muted>}
-        <Button
-          variant="ghost"
-          size="sm"
-          className="no-drag text-muted-foreground"
-          onClick={signOut}
-        >
-          <LogOut className="h-3.5 w-3.5" />
-        </Button>
+    <ScrollArea className="h-full">
+      <div className="py-1">
+        {data?.map((network, index) => (
+          <div key={network.id}>
+            <NetworkRow
+              network={network}
+              onClick={() => navigate(`/${network.id}`)}
+            />
+            {index < data.length - 1 && <Separator className="mx-4" />}
+          </div>
+        ))}
       </div>
-
-      <div className="flex flex-1 items-center justify-center p-4">
-        <Select onValueChange={(value) => navigate(`/${value}`)}>
-          <SelectTrigger className="no-drag w-64">
-            <SelectValue placeholder="Select a network" />
-          </SelectTrigger>
-          <SelectContent>
-            {data?.map((network) => (
-              <SelectItem key={network.id} value={network.id}>
-                {network.name}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-    </div>
+    </ScrollArea>
   );
 }