Frontend: Proposal sorting and filtering controls

[Oba-One]

Summary

Implement proposal sorting and filtering controls so community members and explorers can quickly view proposals by conviction, creation time, requested amount, and author in a responsive, accessible UI.

Description

Build and integrate a filter + sort UI for the proposals list in the Gardens client, so users can efficiently explore proposals from multiple angles without losing context or scrolling endlessly.

The UI should:

• Provide filter controls for:
  • Conviction (e.g., by conviction progress / support range)
  • Creation time (date range, plus quick options like “Last 7 days”, “Last 30 days”)
  • Requested amount (numeric range)
• Provide sort controls for:
  • Creation time (newest / oldest)
  • Conviction progress
  • Requested amount
  • Author (alphabetical, A→Z / Z→A if feasible)
• Respect desktop vs mobile affordances:
  • Desktop: filters apply immediately on change.
  • Mobile: filters are applied through an “Apply (N)” pattern so users can change multiple controls before updating the list.
• Integrate with the existing proposals view so users don’t need to leave the page to refine what they’re seeing.

Accessibility and performance are first-class: filter/sort controls must be keyboard accessible, screen‑reader friendly, dark‑mode compatible, and capable of handling long proposal lists without jank.

Acceptance criteria

• Creation time (newest / oldest)
• Conviction progress
• Requested amount
• Author (alphabetical, A→Z / Z→A if feasible)
• Respect desktop vs mobile affordances:
  • Desktop: filters apply immediately on change.
  • Mobile: filters are applied through an “Apply (N)” pattern so users can change multiple controls before updating the list.
• Integrate with the existing proposals view so users don’t need to leave the page to refine what they’re seeing.

Accessibility and performance are first-class: filter/sort controls must be keyboard accessible, screen‑reader friendly, dark‑mode compatible, and capable of handling long proposal lists without jank.

Acceptance criteria

• Filters

  • Users can filter proposals by:
    • Conviction (via range or stepped thresholds)
    • Creation time (date range picker + quick presets)
    • Requested amount (min/max range)
  • On desktop, changing any filter updates the list immediately.
  • On mobile, filters open in a sheet / modal; changes only apply when the user taps an “Apply (N)” or equivalent button.
  • Filter state is clearly visible and can be reset with a single action (e.g., “Clear filters”).

• Sorting

  • Users can sort proposals by:
    • Creation time (newest → oldest, oldest → newest)
    • Conviction progress
    • Requested amount
    • Author (alphabetical)
  • Sort selection is clearly indicated and persists while navigating within the proposals view.
  • Sorting and filtering work together (e.g., sort applies to the filtered set).

• UX & accessibility

  • UI follows the Gardens design system and supports dark mode.
  • All filter/sort controls:
    • Are reachable via keyboard (tab order is logical).
    • Use appropriate ARIA roles and labels.
    • Are readable in both light and dark themes.
  • The proposal list remains performant with 50+ proposals (no noticeable scrolling lag).

• Responsiveness

  • Layout behaves correctly on:
    • Desktop (standard laptop viewport)
    • Mobile (narrow viewport)
  • Mobile layout avoids cramped controls and preserves tappable hit areas.

• Quality

  • No new console errors or React warnings related to the filter/sort components.
  • Visual behavior and states match the linked Figma prototypes.

Implementation details

• Use existing shared components (buttons, dropdowns, inputs, date pickers) from the Gardens design system where possible.
• Implement filters and sorting using existing proposals data hooks / subgraph queries:
  • Prefer passing filter/sort arguments into existing data hooks rather than client‑side re‑sorting large arrays, if supported.
  • If server-side filtering/sorting isn’t available for a field, keep logic encapsulated and memoized on the client.
• Desktop:
  • Inline filter bar or panel near the top of the proposals list.
• Mobile:
  • “Filter & sort” entry point that opens a sheet / modal with all controls and an “Apply (N)” + “Reset” cluster at the bottom.
• Consider list virtualization for the proposals view if not already implemented (e.g., using a virtualization library or an existing Gardens utility) to keep performance smooth on long lists.

References or assets

• Story: As a community member or explorer I want to sort and filter proposals so I can easily view proposals from different aspects such as conviction, creation time, amount, etc. #617 – “As a community member or explorer I want to sort and filter proposals…”
• Figma: Gardens V2 UI – proposals list view & filter/sort patterns
• Design system tokens / components (buttons, inputs, dropdowns, date pickers)
• Any existing proposal list hooks / subgraph queries used in the Gardens client