New mobile menu

[NoeBerdoz]

[gemini-code-assist]

Code Review

This pull request implements a mobile-specific bottom navigation bar for the /my2/ portal, featuring new pictograms and an animated indicator. The review feedback points out that the navigation spacer and global body margin are currently applied to all pages, leading to layout issues on non-portal views. Other recommendations include correcting the icon for the mobile 'write' button, changing its positioning to fixed for better visibility, and replacing hardcoded tab widths with flexible layout properties to enhance maintainability.

[gemini-code-assist]

The #bottom_nav_spacer is currently added to every page on the website for mobile users because it is not wrapped in a conditional check. This will cause unwanted whitespace at the bottom of the entire site. It should be wrapped in the same t-if condition as the navigation bar.

            <t t-if="request.session.uid and '/my2/' in request.httprequest.path">
                <div id="bottom_nav_spacer" class="d-block d-md-none w-100"></div>
            </t>

[gemini-code-assist]

This global margin-bottom on the body affects every page of the website on mobile devices. Combined with the #bottom_nav_spacer div, this creates significant redundant whitespace at the bottom of the entire site. This margin should be removed, as the spacer div in the template is sufficient to handle the layout offset for the fixed navigation bar.

[NoeBerdoz]

/gemini review

[gemini-code-assist]

Code Review

This pull request implements a mobile-specific bottom navigation bar for the /my2/ portal, featuring animated tabs and a floating action button for writing letters. The changes include new SVG pictograms and corresponding SCSS styles. Review feedback identifies layout issues where navigation-related spacing (global body margin and a spacer div) is incorrectly applied to all mobile pages. It is recommended to restrict these styles and elements to the portal context to prevent unwanted whitespace across the rest of the website.

[NoeBerdoz]

@Danielgergely I added a few changes and fixes.

• Fix broken write button on letters page
• Implement conditional rendering of Sponsorships and Letters tabs
• Render cart badge only when cart is non-empty
• Refactor the blue color to use the new core one
• Fix pre-commit

I could have implemented a regression regarding the mobile bottom margin, but the initial proposition added a bottom margin on every pages, even if the bottom bar wasn't shown, so I removed part of the concerned code.

[greptile-apps]

Confidence Score: 4/5

Safe to merge — all findings are P2 style/cosmetic issues with no runtime or data integrity impact.

Only P2 findings are present (missing i18n, indicator default position, SVG clip-path ID). No logic errors, security issues, or breaking changes were identified.

my_compassion/views/my2_bottom_nav.xml (missing translations), theme_compassion_2025/static/src/scss/layout/_header.scss (indicator default state), theme_compassion_2025/static/src/img/pictograms/Profile.svg (clip-path ID)

Important Files Changed

Filename	Overview
my_compassion/views/my2_bottom_nav.xml	New template that adds a mobile-only bottom navigation bar for /my2/ portal pages, with sponsor-conditional tabs and CSS-driven active indicator; tab labels are hardcoded English without i18n markers.
theme_compassion_2025/static/src/scss/layout/_header.scss	Adds mobile bottom-nav and floating write-button styles; CSS sibling-selector indicator logic is correct for active tabs but defaults to Home position when no tab matches a route.
my_compassion/templates/pages/my2_child_letters.xml	Adds a floating FAB (#write_button) visible only on mobile, linking to the new-letter route with an optional child_id query param; straightforward and correct.
theme_compassion_2025/static/src/img/pictograms/Profile.svg	New Profile pictogram SVG; uses a hardcoded clipPath ID (_clip1) that could conflict with other SVGs if they are ever rendered inline on the same page.
theme_compassion_2025/data/pictograms.xml	Registers three new pictograms (GiftBasket, Profile, Writing) in the theme data; straightforward additions with correct base64 file references.
my_compassion/manifest.py	Adds my2_bottom_nav.xml to the data list; correctly placed in the load order.
.gitignore	Adds *.DS_Store glob to gitignore; clean housekeeping.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["Page Request to /my2/*"] --> B{request.session.uid?}
    B -- No --> C[Normal website.layout\nheader + footer visible]
    B -- Yes --> D["Hide header & footer on mobile\n(d-none d-md-block)"]
    D --> E{partner.is_sponsor?}
    E -- Yes 6 tabs --> F["Home · My Sponsorships · Letters\nGive · Gift Basket · Profile"]
    E -- No 4 tabs --> G["Home · Give · Gift Basket · Profile"]
    F --> H["Render my2-bottom-nav\n(fixed-bottom, d-flex d-md-none)"]
    G --> H
    H --> I["Active tab class set\nvia request.httprequest.path check"]
    I --> J["CSS nth-child sibling selector\nmoves .indicator-wrapper\ntransform: translateX(N x 100%)"]
    K["Letters page /my2/children/letters"] --> L["FAB #write_button visible on mobile\n(d-flex d-md-none)"]
    L --> M["Links to /my2/children/letters/new\n+ optional ?child_id= param"]

Loading

_{Reviews (1): Last reviewed commit: "[T3166] FIX: force scope on bottom_nav_s..." | Re-trigger Greptile}

[greptile-apps]

Hardcoded English strings — missing i18n

All nav-tab labels (Home, My Sponsorships, Letters, Give, Gift basket, Profile) are hardcoded English strings with no Odoo translation markup. For a multilingual Compassion website, these won't be translated. Odoo QWeb supports translation via the t-esc="_('...')" pattern or the t-translation attribute on plain text nodes.

Similarly for the other <span> labels in the nav and the aria-label="Write a letter" attribute on the #write_button in my2_child_letters.xml.

[NoeBerdoz]

This is very true @Danielgergely And even more, there is no way for the user to switch its language anymore on mobile ! A solution has to be considered for this.

[NoeBerdoz]

@greptileai Great point, you could even have said that actually, the proposition removes the possibility for a mobile user to switch language, as they can't see the top menu anymore where the language selector is, which is a regression that should have been flagged.

[greptile-apps]

You're absolutely right, and that's a more critical regression than the i18n markup issue I flagged. The d-none d-md-block on the header (lines 6-9) doesn't just hide the nav — it removes the entire language selector for mobile users. That's a functional regression, not just a translation quality issue.

My original comment focused on the static string labels but should have explicitly called out that hiding the header breaks language switching for mobile users entirely. The two issues together mean mobile users are both stuck in whatever language they loaded the page in and have no way to change it.

A concrete fix worth flagging: the language switcher (and any other header-only controls) needs to either be surfaced in the bottom nav or in a dedicated mobile menu/settings area before the header can be safely hidden on small screens.

Tip: You can give me more context with .greptile/rules.md so I get this right next time.

[greptile-apps]

Indicator defaults to Home position when no tab is active

The .indicator-wrapper has no initial transform override, so it sits at translateX(0) (Home slot) by default. When a user navigates to a /my2/ route that doesn't match any tab's active condition (e.g. a deep settings sub-page), no nth-child rule fires, and the indicator bubble visually "sits on" the Home icon even though it isn't active — the Home icon won't have the lifted/white styling, making the indicator appear orphaned or pointing at the wrong tab.

Consider setting a default that hides the indicator (e.g. opacity: 0) and only showing it when an active class is matched, or ensure every reachable /my2/ path maps to a tab.

[greptile-apps]

Hardcoded clipPath ID may conflict when SVGs are inlined

Profile.svg defines <clipPath id="_clip1"> with a non-unique, hardcoded ID. If this SVG is ever embedded inline in the HTML (rather than referenced as a background-image/<img>), multiple instances on the same page — or another SVG file that also has _clip1 — will produce an ID collision, causing the clipping region to be mis-applied and the icon to render incorrectly. Consider using a namespaced or truly unique ID (e.g. profile-clip1).

[Danielgergely]

Thank you for your observations and changes!
I merged this branch into https://github.com/CompassionCH/compassion-website/tree/T2524-native-ios-app branch