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,12 +961,28 @@ onBeforeUnmount(() => {
             :key="group.key"
             class="space-y-1"
         >
-          <div class="flex items-center justify-between px-2">
+          <button
-            <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+              type="button"
+              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"
+              :aria-expanded="!isRoomGroupCollapsed(group.key)"
+              @click="toggleRoomGroup(group.key)"
+          >
+            <span class="flex min-w-0 items-center gap-2">
+              <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 }}
-            </p>
+              </span>
-            <span class="text-[11px] text-muted">{{ group.rooms.length }}</span>
+            </span>
-          </div>
+            <span class="text-[11px]">{{ group.rooms.length }}</span>
+          </button>
+          <div
+              v-if="!isRoomGroupCollapsed(group.key)"
+              class="space-y-1"
+          >
             <button
                 v-for="room in group.rooms"
                 :key="room.key"
@@ -1001,6 +1027,7 @@ onBeforeUnmount(() => {
                 offen
               </UBadge>
             </button>
+          </div>
         </section>
       </div>
     </aside>