create-visualbuild-app 0.1.0

package/visual-app-builder/src/components/ComponentSidebar.tsx

@@ -0,0 +1,302 @@
+import { useDraggable } from '@dnd-kit/core'
+import { CSS } from '@dnd-kit/utilities'
+import { useState } from 'react'
+import { components } from '../data/componentRegistry'
+import { primitives } from '../data/primitiveRegistry'
+import { useAppStore } from '../stores/useAppStore'
+import type { ComponentDefinition, PrimitiveDefinition } from '../types'
+import ProjectExplorer from './ProjectExplorer'
+
+export default function ComponentSidebar({
+  view,
+  selectedProjectFile,
+  onSelectProjectFile,
+}: {
+  view: 'files' | 'elements'
+  selectedProjectFile: string | null
+  onSelectProjectFile: (path: string | null) => void
+}) {
+  const {
+    activePageId,
+    selectedComponentId,
+    addComponent,
+    addPrimitive,
+    addPrimitiveToNode,
+    setAppShellComponent,
+  } = useAppStore()
+  const globalComponents = components.filter((component) =>
+    ['Navbar', 'Footer'].includes(component.type)
+  )
+  const pageComponents = components.filter(
+    (component) => !['Navbar', 'Footer'].includes(component.type)
+  )
+  const primitiveGroups = groupPrimitivesByCategory(primitives)
+  const [openSections, setOpenSections] = useState<Set<string>>(
+    () => new Set(['Global', 'Page Blocks', 'Semantic'])
+  )
+  const toggleSection = (section: string) => {
+    setOpenSections((current) => {
+      const next = new Set(current)
+
+      if (next.has(section)) {
+        next.delete(section)
+      } else {
+        next.add(section)
+      }
+
+      return next
+    })
+  }
+  return (
+    <aside className="flex h-full w-full flex-col overflow-hidden bg-sidebar">
+      <div className="px-3 py-2.5 border-b border-white/[0.06]">
+        <p className="text-[10px] font-semibold uppercase tracking-widest text-gray-500">
+          {view === 'files' ? 'Project files' : 'Elements'}
+        </p>
+      </div>
+
+      <div
+        className={`min-h-0 flex-1 ${
+          view === 'files' ? 'overflow-hidden' : 'overflow-y-auto p-2 space-y-1'
+        }`}
+      >
+        {view === 'files' ? (
+          <ProjectExplorer
+            selectedPath={selectedProjectFile}
+            onSelectFile={onSelectProjectFile}
+          />
+        ) : (
+          <>
+            <AccordionSection
+              title="Global"
+              count={globalComponents.length}
+              isOpen={openSections.has('Global')}
+              onToggle={() => toggleSection('Global')}
+            >
+              {globalComponents.map((component) => {
+                const slot = component.type === 'Footer' ? 'footer' : 'header'
+
+                return (
+                  <ComponentSidebarItem
+                    key={component.type}
+                    component={component}
+                    isDisabled={false}
+                    onAdd={() => setAppShellComponent(slot, component.type)}
+                  />
+                )
+              })}
+            </AccordionSection>
+
+            <AccordionSection
+              title="Page Blocks"
+              count={pageComponents.length}
+              isOpen={openSections.has('Page Blocks')}
+              onToggle={() => toggleSection('Page Blocks')}
+            >
+              {pageComponents.map((component) => {
+                return (
+                  <ComponentSidebarItem
+                    key={component.type}
+                    component={component}
+                    isDisabled={false}
+                    onAdd={() => addComponent(activePageId, component.type)}
+                  />
+                )
+              })}
+            </AccordionSection>
+
+            {primitiveGroups.map(([category, items]) => (
+              <AccordionSection
+                key={category}
+                title={category}
+                count={items.length}
+                isOpen={openSections.has(category)}
+                onToggle={() => toggleSection(category)}
+              >
+                {items.map((primitive) => (
+                  <PrimitiveSidebarItem
+                    key={primitive.type}
+                    primitive={primitive}
+                    isClickDisabled={selectedComponentId === null}
+                    onAdd={() => {
+                      if (selectedComponentId) {
+                        addPrimitiveToNode(selectedComponentId, primitive.type)
+                        return
+                      }
+
+                      addPrimitive(activePageId, primitive.type)
+                    }}
+                  />
+                ))}
+              </AccordionSection>
+            ))}
+          </>
+        )}
+      </div>
+
+      {view === 'elements' && (
+        <div className="px-3 py-2 border-t border-white/[0.06]">
+          <p className="text-[10px] text-gray-600">Drag or click to add</p>
+        </div>
+      )}
+    </aside>
+  )
+}
+
+function AccordionSection({
+  title,
+  count,
+  isOpen,
+  onToggle,
+  children,
+}: {
+  title: string
+  count: number
+  isOpen: boolean
+  onToggle: () => void
+  children: React.ReactNode
+}) {
+  return (
+    <section className="border-b border-white/[0.04] pb-1 last:border-b-0">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="flex w-full cursor-pointer select-none items-center justify-between rounded px-2 py-1.5 text-left transition-colors hover:bg-white/[0.04]"
+      >
+        <span className="text-[10px] font-medium uppercase tracking-widest text-gray-500">
+          {title}
+        </span>
+        <span className="flex items-center gap-1 text-[10px] text-gray-600">
+          {count}
+          <span
+            className={`inline-block transition-transform ${
+              isOpen ? 'rotate-90' : ''
+            }`}
+            aria-hidden="true"
+          >
+            &gt;
+          </span>
+        </span>
+      </button>
+      {isOpen && <div className="space-y-0.5 pb-1">{children}</div>}
+    </section>
+  )
+}
+
+function groupPrimitivesByCategory(items: PrimitiveDefinition[]) {
+  const groups = new Map<string, PrimitiveDefinition[]>()
+
+  for (const item of items) {
+    groups.set(item.category, [...(groups.get(item.category) ?? []), item])
+  }
+
+  return Array.from(groups.entries())
+}
+
+function ComponentSidebarItem({
+  component,
+  isDisabled,
+  onAdd,
+}: {
+  component: ComponentDefinition
+  isDisabled: boolean
+  onAdd: () => void
+}) {
+  const { attributes, listeners, setNodeRef, transform, isDragging } =
+    useDraggable({
+      id: `sidebar:${component.type}`,
+      disabled: isDisabled,
+      data: {
+        kind: 'sidebar-component',
+        type: component.type,
+      },
+    })
+  const style = {
+    transform: CSS.Translate.toString(transform),
+  }
+
+  return (
+    <button
+      ref={setNodeRef}
+      type="button"
+      disabled={isDisabled}
+      onClick={onAdd}
+      style={style}
+      className={`w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md text-left group transition-colors ${
+        isDisabled
+          ? 'opacity-45 cursor-not-allowed'
+          : 'cursor-grab select-none hover:bg-white/[0.06] active:cursor-grabbing'
+      } ${isDragging ? 'opacity-70 bg-white/[0.08]' : ''}`}
+      {...listeners}
+      {...attributes}
+    >
+      <span className="text-base text-gray-500 group-hover:text-accent transition-colors w-5 text-center leading-none">
+        {component.icon}
+      </span>
+      <div className="min-w-0">
+        <p className="text-xs font-medium text-gray-300 group-hover:text-white transition-colors leading-tight">
+          {component.label}
+        </p>
+        <p className="text-[10px] text-gray-600 group-hover:text-gray-400 transition-colors leading-tight mt-0.5 truncate">
+          {getComponentDescription(component.type, component.description)}
+        </p>
+      </div>
+    </button>
+  )
+}
+
+function PrimitiveSidebarItem({
+  primitive,
+  isClickDisabled,
+  onAdd,
+}: {
+  primitive: PrimitiveDefinition
+  isClickDisabled: boolean
+  onAdd: () => void
+}) {
+  const { attributes, listeners, setNodeRef, transform, isDragging } =
+    useDraggable({
+      id: `primitive:${primitive.type}`,
+      data: {
+        kind: 'primitive',
+        type: primitive.type,
+      },
+    })
+  const style = {
+    transform: CSS.Translate.toString(transform),
+  }
+
+  return (
+    <button
+      ref={setNodeRef}
+      type="button"
+      onClick={onAdd}
+      style={style}
+      title={
+        isClickDisabled
+          ? `Drag ${primitive.label} onto a component or select a component first`
+          : `Add ${primitive.label} to selected component`
+      }
+      className={`w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md text-left group transition-colors cursor-grab select-none hover:bg-white/[0.06] active:cursor-grabbing ${
+        isDragging ? 'opacity-70 bg-white/[0.08]' : ''
+      } ${isClickDisabled ? 'opacity-80' : ''}`}
+      {...listeners}
+      {...attributes}
+    >
+      <div className="min-w-0">
+        <p className="text-xs font-medium text-gray-300 group-hover:text-white transition-colors leading-tight">
+          {primitive.label}
+        </p>
+        <p className="text-[10px] text-gray-600 group-hover:text-gray-400 transition-colors leading-tight mt-0.5 truncate">
+          {primitive.description}
+        </p>
+      </div>
+    </button>
+  )
+}
+
+function getComponentDescription(type: string, fallback: string) {
+  if (type === 'Navbar') return 'Global header across all pages'
+  if (type === 'Footer') return 'Global footer across all pages'
+  return fallback
+}

package/visual-app-builder/src/components/PageSwitcher.tsx

@@ -0,0 +1,161 @@
+import { useState } from 'react'
+import { useAppStore } from '../stores/useAppStore'
+import type { Page } from '../types'
+
+export default function PageSwitcher({
+  onSelectPage,
+  onDeletePage,
+}: {
+  onSelectPage?: (page: Page) => void
+  onDeletePage?: (page: Page) => void
+}) {
+  const {
+    pages,
+    activePageId,
+    setActivePage,
+    addPage,
+    deletePage,
+    saveProject,
+  } = useAppStore()
+  const [adding, setAdding] = useState(false)
+  const [newName, setNewName] = useState('')
+  const [newRoute, setNewRoute] = useState('/')
+  const [error, setError] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+
+  const handleAdd = async () => {
+    if (!newName.trim()) return
+    const route = newRoute.startsWith('/') ? newRoute : `/${newRoute}`
+
+    if (pages.some((page) => page.route === route)) {
+      setError('Route already exists')
+      return
+    }
+
+    if (
+      pages.some(
+        (page) => page.name.toLowerCase() === newName.trim().toLowerCase()
+      )
+    ) {
+      setError('Page name already exists')
+      return
+    }
+
+    setBusy(true)
+
+    try {
+      const page = addPage(newName.trim(), route)
+      setActivePage(page.id)
+      await saveProject()
+      onSelectPage?.(page)
+      setNewName('')
+      setNewRoute('/')
+      setError(null)
+      setAdding(false)
+    } catch (saveError) {
+      setError(getErrorMessage(saveError))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handleDelete = async (page: Page) => {
+    if (busy) return
+    setBusy(true)
+
+    try {
+      deletePage(page.id)
+      await saveProject()
+      onDeletePage?.(page)
+    } catch (saveError) {
+      setError(getErrorMessage(saveError))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-1 px-3 h-9 bg-topbar border-t border-white/[0.06] shrink-0 overflow-x-auto">
+      {pages.map((page) => (
+        <div key={page.id} className="flex items-center group shrink-0">
+          <button
+            onClick={() => {
+              setActivePage(page.id)
+              onSelectPage?.(page)
+            }}
+            className={`px-3 py-1 text-xs rounded transition-colors cursor-pointer select-none ${
+              activePageId === page.id
+                ? 'bg-white/[0.1] text-white'
+                : 'text-gray-500 hover:text-gray-300 hover:bg-white/[0.05]'
+            }`}
+          >
+            {page.name}
+            <span className="ml-1 text-gray-600">{page.route}</span>
+          </button>
+          {pages.length > 1 && (
+            <button
+              onClick={() => void handleDelete(page)}
+              disabled={busy}
+              className="ml-0.5 w-4 h-4 text-gray-600 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-all text-xs flex items-center justify-center cursor-pointer select-none"
+            >
+              ×
+            </button>
+          )}
+        </div>
+      ))}
+
+      {adding ? (
+        <div className="flex items-center gap-1 shrink-0">
+          <input
+            autoFocus
+            value={newName}
+            onChange={(e) => {
+              setNewName(e.target.value)
+              setError(null)
+            }}
+            onKeyDown={(e) => e.key === 'Enter' && void handleAdd()}
+            placeholder="Page name"
+            className="w-24 px-2 py-0.5 text-xs bg-white/[0.08] border border-white/[0.12] rounded text-white placeholder-gray-600 focus:outline-none focus:border-accent/50"
+          />
+          <input
+            value={newRoute}
+            onChange={(e) => {
+              setNewRoute(e.target.value)
+              setError(null)
+            }}
+            placeholder="/route"
+            className="w-20 px-2 py-0.5 text-xs bg-white/[0.08] border border-white/[0.12] rounded text-white placeholder-gray-600 focus:outline-none focus:border-accent/50"
+          />
+          <button
+            onClick={() => void handleAdd()}
+            disabled={busy}
+            className="text-xs text-accent hover:text-white transition-colors cursor-pointer select-none disabled:cursor-default disabled:text-gray-600"
+          >
+            {busy ? 'Adding...' : 'Add'}
+          </button>
+          <button
+            onClick={() => {
+              setAdding(false)
+              setError(null)
+            }}
+            className="text-xs text-gray-600 hover:text-gray-300 transition-colors cursor-pointer select-none"
+          >
+            Cancel
+          </button>
+          {error && <span className="text-[10px] text-red-400">{error}</span>}
+        </div>
+      ) : (
+        <button
+          onClick={() => setAdding(true)}
+          className="px-2 py-1 text-xs text-gray-600 hover:text-gray-300 hover:bg-white/[0.05] rounded transition-colors shrink-0 cursor-pointer select-none"
+        >
+          + Add page
+        </button>
+      )}
+    </div>
+  )
+}
+
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : 'Page operation failed'
+}