feat(resources): Visual room browser with building grouping and filters by Rikdekker · Pull Request #7996 · nextcloud/calendar

Rikdekker · 2026-02-19T16:26:19Z

Summary

Replace the minimal resource picker (search-only, max 3 suggestions) with a comprehensive visual room browser that shows all available rooms at once, grouped by building.

All rooms visible — loads all room principals upfront instead of requiring a search query
Building grouping — rooms grouped by building with collapsible sections showing available/total counts
Real-time availability — each room shows Available (green) / Unavailable (red) / Reserved (blue) status
Client-side filtering — text search across name, building, address, floor; available-only toggle; minimum capacity filter
Dynamic filter chips — building chips and facility chips generated from actual room data (no hardcoded list)
Room cards — compact cards showing name, status badge, capacity, floor/location, room type, and add/remove button

Feature	Before	After
All rooms visible	No (search or max 3 suggestions)	Yes, all rooms at once
Building grouping	No	Yes, expand/collapse per group
Availability status	Only in search results	Per room, real-time
Text search	Name only via DAV roundtrip	Client-side on name, building, address, floor
Available-only filter	Checkbox in search	Toggle that filters entire list
Min. capacity filter	In search form	Inline filter
Building filter	No	Dynamic chips, multi-select
Facility filter	3 hardcoded checkboxes	Dynamic chips based on actual room features

Screenshots

Context

This room browser was developed as part of RoomVox, a CalDAV-based room booking backend for Nextcloud. Full documentation of the patch and its data flow is available at calendar-patch.md.

Changes

ResourceList.vue — full rewrite: loads all room principals, checks availability via free/busy, groups by building, client-side filtering with text/capacity/building/facility filters
ResourceRoomCard.vue — new component: compact card with availability badge, capacity, floor, room type, add/remove button
principal.js — extract room-specific DAV properties (seating capacity, room type, features, building address, room number) and derive a structured LOCATION string
resourceProps.js — add formatFacility() helper and extend getAllRoomTypes() with additional room types (board room, conference room, rehearsal room, studio, outdoor area)

Test plan

🤖 Generated with Claude Code

…ilters 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>

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>

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>

…mCard 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>

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>

…st 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>

SebastianKrupinski · 2026-02-19T18:03:17Z

@@ -0,0 +1,204 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors


We are in 2026

…bility 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>

SebastianKrupinski · 2026-02-19T18:09:06Z

Hi @Rikdekker

I had a quick look at the changes you are suggesting. I am not sure if packing all that information in to that corner of the editor is a good idea, I think maybe adding a room selection modal might be a better approache

Lets see what design thinks? @nextcloud/designers @nimishavijay

Rikdekker · 2026-02-19T18:19:24Z

Hi @Rikdekker

I had a quick look at the changes you are suggesting. I am not sure if packing all that information in to that corner of the editor is a good idea, I think maybe adding a room selection modal might be a better approache

Lets see what design thinks? @nextcloud/designers @nimishavijay

Agreed! We can also give some ideas about reorganizing the page

codecov · 2026-02-19T18:21:43Z

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

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>

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>

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>

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>

Prevent loading room data for non-organizers by checking isViewedByOrganizer before calling loadAllRooms(). Addresses review feedback from SebastianKrupinski on PR nextcloud#7996. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Prevent loading room data for non-organizers by checking isViewedByOrganizer before calling loadAllRooms(). Addresses review feedback from SebastianKrupinski on PR nextcloud#7996. Signed-off-by: Rikdekker <Rikdekker@users.noreply.github.com> Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Rikdekker · 2026-02-24T17:25:57Z

Friendly ping @nextcloud/designers @nimishavijay — would love your input on the modal vs inline approach so we can move forward. Happy to prepare mockups for either direction.

In the meantime I've addressed the code review feedback from @SebastianKrupinski:

✅ Restored isViewedByOrganizer guard in onMounted
✅ Removed unused ResourceListSearch.vue
✅ Fixed copyright year
✅ Converted to TypeScript with Composition API and <script setup>

jancborchardt

This is indeed very very busy. Could we follow the MS Outlook calendar approach, to the right sidebar? It’s much more organized by using select elements:

Event modal

Sidebar detail

Building select

Features

Rikdekker · 2026-02-26T09:23:26Z

@jancborchardt thanks for the feedback. What do you think of this design proposal?

jancborchardt

The interaction is good, but the layout was nice as before with attendees 2/3 (left column) and the room selector 1/3 (right column). That will also help people switching over from MS to adjust quicker.

Rikdekker · 2026-02-26T09:49:57Z

@jancborchardt What do you think about this? We think it is quite busy to have all the information at the same time on one screen.

jancborchardt

@Rikdekker right, that's a valid concern. The approach with a (nonstandard) sidebar on top of a modal is a bit strange though.

Instead what do you think about having a button "Room finder" (note we use sentence case) in the right column, same level as the sharing input, which then expands that info.

Interaction-wise it works similar to your proposal, but is a bit more integrated.

Rikdekker · 2026-03-02T16:51:27Z

@jancborchardt Here's a demo of a new proposal for the calendar event modal including room finder interaction (filtering, availability, selecting a room):

Documentation

I've written up detailed documentation for this feature:

Proposal — Problem statement, solution overview, comparison table
Technical details — Code-level changes, DAV property mapping, data flow
Splitting strategy — How to break this into focused, reviewable PRs

Looking forward to you feedback!

github-actions · 2026-03-06T02:14:24Z

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)

Rikdekker · 2026-03-24T08:27:58Z

@jancborchardt can you give an update of the status of this PR?

Rikdekker · 2026-04-13T05:38:28Z

@jancborchardt Friendly reminder — this has been waiting on design feedback for about 7 weeks now. I'd love to move this forward.

I've iterated on the design based on your earlier input and posted a working demo with documentation on March 2nd. I'm happy with the current approach — it balances usability and information density well without overloading the modal.

Could you take another look and share any remaining concerns? If there are specific things you'd like adjusted I'm happy to discuss, but I'd like to avoid the PR going stale. Thanks!

nimishavijay · 2026-04-13T10:40:41Z

Hello! Thank you for taking the time to contribute :) From your latest screencast I see that there are many different updates that go beyond the scope of just room management, and the result of the room management UI is quite different from what @jancborchardt had suggested as well. Please update the UI with the feedback in mind (we do want to be rather similar to Outlook, but with Nextcloud's design language, and good alignment of text and icons), and let's keep the scope of this to just room management so it is easier for the developers to review :)

Rikdekker requested review from GVodyanov, SebastianKrupinski and tcitworld as code owners February 19, 2026 16:26

Rikdekker added 4 commits February 19, 2026 17:45

Rikdekker force-pushed the feature/visual-room-browser branch from 4aa6f97 to f92802f Compare February 19, 2026 16:45

Rikdekker force-pushed the feature/visual-room-browser branch from e13919c to 5f1ab97 Compare February 19, 2026 16:59

SebastianKrupinski added 2. developing Work in progress enhancement New feature request labels Feb 19, 2026

SebastianKrupinski reviewed Feb 19, 2026

View reviewed changes

Rikdekker and others added 4 commits February 19, 2026 19:35

Rikdekker force-pushed the feature/visual-room-browser branch from 6fdc817 to 27c347b Compare February 24, 2026 17:13

jancborchardt requested a review from marcoambrosini February 24, 2026 20:52

jancborchardt requested changes Feb 25, 2026

View reviewed changes

ChristophWurst marked this pull request as draft February 25, 2026 11:59

jancborchardt reviewed Feb 26, 2026

View reviewed changes

github-actions bot added the feedback-requested label Mar 6, 2026

		@@ -0,0 +1,204 @@
		<!--
		- SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors

Conversation

Rikdekker commented Feb 19, 2026

Summary

Screenshots

Context

Changes

Test plan

Uh oh!

Uh oh!

Uh oh!

Uh oh!

SebastianKrupinski Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

SebastianKrupinski commented Feb 19, 2026

Uh oh!

Rikdekker commented Feb 19, 2026

Uh oh!

codecov bot commented Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Rikdekker commented Feb 24, 2026

Uh oh!

jancborchardt left a comment

Choose a reason for hiding this comment

Event modal

Sidebar detail

Building select

Features

Uh oh!

Rikdekker commented Feb 26, 2026

Uh oh!

jancborchardt left a comment

Choose a reason for hiding this comment

Uh oh!

Rikdekker commented Feb 26, 2026

Uh oh!

jancborchardt left a comment

Choose a reason for hiding this comment

Uh oh!

Rikdekker commented Mar 2, 2026

Documentation

Uh oh!

github-actions bot commented Mar 6, 2026

Uh oh!

Rikdekker commented Mar 24, 2026

Uh oh!

Rikdekker commented Apr 13, 2026

Uh oh!

nimishavijay commented Apr 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

codecov bot commented Feb 19, 2026 •

edited

Loading