From 7aa72e6b3b833416f86dcaedc5e005c828a8c4a2 Mon Sep 17 00:00:00 2001
From: Rik Dekker <rik@shalution.nl>
Date: Thu, 19 Feb 2026 17:24:19 +0100
Subject: [PATCH 01/12] feat(resources): add visual room browser with building
 grouping and filters

Replace the minimal resource picker with a comprehensive room browser
that loads all room principals upfront and provides real-time
availability checking, client-side filtering, and building-based
grouping.

Changes:
- ResourceList.vue: full rewrite with search, available-only toggle,
  min capacity filter, dynamic building and facility chips, collapsible
  building groups, and room cards with availability status
- ResourceRoomCard.vue: new component showing room name, availability
  badge, capacity, floor, room type, and add/remove action
- principal.js: extract room-specific DAV properties (seating capacity,
  room type, features, building address, room number) and derive a
  structured location string for the LOCATION field
- resourceProps.js: add formatFacility() helper and extend
  getAllRoomTypes() with additional room types

Signed-off-by: Rik Dekker <rik@shalution.nl>
---
 .../Editor/Resources/ResourceList.vue         | 619 ++++++++++++++----
 .../Editor/Resources/ResourceRoomCard.vue     | 194 ++++++
 src/models/principal.js                       |  42 ++
 src/models/resourceProps.js                   |  31 +
 4 files changed, 773 insertions(+), 113 deletions(-)
 create mode 100644 src/components/Editor/Resources/ResourceRoomCard.vue

diff --git a/src/components/Editor/Resources/ResourceList.vue b/src/components/Editor/Resources/ResourceList.vue
index aad83b00f8..8a40c833bf 100644
--- a/src/components/Editor/Resources/ResourceList.vue
+++ b/src/components/Editor/Resources/ResourceList.vue
@@ -4,45 +4,140 @@
 -->
 
 <template>
-	<div>
-		<span v-if="!(!resources.length && !suggestedRooms.length)" class="app-full-subtitle"> <MapMarker :size="20" /> {{ t('calendar', 'Resources') }}</span>
-
-		<ResourceListSearch
+	<div class="resource-picker">
+		<span class="app-full-subtitle">
+			<MapMarker :size="20" />
+			{{ $t('calendar', 'Rooms') }}
+		</span>
+
+		<!-- Search and filter -->
+		<div
 			v-if="!isReadOnly && hasUserEmailAddress && resourceBookingEnabled"
-			:alreadyInvitedEmails="alreadyInvitedEmails"
-			:calendarObjectInstance="calendarObjectInstance"
-			@addResource="addResource" />
-
-		<div class="resource-list">
-			<ResourceListItem
-				v-for="resource in resources"
-				:key="resource.email"
-				:resource="resource"
-				:isReadOnly="isReadOnly"
-				:organizerDisplayName="organizerDisplayName"
-				:isViewedByOrganizer="isViewedByOrganizer"
-				@removeResource="removeResource" />
-
-			<ResourceListItem
-				v-for="room in suggestedRooms"
-				:key="room.email + '-suggested'"
-				:resource="room"
-				:isReadOnly="false"
-				:organizerDisplayName="organizerDisplayName"
-				:isSuggestion="true"
-				:isViewedByOrganizer="isViewedByOrganizer"
-				@addSuggestion="addResource" />
+			class="resource-picker__filters">
+			<NcTextField
+				:value="filterText"
+				:placeholder="$t('calendar', 'Search rooms...')"
+				:show-trailing-button="filterText.length > 0"
+				trailing-button-icon="close"
+				@update:value="filterText = $event"
+				@trailing-button-click="filterText = ''" />
+
+			<div class="resource-picker__filters__row">
+				<NcCheckboxRadioSwitch
+					v-model="filterAvailableOnly"
+					type="switch">
+					{{ $t('calendar', 'Available only') }}
+				</NcCheckboxRadioSwitch>
+				<div class="resource-picker__capacity">
+					<label for="min-capacity">{{ $t('calendar', 'Min.') }}</label>
+					<input
+						id="min-capacity"
+						v-model.number="filterMinCapacity"
+						type="number"
+						min="0"
+						:placeholder="$t('calendar', 'pers.')"
+						class="resource-picker__capacity-input" />
+				</div>
+			</div>
+
+			<!-- Dynamic building chips -->
+			<div v-if="allBuildings.length > 1" class="resource-picker__chips">
+				<span class="resource-picker__chips-label">
+					<OfficeBuildingOutline :size="14" />
+				</span>
+				<button
+					v-for="building in allBuildings"
+					:key="'b-' + building"
+					class="resource-picker__chip"
+					:class="{ 'resource-picker__chip--active': activeBuildings.includes(building) }"
+					@click="toggleBuilding(building)">
+					{{ building }}
+				</button>
+			</div>
+
+			<!-- Dynamic facility chips -->
+			<div v-if="allFacilities.length > 0" class="resource-picker__chips">
+				<span class="resource-picker__chips-label">
+					<Wrench :size="14" />
+				</span>
+				<button
+					v-for="facility in allFacilities"
+					:key="facility.id"
+					class="resource-picker__chip resource-picker__chip--facility"
+					:class="{ 'resource-picker__chip--active': activeFacilities.includes(facility.id) }"
+					@click="toggleFacility(facility.id)">
+					{{ facility.label }}
+				</button>
+			</div>
+		</div>
+
+		<!-- Loading state -->
+		<div v-if="isLoadingAvailability" class="resource-picker__loading">
+			<NcLoadingIcon :size="32" />
+		</div>
+
+		<!-- Grouped room list -->
+		<div v-else class="resource-picker__list">
+			<div
+				v-for="group in groupedRooms"
+				:key="group.name"
+				class="resource-picker__group">
+				<button
+					class="resource-picker__group-header"
+					@click="toggleGroup(group.name)">
+					<ChevronDown
+						v-if="expandedGroups[group.name]"
+						:size="18" />
+					<ChevronRight
+						v-else
+						:size="18" />
+					<span class="resource-picker__group-name">{{ group.name }}</span>
+					<span class="resource-picker__group-count">
+						{{ group.availableCount }}/{{ group.rooms.length }}
+					</span>
+				</button>
+				<div v-if="expandedGroups[group.name]" class="resource-picker__group-rooms">
+					<ResourceRoomCard
+						v-for="room in group.rooms"
+						:key="room.id"
+						:room="room"
+						:is-added="isRoomAdded(room)"
+						:is-read-only="isReadOnly"
+						:is-viewed-by-organizer="isViewedByOrganizer"
+						:has-room-selected="resources.length > 0"
+						@add-room="addResource"
+						@remove-room="removeRoomByPrincipal" />
+				</div>
+			</div>
+
+			<p
+				v-if="totalFilteredCount === 0 && allRooms.length > 0"
+				class="resource-picker__empty">
+				{{ $t('calendar', 'No rooms found') }}
+			</p>
+			<p
+				v-else-if="allRooms.length === 0 && !isLoadingAvailability"
+				class="resource-picker__empty">
+				{{ $t('calendar', 'No rooms available') }}
+			</p>
 		</div>
 	</div>
 </template>
 
 <script>
 import { loadState } from '@nextcloud/initial-state'
+import { NcCheckboxRadioSwitch, NcLoadingIcon } from '@nextcloud/vue'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
+import debounce from 'debounce'
 import { mapStores } from 'pinia'
+import Vue from 'vue'
 import MapMarker from 'vue-material-design-icons/MapMarker.vue'
-import ResourceListItem from './ResourceListItem.vue'
-import ResourceListSearch from './ResourceListSearch.vue'
-import { advancedPrincipalPropertySearch } from '../../../services/caldavService.js'
+import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
+import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
+import OfficeBuildingOutline from 'vue-material-design-icons/OfficeBuildingOutline.vue'
+import Wrench from 'vue-material-design-icons/Wrench.vue'
+import ResourceRoomCard from './ResourceRoomCard.vue'
+import { formatFacility } from '../../../models/resourceProps.js'
 import { checkResourceAvailability } from '../../../services/freeBusyService.js'
 import useCalendarObjectInstanceStore from '../../../store/calendarObjectInstance.js'
 import usePrincipalsStore from '../../../store/principals.js'
@@ -52,9 +147,15 @@ import logger from '../../../utils/logger.js'
 export default {
 	name: 'ResourceList',
 	components: {
-		ResourceListItem,
-		ResourceListSearch,
 		MapMarker,
+		ChevronDown,
+		ChevronRight,
+		OfficeBuildingOutline,
+		Wrench,
+		NcCheckboxRadioSwitch,
+		NcLoadingIcon,
+		NcTextField,
+		ResourceRoomCard,
 	},
 
 	props: {
@@ -62,7 +163,6 @@ export default {
 			type: Boolean,
 			required: true,
 		},
-
 		calendarObjectInstance: {
 			type: Object,
 			required: true,
@@ -71,32 +171,26 @@ export default {
 
 	data() {
 		return {
-			suggestedRooms: [],
+			allRooms: [],
+			isLoadingAvailability: false,
+			filterText: '',
+			filterAvailableOnly: true,
+			filterMinCapacity: 0,
+			activeFacilities: [],
+			activeBuildings: [],
+			expandedGroups: {},
 		}
 	},
 
 	computed: {
 		...mapStores(usePrincipalsStore, useCalendarObjectInstanceStore),
+
 		resources() {
 			return this.calendarObjectInstance.attendees.filter((attendee) => {
 				return ['ROOM', 'RESOURCE'].includes(attendee.attendeeProperty.userType)
 			})
 		},
 
-		attendees() {
-			return this.calendarObjectInstance.attendees.filter((attendee) => {
-				return !['RESOURCE', 'ROOM'].includes(attendee.attendeeProperty.userType)
-			})
-		},
-
-		noResourcesMessage() {
-			return this.$t('calendar', 'No rooms or resources yet')
-		},
-
-		isListEmpty() {
-			return this.resources.length === 0 && this.suggestedRooms.length === 0
-		},
-
 		alreadyInvitedEmails() {
 			return this.resources.map((attendee) => removeMailtoPrefix(attendee.uri))
 		},
@@ -114,7 +208,6 @@ export default {
 			if (!this.calendarObjectInstance.organizer) {
 				return true
 			}
-
 			const organizerEmail = removeMailtoPrefix(this.calendarObjectInstance.organizer.uri)
 			return organizerEmail === this.principalsStore.getCurrentUserPrincipalEmail
 		},
@@ -122,29 +215,229 @@ export default {
 		resourceBookingEnabled() {
 			return loadState('calendar', 'resource_booking_enabled')
 		},
-	},
 
-	watch: {
-		resources() {
-			if (this.isViewedByOrganizer) {
-				this.loadRoomSuggestions()
+		allBuildings() {
+			const buildings = new Set()
+			for (const room of this.allRooms) {
+				const name = room.roomBuildingName
+				if (name) buildings.add(name)
+			}
+			return [...buildings].sort()
+		},
+
+		allFacilities() {
+			const facilitySet = new Set()
+			for (const room of this.allRooms) {
+				const features = room.roomFeatures?.split(',') ?? []
+				for (const f of features) {
+					const trimmed = f.trim()
+					if (trimmed) facilitySet.add(trimmed)
+				}
+			}
+			return [...facilitySet].sort().map((id) => ({
+				id,
+				label: formatFacility(id),
+			}))
+		},
+
+		filteredRooms() {
+			return this.allRooms.filter((room) => {
+				// Always show rooms that are already added to the event
+				if (this.isRoomAdded(room)) {
+					return true
+				}
+				// Text filter
+				if (this.filterText) {
+					const q = this.filterText.toLowerCase()
+					if (!room.displayname?.toLowerCase().includes(q)
+						&& !room.roomAddress?.toLowerCase().includes(q)
+						&& !room.roomBuildingAddress?.toLowerCase().includes(q)
+						&& !room.roomBuildingName?.toLowerCase().includes(q)
+						&& !room.roomNumber?.toLowerCase().includes(q)) {
+						return false
+					}
+				}
+				// Building filter
+				if (this.activeBuildings.length > 0) {
+					const building = room.roomBuildingName || ''
+					if (!this.activeBuildings.includes(building)) {
+						return false
+					}
+				}
+				// Available filter
+				if (this.filterAvailableOnly && !room.isAvailable) {
+					return false
+				}
+				// Capacity filter
+				if (this.filterMinCapacity > 0) {
+					const cap = parseInt(room.roomSeatingCapacity) || 0
+					if (cap < this.filterMinCapacity) {
+						return false
+					}
+				}
+				// Facility filters
+				if (this.activeFacilities.length > 0) {
+					const features = room.roomFeatures?.split(',').map((f) => f.trim()) ?? []
+					for (const required of this.activeFacilities) {
+						if (!features.includes(required)) {
+							return false
+						}
+					}
+				}
+				return true
+			})
+		},
+
+		sortedRooms() {
+			return [...this.filteredRooms].sort((a, b) => {
+				// Booked rooms first
+				const aAdded = this.isRoomAdded(a) ? 0 : 1
+				const bAdded = this.isRoomAdded(b) ? 0 : 1
+				if (aAdded !== bAdded) return aAdded - bAdded
+
+				// Available before unavailable
+				const aAvail = a.isAvailable ? 0 : 1
+				const bAvail = b.isAvailable ? 0 : 1
+				if (aAvail !== bAvail) return aAvail - bAvail
+
+				// Alphabetically
+				return (a.displayname || '').localeCompare(b.displayname || '')
+			})
+		},
+
+		groupedRooms() {
+			const groups = {}
+
+			for (const room of this.sortedRooms) {
+				const groupName = room.roomBuildingName || this.$t('calendar', 'Other')
+				if (!groups[groupName]) {
+					groups[groupName] = { name: groupName, rooms: [], availableCount: 0 }
+				}
+				groups[groupName].rooms.push(room)
+				if (room.isAvailable) {
+					groups[groupName].availableCount++
+				}
 			}
+
+			// Sort groups: groups with added rooms first, then alphabetically
+			return Object.values(groups).sort((a, b) => {
+				const aHasAdded = a.rooms.some((r) => this.isRoomAdded(r)) ? 0 : 1
+				const bHasAdded = b.rooms.some((r) => this.isRoomAdded(r)) ? 0 : 1
+				if (aHasAdded !== bHasAdded) return aHasAdded - bHasAdded
+				return a.name.localeCompare(b.name)
+			})
 		},
+
+		totalFilteredCount() {
+			return this.sortedRooms.length
+		},
+	},
+
+	watch: {
+		'calendarObjectInstance.startDate': 'debouncedLoadAvailability',
+		'calendarObjectInstance.endDate': 'debouncedLoadAvailability',
+	},
+
+	created() {
+		this.debouncedLoadAvailability = debounce(this.loadAvailability, 500)
 	},
 
 	async mounted() {
-		if (this.isViewedByOrganizer) {
-			await this.loadRoomSuggestions()
+		if (this.resourceBookingEnabled) {
+			await this.loadAllRooms()
 		}
 	},
 
 	methods: {
+		async loadAllRooms() {
+			this.isLoadingAvailability = true
+
+			const roomPrincipals = this.principalsStore.getRoomPrincipals || []
+			this.allRooms = roomPrincipals.map((p) => ({
+				...p,
+				isAvailable: true,
+			}))
+
+			await this.loadAvailability()
+			this.isLoadingAvailability = false
+
+			// Initialize expanded groups after data is loaded
+			this.$nextTick(() => {
+				const groups = this.groupedRooms
+				const expanded = {}
+				if (groups.length <= 3) {
+					groups.forEach((g) => { expanded[g.name] = true })
+				} else if (groups.length > 0) {
+					expanded[groups[0].name] = true
+				}
+				this.expandedGroups = expanded
+			})
+		},
+
+		async loadAvailability() {
+			if (this.allRooms.length === 0) {
+				return
+			}
+
+			const options = this.allRooms.map((r) => ({
+				email: r.emailAddress,
+				isAvailable: true,
+			}))
+
+			try {
+				await checkResourceAvailability(
+					options,
+					this.principalsStore.getCurrentUserPrincipalEmail,
+					this.calendarObjectInstance.eventComponent.startDate,
+					this.calendarObjectInstance.eventComponent.endDate,
+				)
+
+				for (let i = 0; i < this.allRooms.length; i++) {
+					const opt = options.find((o) => o.email === this.allRooms[i].emailAddress)
+					if (opt) {
+						Vue.set(this.allRooms, i, {
+							...this.allRooms[i],
+							isAvailable: opt.isAvailable,
+						})
+					}
+				}
+			} catch (error) {
+				logger.error('Could not check room availability', { error })
+			}
+		},
+
+		isRoomAdded(room) {
+			return this.alreadyInvitedEmails.includes(room.emailAddress)
+		},
+
+		toggleBuilding(building) {
+			const idx = this.activeBuildings.indexOf(building)
+			if (idx >= 0) {
+				this.activeBuildings.splice(idx, 1)
+			} else {
+				this.activeBuildings.push(building)
+			}
+		},
+
+		toggleFacility(facilityId) {
+			const idx = this.activeFacilities.indexOf(facilityId)
+			if (idx >= 0) {
+				this.activeFacilities.splice(idx, 1)
+			} else {
+				this.activeFacilities.push(facilityId)
+			}
+		},
+
+		toggleGroup(groupName) {
+			Vue.set(this.expandedGroups, groupName, !this.expandedGroups[groupName])
+		},
+
 		addResource({ commonName, email, calendarUserType, language, timezoneId, roomAddress }) {
 			this.calendarObjectInstanceStore.addAttendee({
 				calendarObjectInstance: this.calendarObjectInstance,
 				commonName,
 				uri: email,
-				calendarUserType,
+				calendarUserType: calendarUserType || 'ROOM',
 				participationStatus: 'NEEDS-ACTION',
 				role: 'REQ-PARTICIPANT',
 				rsvp: true,
@@ -162,65 +455,19 @@ export default {
 			})
 		},
 
-		async loadRoomSuggestions() {
-			if (!this.resourceBookingEnabled) {
-				return
-			}
-
-			if (this.resources.length > 0) {
-				this.suggestedRooms = []
-				return
-			}
-
-			try {
-				logger.info('fetching suggestions for ' + this.attendees.length + ' attendees')
-				const query = {
-					capacity: this.attendees.length,
-				}
-				const results = (await advancedPrincipalPropertySearch(query)).map((principal) => {
-					return {
-						commonName: principal.displayname,
-						email: principal.email,
-						calendarUserType: principal.calendarUserType,
-						displayName: principal.displayname ?? principal.email,
-						isAvailable: true,
-						roomAddress: principal.roomAddress,
-						uri: principal.email,
-						organizer: this.principalsStore.getCurrentUserPrincipal,
-					}
-				})
-
-				await checkResourceAvailability(
-					results,
-					this.principalsStore.getCurrentUserPrincipalEmail,
-					this.calendarObjectInstance.eventComponent.startDate,
-					this.calendarObjectInstance.eventComponent.endDate,
-				)
-				logger.debug('availability of room suggestions fetched', { results })
-
-				// Take the first three available options
-				this.suggestedRooms = results.filter((room) => room.isAvailable).slice(0, 3)
-			} catch (error) {
-				logger.error('Could not find resources', { error })
-				this.suggestedRooms = []
+		removeRoomByPrincipal(room) {
+			const attendee = this.resources.find(
+				(a) => removeMailtoPrefix(a.uri) === room.emailAddress,
+			)
+			if (attendee) {
+				this.removeResource(attendee)
 			}
 		},
 
-		/**
-		 * Apply the location of the first resource to the event.
-		 * Has no effect if the location is already set or there are multiple resource.
-		 *
-		 * @param {string} location The location to apply
-		 */
 		updateLocation(location) {
-			if (this.calendarObjectInstance.location || this.calendarObjectInstance.eventComponent.location) {
-				return
-			}
-
-			if (this.resources.length !== 1) {
+			if (!location) {
 				return
 			}
-
 			this.calendarObjectInstanceStore.changeLocation({
 				calendarObjectInstance: this.calendarObjectInstance,
 				location,
@@ -231,13 +478,159 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.resource-list {
-		margin-top: calc(var(--default-grid-baseline) * 4);
+.resource-picker {
+	display: flex;
+	flex-direction: column;
+	gap: calc(var(--default-grid-baseline) * 2);
+
+	&__filters {
+		display: flex;
+		flex-direction: column;
+		gap: calc(var(--default-grid-baseline) * 2);
+
+		&__row {
+			display: flex;
+			align-items: center;
+			gap: calc(var(--default-grid-baseline) * 3);
+		}
+	}
+
+	&__capacity {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		font-size: calc(var(--default-font-size) * 0.9);
+
+		label {
+			white-space: nowrap;
+			color: var(--color-text-maxcontrast);
+		}
+	}
+
+	&__capacity-input {
+		width: 64px;
+		padding: 4px 6px;
+		border: 2px solid var(--color-border-maxcontrast);
+		border-radius: var(--border-radius);
+		background: var(--color-main-background);
+		color: var(--color-main-text);
+		font-size: calc(var(--default-font-size) * 0.9);
+
+		&:focus {
+			border-color: var(--color-primary-element);
+			outline: none;
+		}
+	}
+
+	&__chips {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 4px;
+	}
+
+	&__chips-label {
+		display: flex;
+		align-items: center;
+		color: var(--color-text-maxcontrast);
+		margin-right: 2px;
+	}
+
+	&__chip {
+		padding: 2px 10px;
+		border-radius: 12px;
+		border: 1px solid var(--color-border-maxcontrast);
+		background: var(--color-main-background);
+		color: var(--color-text-maxcontrast);
+		font-size: calc(var(--default-font-size) * 0.85);
+		cursor: pointer;
+		transition: all 0.15s;
+
+		&:hover {
+			border-color: var(--color-primary-element);
+			color: var(--color-primary-element);
+		}
+
+		&--facility {
+			border-style: dashed;
+		}
+
+		&--active {
+			background: var(--color-primary-element);
+			border-color: var(--color-primary-element);
+			color: var(--color-primary-element-text);
+			border-style: solid;
+
+			&:hover {
+				opacity: 0.85;
+				color: var(--color-primary-element-text);
+			}
+		}
+	}
+
+	&__loading {
+		display: flex;
+		justify-content: center;
+		padding: calc(var(--default-grid-baseline) * 4);
+	}
+
+	&__list {
+		display: flex;
+		flex-direction: column;
+		max-height: 400px;
+		overflow-y: auto;
+	}
+
+	&__group {
+		&-header {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+			width: 100%;
+			padding: 6px 4px;
+			border: none;
+			background: none;
+			cursor: pointer;
+			font-size: calc(var(--default-font-size) * 0.9);
+			font-weight: 600;
+			color: var(--color-text-maxcontrast);
+
+			&:hover {
+				color: var(--color-main-text);
+			}
+		}
+
+		&-name {
+			flex: 1;
+			text-align: left;
+		}
+
+		&-count {
+			font-weight: normal;
+			font-size: calc(var(--default-font-size) * 0.8);
+			color: var(--color-text-maxcontrast);
+		}
+
+		&-rooms {
+			display: flex;
+			flex-direction: column;
+			gap: calc(var(--default-grid-baseline) * 1);
+			padding-left: 8px;
+			padding-bottom: 4px;
+		}
+	}
+
+	&__empty {
+		text-align: center;
+		color: var(--color-text-maxcontrast);
+		padding: calc(var(--default-grid-baseline) * 4);
+	}
 }
 
 .app-full-subtitle {
 	font-size: calc(var(--default-font-size) * 1.2);
 	display: flex;
-	gap: calc(var(--default-grid-baseline) * 4);
+	align-items: center;
+	gap: calc(var(--default-grid-baseline) * 2);
 }
 </style>
diff --git a/src/components/Editor/Resources/ResourceRoomCard.vue b/src/components/Editor/Resources/ResourceRoomCard.vue
new file mode 100644
index 0000000000..654fd920fa
--- /dev/null
+++ b/src/components/Editor/Resources/ResourceRoomCard.vue
@@ -0,0 +1,194 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div
+		class="room-card"
+		:class="{
+			'room-card--added': isAdded,
+			'room-card--unavailable': !room.isAvailable && !isAdded,
+		}"
+		:title="room.roomBuildingAddress || ''">
+		<div class="room-card__row">
+			<div class="room-card__info">
+				<span class="room-card__name">{{ room.displayname }}</span>
+				<span class="room-card__meta">
+					<span
+						class="room-card__status"
+						:class="statusClass">
+						{{ statusLabel }}
+					</span>
+					<template v-if="room.roomSeatingCapacity">
+						&middot; {{ room.roomSeatingCapacity }}p
+					</template>
+					<template v-if="subLocation">
+						&middot; {{ subLocation }}
+					</template>
+					<template v-if="roomTypeLabel">
+						&middot; {{ roomTypeLabel }}
+					</template>
+				</span>
+			</div>
+			<NcButton
+				v-if="isViewedByOrganizer && !isReadOnly && (isAdded || (room.isAvailable && !hasRoomSelected))"
+				:type="isAdded ? 'tertiary' : 'secondary'"
+				class="room-card__action"
+				@click="toggleRoom">
+				<template #icon>
+					<Minus v-if="isAdded" :size="20" />
+					<Plus v-else :size="20" />
+				</template>
+			</NcButton>
+		</div>
+	</div>
+</template>
+
+<script>
+import { NcButton } from '@nextcloud/vue'
+import Minus from 'vue-material-design-icons/Minus.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import { formatRoomType } from '../../../models/resourceProps.js'
+export default {
+	name: 'ResourceRoomCard',
+	components: {
+		NcButton,
+		Minus,
+		Plus,
+	},
+
+	props: {
+		room: {
+			type: Object,
+			required: true,
+		},
+		isAdded: {
+			type: Boolean,
+			default: false,
+		},
+		isReadOnly: {
+			type: Boolean,
+			default: false,
+		},
+		isViewedByOrganizer: {
+			type: Boolean,
+			default: false,
+		},
+		hasRoomSelected: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	computed: {
+		statusLabel() {
+			if (this.isAdded) {
+				return this.$t('calendar', 'Reserved')
+			}
+			return this.room.isAvailable
+				? this.$t('calendar', 'Available')
+				: this.$t('calendar', 'Unavailable')
+		},
+		statusClass() {
+			if (this.isAdded) {
+				return 'room-card__status--reserved'
+			}
+			return this.room.isAvailable
+				? 'room-card__status--free'
+				: 'room-card__status--busy'
+		},
+		subLocation() {
+			return this.room.roomNumber || ''
+		},
+		roomTypeLabel() {
+			const type = this.room.roomType
+			if (!type || type === 'meeting-room') {
+				return ''
+			}
+			return formatRoomType(type) ?? type
+		},
+	},
+
+	methods: {
+		toggleRoom() {
+			if (this.isAdded) {
+				this.$emit('remove-room', this.room)
+			} else {
+				this.$emit('add-room', {
+					commonName: this.room.displayname,
+					email: this.room.emailAddress,
+					calendarUserType: this.room.calendarUserType,
+					roomAddress: this.room.roomAddress,
+				})
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.room-card {
+	padding: 6px 10px;
+	border-radius: var(--border-radius-large);
+	border: 1px solid var(--color-border);
+	background: var(--color-main-background);
+
+	&--added {
+		border-left: 3px solid var(--color-primary);
+		background: var(--color-primary-element-light);
+	}
+
+	&--unavailable:not(.room-card--added) {
+		opacity: 0.55;
+	}
+
+	&__row {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	&__info {
+		flex: 1;
+		min-width: 0;
+	}
+
+	&__name {
+		display: block;
+		font-weight: 500;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		line-height: 1.3;
+	}
+
+	&__meta {
+		display: block;
+		font-size: calc(var(--default-font-size) * 0.85);
+		color: var(--color-text-maxcontrast);
+		line-height: 1.3;
+	}
+
+	&__status {
+		&--free {
+			color: var(--color-success-text, #2d7a3a);
+			font-weight: 600;
+		}
+
+		&--busy {
+			color: var(--color-error-text, #c9302c);
+			font-weight: 600;
+		}
+
+		&--reserved {
+			color: var(--color-primary-element);
+			font-weight: 600;
+		}
+	}
+
+	&__action {
+		flex-shrink: 0;
+	}
+}
+</style>
diff --git a/src/models/principal.js b/src/models/principal.js
index 1e50eaeed5..085fe17565 100644
--- a/src/models/principal.js
+++ b/src/models/principal.js
@@ -50,6 +50,14 @@ function getDefaultPrincipalObject(props) {
 		principalId: null,
 		// The url of the default calendar for invitations
 		scheduleDefaultCalendarUrl: null,
+		// Room-specific properties (only for calendar-rooms)
+		roomSeatingCapacity: null,
+		roomType: null,
+		roomAddress: null,
+		roomFeatures: null,
+		roomBuildingName: null,
+		roomBuildingAddress: null,
+		roomNumber: null,
 		...props,
 	}
 }
@@ -91,6 +99,33 @@ function mapDavToPrincipal(dav) {
 	const url = dav.principalUrl
 	const userId = dav.userId
 
+	// Extract room-specific properties from DAV object using standard cdav-library getters
+	const roomSeatingCapacity = dav.roomSeatingCapacity ?? null
+	const roomType = dav.roomType ?? null
+	const roomFeatures = dav.roomFeatures ?? null
+	const roomBuildingAddress = dav.roomBuildingAddress ?? null
+	// Derive building name from address (everything before first comma): "Poppodium, Kerkstraat 10" → "Poppodium"
+	const roomBuildingName = roomBuildingAddress ? roomBuildingAddress.split(',')[0].trim() : null
+	// Room number (floor.room format, e.g. "2.17") is stored in room-building-room-number
+	const roomNumber = dav.roomBuildingRoomNumber ?? null
+
+	// Construct roomAddress for event LOCATION field from available properties
+	// Format: "Street (Building, Room X.XX)" — street-first for map/navigation apps
+	let roomAddress = null
+	if (roomBuildingAddress) {
+		const commaIdx = roomBuildingAddress.indexOf(',')
+		if (commaIdx > 0) {
+			const building = roomBuildingAddress.substring(0, commaIdx).trim()
+			const street = roomBuildingAddress.substring(commaIdx + 1).trim()
+			const detail = roomNumber ? building + ', Room ' + roomNumber : building
+			roomAddress = street + ' (' + detail + ')'
+		} else {
+			roomAddress = roomNumber
+				? roomBuildingAddress + ' (Room ' + roomNumber + ')'
+				: roomBuildingAddress
+		}
+	}
+
 	return getDefaultPrincipalObject({
 		id,
 		calendarUserType,
@@ -107,6 +142,13 @@ function mapDavToPrincipal(dav) {
 		principalId,
 		userId,
 		scheduleDefaultCalendarUrl,
+		roomSeatingCapacity,
+		roomType,
+		roomAddress,
+		roomFeatures,
+		roomBuildingName,
+		roomBuildingAddress,
+		roomNumber,
 	})
 }
 
diff --git a/src/models/resourceProps.js b/src/models/resourceProps.js
index 4e11b46b1a..a2ec8b2c9b 100644
--- a/src/models/resourceProps.js
+++ b/src/models/resourceProps.js
@@ -13,7 +13,12 @@ import { translate as t } from '@nextcloud/l10n'
 export function getAllRoomTypes() {
 	return [
 		{ value: 'meeting-room', label: t('calendar', 'Meeting room') },
+		{ value: 'board-room', label: t('calendar', 'Board room') },
+		{ value: 'conference-room', label: t('calendar', 'Conference room') },
 		{ value: 'lecture-hall', label: t('calendar', 'Lecture hall') },
+		{ value: 'rehearsal-room', label: t('calendar', 'Rehearsal room') },
+		{ value: 'studio', label: t('calendar', 'Studio') },
+		{ value: 'outdoor-area', label: t('calendar', 'Outdoor area') },
 		{ value: 'seminar-room', label: t('calendar', 'Seminar room') },
 		{ value: 'other', label: t('calendar', 'Other') },
 	]
@@ -29,3 +34,29 @@ export function formatRoomType(value) {
 	const option = getAllRoomTypes().find((option) => option.value === value)
 	return option?.label ?? null
 }
+
+/**
+ * Short labels for known facility types
+ */
+const FACILITY_LABELS = {
+	projector: t('calendar', 'Projector'),
+	beamer: t('calendar', 'Projector'),
+	whiteboard: t('calendar', 'Whiteboard'),
+	video_conference: t('calendar', 'Video'),
+	videoconference: t('calendar', 'Video'),
+	wheelchair_accessible: t('calendar', 'Wheelchair accessible'),
+	'wheelchair-accessible': t('calendar', 'Wheelchair accessible'),
+	audio: t('calendar', 'Audio'),
+	display: t('calendar', 'Display'),
+}
+
+/**
+ * Get a human-readable label for a facility
+ *
+ * @param {string} facility The facility identifier
+ * @return {string}
+ */
+export function formatFacility(facility) {
+	const lower = facility.toLowerCase().trim()
+	return FACILITY_LABELS[lower] || facility.charAt(0).toUpperCase() + facility.slice(1)
+}

From 95d99a62c161b0b73094e19ff01b2382eee17942 Mon Sep 17 00:00:00 2001
From: Rik Dekker <rik@shalution.nl>
Date: Thu, 19 Feb 2026 17:31:47 +0100
Subject: [PATCH 02/12] fix(resources): use logical CSS properties for RTL
 support
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace directional CSS properties with logical equivalents:
- margin-right → margin-inline-end
- text-align: left → text-align: start
- padding-left → padding-inline-start
- border-left → border-inline-start

Signed-off-by: Rik Dekker <rik@shalution.nl>
---
 src/components/Editor/Resources/ResourceList.vue     | 6 +++---
 src/components/Editor/Resources/ResourceRoomCard.vue | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Editor/Resources/ResourceList.vue b/src/components/Editor/Resources/ResourceList.vue
index 8a40c833bf..390e9e8b6d 100644
--- a/src/components/Editor/Resources/ResourceList.vue
+++ b/src/components/Editor/Resources/ResourceList.vue
@@ -533,7 +533,7 @@ export default {
 		display: flex;
 		align-items: center;
 		color: var(--color-text-maxcontrast);
-		margin-right: 2px;
+		margin-inline-end: 2px;
 	}
 
 	&__chip {
@@ -602,7 +602,7 @@ export default {
 
 		&-name {
 			flex: 1;
-			text-align: left;
+			text-align: start;
 		}
 
 		&-count {
@@ -615,7 +615,7 @@ export default {
 			display: flex;
 			flex-direction: column;
 			gap: calc(var(--default-grid-baseline) * 1);
-			padding-left: 8px;
+			padding-inline-start: 8px;
 			padding-bottom: 4px;
 		}
 	}
diff --git a/src/components/Editor/Resources/ResourceRoomCard.vue b/src/components/Editor/Resources/ResourceRoomCard.vue
index 654fd920fa..cc1efe2131 100644
--- a/src/components/Editor/Resources/ResourceRoomCard.vue
+++ b/src/components/Editor/Resources/ResourceRoomCard.vue
@@ -135,7 +135,7 @@ export default {
 	background: var(--color-main-background);
 
 	&--added {
-		border-left: 3px solid var(--color-primary);
+		border-inline-start: 3px solid var(--color-primary);
 		background: var(--color-primary-element-light);
 	}
 

From cb44e4635bb836a6a94f4ce45b431e1be1a385ff Mon Sep 17 00:00:00 2001
From: Rik Dekker <rik@shalution.nl>
Date: Thu, 19 Feb 2026 17:37:45 +0100
Subject: [PATCH 03/12] test(principal): update tests for room-specific
 properties

Add room property fields (roomSeatingCapacity, roomType, roomAddress,
roomFeatures, roomBuildingName, roomBuildingAddress, roomNumber) to all
existing principal test expectations. Add a new test case for a room
principal with actual room DAV properties to verify the building name
derivation and address formatting logic.

Signed-off-by: Rik Dekker <rik@shalution.nl>
---
 .../javascript/unit/models/principal.test.js  | 102 ++++++++++++++++++
 1 file changed, 102 insertions(+)

diff --git a/tests/javascript/unit/models/principal.test.js b/tests/javascript/unit/models/principal.test.js
index 5bcdb92750..a794a9e7b6 100644
--- a/tests/javascript/unit/models/principal.test.js
+++ b/tests/javascript/unit/models/principal.test.js
@@ -24,6 +24,13 @@ describe('Test suite: Principal model (models/principal.js)', () => {
 			isCalendarRoom: false,
 			principalId: null,
 			scheduleDefaultCalendarUrl: null,
+			roomSeatingCapacity: null,
+			roomType: null,
+			roomAddress: null,
+			roomFeatures: null,
+			roomBuildingName: null,
+			roomBuildingAddress: null,
+			roomNumber: null,
 		})
 	})
 
@@ -48,6 +55,13 @@ describe('Test suite: Principal model (models/principal.js)', () => {
 			principalId: 'bar',
 			otherProp: 'foo',
 			scheduleDefaultCalendarUrl: null,
+			roomSeatingCapacity: null,
+			roomType: null,
+			roomAddress: null,
+			roomFeatures: null,
+			roomBuildingName: null,
+			roomBuildingAddress: null,
+			roomNumber: null,
 		})
 	})
 
@@ -82,6 +96,13 @@ describe('Test suite: Principal model (models/principal.js)', () => {
 			isCalendarRoom: false,
 			principalId: 'jane.doe',
 			userId: 'legacy-jane-doe-uid',
+			roomSeatingCapacity: null,
+			roomType: null,
+			roomAddress: null,
+			roomFeatures: null,
+			roomBuildingName: null,
+			roomBuildingAddress: null,
+			roomNumber: null,
 		})
 	})
 
@@ -116,6 +137,13 @@ describe('Test suite: Principal model (models/principal.js)', () => {
 			isCalendarRoom: false,
 			principalId: 'jane.doe',
 			userId: null,
+			roomSeatingCapacity: null,
+			roomType: null,
+			roomAddress: null,
+			roomFeatures: null,
+			roomBuildingName: null,
+			roomBuildingAddress: null,
+			roomNumber: null,
 		})
 	})
 
@@ -150,6 +178,13 @@ describe('Test suite: Principal model (models/principal.js)', () => {
 			isCalendarRoom: false,
 			principalId: 'CGAH82BAS285H',
 			userId: null,
+			roomSeatingCapacity: null,
+			roomType: null,
+			roomAddress: null,
+			roomFeatures: null,
+			roomBuildingName: null,
+			roomBuildingAddress: null,
+			roomNumber: null,
 		})
 	})
 
@@ -184,6 +219,13 @@ describe('Test suite: Principal model (models/principal.js)', () => {
 			isCalendarRoom: false,
 			principalId: 'projector-123',
 			userId: null,
+			roomSeatingCapacity: null,
+			roomType: null,
+			roomAddress: null,
+			roomFeatures: null,
+			roomBuildingName: null,
+			roomBuildingAddress: null,
+			roomNumber: null,
 		})
 	})
 
@@ -218,6 +260,59 @@ describe('Test suite: Principal model (models/principal.js)', () => {
 			isCalendarRoom: true,
 			principalId: 'room-123',
 			userId: null,
+			roomSeatingCapacity: null,
+			roomType: null,
+			roomAddress: null,
+			roomFeatures: null,
+			roomBuildingName: null,
+			roomBuildingAddress: null,
+			roomNumber: null,
+		})
+	})
+
+	it('should properly map a calendar-room-principal with room properties', () => {
+		const dav = {
+			addressBookHomes: undefined,
+			calendarHomes: [],
+			calendarUserAddressSet: [],
+			calendarUserType: 'ROOM',
+			displayname: 'Conference Room A',
+			email: 'conf-a@example.com',
+			principalScheme: 'principal:principals/calendar-rooms/conf-a',
+			principalUrl: '/remote.php/dav/principals/calendar-rooms/conf-a/',
+			scheduleInbox: null,
+			scheduleOutbox: null,
+			url: '/remote.php/dav/principals/calendar-rooms/conf-a/',
+			userId: null,
+			roomSeatingCapacity: 20,
+			roomType: 'conference-room',
+			roomFeatures: 'PROJECTOR,WHITEBOARD',
+			roomBuildingAddress: 'Building A, Main Street 1',
+			roomBuildingRoomNumber: '2.17',
+		}
+
+		expect(mapDavToPrincipal(dav)).toEqual({
+			id: 'L3JlbW90ZS5waHAvZGF2L3ByaW5jaXBhbHMvY2FsZW5kYXItcm9vbXMvY29uZi1hLw==',
+			dav,
+			calendarUserType: 'ROOM',
+			principalScheme: 'principal:principals/calendar-rooms/conf-a',
+			emailAddress: 'conf-a@example.com',
+			displayname: 'Conference Room A',
+			url: '/remote.php/dav/principals/calendar-rooms/conf-a/',
+			isUser: false,
+			isGroup: false,
+			isCircle: false,
+			isCalendarResource: false,
+			isCalendarRoom: true,
+			principalId: 'conf-a',
+			userId: null,
+			roomSeatingCapacity: 20,
+			roomType: 'conference-room',
+			roomFeatures: 'PROJECTOR,WHITEBOARD',
+			roomBuildingName: 'Building A',
+			roomBuildingAddress: 'Building A, Main Street 1',
+			roomNumber: '2.17',
+			roomAddress: 'Main Street 1 (Building A, Room 2.17)',
 		})
 	})
 
@@ -252,6 +347,13 @@ describe('Test suite: Principal model (models/principal.js)', () => {
 			isCalendarRoom: false,
 			principalId: null,
 			userId: null,
+			roomSeatingCapacity: null,
+			roomType: null,
+			roomAddress: null,
+			roomFeatures: null,
+			roomBuildingName: null,
+			roomBuildingAddress: null,
+			roomNumber: null,
 		})
 	})
 })

From f92802f4afcb028c8af7deecdad2ece99bfb7034 Mon Sep 17 00:00:00 2001
From: Rik Dekker <rik@shalution.nl>
Date: Thu, 19 Feb 2026 17:44:51 +0100
Subject: [PATCH 04/12] fix(resources): address ESLint errors in ResourceList
 and ResourceRoomCard

ResourceList.vue:
- Replace deprecated :value with v-model on NcTextField
- Use camelCase for component attributes and event names
- Fix import ordering (perfectionist/sort-imports)
- Add curly braces to all if/else blocks
- Replace deprecated Vue.set with direct property assignment
- Split multi-statement forEach bodies to separate lines
- Remove self-closing slash from void <input> element
- Fix function-paren-newline style

ResourceRoomCard.vue:
- Replace deprecated :type with :variant on NcButton
- Add emits option declaring removeRoom and addRoom
- Use camelCase for emitted event names
- Add required newlines between multi-line props

Signed-off-by: Rik Dekker <rik@shalution.nl>
---
 .../Editor/Resources/ResourceList.vue         | 69 ++++++++++---------
 .../Editor/Resources/ResourceRoomCard.vue     | 19 +++--
 2 files changed, 53 insertions(+), 35 deletions(-)

diff --git a/src/components/Editor/Resources/ResourceList.vue b/src/components/Editor/Resources/ResourceList.vue
index 390e9e8b6d..5d30a8a6fc 100644
--- a/src/components/Editor/Resources/ResourceList.vue
+++ b/src/components/Editor/Resources/ResourceList.vue
@@ -15,12 +15,11 @@
 			v-if="!isReadOnly && hasUserEmailAddress && resourceBookingEnabled"
 			class="resource-picker__filters">
 			<NcTextField
-				:value="filterText"
+				v-model="filterText"
 				:placeholder="$t('calendar', 'Search rooms...')"
-				:show-trailing-button="filterText.length > 0"
-				trailing-button-icon="close"
-				@update:value="filterText = $event"
-				@trailing-button-click="filterText = ''" />
+				:showTrailingButton="filterText.length > 0"
+				trailingButtonIcon="close"
+				@trailingButtonClick="filterText = ''" />
 
 			<div class="resource-picker__filters__row">
 				<NcCheckboxRadioSwitch
@@ -36,7 +35,7 @@
 						type="number"
 						min="0"
 						:placeholder="$t('calendar', 'pers.')"
-						class="resource-picker__capacity-input" />
+						class="resource-picker__capacity-input">
 				</div>
 			</div>
 
@@ -101,12 +100,12 @@
 						v-for="room in group.rooms"
 						:key="room.id"
 						:room="room"
-						:is-added="isRoomAdded(room)"
-						:is-read-only="isReadOnly"
-						:is-viewed-by-organizer="isViewedByOrganizer"
-						:has-room-selected="resources.length > 0"
-						@add-room="addResource"
-						@remove-room="removeRoomByPrincipal" />
+						:isAdded="isRoomAdded(room)"
+						:isReadOnly="isReadOnly"
+						:isViewedByOrganizer="isViewedByOrganizer"
+						:hasRoomSelected="resources.length > 0"
+						@addRoom="addResource"
+						@removeRoom="removeRoomByPrincipal" />
 				</div>
 			</div>
 
@@ -130,12 +129,12 @@ import { NcCheckboxRadioSwitch, NcLoadingIcon } from '@nextcloud/vue'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
 import debounce from 'debounce'
 import { mapStores } from 'pinia'
-import Vue from 'vue'
-import MapMarker from 'vue-material-design-icons/MapMarker.vue'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
+import MapMarker from 'vue-material-design-icons/MapMarker.vue'
 import OfficeBuildingOutline from 'vue-material-design-icons/OfficeBuildingOutline.vue'
 import Wrench from 'vue-material-design-icons/Wrench.vue'
+
 import ResourceRoomCard from './ResourceRoomCard.vue'
 import { formatFacility } from '../../../models/resourceProps.js'
 import { checkResourceAvailability } from '../../../services/freeBusyService.js'
@@ -147,15 +146,15 @@ import logger from '../../../utils/logger.js'
 export default {
 	name: 'ResourceList',
 	components: {
-		MapMarker,
 		ChevronDown,
 		ChevronRight,
-		OfficeBuildingOutline,
-		Wrench,
+		MapMarker,
 		NcCheckboxRadioSwitch,
 		NcLoadingIcon,
 		NcTextField,
+		OfficeBuildingOutline,
 		ResourceRoomCard,
+		Wrench,
 	},
 
 	props: {
@@ -163,6 +162,7 @@ export default {
 			type: Boolean,
 			required: true,
 		},
+
 		calendarObjectInstance: {
 			type: Object,
 			required: true,
@@ -220,7 +220,9 @@ export default {
 			const buildings = new Set()
 			for (const room of this.allRooms) {
 				const name = room.roomBuildingName
-				if (name) buildings.add(name)
+				if (name) {
+					buildings.add(name)
+				}
 			}
 			return [...buildings].sort()
 		},
@@ -231,7 +233,9 @@ export default {
 				const features = room.roomFeatures?.split(',') ?? []
 				for (const f of features) {
 					const trimmed = f.trim()
-					if (trimmed) facilitySet.add(trimmed)
+					if (trimmed) {
+						facilitySet.add(trimmed)
+					}
 				}
 			}
 			return [...facilitySet].sort().map((id) => ({
@@ -293,12 +297,16 @@ export default {
 				// Booked rooms first
 				const aAdded = this.isRoomAdded(a) ? 0 : 1
 				const bAdded = this.isRoomAdded(b) ? 0 : 1
-				if (aAdded !== bAdded) return aAdded - bAdded
+				if (aAdded !== bAdded) {
+					return aAdded - bAdded
+				}
 
 				// Available before unavailable
 				const aAvail = a.isAvailable ? 0 : 1
 				const bAvail = b.isAvailable ? 0 : 1
-				if (aAvail !== bAvail) return aAvail - bAvail
+				if (aAvail !== bAvail) {
+					return aAvail - bAvail
+				}
 
 				// Alphabetically
 				return (a.displayname || '').localeCompare(b.displayname || '')
@@ -323,7 +331,9 @@ export default {
 			return Object.values(groups).sort((a, b) => {
 				const aHasAdded = a.rooms.some((r) => this.isRoomAdded(r)) ? 0 : 1
 				const bHasAdded = b.rooms.some((r) => this.isRoomAdded(r)) ? 0 : 1
-				if (aHasAdded !== bHasAdded) return aHasAdded - bHasAdded
+				if (aHasAdded !== bHasAdded) {
+					return aHasAdded - bHasAdded
+				}
 				return a.name.localeCompare(b.name)
 			})
 		},
@@ -366,7 +376,9 @@ export default {
 				const groups = this.groupedRooms
 				const expanded = {}
 				if (groups.length <= 3) {
-					groups.forEach((g) => { expanded[g.name] = true })
+					for (const g of groups) {
+						expanded[g.name] = true
+					}
 				} else if (groups.length > 0) {
 					expanded[groups[0].name] = true
 				}
@@ -395,10 +407,7 @@ export default {
 				for (let i = 0; i < this.allRooms.length; i++) {
 					const opt = options.find((o) => o.email === this.allRooms[i].emailAddress)
 					if (opt) {
-						Vue.set(this.allRooms, i, {
-							...this.allRooms[i],
-							isAvailable: opt.isAvailable,
-						})
+						this.allRooms[i] = { ...this.allRooms[i], isAvailable: opt.isAvailable }
 					}
 				}
 			} catch (error) {
@@ -429,7 +438,7 @@ export default {
 		},
 
 		toggleGroup(groupName) {
-			Vue.set(this.expandedGroups, groupName, !this.expandedGroups[groupName])
+			this.expandedGroups[groupName] = !this.expandedGroups[groupName]
 		},
 
 		addResource({ commonName, email, calendarUserType, language, timezoneId, roomAddress }) {
@@ -456,9 +465,7 @@ export default {
 		},
 
 		removeRoomByPrincipal(room) {
-			const attendee = this.resources.find(
-				(a) => removeMailtoPrefix(a.uri) === room.emailAddress,
-			)
+			const attendee = this.resources.find((a) => removeMailtoPrefix(a.uri) === room.emailAddress)
 			if (attendee) {
 				this.removeResource(attendee)
 			}
diff --git a/src/components/Editor/Resources/ResourceRoomCard.vue b/src/components/Editor/Resources/ResourceRoomCard.vue
index cc1efe2131..5d3f1dabf6 100644
--- a/src/components/Editor/Resources/ResourceRoomCard.vue
+++ b/src/components/Editor/Resources/ResourceRoomCard.vue
@@ -33,7 +33,7 @@
 			</div>
 			<NcButton
 				v-if="isViewedByOrganizer && !isReadOnly && (isAdded || (room.isAvailable && !hasRoomSelected))"
-				:type="isAdded ? 'tertiary' : 'secondary'"
+				:variant="isAdded ? 'tertiary' : 'secondary'"
 				class="room-card__action"
 				@click="toggleRoom">
 				<template #icon>
@@ -49,12 +49,14 @@
 import { NcButton } from '@nextcloud/vue'
 import Minus from 'vue-material-design-icons/Minus.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
+
 import { formatRoomType } from '../../../models/resourceProps.js'
+
 export default {
 	name: 'ResourceRoomCard',
 	components: {
-		NcButton,
 		Minus,
+		NcButton,
 		Plus,
 	},
 
@@ -63,24 +65,30 @@ export default {
 			type: Object,
 			required: true,
 		},
+
 		isAdded: {
 			type: Boolean,
 			default: false,
 		},
+
 		isReadOnly: {
 			type: Boolean,
 			default: false,
 		},
+
 		isViewedByOrganizer: {
 			type: Boolean,
 			default: false,
 		},
+
 		hasRoomSelected: {
 			type: Boolean,
 			default: false,
 		},
 	},
 
+	emits: ['removeRoom', 'addRoom'],
+
 	computed: {
 		statusLabel() {
 			if (this.isAdded) {
@@ -90,6 +98,7 @@ export default {
 				? this.$t('calendar', 'Available')
 				: this.$t('calendar', 'Unavailable')
 		},
+
 		statusClass() {
 			if (this.isAdded) {
 				return 'room-card__status--reserved'
@@ -98,9 +107,11 @@ export default {
 				? 'room-card__status--free'
 				: 'room-card__status--busy'
 		},
+
 		subLocation() {
 			return this.room.roomNumber || ''
 		},
+
 		roomTypeLabel() {
 			const type = this.room.roomType
 			if (!type || type === 'meeting-room') {
@@ -113,9 +124,9 @@ export default {
 	methods: {
 		toggleRoom() {
 			if (this.isAdded) {
-				this.$emit('remove-room', this.room)
+				this.$emit('removeRoom', this.room)
 			} else {
-				this.$emit('add-room', {
+				this.$emit('addRoom', {
 					commonName: this.room.displayname,
 					email: this.room.emailAddress,
 					calendarUserType: this.room.calendarUserType,

From 5f1ab97d78b9fad8c61c5e07299f62a8d58b0633 Mon Sep 17 00:00:00 2001
From: Rik Dekker <rik@shalution.nl>
Date: Thu, 19 Feb 2026 17:59:02 +0100
Subject: [PATCH 05/12] fix(resources): correct import ordering for
 perfectionist/sort-imports

Move debounce and pinia (external group) before @nextcloud/vue/components
and vue-material-design-icons (vue group). Remove blank lines between
import groups as required by newlinesBetween: 0.

Signed-off-by: Rik Dekker <rik@shalution.nl>
---
 src/components/Editor/Resources/ResourceList.vue     | 3 +--
 src/components/Editor/Resources/ResourceRoomCard.vue | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Editor/Resources/ResourceList.vue b/src/components/Editor/Resources/ResourceList.vue
index 5d30a8a6fc..cd0cf32ab7 100644
--- a/src/components/Editor/Resources/ResourceList.vue
+++ b/src/components/Editor/Resources/ResourceList.vue
@@ -126,15 +126,14 @@
 <script>
 import { loadState } from '@nextcloud/initial-state'
 import { NcCheckboxRadioSwitch, NcLoadingIcon } from '@nextcloud/vue'
-import NcTextField from '@nextcloud/vue/components/NcTextField'
 import debounce from 'debounce'
 import { mapStores } from 'pinia'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
 import MapMarker from 'vue-material-design-icons/MapMarker.vue'
 import OfficeBuildingOutline from 'vue-material-design-icons/OfficeBuildingOutline.vue'
 import Wrench from 'vue-material-design-icons/Wrench.vue'
-
 import ResourceRoomCard from './ResourceRoomCard.vue'
 import { formatFacility } from '../../../models/resourceProps.js'
 import { checkResourceAvailability } from '../../../services/freeBusyService.js'
diff --git a/src/components/Editor/Resources/ResourceRoomCard.vue b/src/components/Editor/Resources/ResourceRoomCard.vue
index 5d3f1dabf6..e44de6b231 100644
--- a/src/components/Editor/Resources/ResourceRoomCard.vue
+++ b/src/components/Editor/Resources/ResourceRoomCard.vue
@@ -49,7 +49,6 @@
 import { NcButton } from '@nextcloud/vue'
 import Minus from 'vue-material-design-icons/Minus.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
-
 import { formatRoomType } from '../../../models/resourceProps.js'
 
 export default {

From 7a6c7b40dcb3bf9b0f775cca1b8ca3f4d4c1feab Mon Sep 17 00:00:00 2001
From: Rik Dekker <rik@shalution.nl>
Date: Thu, 19 Feb 2026 18:43:06 +0100
Subject: [PATCH 06/12] fix(resources): defer facility label translation to
 avoid breaking test mocks

Move FACILITY_LABELS from a module-level constant to a lazily-evaluated
function. The module-level t() calls were executed at import time, before
Vitest test mocks were active, which polluted the @nextcloud/l10n mock
state and caused 54 unrelated tests to fail.

This follows the same pattern as getAllRoomTypes() which also evaluates
t() inside a function body rather than at module scope.

Signed-off-by: Rik Dekker <rik@shalution.nl>
---
 src/models/resourceProps.js | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/models/resourceProps.js b/src/models/resourceProps.js
index a2ec8b2c9b..1c72e46360 100644
--- a/src/models/resourceProps.js
+++ b/src/models/resourceProps.js
@@ -36,18 +36,24 @@ export function formatRoomType(value) {
 }
 
 /**
- * Short labels for known facility types
+ * Short labels for known facility types.
+ * Evaluated lazily (inside a function) so that t() is not called at module-import
+ * time, which would break test mocks.
+ *
+ * @return {object}
  */
-const FACILITY_LABELS = {
-	projector: t('calendar', 'Projector'),
-	beamer: t('calendar', 'Projector'),
-	whiteboard: t('calendar', 'Whiteboard'),
-	video_conference: t('calendar', 'Video'),
-	videoconference: t('calendar', 'Video'),
-	wheelchair_accessible: t('calendar', 'Wheelchair accessible'),
-	'wheelchair-accessible': t('calendar', 'Wheelchair accessible'),
-	audio: t('calendar', 'Audio'),
-	display: t('calendar', 'Display'),
+function getFacilityLabels() {
+	return {
+		projector: t('calendar', 'Projector'),
+		beamer: t('calendar', 'Projector'),
+		whiteboard: t('calendar', 'Whiteboard'),
+		video_conference: t('calendar', 'Video'),
+		videoconference: t('calendar', 'Video'),
+		wheelchair_accessible: t('calendar', 'Wheelchair accessible'),
+		'wheelchair-accessible': t('calendar', 'Wheelchair accessible'),
+		audio: t('calendar', 'Audio'),
+		display: t('calendar', 'Display'),
+	}
 }
 
 /**
@@ -58,5 +64,5 @@ const FACILITY_LABELS = {
  */
 export function formatFacility(facility) {
 	const lower = facility.toLowerCase().trim()
-	return FACILITY_LABELS[lower] || facility.charAt(0).toUpperCase() + facility.slice(1)
+	return getFacilityLabels()[lower] || facility.charAt(0).toUpperCase() + facility.slice(1)
 }

From 59a977bd0ad16ad9a1773d00b45128a4d147ce52 Mon Sep 17 00:00:00 2001
From: Rik Dekker <rik@shalution.nl>
Date: Thu, 19 Feb 2026 19:07:05 +0100
Subject: [PATCH 07/12] fix(test): switch pool from vmForks to vmThreads for
 coverage compatibility

The vmForks pool has a known issue with Vitest v4 where vi.mock()
hoisting breaks when V8 coverage instrumentation is active
(vitest-dev/vitest#8861). This causes 54 tests to fail under
`vitest --run --coverage` while passing under `vitest --run`.

Switch to vmThreads which provides the same VM isolation and CSS
transformation support without the coverage mock hoisting bug.

Signed-off-by: Rik Dekker <rik@shalution.nl>
---
 vitest.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vitest.config.js b/vitest.config.js
index c4c6487392..cd0db91563 100644
--- a/vitest.config.js
+++ b/vitest.config.js
@@ -23,7 +23,7 @@ export default defineConfig({
 		globals: true,
 		environment: 'jsdom',
 		// Required for transforming CSS files
-		pool: 'vmForks',
+		pool: 'vmThreads',
 		// Increase timeouts for slow CI environments
 		testTimeout: 300000, // 2 minutes per test
 		hookTimeout: 60000,  // 60 seconds for hooks

From eb6fdef3b123c724b30c0fe1c2bfacb2acbc7767 Mon Sep 17 00:00:00 2001
From: Rik Dekker <rik@shalution.nl>
Date: Thu, 19 Feb 2026 19:35:14 +0100
Subject: [PATCH 08/12] refactor(resources): convert to TypeScript +
 Composition API and cleanup

Address PR review feedback:
- Convert ResourceRoomCard.vue and ResourceList.vue to TypeScript with
  Composition API and <script setup> syntax
- Delete unused ResourceListItem.vue and ResourceListSearch.vue
- Fix SPDX copyright year to 2026
- Fix ESLint issues in vitest.config.js (import order, trailing comma,
  semicolon)

Signed-off-by: Rik Dekker <rik@shalution.nl>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../Editor/Resources/ResourceList.vue         | 666 +++++++++---------
 .../Editor/Resources/ResourceListItem.vue     | 251 -------
 .../Editor/Resources/ResourceListSearch.vue   | 294 --------
 .../Editor/Resources/ResourceRoomCard.vue     | 187 +++--
 vitest.config.js                              |  10 +-
 5 files changed, 435 insertions(+), 973 deletions(-)
 delete mode 100644 src/components/Editor/Resources/ResourceListItem.vue
 delete mode 100644 src/components/Editor/Resources/ResourceListSearch.vue

diff --git a/src/components/Editor/Resources/ResourceList.vue b/src/components/Editor/Resources/ResourceList.vue
index cd0cf32ab7..a8cb5d4be3 100644
--- a/src/components/Editor/Resources/ResourceList.vue
+++ b/src/components/Editor/Resources/ResourceList.vue
@@ -1,5 +1,5 @@
 <!--
-  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
@@ -7,16 +7,16 @@
 	<div class="resource-picker">
 		<span class="app-full-subtitle">
 			<MapMarker :size="20" />
-			{{ $t('calendar', 'Rooms') }}
+			{{ t('calendar', 'Rooms') }}
 		</span>
 
 		<!-- Search and filter -->
 		<div
-			v-if="!isReadOnly && hasUserEmailAddress && resourceBookingEnabled"
+			v-if="!props.isReadOnly && hasUserEmailAddress && resourceBookingEnabled"
 			class="resource-picker__filters">
 			<NcTextField
 				v-model="filterText"
-				:placeholder="$t('calendar', 'Search rooms...')"
+				:placeholder="t('calendar', 'Search rooms\u2026')"
 				:showTrailingButton="filterText.length > 0"
 				trailingButtonIcon="close"
 				@trailingButtonClick="filterText = ''" />
@@ -25,16 +25,16 @@
 				<NcCheckboxRadioSwitch
 					v-model="filterAvailableOnly"
 					type="switch">
-					{{ $t('calendar', 'Available only') }}
+					{{ t('calendar', 'Available only') }}
 				</NcCheckboxRadioSwitch>
 				<div class="resource-picker__capacity">
-					<label for="min-capacity">{{ $t('calendar', 'Min.') }}</label>
+					<label for="min-capacity">{{ t('calendar', 'Min.') }}</label>
 					<input
 						id="min-capacity"
 						v-model.number="filterMinCapacity"
 						type="number"
 						min="0"
-						:placeholder="$t('calendar', 'pers.')"
+						:placeholder="t('calendar', 'pers.')"
 						class="resource-picker__capacity-input">
 				</div>
 			</div>
@@ -101,7 +101,7 @@
 						:key="room.id"
 						:room="room"
 						:isAdded="isRoomAdded(room)"
-						:isReadOnly="isReadOnly"
+						:isReadOnly="props.isReadOnly"
 						:isViewedByOrganizer="isViewedByOrganizer"
 						:hasRoomSelected="resources.length > 0"
 						@addRoom="addResource"
@@ -112,22 +112,23 @@
 			<p
 				v-if="totalFilteredCount === 0 && allRooms.length > 0"
 				class="resource-picker__empty">
-				{{ $t('calendar', 'No rooms found') }}
+				{{ t('calendar', 'No rooms found') }}
 			</p>
 			<p
 				v-else-if="allRooms.length === 0 && !isLoadingAvailability"
 				class="resource-picker__empty">
-				{{ $t('calendar', 'No rooms available') }}
+				{{ t('calendar', 'No rooms available') }}
 			</p>
 		</div>
 	</div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
 import { NcCheckboxRadioSwitch, NcLoadingIcon } from '@nextcloud/vue'
 import debounce from 'debounce'
-import { mapStores } from 'pinia'
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
@@ -142,345 +143,352 @@ import usePrincipalsStore from '../../../store/principals.js'
 import { organizerDisplayName, removeMailtoPrefix } from '../../../utils/attendee.js'
 import logger from '../../../utils/logger.js'
 
-export default {
-	name: 'ResourceList',
-	components: {
-		ChevronDown,
-		ChevronRight,
-		MapMarker,
-		NcCheckboxRadioSwitch,
-		NcLoadingIcon,
-		NcTextField,
-		OfficeBuildingOutline,
-		ResourceRoomCard,
-		Wrench,
-	},
-
-	props: {
-		isReadOnly: {
-			type: Boolean,
-			required: true,
-		},
-
-		calendarObjectInstance: {
-			type: Object,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			allRooms: [],
-			isLoadingAvailability: false,
-			filterText: '',
-			filterAvailableOnly: true,
-			filterMinCapacity: 0,
-			activeFacilities: [],
-			activeBuildings: [],
-			expandedGroups: {},
-		}
-	},
-
-	computed: {
-		...mapStores(usePrincipalsStore, useCalendarObjectInstanceStore),
+interface RoomPrincipal {
+	id: string | null
+	displayname: string | null
+	emailAddress: string | null
+	calendarUserType: string
+	isAvailable: boolean
+	roomSeatingCapacity: string | null
+	roomType: string | null
+	roomAddress: string | null
+	roomFeatures: string | null
+	roomNumber: string | null
+	roomBuildingName: string | null
+	roomBuildingAddress: string | null
+}
 
-		resources() {
-			return this.calendarObjectInstance.attendees.filter((attendee) => {
-				return ['ROOM', 'RESOURCE'].includes(attendee.attendeeProperty.userType)
-			})
-		},
+interface RoomGroup {
+	name: string
+	rooms: RoomPrincipal[]
+	availableCount: number
+}
 
-		alreadyInvitedEmails() {
-			return this.resources.map((attendee) => removeMailtoPrefix(attendee.uri))
-		},
+interface Attendee {
+	uri: string
+	attendeeProperty: { userType: string }
+}
 
-		organizerDisplayName() {
-			return organizerDisplayName(this.calendarObjectInstance.organizer)
-		},
+interface CalendarObjectInstanceProp {
+	startDate: Date
+	endDate: Date
+	attendees: Attendee[]
+	organizer: { uri: string } | null
+	eventComponent: { startDate: object, endDate: object }
+}
 
-		hasUserEmailAddress() {
-			const emailAddress = this.principalsStore.getCurrentUserPrincipal?.emailAddress
-			return !!emailAddress
-		},
+interface AddRoomPayload {
+	commonName: string | null
+	email: string | null
+	calendarUserType: string
+	roomAddress: string | null
+	language?: string | null
+	timezoneId?: string | null
+}
 
-		isViewedByOrganizer() {
-			if (!this.calendarObjectInstance.organizer) {
-				return true
+const props = defineProps<{
+	isReadOnly: boolean
+	calendarObjectInstance: CalendarObjectInstanceProp
+}>()
+
+const principalsStore = usePrincipalsStore()
+const calendarObjectInstanceStore = useCalendarObjectInstanceStore()
+
+const resourceBookingEnabled = loadState<boolean>('calendar', 'resource_booking_enabled', false)
+
+// Reactive state
+const allRooms = ref<RoomPrincipal[]>([])
+const isLoadingAvailability = ref(false)
+const filterText = ref('')
+const filterAvailableOnly = ref(true)
+const filterMinCapacity = ref(0)
+const activeFacilities = ref<string[]>([])
+const activeBuildings = ref<string[]>([])
+const expandedGroups = reactive<Record<string, boolean>>({})
+
+// Computed
+const resources = computed<Attendee[]>(() => {
+	return props.calendarObjectInstance.attendees.filter((attendee) => {
+		return ['ROOM', 'RESOURCE'].includes(attendee.attendeeProperty.userType)
+	})
+})
+
+const alreadyInvitedEmails = computed<string[]>(() => {
+	return resources.value.map((attendee) => removeMailtoPrefix(attendee.uri))
+})
+
+const hasUserEmailAddress = computed<boolean>(() => {
+	const emailAddress = principalsStore.getCurrentUserPrincipal?.emailAddress
+	return !!emailAddress
+})
+
+const isViewedByOrganizer = computed<boolean>(() => {
+	if (!props.calendarObjectInstance.organizer) {
+		return true
+	}
+	const organizerEmail = removeMailtoPrefix(props.calendarObjectInstance.organizer.uri)
+	return organizerEmail === principalsStore.getCurrentUserPrincipalEmail
+})
+
+const allBuildings = computed<string[]>(() => {
+	const buildings = new Set<string>()
+	for (const room of allRooms.value) {
+		const name = room.roomBuildingName
+		if (name) {
+			buildings.add(name)
+		}
+	}
+	return [...buildings].sort()
+})
+
+const allFacilities = computed(() => {
+	const facilitySet = new Set<string>()
+	for (const room of allRooms.value) {
+		const features = room.roomFeatures?.split(',') ?? []
+		for (const f of features) {
+			const trimmed = f.trim()
+			if (trimmed) {
+				facilitySet.add(trimmed)
 			}
-			const organizerEmail = removeMailtoPrefix(this.calendarObjectInstance.organizer.uri)
-			return organizerEmail === this.principalsStore.getCurrentUserPrincipalEmail
-		},
-
-		resourceBookingEnabled() {
-			return loadState('calendar', 'resource_booking_enabled')
-		},
-
-		allBuildings() {
-			const buildings = new Set()
-			for (const room of this.allRooms) {
-				const name = room.roomBuildingName
-				if (name) {
-					buildings.add(name)
-				}
+		}
+	}
+	return [...facilitySet].sort().map((id) => ({
+		id,
+		label: formatFacility(id),
+	}))
+})
+
+const filteredRooms = computed<RoomPrincipal[]>(() => {
+	return allRooms.value.filter((room) => {
+		// Always show rooms that are already added to the event
+		if (isRoomAdded(room)) {
+			return true
+		}
+		// Text filter
+		if (filterText.value) {
+			const q = filterText.value.toLowerCase()
+			if (!room.displayname?.toLowerCase().includes(q)
+				&& !room.roomAddress?.toLowerCase().includes(q)
+				&& !room.roomBuildingAddress?.toLowerCase().includes(q)
+				&& !room.roomBuildingName?.toLowerCase().includes(q)
+				&& !room.roomNumber?.toLowerCase().includes(q)) {
+				return false
 			}
-			return [...buildings].sort()
-		},
-
-		allFacilities() {
-			const facilitySet = new Set()
-			for (const room of this.allRooms) {
-				const features = room.roomFeatures?.split(',') ?? []
-				for (const f of features) {
-					const trimmed = f.trim()
-					if (trimmed) {
-						facilitySet.add(trimmed)
-					}
-				}
+		}
+		// Building filter
+		if (activeBuildings.value.length > 0) {
+			const building = room.roomBuildingName || ''
+			if (!activeBuildings.value.includes(building)) {
+				return false
 			}
-			return [...facilitySet].sort().map((id) => ({
-				id,
-				label: formatFacility(id),
-			}))
-		},
-
-		filteredRooms() {
-			return this.allRooms.filter((room) => {
-				// Always show rooms that are already added to the event
-				if (this.isRoomAdded(room)) {
-					return true
-				}
-				// Text filter
-				if (this.filterText) {
-					const q = this.filterText.toLowerCase()
-					if (!room.displayname?.toLowerCase().includes(q)
-						&& !room.roomAddress?.toLowerCase().includes(q)
-						&& !room.roomBuildingAddress?.toLowerCase().includes(q)
-						&& !room.roomBuildingName?.toLowerCase().includes(q)
-						&& !room.roomNumber?.toLowerCase().includes(q)) {
-						return false
-					}
-				}
-				// Building filter
-				if (this.activeBuildings.length > 0) {
-					const building = room.roomBuildingName || ''
-					if (!this.activeBuildings.includes(building)) {
-						return false
-					}
-				}
-				// Available filter
-				if (this.filterAvailableOnly && !room.isAvailable) {
+		}
+		// Available filter
+		if (filterAvailableOnly.value && !room.isAvailable) {
+			return false
+		}
+		// Capacity filter
+		if (filterMinCapacity.value > 0) {
+			const cap = parseInt(room.roomSeatingCapacity as string) || 0
+			if (cap < filterMinCapacity.value) {
+				return false
+			}
+		}
+		// Facility filters
+		if (activeFacilities.value.length > 0) {
+			const features = room.roomFeatures?.split(',').map((f) => f.trim()) ?? []
+			for (const required of activeFacilities.value) {
+				if (!features.includes(required)) {
 					return false
 				}
-				// Capacity filter
-				if (this.filterMinCapacity > 0) {
-					const cap = parseInt(room.roomSeatingCapacity) || 0
-					if (cap < this.filterMinCapacity) {
-						return false
-					}
-				}
-				// Facility filters
-				if (this.activeFacilities.length > 0) {
-					const features = room.roomFeatures?.split(',').map((f) => f.trim()) ?? []
-					for (const required of this.activeFacilities) {
-						if (!features.includes(required)) {
-							return false
-						}
-					}
-				}
-				return true
-			})
-		},
-
-		sortedRooms() {
-			return [...this.filteredRooms].sort((a, b) => {
-				// Booked rooms first
-				const aAdded = this.isRoomAdded(a) ? 0 : 1
-				const bAdded = this.isRoomAdded(b) ? 0 : 1
-				if (aAdded !== bAdded) {
-					return aAdded - bAdded
-				}
+			}
+		}
+		return true
+	})
+})
+
+const sortedRooms = computed<RoomPrincipal[]>(() => {
+	return [...filteredRooms.value].sort((a, b) => {
+		// Booked rooms first
+		const aAdded = isRoomAdded(a) ? 0 : 1
+		const bAdded = isRoomAdded(b) ? 0 : 1
+		if (aAdded !== bAdded) {
+			return aAdded - bAdded
+		}
 
-				// Available before unavailable
-				const aAvail = a.isAvailable ? 0 : 1
-				const bAvail = b.isAvailable ? 0 : 1
-				if (aAvail !== bAvail) {
-					return aAvail - bAvail
-				}
+		// Available before unavailable
+		const aAvail = a.isAvailable ? 0 : 1
+		const bAvail = b.isAvailable ? 0 : 1
+		if (aAvail !== bAvail) {
+			return aAvail - bAvail
+		}
 
-				// Alphabetically
-				return (a.displayname || '').localeCompare(b.displayname || '')
-			})
-		},
+		// Alphabetically
+		return (a.displayname || '').localeCompare(b.displayname || '')
+	})
+})
 
-		groupedRooms() {
-			const groups = {}
+const groupedRooms = computed<RoomGroup[]>(() => {
+	const groups: Record<string, RoomGroup> = {}
 
-			for (const room of this.sortedRooms) {
-				const groupName = room.roomBuildingName || this.$t('calendar', 'Other')
-				if (!groups[groupName]) {
-					groups[groupName] = { name: groupName, rooms: [], availableCount: 0 }
-				}
-				groups[groupName].rooms.push(room)
-				if (room.isAvailable) {
-					groups[groupName].availableCount++
-				}
-			}
+	for (const room of sortedRooms.value) {
+		const groupName = room.roomBuildingName || t('calendar', 'Other')
+		if (!groups[groupName]) {
+			groups[groupName] = { name: groupName, rooms: [], availableCount: 0 }
+		}
+		groups[groupName].rooms.push(room)
+		if (room.isAvailable) {
+			groups[groupName].availableCount++
+		}
+	}
 
-			// Sort groups: groups with added rooms first, then alphabetically
-			return Object.values(groups).sort((a, b) => {
-				const aHasAdded = a.rooms.some((r) => this.isRoomAdded(r)) ? 0 : 1
-				const bHasAdded = b.rooms.some((r) => this.isRoomAdded(r)) ? 0 : 1
-				if (aHasAdded !== bHasAdded) {
-					return aHasAdded - bHasAdded
-				}
-				return a.name.localeCompare(b.name)
-			})
-		},
-
-		totalFilteredCount() {
-			return this.sortedRooms.length
-		},
-	},
-
-	watch: {
-		'calendarObjectInstance.startDate': 'debouncedLoadAvailability',
-		'calendarObjectInstance.endDate': 'debouncedLoadAvailability',
-	},
-
-	created() {
-		this.debouncedLoadAvailability = debounce(this.loadAvailability, 500)
-	},
-
-	async mounted() {
-		if (this.resourceBookingEnabled) {
-			await this.loadAllRooms()
+	// Sort groups: groups with added rooms first, then alphabetically
+	return Object.values(groups).sort((a, b) => {
+		const aHasAdded = a.rooms.some((r) => isRoomAdded(r)) ? 0 : 1
+		const bHasAdded = b.rooms.some((r) => isRoomAdded(r)) ? 0 : 1
+		if (aHasAdded !== bHasAdded) {
+			return aHasAdded - bHasAdded
 		}
-	},
-
-	methods: {
-		async loadAllRooms() {
-			this.isLoadingAvailability = true
-
-			const roomPrincipals = this.principalsStore.getRoomPrincipals || []
-			this.allRooms = roomPrincipals.map((p) => ({
-				...p,
-				isAvailable: true,
-			}))
-
-			await this.loadAvailability()
-			this.isLoadingAvailability = false
-
-			// Initialize expanded groups after data is loaded
-			this.$nextTick(() => {
-				const groups = this.groupedRooms
-				const expanded = {}
-				if (groups.length <= 3) {
-					for (const g of groups) {
-						expanded[g.name] = true
-					}
-				} else if (groups.length > 0) {
-					expanded[groups[0].name] = true
-				}
-				this.expandedGroups = expanded
-			})
-		},
+		return a.name.localeCompare(b.name)
+	})
+})
 
-		async loadAvailability() {
-			if (this.allRooms.length === 0) {
-				return
-			}
+const totalFilteredCount = computed<number>(() => {
+	return sortedRooms.value.length
+})
 
-			const options = this.allRooms.map((r) => ({
-				email: r.emailAddress,
-				isAvailable: true,
-			}))
-
-			try {
-				await checkResourceAvailability(
-					options,
-					this.principalsStore.getCurrentUserPrincipalEmail,
-					this.calendarObjectInstance.eventComponent.startDate,
-					this.calendarObjectInstance.eventComponent.endDate,
-				)
-
-				for (let i = 0; i < this.allRooms.length; i++) {
-					const opt = options.find((o) => o.email === this.allRooms[i].emailAddress)
-					if (opt) {
-						this.allRooms[i] = { ...this.allRooms[i], isAvailable: opt.isAvailable }
-					}
-				}
-			} catch (error) {
-				logger.error('Could not check room availability', { error })
-			}
-		},
-
-		isRoomAdded(room) {
-			return this.alreadyInvitedEmails.includes(room.emailAddress)
-		},
-
-		toggleBuilding(building) {
-			const idx = this.activeBuildings.indexOf(building)
-			if (idx >= 0) {
-				this.activeBuildings.splice(idx, 1)
-			} else {
-				this.activeBuildings.push(building)
-			}
-		},
-
-		toggleFacility(facilityId) {
-			const idx = this.activeFacilities.indexOf(facilityId)
-			if (idx >= 0) {
-				this.activeFacilities.splice(idx, 1)
-			} else {
-				this.activeFacilities.push(facilityId)
-			}
-		},
-
-		toggleGroup(groupName) {
-			this.expandedGroups[groupName] = !this.expandedGroups[groupName]
-		},
-
-		addResource({ commonName, email, calendarUserType, language, timezoneId, roomAddress }) {
-			this.calendarObjectInstanceStore.addAttendee({
-				calendarObjectInstance: this.calendarObjectInstance,
-				commonName,
-				uri: email,
-				calendarUserType: calendarUserType || 'ROOM',
-				participationStatus: 'NEEDS-ACTION',
-				role: 'REQ-PARTICIPANT',
-				rsvp: true,
-				language,
-				timezoneId,
-				organizer: this.principalsStore.getCurrentUserPrincipal,
-			})
-			this.updateLocation(roomAddress)
-		},
-
-		removeResource(resource) {
-			this.calendarObjectInstanceStore.removeAttendee({
-				calendarObjectInstance: this.calendarObjectInstance,
-				attendee: resource,
-			})
-		},
-
-		removeRoomByPrincipal(room) {
-			const attendee = this.resources.find((a) => removeMailtoPrefix(a.uri) === room.emailAddress)
-			if (attendee) {
-				this.removeResource(attendee)
+// Methods
+function isRoomAdded(room: RoomPrincipal): boolean {
+	return alreadyInvitedEmails.value.includes(room.emailAddress as string)
+}
+
+function toggleBuilding(building: string): void {
+	const idx = activeBuildings.value.indexOf(building)
+	if (idx >= 0) {
+		activeBuildings.value.splice(idx, 1)
+	} else {
+		activeBuildings.value.push(building)
+	}
+}
+
+function toggleFacility(facilityId: string): void {
+	const idx = activeFacilities.value.indexOf(facilityId)
+	if (idx >= 0) {
+		activeFacilities.value.splice(idx, 1)
+	} else {
+		activeFacilities.value.push(facilityId)
+	}
+}
+
+function toggleGroup(groupName: string): void {
+	expandedGroups[groupName] = !expandedGroups[groupName]
+}
+
+async function loadAvailability(): Promise<void> {
+	if (allRooms.value.length === 0) {
+		return
+	}
+
+	const options = allRooms.value.map((r) => ({
+		email: r.emailAddress,
+		isAvailable: true,
+	}))
+
+	try {
+		await checkResourceAvailability(
+			options,
+			principalsStore.getCurrentUserPrincipalEmail,
+			props.calendarObjectInstance.eventComponent.startDate,
+			props.calendarObjectInstance.eventComponent.endDate,
+		)
+
+		for (let i = 0; i < allRooms.value.length; i++) {
+			const opt = options.find((o) => o.email === allRooms.value[i].emailAddress)
+			if (opt) {
+				allRooms.value[i] = { ...allRooms.value[i], isAvailable: opt.isAvailable }
 			}
-		},
+		}
+	} catch (error) {
+		logger.error('Could not check room availability', { error })
+	}
+}
+
+const debouncedLoadAvailability = debounce(loadAvailability, 500)
+
+async function loadAllRooms(): Promise<void> {
+	isLoadingAvailability.value = true
+
+	const roomPrincipals = principalsStore.getRoomPrincipals || []
+	allRooms.value = roomPrincipals.map((p: Record<string, unknown>) => ({
+		...p,
+		isAvailable: true,
+	} as RoomPrincipal))
+
+	await loadAvailability()
+	isLoadingAvailability.value = false
 
-		updateLocation(location) {
-			if (!location) {
-				return
+	// Initialize expanded groups after data is loaded
+	nextTick(() => {
+		const groups = groupedRooms.value
+		if (groups.length <= 3) {
+			for (const g of groups) {
+				expandedGroups[g.name] = true
 			}
-			this.calendarObjectInstanceStore.changeLocation({
-				calendarObjectInstance: this.calendarObjectInstance,
-				location,
-			})
-		},
-	},
+		} else if (groups.length > 0) {
+			expandedGroups[groups[0].name] = true
+		}
+	})
+}
+
+function addResource({ commonName, email, calendarUserType, language, timezoneId, roomAddress }: AddRoomPayload): void {
+	calendarObjectInstanceStore.addAttendee({
+		calendarObjectInstance: props.calendarObjectInstance,
+		commonName,
+		uri: email,
+		calendarUserType: calendarUserType || 'ROOM',
+		participationStatus: 'NEEDS-ACTION',
+		role: 'REQ-PARTICIPANT',
+		rsvp: true,
+		language,
+		timezoneId,
+		organizer: principalsStore.getCurrentUserPrincipal,
+	})
+	updateLocation(roomAddress)
+}
+
+function removeResource(resource: Attendee): void {
+	calendarObjectInstanceStore.removeAttendee({
+		calendarObjectInstance: props.calendarObjectInstance,
+		attendee: resource,
+	})
 }
+
+function removeRoomByPrincipal(room: RoomPrincipal): void {
+	const attendee = resources.value.find((a) => removeMailtoPrefix(a.uri) === room.emailAddress)
+	if (attendee) {
+		removeResource(attendee)
+	}
+}
+
+function updateLocation(location: string | null): void {
+	if (!location) {
+		return
+	}
+	calendarObjectInstanceStore.changeLocation({
+		calendarObjectInstance: props.calendarObjectInstance,
+		location,
+	})
+}
+
+// Watchers
+watch(() => props.calendarObjectInstance.startDate, debouncedLoadAvailability)
+watch(() => props.calendarObjectInstance.endDate, debouncedLoadAvailability)
+
+// Lifecycle
+onMounted(async () => {
+	if (resourceBookingEnabled) {
+		await loadAllRooms()
+	}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Editor/Resources/ResourceListItem.vue b/src/components/Editor/Resources/ResourceListItem.vue
deleted file mode 100644
index 2b5cf8d24a..0000000000
--- a/src/components/Editor/Resources/ResourceListItem.vue
+++ /dev/null
@@ -1,251 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<div class="resource-list-item">
-		<AvatarParticipationStatus
-			:attendeeIsOrganizer="false"
-			:isViewedByOrganizer="isViewedByOrganizer"
-			:isResource="true"
-			:isSuggestion="isSuggestion"
-			:avatarLink="commonName"
-			:participationStatus="participationStatus"
-			:scheduleStatus="scheduleStatus"
-			:organizerDisplayName="organizerDisplayName"
-			:commonName="commonName" />
-		<div class="resource-list-item__displayname">
-			{{ commonName }}
-		</div>
-		<div class="resource-list-item__actions">
-			<Actions v-if="isViewedByOrganizer && isSuggestion">
-				<ActionButton @click="addSuggestion">
-					<template #icon>
-						<Plus :size="20" decorative />
-					</template>
-					{{ $t('calendar', 'Add resource') }}
-				</ActionButton>
-			</actions>
-			<Actions v-else-if="isViewedByOrganizer">
-				<ActionCaption
-					v-if="seatingCapacity"
-					:name="seatingCapacity" />
-				<ActionCaption
-					v-if="roomType"
-					:name="roomType" />
-				<ActionCaption
-					v-if="hasProjector"
-					:name="$t('calendar', 'Has a projector')" />
-				<ActionCaption
-					v-if="hasWhiteboard"
-					:name="$t('calendar', 'Has a whiteboard')" />
-				<ActionCaption
-					v-if="isAccessible"
-					:name="$t('calendar', 'Wheelchair accessible')" />
-				<ActionSeparator v-if="seatingCapacity || roomType || hasProjector || hasWhiteboard || isAccessible" />
-				<ActionButton @click="removeResource">
-					<template #icon>
-						<Delete :size="20" decorative />
-					</template>
-					{{ $t('calendar', 'Remove resource') }}
-				</ActionButton>
-			</actions>
-		</div>
-	</div>
-</template>
-
-<script>
-import {
-	NcActionButton as ActionButton,
-	NcActionCaption as ActionCaption,
-	NcActions as Actions,
-	NcActionSeparator as ActionSeparator,
-} from '@nextcloud/vue'
-import Plus from 'vue-material-design-icons/Plus.vue'
-import Delete from 'vue-material-design-icons/TrashCanOutline.vue'
-import AvatarParticipationStatus from '../AvatarParticipationStatus.vue'
-import { formatRoomType } from '../../../models/resourceProps.js'
-import { principalPropertySearchByDisplaynameOrEmail } from '../../../services/caldavService.js'
-import { removeMailtoPrefix } from '../../../utils/attendee.js'
-import logger from '../../../utils/logger.js'
-
-export default {
-	name: 'ResourceListItem',
-	components: {
-		AvatarParticipationStatus,
-		ActionButton,
-		ActionCaption,
-		ActionSeparator,
-		Actions,
-		Delete,
-		Plus,
-	},
-
-	props: {
-		resource: {
-			type: Object,
-			required: true,
-		},
-
-		organizerDisplayName: {
-			type: String,
-			required: true,
-		},
-
-		isReadOnly: {
-			type: Boolean,
-			required: true,
-		},
-
-		isSuggestion: {
-			type: Boolean,
-			default: false,
-		},
-
-		isViewedByOrganizer: {
-			type: Boolean,
-			default: false,
-		},
-	},
-
-	data() {
-		return {
-			principal: null,
-		}
-	},
-
-	computed: {
-		commonName() {
-			if (this.resource.commonName) {
-				return this.resource.commonName
-			}
-
-			if (this.resource.uri) {
-				return removeMailtoPrefix(this.resource.uri)
-			}
-
-			return this.resource.uri
-		},
-
-		isAccessible() {
-			return this.hasFeature('WHEELCHAIR-ACCESSIBLE')
-		},
-
-		hasProjector() {
-			return this.hasFeature('PROJECTOR')
-		},
-
-		hasWhiteboard() {
-			return this.hasFeature('WHITEBOARD')
-		},
-
-		seatingCapacity() {
-			const seatingCapacity = this.principal?.roomSeatingCapacity
-			if (!seatingCapacity) {
-				return null
-			}
-
-			return this.$n(
-				'calendar',
-				'{seatingCapacity} seat',
-				'{seatingCapacity} seats',
-				seatingCapacity,
-				{
-					seatingCapacity,
-				},
-			)
-		},
-
-		roomType() {
-			const roomType = this.principal?.roomType
-			return formatRoomType(roomType) ?? roomType
-		},
-
-		participationStatus() {
-			if (this.isSuggestion) {
-				return ''
-			}
-
-			return this.resource.participationStatus
-		},
-
-		scheduleStatus() {
-			return this.resource.attendeeProperty?.getParameterFirstValue('SCHEDULE-STATUS') ?? ''
-		},
-	},
-
-	watch: {
-		async resource() {
-			await this.fetchPrincipal()
-		},
-	},
-
-	async mounted() {
-		await this.fetchPrincipal()
-	},
-
-	methods: {
-		/**
-		 * Add this suggestions to the event
-		 */
-		addSuggestion() {
-			this.$emit('addSuggestion', this.resource)
-		},
-
-		/**
-		 * Removes a resource from the event
-		 */
-		removeResource() {
-			this.$emit('removeResource', this.resource)
-		},
-
-		/**
-		 * Check if this resource has a feature
-		 *
-		 * @param {string} feature The name of the feature
-		 * @return {boolean} True if this resource has the given feature
-		 */
-		hasFeature(feature) {
-			const features = this.principal?.roomFeatures?.split(',') ?? []
-			return !!features.find((featureToCheck) => featureToCheck === feature)
-		},
-
-		/**
-		 * Try to fetch the principal belonging to this resource
-		 */
-		async fetchPrincipal() {
-			const uri = removeMailtoPrefix(this.resource.uri)
-			let principals = await principalPropertySearchByDisplaynameOrEmail(uri)
-			principals = principals.filter((principal) => removeMailtoPrefix(principal.email) === uri)
-			if (principals.length === 0) {
-				logger.debug('No principal for resource found', {
-					uri: this.resource.uri,
-				})
-				this.principal = null
-				return
-			} else if (principals.length > 1) {
-				logger.debug('More than one principal for resource found', {
-					uri: this.resource.uri,
-					principals,
-				})
-			}
-
-			this.principal = principals[0]
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.resource-list-item__displayname {
-	margin-bottom: 17px;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	white-space: nowrap;
-}
-
-.avatar-participation-status {
-	margin-top: 5px;
-}
-</style>
diff --git a/src/components/Editor/Resources/ResourceListSearch.vue b/src/components/Editor/Resources/ResourceListSearch.vue
deleted file mode 100644
index 74cf801abe..0000000000
--- a/src/components/Editor/Resources/ResourceListSearch.vue
+++ /dev/null
@@ -1,294 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<div class="resource-search">
-		<NcButton class="button availability" @click="openRoomAvailability">
-			{{ $t('calendar', 'Show all rooms') }}
-		</NcButton>
-
-		<RoomAvailabilityList
-			v-if="showRoomAvailabilityModal"
-			:showDialog="showRoomAvailabilityModal"
-			:calendarObjectInstance="calendarObjectInstance"
-			:startDate="calendarObjectInstance.startDate"
-			:endDate="calendarObjectInstance.endDate"
-			@update:showDialog="setShowRoomAvailabilityModal" />
-		<NcSelect
-			v-model="selectedResource"
-			class="resource-search__multiselect"
-			:options="matches"
-			:searchable="true"
-			:max-height="600"
-			:placeholder="placeholder"
-			:labelOutside="true"
-			:class="{ showContent: inputGiven, 'icon-loading': isLoading }"
-			inputId="email"
-			label="displayName"
-			:clearable="false"
-			@search="findResources">
-			<template #option="option">
-				<div class="resource-search-list-item">
-					<Avatar
-						:disableTooltip="true"
-						:displayName="option.displayName" />
-					<div class="resource-search-list-item__label resource-search-list-item__label--single-email">
-						<div>
-							{{ option.displayName }}
-							<span
-								v-if="!isAvailable"
-								class="resource-search-list-item__label__availability">
-								({{ formatAvailability(option.isAvailable) }})
-							</span>
-						</div>
-						<div :name="option.subLine">
-							{{ option.subLine }}
-						</div>
-					</div>
-				</div>
-			</template>
-		</NcSelect>
-
-		<template>
-			<div class="resource-search__capacity">
-				<ResourceSeatingCapacity v-model="capacity" />
-				<Actions class="resource-search__capacity__actions">
-					<ActionCheckbox v-model="isAvailable">
-						<!-- Translators room or resource is not yet booked -->
-						{{ $t('calendar', 'Available') }}
-					</ActionCheckbox>
-					<ActionCheckbox v-model="hasProjector">
-						{{ $t('calendar', 'Projector') }}
-					</ActionCheckbox>
-					<ActionCheckbox v-model="hasWhiteboard">
-						{{ $t('calendar', 'Whiteboard') }}
-					</ActionCheckbox>
-					<ActionCheckbox v-model="isAccessible">
-						{{ $t('calendar', 'Wheelchair accessible') }}
-					</ActionCheckbox>
-				</Actions>
-			</div>
-			<ResourceRoomType v-model="roomType" />
-		</template>
-	</div>
-</template>
-
-<script>
-import {
-	NcActionCheckbox as ActionCheckbox,
-	NcActions as Actions,
-	NcAvatar as Avatar,
-	NcButton,
-	NcSelect,
-} from '@nextcloud/vue'
-import debounce from 'debounce'
-import { mapStores } from 'pinia'
-import RoomAvailabilityList from '../FreeBusy/RoomAvailabilityList.vue'
-import ResourceRoomType from './ResourceRoomType.vue'
-import ResourceSeatingCapacity from './ResourceSeatingCapacity.vue'
-import { advancedPrincipalPropertySearch } from '../../../services/caldavService.js'
-import { checkResourceAvailability } from '../../../services/freeBusyService.js'
-import usePrincipalsStore from '../../../store/principals.js'
-import logger from '../../../utils/logger.js'
-export default {
-	name: 'ResourceListSearch',
-	components: {
-		RoomAvailabilityList,
-		Avatar,
-		NcButton,
-		NcSelect,
-		ResourceSeatingCapacity,
-		Actions,
-		ActionCheckbox,
-		ResourceRoomType,
-	},
-
-	props: {
-		alreadyInvitedEmails: {
-			type: Array,
-			required: true,
-		},
-
-		calendarObjectInstance: {
-			type: Object,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			isLoading: false,
-			inputGiven: false,
-			matches: [],
-			capacity: NaN,
-			roomType: '',
-			isAvailable: true,
-			isAccessible: false,
-			hasProjector: false,
-			hasWhiteboard: false,
-			showRoomAvailabilityModal: false,
-			selectedResource: null,
-			rooms: [],
-		}
-	},
-
-	computed: {
-		...mapStores(usePrincipalsStore),
-		placeholder() {
-			return this.$t('calendar', 'Search for resources or rooms')
-		},
-
-		noResult() {
-			return this.$t('calendar', 'No match found')
-		},
-
-		features() {
-			const features = []
-			if (this.isAccessible) {
-				features.push('WHEELCHAIR-ACCESSIBLE')
-			}
-			if (this.hasProjector) {
-				features.push('PROJECTOR')
-			}
-			if (this.hasWhiteboard) {
-				features.push('WHITEBOARD')
-			}
-			return features
-		},
-	},
-
-	watch: {
-		selectedResource(selectedValue) {
-			if (!selectedValue) {
-				return
-			}
-
-			this.addResource(selectedValue)
-			this.selectedResource = null
-		},
-	},
-
-	methods: {
-		openRoomAvailability() {
-			this.showRoomAvailabilityModal = true
-		},
-
-		setShowRoomAvailabilityModal(value) {
-			this.showRoomAvailabilityModal = value
-		},
-
-		findResources: debounce(async function(query) {
-			this.isLoading = true
-			let matches = []
-
-			if (query.length > 0) {
-				matches = await this.findResourcesFromDAV(query)
-				this.isLoading = false
-				this.inputGiven = true
-			} else {
-				this.inputGiven = false
-				this.isLoading = false
-			}
-
-			this.matches = matches
-		}, 500),
-
-		addResource(selectedValue) {
-			this.$emit('addResource', selectedValue)
-		},
-
-		async findResourcesFromDAV(input) {
-			let results
-			try {
-				const query = { displayName: input }
-				query.capacity = this.capacity
-				query.features = this.features
-				query.roomType = this.roomType
-				results = await advancedPrincipalPropertySearch(query)
-			} catch (error) {
-				logger.debug('Could not find resources', { error })
-				return []
-			}
-
-			// Build options
-			let options = results
-				.filter((principal) => {
-					if (!principal.email) {
-						return false
-					}
-
-					if (this.alreadyInvitedEmails.includes(principal.email)) {
-						return false
-					}
-
-					// Only include resources and rooms
-					if (!['RESOURCE', 'ROOM'].includes(principal.calendarUserType)) {
-						return false
-					}
-
-					return true
-				})
-				.map((principal) => {
-					const subLineData = []
-					if (principal.roomSeatingCapacity) {
-						subLineData.push(this.$n('calendar', '{seatingCapacity} seat', '{seatingCapacity} seats', principal.roomSeatingCapacity, {
-							seatingCapacity: principal.roomSeatingCapacity,
-						}))
-					}
-					if (principal.roomAddress) {
-						subLineData.push(principal.roomAddress)
-					}
-
-					return {
-						commonName: principal.displayname,
-						email: principal.email,
-						calendarUserType: principal.calendarUserType,
-						displayName: principal.displayname ?? principal.email,
-						subLine: subLineData.join(' - '),
-						isAvailable: true,
-						roomAddress: principal.roomAddress,
-					}
-				})
-
-			// Check resource availability
-			await checkResourceAvailability(
-				options,
-				this.principalsStore.getCurrentUserPrincipalEmail,
-				this.calendarObjectInstance.eventComponent.startDate,
-				this.calendarObjectInstance.eventComponent.endDate,
-			)
-
-			// Filter by availability
-			if (this.isAvailable) {
-				options = options.filter((option) => option.isAvailable)
-			}
-
-			return options
-		},
-
-		/**
-		 * Format availability of a search result
-		 *
-		 * @param {boolean} isAvailable The availability state
-		 * @return {string} Human readable and localized availability
-		 */
-		formatAvailability(isAvailable) {
-			if (isAvailable) {
-				// TRANSLATORS room or resource is available due to not being booked yet
-				return this.$t('calendar', 'available')
-			}
-
-			// TRANSLATORS room or resource is unavailable due to it being already booked
-			return this.$t('calendar', 'unavailable')
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.button.availability {
-      margin-bottom: 8px;
-}
-</style>
diff --git a/src/components/Editor/Resources/ResourceRoomCard.vue b/src/components/Editor/Resources/ResourceRoomCard.vue
index e44de6b231..ca484ec4b8 100644
--- a/src/components/Editor/Resources/ResourceRoomCard.vue
+++ b/src/components/Editor/Resources/ResourceRoomCard.vue
@@ -1,5 +1,5 @@
 <!--
-  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
@@ -7,21 +7,21 @@
 	<div
 		class="room-card"
 		:class="{
-			'room-card--added': isAdded,
-			'room-card--unavailable': !room.isAvailable && !isAdded,
+			'room-card--added': props.isAdded,
+			'room-card--unavailable': !props.room.isAvailable && !props.isAdded,
 		}"
-		:title="room.roomBuildingAddress || ''">
+		:title="props.room.roomBuildingAddress || ''">
 		<div class="room-card__row">
 			<div class="room-card__info">
-				<span class="room-card__name">{{ room.displayname }}</span>
+				<span class="room-card__name">{{ props.room.displayname }}</span>
 				<span class="room-card__meta">
 					<span
 						class="room-card__status"
 						:class="statusClass">
 						{{ statusLabel }}
 					</span>
-					<template v-if="room.roomSeatingCapacity">
-						&middot; {{ room.roomSeatingCapacity }}p
+					<template v-if="props.room.roomSeatingCapacity">
+						&middot; {{ props.room.roomSeatingCapacity }}p
 					</template>
 					<template v-if="subLocation">
 						&middot; {{ subLocation }}
@@ -32,12 +32,12 @@
 				</span>
 			</div>
 			<NcButton
-				v-if="isViewedByOrganizer && !isReadOnly && (isAdded || (room.isAvailable && !hasRoomSelected))"
-				:variant="isAdded ? 'tertiary' : 'secondary'"
+				v-if="props.isViewedByOrganizer && !props.isReadOnly && (props.isAdded || (props.room.isAvailable && !props.hasRoomSelected))"
+				:variant="props.isAdded ? 'tertiary' : 'secondary'"
 				class="room-card__action"
 				@click="toggleRoom">
 				<template #icon>
-					<Minus v-if="isAdded" :size="20" />
+					<Minus v-if="props.isAdded" :size="20" />
 					<Plus v-else :size="20" />
 				</template>
 			</NcButton>
@@ -45,95 +45,94 @@
 	</div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { t } from '@nextcloud/l10n'
 import { NcButton } from '@nextcloud/vue'
+import { computed } from 'vue'
 import Minus from 'vue-material-design-icons/Minus.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import { formatRoomType } from '../../../models/resourceProps.js'
 
-export default {
-	name: 'ResourceRoomCard',
-	components: {
-		Minus,
-		NcButton,
-		Plus,
-	},
-
-	props: {
-		room: {
-			type: Object,
-			required: true,
-		},
-
-		isAdded: {
-			type: Boolean,
-			default: false,
-		},
-
-		isReadOnly: {
-			type: Boolean,
-			default: false,
-		},
-
-		isViewedByOrganizer: {
-			type: Boolean,
-			default: false,
-		},
-
-		hasRoomSelected: {
-			type: Boolean,
-			default: false,
-		},
-	},
-
-	emits: ['removeRoom', 'addRoom'],
-
-	computed: {
-		statusLabel() {
-			if (this.isAdded) {
-				return this.$t('calendar', 'Reserved')
-			}
-			return this.room.isAvailable
-				? this.$t('calendar', 'Available')
-				: this.$t('calendar', 'Unavailable')
-		},
-
-		statusClass() {
-			if (this.isAdded) {
-				return 'room-card__status--reserved'
-			}
-			return this.room.isAvailable
-				? 'room-card__status--free'
-				: 'room-card__status--busy'
-		},
-
-		subLocation() {
-			return this.room.roomNumber || ''
-		},
-
-		roomTypeLabel() {
-			const type = this.room.roomType
-			if (!type || type === 'meeting-room') {
-				return ''
-			}
-			return formatRoomType(type) ?? type
-		},
-	},
-
-	methods: {
-		toggleRoom() {
-			if (this.isAdded) {
-				this.$emit('removeRoom', this.room)
-			} else {
-				this.$emit('addRoom', {
-					commonName: this.room.displayname,
-					email: this.room.emailAddress,
-					calendarUserType: this.room.calendarUserType,
-					roomAddress: this.room.roomAddress,
-				})
-			}
-		},
-	},
+interface RoomPrincipal {
+	id: string | null
+	displayname: string | null
+	emailAddress: string | null
+	calendarUserType: string
+	isAvailable: boolean
+	roomSeatingCapacity: string | null
+	roomType: string | null
+	roomAddress: string | null
+	roomNumber: string | null
+	roomBuildingName: string | null
+	roomBuildingAddress: string | null
+}
+
+interface AddRoomPayload {
+	commonName: string | null
+	email: string | null
+	calendarUserType: string
+	roomAddress: string | null
+}
+
+const props = withDefaults(defineProps<{
+	room: RoomPrincipal
+	isAdded?: boolean
+	isReadOnly?: boolean
+	isViewedByOrganizer?: boolean
+	hasRoomSelected?: boolean
+}>(), {
+	isAdded: false,
+	isReadOnly: false,
+	isViewedByOrganizer: false,
+	hasRoomSelected: false,
+})
+
+const emit = defineEmits<{
+	removeRoom: [room: RoomPrincipal]
+	addRoom: [payload: AddRoomPayload]
+}>()
+
+const statusLabel = computed<string>(() => {
+	if (props.isAdded) {
+		return t('calendar', 'Reserved')
+	}
+	return props.room.isAvailable
+		? t('calendar', 'Available')
+		: t('calendar', 'Unavailable')
+})
+
+const statusClass = computed<string>(() => {
+	if (props.isAdded) {
+		return 'room-card__status--reserved'
+	}
+	return props.room.isAvailable
+		? 'room-card__status--free'
+		: 'room-card__status--busy'
+})
+
+const subLocation = computed<string>(() => {
+	return props.room.roomNumber || ''
+})
+
+const roomTypeLabel = computed<string>(() => {
+	const type = props.room.roomType
+	if (!type || type === 'meeting-room') {
+		return ''
+	}
+	return formatRoomType(type) ?? type
+})
+
+function toggleRoom(): void {
+	if (props.isAdded) {
+		emit('removeRoom', props.room)
+	} else {
+		emit('addRoom', {
+			commonName: props.room.displayname,
+			email: props.room.emailAddress,
+			calendarUserType: props.room.calendarUserType,
+			roomAddress: props.room.roomAddress,
+		})
+	}
 }
 </script>
 
diff --git a/vitest.config.js b/vitest.config.js
index cd0db91563..eb2231065c 100644
--- a/vitest.config.js
+++ b/vitest.config.js
@@ -1,17 +1,17 @@
 /**
- * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { defineConfig } from 'vitest/config'
 import vue from '@vitejs/plugin-vue'
 import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
 	plugins: [vue()],
 	resolve: {
 		alias: {
-			'@': fileURLToPath(new URL('./src', import.meta.url))
+			'@': fileURLToPath(new URL('./src', import.meta.url)),
 		},
 	},
 	test: {
@@ -26,6 +26,6 @@ export default defineConfig({
 		pool: 'vmThreads',
 		// Increase timeouts for slow CI environments
 		testTimeout: 300000, // 2 minutes per test
-		hookTimeout: 60000,  // 60 seconds for hooks
+		hookTimeout: 60000, // 60 seconds for hooks
 	},
-});
+})

From b8923f3410fa34183f952e70027ba58a23ac43c4 Mon Sep 17 00:00:00 2001
From: Rik Dekker <rik@shalution.nl>
Date: Thu, 19 Feb 2026 19:51:07 +0100
Subject: [PATCH 09/12] fix(test): use forks pool for reliable mock hoisting
 with coverage

The vmThreads/vmForks pools have a non-deterministic issue with
vi.mock() hoisting when V8 coverage is active (vitest-dev/vitest#8861).
Switch to the standard forks pool which uses real Node.js child
processes and handles mock hoisting reliably.

Signed-off-by: Rik Dekker <rik@shalution.nl>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 vitest.config.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/vitest.config.js b/vitest.config.js
index eb2231065c..2c73ad036c 100644
--- a/vitest.config.js
+++ b/vitest.config.js
@@ -22,8 +22,8 @@ export default defineConfig({
 		],
 		globals: true,
 		environment: 'jsdom',
-		// Required for transforming CSS files
-		pool: 'vmThreads',
+		// Use forks pool for reliable vi.mock() hoisting with coverage
+		pool: 'forks',
 		// Increase timeouts for slow CI environments
 		testTimeout: 300000, // 2 minutes per test
 		hookTimeout: 60000, // 60 seconds for hooks

From 4455d5d12fa2d3d4e08f28b5b86be98e537ca0dc Mon Sep 17 00:00:00 2001
From: Rik Dekker <rik@shalution.nl>
Date: Thu, 19 Feb 2026 19:57:29 +0100
Subject: [PATCH 10/12] fix(test): use vmThreads with fileParallelism disabled
 for coverage

The forks pool cannot transform CSS files from @nextcloud/vue, causing
"Unknown file extension .css" errors. Switch back to vmThreads (which
handles CSS via the Vite pipeline) but disable fileParallelism to
prevent the non-deterministic vi.mock() hoisting failures when V8
coverage is active (vitest-dev/vitest#8861).

Signed-off-by: Rik Dekker <rik@shalution.nl>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 vitest.config.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/vitest.config.js b/vitest.config.js
index 2c73ad036c..cd374bca8a 100644
--- a/vitest.config.js
+++ b/vitest.config.js
@@ -22,8 +22,11 @@ export default defineConfig({
 		],
 		globals: true,
 		environment: 'jsdom',
-		// Use forks pool for reliable vi.mock() hoisting with coverage
-		pool: 'forks',
+		// vmThreads is required for CSS file transformation from @nextcloud/vue
+		pool: 'vmThreads',
+		// Disable parallelism to prevent non-deterministic vi.mock() hoisting
+		// failures when V8 coverage is active (vitest-dev/vitest#8861)
+		fileParallelism: false,
 		// Increase timeouts for slow CI environments
 		testTimeout: 300000, // 2 minutes per test
 		hookTimeout: 60000, // 60 seconds for hooks

From 941c016f8f70dae289f1f05fd729e6a424a9f137 Mon Sep 17 00:00:00 2001
From: Rik Dekker <rik@shalution.nl>
Date: Fri, 20 Feb 2026 08:18:44 +0100
Subject: [PATCH 11/12] fix(test): use vmForks with singleFork to stabilize
 coverage mocks

Use vmForks pool (required for CSS transformation) with singleFork
option to serialize test execution in a single VM fork, preventing
the non-deterministic vi.mock() hoisting failures when V8 coverage
is active (vitest-dev/vitest#8861).

Signed-off-by: Rik Dekker <rik@shalution.nl>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 vitest.config.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/vitest.config.js b/vitest.config.js
index cd374bca8a..9703ea6894 100644
--- a/vitest.config.js
+++ b/vitest.config.js
@@ -22,11 +22,13 @@ export default defineConfig({
 		],
 		globals: true,
 		environment: 'jsdom',
-		// vmThreads is required for CSS file transformation from @nextcloud/vue
-		pool: 'vmThreads',
-		// Disable parallelism to prevent non-deterministic vi.mock() hoisting
-		// failures when V8 coverage is active (vitest-dev/vitest#8861)
-		fileParallelism: false,
+		// Required for transforming CSS files
+		pool: 'vmForks',
+		poolOptions: {
+			vmForks: {
+				singleFork: true,
+			},
+		},
 		// Increase timeouts for slow CI environments
 		testTimeout: 300000, // 2 minutes per test
 		hookTimeout: 60000, // 60 seconds for hooks

From 27c347bf0e6dbd7d0edd300cc85b7cf6580c9f78 Mon Sep 17 00:00:00 2001
From: Rikdekker <Rikdekker@users.noreply.github.com>
Date: Tue, 24 Feb 2026 17:57:46 +0100
Subject: [PATCH 12/12] fix(resources): restore isViewedByOrganizer guard in
 onMounted

Prevent loading room data for non-organizers by checking
isViewedByOrganizer before calling loadAllRooms().

Addresses review feedback from SebastianKrupinski on PR #7996.

Signed-off-by: Rikdekker <Rikdekker@users.noreply.github.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/Editor/Resources/ResourceList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Editor/Resources/ResourceList.vue b/src/components/Editor/Resources/ResourceList.vue
index a8cb5d4be3..a5f37223ba 100644
--- a/src/components/Editor/Resources/ResourceList.vue
+++ b/src/components/Editor/Resources/ResourceList.vue
@@ -485,7 +485,7 @@ watch(() => props.calendarObjectInstance.endDate, debouncedLoadAvailability)
 
 // Lifecycle
 onMounted(async () => {
-	if (resourceBookingEnabled) {
+	if (resourceBookingEnabled && isViewedByOrganizer.value) {
 		await loadAllRooms()
 	}
 })