87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import type { BeadIssue } from '../../lib/types';
|
||
|
|
import type { ProjectScopeOption } from '../../lib/project-scope';
|
||
|
|
import { TopBar } from './top-bar';
|
||
|
|
import { LeftPanel } from './left-panel';
|
||
|
|
import { RightPanel } from './right-panel';
|
||
|
|
import { MobileNav } from './mobile-nav';
|
||
|
|
import { useUrlState } from '../../hooks/use-url-state';
|
||
|
|
import { GraphView } from '../graph/graph-view';
|
||
|
|
|
||
|
|
export interface UnifiedShellProps {
|
||
|
|
issues: BeadIssue[];
|
||
|
|
projectRoot: string;
|
||
|
|
projectScopeKey: string;
|
||
|
|
projectScopeOptions: ProjectScopeOption[];
|
||
|
|
projectScopeMode: 'single' | 'aggregate';
|
||
|
|
}
|
||
|
|
|
||
|
|
export function UnifiedShell({
|
||
|
|
issues,
|
||
|
|
}: UnifiedShellProps) {
|
||
|
|
const { view, taskId, setTaskId, graphTab, setGraphTab, panel } = useUrlState();
|
||
|
|
|
||
|
|
const handleGraphSelect = (id: string) => {
|
||
|
|
setTaskId(id);
|
||
|
|
};
|
||
|
|
|
||
|
|
const renderMiddleContent = () => {
|
||
|
|
if (view === 'graph') {
|
||
|
|
return (
|
||
|
|
<GraphView
|
||
|
|
beads={issues}
|
||
|
|
selectedId={taskId ?? undefined}
|
||
|
|
onSelect={handleGraphSelect}
|
||
|
|
graphTab={graphTab}
|
||
|
|
onGraphTabChange={setGraphTab}
|
||
|
|
hideClosed={false}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="p-4" style={{ color: 'var(--color-text-secondary)' }}>
|
||
|
|
<div className="mb-4">
|
||
|
|
<h2 className="text-lg font-semibold" style={{ color: 'var(--color-text-primary)' }}>
|
||
|
|
{view === 'social' && 'Social View'}
|
||
|
|
{view === 'swarm' && 'Swarm View'}
|
||
|
|
</h2>
|
||
|
|
<p className="text-sm mt-2">
|
||
|
|
{view === 'social' && 'Activity feed with blocks/unlocks coming soon'}
|
||
|
|
{view === 'swarm' && 'Team health dashboard coming soon'}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col h-screen" style={{ backgroundColor: 'var(--color-bg-base)' }} data-testid="unified-shell">
|
||
|
|
{/* TOP BAR: 3rem fixed */}
|
||
|
|
<TopBar />
|
||
|
|
|
||
|
|
{/* MAIN AREA: CSS Grid [13rem | 1fr | 17rem] */}
|
||
|
|
<div
|
||
|
|
className="flex-1 grid overflow-hidden"
|
||
|
|
style={{ gridTemplateColumns: '13rem 1fr 17rem' }}
|
||
|
|
data-testid="main-area"
|
||
|
|
>
|
||
|
|
{/* LEFT PANEL: 13rem channel tree */}
|
||
|
|
<LeftPanel issues={issues} />
|
||
|
|
|
||
|
|
{/* MIDDLE CONTENT: flex-1 */}
|
||
|
|
<div className="overflow-y-auto" data-testid="middle-content">
|
||
|
|
{renderMiddleContent()}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* RIGHT PANEL: 17rem detail strip */}
|
||
|
|
<RightPanel isOpen={panel === 'open'} />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* MOBILE NAV: Bottom tab bar */}
|
||
|
|
<MobileNav />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|