feat: drag&drop upload, default 1h links, Media-Tool mit Kino-Stub

frontend/src/tools/media.jsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { useS } from '../lib.js';
+
+const TABS = [
+  { id: 'kino', label: '🎬 Kino' },
+];
+
+export default function Media() {
+  const S = useS();
+  const [tab, setTab] = useState('kino');
+
+  return (
+    <div style={{ padding: '0 0 40px' }}>
+      {/* Tab-Bar */}
+      <div style={{ display: 'flex', gap: 8, marginBottom: 24, flexWrap: 'wrap' }}>
+        {TABS.map(t => (
+          <button
+            key={t.id}
+            onClick={() => setTab(t.id)}
+            style={{
+              padding: '7px 16px',
+              borderRadius: 8,
+              border: tab === t.id ? '1px solid #4ecdc4' : '1px solid rgba(255,255,255,0.12)',
+              background: tab === t.id ? 'rgba(78,205,196,0.15)' : 'rgba(255,255,255,0.04)',
+              color: tab === t.id ? '#4ecdc4' : 'rgba(255,255,255,0.6)',
+              cursor: 'pointer',
+              fontFamily: "'Courier New', monospace",
+              fontSize: 13,
+              fontWeight: tab === t.id ? 700 : 400,
+              transition: 'all 0.15s',
+            }}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      {tab === 'kino' && <KinoTab S={S} />}
+    </div>
+  );
+}
+
+function KinoTab({ S }) {
+  return (
+    <div style={{
+      background: 'rgba(255,255,255,0.03)',
+      border: '1px solid rgba(255,255,255,0.08)',
+      borderRadius: 12,
+      padding: '32px 24px',
+      textAlign: 'center',
+      color: 'rgba(255,255,255,0.35)',
+      fontFamily: "'Courier New', monospace",
+      fontSize: 14,
+    }}>
+      <div style={{ fontSize: 40, marginBottom: 12 }}>🎬</div>
+      <div style={{ fontSize: 15, color: 'rgba(255,255,255,0.5)', marginBottom: 8 }}>Kino-Feature</div>
+      <div style={{ fontSize: 12 }}>Wird implementiert – TMDb API-Key erforderlich</div>
+    </div>
+  );
+}