feat: implement comprehensive tabbed interface system
- Add TabContext and useTabState for centralized tab management - Create TabManager component with drag-and-drop reordering - Implement TabContent component for dynamic content rendering - Add AgentsModal for enhanced agent management interface - Integrate tab system into main App component - Update existing components to work with new tab architecture - Support multiple tab types: chat, agent, projects, usage, mcp, settings - Add tab status tracking and unsaved changes detection - Implement smooth animations and modern UI interactions
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Circle, FileText, Settings, ExternalLink, BarChart3, Network, Info } from "lucide-react";
|
||||
import { Circle, FileText, Settings, ExternalLink, BarChart3, Network, Info, Bot } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Popover } from "@/components/ui/popover";
|
||||
import { api, type ClaudeVersionStatus } from "@/lib/api";
|
||||
@@ -27,6 +27,10 @@ interface TopbarProps {
|
||||
* Callback when Info is clicked
|
||||
*/
|
||||
onInfoClick: () => void;
|
||||
/**
|
||||
* Callback when Agents is clicked
|
||||
*/
|
||||
onAgentsClick?: () => void;
|
||||
/**
|
||||
* Optional className for styling
|
||||
*/
|
||||
@@ -50,6 +54,7 @@ export const Topbar: React.FC<TopbarProps> = ({
|
||||
onUsageClick,
|
||||
onMCPClick,
|
||||
onInfoClick,
|
||||
onAgentsClick,
|
||||
className,
|
||||
}) => {
|
||||
const [versionStatus, setVersionStatus] = useState<ClaudeVersionStatus | null>(null);
|
||||
@@ -173,6 +178,18 @@ export const Topbar: React.FC<TopbarProps> = ({
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center space-x-2">
|
||||
{onAgentsClick && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onAgentsClick}
|
||||
className="text-xs"
|
||||
>
|
||||
<Bot className="mr-2 h-3 w-3" />
|
||||
Agents
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
|
||||
Reference in New Issue
Block a user