- );
-}
-```
-
-**Layout**: Horizontal split — sidebar (left) + main area (right). Main area splits vertically — tab bar (top) + content (middle) + status bar (bottom).
-
----
-
-### 2.4 Sidebar
-
-Left navigation panel with host tree and quick actions.
-
-```typescript
-interface SidebarProps {
- width: number;
- onToggle: (open: boolean) => void;
-}
-
-function Sidebar({ width, onToggle }: SidebarProps) {
- const [searchQuery, setSearchQuery] = useState('');
- const groups = useHostStore(state => state.groups);
- const hosts = useHostStore(state => state.hosts);
-
- return (
-
- );
-}
-```
-
-**Width**: 240px default, resizable via drag handle (min 180px, max 400px).
-
----
-
-### 2.5 SearchBar
-
-```typescript
-interface SearchBarProps {
- value: string;
- onChange: (value: string) => void;
- placeholder?: string;
-}
-
-function SearchBar({ value, onChange, placeholder = "Search hosts..." }: SearchBarProps) {
- return (
-
+
+ User
+ {{.User}}
- );
-}
-```
-
----
-
-### 2.6 GroupTree
-
-Recursive tree component for host groups.
-
-```typescript
-interface GroupTreeProps {
- groups: HostGroup[];
- hosts: Host[];
- filter: string;
- parent_id?: string | null;
- depth?: number;
-}
-
-function GroupTree({ groups, hosts, filter, parent_id = null, depth = 0 }: GroupTreeProps) {
- const childGroups = groups.filter(g => g.parent_id === parent_id);
- const ungroupedHosts = hosts.filter(h => !h.group_id && !parent_id);
-
- return (
-
- {childGroups.map(group => (
-
- ))}
- {depth === 0 && }
-
- );
-}
-
-interface GroupItemProps {
- group: HostGroup;
- groups: HostGroup[];
- hosts: Host[];
- filter: string;
- depth: number;
-}
-
-function GroupItem({ group, groups, hosts, filter, depth }: GroupItemProps) {
- const [expanded, setExpanded] = useState(true);
- const groupHosts = hosts.filter(h => h.group_id === group.id);
- const color = group.color || '#888';
-
- return (
-
-
setExpanded(!expanded)}
- >
- {expanded ?
:
}
-
-
{group.name}
-
- {groupHosts.length}
-
-
- {expanded && (
-
- )}
-
- );
-}
-```
-
-**Features**:
-- Collapsible groups with chevron icon
-- Color dot for group color
-- Host count badge
-- Drag-and-drop: drag host onto group to reassign
-- Right-click: context menu (rename, delete, new sub-group)
-
----
-
-### 2.7 HostItem
-
-```typescript
-interface HostItemProps {
- host: Host;
- isActive?: boolean;
- onClick?: () => void;
-}
-
-function HostItem({ host, isActive, onClick }: HostItemProps) {
- const status = useTerminalStore(state => state.getSessionStatus(host.id));
-
- return (
-
-
-
- {host.name}
- {host.is_favorite && (
-
- )}
-
- );
-}
-
-function StatusDot({ status }: { status: string }) {
- const color = {
- connected: 'bg-green-500',
- connecting: 'bg-yellow-500',
- disconnected: 'bg-gray-500',
- error: 'bg-red-500'
- }[status] || 'bg-gray-500';
-
- return
;
-}
-```
-
----
-
-### 2.8 TabBar
-
-Horizontal tab bar for open terminals/SFTP sessions.
-
-```typescript
-function TabBar() {
- const { tabs, activeTab, addTab, closeTab, setActiveTab } = useTabStore();
-
- return (
-
- {tabs.map(tab => (
- setActiveTab(tab.id)}
- onClose={() => closeTab(tab.id)}
- />
- ))}
- addTab()} />
-
- );
-}
-
-interface TabProps {
- tab: Tab;
- isActive: boolean;
- onClick: () => void;
- onClose: () => void;
-}
-
-function Tab({ tab, isActive, onClick, onClose }: TabProps) {
- const status = useTerminalStore(state => state.getSessionStatus(tab.host_id));
-
- return (
-
-
-
{tab.title}
-
+ {{end}}
+