Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Mostro mascot in every tab header, with mood artwork from the sticker set

Closed
  • Is something wrong?
#770 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
35/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
dart, flutter
Domain
mobile

Research direction

Start with .specify/DESIGN_SYSTEM.md and the handoff note for handoff 11, since the issue requires a design decision before code. Then read home_screen.dart, lib/shared/widgets/tab_app_bar.dart, and lib/shared/mascot/mostro_mood.dart, along with their unit tests. Done means the phased shared header and mood artwork/events follow the stated freshness, priority, accessibility, and reduced-motion rules, with the design guidance updated and tests passing.

Written by the indexing model from the issue text.

Description

area: ui enhancement status: accepted

Problem

The three bottom-bar tabs are siblings, but their app bars disagree in the centre:

  • Book (home_screen.dart, _HeaderMascot) shows the Mostro mascot. It is interactive: a tap bounces it, 7 taps make it dizzy, it shuffles while the book is slow and celebrates a completed trade.
  • Trades and Chat (TabAppBar, lib/shared/widgets/tab_app_bar.dart) show the word Mostro in text (handoff 11: "the centre only says which app this is").

Switching tabs is the most frequent gesture in the app, and the bar's centre jumps from a picture to a word every time. The word carries no information: the user knows which app they are in. And the mascot already watches the trade stream to celebrate a completed trade, but it is missing from Trades, where that celebration belongs.

Tab headers today (top) and proposed (bottom), on real screenshots 
 Book              Trades (today)         Chat (today)
 ☰    [mascot]  🔔  ☰    Mostro    🔔    ☰    Mostro    🔔

 Book              Trades (proposed)      Chat (proposed)
 ☰    [mascot]  🔔  ☰   [mascot]   🔔    ☰   [mascot]   🔔

Proposal

Part 1: one header for every tab
  • Move _HeaderMascot out of home_screen.dart into lib/shared/mascot/. It is the mascot plus its moods (patience timer, trade-update listener).
  • TabAppBar shows it in place of the text. The book's header and TabAppBar are already near copies (same insets, 48 dp targets, a Stack of centre + Row), so the book can use TabAppBar too, which leaves one widget for all three tabs (DS-CMP-12).
  • The mascot keeps its accessible name (Mostro), so a screen reader reads the same thing as today.
  • The book's "impatient" mood depends on orderBookProvider. On the other tabs it either stays neutral or uses the same signal; to decide in the PR.
  • Design decision first: this changes handoff 11. Update .specify/DESIGN_SYSTEM.md (or the handoff note it cites) in the same PR, before the code.
Part 2: moods with their own artwork (sticker set)

Today a mood only changes how the single artwork moves (lib/shared/mascot/mostro_mood.dart: "Everything else about the mascot is the same artwork"). There is now a set of 24 Mostro stickers (512 px PNG with alpha, plus 100 px Telegram emoji versions):

The 24 Mostro stickers

bored celebrate check confused cool cry dispute escrow facepalm fire gm hodl laugh lightning love money p2p rocket scared surprised thanks thinking thumbsup waving

The proposal is to let a mood carry its own artwork, keeping its motion. At header size (26 dp), the stickers with props or colour (celebrate, dispute, escrow, lightning, love, check, cry) still read clearly. The subtle ones (thinking, bored, scared) read less clearly, but well enough. They carry their own dark outline, so they work on both themes.

Stickers in the book header at its real size (26 dp)

Existing moods → artwork

Mood Trigger (today) Sticker
celebrating a TradeUpdate to success / settledByAdmin / completedByAdmin celebrate
asleep empty book (OrderListEmpty) bored (it has the Zs)
impatient book still loading after 6 s thinking
dizzy 7 taps within the streak window confused
happy a tap waving

New trade moods come from TradeUpdate, i.e. from daemon messages:

Mood Trigger Sticker
escrow locked status → active (the seller's hold invoice is paid) escrow
fiat sent status → fiatSent money
dispute status → dispute dispute
canceled canceled, cooperativelyCanceled, canceledByAdmin, expired cry
offline ConnectionState.offline scared (ambient, until back online)
order published create_order confirmed by the daemon rocket
rating sent 5 stars → love; any other score → thanks love / thanks
daemon refused an action a CantDo facepalm

Easter eggs. These follow the pure rules in mostro_mood.dart, like the seasons:

Egg Rule Sticker
gm first launch of the session between 05:00 and 11:00 local gm
genesis day (3 Jan) replaces today's 📰 badge hodl
unassigned cool, fire, laugh, lightning, surprised, thumbsup, check, p2p ideas welcome
Rules any mood must follow
  • Only fresh events. A history replay after a restore re-emits old transitions (#474). A mood reacts only when TradeUpdate.occurredAt is recent (within a few seconds), or a restore makes Mostro celebrate, cry and argue all at once. Note that today's _onTradeUpdate ignores occurredAt, so a replayed success probably makes it celebrate already. Fix that in Part 2.
  • Never from the book. The Kind 38383 s tag is not a trade's status (#203). Every trade mood comes from TradeUpdate.
  • Decoration, never the only signal. A trade's state stays on its card and in its notices. The mascot only echoes it, and its semantics label does not change with the mood.
  • Reactions play once and go back to neutral. Ambient moods (asleep, impatient, offline) loop. If two moods apply at once, one has priority: offline > dispute > the others > ambient > neutral. Put this in mostro_mood.dart, with unit tests, like moodForTaps.
  • Reduce motion (DS-MOT-3). Swapping the artwork is static, so it stays when motion is off. Only the movement is gated.
  • Assets. Ship only the stickers that are used, trimmed, as about 256 px webp: about 13 KB each, about 312 KB for all 24. No new Rust, no persisted state. The moods are transient and need no identity reset.

Phasing

  1. Part 1: shared header, mascot in all tabs, design guide updated.
  2. Artwork for the existing moods, plus the occurredAt freshness guard.
  3. New trade moods (escrow, fiat sent, dispute, canceled, offline, published, rating, CantDo).
  4. Easter eggs (gm, genesis day, the unassigned stickers).

Out of scope

  • Sending the stickers in peer chat. That is a separate idea, and it touches the chat envelope.
  • Changing the drawer header or the About screen artwork.
Dominant language
Dart
Stars
11
Forks
9
Avg merge
20h 36m
Merged PRs (30d)
236

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from MostroP2P/app

All issues in MostroP2P/app

Similar issues

More Dart issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.