refactor: layout file name

2026-03-18 17:14:51 -07:00
parent 69d6ec2ca2
commit 38ff4c47c9
2 changed files with 3 additions and 3 deletions
@@ -0,0 +1,128 @@
+import { WindowControls } from "@/components/window-controls";
+import { Button } from "@/components/ui/button";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
+import { Home, Settings } from "lucide-react";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { useNetworks } from "@/hooks/use-networks";
+
+function NetworkBreadcrumbContent({ networkId }: { networkId: string }) {
+  const { data: networks } = useNetworks();
+  const network = networks?.find((n) => n.id === networkId);
+  const name = network?.name ?? networkId;
+  const initials = name.slice(0, 2).toUpperCase();
+
+  return (
+    <span className="flex items-center gap-1.5">
+      <Avatar size="sm">
+        <AvatarFallback className="bg-primary/10 text-primary text-[10px] font-medium">
+          {initials}
+        </AvatarFallback>
+      </Avatar>
+      {name}
+    </span>
+  );
+}
+
+function TopBar() {
+  const navigate = useNavigate();
+  const segments = useLocation().pathname.split("/").filter(Boolean);
+  const networkId = segments[0] ?? null;
+
+  return (
+    <div className="drag-region flex items-center gap-3 border-b px-3 py-1">
+      <WindowControls />
+
+      <Breadcrumb className="no-drag">
+        <BreadcrumbList>
+          <BreadcrumbItem className="text-xs">
+            {segments.length === 0 ? (
+              <BreadcrumbPage className="flex items-center gap-1">
+                <Home className="size-3.5" />
+              </BreadcrumbPage>
+            ) : (
+              <BreadcrumbLink
+                className="flex cursor-pointer items-center gap-1"
+                onClick={() => navigate("/")}
+              >
+                <Home className="size-3.5" />
+              </BreadcrumbLink>
+            )}
+          </BreadcrumbItem>
+
+          {networkId && (
+            <span className="contents">
+              <BreadcrumbSeparator />
+              <BreadcrumbItem className="text-xs">
+                {segments.length === 1 ? (
+                  <BreadcrumbPage>
+                    <NetworkBreadcrumbContent networkId={networkId} />
+                  </BreadcrumbPage>
+                ) : (
+                  <BreadcrumbLink
+                    className="cursor-pointer"
+                    onClick={() => navigate(`/${networkId}`)}
+                  >
+                    <NetworkBreadcrumbContent networkId={networkId} />
+                  </BreadcrumbLink>
+                )}
+              </BreadcrumbItem>
+            </span>
+          )}
+
+          {segments.slice(1).map((segment, index) => {
+            const isLast = index === segments.length - 2;
+            const path = `/${segments.slice(0, index + 2).join("/")}`;
+
+            return (
+              <span key={path} className="contents">
+                <BreadcrumbSeparator />
+                <BreadcrumbItem className="text-xs">
+                  {isLast ? (
+                    <BreadcrumbPage>{segment}</BreadcrumbPage>
+                  ) : (
+                    <BreadcrumbLink
+                      className="cursor-pointer"
+                      onClick={() => navigate(path)}
+                    >
+                      {segment}
+                    </BreadcrumbLink>
+                  )}
+                </BreadcrumbItem>
+              </span>
+            );
+          })}
+        </BreadcrumbList>
+      </Breadcrumb>
+
+      <div className="flex-1" />
+
+      <Button
+        variant="ghost"
+        size="sm"
+        className="no-drag text-muted-foreground"
+        onClick={() => navigate("/settings")}
+      >
+        <Settings className="size-3.5" />
+      </Button>
+    </div>
+  );
+}
+
+export default function Layout() {
+  return (
+    <div className="flex h-screen flex-col">
+      <TopBar />
+      <div className="relative flex-1 overflow-hidden">
+        <Outlet />
+      </div>
+    </div>
+  );
+}