feat(TopBar): add a search messages button by Jafetlch · Pull Request #18417 · nextcloud/spreed

Jafetlch · 2026-06-23T07:11:58Z

☑️ Resolves

The in-conversation message search is hard to find: the only way to reach it is through the right sidebar. This adds a search button to the conversation top bar that opens it directly.

While wiring the button I noticed showSidebar({ activeTab: 'search' }) landed on the participants tab, since 'search' is a content state and not a tab id. RightSidebar.handleUpdateActive now forwards 'search' to handleUpdateState('search').

The first version of this PR also bound Ctrl+F, removed after @Antreesy pointed out it is already taken by the conversation search in the left navigation.

AI (if applicable)

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

Developed with Claude Code (claude-opus-4-8), commit carries the Assisted-by trailer. Reviewed and verified on a local Nextcloud 34 + Talk stable34 instance.

🖌️ UI Checklist

🖼️ Screenshots / Screencasts

🏚️ Before	🏡 After
No search entry point in the chat view

🏁 Checklist

nickvergessen · 2026-06-25T08:35:31Z

Without looking at the code at all:

(search button visible in TopBar next to call button, sidebar opens to Search tab on click or Ctrl+F)

Please add screenshots to assist the review process

Also your commit is missing the DCO to confirm you did the changes and the license is okay:
https://github.com/nextcloud/server?tab=contributing-ov-file#sign-your-work

Antreesy · 2026-06-29T08:36:27Z

Besides, Ctrl+F is already taken by conversations search in left navigation: 6fce2eb
It's more a matter of giving it priority higher than the global Unified search

Jafetlch · 2026-07-02T04:54:31Z

Thanks for the feedback! I've updated the PR:

Removed the Ctrl+F shortcut — as @Antreesy pointed out it's already bound to the conversation search in the left navigation. The PR is now just the discoverable TopBar button.
Signed off the commit (DCO now passes).
Added screenshots to the description (@nickvergessen).

One thing worth a look during review: the button needed a small change in RightSidebar as well — handleUpdateActive now routes the 'search' value to handleUpdateState('search'). Without it, showSidebar({ activeTab: 'search' }) fell back to the participants tab instead of opening the message search. Verified end-to-end on a local Nextcloud 34 + Talk stable34 build.

Happy to adjust the button placement or the approach if you'd prefer a different one.

Add a magnify icon button to the TopBar that opens the message search directly from the chat view. The button is only shown when the user is authenticated, not in a call, and not in sidebar mode. The message search (SearchMessagesTab) already exists but is only reachable through the RightSidebar, which makes it hard to discover. The button reuses the existing sidebarStore.showSidebar({ activeTab }) flow; RightSidebar.handleUpdateActive now routes the 'search' value to handleUpdateState('search') so the sidebar opens straight on the search view instead of falling back to the participants tab. Assisted-by: ClaudeCode:claude-opus-4-8 Signed-off-by: Jafet Lopez <jafetlopezch@gmail.com>

github-actions · 2026-07-08T04:38:51Z

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.)

Antreesy · 2026-07-09T09:14:35Z

Sorry, the PR got lost behind all the other work.
Code-wise it's good now, let us check with @nimishavijay for design input, whether we want to move the button completely from sidebar, or keep it in both places (I'd prefer the first option, but it's a change of user behvaiour)

nimishavijay · 2026-07-10T09:35:24Z

Nice! This is definitely an improvement for searching for messages and I'd prefer we remove it from the right sidebar too.

My only concern is that there's now 3 searches visible almost all the time on the screen. Considering we had discussed the possibility of combining it with the left search somehow, I'm wondering if directly implementing that makes more sense? What do you think @nickvergessen @Antreesy

Antreesy · 2026-07-10T09:38:05Z

of combining it with the left search somehow

My take would be still to have 'left search' as global (all messages across instance) and 'right search' as conversation-scoped

Antreesy

Please see review comments. I tried with these changes and pretty much satisfied with the result =)

Antreesy · 2026-07-14T15:41:25Z

+				:title="t('spreed', 'Search messages')"
+				:aria-label="t('spreed', 'Search messages')"
+				variant="tertiary"
+				@click="openSidebar('search')">


To ensure smooth sidebar animation, when open, add this:

diff --git a/src/components/UIShared/SearchBox.vue b/src/components/UIShared/SearchBox.vue --- a/src/components/UIShared/SearchBox.vue (revision 061dcb50567122589c59b0d56d3d3d23437d0ffa) +++ b/src/components/UIShared/SearchBox.vue (date 1784043601178) @@ -127,10 +127,11 @@ }, /** - * Focuses the input + * Focuses the input. `preventScroll` is on to avoid scrolling + * hidden containers (e.g. sidebar) into view and aborting animations. */ focus() { - this.$refs.searchConversations.focus() + this.$refs.searchConversations.focus({ preventScroll: true }) }, getTrailingButton() {

Also tab id is 'search-messages', this should be used

Antreesy · 2026-07-14T16:14:29Z

+			if (active === 'search') {
+				// 'search' is not a real tab: route it to the search content state
+				this.handleUpdateState('search')
+				return
+			}


To support all cases:

Suggested change

if (active === 'search') {

// 'search' is not a real tab: route it to the search content state

this.handleUpdateState('search')

return

}

switch (active) {

case 'search-messages':

this.contentState = 'search'

break

case 'threads':

this.contentState = 'threads'

break

default:

this.contentState = 'default'

}

Antreesy · 2026-07-14T16:16:33Z

 			<CalendarEventsDialog v-if="showCalendarEvents" :token="token" />

+			<!-- Search messages button -->
+			<NcButton


As discussed above, same button should be removed from RightSidebarContent.vue
Make sure there is no more space reserved for it in these components CSS (otherwise name will be cropped)

Jafetlch force-pushed the feat/search-button-topbar branch from 05a95c1 to a22d52d Compare July 2, 2026 04:50

Jafetlch force-pushed the feat/search-button-topbar branch from a22d52d to 10f284a Compare July 2, 2026 15:58

Jafetlch changed the title ~~feat(TopBar): add search messages button and Ctrl+F / Cmd+F shortcut~~ feat(TopBar): add a search messages button Jul 2, 2026

github-actions Bot added the feedback-requested label Jul 8, 2026

Antreesy requested review from Antreesy and nimishavijay July 9, 2026 09:14

Antreesy added enhancement feature: frontend 🖌️ "Web UI" client feature: search 🔎 labels Jul 9, 2026

Antreesy added this to the ⛅ Next Major (35) milestone Jul 9, 2026

Antreesy reviewed Jul 14, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(TopBar): add a search messages button#18417

feat(TopBar): add a search messages button#18417
Jafetlch wants to merge 1 commit into
nextcloud:mainfrom
Jafetlch:feat/search-button-topbar

Jafetlch commented Jun 23, 2026 •

edited

Loading

Uh oh!

nickvergessen commented Jun 25, 2026

Uh oh!

Antreesy commented Jun 29, 2026

Uh oh!

Jafetlch commented Jul 2, 2026

Uh oh!

github-actions Bot commented Jul 8, 2026

Uh oh!

Antreesy commented Jul 9, 2026

Uh oh!

nimishavijay commented Jul 10, 2026

Uh oh!

Antreesy commented Jul 10, 2026

Uh oh!

Antreesy left a comment

Uh oh!

Antreesy Jul 14, 2026

Uh oh!

Antreesy Jul 14, 2026

Uh oh!

Antreesy Jul 14, 2026

Uh oh!

Antreesy Jul 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

-			if (active === 'search') {
-				// 'search' is not a real tab: route it to the search content state
-				this.handleUpdateState('search')
-				return
-			}
+			switch (active) {
+				case 'search-messages':
+					this.contentState = 'search'
+					break
+				case 'threads':
+					this.contentState = 'threads'
+					break
+				default:
+					this.contentState = 'default'
+			}

Uh oh!

Conversation

Jafetlch commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

☑️ Resolves

AI (if applicable)

🖌️ UI Checklist

🖼️ Screenshots / Screencasts

🏁 Checklist

Uh oh!

nickvergessen commented Jun 25, 2026

Uh oh!

Antreesy commented Jun 29, 2026

Uh oh!

Jafetlch commented Jul 2, 2026

Uh oh!

github-actions Bot commented Jul 8, 2026

Uh oh!

Antreesy commented Jul 9, 2026

Uh oh!

nimishavijay commented Jul 10, 2026

Uh oh!

Antreesy commented Jul 10, 2026

Uh oh!

Antreesy left a comment

Choose a reason for hiding this comment

Uh oh!

Antreesy Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

Antreesy Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

Antreesy Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

Antreesy Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Jafetlch commented Jun 23, 2026 •

edited

Loading