Skip to content

UI improvements#322

Merged
damiant merged 32 commits intomainfrom
ui-improvements
Feb 1, 2026
Merged

UI improvements#322
damiant merged 32 commits intomainfrom
ui-improvements

Conversation

@damiant
Copy link
Copy Markdown
Owner

@damiant damiant commented Jan 31, 2026

This pull request replaces the default Ionic tab bar with a new custom TabBarComponent, updating both the UI and logic for rendering and managing tabs. The changes introduce a more modern, floating tab bar design and centralize tab configuration and state management in the TabsPage component.

Key changes include:

Introduction of Custom Tab Bar Component:

  • Added a new TabBarComponent (tab-bar.component.ts, tab-bar.component.html, tab-bar.component.scss) that displays tabs with icons, optional badges, and custom styles, replacing the standard Ionic tab bar. [1] [2] [3]
  • The new component allows for flexible tab definitions and improved styling, including a floating, rounded bar with shadow and selected state highlighting.

Integration and Refactoring in Tabs Page:

  • Updated TabsPage to use the new TabBarComponent in its template, removing the old <ion-tab-bar> and related markup. [1] [2]
  • Centralized tab configuration in a computed tabData property, dynamically building the list of tabs (with icons, labels, and badges) based on app state and feature flags.
  • Updated the tab selection logic to use the new component’s output event and simplified navigation handling.

Cleanup and Styling Adjustments:

  • Removed old tab bar styles from tabs.page.scss since styling is now handled by the custom component.
  • Updated imports and component declarations to support the new component structure.

These changes make the tab bar more visually appealing and maintainable, while also making it easier to customize tab behavior and appearance in the future.

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Jan 31, 2026

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

  • 🔍 Trigger a full review
✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch ui-improvements

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

…odel`, adjust tab bar styling, and apply minor code formatting.
- bump @capawesome/capacitor-app-update from 8.0.1 to 8.0.2
- bump @webnativellc/capacitor-filesharer from 7.0.4 to 7.1.0
- bump @webnativellc/capacitor-print-webview from 7.0.1 to 7.1.0
- bump three from 0.181.1 to 0.182.0
@damiant damiant marked this pull request as ready for review February 1, 2026 17:02
@damiant damiant requested a review from Copilot February 1, 2026 17:02
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR introduces a custom floating TabBarComponent to replace the default Ionic tab bar, centralizes tab configuration/state in TabsPage, and makes a broad set of accessibility, linting, and dependency updates across the app.

Changes:

  • Replaces <ion-tab-bar> with a new standalone TabBarComponent, with animated indicator, badge support, and keyboard accessibility, wired through computed tabData and signals in TabsPage.
  • Adjusts layout and styling (e.g., virtual scroll container height, bar animations) to support the floating tab bar and improve UI consistency across views.
  • Performs widespread cleanup and modernization: Angular signal inputs/outputs, const/for-of usage, safer helpers, accessibility enhancements, ESLint configuration tightening, and dependency upgrades for Angular, Capacitor, Ionic, and tooling.

Reviewed changes

Copilot reviewed 82 out of 87 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
vitest.config.ts Minor coverage and alias config cleanup to keep testing setup consistent.
tsconfig.json Adds standard excludes for build artifacts to keep the TypeScript project clean.
tsconfig.app.json Ensures app tsconfig includes all app .ts sources for compilation.
src/global.scss Updates virtual scroll container height and minor formatting to coexist with the new floating tab bar.
src/app/utils/utils.ts Replaces var/let with const for safer, clearer utility implementations.
src/app/utils/date-utils.ts Whitespace-only changes for readability; logic unchanged.
src/app/utils/date-utils.test.ts Style and formatting adjustments for Vitest tests.
src/app/update.service.ts Simplifies alert presentation logic while preserving async confirmation behavior.
src/app/ui/ui.service.ts Uses const for navigation bar color to improve code clarity.
src/app/thing/thing.component.ts Flattens imports array formatting; no behavioral change.
src/app/tabs/tabs.page.ts Integrates TabBarComponent, centralizes tab configuration in a tabData computed, adds opened signal for animation, and updates tab selection routing.
src/app/tabs/tabs.page.scss Removes old Ionic tab bar-specific styles, as styling is now in TabBarComponent.
src/app/tabs/tabs.page.html Replaces the Ionic tab bar markup with <app-tab-bar> wired to computed tabs, selection, and open state.
src/app/tab-bar/tab-bar.component.ts New custom tab bar component with signal-based inputs, animated selection indicator, and keyboard handling for tabs.
src/app/tab-bar/tab-bar.component.scss Styles the new floating tab bar, including indicator, badges, and responsive behavior.
src/app/tab-bar/tab-bar.component.html Renders tab items with icons, labels, badges, and indicator, supporting keyboard focus and selection.
src/app/search/search.page.ts Minor formatting and const usage improvement in the search mapping helper.
src/app/rsl/rsl.page.ts Formatting of imports and loop iteration improvements with const.
src/app/rsl-event/rsl-event.component.ts Formatting in imports array only.
src/app/rsl-event/rsl-event.component.html Adds tabindex and keyup.enter for occurrence toggling to improve keyboard accessibility.
src/app/reminders/reminders.component.ts Uses const in loops for private events to clarify immutability.
src/app/reminders/reminder.component.ts imports array formatting only.
src/app/print-favs/print-favs.page.html Makes the print overlay closable via keyboard (tabindex and keyup.enter).
src/app/pin-map/pin-map.page.ts Cleans up imports formatting and replaces several for loops with for...of const for clarity.
src/app/participate/participate.component.ts Fixes a bug where token.events.length was assigned instead of compared, now using === 1.
src/app/participate/participate.component.html Adds keyboard activation (tabindex/keyup.enter) to the sign-in CTA link.
src/app/notifications/notification.service.ts Uses const in loops and timezone helper; behavior unchanged.
src/app/messages/messages.page.ts Imports IonIcon, registers mailOpenOutline, and wires icons into the messages page.
src/app/messages/messages.page.scss Adds styling for the empty state icon and centering.
src/app/messages/messages.page.html Adds a clearer empty state with icon and message, and slightly adjusts unread logic (unread() <= 0).
src/app/messages/message-card.component.ts Tidies imports array formatting.
src/app/messages/message-card.component.html Adds descriptive alt text for images and avatars for accessibility.
src/app/messages/email-card.component.ts Tidies imports array formatting.
src/app/messages/email-card.component.scss Minor closing brace formatting.
src/app/messages/email-card.component.html Reflows template for readability and preserves semantics.
src/app/message/messages.service.ts Always fetches messages JSON (removing the effectively no-op conditional), hardens JSON parsing with a guarded try/catch, and switches several loops to const.
src/app/map/street.service.ts Converts loops to for...of const and annotates an intentionally empty catch block for linting.
src/app/map/map.utils.ts Replaces var with const/let in the distance helper for safer math.
src/app/map/map.ts Uses const/for...of in several loops and annotates a debug try/catch for lint rules.
src/app/map/map.component.ts Simplifies geolocation message logic, updates several loops, and generalizes mapClick to handle keyboard events in addition to mouse clicks.
src/app/map/map.component.html Adds keyboard activation (tabindex/keyup.enter) to map info links and the map container to improve accessibility.
src/app/map/geo.utils.ts Uses const for the affine transform determinant.
src/app/link/link.service.ts Uses const for the groups array to clarify intent.
src/app/link/link.component.ts Migrates to signal-based inputs, clarifies local variable usage with const, and refactors tag-stripping logic.
src/app/link/link.component.html Adds keyboard activation and tabindex to clickable complex link content.
src/app/intro/intro.page.ts Several const-ification and control-flow cleanups, including fixing the preDownload finally to no longer unconditionally return false.
src/app/intro/intro.page.html Marks the logo header as aria-hidden to better reflect its decorative role.
src/app/home/home.page.ts Uses a safer hasOwnProperty check via Object.prototype.hasOwnProperty.call.
src/app/home/home.page.html Adds aria-hidden to some decorative elements and tweaks a footer click target; underlying behavior otherwise unchanged.
src/app/friend/friend.component.ts Minor imports formatting.
src/app/favs/favs.page.ts imports formatting and loop refactors in reminders setup to use const.
src/app/favs/favs.page.scss Adds icon alignment tweaks for centered icons.
src/app/favs/favs.page.html Clarifies the empty-state copy for favorites.
src/app/favs/favorites.service.ts Extensive cleanup replacing var/let with const and for...of, improving readability without changing logic.
src/app/fav-map/fav-map.page.ts imports array formatting only.
src/app/events/events.page.ts imports array formatting only.
src/app/events-card/events-card.component.ts Uses for...of const when building Item[] from events.
src/app/event/event.page.ts imports formatting and safer handling of hosted_by_camp by checking it before findCamp calls.
src/app/event/event.component.ts imports formatting only.
src/app/data/worker-interface.ts Removes a no-op if block and formats a warning log for clarity.
src/app/data/integrity.service.ts Modernizes the UUID generation function with let/const and clearer arithmetic.
src/app/data/db.service.ts Simplifies an onlyFresh check and uses const in a filesystem loop.
src/app/data/data-manager.ts Large refactor to use const/for...of, slight reorganization of doWork cases, and minor readability improvements across data population and search helpers.
src/app/camps/camps.page.ts imports formatting and for...of const in alphabetical index calculation.
src/app/camp/camp.page.ts imports formatting and for...of const over RSL events when adjusting dates.
src/app/camp/camp.page.html Adds keyboard activation (tabindex/keyup.enter) for camps with URLs.
src/app/camp/camp.component.ts imports formatting only.
src/app/calendar.service.ts Uses const in timezone-conversion helper for readability.
src/app/burn-card/burn-card.component.ts Migrates from @Input() to signal-based cards input and drops the unused Angular Input import.
src/app/burn-card/burn-card.component.html Adapts to signal-based cards() and adds keyboard activation for card selection.
src/app/broadcast/broadcast.page.ts imports array formatting only.
src/app/bar/bar.component.ts Removes Angular animations in favor of CSS-based open/close animations for the bar.
src/app/bar/bar.component.scss Implements an open/closed transform/opacity animation purely in CSS.
src/app/bar/bar.component.html Switches from animation binding to CSS class, and adds tabindex/keyup.enter to options for keyboard accessibility.
src/app/art/art.page.ts imports formatting and for...of const usage in art listing helpers.
src/app/art-item/art-item.page.html Adds keyboard activation on the art URL header.
src/app/app.component.ts Wraps Sentry initialization in a guarded try/catch with an explicit lint annotation for the empty catch.
src/app/alpha/alpha.component.ts Major refactor to use signal-based inputs/outputs and computed properties, update size-check interval handling, and clean up magnification and letter visibility logic.
src/app/alpha/alpha.component.html Adapts template bindings to signals and uses <p> instead of <label> for letters, keeping accessibility/style in sync.
src/app/about/about.page.ts Flattens and tidies imports for readability.
src/app/about/about.page.html Adds alt text to the profile image for accessibility.
package.json Removes the NODE_OPTIONS env from the lint script and upgrades a number of Angular, Capacitor, Ionic, three.js, ESLint, and tooling dependencies.
ios/App/Podfile.lock Aligns CocoaPods dependencies with the updated Capacitor and plugin versions.
agents.md Introduces project guidelines around Bun usage, Angular/Capacitor patterns, and lint/format workflows.
.vscode/settings.json Adds a Java build configuration setting for VS Code.
.eslintrc.json Reworks ESLint configuration to use @typescript-eslint, Angular ESLint presets (including template accessibility), and unused-imports with TypeScript-aware settings.
Comments suppressed due to low confidence (1)

src/app/link/link.component.ts:123

  • removeTagsExceptAllowed builds an escapedAllowedTags whitelist, but the tag argument in the replace callback can include attributes (e.g. "img src=..."), so escapedAllowedTags.includes(tag) will be false even for allowed tags that have attributes. This means allowed tags like <img src="..."> or <p class="..."> will be stripped instead of preserved, which contradicts the intent of the function. Consider normalizing tag to just the tag name before checking against the whitelist (or using a regex that leverages escapedAllowedTags correctly), so allowed tags with attributes are not removed.

Comment on lines +140 to +142
<p aria-hidden="true" (click)="vm.moreOpen = true">{{ vm.timezone }} {{vm.version}}</p>
</div>
<div (click)="moreClick()" class="pad-top" (click)="vm.hiddenPanel = !vm.hiddenPanel"></div>
<div aria-hidden="true" (click)="moreClick()" class="pad-top" (click)="vm.hiddenPanel = !vm.hiddenPanel"></div>
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

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

This div has two separate (click) bindings, and in Angular templates only one handler for a given event is respected (the later one wins), so moreClick() will not reliably execute. To avoid losing one of the handlers, combine the behaviors into a single (click) expression (e.g. call moreClick() and toggle vm.hiddenPanel in the same handler) instead of duplicating the event binding.

Copilot uses AI. Check for mistakes.
Comment on lines +55 to +58
handleKey(event: any) {
if (event.keyCode === 13 || event.keyCode === 32) {
event.preventDefault(); // Prevent default actions like page scrolling on Space
event.target.click(); // Trigger the click event
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

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

handleKey is using the deprecated event.keyCode and an untyped any event, which can cause issues across platforms and makes the handler harder to maintain. Consider typing this as a KeyboardEvent (or KeyboardEvent | MouseEvent if needed) and checking event.key (e.g. 'Enter'/' '), which is the modern, standards-based way to detect key presses.

Copilot uses AI. Check for mistakes.
Copy link
Copy Markdown
Contributor

Copilot AI commented Feb 1, 2026

@damiant I've opened a new pull request, #323, to work on those changes. Once the pull request is ready, I'll request review from you.

Copilot AI and others added 8 commits February 1, 2026 09:21
* Initial plan

* fix: call overflowDivider signal as function in checkVisibleLetters

Co-authored-by: damiant <3505469+damiant@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: damiant <3505469+damiant@users.noreply.github.com>
@damiant
Copy link
Copy Markdown
Owner Author

damiant commented Feb 1, 2026

@copilot add any functionality changes to changelog.md under 2.117

Copy link
Copy Markdown
Contributor

Copilot AI commented Feb 1, 2026

@damiant I've opened a new pull request, #324, to work on those changes. Once the pull request is ready, I'll request review from you.

* Initial plan

* docs: Add functionality changes to changelog.md under version 2.117

Co-authored-by: damiant <3505469+damiant@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: damiant <3505469+damiant@users.noreply.github.com>
@damiant damiant merged commit 594717e into main Feb 1, 2026
3 checks passed
@damiant damiant deleted the ui-improvements branch February 1, 2026 19:17
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.

3 participants