clean: initial commit ohne Secrets

web/src/App.tsx

@@ -0,0 +1,94 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { fetchChannels, fetchSounds, playSound } from './api';
+import type { VoiceChannelInfo, Sound } from './types';
+
+export default function App() {
+  const [sounds, setSounds] = useState<Sound[]>([]);
+  const [channels, setChannels] = useState<VoiceChannelInfo[]>([]);
+  const [query, setQuery] = useState('');
+  const [selected, setSelected] = useState<string>('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const [s, c] = await Promise.all([fetchSounds(), fetchChannels()]);
+        setSounds(s);
+        setChannels(c);
+        if (c[0]) setSelected(`${c[0].guildId}:${c[0].channelId}`);
+      } catch (e: any) {
+        setError(e?.message || 'Fehler beim Laden');
+      }
+    })();
+
+    const interval = setInterval(async () => {
+      try {
+        const s = await fetchSounds(query);
+        setSounds(s);
+      } catch {}
+    }, 10000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return sounds;
+    return sounds.filter((s) => s.name.toLowerCase().includes(q));
+  }, [sounds, query]);
+
+  async function handlePlay(name: string) {
+    setError(null);
+    if (!selected) return setError('Bitte einen Voice-Channel auswählen');
+    const [guildId, channelId] = selected.split(':');
+    try {
+      setLoading(true);
+      await playSound(name, guildId, channelId);
+    } catch (e: any) {
+      setError(e?.message || 'Play fehlgeschlagen');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="container">
+      <header>
+        <h1>Discord Soundboard</h1>
+        <p>Schicke dem Bot per privater Nachricht eine .mp3 — neue Sounds erscheinen automatisch.</p>
+      </header>
+
+      <section className="controls">
+        <input
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Nach Sounds suchen..."
+          aria-label="Suche"
+        />
+        <select value={selected} onChange={(e) => setSelected(e.target.value)} aria-label="Voice-Channel">
+          {channels.map((c) => (
+            <option key={`${c.guildId}:${c.channelId}`} value={`${c.guildId}:${c.channelId}`}>
+              {c.guildName} – {c.channelName}
+            </option>
+          ))}
+        </select>
+      </section>
+
+      {error && <div className="error">{error}</div>}
+
+      <section className="grid">
+        {filtered.map((s) => (
+          <button key={s.fileName} className="sound" onClick={() => handlePlay(s.name)} disabled={loading}>
+            {s.name}
+          </button>
+        ))}
+        {filtered.length === 0 && <div className="hint">Keine Sounds gefunden.</div>}
+      </section>
+    </div>
+  );
+}
+
+
+
+
+

web/src/api.ts

@@ -0,0 +1,34 @@
+import type { Sound, VoiceChannelInfo } from './types';
+
+const API_BASE = import.meta.env.VITE_API_BASE_URL || '/api';
+
+export async function fetchSounds(q?: string): Promise<Sound[]> {
+  const url = new URL(`${API_BASE}/sounds`, window.location.origin);
+  if (q) url.searchParams.set('q', q);
+  const res = await fetch(url.toString());
+  if (!res.ok) throw new Error('Fehler beim Laden der Sounds');
+  return res.json();
+}
+
+export async function fetchChannels(): Promise<VoiceChannelInfo[]> {
+  const res = await fetch(`${API_BASE}/channels`);
+  if (!res.ok) throw new Error('Fehler beim Laden der Channels');
+  return res.json();
+}
+
+export async function playSound(soundName: string, guildId: string, channelId: string): Promise<void> {
+  const res = await fetch(`${API_BASE}/play`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ soundName, guildId, channelId })
+  });
+  if (!res.ok) {
+    const data = await res.json().catch(() => ({}));
+    throw new Error(data?.error || 'Play fehlgeschlagen');
+  }
+}
+
+
+
+
+

web/src/main.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './styles.css';
+
+const container = document.getElementById('root')!;
+createRoot(container).render(<App />);
+
+
+
+
+

web/src/styles.css

@@ -0,0 +1,24 @@
+:root { color-scheme: dark light; }
+* { box-sizing: border-box; }
+body { margin: 0; font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: linear-gradient(120deg, #1e3c72, #2a5298); min-height: 100vh; color: #111; }
+
+.container { max-width: 1000px; margin: 0 auto; padding: 24px; }
+header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
+header h1 { margin: 0; }
+
+.controls { display: flex; gap: 12px; margin-bottom: 16px; }
+.controls input { flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.9); }
+.controls select { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.9); }
+
+.error { background: #ffefef; color: #900; border: 1px solid #fcc; padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; }
+
+.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
+.sound { padding: 18px; border-radius: 14px; border: 0; background: linear-gradient(135deg, #ff8a00, #e52e71); color: #fff; cursor: pointer; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.2); letter-spacing: .2px; }
+.sound:hover { filter: brightness(1.05); }
+.sound:disabled { opacity: 0.6; cursor: not-allowed; }
+
+.hint { opacity: .7; padding: 24px 0; }
+
+
+
+

web/src/types.ts

@@ -0,0 +1,16 @@
+export type Sound = {
+  fileName: string;
+  name: string;
+};
+
+export type VoiceChannelInfo = {
+  guildId: string;
+  guildName: string;
+  channelId: string;
+  channelName: string;
+};
+
+
+
+
+