instbyte 1.7.0 → 1.9.0

package/client/js/app.js

@@ -1,5 +1,39 @@
 const socket = io();
 
+let currentPage = 1;
+let hasMoreItems = false;
+let retention = 24 * 60 * 60 * 1000; // default 24h, overwritten on init
+const newItemIds = new Set();
+const seenEmitted = new Set(); // item IDs this session has already emitted seen for
+
+const seenObserver = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (!entry.isIntersecting) return;
+        const id = parseInt(entry.target.dataset.itemId);
+        if (!id || seenEmitted.has(id)) return;
+
+        // wait 1 second of visibility before counting as seen
+        const timer = setTimeout(() => {
+            if (seenEmitted.has(id)) return;
+            seenEmitted.add(id);
+            socket.emit("seen", { id, name: uploader });
+            seenObserver.unobserve(entry.target); // done with this element
+        }, 1000);
+
+        // if element leaves viewport before 1s, cancel
+        entry.target._seenTimer = timer;
+    });
+
+    // cancel timers for elements that left viewport
+    entries.forEach(entry => {
+        if (entry.isIntersecting) return;
+        if (entry.target._seenTimer) {
+            clearTimeout(entry.target._seenTimer);
+            entry.target._seenTimer = null;
+        }
+    });
+}, { threshold: 0.5 }); // at least 50% of item must be visible
+
 // ========================
 // THEME MANAGEMENT (FIXED)
 // ========================
@@ -86,6 +120,7 @@ async function applyBranding() {
         // Branding failed — default styles remain, no crash
     }
 }
+
 function formatSize(bytes) {
     if (!bytes) return "";
     if (bytes >= 1024 ** 3) return (bytes / 1024 ** 3).toFixed(1) + " GB";
@@ -94,6 +129,64 @@ function formatSize(bytes) {
     return bytes + " B";
 }
 
+function getExpiryBadge(createdAt) {
+    // if retention is null ("never"), nothing expires
+    if (retention === null) return "";
+
+    const expiresAt = createdAt + retention;
+    const remaining = expiresAt - Date.now();
+    const THREE_HOURS = 3 * 60 * 60 * 1000;
+
+    if (remaining > THREE_HOURS) return "";
+    if (remaining <= 0) return `<span class="expiry-badge expiry-gone">expired</span>`;
+
+    const m = Math.floor(remaining / 60000);
+    const h = Math.floor(m / 60);
+    const label = h > 0 ? `${h}h ${m % 60}m` : `${m}m`;
+
+    return `<span class="expiry-badge">⏱ ${label}</span>`;
+}
+
+function escapeHtml(str) {
+    if (!str) return "";
+    return str
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}
+
+function playChime() {
+    try {
+        const ctx = new (window.AudioContext || window.webkitAudioContext)();
+
+        const gain = ctx.createGain();
+        gain.connect(ctx.destination);
+        gain.gain.setValueAtTime(0, ctx.currentTime);
+        gain.gain.linearRampToValueAtTime(0.15, ctx.currentTime + 0.01);
+        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.6);
+
+        const osc1 = ctx.createOscillator();
+        osc1.type = "sine";
+        osc1.frequency.setValueAtTime(880, ctx.currentTime);
+        osc1.frequency.exponentialRampToValueAtTime(1100, ctx.currentTime + 0.1);
+        osc1.connect(gain);
+        osc1.start(ctx.currentTime);
+        osc1.stop(ctx.currentTime + 0.6);
+
+        const osc2 = ctx.createOscillator();
+        osc2.type = "sine";
+        osc2.frequency.setValueAtTime(1320, ctx.currentTime + 0.08);
+        osc2.frequency.exponentialRampToValueAtTime(1760, ctx.currentTime + 0.2);
+        osc2.connect(gain);
+        osc2.start(ctx.currentTime + 0.08);
+        osc2.stop(ctx.currentTime + 0.6);
+
+    } catch (e) {
+        // audio not supported or blocked — fail silently
+    }
+}
+
 function getSizeTag(bytes) {
     if (!bytes) return "";
     const mb = bytes / (1024 * 1024);
@@ -231,21 +324,37 @@ async function togglePreview(id, filename) {
 
         try {
             const res = await fetch(url);
-
             if (!res.ok) throw new Error("Failed to load");
 
-            // Check size via content-length header before reading
             const contentLength = res.headers.get("content-length");
             if (contentLength && parseInt(contentLength) > MAX_TEXT_PREVIEW_BYTES) {
                 panel.innerHTML = `
-          <div class="preview-error">
-            File is too large to preview (${formatSize(parseInt(contentLength))}).
-            <a href="${url}" target="_blank">Open in new tab</a>
-          </div>`;
+              <div class="preview-error">
+                File is too large to preview (${formatSize(parseInt(contentLength))}).
+                <a href="${url}" target="_blank">Open in new tab</a>
+              </div>`;
                 return;
             }
 
             const text = await res.text();
+            const ext = filename.split(".").pop().toLowerCase();
+
+            // markdown files — render as HTML, not syntax-highlighted raw text
+            if (ext === "md") {
+                const html = marked.parse(text);
+                const wrap = document.createElement("div");
+                wrap.className = "markdown-body markdown-preview";
+                wrap.innerHTML = html;
+
+                // syntax highlight any code blocks inside
+                wrap.querySelectorAll("pre code").forEach(el => hljs.highlightElement(el));
+
+                panel.innerHTML = "";
+                panel.appendChild(wrap);
+                return;
+            }
+
+            // all other text files — syntax highlighted raw view
             const lines = text.split("\n");
             const truncated = lines.length > MAX_TEXT_LINES;
             const preview = truncated
@@ -273,9 +382,9 @@ async function togglePreview(id, filename) {
 
         } catch (err) {
             panel.innerHTML = `
-        <div class="preview-error">
-          Could not load preview. <a href="${url}" target="_blank">Open directly</a>
-        </div>`;
+          <div class="preview-error">
+            Could not load preview. <a href="${url}" target="_blank">Open directly</a>
+          </div>`;
         }
     }
 }
@@ -345,6 +454,48 @@ function toggleMoveDropdown(e, id, currentChannel) {
     openDropdown = dropdown;
 }
 
+function toggleMoreMenu(e, id, currentChannel) {
+    e.stopPropagation();
+
+    const moreDropdown = e.currentTarget.nextElementSibling;
+    const isOpen = moreDropdown.classList.contains("open");
+
+    // close any other open dropdown
+    if (openDropdown && openDropdown !== moreDropdown) {
+        openDropdown.classList.remove("open");
+    }
+
+    if (isOpen) {
+        moreDropdown.classList.remove("open");
+        openDropdown = null;
+        return;
+    }
+
+    // build move list fresh each time
+    const moveList = moreDropdown.querySelector(".move-list");
+    const others = channels.filter(c => c.name !== currentChannel);
+    moveList.innerHTML = "";
+
+    if (others.length === 0) {
+        moveList.innerHTML = `<div class="dropdown-label" style="padding:4px 14px 8px">No other channels</div>`;
+    } else {
+        others.forEach(ch => {
+            const btn = document.createElement("button");
+            btn.innerText = ch.name;
+            btn.onclick = (ev) => {
+                ev.stopPropagation();
+                moveItem(id, ch.name);
+                moreDropdown.classList.remove("open");
+                openDropdown = null;
+            };
+            moveList.appendChild(btn);
+        });
+    }
+
+    moreDropdown.classList.add("open");
+    openDropdown = moreDropdown;
+}
+
 async function moveItem(id, toChannel) {
     await fetch(`/item/${id}/move`, {
         method: "PATCH",
@@ -363,6 +514,7 @@ document.addEventListener("click", () => {
 
 let channel = null;
 let channels = [];
+let unreadChannels = new Set();
 
 let uploader = localStorage.getItem("name") || "";
 
@@ -379,7 +531,7 @@ async function initName() {
         uploader = prompt("Your name?", suggested) || suggested;
         localStorage.setItem("name", uploader);
     }
-    document.getElementById("who").innerText = "You: " + uploader;
+    document.getElementById("who").innerText = uploader;
     socket.emit("join", uploader);
 }
 
@@ -400,16 +552,304 @@ function setChannel(c) {
         pendingDeleteEl = null;
         hideUndoToast();
     }
+    unreadChannels.delete(c); // clear unread when switching to channel
     channel = c;
     renderChannels();
     highlight();
     load();
 }
 
-async function load() {
-    const res = await fetch("/items/" + channel);
+async function load(resetPage = true) {
+    if (resetPage) currentPage = 1;
+
+    const res = await fetch(`/items/${channel}?page=${currentPage}`);
     const data = await res.json();
-    render(data);
+
+    console.log("load called, page:", currentPage, "data:", data);
+
+    hasMoreItems = data.hasMore;
+
+    if (currentPage === 1) {
+        render(data.items);
+    } else {
+        renderMore(data.items);
+    }
+
+    const wrapper = document.getElementById("loadMoreWrapper");
+    wrapper.style.display = hasMoreItems ? "block" : "none";
+}
+
+async function loadMore() {
+    currentPage++;
+    await load(false);
+}
+
+// ========================
+// ITEM RENDERING
+// ========================
+function buildItemContent(i) {
+    if (i.type === "file") {
+        const isImg = i.filename.match(/\.(jpg|png|jpeg|gif)$/i);
+        const sizeLabel = formatSize(i.size);
+        const sizeClass = getSizeTag(i.size);
+        const sizeTag = sizeClass
+            ? `<span class="size-tag ${sizeClass}">${sizeLabel}</span>`
+            : sizeLabel
+                ? `<span style="font-size:11px;color:#9ca3af;margin-left:6px;">${sizeLabel}</span>`
+                : "";
+
+        if (isImg) {
+            return `<img src="/uploads/${i.filename}" style="max-width:200px;border-radius:6px"><br>
+                <a href="/uploads/${i.filename}" target="_blank">${i.filename}</a>${sizeTag}`;
+        }
+        return `<a href="/uploads/${i.filename}" target="_blank">${i.filename}</a>${sizeTag}`;
+    }
+
+    const isLink = i.content && i.content.startsWith("http");
+    if (isLink) return `<a href="${i.content}" target="_blank">${i.content}</a>`;
+    return renderText(i.content);
+}
+
+function buildItemEl(i) {
+    const div = document.createElement("div");
+    div.className = "item";
+
+    if (newItemIds.has(i.id) && !i.pinned) {
+        div.classList.add("item-new");
+        setTimeout(() => {
+            div.classList.remove("item-new");
+            newItemIds.delete(i.id);
+        }, 4000);
+    }
+    div.dataset.itemId = i.id;
+
+    const content = buildItemContent(i);
+    const isFile = i.type === "file";
+    const dataValue = isFile
+        ? `/uploads/${i.filename}`
+        : (i.content || "").replace(/"/g, "&quot;");
+    const tooltip = isFile ? "Click to download" : "Click to copy";
+
+    // contextual slot — preview for files, edit for text, nothing otherwise
+    const contextualBtn = getPreviewType(i.filename) !== "none" && getPreviewType(i.filename) !== "image"
+        ? `<button class="icon-btn" id="prevbtn-${i.id}"
+           onclick="togglePreview(${i.id}, '${i.filename}')"
+           title="Preview"><i data-lucide="eye"></i></button>`
+        : !isFile
+            ? `<button class="icon-btn" onclick="editContent(${i.id})" title="Edit content"><i data-lucide="pencil-line"></i></button>`
+            : "";
+
+    const titleHtml = i.title
+        ? `<div class="item-title" id="item-title-${i.id}">${escapeHtml(i.title)}</div>`
+        : `<div class="item-title" id="item-title-${i.id}" style="display:none"></div>`;
+
+    div.innerHTML = `
+    <div class="item-top">
+        <div class="left"
+             data-tooltip="${tooltip}"
+             data-type="${isFile ? "file" : "text"}"
+             data-value="${dataValue}">
+            ${titleHtml}
+            ${content}
+            <div class="meta">
+                ${i.uploader}
+                <span class="seen-count" id="seen-${i.id}" style="display:none">👁 <span class="seen-num"></span></span>
+                ${getExpiryBadge(i.created_at)}
+            </div>
+        </div>
+        <div class="item-actions">
+            ${contextualBtn}
+            <button class="icon-btn ${i.pinned ? "pinned" : ""}" onclick="pin(${i.id})" title="${i.pinned ? "Unpin" : "Pin"}">
+                <i data-lucide="${i.pinned ? "pin-off" : "pin"}"></i>
+            </button>
+            <button class="icon-btn delete" onclick="del(${i.id}, ${i.pinned})" title="Delete">
+                <i data-lucide="trash-2"></i>
+            </button>
+            <div class="more-wrapper">
+                <button class="icon-btn more-btn" onclick="toggleMoreMenu(event, ${i.id}, '${i.channel}')" title="More">
+                    <i data-lucide="more-vertical"></i>
+                </button>
+                <div class="more-dropdown">
+                    <button onclick="editTitle(${i.id})">
+                        <i data-lucide="tag"></i> Add / edit title
+                    </button>
+                    <div class="menu-divider"></div>
+                    <div class="dropdown-label">Move to</div>
+                    <div class="move-list"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="preview-panel" id="preview-${i.id}"></div>`;
+
+    seenObserver.observe(div);
+    if (typeof lucide !== "undefined") lucide.createIcons({ nodes: [div] });
+    return div;
+}
+
+function editTitle(id) {
+    const titleEl = document.getElementById("item-title-" + id);
+    if (!titleEl) return;
+
+    const current = titleEl.dataset.value || titleEl.innerText.trim();
+
+    const input = document.createElement("input");
+    input.type = "text";
+    input.className = "title-input";
+    input.value = current;
+    input.placeholder = "Add a title...";
+    input.maxLength = 100;
+
+    titleEl.replaceWith(input);
+    input.focus();
+    input.select();
+
+    async function save() {
+        const newTitle = input.value.trim();
+        const res = await fetch(`/item/${id}/title`, {
+            method: "PATCH",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ title: newTitle })
+        });
+        if (!res.ok) { restore(); return; }
+
+        const fresh = document.createElement("div");
+        fresh.className = "item-title";
+        fresh.id = "item-title-" + id;
+        if (newTitle) {
+            fresh.innerText = newTitle;
+            fresh.style.display = "";
+        } else {
+            fresh.style.display = "none";
+        }
+        input.replaceWith(fresh);
+    }
+
+    function restore() {
+        const fresh = document.createElement("div");
+        fresh.className = "item-title";
+        fresh.id = "item-title-" + id;
+        if (current) {
+            fresh.innerText = current;
+            fresh.style.display = "";
+        } else {
+            fresh.style.display = "none";
+        }
+        input.replaceWith(fresh);
+    }
+
+    input.addEventListener("keydown", e => {
+        if (e.key === "Enter") { e.preventDefault(); save(); }
+        if (e.key === "Escape") { e.preventDefault(); restore(); }
+    });
+
+    input.addEventListener("blur", save);
+}
+
+function editContent(id) {
+    const itemEl = document.querySelector(`.item[data-item-id="${id}"]`);
+    if (!itemEl) return;
+
+    const leftEl = itemEl.querySelector(".left");
+    if (!leftEl) return;
+
+    // grab current raw content from data-value
+    const current = leftEl.dataset.value || "";
+
+    // find the content node — everything except .meta and .item-title
+    const metaEl = leftEl.querySelector(".meta");
+    const titleEl = leftEl.querySelector(".item-title");
+
+    // collect content nodes (not meta, not title)
+    const contentNodes = Array.from(leftEl.childNodes).filter(n => {
+        if (n === metaEl) return false;
+        if (n === titleEl) return false;
+        return true;
+    });
+
+    // replace content nodes with textarea
+    const textarea = document.createElement("textarea");
+    textarea.className = "edit-textarea";
+    textarea.value = current;
+
+    contentNodes.forEach(n => n.remove());
+    leftEl.insertBefore(textarea, metaEl);
+    textarea.focus();
+
+    // auto-height
+    textarea.style.height = Math.max(80, textarea.scrollHeight) + "px";
+    textarea.addEventListener("input", () => {
+        textarea.style.height = "auto";
+        textarea.style.height = textarea.scrollHeight + "px";
+    });
+
+    let done = false;
+
+    async function save() {
+        if (done) return;
+        done = true;
+
+        const newContent = textarea.value.trim();
+        if (!newContent) { restore(); return; }
+        if (newContent === current) { restore(); return; }
+
+        const res = await fetch(`/item/${id}/content`, {
+            method: "PATCH",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ content: newContent })
+        });
+
+        if (!res.ok) { done = false; restore(); return; }
+
+        leftEl.dataset.value = newContent;
+        restoreWithContent(newContent);
+    }
+
+    function restore() {
+        if (done) return;
+        done = true;
+        restoreWithContent(current);
+    }
+
+    function restoreWithContent(text) {
+        textarea.remove();
+
+        const isLink = text.startsWith("http");
+        let node;
+        if (isLink) {
+            node = document.createElement("a");
+            node.href = text;
+            node.target = "_blank";
+            node.innerText = text;
+        } else {
+            const wrap = document.createElement("div");
+            wrap.innerHTML = renderText(text);
+            node = wrap;
+        }
+
+        leftEl.insertBefore(node, metaEl);
+    }
+
+    textarea.addEventListener("keydown", e => {
+        // Ctrl+Enter or Cmd+Enter saves
+        if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+            e.preventDefault();
+            save();
+        }
+        if (e.key === "Escape") {
+            e.preventDefault();
+            restore();
+        }
+    });
+
+    // blur saves only if focus didn't move to another part of same item
+    textarea.addEventListener("blur", e => {
+        setTimeout(() => {
+            if (!itemEl.contains(document.activeElement)) {
+                save();
+            }
+        }, 150);
+    });
 }
 
 function render(data) {
@@ -421,79 +861,12 @@ function render(data) {
         return;
     }
 
-    data.forEach(i => {
-        const div = document.createElement("div");
-        div.className = "item";
-        div.dataset.itemId = i.id;
-
-        let content = "";
-
-        if (i.type === "file") {
-            const isImg = i.filename.match(/\.(jpg|png|jpeg|gif)$/i);
-            const sizeLabel = formatSize(i.size);
-            const sizeClass = getSizeTag(i.size);
-            const sizeTag = sizeClass
-                ? `<span class="size-tag ${sizeClass}">${sizeLabel}</span>`
-                : sizeLabel
-                    ? `<span style="font-size:11px;color:#9ca3af;margin-left:6px;">${sizeLabel}</span>`
-                    : "";
-
-            if (isImg) {
-                content = `<img src="/uploads/${i.filename}" style="max-width:200px;border-radius:6px"><br>
-        <a href="/uploads/${i.filename}" target="_blank">${i.filename}</a>${sizeTag}`;
-            } else {
-                content = `<a href="/uploads/${i.filename}" target="_blank">${i.filename}</a>${sizeTag}`;
-            }
-        } else {
-            const isLink = i.content && i.content.startsWith("http");
-            if (isLink) {
-                content = `<a href="${i.content}" target="_blank">${i.content}</a>`;
-            } else {
-                content = renderText(i.content);
-            }
-        }
-
-        const pinText = i.pinned ? "unpin" : "pin";
-
-        const isFile = i.type === "file";
-        const clickValue = isFile
-            ? `/uploads/${i.filename}`
-            : i.content;
-        const tooltip = isFile ? "Click to download" : "Click to copy";
-
-        div.innerHTML = `
-  <div class="item-top">
-    <div class="left"
-     data-tooltip="${i.type === 'file' ? 'Click to download' : 'Click to copy'}"
-     data-type="${i.type === 'file' ? 'file' : 'text'}"
-data-value="${i.type === 'file'
-                ? `/uploads/${i.filename}`
-                : (i.content || '').replace(/"/g, '&quot;')}">
-  ${content}
-  <div class="meta">${i.uploader}</div>
-</div>
-    <div class="item-actions">
-     ${getPreviewType(i.filename) !== "none" && getPreviewType(i.filename) !== "image"
-                ? `<button class="icon-btn" id="prevbtn-${i.id}"
-       onclick="togglePreview(${i.id}, '${i.filename}')"
-       title="Preview">👁</button>`
-                : ""}
-      <button class="icon-btn" onclick="pin(${i.id})" title="${i.pinned ? 'Unpin' : 'Pin'}">
-        ${i.pinned ? "📍" : "📌"}
-      </button>
-      <div class="move-wrapper">
-        <button class="icon-btn" title="Move to channel"
-          onclick="toggleMoveDropdown(event, ${i.id}, '${i.channel}')">⇄</button>
-        <div class="move-dropdown"></div>
-      </div>
-      <button class="icon-btn delete" onclick="del(${i.id}, ${i.pinned})" title="Delete">🗑</button>
+    data.forEach(i => el.appendChild(buildItemEl(i)));
+}
 
-    </div>
-  </div>
-  <div class="preview-panel" id="preview-${i.id}"></div>
-`;
-        el.appendChild(div);
-    });
+function renderMore(data) {
+    const el = document.getElementById("items");
+    data.forEach(i => el.appendChild(buildItemEl(i)));
 }
 
 function renderGrouped(data) {
@@ -505,7 +878,6 @@ function renderGrouped(data) {
         return;
     }
 
-    // group by channel
     const grouped = {};
     data.forEach(item => {
         if (!grouped[item.channel]) grouped[item.channel] = [];
@@ -515,86 +887,11 @@ function renderGrouped(data) {
     Object.keys(grouped).forEach(ch => {
         const section = document.createElement("div");
         section.style.marginTop = "20px";
-
         section.innerHTML = `
-      <div style="font-size:13px;font-weight:600;color:#6b7280;margin-bottom:8px;">
-        ${ch.toUpperCase()}
-      </div>
-    `;
-
-        grouped[ch].forEach(i => {
-            const div = document.createElement("div");
-            div.className = "item";
-            div.dataset.itemId = i.id;
-
-            let content = "";
-
-            if (i.type === "file") {
-                const isImg = i.filename.match(/\.(jpg|png|jpeg|gif)$/i);
-                const sizeLabel = formatSize(i.size);
-                const sizeClass = getSizeTag(i.size);
-                const sizeTag = sizeClass
-                    ? `<span class="size-tag ${sizeClass}">${sizeLabel}</span>`
-                    : sizeLabel
-                        ? `<span style="font-size:11px;color:#9ca3af;margin-left:6px;">${sizeLabel}</span>`
-                        : "";
-
-                if (isImg) {
-                    content = `<img src="/uploads/${i.filename}" style="max-width:200px;border-radius:6px"><br>
-        <a href="/uploads/${i.filename}" target="_blank">${i.filename}</a>${sizeTag}`;
-                } else {
-                    content = `<a href="/uploads/${i.filename}" target="_blank">${i.filename}</a>${sizeTag}`;
-                }
-            } else {
-                const isLink = i.content && i.content.startsWith("http");
-                if (isLink) {
-                    content = `<a href="${i.content}" target="_blank">${i.content}</a>`;
-                } else {
-                    content = renderText(i.content);
-                }
-            }
-
-            const isFile = i.type === "file";
-            const clickValue = isFile
-                ? `/uploads/${i.filename}`
-                : i.content;
-            const tooltip = isFile ? "Click to download" : "Click to copy";
-
-            div.innerHTML = `
-  <div class="item-top">
-    <div class="left"
-     data-tooltip="${i.type === 'file' ? 'Click to download' : 'Click to copy'}"
-     data-type="${i.type === 'file' ? 'file' : 'text'}"
-data-value="${i.type === 'file'
-                    ? `/uploads/${i.filename}`
-                    : (i.content || '').replace(/"/g, '&quot;')}">
-  ${content}
-  <div class="meta">${i.uploader}</div>
-</div>
-    <div class="item-actions">
-      ${getPreviewType(i.filename) !== "none" && getPreviewType(i.filename) !== "image"
-                    ? `<button class="icon-btn" id="prevbtn-${i.id}"
-       onclick="togglePreview(${i.id}, '${i.filename}')"
-       title="Preview">👁</button>`
-                    : ""}
-      <button class="icon-btn" onclick="pin(${i.id})" title="${i.pinned ? 'Unpin' : 'Pin'}">
-        ${i.pinned ? "📍" : "📌"}
-      </button>
-      <div class="move-wrapper">
-        <button class="icon-btn" title="Move to channel"
-          onclick="toggleMoveDropdown(event, ${i.id}, '${i.channel}')">⇄</button>
-        <div class="move-dropdown"></div>
-      </div>
-      <button class="icon-btn delete" onclick="del(${i.id}, ${i.pinned})" title="Delete">🗑</button>
-
-    </div>
-  </div>
-  <div class="preview-panel" id="preview-${i.id}"></div>
-`;
-
-            section.appendChild(div);
-        });
-
+            <div style="font-size:13px;font-weight:600;color:#6b7280;margin-bottom:8px;">
+                ${ch.toUpperCase()}
+            </div>`;
+        grouped[ch].forEach(i => section.appendChild(buildItemEl(i)));
         el.appendChild(section);
     });
 }
@@ -625,7 +922,7 @@ function changeName() {
     if (!n) return;
     uploader = n;
     localStorage.setItem("name", n);
-    document.getElementById("who").innerText = "You: " + uploader;
+    document.getElementById("who").innerText = uploader;
 }
 
 let qrLoaded = false;
@@ -719,6 +1016,18 @@ function hideUndoToast() {
     progress.classList.remove("running");
 }
 
+
+// prime AudioContext on first interaction so chime works immediately after
+let audioContextPrimed = false;
+document.addEventListener("click", () => {
+    if (audioContextPrimed) return;
+    try {
+        const ctx = new (window.AudioContext || window.webkitAudioContext)();
+        ctx.resume().then(() => ctx.close());
+        audioContextPrimed = true;
+    } catch (e) { }
+}, { once: false });
+
 async function pin(id) {
     await fetch("/pin/" + id, { method: "POST" });
     load();
@@ -731,7 +1040,15 @@ async function logout() {
 }
 
 socket.on("new-item", item => {
-    if (item.channel === channel) load();
+    if (item.channel === channel) {
+        if (!item.pinned) newItemIds.add(item.id);
+        load();
+        if (item.uploader !== uploader) playChime();
+    } else if (item.uploader !== uploader) {
+        if (!item.pinned) newItemIds.add(item.id);
+        unreadChannels.add(item.channel);
+        renderChannels();
+    }
 });
 
 socket.on("delete-item", id => {
@@ -747,6 +1064,61 @@ socket.on("delete-item", id => {
     }
 });
 
+socket.on("item-updated", ({ id, title, content, edited_at }) => {
+    if (title !== undefined) {
+        const titleEl = document.getElementById("item-title-" + id);
+        if (titleEl) {
+            titleEl.innerText = title;
+            titleEl.style.display = title ? "" : "none";
+        }
+    }
+
+    if (content !== undefined) {
+        const itemEl = document.querySelector(`.item[data-item-id="${id}"]`);
+        if (!itemEl) return;
+        const leftEl = itemEl.querySelector(".left");
+        if (!leftEl) return;
+
+        // only update if not currently being edited
+        if (leftEl.querySelector(".edit-textarea")) return;
+
+        leftEl.dataset.value = content;
+
+        const metaEl = leftEl.querySelector(".meta");
+        const titleEl = leftEl.querySelector(".item-title");
+        Array.from(leftEl.childNodes).forEach(n => {
+            if (n !== metaEl && n !== titleEl) n.remove();
+        });
+
+        const isLink = content.startsWith("http");
+        if (isLink) {
+            const a = document.createElement("a");
+            a.href = content;
+            a.target = "_blank";
+            a.innerText = content;
+            leftEl.insertBefore(a, metaEl);
+        } else {
+            const wrap = document.createElement("div");
+            wrap.innerHTML = renderText(content);
+            leftEl.insertBefore(wrap, metaEl);
+        }
+    }
+});
+
+socket.on("seen-update", ({ id, count }) => {
+    const el = document.getElementById("seen-" + id);
+    if (!el) return;
+    if (count >= 2) {
+        el.querySelector(".seen-num").innerText = count;
+        el.style.display = "";
+    }
+});
+
+socket.on("user-count", count => {
+    const el = document.getElementById("onlineCount");
+    if (el) el.textContent = `● ${count} online`;
+});
+
 socket.on("item-moved", ({ id, channel: toChannel }) => {
     if (toChannel !== channel) {
         // item left this channel — remove it from view
@@ -793,15 +1165,17 @@ document.getElementById("search").addEventListener("input", async e => {
     const q = e.target.value.trim();
 
     if (!q) {
+        document.getElementById("loadMoreWrapper").style.display = "none";
         highlight();
         load();
         return;
     }
 
-    // remove active tab highlight while searching
     document.querySelectorAll(".channels button")
         .forEach(b => b.classList.remove("active"));
 
+    document.getElementById("loadMoreWrapper").style.display = "none";
+
     const res = await fetch(`/search/${q}`);
     const data = await res.json();
     renderGrouped(data);
@@ -814,6 +1188,26 @@ document.addEventListener("paste", async e => {
     // if user is typing in input, don't auto-send
     if (active && active.id === "msg") return;
 
+    // check for image in clipboard first
+    const items = e.clipboardData.items;
+    for (const item of items) {
+        if (item.type.startsWith("image/")) {
+            const file = item.getAsFile();
+            if (!file) continue;
+
+            // give it a meaningful name with timestamp
+            const ext = item.type.split("/")[1] || "png";
+            const named = new File(
+                [file],
+                `pasted-${Date.now()}.${ext}`,
+                { type: item.type }
+            );
+            uploadFiles([named]);
+            return; // image found, don't fall through to text
+        }
+    }
+
+    // no image — handle as text
     const text = e.clipboardData.getData("text");
     if (!text) return;
 
@@ -976,6 +1370,12 @@ function renderChannels() {
             btn.appendChild(dot);
         }
 
+        if (unreadChannels.has(ch.name)) {
+            const unread = document.createElement("span");
+            unread.className = "ch-unread-dot";
+            btn.appendChild(unread);
+        }
+
         const more = document.createElement("span");
         more.className = "ch-more";
         more.innerText = "⋯";
@@ -1179,6 +1579,7 @@ document.addEventListener("keydown", e => {
     if (!info.hasAuth) {
         document.getElementById("logoutBtn").style.display = "none";
     }
+    retention = info.retention; // null if "never", ms value otherwise
     await loadChannels();
     load();
 })();