Josh Knapp
7e1cc92aa4
Feature 1 - Update Detection: Query Gitea releases API on startup (3s
delay) and every 24h, compare patch versions by platform, show pulsing
"Update" button in TopBar with dialog for release notes/downloads.
Settings: auto-check toggle, manual check, dismiss per-version.
Feature 2 - Multi-Folder Projects: Replace single `path` with
`paths: Vec<ProjectPath>` (host_path + mount_name). Each folder mounts
to `/workspace/{mount_name}`. Auto-migrate old single-path JSON on load.
Container recreation via paths-fingerprint label. AddProjectDialog and
ProjectCard support add/remove/edit of multiple folders.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
83 lines
2.7 KiB
TypeScript
83 lines
2.7 KiB
TypeScript
import { useEffect } from "react";
|
|
import { useShallow } from "zustand/react/shallow";
|
|
import Sidebar from "./components/layout/Sidebar";
|
|
import TopBar from "./components/layout/TopBar";
|
|
import StatusBar from "./components/layout/StatusBar";
|
|
import TerminalView from "./components/terminal/TerminalView";
|
|
import { useDocker } from "./hooks/useDocker";
|
|
import { useSettings } from "./hooks/useSettings";
|
|
import { useProjects } from "./hooks/useProjects";
|
|
import { useUpdates } from "./hooks/useUpdates";
|
|
import { useAppState } from "./store/appState";
|
|
|
|
export default function App() {
|
|
const { checkDocker, checkImage } = useDocker();
|
|
const { checkApiKey, loadSettings } = useSettings();
|
|
const { refresh } = useProjects();
|
|
const { loadVersion, checkForUpdates, startPeriodicCheck } = useUpdates();
|
|
const { sessions, activeSessionId } = useAppState(
|
|
useShallow(s => ({ sessions: s.sessions, activeSessionId: s.activeSessionId }))
|
|
);
|
|
|
|
// Initialize on mount
|
|
useEffect(() => {
|
|
loadSettings();
|
|
checkDocker().then((available) => {
|
|
if (available) checkImage();
|
|
});
|
|
checkApiKey();
|
|
refresh();
|
|
|
|
// Update detection
|
|
loadVersion();
|
|
const updateTimer = setTimeout(() => checkForUpdates(), 3000);
|
|
const cleanup = startPeriodicCheck();
|
|
return () => {
|
|
clearTimeout(updateTimer);
|
|
cleanup?.();
|
|
};
|
|
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
return (
|
|
<div className="flex flex-col h-screen p-6 gap-4 bg-[var(--bg-primary)]">
|
|
<TopBar />
|
|
<div className="flex flex-1 min-h-0 gap-4">
|
|
<Sidebar />
|
|
<main className="flex-1 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg min-w-0 overflow-hidden">
|
|
{sessions.length === 0 ? (
|
|
<WelcomeScreen />
|
|
) : (
|
|
<div className="w-full h-full">
|
|
{sessions.map((session) => (
|
|
<TerminalView
|
|
key={session.id}
|
|
sessionId={session.id}
|
|
active={session.id === activeSessionId}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</main>
|
|
</div>
|
|
<StatusBar />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function WelcomeScreen() {
|
|
return (
|
|
<div className="flex items-center justify-center h-full text-[var(--text-secondary)]">
|
|
<div className="text-center">
|
|
<h1 className="text-3xl font-bold mb-2 text-[var(--text-primary)]">
|
|
Triple-C
|
|
</h1>
|
|
<p className="text-sm mb-4">Claude Code Container</p>
|
|
<p className="text-xs max-w-md">
|
|
Add a project from the sidebar, start its container, then open a
|
|
terminal to begin using Claude Code in a sandboxed environment.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|