kandev/apps/web/components/task/mobile/session-mobile-bottom-nav.tsx

"use client";

import { useMemo } from "react";
import {
  IconMessage,
  IconListCheck,
  IconGitBranch,
  IconFolder,
  IconTerminal2,
} from "@tabler/icons-react";
import { cn } from "@/lib/utils";
import { Badge } from "@kandev/ui/badge";
import type { MobileSessionPanel } from "@/lib/state/slices/ui/types";

type SessionMobileBottomNavProps = {
  activePanel: MobileSessionPanel;
  onPanelChange: (panel: MobileSessionPanel) => void;
  planBadge?: boolean;
  changesBadge?: number;
};

type NavItem = {
  id: MobileSessionPanel;
  label: string;
  icon: React.ReactNode;
  badge?: React.ReactNode;
};

export function SessionMobileBottomNav({
  activePanel,
  onPanelChange,
  planBadge = false,
  changesBadge = 0,
}: SessionMobileBottomNavProps) {
  const items: NavItem[] = useMemo(
    () => [
      {
        id: "chat",
        label: "Chat",
        icon: <IconMessage className="h-5 w-5" />,
      },
      {
        id: "plan",
        label: "Plan",
        icon: <IconListCheck className="h-5 w-5" />,
        badge: planBadge ? (
          <span className="absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-amber-500" />
        ) : undefined,
      },
      {
        id: "changes",
        label: "Changes",
        icon: <IconGitBranch className="h-5 w-5" />,
        badge:
          changesBadge > 0 ? (
            <Badge
              variant="secondary"
              className="absolute -top-1 -right-2 h-4 min-w-4 px-1 text-[10px]"
            >
              {changesBadge > 99 ? "99+" : changesBadge}
            </Badge>
          ) : undefined,
      },
      {
        id: "files",
        label: "Files",
        icon: <IconFolder className="h-5 w-5" />,
      },
      {
        id: "terminal",
        label: "Terminal",
        icon: <IconTerminal2 className="h-5 w-5" />,
      },
    ],
    [planBadge, changesBadge],
  );

  return (
    <nav
      className="fixed bottom-0 left-0 right-0 z-40 flex items-center justify-around border-t border-border bg-background"
      style={{ paddingBottom: "env(safe-area-inset-bottom, 0px)" }}
    >
      {items.map((item) => (
        <button
          key={item.id}
          type="button"
          onClick={() => onPanelChange(item.id)}
          className={cn(
            "flex flex-col items-center justify-center py-2 px-3 gap-0.5 min-w-0 flex-1 transition-colors",
            activePanel === item.id
              ? "text-primary"
              : "text-muted-foreground hover:text-foreground",
          )}
        >
          <span className="relative">
            {item.icon}
            {item.badge}
          </span>
          <span className="text-[10px] font-medium truncate">{item.label}</span>
        </button>
      ))}
    </nav>
  );
}