Skip to content

Hide some feed select buttons by default#3944

Open
Nutomic wants to merge 5 commits intomainfrom
hide-select-buttons
Open

Hide some feed select buttons by default#3944
Nutomic wants to merge 5 commits intomainfrom
hide-select-buttons

Conversation

@Nutomic
Copy link
Copy Markdown
Member

@Nutomic Nutomic commented Mar 6, 2026

These are rarely used and shouldnt take up space unnecessarily.

collapsed:

Screenshot_20260306_123814

expanded:

Screenshot_20260306_123750

mobile expanded:
Screenshot_20260306_123900

Same change also needs to be made in community.tsx.

Copy link
Copy Markdown
Member

@dessalines dessalines left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something weird going on with the diff, this really only needs to add that button for mobile, as well as {this.showMobileExpanded && filter.... around the ones you want to hide / show.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Create a variant or prop to the expand chip checkbox that uses these icons. Because your expand button should look similar to the other already existing ones.

Comment on lines +961 to +964
<button
className="col btn btn-ghost"
onclick={_ => handleHideSelectButtons(this)}
>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use the ExpandChipCheckbox

@Nutomic
Copy link
Copy Markdown
Member Author

Nutomic commented Mar 9, 2026

The expand should also be used on desktop. Reason is that these options ("show hidden posts" and "hide read posts") are rarely used, and shouldnt distract the user from more important actions like changing the sort type.

I dont want to use ExpandChipCheckbox because its already intuitive with the arrow icon, and doesnt need any text. And btn-ghost doesnt catch so much attention, it shouldnt have any background or border.

return (
<div className="g-3 mb-3">
<div className="row row-cols-auto align-items-center">
<div>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This extra wrapper div is probably not necessary.

@dessalines
Copy link
Copy Markdown
Member

dessalines commented Mar 9, 2026

I tested and this isn't working at all for some reason, neither on mobile nor desktop views.

The diff is still strange, it should only need to add {this.showExpanded && filter.... around the existing filters you want to hide.

Comment on lines +838 to +839
? "d-none"
: "row row-cols-auto mt-2"
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here's the culprit. Don't do this, just surround the specific filters you want to hide with {!this.state.selectButtonsHidden && <div

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay fixed

Copy link
Copy Markdown
Member

@dessalines dessalines Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Still had some issues, I got it: #3962

@Nutomic Nutomic mentioned this pull request Mar 10, 2026
6 tasks
@Nutomic
Copy link
Copy Markdown
Member Author

Nutomic commented Mar 13, 2026

Screenshot_20260313_123845

Updated with changes from #3962:

  • Arrow up icon to collapse view
  • Hide if logged out
  • Adjust margins
  • Keep separate row diff to avoid button repositioning

I tried to keep the expanded buttons in the same row but it looks strange:


Screenshot_20260313_123801

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants