Update app.js

app.js

@@ -33,6 +33,21 @@ function loadSession() {
   } catch { return null; }
 }
 
+// ─── DM READ TRACKING (persistent) ───────────────────────────
+function getDMReadTs(otherUser) {
+  try {
+    const data = JSON.parse(localStorage.getItem('nc_dm_read') || '{}');
+    return data[otherUser.toLowerCase()] || 0;
+  } catch { return 0; }
+}
+function setDMReadTs(otherUser, ts) {
+  try {
+    const data = JSON.parse(localStorage.getItem('nc_dm_read') || '{}');
+    data[otherUser.toLowerCase()] = ts;
+    localStorage.setItem('nc_dm_read', JSON.stringify(data));
+  } catch {}
+}
+
 // ─── STATE ────────────────────────────────────────────────────
 let currentUser    = null;
 let currentChannel = 'allgemein';
@@ -68,6 +83,7 @@ const DB_DEFAULT = () => ({
   voice:      {},
   tickets:    {},
   pins:       [],
+  blocks:     {},   // { username: [blockedUsername, ...] }
   moderation: { bans:{}, banned_fps:{}, kicked:{}, timeouts:{} },
   config:     {}
 });
@@ -180,6 +196,36 @@ function ensureFields() {
   if (!DB.moderation.banned_fps) DB.moderation.banned_fps = {};
   if (!DB.moderation.kicked)     DB.moderation.kicked = {};
   if (!DB.moderation.timeouts)   DB.moderation.timeouts = {};
+  if (!DB.blocks)                DB.blocks = {};
+}
+
+// ─── BLOCK HELPERS ────────────────────────────────────────────
+function isBlocked(username) {
+  const myBlocks = DB.blocks?.[currentUser?.username?.toLowerCase()] || [];
+  return myBlocks.includes(username.toLowerCase());
+}
+function isBlockedBy(username) {
+  const theirBlocks = DB.blocks?.[username.toLowerCase()] || [];
+  return theirBlocks.includes(currentUser?.username?.toLowerCase());
+}
+function blockUser(username) {
+  const key = currentUser.username.toLowerCase();
+  if (!DB.blocks[key]) DB.blocks[key] = [];
+  if (!DB.blocks[key].includes(username.toLowerCase())) {
+    DB.blocks[key].push(username.toLowerCase());
+    apiSave();
+    showToast(`🚫 ${username} blockiert`, 'var(--warn)');
+    if (currentDM === username) openChannel('allgemein');
+    updateDMList();
+  }
+}
+function unblockUser(username) {
+  const key = currentUser.username.toLowerCase();
+  if (!DB.blocks[key]) return;
+  DB.blocks[key] = DB.blocks[key].filter(u => u !== username.toLowerCase());
+  apiSave();
+  showToast(`✓ ${username} entblockt`, 'var(--green)');
+  updateDMList();
 }
 
 // Hilfsfunktionen: Pfad-Zugriff (z.B. "users/noah")
@@ -543,6 +589,9 @@ function getDMMsgs(key) {
 }
 
 function openDM(username) {
+  // Blockiert?
+  if (isBlocked(username)) { showToast('Du hast diesen User blockiert.','var(--warn)'); return; }
+  if (isBlockedBy(username)) { showToast('Du kannst dieser Person keine Nachrichten senden.','var(--warn)'); return; }
   currentDM=username; currentChannel=null;
   document.querySelectorAll('.channel-item').forEach(el=>el.classList.remove('active'));
   document.querySelectorAll('.dm-item').forEach(el=>{
@@ -555,14 +604,26 @@ function openDM(username) {
   document.getElementById('send-btn').disabled=false;
   document.getElementById('msg-input').placeholder=`Nachricht an @${username}...`;
   unreadCounts['dm_'+username.toLowerCase()]=0;
+  // Lesestand persistieren
+  const msgs=getDMMsgs(getDMKey(currentUser.username,username));
+  if (msgs.length) setDMReadTs(username, msgs[msgs.length-1].ts||0);
   updateDMList();
   renderDMMessages(username);
 }
 
 function renderDMMessages(username) {
   const key=getDMKey(currentUser.username,username);
-  const msgs=getDMMsgs(key);
+  let msgs=getDMMsgs(key);
+  // Nachrichten von blockierten Usern ausblenden
+  if (isBlocked(username)||isBlockedBy(username)) {
+    document.getElementById('messages').innerHTML='<div class="empty-chat"><div class="empty-chat-icon">🚫</div><p>Du kannst keine Nachrichten mit diesem User austauschen.</p></div>';
+    document.getElementById('msg-input').disabled=true;
+    document.getElementById('send-btn').disabled=true;
+    return;
+  }
   lastMsgCounts['dm_'+username.toLowerCase()]=msgs.length;
+  // Lesestand beim Rendern aktualisieren
+  if (msgs.length) setDMReadTs(username, msgs[msgs.length-1].ts||0);
   renderMessages(msgs,true);
 }
 
@@ -617,7 +678,12 @@ function formatMsg(text) {
     .replace(/\*\*(.*?)\*\*/g,'<strong>$1</strong>')
     .replace(/\*(.*?)\*/g,'<em>$1</em>')
     .replace(/`(.*?)`/g,'<code style="background:rgba(0,212,255,0.08);padding:1px 5px;border-radius:2px;font-family:monospace">$1</code>')
-    .replace(/(https?:\/\/[^\s]+)/g,'<a href="$1" target="_blank" rel="noopener">$1</a>');
+    .replace(/(https?:\/\/[^\s]+)/g,'<a href="$1" target="_blank" rel="noopener">$1</a>')
+    .replace(/@(alle|here|everyone)/gi,'<span class="ping-everyone">@$1</span>')
+    .replace(/@([a-zA-Z0-9_]+)/g,(match,name)=>{
+      if(DB.users[name.toLowerCase()]) return `<span class="ping-user${name.toLowerCase()===currentUser?.username?.toLowerCase()?' ping-me':''}">${match}</span>`;
+      return match;
+    });
 }
 
 // ─── SEND ─────────────────────────────────────────────────────
@@ -645,6 +711,11 @@ async function sendMessage() {
   }
   input.value=''; input.style.height='';
   const msg={author:currentUser.username,color:currentUser.color,role:currentUser.role,text,ts:Date.now()};
+
+  // Ping-Erkennung für Desktop-Notifications
+  const isPingAll = /@(alle|here|everyone)/i.test(text);
+  const isPingMe  = new RegExp('@'+currentUser.username,'i').test(text);
+
   if (currentDM) {
     const key=getDMKey(currentUser.username,currentDM);
     if (!DB.dms[key]) DB.dms[key]={};
@@ -995,11 +1066,17 @@ function updateDMList() {
   dmEl.innerHTML='';
   for (const u of Object.values(DB.users)) {
     if (u.username===currentUser?.username) continue;
-    const unread=unreadCounts['dm_'+u.username.toLowerCase()]||0;
+    if (isBlocked(u.username)) continue; // Blockierte nicht anzeigen
+    // Unread berechnen: Nachrichten neuer als letzter Lesestand
+    const msgs=getDMMsgs(getDMKey(currentUser.username,u.username));
+    const readTs=getDMReadTs(u.username);
+    const unread=msgs.filter(m=>m.author!==currentUser.username&&(m.ts||0)>readTs).length;
+    if (unread>0) unreadCounts['dm_'+u.username.toLowerCase()]=unread;
+    const count=unreadCounts['dm_'+u.username.toLowerCase()]||0;
     const div=document.createElement('div');
     div.className=`channel-item dm-item ${currentDM===u.username?'active':''}`;
     div.dataset.user=u.username.toLowerCase();
-    div.innerHTML=`<span class="channel-icon">@</span><span class="channel-name">${escHtml(u.username)}</span>${unread>0?`<span class="unread-badge">${unread}</span>`:''}`;
+    div.innerHTML=`<span class="channel-icon">@</span><span class="channel-name">${escHtml(u.username)}</span>${count>0?`<span class="unread-badge">${count}</span>`:''}`;
     div.onclick=()=>openDM(u.username);
     dmEl.appendChild(div);
   }
@@ -1020,6 +1097,12 @@ function showUserCtx(e,username) {
   const h=document.createElement('div'); h.className='ctx-header'; h.textContent=username; menu.appendChild(h);
   addCtxItem(menu,'💬 Direktnachricht','',()=>{hideCtx();openDM(username);});
   addCtxItem(menu,'👤 Profil','',()=>{hideCtx();showProfileModal(username);});
+  // Block/Unblock
+  if (isBlocked(username)) {
+    addCtxItem(menu,'✅ Entblocken','',()=>{hideCtx();unblockUser(username);});
+  } else {
+    addCtxItem(menu,'🚫 Blockieren','warn',()=>{hideCtx();confirmBlock(username);});
+  }
   if (hasRole('mod')) {
     addCtxDivider(menu);
     addCtxItem(menu,'👢 Kicken','warn',()=>{hideCtx();openKickModal(username);});
@@ -1040,6 +1123,15 @@ function addCtxDivider(menu){const d=document.createElement('div');d.className='
 function hideCtx(){document.getElementById('context-menu').style.display='none';}
 document.addEventListener('click',hideCtx);
 
+function confirmBlock(username) {
+  showModal(`<div class="modal-title">🚫 ${escHtml(username)} blockieren?</div>
+    <div class="modal-sub" style="margin-bottom:16px">Du siehst keine DMs mehr von dieser Person und kannst ihr keine senden.</div>
+    <div class="modal-btns">
+      <button class="modal-btn secondary" onclick="clearModal()">Abbrechen</button>
+      <button class="modal-btn warn-btn" onclick="blockUser('${escHtml(username)}');clearModal()">Blockieren</button>
+    </div>`);
+}
+
 // ─── MODERATION ───────────────────────────────────────────────
 function openKickModal(u) {
   showModal(`<div class="modal-title">👢 Kick: ${escHtml(u)}</div>
@@ -1165,8 +1257,8 @@ function openSettings() {
       <button class="modal-tab active" onclick="switchSettingsTab('konto',this)">Konto</button>
       <button class="modal-tab" onclick="switchSettingsTab('darstellung',this)">Darstellung</button>
       ${hasRole('mod')?'<button class="modal-tab" onclick="switchSettingsTab(\'automod\',this)">AutoMod</button>':''}
-      ${hasRole('admin')?'<button class="modal-tab" onclick="switchSettingsTab(\'tickets\',this)">Tickets</button>':''}
-    </div>
+      ${hasRole('admin')?'<button class="modal-tab" onclick="switchSettingsTab(\'admin\',this)">Admin</button>':''}
+      <button class="modal-tab" onclick="switchSettingsTab(\'blockiert\',this)">Blockiert</button>    </div>
     <div id="settings-tab-konto">
       <div class="settings-section"><h4>Konto</h4>
         <div class="modal-field"><label>Neuer Username</label><input type="text" id="s-user" placeholder="${escHtml(currentUser.username)}"></div>
@@ -1202,22 +1294,41 @@ function openSettings() {
         <div class="toggle-row"><label>Link-Filter</label><div class="toggle ${appConfig.automod?.linkFilter?'on':''}" id="toggle-links" onclick="toggleST('links')"></div></div>
       </div>
     </div>`:''}
-    ${hasRole('admin')?`<div id="settings-tab-tickets" style="display:none">
-      <div class="settings-section"><h4>Ticket-System</h4><div id="admin-tickets-list">Wird geladen...</div></div>
+    ${hasRole('admin')?`<div id="settings-tab-admin" style="display:none">
+      <div class="settings-section"><h4>Ticket-Übersicht</h4><div id="admin-tickets-list">Wird geladen...</div></div>
     </div>`:''}
-    <div class="modal-btns">
+    <div id="settings-tab-blockiert" style="display:none">
+      <div class="settings-section"><h4>Blockierte User</h4>
+        <div id="blocked-list">
+          ${(()=>{
+            const bl=DB.blocks?.[currentUser.username.toLowerCase()]||[];
+            if(!bl.length) return '<div style="color:var(--muted);font-size:.85rem;padding:12px 0">Niemand blockiert</div>';
+            return bl.map(u=>`<div style="display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border)">
+              <span>${escHtml(u)}</span>
+              <button class="modal-btn secondary" style="padding:3px 10px;font-size:.7rem;width:auto" onclick="unblockUser('${escHtml(u)}');this.closest('.settings-section').parentElement.parentElement.querySelector('#blocked-list').innerHTML='<div style=color:var(--muted);font-size:.85rem;padding:12px 0>Aktualisiert – bitte Tab neu öffnen</div>'">Entblocken</button>
+            </div>`).join('');
+          })()}
+        </div>
+      </div>
+    </div>    <div class="modal-btns">
       <button class="modal-btn secondary" onclick="clearModal()">Schließen</button>
       <button class="modal-btn primary" onclick="saveSettings()">Speichern</button>
     </div>`,true);
   if (hasRole('admin')) setTimeout(loadAdminTickets,100);
 }
+function loadAdminTickets(){
+  const el=document.getElementById('admin-tickets-list');if(!el)return;
+  const tickets=Object.values(DB.tickets||{}).sort((a,b)=>b.ts-a.ts);
+  if(!tickets.length){el.innerHTML='<div style="color:var(--muted);text-align:center;padding:20px;font-size:.85rem">Keine Tickets</div>';return;}
+  el.innerHTML=renderTicketList(tickets);
+}
 function toggleST(id){const el=document.getElementById('toggle-'+id);if(!el)return;const on=!el.classList.contains('on');el.classList.toggle('on',on);_st[id]=on;}
 function switchSettingsTab(tab,btn){
   document.querySelectorAll('[id^="settings-tab-"]').forEach(el=>el.style.display='none');
   document.querySelectorAll('.modal-tab').forEach(el=>el.classList.remove('active'));
   const el=document.getElementById('settings-tab-'+tab);if(el)el.style.display='';
   if(btn)btn.classList.add('active');
-  if(tab==='tickets')loadAdminTickets();
+  if(tab==='admin')loadAdminTickets();
 }
 function addBW(){const i=document.getElementById('new-bw');const w=i.value.trim().toLowerCase();if(!w)return;if(!appConfig.automod)appConfig.automod={};if(!appConfig.automod.bannedWords)appConfig.automod.bannedWords=[];if(!appConfig.automod.bannedWords.includes(w)){appConfig.automod.bannedWords.push(w);document.getElementById('bw-tags').insertAdjacentHTML('beforeend',`<span class="tag">${escHtml(w)}<button class="tag-remove" onclick="removeBW('${escHtml(w)}')">×</button></span>`);}i.value='';}
 function removeBW(w){if(!appConfig.automod?.bannedWords)return;appConfig.automod.bannedWords=appConfig.automod.bannedWords.filter(x=>x!==w);const el=document.getElementById('bw-tags');if(el)el.innerHTML=appConfig.automod.bannedWords.map(x=>`<span class="tag">${escHtml(x)}<button class="tag-remove" onclick="removeBW('${escHtml(x)}')">×</button></span>`).join('');}
@@ -1256,43 +1367,151 @@ function saveSettings(){
 
 // ─── TICKETS ──────────────────────────────────────────────────
 function openCreateTicket(){
-  showModal(`<div class="modal-title">🎫 Ticket erstellen</div>
-    <div class="modal-sub">Wende dich an das Team!</div>
-    <div class="modal-field"><label>Kategorie</label>
-      <select id="t-cat"><option value="support">❓ Support</option><option value="report">🚨 Meldung</option><option value="appeal">⚖️ Ban-Appeal</option><option value="other">💭 Sonstiges</option></select></div>
-    <div class="modal-field"><label>Betreff</label><input type="text" id="t-title" maxlength="80"></div>
-    <div class="modal-field"><label>Beschreibung</label><textarea id="t-desc" rows="4"></textarea></div>
+  if (!currentUser) return;
+  showModal(`
+    <div class="modal-title">🎫 Ticket erstellen</div>
+    <div class="modal-sub">Das Team wird sich so schnell wie möglich melden.</div>
+    <div class="modal-field">
+      <label>Kategorie</label>
+      <select id="t-cat">
+        <option value="support">❓ Support</option>
+        <option value="report">🚨 Meldung</option>
+        <option value="appeal">⚖️ Ban-Appeal</option>
+        <option value="bug">🐛 Bug-Report</option>
+        <option value="other">💭 Sonstiges</option>
+      </select>
+    </div>
+    <div class="modal-field"><label>Betreff</label><input type="text" id="t-title" maxlength="80" placeholder="Kurze Beschreibung"></div>
+    <div class="modal-field"><label>Beschreibung</label><textarea id="t-desc" rows="4" placeholder="Beschreibe dein Anliegen genau..."></textarea></div>
     <div class="modal-btns">
       <button class="modal-btn secondary" onclick="clearModal()">Abbrechen</button>
-      <button class="modal-btn primary" onclick="submitTicket()">Erstellen</button>
-    </div>`);
+      <button class="modal-btn primary" onclick="submitTicket()">Ticket erstellen ▶</button>
+    </div>`, true);
 }
+
 function submitTicket(){
   const cat=document.getElementById('t-cat')?.value;
   const title=document.getElementById('t-title')?.value.trim();
   const desc=document.getElementById('t-desc')?.value.trim();
   if(!title||!desc){showToast('Bitte alle Felder ausfüllen','var(--danger)');return;}
-  const id='TKT-'+String(Date.now()).slice(-5);
   if(!DB.tickets)DB.tickets={};
-  dbPush('tickets',{id,cat,title,desc,author:currentUser.username,status:'open',ts:Date.now()});
-  clearModal();showToast(`🎫 Ticket ${id} erstellt`,'var(--green)');
+  const tktNum = Object.keys(DB.tickets).length + 1;
+  const id='TKT-'+String(tktNum).padStart(4,'0');
+  dbPush('tickets',{
+    id, cat, title, desc,
+    author: currentUser.username,
+    status: 'open',
+    ts: Date.now(),
+    replies: []
+  });
+  clearModal();
+  showToast(`✅ Ticket ${id} erstellt! Das Team meldet sich.`,'var(--green)');
+  // Mod-Notification
+  sendSystemMsg(`📬 Neues Ticket von @${currentUser.username}: "${title}" (${id})`, 'moderators');
 }
-function loadAdminTickets(){
-  const el=document.getElementById('admin-tickets-list');if(!el)return;
-  const tickets=Object.values(DB.tickets||{}).sort((a,b)=>b.ts-a.ts);
-  if(!tickets.length){el.innerHTML='<div style="color:var(--muted);text-align:center;padding:20px;font-size:.85rem">Keine Tickets</div>';return;}
-  el.innerHTML=tickets.map(t=>`<div class="ticket-item ${t.status}" onclick="openTicketDetail('${escHtml(t._key||t.id)}')">
-    <div class="ticket-meta">${t.id} · ${t.cat} · ${new Date(t.ts).toLocaleDateString('de-DE')} · ${t.author}</div>
-    <div class="ticket-title">${escHtml(t.title)}</div>
-    <div style="font-size:.75rem;color:${t.status==='open'?'var(--green)':'var(--muted)'}">● ${t.status==='open'?'Offen':'Geschlossen'}</div>
-  </div>`).join('');
+
+function openMyTickets(){
+  const myTickets = Object.values(DB.tickets||{})
+    .filter(t=>t.author===currentUser.username||hasRole('mod'))
+    .sort((a,b)=>b.ts-a.ts);
+
+  showModal(`
+    <div class="modal-title">🎫 ${hasRole('mod')?'Alle Tickets':'Meine Tickets'}</div>
+    <div style="display:flex;gap:8px;margin-bottom:12px">
+      <button class="modal-btn secondary" style="flex:1;padding:5px" onclick="filterTickets('all',this)">Alle</button>
+      <button class="modal-btn secondary" style="flex:1;padding:5px" onclick="filterTickets('open',this)">Offen</button>
+      <button class="modal-btn secondary" style="flex:1;padding:5px" onclick="filterTickets('closed',this)">Geschlossen</button>
+    </div>
+    <div id="ticket-list-container" style="max-height:380px;overflow-y:auto">
+      ${renderTicketList(myTickets)}
+    </div>
+    <div class="modal-btns">
+      <button class="modal-btn secondary" onclick="clearModal()">Schließen</button>
+      <button class="modal-btn primary" onclick="clearModal();openCreateTicket()">+ Neues Ticket</button>
+    </div>`, true);
+}
+
+function renderTicketList(tickets){
+  if(!tickets.length) return '<div style="color:var(--muted);text-align:center;padding:24px;font-size:.85rem">Keine Tickets</div>';
+  const catIcon={support:'❓',report:'🚨',appeal:'⚖️',bug:'🐛',other:'💭'};
+  return tickets.map(t=>`
+    <div class="ticket-item ${t.status}" onclick="openTicketDetail('${t._key||t.id}')" style="cursor:pointer;padding:10px 12px;border:1px solid var(--border);border-radius:4px;margin-bottom:8px;background:var(--surface2);transition:border-color .2s" onmouseover="this.style.borderColor='var(--accent)'" onmouseout="this.style.borderColor='var(--border)'">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px">
+        <span style="font-family:Orbitron,monospace;font-size:.65rem;color:var(--accent)">${t.id}</span>
+        <span style="font-size:.65rem;padding:2px 7px;border-radius:2px;background:${t.status==='open'?'rgba(78,255,145,0.15)':'rgba(74,122,153,0.2)'};color:${t.status==='open'?'var(--green)':'var(--muted)'}">● ${t.status==='open'?'OFFEN':'GESCHLOSSEN'}</span>
+      </div>
+      <div style="font-size:.9rem;font-weight:700;margin-bottom:2px">${catIcon[t.cat]||'💭'} ${escHtml(t.title)}</div>
+      <div style="font-size:.72rem;color:var(--muted)">${t.author} · ${new Date(t.ts).toLocaleDateString('de-DE')} · ${(t.replies||[]).length} Antwort${(t.replies||[]).length!==1?'en':''}</div>
+    </div>`).join('');
+}
+
+function filterTickets(filter, btn){
+  document.querySelectorAll('#active-modal .modal-btn.secondary').forEach(b=>b.classList.remove('active'));
+  btn?.classList.add('active');
+  const all = Object.values(DB.tickets||{})
+    .filter(t=>t.author===currentUser.username||hasRole('mod'))
+    .filter(t=>filter==='all'||t.status===filter)
+    .sort((a,b)=>b.ts-a.ts);
+  const container = document.getElementById('ticket-list-container');
+  if(container) container.innerHTML = renderTicketList(all);
 }
+
 function openTicketDetail(key){
+  // Key kann entweder _key oder id sein
+  const t = DB.tickets[key] || Object.values(DB.tickets||{}).find(x=>x.id===key);
+  if(!t) return showToast('Ticket nicht gefunden','var(--danger)');
+  const realKey = t._key || key;
+  const catIcon={support:'❓',report:'🚨',appeal:'⚖️',bug:'🐛',other:'💭'};
+  const replies = (t.replies||[]).map(r=>`
+    <div style="padding:10px;border-left:2px solid ${r.isStaff?'var(--accent)':'var(--border)'};margin:8px 0;background:rgba(0,0,0,0.2);border-radius:0 4px 4px 0">
+      <div style="font-size:.68rem;color:${r.isStaff?'var(--accent)':'var(--muted)'};font-family:Orbitron,monospace;margin-bottom:4px">
+        ${r.isStaff?'🛡 ':''}${escHtml(r.author)} · ${new Date(r.ts).toLocaleString('de-DE',{day:'2-digit',month:'2-digit',hour:'2-digit',minute:'2-digit'})}
+      </div>
+      <div style="font-size:.88rem">${escHtml(r.text)}</div>
+    </div>`).join('');
+
+  const canReply = t.author===currentUser.username || hasRole('mod');
+  const canClose = hasRole('mod') || t.author===currentUser.username;
+
+  showModal(`
+    <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px">
+      <div>
+        <div class="modal-title" style="margin-bottom:2px">${catIcon[t.cat]||'💭'} ${escHtml(t.title)}</div>
+        <div style="font-family:Orbitron,monospace;font-size:.62rem;color:var(--accent)">${t.id} · ${t.author} · ${new Date(t.ts).toLocaleDateString('de-DE')}</div>
+      </div>
+      <span style="font-size:.65rem;padding:3px 8px;border-radius:2px;white-space:nowrap;background:${t.status==='open'?'rgba(78,255,145,0.15)':'rgba(74,122,153,0.2)'};color:${t.status==='open'?'var(--green)':'var(--muted)'}">● ${t.status==='open'?'OFFEN':'GESCHLOSSEN'}</span>
+    </div>
+    <div style="background:rgba(0,0,0,0.3);padding:12px;border:1px solid var(--border);font-size:.9rem;margin-bottom:12px;border-radius:4px;line-height:1.5">${escHtml(t.desc)}</div>
+    ${replies?`<div style="max-height:200px;overflow-y:auto;margin-bottom:12px">${replies}</div>`:''}
+    ${canReply&&t.status==='open'?`
+      <div class="modal-field" style="margin-bottom:8px">
+        <textarea id="ticket-reply" rows="2" placeholder="Antwort schreiben..." style="font-size:.88rem"></textarea>
+      </div>`:''}
+    <div class="modal-btns">
+      <button class="modal-btn secondary" onclick="clearModal()">Schließen</button>
+      ${canReply&&t.status==='open'?`<button class="modal-btn primary" onclick="replyTicket('${realKey}')">Antworten</button>`:''}
+      ${canClose?`<button class="modal-btn ${t.status==='open'?'warn-btn':'success-btn'}" onclick="toggleTicket('${realKey}')">${t.status==='open'?'Schließen':'Wieder öffnen'}</button>`:''}
+    </div>`, true);
+}
+
+function replyTicket(key){
   const t=DB.tickets[key];if(!t)return;
-  const btnHtml = hasRole('mod')
-    ? `<div class="modal-btns"><button class="modal-btn secondary" onclick="clearModal()">Schließen</button><button class="modal-btn ${t.status==='open'?'danger-btn':'success-btn'}" onclick="toggleTicket('${key}')">${t.status==='open'?'Ticket schließen':'Ticket öffnen'}</button></div>`
-    : `<div class="modal-btns"><button class="modal-btn secondary" onclick="clearModal()">Schließen</button></div>`;
-  showModal(`<div class="modal-title">🎫 ${escHtml(t.id)}: ${escHtml(t.title)}</div><div class="modal-sub">Von ${escHtml(t.author)} · ${new Date(t.ts).toLocaleDateString('de-DE')} · ${t.status}</div><div style="background:rgba(0,0,0,0.3);padding:12px;border:1px solid var(--border);font-size:.9rem;margin-bottom:14px;border-radius:2px">${escHtml(t.desc)}</div>${btnHtml}`, true);
+  const text=document.getElementById('ticket-reply')?.value.trim();
+  if(!text){showToast('Antwort darf nicht leer sein','var(--danger)');return;}
+  if(!t.replies)t.replies=[];
+  t.replies.push({
+    author: currentUser.username,
+    text,
+    ts: Date.now(),
+    isStaff: hasRole('mod')
+  });
+  apiSave();
+  clearModal();
+  showToast('✅ Antwort gesendet','var(--green)');
+  // Notification an Ticket-Ersteller
+  if(t.author!==currentUser.username){
+    sendSystemMsg(`📬 Neue Antwort auf Ticket ${t.id} von @${currentUser.username}`, 'moderators');
+  }
 }
 
 function toggleTicket(key){
@@ -1302,6 +1521,18 @@ function toggleTicket(key){
   showToast(`Ticket ${t.id} ${t.status==='open'?'geöffnet':'geschlossen'}`,'var(--accent)');
 }
 
+function sendSystemMsg(text, channelId){
+  if(!DB.msgs) DB.msgs={};
+  if(!DB.msgs[channelId]) DB.msgs[channelId]={};
+  dbPush(`msgs/${channelId}`,{system:true,text,ts:Date.now()});
+}
+
+// Ticket-Button auch für normale User sichtbar machen (meine Tickets)
+function openTicketMenu(){
+  if(hasRole('mod')) return openMyTickets();
+  openMyTickets();
+}
+
 // ─── SEARCH & PINS ────────────────────────────────────────────
 async function openSearchModal(){
   showModal(`<div class="modal-title">🔍 Nachrichten durchsuchen</div>