feat(web): add typed API client auth

refs #81

web/src/api/useChannelsQuery.ts

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+import { ApiError } from './client';
+import { getChannels, type ChannelSummary } from './channels';
+
+type ChannelsQueryState =
+  | { channels: ChannelSummary[]; error: null; status: 'success' }
+  | { channels: null; error: string; status: 'error' }
+  | { channels: null; error: null; status: 'loading' };
+
+export function useChannelsQuery(): ChannelsQueryState {
+  const [state, setState] = useState<ChannelsQueryState>({
+    channels: null,
+    error: null,
+    status: 'loading'
+  });
+
+  useEffect(() => {
+    let active = true;
+
+    getChannels()
+      .then((channels) => {
+        if (active) {
+          setState({ channels, error: null, status: 'success' });
+        }
+      })
+      .catch((error: unknown) => {
+        if (active) {
+          setState({ channels: null, error: messageFromError(error), status: 'error' });
+        }
+      });
+
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  return state;
+}
+
+function messageFromError(error: unknown): string {
+  if (error instanceof ApiError) {
+    return error.detail ?? error.message;
+  }
+
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return 'Unable to load channels';
+}