refactor: compact AI-CAD top toolbar
Some checks failed
Lint / build (20) (push) Has been cancelled
Playwright Tests / test (push) Has been cancelled

This commit is contained in:
Your Name 2026-04-06 22:03:12 +08:00
parent 394a9761f1
commit 0414983f64

View File

@ -2103,7 +2103,7 @@ function AiCadToolbarGroup({
return (
<div
className={cn(
"flex flex-wrap items-center gap-2 border border-[#e6e0d3] bg-white px-2 py-1.5",
"flex flex-wrap items-center gap-2 border border-[#e6e0d3] bg-white px-2 py-1",
className
)}
>
@ -3674,38 +3674,41 @@ export function AiCadWorkbench() {
</div>
<div className="flex min-h-0 flex-1 flex-col overflow-hidden">
<div className="border-[#e6e0d3] border-b bg-white px-4 py-2.5">
<div className="border-[#e6e0d3] border-b bg-white px-3 py-2">
<div className="flex flex-wrap items-center justify-between gap-2">
<div className="flex flex-wrap items-center gap-2">
<button
className="inline-flex h-9 items-center gap-2 rounded-[10px] border border-[#e2dccf] bg-white px-3 text-[#383329] text-[13px] transition hover:bg-[#faf7ef]"
className="inline-flex h-8 items-center gap-2 rounded-[9px] border border-[#e2dccf] bg-white px-3 text-[#383329] text-[12px] transition hover:bg-[#faf7ef]"
type="button"
>
<WandSparkles className="h-4 w-4 text-[#31df86]" />
Start Design
</button>
<Badge className="rounded-full border-[#e2dccf] bg-white px-3 py-1 text-[#5f594d]">
{generationProvider === "kittycad-cad"
? "KittyCAD / Zoo CAD"
: "Tripo3D"}
</Badge>
<Badge className="rounded-full border-[#e2dccf] bg-white px-3 py-1 text-[#5f594d]">
<Badge className="rounded-full border-[#e2dccf] bg-white px-2.5 py-1 text-[#5f594d] text-[11px]">
{activeVersion
? `Focus V${activeVersion.versionNumber}`
: "Ready for first pass"}
</Badge>
<Badge
</div>
<div className="flex flex-wrap items-center gap-3 text-[#7f7768] text-[11px]">
<span
className={cn(
"rounded-full px-3 py-1",
"inline-flex items-center gap-1.5",
workspaceSyncState === "synced"
? "border-emerald-200 bg-emerald-50 text-emerald-700"
: "border-[#e2dccf] bg-white text-[#5f594d]"
? "text-emerald-700"
: "text-[#7f7768]"
)}
>
<span
className={cn(
"h-1.5 w-1.5 rounded-full",
workspaceSyncState === "synced"
? "bg-emerald-500"
: "bg-amber-400"
)}
/>
{workspaceSyncState === "synced" ? "Synced" : "Syncing"}
</Badge>
</div>
<div className="flex flex-wrap items-center gap-2 text-[#7f7768] text-[11px]">
</span>
<span>{versions.length} versions</span>
<span>{completedCount} done</span>
<span>
@ -3716,11 +3719,11 @@ export function AiCadWorkbench() {
</div>
</div>
<div className="mt-2 flex flex-wrap items-start gap-2">
<div className="mt-1.5 flex flex-wrap items-center gap-2">
<AiCadToolbarGroup label="Mode">
<button
className={cn(
"inline-flex h-9 items-center gap-2 rounded-[10px] border px-3 text-[13px] transition-all duration-150 ease-out",
"inline-flex h-8 items-center gap-2 rounded-[8px] border px-2.5 text-[12px] transition-all duration-150 ease-out",
activeResultTab === "preview"
? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]"
: "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]"
@ -3736,7 +3739,7 @@ export function AiCadWorkbench() {
</button>
<button
className={cn(
"inline-flex h-9 items-center gap-2 rounded-[10px] border px-3 text-[13px] transition-all duration-150 ease-out",
"inline-flex h-8 items-center gap-2 rounded-[8px] border px-2.5 text-[12px] transition-all duration-150 ease-out",
activeResultTab === "code"
? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]"
: "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]"
@ -3755,7 +3758,7 @@ export function AiCadWorkbench() {
<AiCadToolbarGroup label="Display">
<button
className={cn(
"inline-flex h-9 w-9 items-center justify-center rounded-[10px] border transition-all duration-150 ease-out",
"inline-flex h-8 w-8 items-center justify-center rounded-[8px] border transition-all duration-150 ease-out",
viewerSettings.showGrid
? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]"
: "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]"
@ -3773,7 +3776,7 @@ export function AiCadWorkbench() {
</button>
<button
className={cn(
"inline-flex h-9 w-9 items-center justify-center rounded-[10px] border transition-all duration-150 ease-out",
"inline-flex h-8 w-8 items-center justify-center rounded-[8px] border transition-all duration-150 ease-out",
viewerSettings.autoRotate
? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]"
: "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]"
@ -3791,7 +3794,7 @@ export function AiCadWorkbench() {
</button>
<button
className={cn(
"inline-flex h-9 w-9 items-center justify-center rounded-[10px] border transition-all duration-150 ease-out",
"inline-flex h-8 w-8 items-center justify-center rounded-[8px] border transition-all duration-150 ease-out",
viewerSettings.wireframe
? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]"
: "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]"
@ -3810,16 +3813,16 @@ export function AiCadWorkbench() {
</AiCadToolbarGroup>
<AiCadToolbarGroup className="lg:ml-auto" label="Session">
<Badge className="rounded-md border-[#ddd7ca] bg-white text-[#5f594d]">
<Badge className="rounded-md border-[#ddd7ca] bg-white px-2 py-0.5 text-[#5f594d] text-[11px]">
{generationProvider === "kittycad-cad"
? "KittyCAD / Zoo CAD"
? "Zoo CAD"
: "Tripo3D"}
</Badge>
<Badge className="rounded-md border-[#ddd7ca] bg-white text-[#5f594d]">
<Badge className="rounded-md border-[#ddd7ca] bg-white px-2 py-0.5 text-[#5f594d] text-[11px]">
{viewerSettings.envPreset}
</Badge>
{activeVersion ? (
<Badge className="rounded-md border-[#ddd7ca] bg-white text-[#5f594d]">
<Badge className="rounded-md border-[#ddd7ca] bg-white px-2 py-0.5 text-[#5f594d] text-[11px]">
V{activeVersion.versionNumber}
</Badge>
) : null}