Adds first version of the app. Local storage only.
This commit is contained in:
@@ -0,0 +1,208 @@
|
||||
import { useMemo, useState } from 'react'
|
||||
import { allDeviceCategories, allDeviceTemplates, hiddenBuiltInDeviceTemplates } from '../../domain/project'
|
||||
import type { DeviceTemplate } from '../../domain/types'
|
||||
import { useProjectStore } from '../../state/projectStore'
|
||||
import { TEMPLATE_DRAG_MIME } from '../canvas/FlowCanvas'
|
||||
import ConnectorLibraryModal from './ConnectorLibraryModal'
|
||||
import DeviceTemplateEditor from './DeviceTemplateEditor'
|
||||
|
||||
export default function DevicePalette() {
|
||||
const project = useProjectStore((s) => s.project)
|
||||
const addDeviceFromTemplate = useProjectStore((s) => s.addDeviceFromTemplate)
|
||||
const removeCustomDeviceTemplate = useProjectStore((s) => s.removeCustomDeviceTemplate)
|
||||
const hideBuiltInDeviceTemplate = useProjectStore((s) => s.hideBuiltInDeviceTemplate)
|
||||
const restoreBuiltInDeviceTemplate = useProjectStore((s) => s.restoreBuiltInDeviceTemplate)
|
||||
const [editorTarget, setEditorTarget] = useState<'new' | DeviceTemplate | null>(null)
|
||||
const [portTypesOpen, setPortTypesOpen] = useState(false)
|
||||
const [hiddenListOpen, setHiddenListOpen] = useState(false)
|
||||
// Collapsed by default — expanding on demand is the whole point (keeps a
|
||||
// library with many devices from turning into one long scroll).
|
||||
const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set())
|
||||
|
||||
const groups = useMemo(() => {
|
||||
const categories = allDeviceCategories(project)
|
||||
const categoryName = (id: string) => categories.find((c) => c.id === id)?.name ?? id
|
||||
const byCategory = new Map<string, DeviceTemplate[]>()
|
||||
for (const template of allDeviceTemplates(project)) {
|
||||
const list = byCategory.get(template.category) ?? []
|
||||
list.push(template)
|
||||
byCategory.set(template.category, list)
|
||||
}
|
||||
return [...byCategory.entries()]
|
||||
.map(([categoryId, templates]) => ({
|
||||
categoryId,
|
||||
categoryName: categoryName(categoryId),
|
||||
templates: templates.sort((a, b) => a.name.localeCompare(b.name)),
|
||||
}))
|
||||
.sort((a, b) => a.categoryName.localeCompare(b.categoryName))
|
||||
}, [project])
|
||||
|
||||
const toggleCategory = (categoryId: string) => {
|
||||
setExpandedCategories((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(categoryId)) next.delete(categoryId)
|
||||
else next.add(categoryId)
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
const expandCategory = (categoryId: string) => {
|
||||
setExpandedCategories((prev) => new Set(prev).add(categoryId))
|
||||
}
|
||||
|
||||
const handleDragStart = (event: React.DragEvent, template: DeviceTemplate) => {
|
||||
event.dataTransfer.setData(TEMPLATE_DRAG_MIME, template.id)
|
||||
event.dataTransfer.effectAllowed = 'move'
|
||||
}
|
||||
|
||||
const handleQuickAdd = (template: DeviceTemplate) => {
|
||||
// Cascade placement so repeated quick-adds don't stack exactly on top of each other.
|
||||
const offset = (project.devices.length % 8) * 24
|
||||
addDeviceFromTemplate(template.id, { x: 80 + offset, y: 80 + offset })
|
||||
}
|
||||
|
||||
const handleDelete = (template: DeviceTemplate) => {
|
||||
if (template.builtIn) {
|
||||
const confirmed = window.confirm(
|
||||
`Hide "${template.name}" from your device library? It's a built-in default, so you can bring it back later from "Show hidden defaults" at the bottom of this panel. Devices already placed on the canvas from it won't be affected.`,
|
||||
)
|
||||
if (confirmed) hideBuiltInDeviceTemplate(template.id)
|
||||
return
|
||||
}
|
||||
const confirmed = window.confirm(
|
||||
`Delete "${template.name}" from your device library? Devices already placed on the canvas from it won't be affected.`,
|
||||
)
|
||||
if (confirmed) removeCustomDeviceTemplate(template.id)
|
||||
}
|
||||
|
||||
const hiddenDefaults = useMemo(() => hiddenBuiltInDeviceTemplates(project), [project])
|
||||
|
||||
return (
|
||||
<aside className="flex h-full w-64 shrink-0 flex-col border-r border-slate-200 bg-slate-50">
|
||||
<div className="flex items-center justify-between border-b border-slate-200 px-3 py-2">
|
||||
<h2 className="text-xs font-semibold uppercase tracking-wide text-slate-500">Devices</h2>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<button
|
||||
onClick={() => setPortTypesOpen(true)}
|
||||
title="Manage connector types"
|
||||
className="rounded bg-slate-100 px-2 py-1 text-[11px] font-medium text-slate-600 hover:bg-slate-200"
|
||||
>
|
||||
Connectors
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setEditorTarget('new')}
|
||||
className="rounded bg-indigo-600 px-2 py-1 text-[11px] font-medium text-white hover:bg-indigo-500"
|
||||
>
|
||||
+ Custom
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p className="border-b border-slate-200 px-3 py-2 text-[11px] text-slate-500">
|
||||
Drag a device onto the canvas, or click + to drop it in.
|
||||
</p>
|
||||
<div className="flex-1 overflow-y-auto p-2">
|
||||
{groups.map((group) => {
|
||||
const expanded = expandedCategories.has(group.categoryId)
|
||||
return (
|
||||
<div key={group.categoryId} className="mb-1">
|
||||
<button
|
||||
onClick={() => toggleCategory(group.categoryId)}
|
||||
className="flex w-full items-center justify-between rounded px-1.5 py-1 text-left text-xs font-medium text-slate-600 hover:bg-slate-100"
|
||||
>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className={`inline-block text-[9px] text-slate-400 transition-transform ${expanded ? 'rotate-90' : ''}`}>
|
||||
▶
|
||||
</span>
|
||||
{group.categoryName}
|
||||
</span>
|
||||
<span className="text-[10px] text-slate-400">{group.templates.length}</span>
|
||||
</button>
|
||||
{expanded && (
|
||||
<ul className="mt-1 space-y-1 pl-2">
|
||||
{group.templates.map((template) => (
|
||||
<li key={template.id} className="group">
|
||||
<div
|
||||
draggable
|
||||
onDragStart={(e) => handleDragStart(e, template)}
|
||||
className="flex cursor-grab items-center justify-between rounded border border-slate-200 bg-white px-2 py-1.5 text-xs shadow-sm active:cursor-grabbing"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="truncate font-medium text-slate-700">{template.name}</div>
|
||||
<div className="truncate text-[10px] text-slate-400">
|
||||
{template.ports.length} port{template.ports.length === 1 ? '' : 's'}
|
||||
{!template.builtIn ? ' · custom' : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-2 flex shrink-0 items-center gap-1 opacity-0 group-hover:opacity-100">
|
||||
{!template.builtIn && (
|
||||
<button
|
||||
onClick={() => setEditorTarget(template)}
|
||||
title="Edit this device"
|
||||
className="rounded bg-slate-100 px-1.5 py-0.5 text-slate-500 hover:bg-indigo-100 hover:text-indigo-700"
|
||||
>
|
||||
✎
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => handleDelete(template)}
|
||||
title={template.builtIn ? 'Hide this default device' : 'Delete from library'}
|
||||
className="rounded bg-slate-100 px-1.5 py-0.5 text-slate-500 hover:bg-red-50 hover:text-red-600"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleQuickAdd(template)}
|
||||
title="Add to canvas"
|
||||
className="rounded bg-slate-100 px-1.5 py-0.5 text-slate-500 hover:bg-indigo-100 hover:text-indigo-700"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{hiddenDefaults.length > 0 && (
|
||||
<div className="border-t border-slate-200 px-2 py-1.5">
|
||||
<button
|
||||
onClick={() => setHiddenListOpen((v) => !v)}
|
||||
className="flex w-full items-center justify-between rounded px-1.5 py-1 text-left text-[11px] text-slate-500 hover:bg-slate-100"
|
||||
>
|
||||
<span>
|
||||
{hiddenListOpen ? 'Hide' : 'Show'} hidden defaults ({hiddenDefaults.length})
|
||||
</span>
|
||||
<span className={`inline-block text-[9px] transition-transform ${hiddenListOpen ? 'rotate-90' : ''}`}>▶</span>
|
||||
</button>
|
||||
{hiddenListOpen && (
|
||||
<ul className="mt-1 space-y-1">
|
||||
{hiddenDefaults.map((template) => (
|
||||
<li key={template.id} className="flex items-center justify-between rounded bg-white px-2 py-1 text-xs">
|
||||
<span className="truncate text-slate-600">{template.name}</span>
|
||||
<button
|
||||
onClick={() => restoreBuiltInDeviceTemplate(template.id)}
|
||||
className="shrink-0 rounded bg-slate-100 px-1.5 py-0.5 text-[10px] font-medium text-slate-600 hover:bg-indigo-100 hover:text-indigo-700"
|
||||
>
|
||||
Restore
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{editorTarget && (
|
||||
<DeviceTemplateEditor
|
||||
template={editorTarget === 'new' ? undefined : editorTarget}
|
||||
onClose={() => setEditorTarget(null)}
|
||||
onSaved={(categoryId) => expandCategory(categoryId)}
|
||||
/>
|
||||
)}
|
||||
{portTypesOpen && <ConnectorLibraryModal onClose={() => setPortTypesOpen(false)} />}
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user