refactor(frontend): major rebuild — feature-sliced architecture + bug fixes + glass-morphism UI

Architecture: - Feature-sliced directory: entities/, shared/, features/, widgets/ - Consolidated API client (shared/api/client.ts) — all endpoints in one file - Single WebSocket manager (shared/ws/socket.ts) with typed event bus - Extracted hooks: useAudioPlayback, useAudioTransmit, useLocalStorage, useUIState - UI primitives moved to shared/ui/ with barrel export - Added Skeleton, Toast, MobileTabBar components Bug fixes (8/8): 1. useMemo→useEffect in RecordingsSubPanel (async side-effect anti-pattern) 2. ArrayBuffer.slice() before WebSocket send (shared buffer bug) 3. Proper useEffect dependency arrays throughout 4. Stable React keys (no index fallbacks) 5. onReanalyze properly awaited (Promise<void> return) 6. monitorGuild memoized with useMemo 7. localStorage validation with shape checking 8. Deleted duplicate socket logic (ws/client.ts removed) UI polish: - Glass-morphism design tokens (backdrop-blur, translucent cards) - Gradient mesh background with subtle radial overlays - Expandable sidebar + mobile bottom tab bar - Skeleton loading placeholders - Audio visualizer with CSS pulse animation Deleted: src/api/, src/components/, src/hooks/, src/types/, src/ws/, src/lib/ Added: 40 new files across feature-sliced structure Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-01 16:42:36 +07:00
parent 1aab0d1df1
commit f5507e01f6
84 changed files with 2054 additions and 2658 deletions
@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+import { Button, Input } from "../../../shared/ui";
+import { Music2, SkipForward, Square, Volume2 } from "lucide-react";
+
+interface MusicSubPanelProps {
+  volume: number;
+  onVolumeChange: (v: number) => void;
+  onQueue: (source: string) => void;
+  onSkip: () => void;
+  onStop: () => void;
+  loading: boolean;
+}
+
+export function MusicSubPanel({ volume, onVolumeChange, onQueue, onSkip, onStop, loading }: MusicSubPanelProps) {
+  const [source, setSource] = useState("");
+  const safeVolume = Number.isFinite(volume) ? Math.max(0, Math.min(1, volume)) : 1;
+  const [draftVolume, setDraftVolume] = useState(Math.round(safeVolume * 100));
+
+  // Debounced volume — poll every 200ms instead of instant send to avoid flood
+  useEffect(() => {
+    const id = setInterval(() => {
+      const normalized = draftVolume / 100;
+      if (Math.abs(normalized - safeVolume) >= 0.001) onVolumeChange(normalized);
+    }, 200);
+    return () => clearInterval(id);
+  }, [draftVolume, safeVolume, onVolumeChange]);
+
+  const submit = () => { const t = source.trim(); if (!t) return; onQueue(t); setSource(""); };
+
+  return (
+    <div className="space-y-4">
+      <Input
+        value={source}
+        onChange={(e) => setSource(e.target.value)}
+        onKeyDown={(e) => e.key === "Enter" && submit()}
+        placeholder="YouTube URL, Spotify track, or search terms"
+      />
+      <div className="flex items-center gap-3">
+        <Volume2 className="h-4 w-4 shrink-0 text-muted-foreground" />
+        <input
+          type="range"
+          min={0}
+          max={100}
+          step={1}
+          value={draftVolume}
+          onChange={(e) => setDraftVolume(Number(e.target.value))}
+          className="h-2 w-full cursor-pointer accent-primary"
+        />
+        <span className="w-10 shrink-0 text-right text-sm tabular-nums text-muted-foreground">{draftVolume}%</span>
+      </div>
+      <div className="flex flex-wrap gap-2">
+        <Button disabled={loading || !source.trim()} onClick={submit}>
+          <Music2 className="mr-1.5 h-4 w-4" /> Queue
+        </Button>
+        <Button variant="secondary" disabled={loading} onClick={onSkip}>
+          <SkipForward className="mr-1.5 h-4 w-4" /> Skip
+        </Button>
+        <Button variant="destructive" disabled={loading} onClick={onStop}>
+          <Square className="mr-1.5 h-4 w-4" /> Stop
+        </Button>
+      </div>
+    </div>
+  );
+}