Repository navigation
fix(phone): improve search and navigation - #361
Conversation
|
Navigate logical layers of code changes, visualize relationships, and explore their blast radius. No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configuration
📒 Files selected for processing (26)
💤 Files with no reviewable changes (1)
Included review availability: This review used your included allowance. 4 included reviews remain after this review. Your included PR review attempts over the past 7 days set your current allowance at 5 reviews per hour. 📝 WalkthroughWalkthroughPhone-list and SVM pages now provide section jump links and a search no-match status. Desktop and mobile section tables use responsive heading anchors, and maintenance views can retain empty sections. ChangesPersonnel phone navigation and filtering
Priority: ➖ Normal Estimated code review effort: 3 (Moderate) | ~25 minutes Change: Feature Sequence Diagram(s)sequenceDiagram
actor User
participant PhonePage as Phone-list or SVM page
participant TargetHelpers as Jump-target helpers
participant JumpLinks as SectionJumpLinks
participant Browser
participant SectionHeading as Anchored section heading
PhonePage->>TargetHelpers: Build targets from sections and search
TargetHelpers-->>PhonePage: Return section targets
PhonePage->>JumpLinks: Render targets
User->>JumpLinks: Select a section link
JumpLinks->>Browser: Navigate to the link fragment
Browser->>SectionHeading: Scroll to the matching anchor
Merge Risk: ⚪ Minimal · up to This change adds section jump links, a no-match status, and responsive heading anchors to the phone lists. No merge-blocking risk was found. Check the sticky filter bar and scroll offsets in a real browser before release. 🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
Bundle ReportChanges will increase total bundle size by 3.42kB (0.16%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: viper-frontend-esmAssets Changed:
Files in
Files in
Files in
Files in
Files in
Files in
Files in
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #361 +/- ##
==========================================
+ Coverage 45.70% 45.75% +0.04%
==========================================
Files 954 956 +2
Lines 49809 49849 +40
Branches 6750 6754 +4
==========================================
+ Hits 22765 22806 +41
+ Misses 26071 26070 -1
Partials 973 973
Flags with carried forward coverage won't be shown. Click here to find out more.
|
There was a problem hiding this comment.
Copilot review overview
🔵 Needs a closer look
Responsive sticky positioning, fragment focus behavior, and keyboard accessibility still warrant final browser-based human validation.
Review effort: Balanced
Findings: None
What changed in this PR
Improves phone-list searching, section navigation, responsive visibility, and accessibility.
Changes:
- Adds sticky section jump links and focus-safe anchors across phone lists.
- Hides empty read-only sections and reports searches with no matches.
- Standardizes section headings and expands automated coverage.
| File | Description |
|---|---|
VueApp/src/styles/base.css |
Removes obsolete phone-list offset styling. |
VueApp/src/Personnel/personnel.ts |
Loads Personnel phone-list styles. |
VueApp/src/Personnel/pages/SVMPhonesMaintain.vue |
Adds maintain-page jump navigation. |
VueApp/src/Personnel/pages/SVMPhones.vue |
Adds filtered navigation and no-match status. |
VueApp/src/Personnel/pages/PhoneListMaintain.vue |
Adds unit jump navigation. |
VueApp/src/Personnel/pages/PhoneList.vue |
Supports filtered, hidden units and navigation. |
VueApp/src/Personnel/composables/use-section-table.ts |
Shares table visibility, pagination, and anchors. |
VueApp/src/Personnel/composables/section-jump-targets.ts |
Centralizes jump-target construction. |
VueApp/src/Personnel/components/SVMPhoneSectionTable.vue |
Adds accessible headings and empty-state visibility. |
VueApp/src/Personnel/components/SVMFrequentNumberTable.vue |
Aligns frequent-number table behavior. |
VueApp/src/Personnel/components/SectionJumpLinks.vue |
Refines jump-menu layout and documentation. |
VueApp/src/Personnel/components/PhoneListUnitTable.vue |
Adds headings, anchors, and filtered visibility. |
VueApp/src/Personnel/components/PhoneListFilter.vue |
Adds sticky layout and no-match announcements. |
VueApp/src/Personnel/components/MobileSortControl.vue |
Compacts sort-control spacing. |
VueApp/src/Personnel/components/MobileCardList.vue |
Adds conditional visibility and revised headers. |
VueApp/src/Personnel/assets/phone-list.css |
Defines shared heading and scroll-padding styles. |
VueApp/src/Personnel/__tests__/test-utils.ts |
Adds jump-menu test utilities. |
VueApp/src/Personnel/__tests__/svm-phones.test.ts |
Tests filtering, navigation, and statuses. |
VueApp/src/Personnel/__tests__/svm-phones-maintain.test.ts |
Tests maintain-page jump links. |
VueApp/src/Personnel/__tests__/svm-phone-section-table.test.ts |
Tests headings and table visibility. |
VueApp/src/Personnel/__tests__/svm-frequent-number-table.test.ts |
Tests frequent-number visibility and headings. |
VueApp/src/Personnel/__tests__/section-jump-links.test.ts |
Updates scroll-padding expectations. |
VueApp/src/Personnel/__tests__/phone-list.test.ts |
Tests unit navigation and no-match messaging. |
VueApp/src/Personnel/__tests__/phone-list-unit-table.test.ts |
Tests anchors, visibility, and heading structure. |
VueApp/src/Personnel/__tests__/phone-list-maintain.test.ts |
Tests maintain-list jump links. |
VueApp/src/Personnel/__tests__/phone-list-filter.test.ts |
Tests live status and measured height. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
This code addresses user concerns about the difficulty of finding specific people in longer lists.
For read-only lists, this code completely hides tables that are empty, whether as a result of filters or not. Previously, only PhoneList tables with no rows at all were hidden. Maintain list behavior is unchanged, since admins need to be able to add people to empty lists. When a filter results in no results across tables, this is stated explicitly, clarifying that the empty page is intentional and .
This PR standardizes and reduces the size of the header names for each table, resulting in slightly less space used and a more consistent feel.
This PR applies the navigation links and anchors from SVM's read-only mobile view to all lists, both desktop and mobile. These remain pinned to the top of the screen for easier navigation with less scrolling, provided the window height is at least 400 px. Below this number, the pinned content would take up too much of the view.
Finally, this PR improves accessibility in a couple of spots, particularly for those navigating with a keyboard or using a screen reader.
<h2>and the add button for maintain pages has been moved outside of the title for screen readers.