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:
Vivek R
225
src/App.tsx
225
src/App.tsx
@@ -3,6 +3,7 @@ import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Plus, Loader2, Bot, FolderCode } from "lucide-react";
|
||||
import { api, type Project, type Session, type ClaudeMdFile } from "@/lib/api";
|
||||
import { OutputCacheProvider } from "@/lib/outputCache";
|
||||
import { TabProvider } from "@/contexts/TabContext";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { ProjectList } from "@/components/ProjectList";
|
||||
@@ -13,20 +14,22 @@ import { MarkdownEditor } from "@/components/MarkdownEditor";
|
||||
import { ClaudeFileEditor } from "@/components/ClaudeFileEditor";
|
||||
import { Settings } from "@/components/Settings";
|
||||
import { CCAgents } from "@/components/CCAgents";
|
||||
import { ClaudeCodeSession } from "@/components/ClaudeCodeSession";
|
||||
import { UsageDashboard } from "@/components/UsageDashboard";
|
||||
import { MCPManager } from "@/components/MCPManager";
|
||||
import { NFOCredits } from "@/components/NFOCredits";
|
||||
import { ClaudeBinaryDialog } from "@/components/ClaudeBinaryDialog";
|
||||
import { Toast, ToastContainer } from "@/components/ui/toast";
|
||||
import { ProjectSettings } from '@/components/ProjectSettings';
|
||||
import { TabManager } from "@/components/TabManager";
|
||||
import { TabContent } from "@/components/TabContent";
|
||||
import { AgentsModal } from "@/components/AgentsModal";
|
||||
import { useTabState } from "@/hooks/useTabState";
|
||||
|
||||
type View =
|
||||
| "welcome"
|
||||
| "projects"
|
||||
| "editor"
|
||||
| "claude-file-editor"
|
||||
| "claude-code-session"
|
||||
| "settings"
|
||||
| "cc-agents"
|
||||
| "create-agent"
|
||||
@@ -35,27 +38,27 @@ type View =
|
||||
| "agent-run-view"
|
||||
| "mcp"
|
||||
| "usage-dashboard"
|
||||
| "project-settings";
|
||||
| "project-settings"
|
||||
| "tabs"; // New view for tab-based interface
|
||||
|
||||
/**
|
||||
* Main App component - Manages the Claude directory browser UI
|
||||
* AppContent component - Contains the main app logic, wrapped by providers
|
||||
*/
|
||||
function App() {
|
||||
const [view, setView] = useState<View>("welcome");
|
||||
function AppContent() {
|
||||
const [view, setView] = useState<View>("tabs");
|
||||
const { createClaudeMdTab, createSettingsTab, createUsageTab, createMCPTab } = useTabState();
|
||||
const [projects, setProjects] = useState<Project[]>([]);
|
||||
const [selectedProject, setSelectedProject] = useState<Project | null>(null);
|
||||
const [sessions, setSessions] = useState<Session[]>([]);
|
||||
const [editingClaudeFile, setEditingClaudeFile] = useState<ClaudeMdFile | null>(null);
|
||||
const [selectedSession, setSelectedSession] = useState<Session | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [showNFO, setShowNFO] = useState(false);
|
||||
const [showClaudeBinaryDialog, setShowClaudeBinaryDialog] = useState(false);
|
||||
const [toast, setToast] = useState<{ message: string; type: "success" | "error" | "info" } | null>(null);
|
||||
const [activeClaudeSessionId, setActiveClaudeSessionId] = useState<string | null>(null);
|
||||
const [isClaudeStreaming, setIsClaudeStreaming] = useState(false);
|
||||
const [projectForSettings, setProjectForSettings] = useState<Project | null>(null);
|
||||
const [previousView, setPreviousView] = useState<View>("welcome");
|
||||
const [previousView] = useState<View>("welcome");
|
||||
const [showAgentsModal, setShowAgentsModal] = useState(false);
|
||||
|
||||
// Load projects on mount when in projects view
|
||||
useEffect(() => {
|
||||
@@ -67,22 +70,56 @@ function App() {
|
||||
}
|
||||
}, [view]);
|
||||
|
||||
// Listen for Claude session selection events
|
||||
// Keyboard shortcuts for tab navigation
|
||||
useEffect(() => {
|
||||
const handleSessionSelected = (event: CustomEvent) => {
|
||||
const { session } = event.detail;
|
||||
setSelectedSession(session);
|
||||
handleViewChange("claude-code-session");
|
||||
if (view !== "tabs") return;
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
|
||||
const modKey = isMac ? e.metaKey : e.ctrlKey;
|
||||
|
||||
if (modKey) {
|
||||
switch (e.key) {
|
||||
case 't':
|
||||
e.preventDefault();
|
||||
window.dispatchEvent(new CustomEvent('create-chat-tab'));
|
||||
break;
|
||||
case 'w':
|
||||
e.preventDefault();
|
||||
window.dispatchEvent(new CustomEvent('close-current-tab'));
|
||||
break;
|
||||
case 'Tab':
|
||||
e.preventDefault();
|
||||
if (e.shiftKey) {
|
||||
window.dispatchEvent(new CustomEvent('switch-to-previous-tab'));
|
||||
} else {
|
||||
window.dispatchEvent(new CustomEvent('switch-to-next-tab'));
|
||||
}
|
||||
break;
|
||||
default:
|
||||
// Handle number keys 1-9
|
||||
if (e.key >= '1' && e.key <= '9') {
|
||||
e.preventDefault();
|
||||
const index = parseInt(e.key) - 1;
|
||||
window.dispatchEvent(new CustomEvent('switch-to-tab-by-index', { detail: { index } }));
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [view]);
|
||||
|
||||
// Listen for Claude not found events
|
||||
useEffect(() => {
|
||||
const handleClaudeNotFound = () => {
|
||||
setShowClaudeBinaryDialog(true);
|
||||
};
|
||||
|
||||
window.addEventListener('claude-session-selected', handleSessionSelected as EventListener);
|
||||
window.addEventListener('claude-not-found', handleClaudeNotFound as EventListener);
|
||||
return () => {
|
||||
window.removeEventListener('claude-session-selected', handleSessionSelected as EventListener);
|
||||
window.removeEventListener('claude-not-found', handleClaudeNotFound as EventListener);
|
||||
};
|
||||
}, []);
|
||||
@@ -126,8 +163,8 @@ function App() {
|
||||
* Opens a new Claude Code session in the interactive UI
|
||||
*/
|
||||
const handleNewSession = async () => {
|
||||
handleViewChange("claude-code-session");
|
||||
setSelectedSession(null);
|
||||
handleViewChange("tabs");
|
||||
// The tab system will handle creating a new chat tab
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -158,19 +195,7 @@ function App() {
|
||||
* Handles view changes with navigation protection
|
||||
*/
|
||||
const handleViewChange = (newView: View) => {
|
||||
// Check if we're navigating away from an active Claude session
|
||||
if (view === "claude-code-session" && isClaudeStreaming && activeClaudeSessionId) {
|
||||
const shouldLeave = window.confirm(
|
||||
"Claude is still responding. If you navigate away, Claude will continue running in the background.\n\n" +
|
||||
"You can return to this session from the Projects view.\n\n" +
|
||||
"Do you want to continue?"
|
||||
);
|
||||
|
||||
if (!shouldLeave) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// No need for navigation protection with tabs since sessions stay open
|
||||
setView(newView);
|
||||
};
|
||||
|
||||
@@ -182,22 +207,6 @@ function App() {
|
||||
handleViewChange("project-settings");
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles navigating to hooks configuration from a project path
|
||||
*/
|
||||
const handleProjectSettingsFromPath = (projectPath: string) => {
|
||||
// Create a temporary project object from the path
|
||||
const projectId = projectPath.replace(/[^a-zA-Z0-9]/g, '-');
|
||||
const tempProject: Project = {
|
||||
id: projectId,
|
||||
path: projectPath,
|
||||
sessions: [],
|
||||
created_at: Date.now() / 1000
|
||||
};
|
||||
setProjectForSettings(tempProject);
|
||||
setPreviousView(view);
|
||||
handleViewChange("project-settings");
|
||||
};
|
||||
|
||||
const renderContent = () => {
|
||||
switch (view) {
|
||||
@@ -403,20 +412,14 @@ function App() {
|
||||
/>
|
||||
) : null;
|
||||
|
||||
case "claude-code-session":
|
||||
case "tabs":
|
||||
return (
|
||||
<ClaudeCodeSession
|
||||
session={selectedSession || undefined}
|
||||
onBack={() => {
|
||||
setSelectedSession(null);
|
||||
handleViewChange("projects");
|
||||
}}
|
||||
onStreamingChange={(isStreaming, sessionId) => {
|
||||
setIsClaudeStreaming(isStreaming);
|
||||
setActiveClaudeSessionId(sessionId);
|
||||
}}
|
||||
onProjectSettings={handleProjectSettingsFromPath}
|
||||
/>
|
||||
<div className="h-full flex flex-col">
|
||||
<TabManager className="flex-shrink-0" />
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<TabContent />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case "usage-dashboard":
|
||||
@@ -449,48 +452,66 @@ function App() {
|
||||
};
|
||||
|
||||
return (
|
||||
<OutputCacheProvider>
|
||||
<div className="h-screen bg-background flex flex-col">
|
||||
{/* Topbar */}
|
||||
<Topbar
|
||||
onClaudeClick={() => handleViewChange("editor")}
|
||||
onSettingsClick={() => handleViewChange("settings")}
|
||||
onUsageClick={() => handleViewChange("usage-dashboard")}
|
||||
onMCPClick={() => handleViewChange("mcp")}
|
||||
onInfoClick={() => setShowNFO(true)}
|
||||
/>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{renderContent()}
|
||||
</div>
|
||||
|
||||
{/* NFO Credits Modal */}
|
||||
{showNFO && <NFOCredits onClose={() => setShowNFO(false)} />}
|
||||
|
||||
{/* Claude Binary Dialog */}
|
||||
<ClaudeBinaryDialog
|
||||
open={showClaudeBinaryDialog}
|
||||
onOpenChange={setShowClaudeBinaryDialog}
|
||||
onSuccess={() => {
|
||||
setToast({ message: "Claude binary path saved successfully", type: "success" });
|
||||
// Trigger a refresh of the Claude version check
|
||||
window.location.reload();
|
||||
}}
|
||||
onError={(message) => setToast({ message, type: "error" })}
|
||||
/>
|
||||
|
||||
{/* Toast Container */}
|
||||
<ToastContainer>
|
||||
{toast && (
|
||||
<Toast
|
||||
message={toast.message}
|
||||
type={toast.type}
|
||||
onDismiss={() => setToast(null)}
|
||||
/>
|
||||
)}
|
||||
</ToastContainer>
|
||||
<div className="h-screen bg-background flex flex-col">
|
||||
{/* Topbar */}
|
||||
<Topbar
|
||||
onClaudeClick={() => createClaudeMdTab()}
|
||||
onSettingsClick={() => createSettingsTab()}
|
||||
onUsageClick={() => createUsageTab()}
|
||||
onMCPClick={() => createMCPTab()}
|
||||
onInfoClick={() => setShowNFO(true)}
|
||||
onAgentsClick={() => setShowAgentsModal(true)}
|
||||
/>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
{renderContent()}
|
||||
</div>
|
||||
|
||||
{/* NFO Credits Modal */}
|
||||
{showNFO && <NFOCredits onClose={() => setShowNFO(false)} />}
|
||||
|
||||
{/* Agents Modal */}
|
||||
<AgentsModal
|
||||
open={showAgentsModal}
|
||||
onOpenChange={setShowAgentsModal}
|
||||
/>
|
||||
|
||||
{/* Claude Binary Dialog */}
|
||||
<ClaudeBinaryDialog
|
||||
open={showClaudeBinaryDialog}
|
||||
onOpenChange={setShowClaudeBinaryDialog}
|
||||
onSuccess={() => {
|
||||
setToast({ message: "Claude binary path saved successfully", type: "success" });
|
||||
// Trigger a refresh of the Claude version check
|
||||
window.location.reload();
|
||||
}}
|
||||
onError={(message) => setToast({ message, type: "error" })}
|
||||
/>
|
||||
|
||||
{/* Toast Container */}
|
||||
<ToastContainer>
|
||||
{toast && (
|
||||
<Toast
|
||||
message={toast.message}
|
||||
type={toast.type}
|
||||
onDismiss={() => setToast(null)}
|
||||
/>
|
||||
)}
|
||||
</ToastContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Main App component - Wraps the app with providers
|
||||
*/
|
||||
function App() {
|
||||
return (
|
||||
<OutputCacheProvider>
|
||||
<TabProvider>
|
||||
<AppContent />
|
||||
</TabProvider>
|
||||
</OutputCacheProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user