feat: add sort toggle for RHS items (Created vs Updated)

[rafaumeu]

Summary

Adds a sort dropdown to the GitHub plugin RHS sidebar, allowing users to sort items by "Created" (default, existing behavior) or "Updated" date.

Resolves #242

Changes

• Added a <select> dropdown in the RHS header with two options: "Sort: Created" and "Sort: Updated"
• Default is "Created" which preserves existing behavior
• Items are sorted client-side by created_at or updated_at field (descending)

Release Notes

Change Impact: 🟡 Medium

Reasoning: This is a localized UI change in the sidebar, but it alters the rendering and ordering of user-visible items and introduces new client-side sorting behavior. The blast radius is limited, though it affects a core browsing flow and has some regression potential around sorting and dropdown behavior.

Regression Risk: Moderate — existing default behavior is preserved, but the new sort path, theme styling, and dropdown interaction add untested UI states that could affect item ordering or display in the RHS panel.

QA Recommendation: Manual QA recommended, especially to verify default “Created” sorting, “Updated” sorting, dark/light theme styling, and dropdown behavior in the sidebar. Skipping manual QA is not advised.

[mattermost-build]

Hello @rafaumeu,

Thanks for your pull request! A Core Committer will review your pull request soon. For code contributions, you can learn more about the review process here.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: ac5cab9f-0315-4539-a1ee-e704f5302949

📥 Commits

Reviewing files that changed from the base of the PR and between 394e874 and 5d55c5d.

📒 Files selected for processing (1)

• webapp/src/components/sidebar_right/sidebar_right.jsx

🚧 Files skipped from review as they are similar to previous changes (1)

• webapp/src/components/sidebar_right/sidebar_right.jsx

---

📝 Walkthrough

Walkthrough

Adds a client-side sort dropdown to SidebarRight so GitHub items can be shown by created or updated date. The component now tracks sort state, sorts items before rendering, and uses theme-based styles for the header and dropdown container.

Changes

Sidebar sort feature

Layer / File(s)	Summary
Sort state and imports webapp/src/components/sidebar_right/sidebar_right.jsx	Imports react-select and theme helpers, and adds sortBy state plus handleSortChange.
Sorting logic and dropdown rendering webapp/src/components/sidebar_right/sidebar_right.jsx	Builds sortedItems, dropdown options, and the selected option, then renders ReactSelect and passes sorted items to GithubItems.
Theme-based styling webapp/src/components/sidebar_right/sidebar_right.jsx	Replaces static styling with a theme-derived style function and adds dropdown container layout styles.

Estimated code review effort: 2 (Simple) | ~10 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant ReactSelect
  participant SidebarRight
  participant GithubItems
  User->>ReactSelect: select sort option
  ReactSelect->>SidebarRight: handleSortChange(selectedOption)
  SidebarRight->>SidebarRight: update state.sortBy
  SidebarRight->>SidebarRight: compute sortedItems
  SidebarRight->>GithubItems: render(sortedItems)

Loading

Poem

A bunny clicked a dropdown bright,
To sort the sidebar left and right.
By created date or updated too,
The items hopped in a better queue. 🐰

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the new sort toggle for RHS items and mentions both Created and Updated sorting.
Linked Issues check	✅ Passed	The PR adds the requested RHS sorting option and supports sorting by most recently updated as described in issue #242.
Out of Scope Changes check	✅ Passed	The changes are limited to the RHS sorting UI, styling, and accessibility details needed to support the requested feature.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[avasconcelos114]

Hello and thank you for the contribution! 🎉 :)

Before diving into reviewing the implementation I tested a build with your PR and noticed that the style of the select will need to be adjusted to match what the issue had it

Refer to the comment in #242 (comment) to view the Figma prototype and let me know if you have any questions, thanks again!

[mattermost-build]

This PR has been automatically labelled "stale" because it hasn't had recent activity.
A core team member will check in on the status of the PR to help with questions.
Thank you for your contribution!

[rafaumeu]

Hi @avasconcelos114, I've addressed your review feedback in commit 394e874:

1. Replaced native <select> with ReactSelect — now uses the plugin's getStyleForReactSelect(theme) which automatically adapts to Mattermost's dark/light themes, matching the Figma prototype's visual style.
2. Theme-aware styles — converted the hardcoded const style to makeStyleFromTheme() so all inline styles respond to theme changes. The previous rgba(0, 0, 0, 0.2) border broke in dark theme.
3. Accessibility — added aria-label='Sort items' to the dropdown.

The dropdown is isSearchable={false} (only 2 options) with menuPortalTarget=document.body to avoid clipping inside the RHS panel. Let me know if any further adjustments are needed!

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@webapp/src/components/sidebar_right/sidebar_right.jsx`:
- Around line 223-235: The section header layout is missing a flex row, so the
new sort dropdown will stack under the title instead of sitting beside it.
Update the style returned by makeStyleFromTheme for sectionHeader in
sidebar_right.jsx to use a horizontal flex layout (while keeping the existing
padding), so the title link and sortDropdownContainer render on the same row.
- Around line 161-174: The unread-items sort logic in sidebar_right.jsx is using
created_at as the default for RHSStates.UNREADS, but those notification threads
only have updated_at, so the “Sort: Created” selection ends up comparing
undefined dates. Update the sorting branch around the sortedItems and
sortOptions/selectedSortOption logic to fall back to updated_at for unread
items, or hide/disable the Created option in this view so the selected label
matches the actual sort behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 55e1de93-0482-46c7-babd-2c1e4f0c3c26

📥 Commits

Reviewing files that changed from the base of the PR and between 5cd47fb and 394e874.

📒 Files selected for processing (1)

• webapp/src/components/sidebar_right/sidebar_right.jsx

[rafaumeu]

Addressed both CodeRabbit issues in 5d55c5d:

1. sectionHeader flex layout (Major): Added display: flex, alignItems: center, justifyContent: space-between, and flexWrap: wrap to sectionHeader so the sort dropdown now renders beside the title.

2. UNREADS sorting fallback (Minor): Notification threads don't expose created_at, so sorting by 'Created' compared undefined dates. Added a fallback to updated_at when created_at is missing.