flfeders/FEDEO
2
1
Fork 0
Code Issues 95 Pull Requests Actions Packages Projects 22 Releases Wiki Activity

KI-AGENT: Chatgruppen einklappbar machen

Browse Source
This commit is contained in:
florianfederspiel
2026-05-19 08:33:17 +02:00
parent 0fb469c9b0
commit 227a88b24b
1 changed files with 72 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
frontend/pages/communication/chat.vue
View File

@@ -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="[
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)"
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 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 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 }}
</span>
</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>
<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"
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>