77 lines
2.1 KiB
TypeScript
77 lines
2.1 KiB
TypeScript
import type { CSSProperties } from 'hono/jsx'
|
|
import {
|
|
apps,
|
|
selectedApp,
|
|
setSelectedApp,
|
|
setSidebarSection,
|
|
sidebarSection,
|
|
} from '../state'
|
|
import {
|
|
AppItem,
|
|
AppList,
|
|
SectionSwitcher,
|
|
SectionTab,
|
|
StatusDot,
|
|
} from '../styles'
|
|
|
|
interface AppSelectorProps {
|
|
render: () => void
|
|
onSelect?: () => void
|
|
collapsed?: boolean
|
|
switcherStyle?: CSSProperties
|
|
listStyle?: CSSProperties
|
|
}
|
|
|
|
export function AppSelector({ render, onSelect, collapsed, switcherStyle, listStyle }: AppSelectorProps) {
|
|
const selectApp = (name: string) => {
|
|
setSelectedApp(name)
|
|
onSelect?.()
|
|
render()
|
|
}
|
|
|
|
const switchSection = (section: 'apps' | 'tools') => {
|
|
setSidebarSection(section)
|
|
render()
|
|
}
|
|
|
|
const regularApps = apps.filter(app => !app.tool)
|
|
const toolApps = apps.filter(app => app.tool)
|
|
const activeApps = sidebarSection === 'apps' ? regularApps : toolApps
|
|
|
|
return (
|
|
<>
|
|
{!collapsed && toolApps.length > 0 && (
|
|
<SectionSwitcher style={switcherStyle}>
|
|
<SectionTab active={sidebarSection === 'apps' ? true : undefined} onClick={() => switchSection('apps')}>
|
|
Apps
|
|
</SectionTab>
|
|
<SectionTab active={sidebarSection === 'tools' ? true : undefined} onClick={() => switchSection('tools')}>
|
|
Tools
|
|
</SectionTab>
|
|
</SectionSwitcher>
|
|
)}
|
|
<AppList style={listStyle}>
|
|
{activeApps.map(app => (
|
|
<AppItem
|
|
key={app.name}
|
|
onClick={() => selectApp(app.name)}
|
|
selected={app.name === selectedApp ? true : undefined}
|
|
style={collapsed ? { justifyContent: 'center', padding: '10px 12px' } : undefined}
|
|
title={collapsed ? app.name : undefined}
|
|
>
|
|
{collapsed ? (
|
|
<span style={{ fontSize: 18 }}>{app.icon}</span>
|
|
) : (
|
|
<>
|
|
<span style={{ fontSize: 14 }}>{app.icon}</span>
|
|
{app.name}
|
|
<StatusDot state={app.state} data-app={app.name} data-state={app.state} style={{ marginLeft: 'auto' }} />
|
|
</>
|
|
)}
|
|
</AppItem>
|
|
))}
|
|
</AppList>
|
|
</>
|
|
)
|
|
}
|