feat: split contexts, providers and hooks

src/components/Music/Cava.tsx

@@ -5,8 +5,9 @@ import {
   useRef,
   useState,
 } from "react";
-import { type InnerKittyProps, useKitty } from "../../context/KittyContext";
+import { type InnerKittyProps } from "../../context/KittyContext";
 import { CHAR_WIDTH } from "../Kitty";
+import { useKitty } from "~/hooks/useKitty";
 
 export const Cava = (props: { audio: RefObject<HTMLAudioElement> }) => {
   const kitty = useKitty();

src/components/Music/SpotifyPlayer.tsx

@@ -2,7 +2,8 @@ import { useState } from "react";
 import { formatMMSS } from "../../utils/time";
 import { CharArray } from "../../utils/string";
 import { CHAR_HEIGHT, CHAR_WIDTH } from "../Kitty";
-import { type InnerKittyProps, useKitty } from "../../context/KittyContext";
+import { type InnerKittyProps } from "../../context/KittyContext";
+import { useKitty } from "~/hooks/useKitty";
 
 export const SpotifyPlayer = (props: {
   title: string;

src/components/Music/index.tsx

@@ -30,9 +30,9 @@ export const Music = () => {
     if (metadata) return;
 
     void fetch(song)
-      .then(r => r.blob())
-      .then(b => parseBlob(b))
-      .then(m => {
+      .then((r) => r.blob())
+      .then((b) => parseBlob(b))
+      .then((m) => {
         if (!audio.current) return;
 
         setMetadata(m);