Skip to content

fix(phone): improve search and navigation - #361

Merged
bniedzie merged 1 commit into
mainfrom
fix/reduce-phone-list-verticality
Oct 8, 2026
Merged

bniedzie merged 1 commit into
mainfrom
fix/reduce-phone-list-verticality

Conversation

@bniedzie

@bniedzie bniedzie commented Oct 5, 2026 •

Copy link
Copy Markdown
Contributor

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.

  • On Desktop, keyboard users scrolling backwards with shift+tab no longer land on items covered by the VIPER nav bar at the top, or the new sticky phone navigation bar.
  • Each unit heading is now a true <h2> and the add button for maintain pages has been moved outside of the title for screen readers.

@coderabbitai

coderabbitai Bot commented Oct 5, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

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
  • Configuration used: Repository: ucdavis/VIPER/.coderabbit.yaml
  • Review profile: ASSERTIVE
  • Plan: Essentials
  • Run ID: 2575b808-539b-425b-8dec-1150ff242058
📥 Commits

Reviewing files that changed from the base of the PR and between 3873b09 and 5e37c16.

📒 Files selected for processing (26)
  • VueApp/src/Personnel/__tests__/phone-list-filter.test.ts
  • VueApp/src/Personnel/__tests__/phone-list-maintain.test.ts
  • VueApp/src/Personnel/__tests__/phone-list-unit-table.test.ts
  • VueApp/src/Personnel/__tests__/phone-list.test.ts
  • VueApp/src/Personnel/__tests__/section-jump-links.test.ts
  • VueApp/src/Personnel/__tests__/svm-frequent-number-table.test.ts
  • VueApp/src/Personnel/__tests__/svm-phone-section-table.test.ts
  • VueApp/src/Personnel/__tests__/svm-phones-maintain.test.ts
  • VueApp/src/Personnel/__tests__/svm-phones.test.ts
  • VueApp/src/Personnel/__tests__/test-utils.ts
  • VueApp/src/Personnel/assets/phone-list.css
  • VueApp/src/Personnel/components/MobileCardList.vue
  • VueApp/src/Personnel/components/MobileSortControl.vue
  • VueApp/src/Personnel/components/PhoneListFilter.vue
  • VueApp/src/Personnel/components/PhoneListUnitTable.vue
  • VueApp/src/Personnel/components/SVMFrequentNumberTable.vue
  • VueApp/src/Personnel/components/SVMPhoneSectionTable.vue
  • VueApp/src/Personnel/components/SectionJumpLinks.vue
  • VueApp/src/Personnel/composables/section-jump-targets.ts
  • VueApp/src/Personnel/composables/use-section-table.ts
  • VueApp/src/Personnel/pages/PhoneList.vue
  • VueApp/src/Personnel/pages/PhoneListMaintain.vue
  • VueApp/src/Personnel/pages/SVMPhones.vue
  • VueApp/src/Personnel/pages/SVMPhonesMaintain.vue
  • VueApp/src/Personnel/personnel.ts
  • VueApp/src/styles/base.css
💤 Files with no reviewable changes (1)
  • VueApp/src/styles/base.css

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.


📝 Walkthrough

Walkthrough

Phone-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.

Changes

Personnel phone navigation and filtering

Layer / File(s) Summary
Filter, status, and navigation layout
VueApp/src/Personnel/components/PhoneListFilter.vue, SectionJumpLinks.vue, MobileCardList.vue, MobileSortControl.vue, VueApp/src/Personnel/assets/phone-list.css, VueApp/src/styles/base.css, VueApp/src/Personnel/personnel.ts, related tests
The filter can show a no-match status and is sticky at all widths when viewport height is at least 400px. Phone-list styles add scroll padding and section-heading layout. Jump links are displayed vertically, and mobile lists can remain visible when empty.
Responsive section tables and heading anchors
VueApp/src/Personnel/composables/use-section-table.ts, VueApp/src/Personnel/components/PhoneListUnitTable.vue, SVMFrequentNumberTable.vue, SVMPhoneSectionTable.vue, related tests
The tables use shared match and pagination state. Their headings and edit controls render outside desktop tables, with anchors assigned to desktop or mobile headings. Maintenance modes can retain empty mobile lists.
Page targets, jump links, and no-match state
VueApp/src/Personnel/composables/section-jump-targets.ts, VueApp/src/Personnel/pages/PhoneList.vue, PhoneListMaintain.vue, SVMPhones.vue, SVMPhonesMaintain.vue, VueApp/src/Personnel/__tests__/*, VueApp/src/Personnel/__tests__/test-utils.ts
Phone-list and SVM pages build section targets and pass anchor IDs to their tables. Read-only pages filter jump targets by search and show a no-match status when applicable. Maintenance pages include empty sections in their targets. Tests cover link targets, no-match status, and attached-wrapper cleanup.

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
Loading

Merge Risk: ⚪ Minimal · up to 5e37c

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)
Check name Status Explanation
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Title check ✅ Passed The title follows the required Conventional Commits format, uses the valid type and scope fix(phone), and has an imperative subject with no trailing period.
Description check ✅ Passed The description explains the search, empty-table, navigation, and accessibility changes in the pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR
  • Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Comment @coderabbitai help to get the list of available commands.

@codecov-commenter

Copy link
Copy Markdown

Bundle Report

Changes will increase total bundle size by 3.42kB (0.16%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
viper-frontend-esm 2.2MB 3.42kB (0.16%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: viper-frontend-esm

Assets Changed:

Asset Name Size Change Total Size Change (%)
assets/GenericError-*.css -164 bytes 210.78kB -0.08%
assets/GenericError-*.js 9 bytes 145.1kB 0.01%
assets/SVMPhonesMaintain-*.js 200 bytes 10.81kB 1.89%
assets/SVMFrequentNumberTable-*.js 221 bytes 10.44kB 2.16%
assets/SectionJumpLinks-*.js (New) 8.3kB 8.3kB 100.0% 🚀
assets/PhoneListMaintain-*.js 153 bytes 5.8kB 2.71%
assets/PhoneListUnitTable-*.js 308 bytes 5.41kB 6.04% ⚠️
assets/PhoneList-*.js 210 bytes 2.33kB 9.9% ⚠️
assets/SVMPhones-*.js -859 bytes 1.85kB -31.69%
assets/SectionJumpLinks-*.css (New) 787 bytes 787 bytes 100.0% 🚀
assets/personnel-*.css (New) 571 bytes 571 bytes 100.0% 🚀
assets/RecordActionCell-*.js (Deleted) -5.99kB 0 bytes -100.0% 🗑️
assets/RecordActionCell-*.css (Deleted) -215 bytes 0 bytes -100.0% 🗑️
assets/SVMPhones-*.css (Deleted) -110 bytes 0 bytes -100.0% 🗑️

Files in assets/SVMPhonesMaintain-*.js:

  • ./src/Personnel/pages/SVMPhonesMaintain.vue → Total Size: 160 bytes

Files in assets/SVMFrequentNumberTable-*.js:

  • ./src/Personnel/components/SVMPhoneSectionTable.vue → Total Size: 174 bytes

  • ./src/Personnel/components/SVMFrequentNumberTable.vue → Total Size: 180 bytes

Files in assets/SectionJumpLinks-*.js:

  • ./src/Personnel/components/SectionJumpLinks.vue → Total Size: 247 bytes

  • ./src/Personnel/components/PhoneListFilter.vue → Total Size: 244 bytes

  • ./src/Personnel/components/MobileSortControl.vue → Total Size: 165 bytes

  • ./src/Personnel/composables/section-jump-targets.ts → Total Size: 1.12kB

  • ./src/Personnel/composables/use-section-table.ts → Total Size: 588 bytes

  • ./src/Personnel/components/MobileCardList.vue → Total Size: 241 bytes

Files in assets/PhoneListMaintain-*.js:

  • ./src/Personnel/pages/PhoneListMaintain.vue → Total Size: 160 bytes

Files in assets/PhoneListUnitTable-*.js:

  • ./src/Personnel/components/PhoneListUnitTable.vue → Total Size: 168 bytes

Files in assets/PhoneList-*.js:

  • ./src/Personnel/pages/PhoneList.vue → Total Size: 136 bytes

Files in assets/SVMPhones-*.js:

  • ./src/Personnel/pages/SVMPhones.vue → Total Size: 136 bytes

@codecov-commenter

codecov-commenter commented Oct 5, 2026 •

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 45.75%. Comparing base (3873b09) to head (5e37c16).
✅ All tests successful. No failed tests found.

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              
Flag Coverage Δ
backend 42.66% <ø> (ø)
frontend 65.38% <100.00%> (+0.22%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines Coverage Δ
VueApp/src/Personnel/components/MobileCardList.vue 96.96% <100.00%> (+0.30%) ⬆️
...App/src/Personnel/components/MobileSortControl.vue 100.00% <ø> (ø)
...ueApp/src/Personnel/components/PhoneListFilter.vue 100.00% <ø> (ø)
...pp/src/Personnel/components/PhoneListUnitTable.vue 97.22% <100.00%> (+0.92%) ⬆️
...rc/Personnel/components/SVMFrequentNumberTable.vue 92.30% <100.00%> (+0.64%) ⬆️
.../src/Personnel/components/SVMPhoneSectionTable.vue 93.10% <100.00%> (+0.79%) ⬆️
...eApp/src/Personnel/components/SectionJumpLinks.vue 100.00% <100.00%> (ø)
.../src/Personnel/composables/section-jump-targets.ts 100.00% <100.00%> (ø)
...App/src/Personnel/composables/use-section-table.ts 100.00% <100.00%> (ø)
VueApp/src/Personnel/pages/PhoneList.vue 97.29% <100.00%> (+6.12%) ⬆️
... and 3 more

... and 1 file with indirect coverage changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@bniedzie
bniedzie requested a review from bsedwards October 5, 2026 18:31
@bniedzie
bniedzie merged commit df3d5b2 into main Oct 8, 2026
14 of 15 checks passed
@bniedzie
bniedzie deleted the fix/reduce-phone-list-verticality branch October 8, 2026 21:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants