feat: visual access control in FlowEditor (read-only mode for viewers)

app/components/FlowEditor.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="h-screen w-full flex bg-slate-950">
     <!-- Node Palette -->
-    <div class="w-56 bg-slate-900 border-r border-slate-700 flex flex-col shrink-0 z-20">
+    <div v-if="userRole !== 'viewer'" class="w-56 bg-slate-900 border-r border-slate-700 flex flex-col shrink-0 z-20">
       <div class="p-3 border-b border-slate-700">
         <h3 class="text-sm font-bold text-slate-200">Узлы</h3>
       </div>
@@ -23,10 +23,10 @@
     <div class="flex-1 flex flex-col relative min-w-0">
       <!-- Toolbar -->
       <div class="h-10 bg-slate-900 border-b border-slate-700 flex items-center px-3 gap-2 z-20">
-        <input v-model="canvasName" @change="saveCanvas" class="text-sm font-semibold text-slate-300 mr-2 bg-transparent border border-transparent hover:border-slate-600 focus:border-blue-500 focus:bg-slate-800 outline-none rounded px-2 py-1 w-48 transition" title="Переименовать карту" />
+        <input v-model="canvasName" @change="saveCanvas" :disabled="userRole === 'viewer'" class="text-sm font-semibold text-slate-300 mr-2 bg-transparent border border-transparent hover:border-slate-600 focus:border-blue-500 focus:bg-slate-800 outline-none rounded px-2 py-1 w-48 transition" title="Переименовать карту" />
         
         <!-- Group Selection -->
-        <div class="flex items-center gap-1 bg-slate-800 border border-slate-700 rounded px-2 py-1">
+        <div v-if="userRole !== 'viewer'" class="flex items-center gap-1 bg-slate-800 border border-slate-700 rounded px-2 py-1">
           <span class="text-[10px] text-slate-500 uppercase font-bold mr-1">Группа:</span>
           <select v-model="selectedGroupId" @change="saveCanvas" class="bg-transparent text-xs text-slate-300 outline-none cursor-pointer hover:text-white transition">
             <option :value="null">Личная (нет)</option>
@@ -39,17 +39,22 @@
         <span v-if="isDirty" class="px-2 py-1 bg-yellow-600 text-yellow-100 rounded text-xs font-medium">
           ● Несохранено
         </span>
-        <button @click="addNodeAtCenter" class="px-2 py-1 bg-blue-600 hover:bg-blue-500 text-white rounded text-xs">+ Узел</button>
-        <button @click="saveCanvas" class="px-2 py-1 bg-emerald-600 hover:bg-emerald-500 text-white rounded text-xs">Сохранить</button>
-        <button @click="deleteCanvas" class="p-2 text-slate-400 hover:text-red-400 hover:bg-red-400/10 rounded-lg transition" title="Удалить карту">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-          </svg>
-        </button>
+        
+        <template v-if="userRole !== 'viewer'">
+          <button @click="addNodeAtCenter" class="px-2 py-1 bg-blue-600 hover:bg-blue-500 text-white rounded text-xs">+ Узел</button>
+          <button @click="saveCanvas" class="px-2 py-1 bg-emerald-600 hover:bg-emerald-500 text-white rounded text-xs">Сохранить</button>
+          <button v-if="userRole === 'owner' || userRole === 'admin'" @click="deleteCanvas" class="p-2 text-slate-400 hover:text-red-400 hover:bg-red-400/10 rounded-lg transition" title="Удалить карту">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+            </svg>
+          </button>
+          <button @click="deleteSelected" :disabled="!selectedNode" class="px-2 py-1 bg-red-600 hover:bg-red-500 disabled:bg-slate-700 disabled:text-slate-500 text-white rounded text-xs">Удалить</button>
+        </template>
+
         <button @click="exportObsidian" class="px-2 py-1 bg-purple-600 hover:bg-purple-500 text-white rounded text-xs">Экспорт</button>
-        <button @click="deleteSelected" :disabled="!selectedNode" class="px-2 py-1 bg-red-600 hover:bg-red-500 disabled:bg-slate-700 disabled:text-slate-500 text-white rounded text-xs">Удалить</button>
+        
         <div class="flex-1"></div>
-        <button @click="manualGitSync" :disabled="gitSync.isSyncing.value" 
+        <button v-if="userRole !== 'viewer'" @click="manualGitSync" :disabled="gitSync.isSyncing.value" 
           class="px-2 py-1 bg-orange-600 hover:bg-orange-500 disabled:bg-slate-700 disabled:text-slate-500 text-white rounded text-xs flex items-center gap-1">
           <span>{{ gitSync.syncStatusIcon.value }}</span>
           Git
@@ -60,6 +65,9 @@
       <!-- Vue Flow Canvas -->
       <div class="flex-1 relative w-full h-full" @drop="onDrop" @dragover.prevent>
         <VueFlow v-model="elements" :default-zoom="0.8" :min-zoom="0.2" :max-zoom="2" fit-view-on-init
+          :nodes-draggable="userRole !== 'viewer'"
+          :nodes-connectable="userRole !== 'viewer'"
+          :elements-selectable="true"
           @node-double-click="onNodeDoubleClick" @node-click="onNodeClick" @pane-click="onPaneClick" @connect="onConnect"
           @node-drag-start="onNodeDragStart" @node-drag="onNodeDrag" @node-drag-stop="onNodeDragStop"
           class="bg-slate-950 w-full h-full">
@@ -218,6 +226,7 @@ const selectedNode = ref(null)
 const canvasName = ref(props.canvasId)
 const selectedGroupId = ref(null)
 const groupsList = ref([])
+const userRole = ref('viewer')
 
 const nodeTypes = [
   { type: 'text', name: 'Текст', icon: '📝', description: 'Markdown заметка' },
@@ -231,11 +240,12 @@ const nodeTypes = [
 // Load canvas from API
 const loadData = async () => {
   const data = await loadCanvas(props.canvasId)
-  elements.value = transformToFlowElements(data)
-  canvasName.value = data.name || props.canvasId
-  selectedGroupId.value = data.groupId || null
+  elements.value = transformToFlowElements(data.canvas)
+  canvasName.value = data.canvas.name || props.canvasId
+  selectedGroupId.value = data.canvas.groupId || null
+  userRole.value = data.role || 'viewer'
   // Mark initial state as saved
-  markAsSaved(data)
+  markAsSaved(data.canvas)
 }
 
 // Transform Obsidian canvas to Vue Flow elements

app/server/api/canvas/[id].delete.ts

@@ -9,13 +9,23 @@ export default defineEventHandler(async (event) => {
   const canvas = await prisma.canvas.findUnique({ where: { id } })
   if (!canvas) throw createError({ statusCode: 404, message: 'Canvas not found' })
   
-  // Allow deletion if owner OR if user is admin
-  const isOwner = canvas.ownerId === user.id
-  const isAdmin = user.role === 'admin'
+  // 1. Проверка прав
+  let canDelete = canvas.ownerId === user.id || user.role === 'admin'
 
-  if (!isOwner && !isAdmin) {
-    console.warn(`[Delete Access Denied] User ${user.id} (${user.role}) tried to delete canvas ${id} owned by ${canvas.ownerId}`)
-    throw createError({ statusCode: 403, message: 'У вас нет прав на удаление этой карты. Она принадлежит другому пользователю.' })
+  if (!canDelete && canvas.groupId) {
+    const membership = await prisma.groupMember.findUnique({
+      where: {
+        userId_groupId: { userId: user.id, groupId: canvas.groupId }
+      }
+    })
+    // Только админ группы может удалять чужие карты внутри группы
+    if (membership && membership.role === 'admin') {
+      canDelete = true
+    }
+  }
+
+  if (!canDelete) {
+    throw createError({ statusCode: 403, message: 'Удалять карты может только владелец или администратор группы.' })
   }
 
   await prisma.canvas.delete({ where: { id } })

app/server/api/canvas/[id].get.ts

@@ -8,18 +8,21 @@ export default defineEventHandler(async (event) => {
   const canvas = await prisma.canvas.findUnique({ where: { id } })
   if (!canvas) throw createError({ statusCode: 404, message: 'Canvas not found' })
 
-  if (canvas.isPublic) return canvas
+  const user = tryLazyEventHandler(event, () => requireAuth(event)) || { id: null, role: 'guest' }
 
-  const user = requireAuth(event)
-
-  if (canvas.ownerId === user.id) return canvas
-
-  if (canvas.groupId) {
+  // Определение роли
+  let userRole = 'viewer'
+  if (user.id === canvas.ownerId) userRole = 'owner'
+  else if (user.role === 'admin') userRole = 'admin'
+  else if (canvas.groupId) {
     const membership = await prisma.groupMember.findUnique({
-      where: { userId_groupId: { userId: user.id, groupId: canvas.groupId } }
+      where: { userId_groupId: { userId: user.id as string, groupId: canvas.groupId } }
     })
-    if (membership) return canvas
+    if (membership) userRole = membership.role
+    else if (!canvas.isPublic) throw createError({ statusCode: 403, message: 'Access denied' })
+  } else if (!canvas.isPublic) {
+    throw createError({ statusCode: 403, message: 'Access denied' })
   }
 
-  throw createError({ statusCode: 403, message: 'Access denied' })
+  return { canvas, role: userRole }
 })

app/server/api/canvas/[id].put.ts

@@ -11,10 +11,23 @@ export default defineEventHandler(async (event) => {
   const existing = await prisma.canvas.findUnique({ where: { id } })
   if (!existing) throw createError({ statusCode: 404, message: 'Canvas not found' })
   
-  // Allow if owner, or if admin, or if canvas is public (for collaborative editing)
-  if (existing.ownerId !== user.id && user.role !== 'admin' && !existing.isPublic) {
-    console.log('[DEBUG 403]', { ownerId: existing.ownerId, userId: user.id, userRole: user.role, isPublic: existing.isPublic })
-    throw createError({ statusCode: 403, message: 'Access denied' })
+  // 1. Проверка прав
+  let canEdit = existing.ownerId === user.id || user.role === 'admin' || existing.isPublic
+
+  if (!canEdit && existing.groupId) {
+    const membership = await prisma.groupMember.findUnique({
+      where: {
+        userId_groupId: { userId: user.id, groupId: existing.groupId }
+      }
+    })
+    // Редакторы и админы группы могут править
+    if (membership && (membership.role === 'admin' || membership.role === 'editor')) {
+      canEdit = true
+    }
+  }
+
+  if (!canEdit) {
+    throw createError({ statusCode: 403, message: 'У вас недостаточно прав для редактирования этой карты' })
   }
 
   const { name, nodes, edges, isPublic, groupId } = body