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

app/pages/admin/groups/[id].vue

@@ -36,6 +36,56 @@
           </div>
         </div>
       </div>
+      <!-- Add Member Modal -->
+      <div v-if="showAddMemberModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4" @click.self="showAddMemberModal = false">
+        <div class="bg-slate-900 border border-slate-700 rounded-3xl p-8 w-full max-w-md shadow-2xl">
+          <h2 class="text-2xl font-bold text-white mb-6 flex items-center gap-2">
+            <span>👤</span> Добавить участника
+          </h2>
+          
+          <div class="space-y-4">
+            <div>
+              <label class="text-xs font-bold text-slate-500 uppercase tracking-wider block mb-2">Поиск пользователя</label>
+              <div class="relative">
+                <input 
+                  v-model="searchQuery" 
+                  @input="searchUsers"
+                  placeholder="Введите имя или email..."
+                  class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white outline-none focus:border-blue-500 transition"
+                />
+                <div v-if="searching" class="absolute right-4 top-3.5">
+                  <div class="animate-spin h-5 w-5 border-2 border-blue-500 border-t-transparent rounded-full"></div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Search Results -->
+            <div v-if="searchResults.length > 0" class="max-h-60 overflow-y-auto bg-slate-800/50 rounded-xl border border-slate-700 divide-y divide-slate-700">
+              <div v-for="u in searchResults" :key="u.id" class="p-3 flex items-center justify-between hover:bg-slate-700/50 transition">
+                <div class="flex flex-col">
+                  <span class="text-sm font-medium text-white">{{ u.username }}</span>
+                  <span class="text-[10px] text-slate-500">{{ u.email }}</span>
+                </div>
+                <button 
+                  @click="addMember(u.id)"
+                  class="px-3 py-1 bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold rounded-lg transition"
+                >
+                  Выбрать
+                </button>
+              </div>
+            </div>
+            <div v-else-if="searchQuery.length >= 2" class="text-center py-4 text-slate-500 text-sm">
+              Пользователи не найдены
+            </div>
+          </div>
+
+          <div class="mt-8">
+            <button @click="showAddMemberModal = false" class="w-full py-3 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl font-bold transition">
+              Закрыть
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -50,6 +100,58 @@ const auth = useAuth()
 const group = ref(null)
 const members = ref([])
 const showAddMemberModal = ref(false)
+const searchQuery = ref('')
+const searchResults = ref([])
+const searching = ref(false)
+
+const searchUsers = async () => {
+  if (searchQuery.value.length < 2) {
+    searchResults.value = []
+    return
+  }
+  searching.value = true
+  try {
+    const data = await $fetch('/api/users/search', {
+      params: { q: searchQuery.value },
+      headers: { Authorization: `Bearer ${auth.token.value}` }
+    })
+    searchResults.value = data.users || []
+  } catch (e) {
+    console.error('Search failed', e)
+  } finally {
+    searching.value = false
+  }
+}
+
+const addMember = async (userId) => {
+  try {
+    await $fetch(`/api/groups/${route.params.id}/add-member`, {
+      method: 'POST',
+      body: { userId, role: 'member' },
+      headers: { Authorization: `Bearer ${auth.token.value}` }
+    })
+    showAddMemberModal.value = false
+    searchQuery.value = ''
+    searchResults.value = []
+    await fetchGroup()
+  } catch (e) {
+    alert(e.data?.message || 'Ошибка при добавлении')
+  }
+}
+
+const removeMember = async (userId) => {
+  if (!confirm('Удалить участника из группы?')) return
+  try {
+    await $fetch(`/api/groups/${route.params.id}/members`, {
+      method: 'DELETE',
+      body: { userId },
+      headers: { Authorization: `Bearer ${auth.token.value}` }
+    })
+    await fetchGroup()
+  } catch (e) {
+    alert('Ошибка при удалении')
+  }
+}
 
 const fetchGroup = async () => {
   try {

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:

app/pages/index.vue

@@ -1,18 +1,21 @@
 <template>
-  <div class="min-h-[calc(100vh-3.5rem)] flex flex-col items-center justify-center p-4">
-    <div v-if="!isAuthenticated" class="text-center max-w-md">
-      <h1 class="text-4xl font-bold text-blue-400 mb-4">XFlow</h1>
-      <p class="text-slate-400 mb-8">Obsidian Canvas PWA. Управляй задачами визуально.</p>
+  <div class="min-h-[calc(100vh-4rem)] flex flex-col items-center justify-center p-4 md:p-8">
+    <div v-if="!isAuthenticated" class="text-center max-w-md px-4">
+      <h1 class="text-5xl md:text-6xl font-black text-blue-500 mb-6 tracking-tight">XFlow</h1>
+      <p class="text-slate-400 text-lg mb-10 leading-relaxed">Визуальное управление задачами в формате Obsidian Canvas.</p>
       <NuxtLink
         to="/login"
-        class="inline-block px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition"
+        class="w-full md:w-auto inline-block px-10 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-bold text-lg shadow-xl shadow-blue-900/40 transition-all transform active:scale-95"
       >
-        Войти
+        Начать работу
       </NuxtLink>
     </div>
 
     <div v-else class="w-full max-w-6xl">
-      <h1 class="text-2xl font-bold mb-6">Dashboard</h1>
+      <div class="flex items-center justify-between mb-8 px-2">
+        <h1 class="text-3xl md:text-4xl font-bold text-white">Дашборд</h1>
+        <div class="md:hidden w-10 h-10 bg-slate-800 rounded-full flex items-center justify-center text-xl">✨</div>
+      </div>
       <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
         <NuxtLink
           to="/canvases"