feat: split contexts, providers and hooks

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;