sync: Major UI updates from private repo (Jan 16-24)
Features synced: - UI Panels Refactor: flexible pane system with ChatPane, NodePane, DimensionsPane, WorkflowsPane, ViewsPane, MapPane - Source Content Reader: content type detection + 4 formatters (transcript, book, markdown, raw) - Source Content Search: Cmd+F search in Source Reader - Feed Layout Overhaul: LeftToolbar, SplitHandle, CollapsedRail - Map Panel: promoted to first-class pane - Edge policy simplification: auto-inference + direction correction New files: - src/components/panes/* (pane system) - src/components/layout/CollapsedRail.tsx - src/components/layout/LeftToolbar.tsx - src/components/layout/SplitHandle.tsx - src/components/focus/source/* (Source Reader + formatters) - src/components/views/ViewsOverlay.tsx Updated: - ThreePanelLayout.tsx (complete refactor) - FocusPanel.tsx (Source tab integration) - API routes (dimensions GET, edges auto-inference) - Database services (nodes, edges, dimensions) Dependencies added: - react-markdown - remark-gfm Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
“BeeRad”
co-authored by
Claude Opus 4.5
Claude Opus 4.5
parent
cea1df7f1f
commit
05523b7cb2
@@ -0,0 +1,231 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
import {
|
||||
Search,
|
||||
Plus,
|
||||
LayoutList,
|
||||
MessageSquare,
|
||||
Map,
|
||||
Folder,
|
||||
Workflow,
|
||||
Settings,
|
||||
} from 'lucide-react';
|
||||
import type { PaneType } from '../panes/types';
|
||||
|
||||
interface LeftToolbarProps {
|
||||
onSearchClick: () => void;
|
||||
onAddStuffClick: () => void;
|
||||
onSettingsClick: () => void;
|
||||
onPaneTypeClick: (paneType: PaneType) => void;
|
||||
activePane: 'A' | 'B';
|
||||
slotAType: PaneType | null;
|
||||
slotBType: PaneType | null;
|
||||
}
|
||||
|
||||
// Map pane types to their icons
|
||||
const PANE_TYPE_ICONS: Record<string, typeof LayoutList> = {
|
||||
views: LayoutList,
|
||||
chat: MessageSquare,
|
||||
map: Map,
|
||||
dimensions: Folder,
|
||||
workflows: Workflow,
|
||||
};
|
||||
|
||||
const PANE_TYPE_LABELS: Record<string, string> = {
|
||||
views: 'Feed',
|
||||
chat: 'Chat',
|
||||
map: 'Map',
|
||||
dimensions: 'Dimensions',
|
||||
workflows: 'Workflows',
|
||||
};
|
||||
|
||||
// Pane types shown in the toolbar (excludes 'node' which is opened via Feed)
|
||||
const TOOLBAR_PANE_TYPES: PaneType[] = ['views', 'chat', 'map', 'dimensions', 'workflows'];
|
||||
|
||||
interface ToolbarButtonProps {
|
||||
icon: typeof Search;
|
||||
label: string;
|
||||
shortcut?: string;
|
||||
onClick: () => void;
|
||||
disabled?: boolean;
|
||||
isActive?: boolean;
|
||||
}
|
||||
|
||||
function ToolbarButton({ icon: Icon, label, shortcut, onClick, disabled, isActive }: ToolbarButtonProps) {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
title={shortcut ? `${label} (${shortcut})` : label}
|
||||
style={{
|
||||
width: '36px',
|
||||
height: '36px',
|
||||
borderRadius: '8px',
|
||||
border: 'none',
|
||||
background: isHovered ? '#1a1a1a' : 'transparent',
|
||||
color: isActive ? '#22c55e' : (isHovered ? '#aaa' : '#666'),
|
||||
cursor: disabled ? 'not-allowed' : 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
transition: 'all 0.15s ease',
|
||||
opacity: disabled ? 0.5 : 1,
|
||||
}}
|
||||
>
|
||||
<Icon size={18} />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
interface PaneTypeButtonProps {
|
||||
icon: typeof LayoutList;
|
||||
label: string;
|
||||
paneType: PaneType;
|
||||
isOpen: boolean;
|
||||
isActivePane: boolean;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
function PaneTypeButton({ icon: Icon, label, paneType, isOpen, isActivePane, onClick }: PaneTypeButtonProps) {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
// Determine color: green if open, brighter if it's the active pane
|
||||
const getColor = () => {
|
||||
if (isOpen) {
|
||||
return isActivePane ? '#4ade80' : '#22c55e'; // Brighter green for active
|
||||
}
|
||||
return isHovered ? '#aaa' : '#666';
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
title={label}
|
||||
style={{
|
||||
width: '36px',
|
||||
height: '36px',
|
||||
borderRadius: '8px',
|
||||
border: 'none',
|
||||
background: isOpen ? '#1a1a1a' : (isHovered ? '#151515' : 'transparent'),
|
||||
color: getColor(),
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
transition: 'all 0.15s ease',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<Icon size={18} />
|
||||
{/* Active pane indicator dot */}
|
||||
{isActivePane && isOpen && (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: '4px',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
width: '4px',
|
||||
height: '4px',
|
||||
borderRadius: '50%',
|
||||
background: '#4ade80',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export default function LeftToolbar({
|
||||
onSearchClick,
|
||||
onAddStuffClick,
|
||||
onSettingsClick,
|
||||
onPaneTypeClick,
|
||||
activePane,
|
||||
slotAType,
|
||||
slotBType,
|
||||
}: LeftToolbarProps) {
|
||||
// Determine which pane types are currently open
|
||||
const openPaneTypes = new Set<PaneType>(
|
||||
[slotAType, slotBType].filter((t): t is PaneType => t !== null)
|
||||
);
|
||||
|
||||
// Determine which pane type is in the active pane (null if pane is closed)
|
||||
const activePaneType = activePane === 'A' ? slotAType : slotBType;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: '50px',
|
||||
height: '100%',
|
||||
background: '#0a0a0a',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
padding: '12px 0',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{/* Top section - Actions */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
|
||||
<ToolbarButton
|
||||
icon={Search}
|
||||
label="Search"
|
||||
shortcut="⌘K"
|
||||
onClick={onSearchClick}
|
||||
/>
|
||||
<ToolbarButton
|
||||
icon={Plus}
|
||||
label="Add Stuff"
|
||||
onClick={onAddStuffClick}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Middle section - Pane Types */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: '4px',
|
||||
padding: '8px 0',
|
||||
}}
|
||||
>
|
||||
{TOOLBAR_PANE_TYPES.map((paneType) => {
|
||||
const Icon = PANE_TYPE_ICONS[paneType];
|
||||
const label = PANE_TYPE_LABELS[paneType];
|
||||
const isOpen = openPaneTypes.has(paneType);
|
||||
const isActivePane = activePaneType === paneType;
|
||||
|
||||
return (
|
||||
<PaneTypeButton
|
||||
key={paneType}
|
||||
icon={Icon}
|
||||
label={label}
|
||||
paneType={paneType}
|
||||
isOpen={isOpen}
|
||||
isActivePane={isActivePane}
|
||||
onClick={() => onPaneTypeClick(paneType)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Bottom section - Settings */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
||||
<ToolbarButton
|
||||
icon={Settings}
|
||||
label="Settings"
|
||||
onClick={onSettingsClick}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user