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) }, 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 () => { onMounted(async () => {
// Connect to WebSocket for Claude status updates // 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 class="header-canvas-name">{{ projectCanvasStore.activeCanvas.name }}</span>
<span v-if="projectCanvasStore.activeCanvas.is_system" class="header-canvas-badge">Sistema</span> <span v-if="projectCanvasStore.activeCanvas.is_system" class="header-canvas-badge">Sistema</span>
</template> </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"> <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"> <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"/> <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() { function handleContentRendered() {
showGallery.value = false showGallery.value = false
canvasStore.isAnonymousCanvas = false
}
function handleStartAnonymous() {
showGallery.value = false
canvasStore.isAnonymousCanvas = true
} }
function handleClearCanvas() { function handleClearCanvas() {
showGallery.value = true showGallery.value = true
canvasStore.isAnonymousCanvas = false
const container = document.getElementById('canvas-content') const container = document.getElementById('canvas-content')
if (container) { if (container) {
// Remove all non-gallery content // Remove all non-gallery content
@@ -72,7 +79,7 @@ onUnmounted(() => {
<div class="canvas-container"> <div class="canvas-container">
<div id="canvas-content" class="canvas-content"> <div id="canvas-content" class="canvas-content">
<div v-if="showGallery" class="canvas-placeholder"> <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> </div>
</div> </div>

View File

@@ -14,6 +14,7 @@ import { useCanvasStore } from '../stores/canvas'
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'snapshot-restored'): void (e: 'snapshot-restored'): void
(e: 'component-loaded'): void (e: 'component-loaded'): void
(e: 'start-anonymous'): void
}>() }>()
const router = useRouter() const router = useRouter()
@@ -223,6 +224,19 @@ onMounted(() => {
<template v-else> <template v-else>
<!-- Project Canvases --> <!-- Project Canvases -->
<div class="gallery-grid"> <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 --> <!-- New canvas card -->
<div class="canvas-card new-card" @click="showNewForm = true" v-if="!showNewForm"> <div class="canvas-card new-card" @click="showNewForm = true" v-if="!showNewForm">
<div class="card-icon new-icon"> <div class="card-icon new-icon">

View File

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