feat: split contexts, providers and hooks

src/App.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Kitty } from "./components/Kitty";
-import { AppProvider } from "./context/AppContext";
+import { AppProvider } from "./providers/AppProvider";
 import { Music } from "./components/Music";
 import { Nvim } from "./components/Nvim";
 

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

src/context/AppContext.tsx

@@ -1,22 +1,5 @@
-import { type ReactNode, createContext, useContext, useState } from "react";
+import { createContext } from "react";
 
 export const AppContext = createContext<
   { activeKitty: string; setActiveKitty: (value: string) => void } | undefined
 >(undefined);
-
-export const useApp = () => {
-  const app = useContext(AppContext);
-  if (!app) throw new Error("`useApp` used outside AppContext");
-
-  return app;
-};
-
-export const AppProvider = (props: { children?: ReactNode }) => {
-  const [activeKitty, setActiveKitty] = useState(":r0:");
-
-  return (
-    <AppContext.Provider value={{ activeKitty, setActiveKitty }}>
-      {props.children}
-    </AppContext.Provider>
-  );
-};

src/context/KittyContext.tsx

@@ -1,11 +1,9 @@
-import { createContext, useContext } from "react";
+import { createContext } from "react";
 
 export const KittyContext = createContext<KittyContextProps | undefined>(
   undefined,
 );
 
-export const useKitty = () => useContext(KittyContext);
-
 export type KittyContextProps = {
   rows: number;
   cols: number;

src/hooks/useApp.ts

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { AppContext } from "~/context/AppContext";
+
+export const useApp = () => {
+  const app = useContext(AppContext);
+  if (!app) throw new Error("`useApp` used outside AppContext");
+
+  return app;
+};

src/hooks/useKitty.ts

@@ -0,0 +1,4 @@
+import { useContext } from "react";
+import { KittyContext } from "~/context/KittyContext";
+
+export const useKitty = () => useContext(KittyContext);

src/providers/AppProvider.tsx

@@ -0,0 +1,12 @@
+import { type ReactNode, useState } from "react";
+import { AppContext } from "~/context/AppContext";
+
+export const AppProvider = (props: { children?: ReactNode }) => {
+  const [activeKitty, setActiveKitty] = useState(":r0:");
+
+  return (
+    <AppContext.Provider value={{ activeKitty, setActiveKitty }}>
+      {props.children}
+    </AppContext.Provider>
+  );
+};

src/providers/KittyProvider.tsx

@@ -0,0 +1,3 @@
+import { KittyContext } from "~/context/KittyContext";
+
+export const KittyProvider = KittyContext.Provider;