React Review Audit

Fix the following React Review diagnostics in my codebase.

## Warnings (52)

1. [warning] nextjs-no-client-side-redirect — components/SearchInput.tsx:26
   router.push() in useEffect — use redirect() from next/navigation or handle navigation in an event handler

2. [warning] react-compiler-destructure-method — components/SearchInput.tsx:26
   Destructure for clarity: `const { push } = useRouter()` then call `push(...)` directly — easier for React Compiler to memoize and clearer about which methods this component depends on

3. [warning] nextjs-missing-metadata — app/liked/page.tsx:1
   Page without metadata or generateMetadata export — hurts SEO

4. [warning] nextjs-image-missing-sizes — app/liked/page.tsx:36
   next/image with fill but no sizes — the browser downloads the largest image. Add a sizes attribute for responsive behavior

5. [warning] design-no-bold-heading — app/liked/page.tsx:48
   font-bold on <h1> crushes counter shapes at display sizes — use font-semibold (600) or font-medium (500)

6. [warning] click-events-have-key-events — components/PlayerContent.tsx:120
   Enforce a clickable non-interactive element has at least one keyboard event listener.

7. [warning] click-events-have-key-events — components/PlayerContent.tsx:160
   Enforce a clickable non-interactive element has at least one keyboard event listener.

8. [warning] no-static-element-interactions — components/PlayerContent.tsx:120
   Static HTML elements with event handlers require a role.

9. [warning] no-static-element-interactions — components/PlayerContent.tsx:160
   Static HTML elements with event handlers require a role.

10. [warning] design-no-redundant-size-axes — components/PlayerContent.tsx:122
   w-10 h-10 → use the shorthand size-10 (Tailwind v3.4+)

11. [warning] design-no-redundant-size-axes — components/PlayerContent.tsx:162
   w-10 h-10 → use the shorthand size-10 (Tailwind v3.4+)

12. [warning] no-pure-black-background — components/Player.tsx:20
   Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

13. [warning] nextjs-no-client-side-redirect — app/liked/components/LikedContent.tsx:26
   router.replace() in useEffect — use redirect() from next/navigation or handle navigation in an event handler

14. [warning] react-compiler-destructure-method — app/liked/components/LikedContent.tsx:26
   Destructure for clarity: `const { replace } = useRouter()` then call `replace(...)` directly — easier for React Compiler to memoize and clearer about which methods this component depends on

15. [warning] design-no-redundant-size-axes — components/Modal.tsx:77
   w-[25px] h-[25px] → use the shorthand size-[25px] (Tailwind v3.4+)

16. [warning] no-react19-deprecated-apis — hooks/useUser.tsx:1
   useContext is superseded by `use()` on React 19+ — `use()` reads context conditionally inside hooks, branches, and loops; switch to `import { use } from 'react'`

17. [warning] no-cascading-set-state — hooks/useUser.tsx:46
   6 setState calls in a single useEffect — consider using useReducer or deriving state

18. [warning] server-sequential-independent-await — app/layout.tsx:29
   Sequential `await` without a data dependency on the previous result — wrap the independent calls in `Promise.all([...])` so they race instead of waterfalling

19. [warning] click-events-have-key-events — components/MediaItem.tsx:30
   Enforce a clickable non-interactive element has at least one keyboard event listener.

20. [warning] no-static-element-interactions — components/MediaItem.tsx:30
   Static HTML elements with event handlers require a role.

21. [warning] no-generic-handler-names — components/MediaItem.tsx:31
   Non-descriptive handler name "handleClick" — name should describe what it does, not when it runs

22. [warning] nextjs-image-missing-sizes — components/MediaItem.tsx:52
   next/image with fill but no sizes — the browser downloads the largest image. Add a sizes attribute for responsive behavior

23. [warning] rerender-state-only-in-handlers — providers/ModalProvider.tsx:16
   useState "isMounted" is updated but never read in the component's return — use useRef so updates don't trigger re-renders

24. [warning] rendering-hydration-no-flicker — providers/ModalProvider.tsx:18
   useEffect(setState, []) on mount causes a flash — consider useSyncExternalStore or suppressHydrationWarning

25. [warning] react-compiler-destructure-method — components/ListItem.tsx:30
   Destructure for clarity: `const { push } = useRouter()` then call `push(...)` directly — easier for React Compiler to memoize and clearer about which methods this component depends on

26. [warning] nextjs-image-missing-sizes — components/ListItem.tsx:52
   next/image with fill but no sizes — the browser downloads the largest image. Add a sizes attribute for responsive behavior

27. [warning] react-compiler-destructure-method — components/LikeButton.tsx:84
   Destructure for clarity: `const { refresh } = useRouter()` then call `refresh(...)` directly — easier for React Compiler to memoize and clearer about which methods this component depends on

28. [warning] no-react19-deprecated-apis — components/Input.tsx:1
   forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

29. [warning] react-compiler-destructure-method — components/Header.tsx:37
   Destructure for clarity: `const { refresh } = useRouter()` then call `refresh(...)` directly — easier for React Compiler to memoize and clearer about which methods this component depends on

30. [warning] no-pure-black-background — components/Header.tsx:56
   Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

31. [warning] react-compiler-destructure-method — components/Header.tsx:57
   Destructure for clarity: `const { back } = useRouter()` then call `back(...)` directly — easier for React Compiler to memoize and clearer about which methods this component depends on

32. [warning] no-pure-black-background — components/Header.tsx:71
   Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

33. [warning] react-compiler-destructure-method — components/Header.tsx:72
   Destructure for clarity: `const { forward } = useRouter()` then call `forward(...)` directly — easier for React Compiler to memoize and clearer about which methods this component depends on

34. [warning] react-compiler-destructure-method — components/Header.tsx:89
   Destructure for clarity: `const { push } = useRouter()` then call `push(...)` directly — easier for React Compiler to memoize and clearer about which methods this component depends on

35. [warning] react-compiler-destructure-method — components/Header.tsx:105
   Destructure for clarity: `const { push } = useRouter()` then call `push(...)` directly — easier for React Compiler to memoize and clearer about which methods this component depends on

36. [warning] react-compiler-destructure-method — components/Header.tsx:131
   Destructure for clarity: `const { push } = useRouter()` then call `push(...)` directly — easier for React Compiler to memoize and clearer about which methods this component depends on

37. [warning] no-react19-deprecated-apis — components/Button.tsx:1
   forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

38. [warning] rendering-usetransition-loading — hooks/useGetSongById.ts:8
   useState for "isLoading" — if this guards a state transition (not an async fetch), consider useTransition instead

39. [warning] no-cascading-set-state — hooks/useGetSongById.ts:12
   4 setState calls in a single useEffect — consider using useReducer or deriving state

40. [warning] nextjs-no-client-side-redirect — app/account/components/AccountContent.tsx:18
   router.replace() in useEffect — use redirect() from next/navigation or handle navigation in an event handler

41. [warning] react-compiler-destructure-method — app/account/components/AccountContent.tsx:18
   Destructure for clarity: `const { replace } = useRouter()` then call `replace(...)` directly — easier for React Compiler to memoize and clearer about which methods this component depends on

42. [warning] rendering-usetransition-loading — components/UploadModal.tsx:18
   useState for "isLoading" — if this guards a state transition (not an async fetch), consider useTransition instead

43. [warning] react-compiler-destructure-method — components/UploadModal.tsx:109
   Destructure for clarity: `const { refresh } = useRouter()` then call `refresh(...)` directly — easier for React Compiler to memoize and clearer about which methods this component depends on

44. [warning] no-effect-event-handler — components/AuthModal.tsx:23
   useEffect simulating an event handler — move logic to an actual event handler instead

45. [warning] react-compiler-destructure-method — components/AuthModal.tsx:25
   Destructure for clarity: `const { refresh } = useRouter()` then call `refresh(...)` directly — easier for React Compiler to memoize and clearer about which methods this component depends on

46. [warning] nextjs-missing-metadata — app/(site)/page.tsx:1
   Page without metadata or generateMetadata export — hurts SEO

47. [warning] click-events-have-key-events — components/SongItem.tsx:22
   Enforce a clickable non-interactive element has at least one keyboard event listener.

48. [warning] no-static-element-interactions — components/SongItem.tsx:22
   Static HTML elements with event handlers require a role.

49. [warning] nextjs-image-missing-sizes — components/SongItem.tsx:51
   next/image with fill but no sizes — the browser downloads the largest image. Add a sizes attribute for responsive behavior

50. [warning] nextjs-missing-metadata — app/search/page.tsx:1
   Page without metadata or generateMetadata export — hurts SEO

51. [warning] server-sequential-independent-await — actions/getLikedSongs.ts:14
   Sequential `await` without a data dependency on the previous result — wrap the independent calls in `Promise.all([...])` so they race instead of waterfalling

52. [warning] no-pure-black-background — components/Sidebar.tsx:55
   Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)