Hashtags eingeführt

bin/main/static/js/topbar.js

@@ -168,18 +168,26 @@
 
     async function doSearch(q, overlay) {
         try {
-            const res = await fetch('/search?q=' + encodeURIComponent(q) + '&limit=3');
-            if (!res.ok) { overlay.innerHTML = '<div class="topbar-search-hint">Fehler bei der Suche.</div>'; return; }
-            const data = await res.json();
-            const { users = [], locations = [], events = [] } = data;
+            const tagQuery = q.startsWith('#') ? q.slice(1) : q;
+            const [searchRes, gruppenRes, hashtagRes] = await Promise.all([
+                fetch('/search?q=' + encodeURIComponent(q) + '&limit=3'),
+                fetch('/gruppen/search?q=' + encodeURIComponent(q)),
+                fetch('/hashtags/suggest?q=' + encodeURIComponent(tagQuery) + '&limit=4')
+            ]);
 
-            if (!users.length && !locations.length && !events.length) {
-                overlay.innerHTML = '<div class="topbar-search-hint">Keine Ergebnisse.</div>';
-                return;
-            }
+            const data    = searchRes.ok  ? await searchRes.json()  : {};
+            const gruppen = gruppenRes.ok ? await gruppenRes.json()  : [];
+            const hashtags = hashtagRes.ok ? await hashtagRes.json() : [];
+
+            const { users = [], locations = [], events = [] } = data;
+            const gruppenSlice = gruppen.slice(0, 3);
 
             let html = '';
 
+            if (!users.length && !locations.length && !events.length && !gruppenSlice.length && !hashtags.length) {
+                html += '<div class="topbar-search-hint">Keine Ergebnisse.</div>';
+            }
+
             if (users.length) {
                 html += `<div class="topbar-search-section">Personen</div>`;
                 html += users.map(u => {
@@ -213,6 +221,26 @@
                 }).join('');
             }
 
+            if (gruppenSlice.length) {
+                html += `<div class="topbar-search-section">Gruppen</div>`;
+                html += gruppenSlice.map(g => {
+                    const av = g.bild
+                        ? `<img src="data:image/jpeg;base64,${esc(g.bild)}" class="topbar-search-avatar" alt="">`
+                        : `<span class="topbar-search-avatar topbar-search-avatar--placeholder">👥</span>`;
+                    return `<a href="/community/gruppe.html?gruppeId=${esc(g.gruppeId)}" class="topbar-search-result">
+                        ${av}<span>${esc(g.name)}</span></a>`;
+                }).join('');
+            }
+
+            if (hashtags.length) {
+                html += `<div class="topbar-search-section">Hashtags</div>`;
+                html += `<div style="display:flex;flex-wrap:wrap;gap:0.4rem;padding:0.4rem 0.75rem;">`;
+                html += hashtags.map(tag =>
+                    `<a href="/community/feed.html?tag=${encodeURIComponent(tag)}" style="display:inline-block;padding:0.25rem 0.65rem;background:var(--color-secondary);border-radius:14px;font-size:0.82rem;font-weight:600;color:var(--color-primary);text-decoration:none;">#${esc(tag)}</a>`
+                ).join('');
+                html += `</div>`;
+            }
+
             html += `<a href="/search.html?q=${encodeURIComponent(q)}" class="topbar-search-all">Alle Ergebnisse anzeigen →</a>`;
             overlay.innerHTML = html;
         } catch (e) {