create-visualbuild-app 0.1.0 → 1.0.0

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

@@ -1,128 +1,257 @@
-export type SaveState = 'idle' | 'saving' | 'saved' | 'error'
-
-export default function Topbar({
-  showCode,
-  previewMode,
-  saveState,
-  onToggleCode,
-  onTogglePreview,
-  onSave,
-}: {
-  showCode: boolean
-  previewMode: boolean
-  saveState: SaveState
-  onToggleCode: () => void
-  onTogglePreview: () => void
-  onSave: () => void
-}) {
-  return (
-    <header className="flex items-center justify-between px-4 h-12 bg-topbar border-b border-white/[0.06] shrink-0 z-10">
-      <div className="flex items-center gap-2">
-        <div className="w-6 h-6 rounded bg-accent flex items-center justify-center">
-          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-            <rect x="1" y="1" width="5" height="5" rx="1" fill="white" />
-            <rect
-              x="8"
-              y="1"
-              width="5"
-              height="5"
-              rx="1"
-              fill="white"
-              opacity="0.6"
-            />
-            <rect
-              x="1"
-              y="8"
-              width="5"
-              height="5"
-              rx="1"
-              fill="white"
-              opacity="0.6"
-            />
-            <rect
-              x="8"
-              y="8"
-              width="5"
-              height="5"
-              rx="1"
-              fill="white"
-              opacity="0.3"
-            />
-          </svg>
-        </div>
-        <span className="text-sm font-semibold tracking-tight text-white">
-          VisualBuild
-        </span>
-      </div>
-
-      <div className="flex items-center gap-1">
-        <button
-          type="button"
-          onClick={onTogglePreview}
-          className={`px-3 py-1.5 text-xs rounded transition-colors cursor-pointer select-none ${
-            previewMode
-              ? 'text-white bg-white/[0.1]'
-              : 'text-gray-400 hover:text-white hover:bg-white/[0.06]'
-          }`}
-        >
-          Preview
-        </button>
-        <button
-          type="button"
-          onClick={onToggleCode}
-          className={`px-3 py-1.5 text-xs rounded transition-colors cursor-pointer select-none ${
-            !previewMode && showCode
-              ? 'text-white bg-white/[0.1]'
-              : 'text-gray-400 hover:text-white hover:bg-white/[0.06]'
-          }`}
-        >
-          Code
-        </button>
-        <DisabledButton>Undo</DisabledButton>
-        <DisabledButton>Redo</DisabledButton>
-      </div>
-
-      <div className="flex items-center gap-2">
-        <button
-          type="button"
-          disabled={saveState === 'saving'}
-          onClick={onSave}
-          className={`px-3 py-1.5 text-xs bg-white/[0.06] hover:bg-white/[0.1] disabled:opacity-60 rounded transition-colors cursor-pointer select-none ${
-            saveState === 'error' ? 'text-red-300' : 'text-gray-300'
-          }`}
-        >
-          {saveState === 'saving'
-            ? 'Saving...'
-            : saveState === 'saved'
-              ? 'Saved'
-              : saveState === 'error'
-                ? 'Save failed'
-              : 'Save'}
-        </button>
-        <DisabledButton emphasized>Export ZIP</DisabledButton>
-      </div>
-    </header>
-  )
-}
-
-function DisabledButton({
-  children,
-  emphasized = false,
-}: {
-  children: React.ReactNode
-  emphasized?: boolean
-}) {
-  return (
-    <button
-      type="button"
-      disabled
-      className={`px-3 py-1.5 text-xs rounded cursor-pointer select-none ${
-        emphasized
-          ? 'text-white/45 bg-accent/35'
-          : 'text-gray-700 bg-transparent'
-      }`}
-    >
-      {children}
-    </button>
-  )
-}
+import { useEffect, useRef, useState } from 'react'
+import { editorThemeOptions } from '../theme'
+import type { EditorThemeChoice } from '../types'
+
+export type SaveState = 'idle' | 'saving' | 'saved' | 'error'
+
+export default function Topbar({
+  showCode,
+  previewMode,
+  saveState,
+  editorTheme,
+  onToggleCode,
+  onTogglePreview,
+  onSave,
+  onDeploy,
+  onThemeChange,
+}: {
+  showCode: boolean
+  previewMode: boolean
+  saveState: SaveState
+  editorTheme: EditorThemeChoice
+  onToggleCode: () => void
+  onTogglePreview: () => void
+  onSave: () => void
+  onDeploy: () => void
+  onThemeChange: (theme: EditorThemeChoice) => void
+}) {
+  return (
+    <header data-vb-editor-chrome className="flex items-center justify-between px-4 h-12 bg-topbar border-b border-white/[0.06] shrink-0 z-30">
+      <div className="flex items-center gap-2">
+        <div className="w-6 h-6 rounded bg-accent flex items-center justify-center">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+            <rect x="1" y="1" width="5" height="5" rx="1" fill="white" />
+            <rect
+              x="8"
+              y="1"
+              width="5"
+              height="5"
+              rx="1"
+              fill="white"
+              opacity="0.6"
+            />
+            <rect
+              x="1"
+              y="8"
+              width="5"
+              height="5"
+              rx="1"
+              fill="white"
+              opacity="0.6"
+            />
+            <rect
+              x="8"
+              y="8"
+              width="5"
+              height="5"
+              rx="1"
+              fill="white"
+              opacity="0.3"
+            />
+          </svg>
+        </div>
+        <span className="text-sm font-semibold tracking-tight text-white">
+          VisualBuild
+        </span>
+      </div>
+
+      <div className="flex items-center gap-1">
+        <button
+          type="button"
+          onClick={onTogglePreview}
+          className={`px-3 py-1.5 text-xs rounded transition-colors cursor-pointer select-none ${
+            previewMode
+              ? 'text-white bg-white/[0.1]'
+              : 'text-gray-400 hover:text-white hover:bg-white/[0.06]'
+          }`}
+        >
+          Preview
+        </button>
+        <button
+          type="button"
+          onClick={onToggleCode}
+          className={`px-3 py-1.5 text-xs rounded transition-colors cursor-pointer select-none ${
+            !previewMode && showCode
+              ? 'text-white bg-white/[0.1]'
+              : 'text-gray-400 hover:text-white hover:bg-white/[0.06]'
+          }`}
+        >
+          Code
+        </button>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <ThemePicker value={editorTheme} onChange={onThemeChange} />
+        <button
+          type="button"
+          disabled={saveState === 'saving'}
+          onClick={onSave}
+          className={`px-3 py-1.5 text-xs bg-white/[0.06] hover:bg-white/[0.1] disabled:opacity-60 rounded transition-colors cursor-pointer select-none ${
+            saveState === 'error' ? 'text-red-300' : 'text-gray-300'
+          }`}
+        >
+          {saveState === 'saving'
+            ? 'Saving...'
+            : saveState === 'saved'
+              ? 'Saved'
+              : saveState === 'error'
+                ? 'Save failed'
+              : 'Save'}
+        </button>
+        <button
+          type="button"
+          onClick={onDeploy}
+          className="flex cursor-pointer items-center gap-1.5 rounded bg-accent px-3 py-1.5 text-xs font-medium text-white transition-[filter] hover:brightness-110"
+        >
+          <span className="hidden sm:inline">Deploy</span>
+          <VercelMark />
+        </button>
+      </div>
+    </header>
+  )
+}
+
+function VercelMark() {
+  return (
+    <svg width="10" height="9" viewBox="0 0 10 9" aria-hidden="true">
+      <path d="M5 0 10 9H0L5 0Z" fill="currentColor" />
+    </svg>
+  )
+}
+
+function ThemePicker({
+  value,
+  onChange,
+}: {
+  value: EditorThemeChoice
+  onChange: (theme: EditorThemeChoice) => void
+}) {
+  const [open, setOpen] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const activeTheme =
+    editorThemeOptions.find((theme) => theme.id === value) ??
+    editorThemeOptions[0]
+
+  useEffect(() => {
+    if (!open) return
+
+    const handlePointerDown = (event: PointerEvent) => {
+      if (!containerRef.current?.contains(event.target as Node)) {
+        setOpen(false)
+      }
+    }
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setOpen(false)
+    }
+
+    window.addEventListener('pointerdown', handlePointerDown)
+    window.addEventListener('keydown', handleKeyDown)
+    return () => {
+      window.removeEventListener('pointerdown', handlePointerDown)
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [open])
+
+  return (
+    <div ref={containerRef} className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen((current) => !current)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        title={`Editor theme: ${activeTheme.label}`}
+        className="flex h-7 cursor-pointer items-center gap-2 rounded border border-white/[0.08] bg-white/[0.05] px-2 text-xs text-gray-300 transition-colors hover:bg-white/[0.1] hover:text-white"
+      >
+        <PaletteIcon />
+        <span className="hidden max-w-28 truncate lg:block">
+          {activeTheme.label}
+        </span>
+        <span className="text-[9px] text-gray-500">v</span>
+      </button>
+
+      {open && (
+        <div
+          role="listbox"
+          aria-label="Editor theme"
+          className="absolute right-0 top-full z-50 mt-2 w-72 overflow-hidden rounded-lg border border-white/10 bg-[#181b21] p-1.5 shadow-2xl"
+        >
+          <p className="px-2 pb-1.5 pt-1 text-[9px] font-semibold uppercase tracking-[0.16em] text-gray-500">
+            Editor appearance
+          </p>
+          {editorThemeOptions.map((theme) => {
+            const selected = theme.id === value
+            return (
+              <button
+                key={theme.id}
+                type="button"
+                role="option"
+                aria-selected={selected}
+                onClick={() => {
+                  onChange(theme.id)
+                  setOpen(false)
+                }}
+                className={`flex w-full cursor-pointer items-center gap-3 rounded-md px-2 py-2 text-left transition-colors ${
+                  selected
+                    ? 'bg-accent/20 text-white'
+                    : 'text-gray-300 hover:bg-white/[0.07] hover:text-white'
+                }`}
+              >
+                <span className="flex overflow-hidden rounded border border-white/10">
+                  {theme.swatches.map((color) => (
+                    <span
+                      key={color}
+                      className="h-7 w-3"
+                      style={{ backgroundColor: color }}
+                    />
+                  ))}
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="block text-xs font-medium">
+                    {theme.label}
+                  </span>
+                  <span className="mt-0.5 block truncate text-[10px] text-gray-500">
+                    {theme.description}
+                  </span>
+                </span>
+                {selected && (
+                  <span className="text-xs font-semibold text-accent">✓</span>
+                )}
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function PaletteIcon() {
+  return (
+    <svg
+      width="13"
+      height="13"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        d="M8 2a6 6 0 1 0 0 12h1.1c.8 0 1.2-.9.7-1.5-.5-.7 0-1.6.8-1.6H12A2 2 0 0 0 14 9a7 7 0 0 0-6-7Z"
+        stroke="currentColor"
+        strokeWidth="1.3"
+      />
+      <circle cx="5" cy="6" r=".8" fill="currentColor" />
+      <circle cx="8" cy="4.7" r=".8" fill="currentColor" />
+      <circle cx="11" cy="6.2" r=".8" fill="currentColor" />
+    </svg>
+  )
+}