Skip to content

feat: room browser design - #8718

Closed
nimishavijay wants to merge 8 commits into
mainfrom
review/room-browser-design
Closed

feat: room browser design#8718
nimishavijay wants to merge 8 commits into
mainfrom
review/room-browser-design

Conversation

@nimishavijay

@nimishavijay nimishavijay commented Aug 11, 2026

Copy link
Copy Markdown
Member

This is just a visual reference for PR #8264 which needs design feedback. Directly made code changes so the CSS is easier to reference rather than recreate from scratch, feel free to take over it :) Note: I am NOT a professional developer and made this using mostly AI, so take the validity of the code in this with a grain of salt, apologies for any spaghetti 🙈

The main idea is to move the room browser into a modal so it's easier to see. As far as I could tell the resources were also not considered, so I added that too.

Brief description of the ideal design, other than the nitty-gritty visuals which are best referenced in the screenshots and code:

Dialog:

  • Opens as a dialog titled "Rooms and resources"
  • Always show all available rooms and resources, and remove the "Available" switch
  • Use NcTextInput components wherever relevant like in the minimum capacity
  • Also use verbose text like "Minimum capacity" and "6 out of 8 rooms available" for better translations
  • Picking a room should not change the event straight away. Use a "Done" button in the dialog which actually applied the changes.

Room card:

  • The whole card is clickable and the +/− button at the end is gone
  • "Available" and "Reserved" labels can be removed, only "Unavailable" can be used.
  • Checkmark appears at the end once a room is picked, picking a different room swaps your selection rather than doing nothing
  • Capacity should show as a person icon with a number, instead of "12p"
room-browser.mp4

There may be some small papercuts and such later on, but this is the general idea :)

cc @odzhychko

🤖 AI (if applicable)

  • The content of this PR was partly or fully generated using AI

Rik Dekker and others added 8 commits May 5, 2026 22:44
Rik Dekker
feat(principal): map CalDAV room metadata properties
a66d94f 
Extend the principal model to extract room-seating-capacity,
room-type, room-features, room-building-address, and
room-building-room-number from CalDAV principal responses.

These properties are defined in the CalDAV standard and already
served by Nextcloud room backends, but not yet used by the Calendar
frontend. Mapping them into the principal model makes them available
for any future UI improvement (e.g. a browsable room finder) without
changing how principals are fetched. Backward compatible: properties
default to null when not provided by the backend.

Also derives roomBuildingName from the building address (first
segment) and constructs a roomAddress string suitable for the event
LOCATION field.

Signed-off-by: Rik Dekker <rik@rikdekker.nl>
Rik Dekker
feat(resources): browsable room finder with availability and dropdown…
3edf2ae 
… filters

Replace the search-based resource picker with a browsable room finder
that loads all room principals on mount and shows their availability
in real time via free/busy queries.

UI follows the design feedback from @jancborchardt on PR #7996:
right-column placement (Outlook-style), NcSelect dropdowns for
Building/Capacity/Floor/Features (no chips), text search, and a
"Show unavailable" toggle. Each room is rendered as a compact card
with availability status, capacity, and add/remove action.

Selecting a room auto-fills the event LOCATION property using the
roomAddress derived from CalDAV building-address and room-number
metadata.

Implementation reuses existing services and components:
- principalsStore.getRoomPrincipals for initial load
- checkResourceAvailability() from freeBusyService.js for availability
- @nextcloud/vue: NcSelect, NcTextField, NcCheckboxRadioSwitch,
  NcLoadingIcon, NcButton

Removes the now-redundant ResourceListItem.vue and
ResourceListSearch.vue. Adds formatFacility() helper and extends
getAllRoomTypes() in resourceProps.js with additional standard
room types (board room, conference room, rehearsal room, studio,
outdoor area).

Components are written in TypeScript with Composition API and
<script setup>, following the Sebastian Krupinski review feedback.

Depends on the principal.js room metadata mapping
(feat(principal): map CalDAV room metadata properties).

Signed-off-by: Rik Dekker <rik@rikdekker.nl>
Rik Dekker @claude @Rikdekker
style(resources): use Nextcloud CSS variables in room finder
bec668d 
Address review feedback from @GVodyanov: replace hardcoded pixel
spacing with --default-grid-baseline and drop hardcoded hex colour
fallbacks in favour of the bare --color-success-text /
--color-error-text variables. Normalise the group-header chevron
icon size to 20 to match the section MapMarker icon.

Border widths (1-3px hairline/accent borders) are intentionally
kept as raw px as Nextcloud has no grid variable for them.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: Rik Dekker <rik@rikdekker.nl>
@odzhychko
fixup! feat(resources): browsable room finder with availability and d…
f544b41 
…ropdown filters

Signed-off-by: Oleksandr Dzhychko <hey@oleks.dev>
@odzhychko
fixup! feat(resources): browsable room finder with availability and d…
4cc6173 
…ropdown filters

Signed-off-by: Oleksandr Dzhychko <hey@oleks.dev>
@odzhychko
fixup! feat(resources): browsable room finder with availability and d…
3ec5a62 
…ropdown filters

Signed-off-by: Oleksandr Dzhychko <hey@oleks.dev>
@odzhychko
Merge remote-tracking branch 'origin/main' into feature/visual-room-b…
590067c 
…rowser-v2

Signed-off-by: Oleksandr Dzhychko <hey@oleks.dev>
@nimishavijay
feat: design suggestions for room finder, moved everything to a modal…
94169b8 
…. Assisted-by: ClaudeCode:claude-opus5

Signed-off-by: nimishavijay <nimisha.k.vijay@gmail.com>
@nimishavijay
nimishavijay requested a review from odzhychko August 11, 2026 19:09
@SebastianKrupinski

SebastianKrupinski commented Aug 12, 2026

Copy link
Copy Markdown
Contributor

Thanks @nimishavijay

We'll take it from here

@odzhychko odzhychko mentioned this pull request Aug 12, 2026
Closed
1 task
@morfran morfran mentioned this pull request Aug 12, 2026
Closed
@jancborchardt jancborchardt added 3. to review Waiting for reviews design Related to design, interface, interaction design, UX, etc. enhancement New feature request labels Aug 12, 2026
Rikdekker added a commit to Rikdekker/calendar that referenced this pull request Aug 13, 2026
@Rikdekker
fix(resources): align the room filter controls
f63a234 
Labels sat inside the text fields but above the selects, so the filter
row lined up on neither the labels nor the field boxes, and the controls
had different heights. Give every filter the same shape: a label above
its control, in a grid that reflows by available width. Matches the
design in nextcloud#8718, which labels its filters the same way and leaves the
search field to its placeholder.

Also collapse the search input of a closed select. vue-select keeps it
next to the selected value, where it has nothing to type into and only
leaves a stray caret; it regains its width when the dropdown opens.

Assisted-by: ClaudeCode:claude-opus-5
Signed-off-by: Rikdekker <Rikdekker@users.noreply.github.com>
Rikdekker added a commit to Rikdekker/calendar that referenced this pull request Aug 13, 2026
@Rikdekker
fix(resources): lay the room filters out in rows of two
9fe285d 
The filter row lined up on neither the labels nor the field boxes: a
text field puts its label inside the border, a select puts it above.
Give every filter the same shape — a label above its control — and lay
them out two per row, which is what fits: a select keeps a min-width of
260px, so four side by side ran past the edge of the dialog. Follows the
filter layout of the design in nextcloud#8718.

Also join the meta line of a card into one string. It was assembled from
separate parts with a generated separator, which ended up in the
accessibility tree as a stray character for every card of a collapsed
building.

Assisted-by: ClaudeCode:claude-opus-5
Signed-off-by: Rikdekker <Rikdekker@users.noreply.github.com>
@jancborchardt jancborchardt moved this to 🏗️ At engineering in 🖍 Design team Aug 13, 2026
@odzhychko odzhychko mentioned this pull request Aug 13, 2026
Open
@odzhychko

odzhychko commented Aug 15, 2026

Copy link
Copy Markdown
Contributor

Took over and adapted in #8731.

@odzhychko odzhychko closed this Aug 15, 2026
@github-project-automation github-project-automation Bot moved this from 🏗️ At engineering to 🎉 Done in 🖍 Design team Aug 15, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@odzhychko odzhychko Awaiting requested review from odzhychko
@SebastianKrupinski SebastianKrupinski Awaiting requested review from SebastianKrupinski SebastianKrupinski is a code owner
@GVodyanov GVodyanov Awaiting requested review from GVodyanov GVodyanov is a code owner
@tcitworld tcitworld Awaiting requested review from tcitworld tcitworld is a code owner

Assignees

No one assigned

Labels

3. to review Waiting for reviews design Related to design, interface, interaction design, UX, etc. enhancement New feature request

Projects

🖍 Design team
Status: 🎉 Done

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@nimishavijay @SebastianKrupinski @odzhychko @jancborchardt