64b7a106db
- Selected Design/Code/AI tab now shows an accent underline instead of only a weight/color change, giving a clear active affordance - Normalize tab text to 11px to match the panel type scale
79 lines
2.9 KiB
Vue
79 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'reka-ui'
|
|
|
|
import { useI18n } from '@open-pencil/vue'
|
|
import { useAIChat } from '@/app/ai/chat/use'
|
|
|
|
import ChatPanel from './ChatPanel.vue'
|
|
import CodePanel from './CodePanel.vue'
|
|
import DesignPanel from './DesignPanel.vue'
|
|
import ZoomDropdown from './editor/ZoomDropdown.vue'
|
|
|
|
const { activeTab } = useAIChat()
|
|
const { panels } = useI18n()
|
|
</script>
|
|
|
|
<template>
|
|
<aside
|
|
data-test-id="properties-panel"
|
|
class="flex min-w-0 flex-1 flex-col overflow-hidden border-l border-border bg-panel"
|
|
style="contain: paint layout style"
|
|
>
|
|
<TabsRoot v-model="activeTab" class="flex min-h-0 flex-1 flex-col">
|
|
<TabsList class="flex h-10 shrink-0 items-center gap-1 border-b border-border px-2">
|
|
<TabsTrigger
|
|
value="design"
|
|
data-test-id="properties-tab-design"
|
|
class="relative rounded px-2.5 py-1 text-[11px] text-muted hover:text-surface data-[state=active]:font-semibold data-[state=active]:text-surface after:absolute after:inset-x-2 after:-bottom-[9px] after:h-0.5 after:rounded-full after:bg-transparent data-[state=active]:after:bg-accent"
|
|
>
|
|
{{ panels.design }}
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="code"
|
|
data-test-id="properties-tab-code"
|
|
class="relative flex items-center gap-1 rounded px-2.5 py-1 text-[11px] text-muted hover:text-surface data-[state=active]:font-semibold data-[state=active]:text-surface after:absolute after:inset-x-2 after:-bottom-[9px] after:h-0.5 after:rounded-full after:bg-transparent data-[state=active]:after:bg-accent"
|
|
>
|
|
<icon-lucide-code class="size-3" />
|
|
{{ panels.code }}
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="ai"
|
|
data-test-id="properties-tab-ai"
|
|
class="relative flex items-center gap-1 rounded px-2.5 py-1 text-[11px] text-muted hover:text-surface data-[state=active]:font-semibold data-[state=active]:text-surface after:absolute after:inset-x-2 after:-bottom-[9px] after:h-0.5 after:rounded-full after:bg-transparent data-[state=active]:after:bg-accent"
|
|
>
|
|
<icon-lucide-sparkles class="size-3" />
|
|
{{ panels.ai }}
|
|
</TabsTrigger>
|
|
<ZoomDropdown v-if="activeTab === 'design'" />
|
|
</TabsList>
|
|
|
|
<TabsContent
|
|
value="design"
|
|
class="flex min-h-0 flex-1 flex-col"
|
|
:force-mount="true"
|
|
:hidden="activeTab !== 'design'"
|
|
>
|
|
<DesignPanel />
|
|
</TabsContent>
|
|
|
|
<TabsContent
|
|
value="code"
|
|
class="flex min-h-0 flex-1 flex-col"
|
|
:force-mount="true"
|
|
:hidden="activeTab !== 'code'"
|
|
>
|
|
<CodePanel />
|
|
</TabsContent>
|
|
|
|
<TabsContent
|
|
value="ai"
|
|
class="flex min-h-0 flex-1 flex-col"
|
|
:force-mount="true"
|
|
:hidden="activeTab !== 'ai'"
|
|
>
|
|
<ChatPanel />
|
|
</TabsContent>
|
|
</TabsRoot>
|
|
</aside>
|
|
</template>
|