Support filtering Beatmap Discussion by multiple users by notbakaneko · Pull Request #12939 · ppy/osu-web

notbakaneko · 2026-04-23T13:02:37Z

Filter by multiple users, include/exclude replies, hide/include replies from other users within the discussion.
Also moves the filters down to be next to the discussions closer with all the other sorting and filter options, and pins them to the top for easier access.

with a user selected:

I did think about putting all the usernames selected as the main dropdown text but it just gets long and truncated so I went with Multiple users selected instead...

closes #11666

notbakaneko · 2026-04-23T13:06:42Z

  @computed
  private get visibleReplies() {
    if (this.props.discussionsState == null
-      || this.props.discussionsState.selectedUserIds.size === 0


there's an existing issue if the url param contains a user id that isn't in the discussions, I wonder if state initialization should sanitize and normalize the urls first 🤔

nanaya · 2026-04-27T07:13:10Z

The floating bar seems like something people will be annoyed with as it takes up vertical space...? (and even worse on mobile)

notbakaneko · 2026-04-27T08:16:43Z

I did have an idea of adding the filters into the floating toolbar as a popup but that would have been a next step.

Also realized the filter font sizes not shrinking down when the other tabbar sticky does looks odd...

nanaya · 2026-04-27T09:40:32Z

maybe a toggle button on the page tab bar?

notbakaneko · 2026-04-28T15:05:44Z

how about a collapsible bar? 🤔

nanaya · 2026-05-11T06:47:09Z

that looks weird and the expanded view takes even more space ಠ_ಠ

it being still collapsed when scrolled up seems a bit pointless as well (and it should not be floating by default either?)

notbakaneko · 2026-05-12T08:13:27Z

I don't think stacking even more optionally pinable elements is the solution and looks even more weird, and having a toggle button in the tab bar that can also scroll sideways doesn't make sense either (and does nothing on the history tab).

nanaya · 2026-05-12T08:20:44Z

how about just not make it floatable/pinnable for now...?

(also the new one cuts off the user list dropdown when it's too long instead of extending the page, although it really should just have its height limited and show scrollbar instead)

notbakaneko · 2026-05-13T07:28:15Z

Removing the pinning for now so the feature can go out while I try something else out, but that has some refactoring involved and may have additional changes that conflict

nanaya · 2026-05-13T08:30:40Z

should be removed/renamed?

nanaya · 2026-05-21T13:03:08Z

+      text: (
+        <>
+          <div className='osu-switch-v2'>
+            <input


input can't be inside an a

I'm just removing the link instead of adding more workarounds for this, since it also doesn't seem to make sense to open in new tab with multi selection options.

but button can't have input either ಠ_ಠ (and it just doesn't make sense if you think about it - like, are you checking the box or pressing the button)

even worse, div can't be inside button.

maybe add --checked, --checkbox modifiers to the class and use divs instead? It's not like the checkbox itself have much meaning in term of actual input.

nanaya · 2026-05-27T07:16:39Z

 interface Props {
  expand: boolean;
-  parentClass: string;
+  parentClass?: string;


where's this needed?

nanaya · 2026-05-27T07:18:08Z

+          <span className={`${bn}__checkmark`}>
+            {selected && <span className='fas fa-check' />}
+          </span>


technically can be done using the fa-fw class instead (className={`fa-fw ${selected ? ... }`}) although that'll ignore the decoration colour thing

but then again the --colour/--decoration-colour thing don't seem to be used anywhere at the moment...

nanaya · 2026-05-27T07:28:12Z

+        display: grid;
+        grid-template-columns: minmax(0, 500px) repeat(var(--num-columns), auto);


what does this do over just flex/row 🤔 (which would remove the need to specify the num-columns)

nanaya · 2026-05-27T07:34:09Z

    'user_filter' => [
        'everyone' => 'Everyone',
        'label' => 'Filter by user',
+        'multiple' => 'Multiple users selected',


I wonder if showing the selected count would be useful

nanaya · 2026-05-27T07:37:51Z

@@ -70,7 +70,9 @@ export default class DiscussionsState {
  @observable repliesIncludeSelectedUsers = false;


already mentioned somewhere else but this addition should've also updated the user listing to include replying users

nanaya · 2026-05-27T07:41:13Z

-    .@{top}--beatmap-discussions & {
-      margin-right: 10px;
+    &--beatmap-discussions {
+      margin-right: 0;


or make it a variable and replace it in the block's modifier?

nanaya · 2026-05-27T07:55:13Z

+      if (reply.system) yield reply;
+      if (!this.props.discussionsState.showOtherReplies && !this.props.discussionsState.selectedUserIds.has(reply.user_id)) continue;
+      yield reply;


reply.system may end up being yielded twice

(also the only usage of this generator does ...thisGenerator() anyway so might as well return plain array instead?)

nanaya · 2026-05-27T07:58:16Z

+        </button>
+        <button
+          className={`${bn}__item ${bn}__item--link`}
+          onClick={this.toggleShowOtherReplies}


probably fine as is for now but it's kind of weird the checkbox options don't persist on reload/modify the url like the other filters in the same section

nanaya · 2026-05-27T08:00:06Z

    return (
      <SelectOptions
-        href={this.props.discussionsState.url}
+        blackout={false} // css sticky elements render on a different stacking context and always get covered by the blackout.


the comment may get confusing without it being sticky

add more filtering options

…how?

fix at least 3 digits in counter box without resizing

flip positions of tabbar and toolbar (because of count contexts and stuff) also revert position of collapse/expand all since toolbar is not pinnable right now

… at the moment

don't assume system post doesn't match other conditions

nanaya · 2026-05-29T13:21:22Z

 export default function IconExpand({ expand = false, parentClass }: Props) {
  return (
-    <span className={`icon-stack ${parentClass}`}>
+    <span className={`icon-stack ${parentClass ?? ''}`}>


not nullable atm 🤔

nanaya · 2026-05-29T13:21:36Z

      text: <span className='u-group-colour u-ellipsis-overflow' style={this.styleForUser(user)}>{user.username}</span>,
    };
  };
-


the spacing should probably stay

nanaya · 2026-05-29T13:24:30Z

+    return this.discussionsState.beatmapset.user_id;
  }

  // TODO: add actual multi user selection.


the comment can be removed?

nanaya · 2026-05-29T13:38:47Z

+    @media @desktop {
+      display: contents;
+    }


seems fine without?

nanaya · 2026-05-29T13:40:57Z

+    gap: 5px;
+    flex: none;
+
+    &--link {


all of them have this modifier? might as well make this the default and remove the modifier?

(also they are buttons...?)

nanaya · 2026-05-29T13:42:54Z

+  render() {
+    return (
+      <>
+        <div className='beatmapset-discussions-toolbar'>


some others use bn variable, some others like this one use the name directly...

nanaya · 2026-05-29T13:43:29Z

+
+  render() {
+    return (
+      <>


this wrapper doesn't do anything

nanaya · 2026-05-29T13:45:57Z

+    if (!canModeratePosts()) return null;
+
+    return (
+      <button


extracting this button to its own component/function may be nice?

notbakaneko self-assigned this Apr 23, 2026

notbakaneko added the area:beatmap-discussions label Apr 23, 2026

notbakaneko commented Apr 23, 2026

View reviewed changes

notbakaneko force-pushed the feature/discussions-replies-user-filter-multiselect-rebased branch from 90631bb to 4491f7f Compare April 28, 2026 14:56

nanaya requested changes May 21, 2026

View reviewed changes

notbakaneko force-pushed the feature/discussions-replies-user-filter-multiselect-rebased branch 5 times, most recently from 1ad3908 to d1b7209 Compare May 22, 2026 14:58

nanaya requested changes May 27, 2026

View reviewed changes

notbakaneko added 11 commits May 29, 2026 17:05

move filters to sticky element on top of discussions;

27f7f10

add more filtering options

align to whole numbers to fix gaps

37d4e20

realign with em units

70b5edf

handle multi selection of users

acd4598

discussions state should always be using BeatmapsetDiscussionJsonForS…

e7f038d

…how?

include hidden deleted replies in the hidden count

01511f1

more compact box (margin already on the line)

0a0e093

fix at least 3 digits in counter box without resizing

add checkboxes to user filter options

3fc8a5b

save more state

e1dc142

still need the class on other pages;

f103ab0

remove toolbar sticking/collapsing for now

1bca65d

flip positions of tabbar and toolbar (because of count contexts and stuff) also revert position of collapse/expand all since toolbar is not pinnable right now

notbakaneko added 9 commits May 29, 2026 17:05

maybe not needed anymore?

e38e75f

use default height limit

40802dd

exclude deleted posts

71901f8

render checkmarks without using input elements

695b8e5

show user count

3c10045

include users

6b3a884

move to css vars

7358fbc

fix overflow and resizing without grid

3a5fc7c

revert unused change, leave blackout on for now since it's not sticky…

bca7a3e

… at the moment

notbakaneko force-pushed the feature/discussions-replies-user-filter-multiselect-rebased branch from d1b7209 to bca7a3e Compare May 29, 2026 08:06

results get turned into an array, anyway;

233483e

don't assume system post doesn't match other conditions

nanaya requested changes May 29, 2026

View reviewed changes

		display: grid;
		grid-template-columns: minmax(0, 500px) repeat(var(--num-columns), auto);

		@@ -70,7 +70,9 @@ export default class DiscussionsState {
		@observable repliesIncludeSelectedUsers = false;

Conversation

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

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nanaya commented Apr 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

notbakaneko commented Apr 27, 2026

Uh oh!

nanaya commented Apr 27, 2026

Uh oh!

notbakaneko commented Apr 28, 2026

Uh oh!

nanaya commented May 11, 2026

Uh oh!

notbakaneko commented May 12, 2026

Uh oh!

nanaya commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

notbakaneko commented May 13, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

notbakaneko commented Apr 23, 2026 •

edited

Loading

nanaya commented Apr 27, 2026 •

edited

Loading

nanaya commented May 12, 2026 •

edited

Loading