mirror of
https://github.com/davidkaya/aryx.git
synced 2026-07-24 21:48:36 +02:00
David KayaandCopilot
fb3e80ec47
Replace the narrow 256px sidebar git section with a shared tabbed bottom panel that hosts both Terminal and Git as peer tabs. This gives git operations full horizontal width for file paths, diff previews, branch lists, and commit history. - Create BottomPanel with shared resize handle, tab bar, and content switching (terminal stays mounted via CSS visibility when inactive) - Simplify TerminalPanel by extracting resize/close to BottomPanel - Add InlineGitPill toggle in composer footer next to Terminal pill - Wire tab switching: clicking active tab closes panel, clicking inactive tab switches to it - Remove GitPanel from ActivityPanel sidebar - Update ARCHITECTURE.md to describe tabbed bottom panel layout Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
interface AppShellProps {
|
|
sidebar: ReactNode;
|
|
content: ReactNode;
|
|
detailPanel?: ReactNode;
|
|
bottomPanel?: ReactNode;
|
|
overlay?: ReactNode;
|
|
}
|
|
|
|
export function AppShell({ sidebar, content, detailPanel, bottomPanel, overlay }: AppShellProps) {
|
|
return (
|
|
<div className="relative flex h-screen bg-[var(--color-surface-0)] text-[var(--color-text-primary)]">
|
|
{/* Full-width drag region matching the title bar overlay height */}
|
|
<div className="drag-region absolute inset-x-0 top-0 z-10 h-3" />
|
|
|
|
{/* Sidebar */}
|
|
<aside className="flex w-72 shrink-0 flex-col border-r border-[var(--color-border-subtle)] bg-[var(--color-surface-1)]">
|
|
{sidebar}
|
|
</aside>
|
|
|
|
{/* Main content + bottom panel */}
|
|
<main className="relative flex min-w-0 flex-1 flex-col">
|
|
{/* Ambient glow behind active content area */}
|
|
<div
|
|
className="pointer-events-none absolute inset-0 opacity-30"
|
|
style={{ background: 'var(--gradient-glow)' }}
|
|
/>
|
|
<div className="relative min-h-0 flex-1">{content}</div>
|
|
{bottomPanel}
|
|
</main>
|
|
|
|
{/* Detail panel */}
|
|
{detailPanel && (
|
|
<aside className="flex w-64 shrink-0 flex-col border-l border-[var(--color-border-subtle)] bg-[var(--color-surface-1)]">
|
|
{detailPanel}
|
|
</aside>
|
|
)}
|
|
|
|
{overlay}
|
|
</div>
|
|
);
|
|
}
|