chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

[UX] Tier 1: Tree Library - Full View System (Grid/List/Table) #34

New Issue
Closed
opened 2026-02-07 18:52:42 +00:00 by chihlasm · 1 comment
chihlasm commented 2026-02-07 18:52:42 +00:00 (Migrated from github.com)
Copy Link

Overview

Implement comprehensive view controls and sorting options for the Tree Library to improve findability and user workflow efficiency.

Context

Engineers use favorite/frequent trees repeatedly and need efficient ways to browse, scan, and discover trees. Current implementation has:

  • Fixed grid view only
  • Hardcoded sorting (usage_count DESC, updated_at DESC)
  • No user control over display preferences

Features to Implement

1. Multiple View Modes

  • Grid view (current): Card-based with previews, best for discovery
  • List view: Compact rows with more metadata, faster scanning
  • Table view: Sortable columns, most flexible for power users

2. Sorting Controls

Add dropdown with options:

  • Most used (current default)
  • Recently updated
  • Recently created
  • Alphabetical (A-Z)
  • Alphabetical (Z-A)
  • Version number

3. View Persistence

  • Save view preference to userPreferencesStore
  • Persist to localStorage
  • Remember sort order per view mode

4. Responsive Behavior

  • Mobile: List/grid only (table too complex)
  • Tablet: All three views
  • Desktop: All three views with optimal sizing

Technical Approach

Frontend Changes

  • Update TreeLibraryPage.tsx with view toggle toolbar
  • Create TreeListView.tsx component (dense rows)
  • Create TreeTableView.tsx component (sortable columns)
  • Extend userPreferencesStore with treeLibraryView and treeLibrarySortBy
  • Update API calls to accept sort_by parameter

Backend Changes

  • Update GET /api/v1/trees endpoint to accept sort_by query param
  • Implement sorting logic for all sort options
  • Maintain backward compatibility (default to usage_count)

Acceptance Criteria

  • Users can toggle between grid/list/table views
  • Sort dropdown changes order dynamically
  • View preference persists across sessions
  • All views responsive on mobile/tablet/desktop
  • Table view columns are sortable by clicking headers
  • Performance: View switching <100ms, no layout shift

Design Reference

Similar to: Notion database views, Airtable view switcher, Linear issues list

Estimated Effort

3-4 days

Priority

High - Significant productivity improvement for daily usage

## Overview Implement comprehensive view controls and sorting options for the Tree Library to improve findability and user workflow efficiency. ## Context Engineers use favorite/frequent trees repeatedly and need efficient ways to browse, scan, and discover trees. Current implementation has: - Fixed grid view only - Hardcoded sorting (usage_count DESC, updated_at DESC) - No user control over display preferences ## Features to Implement ### 1. Multiple View Modes - **Grid view** (current): Card-based with previews, best for discovery - **List view**: Compact rows with more metadata, faster scanning - **Table view**: Sortable columns, most flexible for power users ### 2. Sorting Controls Add dropdown with options: - Most used (current default) - Recently updated - Recently created - Alphabetical (A-Z) - Alphabetical (Z-A) - Version number ### 3. View Persistence - Save view preference to `userPreferencesStore` - Persist to localStorage - Remember sort order per view mode ### 4. Responsive Behavior - Mobile: List/grid only (table too complex) - Tablet: All three views - Desktop: All three views with optimal sizing ## Technical Approach ### Frontend Changes - Update `TreeLibraryPage.tsx` with view toggle toolbar - Create `TreeListView.tsx` component (dense rows) - Create `TreeTableView.tsx` component (sortable columns) - Extend `userPreferencesStore` with `treeLibraryView` and `treeLibrarySortBy` - Update API calls to accept `sort_by` parameter ### Backend Changes - Update `GET /api/v1/trees` endpoint to accept `sort_by` query param - Implement sorting logic for all sort options - Maintain backward compatibility (default to usage_count) ## Acceptance Criteria - [ ] Users can toggle between grid/list/table views - [ ] Sort dropdown changes order dynamically - [ ] View preference persists across sessions - [ ] All views responsive on mobile/tablet/desktop - [ ] Table view columns are sortable by clicking headers - [ ] Performance: View switching <100ms, no layout shift ## Design Reference Similar to: Notion database views, Airtable view switcher, Linear issues list ## Estimated Effort 3-4 days ## Priority **High** - Significant productivity improvement for daily usage
chihlasm commented 2026-02-08 02:28:39 +00:00 (Migrated from github.com)
Copy Link

Completed in commit 89e09ed. All features delivered: Grid/List/Table views, 6 sorting options, localStorage persistence, responsive design. Backend: 104/104 tests passing.

Completed in commit 89e09ed. All features delivered: Grid/List/Table views, 6 sorting options, localStorage persistence, responsive design. Backend: 104/104 tests passing.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
10x-analysis
From 10x product analysis
 backend
FastAPI/Python work
 bug
Something isn't working
 collaboration
Team sharing, escalation, notifications
 database
PostgreSQL/schema changes
 documentation
Documentation updates
 duplicate
This issue or pull request already exists
 enhancement
Improvement to existing feature
 feature
New functionality
 frontend
React work
 good first issue
Good for newcomers
 help wanted
Extra attention is needed
 integration
PSA, external service integrations
 intelligence
Analytics, AI, data-driven features
 invalid
This doesn't seem right
 priority: high
Do this soon
 priority: low
Nice to have
 priority: medium
Important but not urgent
 question
Further information is requested
 quick-win
Low effort, high value
 strategic
Long-term strategic bet
 ux
User experience improvements
 wontfix
This will not be worked on
No Label enhancement frontend priority: high
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
chihlasm
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: chihlasm/resolutionflow#34
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?