fix(lyrics): restore spacing between word-synced lyric tokens

[InstaZDLL]

Bug

On a track with Enhanced LRC word-level timestamps, the active line collapsed into a single run with no spaces between words:

"Meet me in the crowd, people, people" → `Meetmeinthecrowd,people,people`

Other lines on the same track render correctly because they only paint when not active.

Cause

Two ingredients combined:

1. Each word in the active line is rendered as its own `display: inline-block` `` so the per-word karaoke highlight can independently animate scale + opacity. Inline-block siblings don't carry JSX-level whitespace — `ab` renders as `ab`.
2. Many Enhanced LRC sources omit spaces between word stamps (`<00:01>Meet<00:02>me<00:03>in…`), so the parser's `body.slice(start, end)` yields word texts with no inner whitespace either.

Non-active lines escape both because they fall through to `line.text` (already space-joined by the parser).

Fix

Wrap each word `` in a `Fragment` with a literal `" "` text node when it isn't the last. The text node provides the inter-box gap; if the source DID carry trailing whitespace in `word.text`, `white-space: normal` collapses the pair back to one space. Same idiom applied identically in FullscreenLyrics and LyricsPanel.

Test plan

• `bun run typecheck`
• `bun run lint`
• Play a track with Enhanced LRC: active line shows spaces between words
• Same track in side LyricsPanel: same result
• Plain LRC track still renders unchanged (no word stamps → same code path as before)

Summary by CodeRabbit

• Corrections de bogues
  • Correction de l'espacement entre les mots dans l'affichage des paroles synchronisées et en mode karaoké. Les mots sont maintenant correctement espacés pour une meilleure lisibilité. Cette amélioration concerne aussi bien les paroles en temps réel que le mode karaoké, offrant une expérience visuelle plus claire et plus agréable à la lecture.

[coderabbitai]

📝 Walkthrough

Résumé

Cette PR corrige le rendu des paroles synchronisées en deux composants : LyricsPanel et FullscreenLyrics. Les changements restaurent l'espacement visuel entre les mots en insérant explicitement des nœuds de texte " " lors du rendu en mode mots individuels.

Changements

Restauration de l'espacement inter-mots dans les paroles synchronisées

Layer / File(s)	Résumé
Restauration de l'espacement dans LyricsPanel src/components/layout/LyricsPanel.tsx	Import de Fragment et modification de la boucle de rendu line.words : chaque mot est maintenant enveloppé dans un Fragment (avec clé), et des espaces texte " " sont insérés entre les mots adjacents pour restaurer l'espacement visuel, tout en conservant la logique de surlignage du mot actif.
Restauration de l'espacement dans FullscreenLyrics src/components/player/FullscreenLyrics.tsx	Import de Fragment et modification de la boucle de rendu des mots karaoké : remplacement du rendu direct par un wrapper Fragment (clé sur index), avec insertion d'espaces texte entre les mots pour éviter la concaténation visuelle.

Effort d'examen estimé

🎯 2 (Simple) | ⏱️ ~12 minutes

Labels suggérés

type: fix, size: m, scope: frontend

Poésie

✨ Les mots s'espacent enfin sur l'écran,
Fragment par Fragment, rangés en cortège,
Pas de concaténation, juste l'harmonie des espaces,
Les paroles respirent à nouveau. 🎵

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	Le titre suit Conventional Commits et décrit précisément le bug : restauration de l'espacement entre tokens de paroles synchronisées.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description check	✅ Passed	La description suit le modèle requis avec un résumé clair du bug, sa cause, la correction et un plan de test documenté.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/word-sync-lyrics-spacing

---

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