feat: prisma schema, groups API, deploy workflow

app/pages/canvases.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="min-h-screen bg-slate-950">
+    <div class="max-w-7xl mx-auto p-6">
+      <div class="flex items-center justify-between mb-6">
+        <h1 class="text-2xl font-bold text-slate-100">Мои Карты</h1>
+        <button @click="showCreateModal = true" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition">
+          + Новая Карта
+        </button>
+      </div>
+
+      <!-- Tabs -->
+      <div class="flex gap-1 mb-6 bg-slate-900 rounded-lg p-1 w-fit">
+        <button @click="activeTab = 'personal'" :class="tabClass('personal')" class="px-4 py-2 rounded text-sm font-medium transition">
+          Личные
+        </button>
+        <button @click="activeTab = 'shared'" :class="tabClass('shared')" class="px-4 py-2 rounded text-sm font-medium transition">
+          Общие
+        </button>
+        <button @click="activeTab = 'public'" :class="tabClass('public')" class="px-4 py-2 rounded text-sm font-medium transition">
+          Публичные
+        </button>
+      </div>
+
+      <!-- Canvas Grid -->
+      <div v-if="filteredCanvases.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div v-for="canvas in filteredCanvases" :key="canvas.id" 
+          class="bg-slate-900 border border-slate-700 rounded-xl p-4 hover:border-slate-600 transition cursor-pointer group"
+          @click="openCanvas(canvas.id)">
+          <div class="flex items-start justify-between mb-3">
+            <div>
+              <h3 class="font-semibold text-slate-200 group-hover:text-blue-400 transition">{{ canvas.name }}</h3>
+              <p class="text-xs text-slate-500 mt-1">{{ canvas.nodeCount }} nodes • {{ formatDate(canvas.updatedAt) }}</p>
+            </div>
+            <div class="flex items-center gap-1">
+              <span v-if="canvas.isPublic" class="text-xs px-2 py-1 bg-emerald-900/50 text-emerald-300 rounded">Публичная</span>
+              <span v-else-if="canvas.groupId" class="text-xs px-2 py-1 bg-blue-900/50 text-blue-300 rounded">Общая</span>
+              <span v-else class="text-xs px-2 py-1 bg-slate-700 text-slate-400 rounded">Приватная</span>
+            </div>
+          </div>
+          
+          <div class="text-xs text-slate-400">
+            <span v-if="canvas.ownerId === currentUserId">Ваша карта</span>
+            <span v-else>Поделился {{ getOwnerName(canvas.ownerId) }}</span>
+            <span v-if="canvas.groupId" class="ml-2">• {{ getGroupName(canvas.groupId) }}</span>
+          </div>
+
+          <div class="mt-3 pt-3 border-t border-slate-800 flex justify-between items-center">
+            <div class="flex gap-2">
+              <button @click.stop="duplicateCanvas(canvas.id)" class="text-xs text-slate-400 hover:text-blue-400 transition">
+                Дублировать
+              </button>
+              <button @click.stop="exportCanvas(canvas.id)" class="text-xs text-slate-400 hover:text-emerald-400 transition">
+                Экспорт
+              </button>
+            </div>
+            <button v-if="canDeleteCanvas(canvas)" @click.stop="deleteCanvas(canvas.id)" 
+              class="text-xs text-slate-400 hover:text-red-400 transition">
+              Удалить
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="text-center py-12">
+        <div class="text-slate-500 mb-4">Карты не найдены</div>
+        <button @click="showCreateModal = true" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition">
+          Создать первую карту
+        </button>
+      </div>
+    </div>
+
+    <!-- Create Modal -->
+    <div v-if="showCreateModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50" @click.self="showCreateModal = false">
+      <div class="bg-slate-900 border border-slate-700 rounded-xl p-6 w-full max-w-md">
+        <h2 class="text-lg font-semibold text-slate-200 mb-4">Создать Новую Карту</h2>
+        <form @submit.prevent="createCanvas" class="space-y-4">
+          <div>
+            <label class="text-sm text-slate-400 block mb-1">Название Карты</label>
+            <input v-model="newCanvas.name" required class="w-full px-3 py-2 bg-slate-800 border border-slate-600 rounded-lg text-white" placeholder="Моя Awesome Карта" />
+          </div>
+          <div>
+            <label class="text-sm text-slate-400 block mb-1">Видимость</label>
+            <select v-model="newCanvas.visibility" class="w-full px-3 py-2 bg-slate-800 border border-slate-600 rounded-lg text-white">
+              <option value="private">Приватная (только вы)</option>
+              <option value="public">Публичная (любой может просматривать)</option>
+            </select>
+          </div>
+          <div v-if="userGroups.length > 0">
+            <label class="text-sm text-slate-400 block mb-1">Поделиться с Группой (опционально)</label>
+            <select v-model="newCanvas.groupId" class="w-full px-3 py-2 bg-slate-800 border border-slate-600 rounded-lg text-white">
+              <option value="">Без группы</option>
+              <option v-for="group in userGroups" :key="group.id" :value="group.id">{{ group.name }}</option>
+            </select>
+          </div>
+          <div class="flex gap-3 pt-2">
+            <button type="submit" class="flex-1 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition">
+              Создать
+            </button>
+            <button type="button" @click="showCreateModal = false" class="flex-1 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg font-medium transition">
+              Отмена
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: 'auth'
+})
+
+const auth = useAuth()
+const user = computed(() => auth.user)
+const authFetch = (url, opts = {}) => $fetch(url, {
+  ...opts,
+  headers: { Authorization: `Bearer ${auth.token.value}`, ...opts.headers }
+})
+
+const canvases = ref([])
+const userGroups = ref([])
+const showCreateModal = ref(false)
+const activeTab = ref('personal')
+
+  const newCanvas = reactive({
+    name: '',
+    visibility: 'private',
+    groupId: ''
+  })
+
+const currentUserId = computed(() => auth.user.value?.id || '')
+
+// Load data
+const loadData = async () => {
+  try {
+    const [canvasesRes, groupsRes] = await Promise.all([
+      authFetch('/api/canvas'),
+      authFetch('/api/user/groups')
+    ])
+    canvases.value = canvasesRes.canvases || []
+    userGroups.value = groupsRes.groups || []
+  } catch (error) {
+    console.error('Failed to load data:', error)
+  }
+}
+
+// Filter canvases based on active tab
+const filteredCanvases = computed(() => {
+  const userId = currentUserId.value
+  switch (activeTab.value) {
+    case 'personal':
+      return canvases.value.filter(c => !c.groupId)
+    case 'shared':
+      return canvases.value.filter(c => 
+        c.groupId && userGroups.value.some(g => g.id === c.groupId) ||
+        c.ownerId !== userId && c.isPublic
+      )
+    case 'public':
+      return canvases.value.filter(c => c.isPublic)
+    default:
+      return canvases.value
+  }
+})
+
+// Tab styling
+const tabClass = (tab) => {
+  return activeTab.value === tab
+    ? 'bg-slate-800 text-slate-200'
+    : 'text-slate-400 hover:text-slate-300'
+}
+
+// Canvas actions
+const openCanvas = (id) => {
+  navigateTo(`/canvas/${id}`)
+}
+
+const createCanvas = async () => {
+  try {
+    const payload = {
+      name: newCanvas.name,
+      isPublic: newCanvas.visibility === 'public',
+      groupId: newCanvas.groupId || undefined
+    }
+    const result = await authFetch('/api/canvas', { method: 'POST', body: payload })
+    showCreateModal.value = false
+    newCanvas.name = ''
+    newCanvas.visibility = 'private'
+    newCanvas.groupId = ''
+    await loadData()
+    navigateTo(`/canvas/${result.canvas.id}`)
+  } catch (error) {
+    console.error('Failed to create canvas:', error)
+  }
+}
+
+const duplicateCanvas = async (id) => {
+  try {
+    const result = await authFetch(`/api/canvas/${id}/duplicate`, { method: 'POST' })
+    await loadData()
+  } catch (error) {
+    console.error('Failed to duplicate canvas:', error)
+  }
+}
+
+const exportCanvas = async (id) => {
+  try {
+    const canvas = await authFetch(`/api/canvas/${id}`)
+    const blob = new Blob([JSON.stringify(canvas, null, 2)], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `${canvas.name || 'canvas'}.canvas`
+    a.click()
+    URL.revokeObjectURL(url)
+  } catch (error) {
+    console.error('Failed to export canvas:', error)
+  }
+}
+
+const canDeleteCanvas = (canvas) => {
+  return canvas.ownerId === currentUserId.value
+}
+
+const deleteCanvas = async (id) => {
+  if (!confirm('Вы уверены, что хотите удалить эту карту?')) return
+  try {
+    await authFetch(`/api/canvas/${id}`, { method: 'DELETE' })
+    await loadData()
+  } catch (error) {
+    console.error('Failed to delete canvas:', error)
+  }
+}
+
+// Helper functions
+const formatDate = (date) => {
+  return new Date(date).toLocaleDateString('ru-RU', { 
+    month: 'short', 
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+const getOwnerName = (ownerId) => {
+  return ownerId === currentUserId.value ? 'вы' : `Пользователь ${ownerId}`
+}
+
+const getGroupName = (groupId) => {
+  const group = userGroups.value.find(g => g.id === groupId)
+  return group?.name || 'Unknown Group'
+}
+
+onMounted(loadData)
+</script>