feat: user search, group members management, and fixed canvases filtering

app/pages/canvases.vue

@@ -25,8 +25,8 @@
         <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 @click="activeTab = 'team'" :class="tabClass('team')" 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">
           Публичные
@@ -57,21 +57,32 @@
           </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">
-                Дублировать
+            <div class="flex gap-3">
+              <button @click.stop="duplicateCanvas(canvas.id)" class="text-xs text-slate-400 hover:text-blue-400 transition flex items-center gap-1">
+                <span>📑</span> Дублировать
               </button>
-              <button @click.stop="exportCanvas(canvas.id)" class="text-xs text-slate-400 hover:text-emerald-400 transition">
-                Экспорт
+              <button @click.stop="exportCanvas(canvas.id)" class="text-xs text-slate-400 hover:text-emerald-400 transition flex items-center gap-1">
+                <span>💾</span> Экспорт
+              </button>
+            </div>
+            
+            <div class="flex items-center gap-1">
+              <button v-if="canDeleteCanvas(canvas)" @click.stop="openSettings(canvas)" 
+                class="p-1.5 text-slate-500 hover:text-blue-400 hover:bg-blue-400/10 rounded transition-colors"
+                title="Настройки доступа">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+              </button>
+              <button v-if="canDeleteCanvas(canvas)" @click.stop="deleteCanvas(canvas.id)" 
+                class="p-1.5 text-slate-500 hover:text-red-400 hover:bg-red-400/10 rounded transition-colors"
+                title="Удалить карту">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>
             </div>
-            <button v-if="canDeleteCanvas(canvas)" @click.stop="deleteCanvas(canvas.id)" 
-              class="p-1.5 text-slate-500 hover:text-red-400 hover:bg-red-400/10 rounded transition-colors"
-              title="Удалить карту">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>
           </div>
         </div>
       </div>
@@ -85,33 +96,97 @@
     </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 v-if="showCreateModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4" @click.self="showCreateModal = false">
+      <div class="bg-slate-900 border border-slate-700 rounded-2xl p-6 w-full max-w-md shadow-2xl">
+        <h2 class="text-xl font-bold text-slate-100 mb-6 flex items-center gap-2">
+          <span>✨</span> Новая Карта
+        </h2>
+        <form @submit.prevent="createCanvas" class="space-y-6">
           <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 Карта" />
+            <label class="text-xs font-bold text-slate-500 uppercase tracking-wider block mb-2">Название Карты</label>
+            <input v-model="newCanvas.name" required class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white focus:border-blue-500 outline-none transition" 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">
+            <label class="text-xs font-bold text-slate-500 uppercase tracking-wider block mb-2">Видимость</label>
+            <select v-model="newCanvas.visibility" class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white focus:border-blue-500 outline-none transition appearance-none">
               <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">
+            <label class="text-xs font-bold text-slate-500 uppercase tracking-wider block mb-2">Поделиться с Группой (опционально)</label>
+            <select v-model="newCanvas.groupId" class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white focus:border-blue-500 outline-none transition appearance-none">
               <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">
+          <div class="flex gap-3 pt-4">
+            <button type="submit" class="flex-1 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold transition shadow-lg shadow-blue-900/20">
               Создать
             </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 type="button" @click="showCreateModal = false" class="flex-1 py-3 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl font-bold transition">
+              Отмена
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- Settings Modal -->
+    <div v-if="showSettingsModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4" @click.self="closeSettings">
+      <div class="bg-slate-900 border border-slate-700 rounded-2xl p-6 w-full max-w-md shadow-2xl">
+        <h2 class="text-xl font-bold text-slate-100 mb-6 flex items-center gap-2">
+          <span>⚙️</span> Настройки доступа
+        </h2>
+        
+        <form @submit.prevent="saveSettings" class="space-y-6">
+          <div>
+            <label class="text-xs font-bold text-slate-500 uppercase tracking-wider block mb-2">Название Карты</label>
+            <input 
+              v-model="editCanvas.name" 
+              required 
+              class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white focus:border-blue-500 outline-none transition" 
+            />
+          </div>
+
+          <div>
+            <label class="text-xs font-bold text-slate-500 uppercase tracking-wider block mb-2">Уровень доступа</label>
+            <div class="grid grid-cols-2 gap-3">
+              <button 
+                type="button"
+                @click="editCanvas.isPublic = false"
+                :class="!editCanvas.isPublic ? 'bg-blue-600 border-blue-500 text-white' : 'bg-slate-800 border-slate-700 text-slate-400'"
+                class="px-4 py-2 border rounded-xl text-sm font-medium transition"
+              >
+                Приватная
+              </button>
+              <button 
+                type="button"
+                @click="editCanvas.isPublic = true"
+                :class="editCanvas.isPublic ? 'bg-emerald-600 border-emerald-500 text-white' : 'bg-slate-800 border-slate-700 text-slate-400'"
+                class="px-4 py-2 border rounded-xl text-sm font-medium transition"
+              >
+                Публичная
+              </button>
+            </div>
+            <p class="text-[10px] text-slate-500 mt-2">
+              {{ editCanvas.isPublic ? 'Любой пользователь сможет просматривать эту карту.' : 'Карта доступна только вам и членам выбранной группы.' }}
+            </p>
+          </div>
+
+          <div v-if="userGroups.length > 0">
+            <label class="text-xs font-bold text-slate-500 uppercase tracking-wider block mb-2">Принадлежность Группе</label>
+            <select v-model="editCanvas.groupId" class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white focus:border-blue-500 outline-none transition appearance-none">
+              <option :value="null">Без группы (Личная)</option>
+              <option v-for="group in userGroups" :key="group.id" :value="group.id">{{ group.name }}</option>
+            </select>
+          </div>
+
+          <div class="flex gap-3 pt-4">
+            <button type="submit" class="flex-1 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold transition shadow-lg shadow-blue-900/20" :disabled="saving">
+              {{ saving ? 'Сохранение...' : 'Сохранить' }}
+            </button>
+            <button type="button" @click="closeSettings" class="flex-1 py-3 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl font-bold transition">
               Отмена
             </button>
           </div>
@@ -154,6 +229,47 @@ const activeTab = ref('personal')
     groupId: ''
   })
 
+const showSettingsModal = ref(false)
+const saving = ref(false)
+const editCanvas = reactive({
+  id: '',
+  name: '',
+  isPublic: false,
+  groupId: null
+})
+
+const openSettings = (canvas) => {
+  editCanvas.id = canvas.id
+  editCanvas.name = canvas.name
+  editCanvas.isPublic = canvas.isPublic
+  editCanvas.groupId = canvas.groupId
+  showSettingsModal.value = true
+}
+
+const closeSettings = () => {
+  showSettingsModal.value = false
+}
+
+const saveSettings = async () => {
+  saving.value = true
+  try {
+    await authFetch(`/api/canvases/${editCanvas.id}`, {
+      method: 'PATCH',
+      body: {
+        name: editCanvas.name,
+        isPublic: editCanvas.isPublic,
+        groupId: editCanvas.groupId
+      }
+    })
+    await loadData()
+    closeSettings()
+  } catch (error) {
+    alert('Ошибка при сохранении: ' + (error.data?.message || error.message))
+  } finally {
+    saving.value = false
+  }
+}
+
 const currentUserId = computed(() => user.value?.id || '')
 
 // Load data
@@ -173,14 +289,13 @@ const loadData = async () => {
 // Filter canvases based on active tab
 const filteredCanvases = computed(() => {
   const userId = currentUserId.value
+  if (!userId) return []
+
   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
-      )
+      return canvases.value.filter(c => c.ownerId === userId && !c.groupId)
+    case 'team':
+      return canvases.value.filter(c => !!c.groupId)
     case 'public':
       return canvases.value.filter(c => c.isPublic)
     default: