redesign web experience - #48
Merged
Merged
Conversation
Signed-off-by: InstaZDLL <github.105mh@8shield.net>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (27)
📝 WalkthroughWalkthroughRefonte du design system (nouveau styles.css), puis migration transversale des composants et routes vers les primitives visuelles (panels, boutons, inputs, status/error cards, media lists) sans modifier la logique métier. ChangesRefonte complète du système de design
Estimated code review effort 🎯 4 (Complexe) | ⏱️ ~45 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
github-actions
Bot
added
scope: web
InstaZDLL
marked this pull request as ready for review
June 12, 2026 13:43
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (6)
web/src/components/PlaylistFormDialog.tsx (2)
1-220:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winRésolvez l'erreur de formatage Prettier avant la fusion.
Le pipeline signale une vérification de formatage Prettier échouée pour ce fichier. Veuillez exécuter
prettier --writeou l'intégration auto-format de votre éditeur pour corriger cela.🤖 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 `@web/src/components/PlaylistFormDialog.tsx` around lines 1 - 220, Run Prettier on this file (the PlaylistFormDialog component) to fix formatting errors: e.g. run prettier --write or your editor's auto-format on the file containing PlaylistFormDialog (constants like NAME_MAX / DESCRIPTION_MAX and the PlaylistFormDialog function are the symbols to locate the component). After formatting, re-run the formatter/lint step (or the repo's pre-commit hook / npm run format) and commit the updated file so the Prettier check in CI passes.Source: Pipeline failures
1-220:⚠️ Potential issue | 🟡 MinorValider les classes design-system dans
web/src/styles.css
- Les classes utilisées (
panel,panel-pad,button,button-ghost,button-primary,input,textarea,error-card,status-card,quiet-panel,section-eyebrow,display-title,page-wrap,app-main, etc.) existent bien dans./web/src/styles.css.- Les “variantes composées”
button button-ghost/button button-primary: pas besoin d’un sélecteur du type.button.button-ghost(aucun n’apparaît) ;.buttonfournit la base (layout/hover/active) et.button-ghost/.button-primarysurchargent les couleurs/bordures.- Les utilitaires (
px-4,mx-auto,max-w-md,gap-2,text-4xl,font-bold, …) ne sont pas définis dansstyles.css: l’empilement dépend d’une autre source (ex. génération Tailwind), donc ce fichier ne permet pas de trancher ce point.🤖 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 `@web/src/components/PlaylistFormDialog.tsx` around lines 1 - 220, Confirm in web/src/styles.css that the design-system classes referenced by PlaylistFormDialog (panel, panel-pad, button, button-ghost, button-primary, input, textarea, error-card, status-card, quiet-panel, section-eyebrow, display-title, page-wrap, app-main) are defined; ensure button-ghost and button-primary exist as modifier classes (not only as combined selectors) since PlaylistFormDialog uses them as separate class tokens (e.g., "button button-ghost"), and if only combined selectors like ".button.button-ghost" are present change or add standalone ".button-ghost" and ".button-primary" rules to override colors/borders while keeping .button as the base; finally, add a short comment or README note in the styles file that utility classes (px-4, mx-auto, max-w-md, gap-2, text-4xl, font-bold, etc.) come from Tailwind (or another generator) and are intentionally not declared in styles.css.web/src/routes/sign-up.tsx (1)
1-159:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winRésolvez l'erreur de formatage Prettier avant la fusion.
Le pipeline signale une vérification de formatage Prettier échouée pour ce fichier. Veuillez exécuter
prettier --writeou l'intégration auto-format de votre éditeur pour corriger cela.🤖 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 `@web/src/routes/sign-up.tsx` around lines 1 - 159, Prettier formatting failed for this file; run your formatter (e.g. prettier --write) or use your editor's auto-format on the SignUp component file to fix whitespace/format issues so the CI check passes; focus on formatting the exported SignUp function and surrounding constants (MIN_PASSWORD, MAX_PASSWORD) and ensure JSX (form, inputs, buttons) is properly formatted to match the project's Prettier config.Source: Pipeline failures
web/src/routes/sign-in.tsx (1)
1-180:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winRésolvez l'erreur de formatage Prettier avant la fusion.
Le pipeline signale une vérification de formatage Prettier échouée pour ce fichier. Veuillez exécuter
prettier --writeou l'intégration auto-format de votre éditeur pour corriger cela.🤖 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 `@web/src/routes/sign-in.tsx` around lines 1 - 180, Prettier formatting failed for this file; run a formatter (e.g. run `prettier --write` on the project or this file) or use your editor's auto-format to fix style issues in the SignIn component and related exports (Route, safeContinueTarget), then stage and commit the modified file and push the branch so the CI formatting check passes. Ensure you don't introduce functional changes—only formatting—before committing.Source: Pipeline failures
web/src/routes/_authed.settings.tsx (1)
1-124:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winRésolvez l'erreur de formatage Prettier avant la fusion.
Le pipeline signale une vérification de formatage Prettier échouée pour ce fichier. Veuillez exécuter
prettier --writeou l'intégration auto-format de votre éditeur pour corriger cela.🤖 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 `@web/src/routes/_authed.settings.tsx` around lines 1 - 124, Prettier formatting failed for this file; run the formatter (eg. `prettier --write .` or use your editor's auto-format) and re-stage the updated file so the diff for SettingsPage / AccountCard / formatCreatedAt matches the repo style; then commit and push the formatted changes to fix the CI check.Source: Pipeline failures
web/src/components/PlayableTrackList.tsx (1)
1-1:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winCorriger les problèmes de formatage Prettier dans les 4 fichiers.
Les 4 fichiers de cette couche (
PlayableTrackList.tsx,_authed.profiles.$profileId.playlists.tsx,_authed.profiles.$profileId.playlists.$playlistId.tsx,p.$token.tsx) échouent la vérification Prettier selon les logs du pipeline CI. Lancerbun run formatou l'équivalent pour corriger automatiquement.🤖 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 `@web/src/components/PlayableTrackList.tsx` at line 1, Les fichiers PlayableTrackList.tsx, _authed.profiles.$profileId.playlists.tsx, _authed.profiles.$profileId.playlists.$playlistId.tsx et p.$token.tsx échouent la vérification Prettier; exécutez le formateur (par exemple `bun run format` ou votre équivalent npm/yarn/cli) pour reformater ces fichiers, vérifiez les modifications générées, ajoutez/committez les fichiers reformattés et poussez la branche pour que la CI repasse. Assurez-vous que les symboles/exports dans PlayableTrackList.tsx et les routes `_authed.profiles.*`/`p.$token.tsx` restent inchangés fonctionnellement après le formatage.
🤖 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 `@web/src/styles.css`:
- Line 346: Les variables CSS --accent-600, --accent-500, --accent-100 et
--accent-700 sont utilisées par .button-accent, .input:focus, .art-tile, la puce
active dans TrackFilterBar et le style inline de la tuile de couverture dans
PlayerBar mais ne sont pas définies; fixez-le en ajoutant ces variables soit
dans :root (avec valeurs pour thèmes clair et sombre) soit en important les
tokens depuis `@waveflow/design-tokens` dans le bloc `@theme` et mappez les noms
(--accent-600/500/100/700) aux valeurs appropriées afin que .button-accent,
.input:focus, .art-tile et les composants TrackFilterBar/PlayerBar affichent les
couleurs attendues.
- Around line 5-7: Le fichier contient uniquement un bloc `@theme` définissant
--font-sans mais il manque un bloc `@theme` inline qui remappe les utilitaires
accent-* et surface-* vers les variables OKLCH fournies par
`@waveflow/design-tokens`; ajoute un bloc `@theme` inline dans web/src/styles.css
qui définit les mappings pour accent-* et surface-* en utilisant les variables
OKLCH exportées par `@waveflow/design-tokens` (nom des variables exactes de
design-tokens), afin que les utilitaires accent-* / surface-* pointent vers ces
variables.
---
Outside diff comments:
In `@web/src/components/PlayableTrackList.tsx`:
- Line 1: Les fichiers PlayableTrackList.tsx,
_authed.profiles.$profileId.playlists.tsx,
_authed.profiles.$profileId.playlists.$playlistId.tsx et p.$token.tsx échouent
la vérification Prettier; exécutez le formateur (par exemple `bun run format` ou
votre équivalent npm/yarn/cli) pour reformater ces fichiers, vérifiez les
modifications générées, ajoutez/committez les fichiers reformattés et poussez la
branche pour que la CI repasse. Assurez-vous que les symboles/exports dans
PlayableTrackList.tsx et les routes `_authed.profiles.*`/`p.$token.tsx` restent
inchangés fonctionnellement après le formatage.
In `@web/src/components/PlaylistFormDialog.tsx`:
- Around line 1-220: Run Prettier on this file (the PlaylistFormDialog
component) to fix formatting errors: e.g. run prettier --write or your editor's
auto-format on the file containing PlaylistFormDialog (constants like NAME_MAX /
DESCRIPTION_MAX and the PlaylistFormDialog function are the symbols to locate
the component). After formatting, re-run the formatter/lint step (or the repo's
pre-commit hook / npm run format) and commit the updated file so the Prettier
check in CI passes.
- Around line 1-220: Confirm in web/src/styles.css that the design-system
classes referenced by PlaylistFormDialog (panel, panel-pad, button,
button-ghost, button-primary, input, textarea, error-card, status-card,
quiet-panel, section-eyebrow, display-title, page-wrap, app-main) are defined;
ensure button-ghost and button-primary exist as modifier classes (not only as
combined selectors) since PlaylistFormDialog uses them as separate class tokens
(e.g., "button button-ghost"), and if only combined selectors like
".button.button-ghost" are present change or add standalone ".button-ghost" and
".button-primary" rules to override colors/borders while keeping .button as the
base; finally, add a short comment or README note in the styles file that
utility classes (px-4, mx-auto, max-w-md, gap-2, text-4xl, font-bold, etc.) come
from Tailwind (or another generator) and are intentionally not declared in
styles.css.
In `@web/src/routes/_authed.settings.tsx`:
- Around line 1-124: Prettier formatting failed for this file; run the formatter
(eg. `prettier --write .` or use your editor's auto-format) and re-stage the
updated file so the diff for SettingsPage / AccountCard / formatCreatedAt
matches the repo style; then commit and push the formatted changes to fix the CI
check.
In `@web/src/routes/sign-in.tsx`:
- Around line 1-180: Prettier formatting failed for this file; run a formatter
(e.g. run `prettier --write` on the project or this file) or use your editor's
auto-format to fix style issues in the SignIn component and related exports
(Route, safeContinueTarget), then stage and commit the modified file and push
the branch so the CI formatting check passes. Ensure you don't introduce
functional changes—only formatting—before committing.
In `@web/src/routes/sign-up.tsx`:
- Around line 1-159: Prettier formatting failed for this file; run your
formatter (e.g. prettier --write) or use your editor's auto-format on the SignUp
component file to fix whitespace/format issues so the CI check passes; focus on
formatting the exported SignUp function and surrounding constants (MIN_PASSWORD,
MAX_PASSWORD) and ensure JSX (form, inputs, buttons) is properly formatted to
match the project's Prettier config.
🪄 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: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: e006b31f-ea1b-4048-851a-bfe59d4a563b
📒 Files selected for processing (27)
web/src/components/DeletePlaylistDialog.tsxweb/src/components/Footer.tsxweb/src/components/Header.tsxweb/src/components/OAuthButtons.tsxweb/src/components/PlayableTrackList.tsxweb/src/components/PlayerBar.tsxweb/src/components/PlaylistFormDialog.tsxweb/src/components/ThemePicker.tsxweb/src/components/ThemeToggle.tsxweb/src/components/TrackFilterBar.tsxweb/src/routes/_authed.profiles.$profileId.libraries.$libraryId.albums.$albumId.tsxweb/src/routes/_authed.profiles.$profileId.libraries.$libraryId.albums.tsxweb/src/routes/_authed.profiles.$profileId.libraries.$libraryId.artists.$artistId.tsxweb/src/routes/_authed.profiles.$profileId.libraries.$libraryId.artists.tsxweb/src/routes/_authed.profiles.$profileId.libraries.$libraryId.tsxweb/src/routes/_authed.profiles.$profileId.playlists.$playlistId.tsxweb/src/routes/_authed.profiles.$profileId.playlists.tsxweb/src/routes/_authed.profiles.$profileId.tsxweb/src/routes/_authed.profiles.tsxweb/src/routes/_authed.settings.tsxweb/src/routes/about.tsxweb/src/routes/desktop-login.tsxweb/src/routes/index.tsxweb/src/routes/p.$token.tsxweb/src/routes/sign-in.tsxweb/src/routes/sign-up.tsxweb/src/styles.css
Signed-off-by: InstaZDLL <github.105mh@8shield.net>
Signed-off-by: InstaZDLL <github.105mh@8shield.net>
There was a problem hiding this comment.
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 `@web/src/styles.css`:
- Around line 27-43: The :root hardcodes --accent-* and --color-surface-* tokens
which duplicates the token source generated by themeCssDeclarations (SSR in
ThemeStyle) and applied via applyTheme in ThemeProvider; remove these hardcoded
declarations from web/src/styles.css so the app relies on the canonical tokens,
or if a local fallback is required keep them only as a clearly labeled
DEFAULT_THEME_ID fallback block and document/sync values with the design-tokens
source; update comments to reference themeCssDeclarations, ThemeStyle,
applyTheme and DEFAULT_THEME_ID so future maintainers know the single source of
truth.
🪄 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: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 7724b20f-0c45-419a-ba67-b0e472e2201c
📒 Files selected for processing (9)
web/src/components/PlayableTrackList.tsxweb/src/components/PlaylistFormDialog.tsxweb/src/routes/__root.tsxweb/src/routes/_authed.profiles.$profileId.playlists.$playlistId.tsxweb/src/routes/_authed.settings.tsxweb/src/routes/p.$token.tsxweb/src/routes/sign-in.tsxweb/src/routes/sign-up.tsxweb/src/styles.css
Signed-off-by: InstaZDLL <github.105mh@8shield.net>
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
web/src/routes/_authed.profiles.tsx (1)
61-61: 🧹 Nitpick | 🔵 Trivial | 💤 Low valueSimplification mineure : indexation de string directe plutôt que
Array.from().L'expression
Array.from(p.name.trim())[0]?.toUpperCase() ?? 'P'fonctionne, mais crée un tableau intermédiaire inutile. Les strings sont déjà itérables en JavaScript, doncp.name.trim()[0]?.toUpperCase() ?? 'P'est plus direct.♻️ Refactorisation proposée
- {Array.from(p.name.trim())[0]?.toUpperCase() ?? 'P'} + {p.name.trim()[0]?.toUpperCase() ?? 'P'}🤖 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 `@web/src/routes/_authed.profiles.tsx` at line 61, Remplace l'utilisation inutile d'Array.from dans le JSX avatar initial par un accès direct au caractère : change l'expression Array.from(p.name.trim())[0]?.toUpperCase() ?? 'P' pour utiliser p.name.trim()[0]?.toUpperCase() ?? 'P' afin d'éviter de créer un tableau intermédiaire (localise la modification autour de l'endroit où l'expression actuelle est rendue).
🤖 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 `@web/src/routes/_authed.profiles.tsx`:
- Line 33: The Tailwind v4 syntax for arbitrary CSS variables should use the
paren form (e.g. text-(--sea-ink)) instead of the bracket + var(...) form;
update the h1 in the JSX (the element with className "display-title text-4xl
font-bold text-[var(--sea-ink)]") to use text-(--sea-ink) and similarly replace
other usages like text-[var(--sea-ink-soft)], bg-[var(--accent-700)],
bg-[var(--accent-100)] across the codebase (including
web/src/routes/_authed.profiles.tsx, desktop-login.tsx, sign-in.tsx,
sign-up.tsx, about.tsx, index.tsx) to the new form so Tailwind v4 parses them
unambiguously. Ensure you only change the className tokens (preserve other
classes/spacing) and run the Tailwind build to verify no remaining
text-[var(...)] occurrences.
---
Outside diff comments:
In `@web/src/routes/_authed.profiles.tsx`:
- Line 61: Remplace l'utilisation inutile d'Array.from dans le JSX avatar
initial par un accès direct au caractère : change l'expression
Array.from(p.name.trim())[0]?.toUpperCase() ?? 'P' pour utiliser
p.name.trim()[0]?.toUpperCase() ?? 'P' afin d'éviter de créer un tableau
intermédiaire (localise la modification autour de l'endroit où l'expression
actuelle est rendue).
🪄 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: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 5d1c78eb-cd28-4bd5-83b1-6e56653c533d
📒 Files selected for processing (10)
web/src/components/Footer.tsxweb/src/components/Header.tsxweb/src/components/PlayerBar.tsxweb/src/routes/_authed.profiles.$profileId.libraries.$libraryId.albums.$albumId.tsxweb/src/routes/_authed.profiles.$profileId.libraries.$libraryId.artists.$artistId.tsxweb/src/routes/_authed.profiles.$profileId.libraries.$libraryId.tsxweb/src/routes/_authed.profiles.tsxweb/src/routes/about.tsxweb/src/routes/index.tsxweb/src/styles.css
Signed-off-by: InstaZDLL <github.105mh@8shield.net>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Validation
Summary by CodeRabbit