mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: move design controls below scaffold preview

Browse Source 
Made-with: Cursor
This commit is contained in:
Mark Henderson
2026-03-02 13:50:15 -08:00
parent b3462a31a7
commit 817fe3a1a4
1 changed files with 68 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
app/[workspace]/project/[projectId]/design/page.tsx
View File

@@ -320,63 +320,6 @@ function SurfaceSection({
return (
<div className="flex flex-col h-full gap-0">
{/* Tab bar */}
<div className="flex items-center gap-1 px-1 pb-3 flex-wrap">
{surface.themes.map(theme => {
const isActive = theme.id === previewId;
const isLocked = theme.id === lockedThemeId;
return (
<button
key={theme.id}
onClick={() => !lockedThemeId && onSelect(theme.id)}
disabled={!!lockedThemeId && !isLocked}
className={cn(
"flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all border",
isActive && isLocked
? "bg-foreground text-background border-foreground"
: isActive
? "bg-foreground text-background border-foreground"
: lockedThemeId
? "opacity-30 border-transparent text-muted-foreground cursor-not-allowed"
: "border-border text-muted-foreground hover:border-foreground/40 hover:text-foreground"
)}
>
{isLocked && <Lock className="w-2.5 h-2.5" />}
{theme.name}
</button>
);
})}
{/* Spacer + actions */}
<div className="ml-auto flex items-center gap-2">
{activeTheme && (
<a
href={activeTheme.url}
target="_blank"
rel="noopener noreferrer"
className="text-[11px] text-muted-foreground hover:text-foreground transition-colors"
>
{activeTheme.name} docs ↗
</a>
)}
{lockedThemeId ? (
<Button variant="outline" size="sm" onClick={onUnlock} className="gap-1.5 text-xs h-7">
<Pencil className="h-3 w-3" />
Change
</Button>
) : (
<Button
size="sm"
onClick={onLock}
disabled={!selectedThemeId || saving}
className="gap-1.5 text-xs h-7"
>
{saving ? <Loader2 className="h-3 w-3 animate-spin" /> : <Lock className="h-3 w-3" />}
Lock in
</Button>
)}
</div>
</div>
{/* Scaffold preview — browser chrome frame */}
<div className="flex-1 rounded-xl overflow-hidden border" style={{ minHeight: 460 }}>
@@ -397,24 +340,81 @@ function SurfaceSection({
? <ScaffoldComponent />
: (
<div className="h-full flex items-center justify-center text-muted-foreground text-xs">
Select a library above to preview
Select a library below to preview
</div>
)
}
</div>
</div>
{/* Theme description */}
{activeTheme && (
<div className="pt-3 flex items-center gap-3">
<p className="text-xs text-muted-foreground flex-1">{activeTheme.description}</p>
<div className="flex gap-1">
{activeTheme.tags.map(t => (
<Badge key={t} variant="secondary" className="text-[9px] px-1.5 py-0">{t}</Badge>
))}
</div>
{/* Controls bar — library tabs + description + lock in */}
<div className="shrink-0 pt-3 space-y-2">
{/* Library tab row */}
<div className="flex items-center gap-1.5 flex-wrap">
{surface.themes.map(theme => {
const isActive = theme.id === previewId;
const isLocked = theme.id === lockedThemeId;
return (
<button
key={theme.id}
onClick={() => !lockedThemeId && onSelect(theme.id)}
disabled={!!lockedThemeId && !isLocked}
className={cn(
"flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all border",
isActive && isLocked
? "bg-foreground text-background border-foreground"
: isActive
? "bg-foreground text-background border-foreground"
: lockedThemeId
? "opacity-30 border-transparent text-muted-foreground cursor-not-allowed"
: "border-border text-muted-foreground hover:border-foreground/40 hover:text-foreground"
)}
>
{isLocked && <Lock className="w-2.5 h-2.5" />}
{theme.name}
</button>
);
})}
</div>
)}
{/* Description + tags + actions */}
<div className="flex items-center gap-3">
{activeTheme && (
<>
<p className="text-xs text-muted-foreground flex-1">{activeTheme.description}</p>
<div className="flex gap-1">
{activeTheme.tags.map(t => (
<Badge key={t} variant="secondary" className="text-[9px] px-1.5 py-0">{t}</Badge>
))}
</div>
<a
href={activeTheme.url}
target="_blank"
rel="noopener noreferrer"
className="text-[11px] text-muted-foreground hover:text-foreground transition-colors shrink-0"
>
Docs ↗
</a>
</>
)}
{lockedThemeId ? (
<Button variant="outline" size="sm" onClick={onUnlock} className="gap-1.5 text-xs h-7 shrink-0">
<Pencil className="h-3 w-3" />
Change
</Button>
) : (
<Button
size="sm"
onClick={onLock}
disabled={!selectedThemeId || saving}
className="gap-1.5 text-xs h-7 shrink-0"
>
{saving ? <Loader2 className="h-3 w-3 animate-spin" /> : <Lock className="h-3 w-3" />}
Lock in
</Button>
)}
</div>
</div>
</div>
);
}