feat(frontend): add basic frontend

services/frontend/src/features/liveStream/ui/WsStatusBadge.tsx

@@ -0,0 +1,15 @@
+import { Badge } from "../../../shared/ui/badge";
+import type { WsStatus } from "../model/types";
+
+const toneByStatus: Record<WsStatus, string> = {
+  connecting: "bg-slate-600",
+  open: "bg-emerald-600",
+  reconnecting: "bg-amber-600",
+  disconnected: "bg-rose-600",
+};
+
+export function WsStatusBadge({ status }: { status: WsStatus }) {
+  return (
+    <Badge className={`${toneByStatus[status]} text-white`}>ws: {status}</Badge>
+  );
+}

services/frontend/src/features/liveStream/ui/useLiveStream.ts

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import { useLiveStreamStore } from "../model/liveStream.store";
+
+export function useLiveStream(options?: { loadLatest?: boolean }) {
+  const connect = useLiveStreamStore((s) => s.connect);
+  const disconnect = useLiveStreamStore((s) => s.disconnect);
+  const loadLatest = useLiveStreamStore((s) => s.loadLatest);
+
+  useEffect(() => {
+    if (options?.loadLatest) void loadLatest(100);
+    connect();
+    return () => disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}