Skip to content

feat(assets): real walkthrough illustrations and Mostro logo across app bars - #264

Merged
grunch merged 7 commits into
mainfrom
fix/walkthrough-assets
Aug 1, 2026
Merged

feat(assets): real walkthrough illustrations and Mostro logo across app bars#264
grunch merged 7 commits into
mainfrom
fix/walkthrough-assets

Conversation

@AndreaDiazCorreia

@AndreaDiazCorreia AndreaDiazCorreia commented Jul 31, 2026

Copy link
Copy Markdown
Member

Replaces the placeholder walkthrough assets with the real v1 illustrations and wires the Mostro logo into every app bar.

  • Walkthrough: wt-1..6 were 817-byte flat rectangles in the app background colour; now the actual illustrations from MostroP2P/mobile (1:1 slide mapping, the six slide texts are identical in both repos).
  • Logo: the mascot is now shown centered in all three app bars — Order Book (center was empty by design), My Trades, and Chat (replaces the Icons.psychology placeholder). Drawer header uses the beta logo image instead of the icon + text + chip composition.
  • All assets converted to WebP: assets/images/ drops from 2.6 MB to 168 KB (-94%). RMSE vs the originals is 0.9-1.4% on the illustrations and 0 on the logo; alpha is preserved.

Closes #263

Summary by CodeRabbit

  • New Features

    • Added updated Mostro and beta branding across the app.
    • Added refreshed imagery for the walkthrough experience.
    • Centered the Mostro logo in the home screen header.
  • Improvements

    • Updated chat, trades, and drawer headers with clearer logo presentation.
    • Improved image asset efficiency by adopting WebP artwork throughout the app.
  • Documentation

    • Updated walkthrough asset references to match the new image format.

Replace psychology icon with Mostro logo in chat app bar, center logo in home screen app bar using Stack layout, and standardize logo height to 32px across all screens. Remove unused green color parameter from ChatAppBar.
…size

Replace all PNG logo and walkthrough images with WebP equivalents across app bars, drawer, and walkthrough screens. Add test coverage to verify WebP assets decode correctly.
@coderabbitai

coderabbitai Bot commented Jul 31, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Warning

Review limit reached

@AndreaDiazCorreia, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 54 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: b8861351-46e7-49ce-966c-bf332b7e9b9b

📥 Commits

Reviewing files that changed from the base of the PR and between 9d9d148 and 4ee8e54.

📒 Files selected for processing (1)
  • specs/004-mostro-p2p-client/tasks.md

Walkthrough

Added WebP logo and walkthrough assets. Updated walkthrough references and documentation. Replaced several app-bar and drawer branding elements with Mostro logo assets.

Changes

WebP asset migration

Layer / File(s) Summary
Asset replacement and validation
assets/images/*.webp, lib/features/walkthrough/screens/walkthrough_screen.dart, specs/004-mostro-p2p-client/plan.md
Added eight WebP assets. Updated all six walkthrough slides and the documented filenames from PNG to WebP.

Branding surface updates

Layer / File(s) Summary
Branding surface updates
lib/features/chat/screens/chat_rooms_screen.dart, lib/features/drawer/screens/drawer_menu.dart, lib/features/home/screens/home_screen.dart, lib/features/trades/screens/trades_screen.dart
Replaced app-bar and drawer branding with Mostro logo assets. Centered the home logo and preserved menu and notification controls. Removed unused color and theme parameters.

Estimated code review effort: 2 (Simple) | ~15 minutes

Possibly related issues

  • Issue 265 — Adds and integrates the same walkthrough and drawer logo assets, including wt-3.webp, wt-6.webp, and mostro_logo_beta.webp.

Poem

A bunny sees WebP logos bright,
Six slides now shine with lighter bytes.
The drawer wears beta pride,
App bars keep their controls beside.
“Hop, hop!” the new assets say,
Branding blooms across the day.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Out of Scope Changes check ⚠️ Warning The chat, home, and drawer logo redesigns are not required by the linked issue #263. Move the chat, home, and drawer logo changes to a separate PR, or link an issue that explicitly requires those UI changes.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly identifies the walkthrough illustrations and Mostro logo changes.
Linked Issues check ✅ Passed The PR replaces the six placeholder walkthrough images and resolves the missing Mostro logo reference described in issue #263.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/walkthrough-assets

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.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 433a2a7e63

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread lib/features/drawer/screens/drawer_menu.dart
Comment thread lib/features/walkthrough/screens/walkthrough_screen.dart
Comment thread lib/features/walkthrough/screens/walkthrough_screen.dart

@coderabbitai coderabbitai Bot 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.

🧹 Nitpick comments (3)
lib/features/home/screens/home_screen.dart (1)

315-318: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

Use one localized semantic label for both app-bar logos.

If these images replace the previous title semantics, add a dedicated ARB label and pass it to both images. Flutter provides Image.semanticLabel for assistive technologies. (api.flutter.dev)

  • lib/features/home/screens/home_screen.dart#L315-L318: Pass the localized label to the centered logo.
  • lib/features/trades/screens/trades_screen.dart#L139-L141: Pass the same localized label to the AppBar title image.

As per coding guidelines, user-facing strings in Dart must come from AppLocalizations.of(context) rather than hard-coded literals.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@lib/features/home/screens/home_screen.dart` around lines 315 - 318, Define
one localized ARB semantic label and retrieve it through
AppLocalizations.of(context); pass that label via Image.semanticLabel to the
centered logo in home_screen.dart (315-318) and the AppBar title logo in
trades_screen.dart (139-141), ensuring both images use the same localized label.

Source: Coding guidelines

test/tmp_webp_test.dart (2)

7-21: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Rename the permanent test and place it in the matching test subtree.

test/tmp_webp_test.dart is permanent asset coverage, but tmp makes it look like a disposable debug test. Move it to a stable asset-focused *_test.dart path that matches the covered feature or asset area.

As per coding guidelines, test/**/*_test.dart requires: “Place Dart tests under test/, mirror the feature layout, and use the *_test.dart suffix.”

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@test/tmp_webp_test.dart` around lines 7 - 21, Rename the permanent WebP asset
coverage test from tmp_webp_test.dart to a stable asset-focused *_test.dart
location under the matching test subtree. Preserve the existing _assets list and
“every webp asset decodes” test behavior while ensuring the new path mirrors the
covered asset or feature area and no longer suggests a temporary debug test.

Source: Coding guidelines


24-37: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick win

Dispose the decoded image resources.

This test creates a ui.Codec and ui.Image for each asset but never disposes them. Wrap the frame decoding and assertions in finally blocks so frame.image.dispose() and codec.dispose() run even if expectations fail.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@test/tmp_webp_test.dart` around lines 24 - 37, Update the asset loop’s image
decoding logic to dispose resources reliably: wrap the codec/frame processing
and assertions in a finally block that disposes frame.image, and ensure
codec.dispose() also runs when decoding or expectations fail. Preserve the
existing logging and dimension assertions.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@lib/features/home/screens/home_screen.dart`:
- Around line 315-318: Define one localized ARB semantic label and retrieve it
through AppLocalizations.of(context); pass that label via Image.semanticLabel to
the centered logo in home_screen.dart (315-318) and the AppBar title logo in
trades_screen.dart (139-141), ensuring both images use the same localized label.

In `@test/tmp_webp_test.dart`:
- Around line 7-21: Rename the permanent WebP asset coverage test from
tmp_webp_test.dart to a stable asset-focused *_test.dart location under the
matching test subtree. Preserve the existing _assets list and “every webp asset
decodes” test behavior while ensuring the new path mirrors the covered asset or
feature area and no longer suggests a temporary debug test.
- Around line 24-37: Update the asset loop’s image decoding logic to dispose
resources reliably: wrap the codec/frame processing and assertions in a finally
block that disposes frame.image, and ensure codec.dispose() also runs when
decoding or expectations fail. Preserve the existing logging and dimension
assertions.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: d32f764d-619e-4c46-a70a-07909c752b5e

📥 Commits

Reviewing files that changed from the base of the PR and between 69f5692 and 433a2a7.

⛔ Files ignored due to path filters (6)
  • assets/images/wt-1.png is excluded by !**/*.png
  • assets/images/wt-2.png is excluded by !**/*.png
  • assets/images/wt-3.png is excluded by !**/*.png
  • assets/images/wt-4.png is excluded by !**/*.png
  • assets/images/wt-5.png is excluded by !**/*.png
  • assets/images/wt-6.png is excluded by !**/*.png
📒 Files selected for processing (14)
  • assets/images/mostro_logo.webp
  • assets/images/mostro_logo_beta.webp
  • assets/images/wt-1.webp
  • assets/images/wt-2.webp
  • assets/images/wt-3.webp
  • assets/images/wt-4.webp
  • assets/images/wt-5.webp
  • assets/images/wt-6.webp
  • lib/features/chat/screens/chat_rooms_screen.dart
  • lib/features/drawer/screens/drawer_menu.dart
  • lib/features/home/screens/home_screen.dart
  • lib/features/trades/screens/trades_screen.dart
  • lib/features/walkthrough/screens/walkthrough_screen.dart
  • test/tmp_webp_test.dart

@AndreaDiazCorreia

Copy link
Copy Markdown
Member Author

Review round 1 — dispositions

CodeRabbit — test/tmp_webp_test.dart (2 nitpicks: stable path, dispose codecs)
Both are moot. That file was a temporary verification scaffold and was removed in 9d13cfa, which landed after the reviewed commit 433a2a7.

CodeRabbit — semanticLabel on the app-bar logos
Not applying. The logo is decorative in that position: every screen already has its own title and the bottom nav names the section, so a label would make a screen reader announce "Mostro" on each screen, and it would need a new ARB key across five locales for no added information. The drawer logo does carry a semanticLabel, since it replaced actual text. If the intent should be explicit in code, excludeFromSemantics: true is the right marker rather than a label.

Codex — three P1s
Replied inline. Spec drift is fixed in this PR; the two localization findings are real, verified, and tracked in #265.

@coderabbitai coderabbitai Bot 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.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@specs/004-mostro-p2p-client/plan.md`:
- Line 142: Synchronize the walkthrough asset names documented in the task entry
with the existing WebP contract used by the plan and WalkthroughScreen, updating
wt-1 through wt-6 to .webp or explicitly marking the PNG names as historical.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: e5b7fb6f-6f21-4a15-83e1-f0b4950e8a3e

📥 Commits

Reviewing files that changed from the base of the PR and between 433a2a7 and 9d9d148.

📒 Files selected for processing (1)
  • specs/004-mostro-p2p-client/plan.md

Comment thread specs/004-mostro-p2p-client/plan.md
@grunch
grunch merged commit a149b8f into main Aug 1, 2026
4 checks passed
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.

Walkthrough ships placeholder images; mostro_logo.png is missing

2 participants