feat: split contexts, providers and hooks

src/components/Kitty.tsx

@@ -6,8 +6,9 @@ import {
   useCallback,
   useId,
 } from "react";
-import { KittyContext, type KittyContextProps } from "../context/KittyContext";
-import { useApp } from "../context/AppContext";
+import { type KittyContextProps } from "~/context/KittyContext";
+import { useApp } from "~/hooks/useApp";
+import { KittyProvider } from "~/providers/KittyProvider";
 
 export const CHAR_WIDTH = 12;
 export const CHAR_HEIGHT = 26;
@@ -51,7 +52,7 @@ export const Kitty = (props: {
 
     setWidth(`${width}px`);
     setHeight(`${height}px`);
-    setContext(ctx => ({ ...(ctx ?? { active: false }), rows, cols }));
+    setContext((ctx) => ({ ...(ctx ?? { active: false }), rows, cols }));
   }, []);
 
   useEffect(() => {
@@ -76,9 +77,9 @@ export const Kitty = (props: {
           lineHeight: `${CHAR_HEIGHT}px`,
           ...(activeKitty === id
             ? {
-                borderColor: "#cdd6f4",
-                animationDuration: "200ms",
-              }
+              borderColor: "#cdd6f4",
+              animationDuration: "200ms",
+            }
             : {}),
         }}
         ref={container}
@@ -87,9 +88,7 @@ export const Kitty = (props: {
           className="whitespace-pre"
           style={{ backdropFilter: "blur(2px)", width, height }}
         >
-          <KittyContext.Provider value={context}>
-            {props.children}
-          </KittyContext.Provider>
+          <KittyProvider value={context}>{props.children}</KittyProvider>
         </div>
       </div>
     </div>

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);

src/components/Waybar/Widgets/WaybarRAMWidget.tsx

@@ -18,7 +18,7 @@ export const WaybarRAMWidget = (props: {
   useEffect(() => {
     const interval = setInterval(() => {
       const offset = randomMinMax(-props.variation, props.variation + 1);
-      setUsage(x => clamp(x + offset, props.min, props.max));
+      setUsage((x) => clamp(x + offset, props.min, props.max));
     }, props.frequency);
 
     return () => clearInterval(interval);