refactor: split monolithic state into context-based modules

Extract image, desktop, mobile, and config state into separate context
providers to improve modularity and reduce unnecessary re-renders.

Signed-off-by: Sped0n <hi@sped0n.com>

assets/ts/desktop/state.ts

@@ -0,0 +1,96 @@
+import {
+  createComponent,
+  createContext,
+  createSignal,
+  useContext,
+  type Accessor,
+  type JSX,
+  type Setter
+} from 'solid-js'
+import invariant from 'tiny-invariant'
+
+import { useImageState } from '../imageState'
+import { decrement, increment, type Vector } from '../utils'
+
+export interface HistoryItem {
+  i: number
+  x: number
+  y: number
+}
+
+export interface DesktopState {
+  index: Accessor<number>
+  cordHist: Accessor<HistoryItem[]>
+  hoverText: Accessor<string>
+  isOpen: Accessor<boolean>
+  isAnimating: Accessor<boolean>
+  isLoading: Accessor<boolean>
+  navVector: Accessor<Vector>
+}
+
+export type DesktopStateContextType = readonly [
+  DesktopState,
+  {
+    readonly setIndex: Setter<number>
+    readonly incIndex: () => void
+    readonly decIndex: () => void
+    readonly setCordHist: Setter<HistoryItem[]>
+    readonly setHoverText: Setter<string>
+    readonly setIsOpen: Setter<boolean>
+    readonly setIsAnimating: Setter<boolean>
+    readonly setIsLoading: Setter<boolean>
+    readonly setNavVector: Setter<Vector>
+  }
+]
+
+const DesktopStateContext = createContext<DesktopStateContextType>()
+
+export function DesktopStateProvider(props: { children?: JSX.Element }): JSX.Element {
+  const imageState = useImageState()
+
+  const [index, setIndex] = createSignal(-1)
+  const [cordHist, setCordHist] = createSignal<HistoryItem[]>([])
+  const [hoverText, setHoverText] = createSignal('')
+  const [isOpen, setIsOpen] = createSignal(false)
+  const [isAnimating, setIsAnimating] = createSignal(false)
+  const [isLoading, setIsLoading] = createSignal(false)
+  const [navVector, setNavVector] = createSignal<Vector>('none')
+
+  const updateIndex = (stride: 1 | -1): void => {
+    const length = imageState().length
+    if (length <= 0) return
+    setIndex((current) =>
+      stride === 1 ? increment(current, length) : decrement(current, length)
+    )
+  }
+
+  return createComponent(DesktopStateContext.Provider, {
+    value: [
+      { index, cordHist, hoverText, isOpen, isAnimating, isLoading, navVector },
+      {
+        setIndex,
+        incIndex: () => {
+          updateIndex(1)
+        },
+        decIndex: () => {
+          updateIndex(-1)
+        },
+        setCordHist,
+        setHoverText,
+        setIsOpen,
+        setIsAnimating,
+        setIsLoading,
+        setNavVector
+      }
+    ],
+    get children() {
+      return props.children
+    }
+  })
+}
+
+export function useDesktopState(): DesktopStateContextType {
+  const context = useContext(DesktopStateContext)
+  invariant(context, 'undefined desktop context')
+  return context
+}