Conversation
… and refine email card date display.
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the
✨ Finishing touches🧪 Generate unit tests (beta)
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. Comment |
… linting documentation.
…odel`, adjust tab bar styling, and apply minor code formatting.
…d styling and padding.
…upport their display.
…tributes across multiple components
…ive elements and improving code quality
…ability and maintainability
…ctivity and performance
- 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
There was a problem hiding this comment.
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 standaloneTabBarComponent, with animated indicator, badge support, and keyboard accessibility, wired through computedtabDataand signals inTabsPage. - 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-ofusage, 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
removeTagsExceptAllowedbuilds anescapedAllowedTagswhitelist, but thetagargument in the replace callback can include attributes (e.g."img src=..."), soescapedAllowedTags.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 normalizingtagto just the tag name before checking against the whitelist (or using a regex that leveragesescapedAllowedTagscorrectly), so allowed tags with attributes are not removed.
| <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> |
There was a problem hiding this comment.
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.
| 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 |
There was a problem hiding this comment.
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.
* 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>
…o ui-improvements
…e pages for improved UI consistency
…d responsive styles
|
@copilot add any functionality changes to changelog.md under 2.117 |
* 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>
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 theTabsPagecomponent.Key changes include:
Introduction of Custom Tab Bar Component:
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]Integration and Refactoring in Tabs Page:
TabsPageto use the newTabBarComponentin its template, removing the old<ion-tab-bar>and related markup. [1] [2]tabDataproperty, dynamically building the list of tabs (with icons, labels, and badges) based on app state and feature flags.Cleanup and Styling Adjustments:
tabs.page.scsssince styling is now handled by the custom component.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.