feat: Add anonymous dynamic canvas option to gallery

This commit is contained in:
2026-02-15 02:05:47 -06:00
parent d5ee533db9
commit 8154bac63f
4 changed files with 30 additions and 2 deletions

View File

@@ -240,7 +240,7 @@ function triggerToolFlash() {
}, 500)
}
type PageName = 'home' | 'canvas' | 'components' | 'themes' | 'project-canvas' | 'database' | 'source' | 'terminal' | 'tools'
type PageName = 'home' | 'canvas' | 'components' | 'themes' | 'project-canvas' | 'database' | 'source' | 'terminal' | 'tools' | 'agents'
onMounted(async () => {
// Connect to WebSocket for Claude status updates
@@ -357,6 +357,10 @@ watch(() => route.name, (newPage) => {
<span class="header-canvas-name">{{ projectCanvasStore.activeCanvas.name }}</span>
<span v-if="projectCanvasStore.activeCanvas.is_system" class="header-canvas-badge">Sistema</span>
</template>
<template v-if="canvasStore.isAnonymousCanvas && route.name === 'canvas'">
<span class="header-sep">/</span>
<span class="header-canvas-name">anonimo</span>
</template>
<button class="debug-btn" :class="{ active: showDebugConsole }" @click="showDebugConsole = !showDebugConsole" title="Debug Console">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>

View File

@@ -39,10 +39,17 @@ function handleLoadComponent(e: Event) {
function handleContentRendered() {
showGallery.value = false
canvasStore.isAnonymousCanvas = false
}
function handleStartAnonymous() {
showGallery.value = false
canvasStore.isAnonymousCanvas = true
}
function handleClearCanvas() {
showGallery.value = true
canvasStore.isAnonymousCanvas = false
const container = document.getElementById('canvas-content')
if (container) {
// Remove all non-gallery content
@@ -72,7 +79,7 @@ onUnmounted(() => {
<div class="canvas-container">
<div id="canvas-content" class="canvas-content">
<div v-if="showGallery" class="canvas-placeholder">
<CanvasGallery @snapshot-restored="showGallery = false" @component-loaded="showGallery = false" />
<CanvasGallery @snapshot-restored="showGallery = false" @component-loaded="showGallery = false" @start-anonymous="handleStartAnonymous" />
</div>
</div>
</div>

View File

@@ -14,6 +14,7 @@ import { useCanvasStore } from '../stores/canvas'
const emit = defineEmits<{
(e: 'snapshot-restored'): void
(e: 'component-loaded'): void
(e: 'start-anonymous'): void
}>()
const router = useRouter()
@@ -223,6 +224,19 @@ onMounted(() => {
<template v-else>
<!-- Project Canvases -->
<div class="gallery-grid">
<!-- Anonymous dynamic canvas card -->
<div class="canvas-card new-card anon-card" @click="emit('start-anonymous')">
<div class="card-icon new-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="3" y="3" width="18" height="18" rx="2"/>
<path d="M3 9h18"/>
</svg>
</div>
<div class="card-content">
<div class="card-name">Dynamic Canvas</div>
</div>
</div>
<!-- New canvas card -->
<div class="canvas-card new-card" @click="showNewForm = true" v-if="!showNewForm">
<div class="card-icon new-icon">

View File

@@ -35,6 +35,7 @@ export const useCanvasStore = defineStore('canvas', () => {
const history = ref<HistoryEntry[]>([])
const notifications = ref<Notification[]>([])
const showHistoryPanel = ref(false)
const isAnonymousCanvas = ref(false)
let notificationId = 0
@@ -111,6 +112,8 @@ export const useCanvasStore = defineStore('canvas', () => {
connectionError,
connectionInfo,
statusColor,
// Canvas mode
isAnonymousCanvas,
// History & UI
history,
notifications,