instbyte 1.8.0 → 1.9.1

package/client/js/app.js

@@ -2,6 +2,37 @@ 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)
@@ -89,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";
@@ -97,6 +129,33 @@ 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)();
@@ -265,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
@@ -307,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>`;
         }
     }
 }
@@ -379,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",
@@ -467,158 +584,291 @@ async function loadMore() {
     await load(false);
 }
 
-function render(data) {
-    const el = document.getElementById("items");
-    el.innerHTML = "";
+// ========================
+// 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}`;
+    }
 
-    if (!data.length) {
-        el.innerHTML = `<div class="empty-state">Nothing here yet — paste, type, or drop a file to share</div>`;
-        return;
+    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>`;
 
-    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}`;
-            }
+    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 {
-            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);
-            }
+            fresh.style.display = "none";
         }
+        input.replaceWith(fresh);
+    }
 
-        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>
+    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);
+    }
 
-    </div>
-  </div>
-  <div class="preview-panel" id="preview-${i.id}"></div>
-`;
-        el.appendChild(div);
+    input.addEventListener("keydown", e => {
+        if (e.key === "Enter") { e.preventDefault(); save(); }
+        if (e.key === "Escape") { e.preventDefault(); restore(); }
     });
+
+    input.addEventListener("blur", save);
 }
 
-function renderMore(data) {
-    const el = document.getElementById("items");
-    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}`;
-            }
+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 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 wrap = document.createElement("div");
+            wrap.innerHTML = renderText(text);
+            node = wrap;
         }
 
-        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>`;
+        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();
+        }
+    });
 
-        el.appendChild(div);
+    // 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) {
+    const el = document.getElementById("items");
+    el.innerHTML = "";
+
+    if (!data.length) {
+        el.innerHTML = `<div class="empty-state">Nothing here yet — paste, type, or drop a file to share</div>`;
+        return;
+    }
+
+    data.forEach(i => el.appendChild(buildItemEl(i)));
+}
+
+function renderMore(data) {
+    const el = document.getElementById("items");
+    data.forEach(i => el.appendChild(buildItemEl(i)));
+}
+
 function renderGrouped(data) {
     const el = document.getElementById("items");
     el.innerHTML = "";
@@ -628,7 +878,6 @@ function renderGrouped(data) {
         return;
     }
 
-    // group by channel
     const grouped = {};
     data.forEach(item => {
         if (!grouped[item.channel]) grouped[item.channel] = [];
@@ -638,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);
     });
 }
@@ -867,10 +1041,11 @@ async function logout() {
 
 socket.on("new-item", item => {
     if (item.channel === channel) {
+        if (!item.pinned) newItemIds.add(item.id);
         load();
         if (item.uploader !== uploader) playChime();
     } else if (item.uploader !== uploader) {
-        // item arrived in a different channel — mark it unread
+        if (!item.pinned) newItemIds.add(item.id);
         unreadChannels.add(item.channel);
         renderChannels();
     }
@@ -889,6 +1064,56 @@ 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`;
@@ -963,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;
 
@@ -1005,13 +1250,32 @@ async function uploadFiles(files) {
             const xhr = new XMLHttpRequest();
             xhr.open("POST", "/upload", true);
 
+            // Stall detection — if no progress for 30s, the connection is dead.
+            // We don't use xhr.timeout because that would kill legitimate large
+            // file uploads on slow LANs.
+            // Instead we track the last progress event and abort if nothing moves for 30 seconds.
+            const STALL_MS = 30_000;
+            let stallTimer = null;
+
+            function resetStallTimer() {
+                clearTimeout(stallTimer);
+                stallTimer = setTimeout(() => {
+                    xhr.abort();
+                    text.innerText = `⚠ ${file.name} stalled — skipped`;
+                    bar.style.width = "0%";
+                    setTimeout(resolve, 1200);
+                }, STALL_MS);
+            }
+
             xhr.upload.onprogress = e => {
                 if (e.lengthComputable) {
                     bar.style.width = Math.round((e.loaded / e.total) * 100) + "%";
                 }
+                resetStallTimer(); // data is moving, push the timer out
             };
 
             xhr.onload = () => {
+                clearTimeout(stallTimer);
                 if (xhr.status === 413) {
                     text.innerText = `⚠ ${file.name} is too large — skipped`;
                     bar.style.width = "0%";
@@ -1022,11 +1286,21 @@ async function uploadFiles(files) {
             };
 
             xhr.onerror = () => {
+                clearTimeout(stallTimer);
                 text.innerText = `⚠ ${file.name} failed — skipped`;
                 bar.style.width = "0%";
                 setTimeout(resolve, 1200);
             };
 
+            xhr.onabort = () => {
+                clearTimeout(stallTimer);
+                // ontimeout/stall already set the message — only handle
+                // explicit user-triggered aborts here if we add a cancel
+                // button in future. For now just resolve to unblock queue.
+                resolve();
+            };
+
+            resetStallTimer(); // start timer — covers stall before first progress
             xhr.send(form);
         });
     }
@@ -1334,6 +1608,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();
 })();