feat(ui): render sound tiles with canvas stickers

[thewrz]

Summary

• Replace the old styled-button sound tile body with a paint-only canvas::Program tile.
• Add Confetti sticker rendering with tone-tinted disc gloss, deterministic per-sound rotation, centered 🔊 placeholder, and top-right favorite star.
• Keep left-click play and right-click context menu handling in the parent mouse_area.

Closes #13

Design decisions

• The placeholder graphic is intentionally uniform for every tile (🔊); per-sound custom graphics stay deferred to feat(ui,state): per-sound tile graphics — assigned images, album-art preview, profile association (tracking) #148.
• Iced canvas does not provide a CSS-style radial-gradient primitive in this code path, so the sticker gloss is rendered as layered translucent circles, matching the existing design-reference approach.
• Existing tile text metadata, duration, hotkey badge, and playing border behavior are preserved; issue feat(ui): sticker tile hover + playing animations (PR2 of #13) #92 remains the home for hover/playing animation polish.

Validation

• cargo fmt --check
• cargo test
• cargo clippy --all-targets -- -D warnings

Summary by CodeRabbit

• New Features

  • Introduced a refreshed sound tile display with richer visuals, including tone-based coloring, favorite markers, and clearer playback indicators.
  • Added support for showing per-sound keyboard shortcuts directly on tiles when available.
  • Sound tiles now respond to both left-click playback and right-click context menu actions.

• Bug Fixes

  • Improved consistency of tile styling and rendering across the sound grid.

[coderabbitai]

Warning

Review limit reached

@thewrz, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 36 minutes and 19 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more credits in the billing tab to continue.

⌛ How to resolve this issue?

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 credits.

🚦 How do rate 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 see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 506f6eb1-8806-4cb8-be10-cda213376b14

📥 Commits

Reviewing files that changed from the base of the PR and between 729b3d3 and 3e5994e.

📒 Files selected for processing (1)

• src/ui/sound_tile.rs

📝 Walkthrough

Walkthrough

The UI adds a canvas-based sound tile component, exports it, and switches the sound grid to render through it. Tile data now carries seed-derived tone and rotation values, optional hotkeys, and updated left- and right-click interactions.

Changes

Canvas sound tile UI

Layer / File(s)	Summary
Public tile contract src/ui/sound_tile.rs, src/ui/theme.rs, src/ui/mod.rs	SoundTileData, seed and tone helpers, and Tone::sticker are added, and sound_tile is exported from the UI module.
Canvas tile rendering src/ui/sound_tile.rs	SoundTile renders the tile body, sticker disc, placeholder graphic, favorite star, and footer hotkey or play/pause indicator, with tests for rotation determinism and placeholder consistency.
Grid delegation src/ui/sound_grid.rs	The grid builds SoundTileData, delegates drawing to sound_tile::view, and updates pointer, left-press, and right-press handling.

Sequence Diagram

sequenceDiagram
  participant SoundGrid
  participant SoundTileView
  participant SoundTilePaint
  participant Tone

  SoundGrid->>SoundTileView: view(tile_data, theme, is_playing)
  SoundTileView->>SoundTilePaint: create canvas program
  SoundTilePaint->>Tone: sticker(dark)
  Tone-->>SoundTilePaint: sticker color

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related issues

• Issue 148: This PR adds the sound_tile canvas component and placeholder sticker behavior that issue 148 builds on.
• Issue 92: This PR changes the same tile rendering path and tone-based visual setup used by the interactive tile state work.

Possibly related PRs

• wrzonance/HonkHonk#102: Both PRs change the sound grid tile path, including favorite display and right-press context-menu behavior, and this PR moves that rendering into sound_tile and SoundTileData.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 7.41% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ 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 is concise and matches the main change: rendering sound tiles with canvas stickers.
Linked Issues check	✅ Passed	The changes implement the canvas tile, uniform 🔊 placeholder, deterministic rotation, glossy tone disc, and top-right favorite star requested in #13.
Out of Scope Changes check	✅ Passed	No clear unrelated changes are introduced beyond the canvas tile rendering work and supporting UI wiring.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/issue-13-canvas-tiles

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

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 `@src/ui/sound_tile.rs`:
- Around line 32-36: seed_from_sound_id currently maps any non-hex or shorter ID
to the same fallback seed of 0, causing many sounds to share identical tile
variation. Update seed_from_sound_id in sound_tile.rs to derive a stable nonzero
seed from the full id for all inputs, while still keeping hex parsing as an
option when available. Use a deterministic hash or similar fallback so different
sound IDs always produce different seeds and preserve per-sound variation.

🪄 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: 6531102c-9ccc-4e8b-bfce-627b93a57e07

📥 Commits

Reviewing files that changed from the base of the PR and between 9d493cb and 729b3d3.

📒 Files selected for processing (4)

• src/ui/mod.rs
• src/ui/sound_grid.rs
• src/ui/sound_tile.rs
• src/ui/theme.rs