KI-AGENT: Chatgruppen einklappbar machen

frontend/pages/communication/chat.vue

@@ -15,6 +15,7 @@ const matrixMembers = ref([])
 const matrixMessageDraft = ref("")
 const matrixMessagesViewport = ref(null)
 const roomCreateOpen = ref(false)
+const collapsedRoomGroups = ref({})
 const matrixCallOpen = ref(false)
 const matrixCallMode = ref("video")
 const matrixCallLoading = ref(false)
@@ -167,6 +168,15 @@ const groupedRooms = computed(() => [
   }
 ].filter((group) => group.rooms.length > 0))
 
+const isRoomGroupCollapsed = (groupKey) => Boolean(collapsedRoomGroups.value[groupKey])
+
+const toggleRoomGroup = (groupKey) => {
+  collapsedRoomGroups.value = {
+    ...collapsedRoomGroups.value,
+    [groupKey]: !isRoomGroupCollapsed(groupKey)
+  }
+}
+
 const normalizeRoomKey = (value) => {
   const normalized = String(value || "")
     .toLowerCase()
@@ -951,56 +961,73 @@ onBeforeUnmount(() => {
             :key="group.key"
             class="space-y-1"
         >
-          <div class="flex items-center justify-between px-2">
-            <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
-              {{ group.label }}
-            </p>
-            <span class="text-[11px] text-muted">{{ group.rooms.length }}</span>
-          </div>
           <button
-              v-for="room in group.rooms"
-              :key="room.key"
               type="button"
-              class="flex w-full items-center gap-3 rounded-md px-3 py-2 text-left transition"
+              class="flex w-full items-center justify-between rounded-md px-2 py-1 text-left text-muted transition hover:bg-muted hover:text-highlighted"
-              :class="[
+              :aria-expanded="!isRoomGroupCollapsed(group.key)"
-                room.disabled ? 'cursor-not-allowed opacity-50' : 'text-highlighted hover:bg-muted',
+              @click="toggleRoomGroup(group.key)"
-                room.key === activeRoomKey ? 'bg-muted ring-1 ring-primary/20' : ''
-              ]"
-              :disabled="room.disabled"
-              @click="setActiveRoom(room)"
           >
-            <span class="flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+            <span class="flex min-w-0 items-center gap-2">
-              <UIcon :name="room.icon || 'i-heroicons-chat-bubble-left-right'" class="size-5" />
+              <UIcon
+                  name="i-heroicons-chevron-right"
+                  class="size-3.5 shrink-0 transition-transform"
+                  :class="!isRoomGroupCollapsed(group.key) ? 'rotate-90' : ''"
+              />
+              <span class="truncate text-[11px] font-semibold uppercase tracking-wide">
+                {{ group.label }}
+              </span>
             </span>
-            <span class="min-w-0 flex-1">
+            <span class="text-[11px]">{{ group.rooms.length }}</span>
-              <span class="block truncate text-sm font-medium">{{ room.name }}</span>
-              <span class="block truncate text-xs text-muted">{{ room.description }}</span>
-            </span>
-            <UBadge
-                v-if="roomProvisioningKey === room.key"
-                color="primary"
-                variant="soft"
-                size="xs"
-            >
-              lädt
-            </UBadge>
-            <UBadge
-                v-else-if="room.exists"
-                color="success"
-                variant="soft"
-                size="xs"
-            >
-              aktiv
-            </UBadge>
-            <UBadge
-                v-else-if="!room.disabled"
-                color="neutral"
-                variant="soft"
-                size="xs"
-            >
-              offen
-            </UBadge>
           </button>
+          <div
+              v-if="!isRoomGroupCollapsed(group.key)"
+              class="space-y-1"
+          >
+            <button
+                v-for="room in group.rooms"
+                :key="room.key"
+                type="button"
+                class="flex w-full items-center gap-3 rounded-md px-3 py-2 text-left transition"
+                :class="[
+                  room.disabled ? 'cursor-not-allowed opacity-50' : 'text-highlighted hover:bg-muted',
+                  room.key === activeRoomKey ? 'bg-muted ring-1 ring-primary/20' : ''
+                ]"
+                :disabled="room.disabled"
+                @click="setActiveRoom(room)"
+            >
+              <span class="flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+                <UIcon :name="room.icon || 'i-heroicons-chat-bubble-left-right'" class="size-5" />
+              </span>
+              <span class="min-w-0 flex-1">
+                <span class="block truncate text-sm font-medium">{{ room.name }}</span>
+                <span class="block truncate text-xs text-muted">{{ room.description }}</span>
+              </span>
+              <UBadge
+                  v-if="roomProvisioningKey === room.key"
+                  color="primary"
+                  variant="soft"
+                  size="xs"
+              >
+                lädt
+              </UBadge>
+              <UBadge
+                  v-else-if="room.exists"
+                  color="success"
+                  variant="soft"
+                  size="xs"
+              >
+                aktiv
+              </UBadge>
+              <UBadge
+                  v-else-if="!room.disabled"
+                  color="neutral"
+                  variant="soft"
+                  size="xs"
+              >
+                offen
+              </UBadge>
+            </button>
+          </div>
         </section>
       </div>
     </aside>