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