UI improvements

[damiant]

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]

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

---

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