kandev/apps/web/components/settings/settings-app-sidebar.tsx

"use client";

import { useEffect } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  IconSettings,
  IconFolder,
  IconRobot,
  IconBell,
  IconCode,
  IconCpu,
  IconKey,
  IconMicrophone,
  IconMessageCircle,
  IconBrandGithub,
  IconBrandGitlab,
  IconBrandSlack,
  IconHexagon,
  IconWand,
  IconGitBranch,
  IconArrowsShuffle,
  IconTicket,
  IconPlugConnected,
  IconBolt,
  IconActivity,
  IconDatabase,
  IconArchive,
  IconFileText,
  IconRefresh,
  IconScale,
  IconInfoCircle,
  IconServerCog,
} from "@tabler/icons-react";
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarGroupContent,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarMenuSub,
  SidebarMenuSubItem,
  SidebarMenuSubButton,
  SidebarHeader,
  useSidebar,
} from "@kandev/ui/sidebar";
import { ScrollArea } from "@kandev/ui/scroll-area";
import { ScrollOnOverflow } from "@kandev/ui/scroll-on-overflow";
import { useAppStore } from "@/components/state-provider";
import { useAvailableAgents } from "@/hooks/domains/settings/use-available-agents";

import { AgentLogo } from "@/components/agent-logo";
import { getExecutorIcon } from "@/lib/executor-icons";
import { getCapabilityWarning } from "@/lib/capability-warning";
import type { Agent, AgentProfile, Executor } from "@/lib/types/http";
import type { WorkspaceState } from "@/lib/state/slices";

type WorkspaceItem = WorkspaceState["items"][number];

type GeneralSidebarSectionProps = {
  pathname: string;
};

function GeneralSidebarSection({ pathname }: GeneralSidebarSectionProps) {
  return (
    <SidebarMenuItem>
      <SidebarMenuButton asChild tooltip="General">
        <Link href="/settings/general">
          <IconSettings className="h-4 w-4" />
          <span>General</span>
        </Link>
      </SidebarMenuButton>
      <SidebarMenuSub className="ml-3 mt-1">
        <SidebarMenuSubItem>
          <SidebarMenuSubButton
            asChild
            size="sm"
            isActive={pathname === "/settings/general/notifications"}
          >
            <Link href="/settings/general/notifications">
              <IconBell className="h-4 w-4" />
              <span>Notifications</span>
            </Link>
          </SidebarMenuSubButton>
        </SidebarMenuSubItem>
        <SidebarMenuSubItem>
          <SidebarMenuSubButton
            asChild
            size="sm"
            isActive={pathname === "/settings/general/editors"}
          >
            <Link href="/settings/general/editors">
              <IconCode className="h-4 w-4" />
              <span>Editors</span>
            </Link>
          </SidebarMenuSubButton>
        </SidebarMenuSubItem>
      </SidebarMenuSub>
    </SidebarMenuItem>
  );
}

type WorkspacesSidebarSectionProps = {
  pathname: string;
  workspaces: WorkspaceItem[];
};

function WorkspacesSidebarSection({ pathname, workspaces }: WorkspacesSidebarSectionProps) {
  return (
    <SidebarMenuItem>
      <SidebarMenuButton asChild tooltip="Workspaces">
        <Link href="/settings/workspace">
          <IconFolder className="h-4 w-4" />
          <span>Workspaces</span>
        </Link>
      </SidebarMenuButton>
      {workspaces.length > 0 && (
        <SidebarMenuSub className="ml-3 mt-1">
          {workspaces.map((workspace) => {
            const workspacePath = `/settings/workspace/${workspace.id}`;
            const workflowsPath = `${workspacePath}/workflows`;
            const repositoriesPath = `${workspacePath}/repositories`;

            return (
              <SidebarMenuSubItem key={workspace.id}>
                <SidebarMenuSubButton asChild isActive={pathname === workspacePath}>
                  <Link href={workspacePath}>
                    <span>{workspace.name}</span>
                  </Link>
                </SidebarMenuSubButton>
                <SidebarMenuSub className="ml-3">
                  <SidebarMenuSubItem>
                    <SidebarMenuSubButton
                      asChild
                      size="sm"
                      isActive={pathname === repositoriesPath}
                    >
                      <Link href={repositoriesPath}>
                        <IconGitBranch className="h-3.5 w-3.5" />
                        <span>Repositories</span>
                      </Link>
                    </SidebarMenuSubButton>
                  </SidebarMenuSubItem>
                  <SidebarMenuSubItem>
                    <SidebarMenuSubButton asChild size="sm" isActive={pathname === workflowsPath}>
                      <Link href={workflowsPath}>
                        <IconArrowsShuffle className="h-3.5 w-3.5" />
                        <span>Workflows</span>
                      </Link>
                    </SidebarMenuSubButton>
                  </SidebarMenuSubItem>
                </SidebarMenuSub>
              </SidebarMenuSubItem>
            );
          })}
        </SidebarMenuSub>
      )}
    </SidebarMenuItem>
  );
}

function SystemSidebarSection({ pathname }: { pathname: string }) {
  const items: Array<{ href: string; label: string; Icon: typeof IconBrandGithub }> = [
    { href: "/settings/system/status", label: "Status", Icon: IconActivity },
    { href: "/settings/system/database", label: "Database", Icon: IconDatabase },
    { href: "/settings/system/backups", label: "Backups", Icon: IconArchive },
    { href: "/settings/system/logs", label: "Logs", Icon: IconFileText },
    { href: "/settings/system/updates", label: "Updates", Icon: IconRefresh },
    { href: "/settings/system/about", label: "About", Icon: IconInfoCircle },
    { href: "/settings/system/licenses", label: "Licenses", Icon: IconScale },
  ];
  const isSystem = pathname.startsWith("/settings/system");
  return (
    <SidebarMenuItem>
      <SidebarMenuButton asChild tooltip="System" isActive={isSystem}>
        <Link href="/settings/system/status">
          <IconServerCog className="h-4 w-4" />
          <span>System</span>
        </Link>
      </SidebarMenuButton>
      <SidebarMenuSub className="ml-3 mt-1">
        {items.map(({ href, label, Icon }) => (
          <SidebarMenuSubItem key={href}>
            <SidebarMenuSubButton asChild size="sm" isActive={pathname === href}>
              <Link href={href}>
                <Icon className="h-3.5 w-3.5" />
                <span>{label}</span>
              </Link>
            </SidebarMenuSubButton>
          </SidebarMenuSubItem>
        ))}
      </SidebarMenuSub>
    </SidebarMenuItem>
  );
}

function IntegrationsSidebarSection({ pathname }: { pathname: string }) {
  const items: Array<{ href: string; label: string; Icon: typeof IconBrandGithub }> = [
    { href: "/settings/integrations/github", label: "GitHub", Icon: IconBrandGithub },
    { href: "/settings/integrations/gitlab", label: "GitLab", Icon: IconBrandGitlab },
    { href: "/settings/integrations/jira", label: "Jira", Icon: IconTicket },
    { href: "/settings/integrations/linear", label: "Linear", Icon: IconHexagon },
    { href: "/settings/integrations/slack", label: "Slack", Icon: IconBrandSlack },
  ];
  return (
    <SidebarMenuItem>
      <SidebarMenuButton asChild tooltip="Integrations">
        <Link href="/settings/integrations">
          <IconPlugConnected className="h-4 w-4" />
          <span>Integrations</span>
        </Link>
      </SidebarMenuButton>
      <SidebarMenuSub className="ml-3 mt-1">
        {items.map(({ href, label, Icon }) => (
          <SidebarMenuSubItem key={href}>
            <SidebarMenuSubButton asChild size="sm" isActive={pathname === href}>
              <Link href={href}>
                <Icon className="h-3.5 w-3.5" />
                <span>{label}</span>
              </Link>
            </SidebarMenuSubButton>
          </SidebarMenuSubItem>
        ))}
      </SidebarMenuSub>
    </SidebarMenuItem>
  );
}

type AgentsSidebarSectionProps = {
  pathname: string;
  agents: Agent[];
};

function AgentsSidebarSection({ pathname, agents }: AgentsSidebarSectionProps) {
  return (
    <SidebarMenuItem>
      <SidebarMenuButton asChild tooltip="Agents">
        <Link href="/settings/agents">
          <IconRobot className="h-4 w-4" />
          <span>Agents</span>
        </Link>
      </SidebarMenuButton>
      {agents.length > 0 && (
        <SidebarMenuSub className="ml-3 mt-1">
          {agents.flatMap((agent: Agent) =>
            agent.profiles.map((profile: AgentProfile) => {
              const encodedAgent = encodeURIComponent(agent.name);
              const profilePath = `/settings/agents/${encodedAgent}/profiles/${profile.id}`;
              const agentLabel = profile.agentDisplayName || agent.name;
              const warning = getCapabilityWarning(agent.capability_status, agent.capability_error);
              return (
                <SidebarMenuSubItem key={profile.id} className="min-w-0">
                  <SidebarMenuSubButton asChild isActive={pathname === profilePath}>
                    <Link
                      href={profilePath}
                      className="!flex min-w-0 items-center gap-1.5"
                      title={warning?.title || `${agentLabel} • ${profile.name}`}
                    >
                      <AgentLogo agentName={agent.name} className="shrink-0" />
                      <ScrollOnOverflow className="min-w-0">
                        {agentLabel} • {profile.name}
                      </ScrollOnOverflow>
                      {warning && <warning.Icon className={`size-3.5 shrink-0 ${warning.color}`} />}
                    </Link>
                  </SidebarMenuSubButton>
                </SidebarMenuSubItem>
              );
            }),
          )}
        </SidebarMenuSub>
      )}
    </SidebarMenuItem>
  );
}

type ExecutorsSidebarSectionProps = {
  pathname: string;
  executors: Executor[];
};

function ExecutorsSidebarSection({ pathname, executors }: ExecutorsSidebarSectionProps) {
  const allProfiles = executors.flatMap((e) =>
    (e.profiles ?? []).map((p) => ({ ...p, executorType: e.type })),
  );

  return (
    <SidebarMenuItem>
      <SidebarMenuButton asChild tooltip="Executors" isActive={pathname === "/settings/executors"}>
        <Link href="/settings/executors">
          <IconCpu className="h-4 w-4" />
          <span>Executors</span>
        </Link>
      </SidebarMenuButton>
      {allProfiles.length > 0 && (
        <SidebarMenuSub className="ml-3 mt-1">
          {allProfiles.map((profile) => {
            const Icon = getExecutorIcon(profile.executorType);
            const profilePath = `/settings/executors/${profile.id}`;
            return (
              <SidebarMenuSubItem key={profile.id}>
                <SidebarMenuSubButton asChild size="sm" isActive={pathname === profilePath}>
                  <Link href={profilePath} className="!flex items-center gap-1.5">
                    <Icon className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
                    <span>{profile.name}</span>
                  </Link>
                </SidebarMenuSubButton>
              </SidebarMenuSubItem>
            );
          })}
        </SidebarMenuSub>
      )}
    </SidebarMenuItem>
  );
}

type SimpleSidebarEntry = {
  href: string;
  label: string;
  Icon: typeof IconBrandGithub;
};

/**
 * A short row of single-link sidebar entries (Automations, Prompts, Voice
 * Mode, Utility Agents, External MCP) — extracted from `SettingsAppSidebar`
 * so the parent function stays under the 100-line lint limit.
 */
function SimpleSidebarRows({
  pathname,
  entries,
}: {
  pathname: string;
  entries: SimpleSidebarEntry[];
}) {
  return (
    <>
      {entries.map(({ href, label, Icon }) => (
        <SidebarMenuItem key={href}>
          <SidebarMenuButton
            asChild
            isActive={
              href === "/settings/automations"
                ? pathname.includes("/automations")
                : pathname === href
            }
          >
            <Link href={href}>
              <Icon className="h-4 w-4" />
              <span>{label}</span>
            </Link>
          </SidebarMenuButton>
        </SidebarMenuItem>
      ))}
    </>
  );
}

function SecretsSidebarSection({ pathname }: { pathname: string }) {
  return (
    <SidebarMenuItem>
      <SidebarMenuButton asChild isActive={pathname === "/settings/general/secrets"}>
        <Link href="/settings/general/secrets">
          <IconKey className="h-4 w-4" />
          <span>Secrets</span>
        </Link>
      </SidebarMenuButton>
    </SidebarMenuItem>
  );
}

export function SettingsAppSidebar() {
  const pathname = usePathname();
  const { setOpenMobile, isMobile } = useSidebar();
  const workspaces = useAppStore((state) => state.workspaces.items);
  const executors = useAppStore((state) => state.executors.items);
  const agents = useAppStore((state) => state.settingsAgents.items);
  useAvailableAgents();

  // Close mobile sidebar when navigating to a new page
  useEffect(() => {
    if (isMobile) {
      setOpenMobile(false);
    }
  }, [pathname, isMobile, setOpenMobile]);

  return (
    <Sidebar variant="inset">
      <SidebarHeader className="h-16 justify-center">
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" asChild>
              <Link href="/">
                <span className="text-2xl font-bold">Kandev</span>
              </Link>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent className="overflow-hidden">
        <ScrollArea
          className="h-full [&_[data-slot=scroll-area-viewport]>div]:!block [&_[data-slot=scroll-area-viewport]>div]:!min-w-0"
          type="always"
        >
          <SidebarGroup>
            <SidebarGroupLabel>Settings</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                <GeneralSidebarSection pathname={pathname} />
                <WorkspacesSidebarSection pathname={pathname} workspaces={workspaces} />
                <IntegrationsSidebarSection pathname={pathname} />

                <SimpleSidebarRows
                  pathname={pathname}
                  entries={[
                    { href: "/settings/automations", label: "Automations", Icon: IconBolt },
                  ]}
                />
                <AgentsSidebarSection pathname={pathname} agents={agents} />
                <SimpleSidebarRows
                  pathname={pathname}
                  entries={[
                    { href: "/settings/prompts", label: "Prompts", Icon: IconMessageCircle },
                    { href: "/settings/voice-mode", label: "Voice Mode", Icon: IconMicrophone },
                    { href: "/settings/utility-agents", label: "Utility Agents", Icon: IconWand },
                  ]}
                />
                <ExecutorsSidebarSection pathname={pathname} executors={executors} />
                <SecretsSidebarSection pathname={pathname} />
                <SimpleSidebarRows
                  pathname={pathname}
                  entries={[
                    {
                      href: "/settings/external-mcp",
                      label: "External MCP",
                      Icon: IconPlugConnected,
                    },
                  ]}
                />

                {/* System */}
                <SystemSidebarSection pathname={pathname} />
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </ScrollArea>
      </SidebarContent>
    </Sidebar>
  );
}