Update index.html

index.html

@@ -207,6 +207,54 @@ window.DEFAULT_AUTOMOD = {
 };
 </script>
 
+<!-- Search & Pins modals -->
+<script>
+async function openSearchModal() {
+  showModal(`
+    <div class="modal-title">🔍 Nachrichten durchsuchen</div>
+    <div class="modal-field">
+      <label>Suchbegriff</label>
+      <input type="text" id="search-q" placeholder="Suche im aktuellen Channel..." oninput="liveSearch(this.value)">
+    </div>
+    <div id="search-results" style="max-height:300px;overflow-y:auto;margin-top:10px"></div>
+    <div class="modal-btns">
+      <button class="modal-btn secondary" onclick="clearModal()">Schließen</button>
+    </div>`);
+}
+
+async function liveSearch(query) {
+  const results = document.getElementById('search-results');
+  if (!query || query.length < 2) { results.innerHTML = ''; return; }
+  const msgs = (await DB.get('msgs_' + currentChannel)) || [];
+  const found = msgs.filter(m => !m.system && m.text && m.text.toLowerCase().includes(query.toLowerCase()));
+  if (!found.length) { results.innerHTML = '<div style="color:var(--muted);text-align:center;padding:12px;font-size:.85rem">Keine Ergebnisse</div>'; return; }
+  results.innerHTML = found.slice(-20).map(m => `
+    <div style="padding:8px 0;border-bottom:1px solid var(--border)">
+      <div style="font-size:.72rem;color:var(--muted);font-family:Orbitron,monospace">${m.author} · ${new Date(m.ts).toLocaleDateString('de-DE')}</div>
+      <div style="font-size:.9rem;color:var(--text)">${escHtml(m.text).replace(new RegExp(escHtml(query),'gi'), s => `<mark style="background:rgba(0,212,255,0.2);color:var(--accent)">${s}</mark>`)}</div>
+    </div>`).join('');
+}
+
+async function openPinsModal() {
+  const pins = (await DB.get('pins')) || [];
+  const relevant = pins.filter(p => p.channel === currentChannel);
+  showModal(`
+    <div class="modal-title">📌 Angepinnte Nachrichten</div>
+    <div style="max-height:350px;overflow-y:auto">
+      ${!relevant.length ? '<div style="color:var(--muted);text-align:center;padding:20px;font-size:.85rem">Keine angepinnten Nachrichten</div>' :
+        relevant.map(p => `
+          <div style="padding:10px 0;border-bottom:1px solid var(--border)">
+            <div style="font-size:.7rem;color:var(--muted);font-family:Orbitron,monospace">📌 ${p.author} · angeheftet von ${p.by}</div>
+            <div style="font-size:.9rem;color:var(--text);margin-top:4px">${escHtml(p.text)}</div>
+          </div>`).join('')}
+    </div>
+    <div class="modal-btns">
+      <button class="modal-btn secondary" onclick="clearModal()">Schließen</button>
+    </div>`);
+}
+</script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/1.5.4/peerjs.min.js"></script>
 <script src="app.js"></script>
 </body>
 </html>