llink/js/src/features/layout.tsx

import { WindowControls } from "@/components/window-controls";
import { Button } from "@/components/ui/button";
import { useNavigate, useParams } from "react-router-dom";
import { Home, Settings, Users, Volume2, VolumeOff } from "lucide-react";
import { Switch } from "@/components/ui/switch";
import { useAutoplayStore } from "@/stores/autoplay-store";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { useNetworks } from "@/hooks/use-networks";
import { particlePath } from "@/lib/particle-path";
import { useParticle } from "@/hooks/use-particle";
import type { Particle } from "@/api/types";
import { PropsWithChildren, useCallback } from "react";
import { useDockBadge } from "@/hooks/use-dock-badge";
import { toast } from "sonner";

function getParticleDisplayName(particle: Particle): string {
  switch (particle.type) {
    case "stream":
    case "folder":
      return particle.properties.name;
    case "quest":
      return particle.properties.title;
    case "paper":
      return particle.properties.title;
    case "file":
      return particle.properties.filename;
    case "text":
      return particle.properties.content.slice(0, 30);
    case "media":
      return particle.type;
  }
}

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 AutoplayToggle() {
  const muted = useAutoplayStore((s) => s.muted);
  const toggleMuted = useAutoplayStore((s) => s.toggleMuted);

  const handleToggle = useCallback(() => {
    toggleMuted();
    if (muted) {
      toast.success("Auto-play enabled");
    } else {
      toast.info("Auto-play disabled");
    }
  }, [toggleMuted, muted]);

  return (
    <div className="no-drag flex items-center gap-1.5">
      {muted ? <VolumeOff className="size-3.5 text-muted-foreground" /> : <Volume2 className="size-3.5" />}
      <Switch
        checked={!muted}
        onCheckedChange={handleToggle}
        aria-label={muted ? "Unmute autoplay" : "Mute autoplay"}
      />
    </div>
  );
}

function TopBar() {
  const navigate = useNavigate();
  const { networkId, "*": rest } = useParams();
  const segments = [networkId, ...rest?.split("/") ?? []].filter(Boolean);

  const path = rest && networkId ? particlePath(networkId, rest.split("/").filter(Boolean)) : undefined;

  const { data: particle } = useParticle(path);

  return (
    <div className="drag-region flex items-center gap-1 border-b bg-muted p-1">
      <WindowControls />

      <Breadcrumb className="no-drag px-2">
        <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>
          )}

          {particle && (
            <span key={path} className="contents">
              <BreadcrumbSeparator />
              <BreadcrumbItem className="text-xs">
                <BreadcrumbPage>{getParticleDisplayName(particle)}</BreadcrumbPage>
              </BreadcrumbItem>
            </span>
          )}
        </BreadcrumbList>
      </Breadcrumb>

      <div className="flex-1" />

      <AutoplayToggle />

      {networkId && (
        <Button
          variant="ghost"
          size="sm"
          className="no-drag text-muted-foreground"
          onClick={() => navigate(`/${networkId}/settings`)}
        >
          <Users className="size-3.5" />
        </Button>
      )}

      <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({ children }: PropsWithChildren) {
  const { networkId } = useParams();
  useDockBadge(networkId);

  return (
    <div className="flex h-screen flex-col">
      <TopBar />
      {children}
    </div>
  );
}