feat: profile avatar upload + share_conv_keys rpc + favicon + smtp tweaks

2026-04-19 23:04:03 +02:00
parent ff5ea274b9
commit 0ca29952ba
30 changed files with 3135 additions and 37 deletions
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>ChatApp Redesign — 6 Varianten</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Geist:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Fraunces:wght@600;700;800&family=Archivo+Black&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="styles/base.css">
+<link rel="stylesheet" href="styles/variants.css">
+<link rel="stylesheet" href="styles/rail.css">
+<link rel="stylesheet" href="styles/call.css">
+
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+</head>
+<body>
+
+<!-- TWEAKS state -->
+<script>
+const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
+  "showCall": false,
+  "density": "normal",
+  "font": "default"
+}/*EDITMODE-END*/;
+</script>
+
+<!-- Variant switcher -->
+<div class="variant-switcher" id="variant-switcher"></div>
+
+<div class="variant-container" id="root"></div>
+
+<!-- Tweaks panel -->
+<div class="tweaks-panel" id="tweaks-panel">
+  <h3>Tweaks</h3>
+  <div class="tweaks-row">
+    <label>Incoming call overlay</label>
+    <select id="tweak-call">
+      <option value="false">Off</option>
+      <option value="true">Show</option>
+    </select>
+  </div>
+  <div class="tweaks-row">
+    <label>Content density</label>
+    <select id="tweak-density">
+      <option value="normal">Normal</option>
+      <option value="compact">Compact</option>
+      <option value="spacious">Spacious</option>
+    </select>
+  </div>
+  <div class="tweaks-row" style="font-size: 11px; opacity: 0.6; margin-top: 16px;">
+    Tipp: Klicke oben auf die Varianten um zu wechseln.
+  </div>
+</div>
+
+<script src="components/icons.jsx" type="text/babel"></script>
+<script src="components/data.jsx" type="text/babel"></script>
+<script src="components/call.jsx" type="text/babel"></script>
+<script src="components/app.jsx" type="text/babel"></script>
+
+<script type="text/babel">
+const VARIANTS = [
+  { key: 'clean', label: 'Clean Minimal', layout: 'topnav' },
+  { key: 'clean-rail', label: 'Clean Rail', baseKey: 'clean', layout: 'rail' },
+  { key: 'playful', label: 'Playful', layout: 'topnav' },
+  { key: 'y2k', label: 'Y2K Glass', layout: 'topnav' },
+  { key: 'cyber', label: 'Cyberpunk', layout: 'topnav' },
+  { key: 'warm', label: 'Warm Soft', layout: 'topnav' },
+  { key: 'brutal', label: 'Brutal Gaming', layout: 'topnav' },
+];
+
+const App = () => {
+  const [activeVariant, setActiveVariant] = React.useState(() => {
+    return localStorage.getItem('chatapp-variant') || 'clean';
+  });
+  const [isDark, setIsDark] = React.useState(() => {
+    return localStorage.getItem('chatapp-dark') === 'true';
+  });
+  const [tweaks, setTweaks] = React.useState(TWEAK_DEFAULTS);
+
+  React.useEffect(() => {
+    localStorage.setItem('chatapp-variant', activeVariant);
+  }, [activeVariant]);
+  React.useEffect(() => {
+    localStorage.setItem('chatapp-dark', String(isDark));
+  }, [isDark]);
+
+  // Tweaks wiring
+  React.useEffect(() => {
+    const handler = (e) => {
+      if (e.data?.type === '__activate_edit_mode') {
+        document.getElementById('tweaks-panel').classList.add('open');
+      } else if (e.data?.type === '__deactivate_edit_mode') {
+        document.getElementById('tweaks-panel').classList.remove('open');
+      }
+    };
+    window.addEventListener('message', handler);
+    window.parent.postMessage({type: '__edit_mode_available'}, '*');
+
+    const callSel = document.getElementById('tweak-call');
+    const densSel = document.getElementById('tweak-density');
+    callSel.value = String(tweaks.showCall);
+    densSel.value = tweaks.density;
+    callSel.onchange = () => {
+      const v = callSel.value === 'true';
+      setTweaks(t => ({...t, showCall: v}));
+      window.parent.postMessage({type: '__edit_mode_set_keys', edits: {showCall: v}}, '*');
+    };
+    densSel.onchange = () => {
+      setTweaks(t => ({...t, density: densSel.value}));
+      window.parent.postMessage({type: '__edit_mode_set_keys', edits: {density: densSel.value}}, '*');
+    };
+
+    return () => window.removeEventListener('message', handler);
+  }, []);
+
+  // Render variant switcher buttons
+  React.useEffect(() => {
+    const sw = document.getElementById('variant-switcher');
+    sw.innerHTML = '';
+    VARIANTS.forEach((v, i) => {
+      const b = document.createElement('button');
+      b.textContent = `${String(i+1).padStart(2,'0')} ${v.label}`;
+      if (v.key === activeVariant) b.classList.add('active');
+      b.onclick = () => setActiveVariant(v.key);
+      sw.appendChild(b);
+    });
+  }, [activeVariant]);
+
+  const idx = VARIANTS.findIndex(v => v.key === activeVariant);
+  const variant = { ...VARIANTS[idx], idx };
+
+  return (
+    <ChatApp
+      key={activeVariant}
+      variant={variant}
+      showCall={tweaks.showCall}
+      showProfile={false}
+      isDark={isDark}
+      onToggleDark={() => setIsDark(d => !d)}
+    />
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App />);
+</script>
+
+</body>
+</html>