feat(desktop): add sorting to resource usage popover

[Kitenite]

Summary

• Adds a sort dropdown to the resource usage popover header (next to the refresh button) with four options: Memory (default, high→low), CPU (high→low), Name (A→Z), and Sidebar order (matches left sidebar visual ordering)
• Sorting applies to both project groups and individual workspaces within each group
• Uses lightweight useLiveQuery calls on sidebar collections for the sidebar order option

Test plan

• Open the resource usage popover via the CPU chip button in the top bar
• Verify the sort dropdown appears next to the refresh button showing "Memory" by default
• Switch between Memory, CPU, Name, and Sidebar order — confirm workspaces reorder correctly
• Verify the sort dropdown menu closes properly and doesn't interfere with the popover
• Confirm the refresh button still works as expected

---

Summary by cubic

Add a sort dropdown to the resource usage popover so you can sort projects and workspaces by Memory (default), CPU, Name, or Sidebar order. This makes it easier to spot heavy usage and mirror the left sidebar without affecting the refresh button.

• New Features
  • Sort dropdown in the popover header (Memory high→low by default; also CPU, Name A→Z, Sidebar order).
  • Sorting applies to both project groups and their workspaces.
  • "Sidebar order" mirrors the left sidebar using useLiveQuery from @tanstack/react-db over v2SidebarProjects and v2WorkspaceLocalState.

^{Written for commit a24c62b. Summary will update on new commits.}

Summary by CodeRabbit

• New Features
  • Added workspace sorting to the Resource Usage dashboard. Users can now sort resource consumption data by memory usage, CPU usage, alphabetical name, or sidebar order through a new dropdown menu in the header. The existing refresh functionality remains intact and accessible.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 061f4652-3917-473a-a567-0f769614c8e3

📥 Commits

Reviewing files that changed from the base of the PR and between 3194568 and a24c62b.

📒 Files selected for processing (3)

• apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/TopBar/components/ResourceConsumption/ResourceConsumption.tsx
• apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/TopBar/components/ResourceConsumption/components/WorkspaceResourceSection/WorkspaceResourceSection.tsx
• apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/TopBar/components/ResourceConsumption/types.ts

---

📝 Walkthrough

Walkthrough

These changes implement a workspace and project sorting feature in the Resource Consumption component. A sort dropdown control was added to the header, offering options to sort by memory, CPU, name, or sidebar order. New sorting functions were introduced to reorder both workspaces and project groups based on the selected option, utilizing live sidebar ordering data.

Changes

Cohort / File(s)	Summary
Sorting Logic Implementation apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/TopBar/components/ResourceConsumption/components/WorkspaceResourceSection/WorkspaceResourceSection.tsx	Expanded props to accept sortOption, sidebarProjectOrder, and sidebarWorkspaceOrder. Implemented sortWorkspaces() and sortProjectGroups() functions to reorder workspaces and project groups based on memory, CPU, name, or sidebar criteria. Updated component to apply sorting before rendering.
Sort Control UI apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/TopBar/components/ResourceConsumption/ResourceConsumption.tsx	Added sortOption state and dropdown menu (DropdownMenuRadioGroup) in header. Integrated useLiveQuery to fetch sidebar order data for projects and workspaces. Replaced header layout with combined sort dropdown and refresh button. Passed sorting configuration props to WorkspaceResourceSection.
Type Definition apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/TopBar/components/ResourceConsumption/types.ts	Added new exported type SortOption with allowed values: memory, cpu, name, or sidebar.

Sequence Diagram

sequenceDiagram
    actor User
    participant RC as ResourceConsumption
    participant WRS as WorkspaceResourceSection
    participant SortFns as Sorting Functions

    User->>RC: Select sort option from dropdown
    RC->>RC: Update sortOption state
    RC->>RC: Fetch sidebar order via useLiveQuery
    RC->>WRS: Pass sortOption + sidebar order props
    WRS->>SortFns: Call sortProjectGroups()
    SortFns->>SortFns: Reorder project groups by selected criteria
    WRS->>SortFns: Call sortWorkspaces() per project
    SortFns->>SortFns: Reorder workspaces by selected criteria
    WRS->>WRS: Render sorted workspaces and projects
    WRS-->>User: Display sorted resource usage

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 Hop, hop, organizing with care!
Workspaces sorted through the air—
By memory, CPU, name or sidebar stack,
Order restored, no chaos to track! ✨

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch add-resource-usage-sorting

---

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 and usage tips.}

[cubic-dev-ai]

No issues found across 3 files

[github-actions]

🧹 Preview Cleanup Complete

The following preview resources have been cleaned up:

• ✅ Neon database branch
• ⚠️ Electric Fly.io app

Thank you for your contribution! 🎉