refactor: split monolith into 3 microservices (frontend, backend, discord-gateway)

- Extract services into services/{frontend,backend,discord-gateway} - Create packages/shared/ for shared logger, errors, utils, types - Setup Modular MVC pattern in backend (controller→service→repository) - Setup event-driven architecture in discord-gateway with Redis pub/sub - Move Docker files to infra/docker/ with per-service Dockerfiles - Update docker-compose.yml to use Traefik-only routing (no port exposes) - Update GitHub Actions deploy workflow for multi-service matrix build - Fix all import paths and resolve type errors across all services - All 3 services pass tsc --noEmit clean Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-01 21:44:29 +07:00
parent bda8304bb9
commit c48a0c5e3b
193 changed files with 16879 additions and 1158 deletions
@@ -0,0 +1,81 @@
+import { Music2, SkipForward, Square, Volume2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button, Input } from "../../../shared/ui";
+
+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>
+  );
+}