feat(locations): simplify UI and add context-aware Add Sub-location (TRA-301-extra) #136
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Desktop: Split-pane layout with tree nav + details panel - Mobile: Expandable cards (avoids drawer conflict) - Comprehensive unit test requirements (Vitest) - Comprehensive E2E test requirements (Playwright) - Component architecture and state management design - Styling guidelines following existing patterns Addresses: TRA-301 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Moves spec from frontend/specs to spec/active/TRA-301-locations-finder-layout following project conventions. Spec includes: - Desktop: Split-pane layout with tree nav + details panel - Mobile: Expandable cards (avoids hamburger menu conflict) - Comprehensive unit test requirements (Vitest) - Comprehensive E2E test requirements (Playwright) - Component architecture and state management design - Styling guidelines matching existing patterns Addresses: TRA-301 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Implement desktop split-pane layout for locations screen: - Add react-split-pane dependency for resizable split pane - Extend locationStore with expandedNodeIds, treePanelWidth, toggleNodeExpanded, setTreePanelWidth, expandToLocation - Create LocationTreePanel for left navigation (store-managed expansion) - Create LocationDetailsPanel for right details view - Create LocationSplitPane container using react-split-pane - Update LocationsScreen with responsive breakpoint (1024px) - Desktop: Split pane layout - Mobile/Tablet: Original tree/list toggle (tree now default) - Add useMediaQuery hook for responsive detection - Add localStorage persistence for panel width and expanded nodes (keys: locations_treePanelWidth, locations_expandedNodes) - Add unit tests for all new components and store additions Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add mobile-first expandable cards layout and E2E test infrastructure: Mobile Components: - LocationExpandableCard: accordion-style card with expand/collapse - Shows identifier, name, status when collapsed - Expanded view: description, breadcrumb, hierarchy info, action buttons - Nested children cards with proper indentation - LocationMobileView: container rendering root locations as expandable cards - Search filtering with ancestor visibility Store Updates: - Add expandedCardIds state for mobile card expansion - Add toggleCardExpanded action - Reset expandedCardIds in invalidateCache E2E Test Infrastructure: - location.fixture.ts: API helpers for test hierarchy creation - locations-desktop.spec.ts: comprehensive desktop split-pane tests Unit Tests: - LocationExpandableCard.test.tsx (14 tests) - LocationMobileView.test.tsx (7 tests) LocationsScreen updates: - Remove list/tree toggle on mobile (replaced with expandable cards) - Simplify code by removing unused pagination state Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Phase 3/4 - Polish & Testing: - Add mobile E2E tests for expandable cards layout - Add accessibility E2E tests for keyboard navigation and ARIA - Verify responsive breakpoint behavior (1024px threshold) - Add touch target size validation tests Mobile tests cover: - Expandable card expand/collapse behavior - Nested children rendering - Search filtering on mobile - CRUD operations from expanded cards - FAB functionality - Empty state handling - Tablet viewport behavior Accessibility tests cover: - Keyboard navigation (arrow keys, Enter, Space) - ARIA attributes (aria-expanded, aria-label) - Focus management in modals - Screen reader support - Touch target sizing (44x44px minimum) - Color contrast verification Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Document completion status for TRA-301 including: - All 4 phases completed - 57 new unit tests (exceeds 45+ target) - ~65 new E2E tests (exceeds 40+ target) - Virtualization evaluation (not needed) - Success metrics verification Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Fix TypeError: Cannot read properties of null (reading 'useState') by ensuring Vite pre-bundles react-split-pane to use the same React instance as the rest of the application. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replace technical jargon with user-friendly terms: - "Root Location" → "Top Level" - "Subsidiary" / "Subsidiary Location" → "Sub-location" - "Children" / "Direct Children" → "Sub-locations" - "Root Locations" (stats) → "Top Level" - "None (Root Location)" → "None (Top Level)" Updated components: - LocationDetailsPanel - LocationDetailsModal - LocationExpandableCard - LocationCard - LocationStats - LocationParentSelector Updated tests to match new terminology. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This reverts commit f8ad399.
Based on stakeholder feedback from miks2u: - Remove Hierarchy Information section from details panel - Context-aware Add button (tree selection = parent) - Add inline "+" button on mobile cards for creating children Co-Authored-By: Claude Code <noreply@anthropic.com>
- Remove Hierarchy Information section from details panel - Remove Type/Children grid from mobile expandable cards - Add context-aware Add button (tree selection determines parent) - Add inline "Add Child" button on mobile cards - Show context message in create mode instead of parent dropdown - Keep parent selector in edit mode for re-parenting Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- FAB (floating action button) now always creates root-level locations - Added "Add Child" button to details panel in desktop split pane view - Passed onAddChild prop through LocationSplitPane to LocationDetailsPanel - Added tests for Add Child button in details panel Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Consistent terminology with "Sub-locations" section header. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Mobile expandable cards: - Use 2-column grid for action buttons - Shortened "Add Sub-location" to "Add" for space Desktop details panel: - Added icons to all action buttons (Edit, Move, Delete) - Use flex-wrap for responsive layout - Hide button text on small screens (icons only) - Show full text on larger screens Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
🚀 Preview Deployment Update ✅ This PR has been successfully merged into the preview branch. The preview environment will update shortly at: https://app.preview.trakrf.id |
github-actions bot
added a commit
that referenced
this pull request
Jan 23, 2026
… Sub-location (TRA-301-extra)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
🚀 Preview Deployment Update ✅ This PR has been successfully merged into the preview branch. The preview environment will update shortly at: https://app.preview.trakrf.id |
github-actions bot
added a commit
that referenced
this pull request
Jan 23, 2026
… Sub-location (TRA-301-extra)
- Mark spec status as Complete with PR link - Add follow-up session details (FAB behavior, button terminology, mobile layout) - Update acceptance criteria checkboxes - Resolve open questions with final decisions - Document all modified files and behavior summary Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
🚀 Preview Deployment Update ✅ This PR has been successfully merged into the preview branch. The preview environment will update shortly at: https://app.preview.trakrf.id |
github-actions bot
added a commit
that referenced
this pull request
Jan 23, 2026
… Sub-location (TRA-301-extra)
github-actions bot
added a commit
that referenced
this pull request
Jan 23, 2026
… Sub-location (TRA-301-extra)
github-actions bot
added a commit
that referenced
this pull request
Jan 23, 2026
… Sub-location (TRA-301-extra)
github-actions bot
added a commit
that referenced
this pull request
Jan 23, 2026
… Sub-location (TRA-301-extra)
github-actions bot
added a commit
that referenced
this pull request
Jan 23, 2026
… Sub-location (TRA-301-extra)
github-actions bot
added a commit
that referenced
this pull request
Jan 23, 2026
… Sub-location (TRA-301-extra)
mikestankavich
previously approved these changes
Jan 23, 2026
github-actions bot
added a commit
that referenced
this pull request
Jan 23, 2026
… Sub-location (TRA-301-extra)
github-actions bot
added a commit
that referenced
this pull request
Jan 23, 2026
… Sub-location (TRA-301-extra)
github-actions bot
added a commit
that referenced
this pull request
Jan 23, 2026
… Sub-location (TRA-301-extra)
github-actions bot
added a commit
that referenced
this pull request
Jan 23, 2026
… Sub-location (TRA-301-extra)
github-actions bot
added a commit
that referenced
this pull request
Jan 23, 2026
… Sub-location (TRA-301-extra)
github-actions bot
added a commit
that referenced
this pull request
Jan 23, 2026
… Sub-location (TRA-301-extra)
github-actions bot
added a commit
that referenced
this pull request
Jan 23, 2026
… Sub-location (TRA-301-extra)
github-actions bot
added a commit
that referenced
this pull request
Jan 23, 2026
… Sub-location (TRA-301-extra)
github-actions bot
added a commit
that referenced
this pull request
Jan 23, 2026
… Sub-location (TRA-301-extra)
github-actions bot
added a commit
that referenced
this pull request
Jan 23, 2026
… Sub-location (TRA-301-extra)
github-actions bot
added a commit
that referenced
this pull request
Jan 23, 2026
… Sub-location (TRA-301-extra)
github-actions bot
added a commit
that referenced
this pull request
Jan 24, 2026
… Sub-location (TRA-301-extra)
github-actions bot
added a commit
that referenced
this pull request
Jan 24, 2026
… Sub-location (TRA-301-extra)
github-actions bot
added a commit
that referenced
this pull request
Jan 24, 2026
… Sub-location (TRA-301-extra)
github-actions bot
added a commit
that referenced
this pull request
Jan 24, 2026
… Sub-location (TRA-301-extra)
github-actions bot
added a commit
that referenced
this pull request
Jan 24, 2026
… Sub-location (TRA-301-extra)
github-actions bot
added a commit
that referenced
this pull request
Jan 24, 2026
… Sub-location (TRA-301-extra)
github-actions bot
added a commit
that referenced
this pull request
Jan 24, 2026
… Sub-location (TRA-301-extra)
NicholusMuwonge
dismissed
mikestankavich’s stale review
The merge-base changed after approval.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Test plan
🤖 Generated with Claude Code