import { useCallback, useEffect, useMemo, useState } from "react";
import {
Activity,
Bot,
Clock,
Folder,
GitBranch,
LayoutGrid,
Lightbulb,
Mail,
MoreHorizontal,
Settings,
Target,
Terminal,
Workflow,
} from "lucide-react";
import { useViewportMode } from "./Header";
export interface MobileNavBarProps {
/** Current task view mode */
view: "board" | "list" | "agents";
/** Change task view handler */
onChangeView: (view: "board" | "list" | "agents") => void;
/** Whether the ExecutorStatusBar footer is visible */
footerVisible: boolean;
/** Whether any full-screen modal is currently open (hides the tab bar) */
modalOpen?: boolean;
// Navigation handlers
onOpenSettings?: () => void;
onOpenActivityLog?: () => void;
onOpenMailbox?: () => void;
mailboxUnreadCount?: number;
onOpenGitManager?: () => void;
onOpenWorkflowSteps?: () => void;
onOpenMissions?: () => void;
onOpenSchedules?: () => void;
onOpenScripts?: () => void;
onToggleTerminal?: () => void;
onOpenFiles?: () => void;
onOpenGitHubImport?: () => void;
onOpenPlanning?: () => void;
onResumePlanning?: () => void;
activePlanningSessionCount?: number;
onOpenUsage?: () => void;
onRunScript?: (name: string, command: string) => void;
projectId?: string;
}
function GitHubLogo({ size = 20 }: { size?: number }) {
return (
);
}
function formatCount(count: number): string {
return count > 99 ? "99+" : String(count);
}
export function MobileNavBar({
view,
onChangeView,
footerVisible,
modalOpen = false,
onOpenSettings,
onOpenActivityLog,
onOpenMailbox,
mailboxUnreadCount = 0,
onOpenGitManager,
onOpenWorkflowSteps,
onOpenMissions,
onOpenSchedules,
onToggleTerminal,
onOpenFiles,
onOpenGitHubImport,
onOpenPlanning,
onResumePlanning,
activePlanningSessionCount = 0,
onOpenUsage,
}: MobileNavBarProps) {
const mode = useViewportMode();
const [isMoreOpen, setIsMoreOpen] = useState(false);
const combinedCount = useMemo(
() => activePlanningSessionCount + mailboxUnreadCount,
[activePlanningSessionCount, mailboxUnreadCount],
);
const closeMore = useCallback(() => setIsMoreOpen(false), []);
const handleMoreAction = useCallback(
(callback?: () => void) => {
closeMore();
callback?.();
},
[closeMore],
);
useEffect(() => {
if (!isMoreOpen) return;
const onKeyDown = (event: KeyboardEvent) => {
if (event.key === "Escape") {
setIsMoreOpen(false);
}
};
document.addEventListener("keydown", onKeyDown);
return () => document.removeEventListener("keydown", onKeyDown);
}, [isMoreOpen]);
if (mode !== "mobile" || modalOpen) {
return null;
}
const boardTabLabel = view === "list" ? "List" : "Board";
const isBoardOrList = view === "board" || view === "list";
const planningHandler = activePlanningSessionCount > 0 && onResumePlanning ? onResumePlanning : onOpenPlanning;
return (
<>
{isMoreOpen && (
<>
Navigate
)}
);
}