chore: use stylesheet instead of inline style

[roitium]

Summary by CodeRabbit

Release Notes

This release includes internal code improvements and maintenance updates with no user-facing changes. The engineering team has optimized styling architecture throughout the application to improve code maintainability and performance. Additionally, minor workflow configuration updates have been made to the build system.

• Chores
  • Code quality improvements and refactoring for better application maintainability

[safedep]

SafeDep Report Summary

No dependency changes detected. Nothing to scan.

_{This report is generated by SafeDep Github App}

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

This pull request systematically refactors inline React Native style objects across the codebase to centralized StyleSheet-based approaches. The migration affects workflow configuration files, application pages, UI components, and feature modules—approximately 70 files—replacing inline style={{ ... }} properties with predefined style references from StyleSheet declarations.

Changes

Cohort / File(s)	Summary
Workflow Configuration .github/workflows/build.yml, .github/workflows/pr-checks.yml	Changed double-quoted YAML string literals to single-quoted for consistency; no semantic changes
App Pages src/app/(tabs)/index.tsx, src/app/(tabs)/library/[tab].tsx, src/app/(tabs)/settings.tsx, src/app/_layout.tsx, src/app/download.tsx, src/app/leaderboard.tsx, src/app/player.tsx, src/app/test.tsx	Introduced centralized StyleSheet imports and replaced inline container, header, list, and layout styles with named style references
Playlist Pages src/app/playlist/local/[id].tsx, src/app/playlist/remote/collection/[id].tsx, src/app/playlist/remote/favorite/[id].tsx, src/app/playlist/remote/multipage/[bvid].tsx, src/app/playlist/remote/search-result/fav/[query].tsx, src/app/playlist/remote/search-result/global/[query].tsx, src/app/playlist/remote/toview.tsx, src/app/playlist/remote/uploader/[mid].tsx	Replaced inline styles for container, list, search bar, footer loading, empty state, and now-playing bar positioning with StyleSheet-based styles
Core Components src/components/ErrorBoundary.tsx, src/components/NowPlayingBar.tsx, src/components/common/AnimatedModalOverlay.tsx, src/components/common/CoverWithPlaceHolder.tsx, src/components/common/FunctionalMenu.tsx, src/components/providers.tsx	Migrated inline styles to StyleSheet declarations for error display, modal overlays, cover images, and root provider layout
Modal Components src/components/modals/app/UpdateAppModal.tsx, src/components/modals/app/WelcomeModal.tsx, src/components/modals/bilibili/AddVideoToBilibiliFavModal.tsx, src/components/modals/edit-metadata/editPlaylistMetadataModal.tsx, src/components/modals/edit-metadata/editTrackMetadataModal.tsx, src/components/modals/login/CookieLoginModal.tsx, src/components/modals/login/QRCodeLoginModal.tsx, src/components/modals/lyrics/EditLyrics.tsx, src/components/modals/lyrics/ManualSearchLyrics.tsx, src/components/modals/player/SleepTimerModal.tsx, src/components/modals/playlist/BatchAddTracksToLocalPlaylist.tsx, src/components/modals/playlist/CreatePlaylistModal.tsx, src/components/modals/playlist/DuplicateLocalPlaylistModal.tsx, src/components/modals/playlist/UpdateTrackLocalPlaylistsModal.tsx	Centralized dialog content, text input, action container, and loading state styles via StyleSheet
Toast & Feature Components src/components/toast/ToastConfig.tsx, src/features/downloads/DownloadHeader.tsx, src/features/downloads/DownloadTaskItem.tsx, src/features/home/SearchSuggestions.tsx	Introduced base toast styling consolidation and replaced download/search UI inline styles with StyleSheet definitions
Library Collection Components src/features/library/collection/CollectionList.tsx, src/features/library/collection/CollectionListItem.tsx, src/features/library/favorite/FavoriteFolderList.tsx, src/features/library/favorite/FavoriteFolderListItem.tsx, src/features/library/local/LocalPlaylistItem.tsx, src/features/library/local/LocalPlaylistList.tsx, src/features/library/multipage/MultiPageVideosItem.tsx, src/features/library/multipage/MultiPageVideosList.tsx	Replaced inline styles for list items, headers, and empty states with centralized StyleSheet-based layout definitions
Library Shared & Error Handling src/features/library/shared/DataFetchingError.tsx, src/features/library/shared/DataFetchingPending.tsx, src/features/library/shared/TabDisabled.tsx	Migrated error/pending/disabled state UI styling to StyleSheet with dynamic background colors
Player Components src/features/player/components/PlayerControls.tsx, src/features/player/components/PlayerHeader.tsx, src/features/player/components/PlayerLyrics.tsx, src/features/player/components/PlayerMainTab.tsx, src/features/player/components/PlayerSlider.tsx, src/features/player/components/PlayerTrackInfo.tsx	Introduced centralized StyleSheet with controls, header, lyrics item/container, slider, and track info styles; PlayerTrackInfo updated to accept coverRef parameter
Local Playlist Components src/features/playlist/local/components/LocalPlaylistHeader.tsx, src/features/playlist/local/components/LocalPlaylistItem.tsx, src/features/playlist/local/components/LocalTrackList.tsx, src/features/playlist/local/components/PlaylistError.tsx, src/features/playlist/local/components/PlaylistLoading.tsx	Replaced inline header, item container, track list, and loading/error state styles with StyleSheet definitions
Remote Playlist Components src/features/playlist/remote/components/PlaylistError.tsx, src/features/playlist/remote/components/PlaylistHeader.tsx, src/features/playlist/remote/components/PlaylistItem.tsx, src/features/playlist/remote/components/PlaylistLoading.tsx, src/features/playlist/remote/components/RemoteTrackList.tsx	Migrated remote playlist header, item container, footer loading, and empty list styles to centralized StyleSheet approach

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~45 minutes

• PlayerTrackInfo.tsx — Introduces a new coverRef parameter to the component signature; verify integration with parent components and ensure ref forwarding is correct
• NowPlayingBar.tsx — Large style consolidation with numerous new style definitions (progress bar, controls, text containers); verify layout/spacing consistency against design
• PlayerLyrics.tsx — Complex refactoring with many style definitions for lyric items, gradients, and controls; check that animated styles and gradient overlays remain functional
• PlaylistItem.tsx (both local and remote) — Moderate complexity with checkbox opacity handling and style composition via arrays; ensure conditional styling logic remains correct
• Search-result playlist pages — Multiple pages with similar patterns; verify footer loading, empty state, and now-playing bar positioning are applied consistently

Possibly related PRs

• feat: use cursor pagination in local playlist #63 — Introduces or modifies TrackInfo component with cover/placeholder image handling and potential coverRef usage, overlapping with changes to PlayerTrackInfo.tsx
• feat: ToView as a playlist #71 — Modifies src/app/playlist/remote/toview.tsx for ToView page functionality; this PR applies StyleSheet styling to the same file
• feat: lyrics style #70 — Rewrites PlayerLyrics.tsx component logic and signature; this PR refactors its styling, creating potential conflicts or integration points

---

🐰 A style refactor, clean and neat,
From inline code to StyleSheets sweet,
Components now unified with flair, ✨
Consistency blooms everywhere!

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch chore/use-stylesheet

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a4b7630 and 7e665ca.

📒 Files selected for processing (69)

• .github/workflows/build.yml (2 hunks)
• .github/workflows/pr-checks.yml (3 hunks)
• src/app/(tabs)/index.tsx (9 hunks)
• src/app/(tabs)/library/[tab].tsx (4 hunks)
• src/app/(tabs)/settings.tsx (8 hunks)
• src/app/_layout.tsx (3 hunks)
• src/app/download.tsx (4 hunks)
• src/app/leaderboard.tsx (4 hunks)
• src/app/player.tsx (3 hunks)
• src/app/playlist/local/[id].tsx (4 hunks)
• src/app/playlist/remote/collection/[id].tsx (4 hunks)
• src/app/playlist/remote/favorite/[id].tsx (4 hunks)
• src/app/playlist/remote/multipage/[bvid].tsx (4 hunks)
• src/app/playlist/remote/search-result/fav/[query].tsx (5 hunks)
• src/app/playlist/remote/search-result/global/[query].tsx (4 hunks)
• src/app/playlist/remote/toview.tsx (4 hunks)
• src/app/playlist/remote/uploader/[mid].tsx (6 hunks)
• src/app/test.tsx (2 hunks)
• src/components/ErrorBoundary.tsx (2 hunks)
• src/components/NowPlayingBar.tsx (8 hunks)
• src/components/common/AnimatedModalOverlay.tsx (1 hunks)
• src/components/common/CoverWithPlaceHolder.tsx (2 hunks)
• src/components/common/FunctionalMenu.tsx (1 hunks)
• src/components/modals/app/UpdateAppModal.tsx (5 hunks)
• src/components/modals/app/WelcomeModal.tsx (6 hunks)
• src/components/modals/bilibili/AddVideoToBilibiliFavModal.tsx (6 hunks)
• src/components/modals/edit-metadata/editPlaylistMetadataModal.tsx (3 hunks)
• src/components/modals/edit-metadata/editTrackMetadataModal.tsx (3 hunks)
• src/components/modals/login/CookieLoginModal.tsx (3 hunks)
• src/components/modals/login/QRCodeLoginModal.tsx (4 hunks)
• src/components/modals/lyrics/EditLyrics.tsx (4 hunks)
• src/components/modals/lyrics/ManualSearchLyrics.tsx (6 hunks)
• src/components/modals/player/SleepTimerModal.tsx (3 hunks)
• src/components/modals/playlist/BatchAddTracksToLocalPlaylist.tsx (6 hunks)
• src/components/modals/playlist/CreatePlaylistModal.tsx (4 hunks)
• src/components/modals/playlist/DuplicateLocalPlaylistModal.tsx (3 hunks)
• src/components/modals/playlist/UpdateTrackLocalPlaylistsModal.tsx (6 hunks)
• src/components/providers.tsx (4 hunks)
• src/components/toast/ToastConfig.tsx (1 hunks)
• src/features/downloads/DownloadHeader.tsx (3 hunks)
• src/features/downloads/DownloadTaskItem.tsx (4 hunks)
• src/features/home/SearchSuggestions.tsx (5 hunks)
• src/features/library/collection/CollectionList.tsx (4 hunks)
• src/features/library/collection/CollectionListItem.tsx (3 hunks)
• src/features/library/favorite/FavoriteFolderList.tsx (4 hunks)
• src/features/library/favorite/FavoriteFolderListItem.tsx (3 hunks)
• src/features/library/local/LocalPlaylistItem.tsx (4 hunks)
• src/features/library/local/LocalPlaylistList.tsx (3 hunks)
• src/features/library/multipage/MultiPageVideosItem.tsx (3 hunks)
• src/features/library/multipage/MultiPageVideosList.tsx (5 hunks)
• src/features/library/shared/DataFetchingError.tsx (3 hunks)
• src/features/library/shared/DataFetchingPending.tsx (1 hunks)
• src/features/library/shared/TabDisabled.tsx (2 hunks)
• src/features/player/components/PlayerControls.tsx (4 hunks)
• src/features/player/components/PlayerHeader.tsx (3 hunks)
• src/features/player/components/PlayerLyrics.tsx (12 hunks)
• src/features/player/components/PlayerMainTab.tsx (4 hunks)
• src/features/player/components/PlayerSlider.tsx (4 hunks)
• src/features/player/components/PlayerTrackInfo.tsx (4 hunks)
• src/features/playlist/local/components/LocalPlaylistHeader.tsx (8 hunks)
• src/features/playlist/local/components/LocalPlaylistItem.tsx (8 hunks)
• src/features/playlist/local/components/LocalTrackList.tsx (3 hunks)
• src/features/playlist/local/components/PlaylistError.tsx (3 hunks)
• src/features/playlist/local/components/PlaylistLoading.tsx (1 hunks)
• src/features/playlist/remote/components/PlaylistError.tsx (3 hunks)
• src/features/playlist/remote/components/PlaylistHeader.tsx (6 hunks)
• src/features/playlist/remote/components/PlaylistItem.tsx (8 hunks)
• src/features/playlist/remote/components/PlaylistLoading.tsx (1 hunks)
• src/features/playlist/remote/components/RemoteTrackList.tsx (5 hunks)

---

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 and usage tips.}