instbyte 1.9.1 → 1.9.3

package/client/js/app.js

@@ -1,1614 +1,1649 @@
-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)
-// ========================
-const THEME_KEY = "instbyte_theme";
-const mq = window.matchMedia("(prefers-color-scheme: dark)");
-
-function getStoredTheme() {
-    return localStorage.getItem(THEME_KEY) || "auto";
-}
-
-function applyTheme(theme) {
-    const root = document.documentElement;
-    const btn = document.getElementById("themeToggle");
-
-    // Apply attribute EXACTLY
-    if (theme === "dark") {
-        root.setAttribute("data-theme", "dark");
-    } else if (theme === "light") {
-        root.setAttribute("data-theme", "light");
-    } else {
-        root.removeAttribute("data-theme"); // auto
-    }
-
-    if (!btn) return;
-
-    // Update icon based on CURRENT stored state
-    if (theme === "dark") btn.textContent = "☀️";
-    else if (theme === "light") btn.textContent = "🌙";
-    else {
-        btn.textContent = mq.matches ? "☀️" : "🌙";
-    }
-}
-
-function cycleTheme() {
-    const current = getStoredTheme();
-
-    let next;
-    if (current === "dark") next = "light";
-    else if (current === "light") next = "dark";
-    else next = "dark"; // auto → dark first
-
-    localStorage.setItem(THEME_KEY, next);
-    applyTheme(next);
-}
-
-// INITIAL LOAD
-applyTheme(getStoredTheme());
-
-// OS change listener (only when auto)
-mq.addEventListener("change", () => {
-    if (getStoredTheme() === "auto") {
-        applyTheme("auto");
-    }
-});
-
-async function applyBranding() {
-    try {
-        const res = await fetch("/branding");
-        const b = await res.json();
-
-        // Update page title and app name
-        document.title = b.appName;
-        const nameEl = document.getElementById("appName");
-        if (nameEl) nameEl.innerText = b.appName;
-
-        // Update logo src to dynamic route
-        const logoEl = document.getElementById("appLogo");
-        if (logoEl) logoEl.src = "/logo-dynamic.png";
-
-        // Inject CSS variables
-        const p = b.palette;
-        const root = document.documentElement;
-        root.style.setProperty("--color-primary", p.primary);
-        root.style.setProperty("--color-primary-hover", p.primaryHover);
-        root.style.setProperty("--color-primary-light", p.primaryLight);
-        root.style.setProperty("--color-primary-dark", p.primaryDark);
-        root.style.setProperty("--color-on-primary", p.onPrimary);
-        root.style.setProperty("--color-secondary", p.secondary);
-        root.style.setProperty("--color-secondary-hover", p.secondaryHover);
-        root.style.setProperty("--color-secondary-light", p.secondaryLight);
-        root.style.setProperty("--color-on-secondary", p.onSecondary);
-
-    } catch (e) {
-        // Branding failed — default styles remain, no crash
-    }
-}
-
-function formatSize(bytes) {
-    if (!bytes) return "";
-    if (bytes >= 1024 ** 3) return (bytes / 1024 ** 3).toFixed(1) + " GB";
-    if (bytes >= 1024 ** 2) return (bytes / 1024 ** 2).toFixed(1) + " MB";
-    if (bytes >= 1024) return (bytes / 1024).toFixed(1) + " KB";
-    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);
-    if (mb > 1024) return "danger-dark";
-    if (mb > 500) return "danger-light";
-    if (mb > 100) return "warn";
-    return "";
-}
-
-// Configure marked
-marked.setOptions({
-    breaks: true,
-    gfm: true
-});
-
-function looksLikeMarkdown(text) {
-    return /^#{1,3} |[*_`~]|\[.+\]\(.+\)|^[-*+] |^\d+\. |^```/m.test(text);
-}
-
-function renderText(text) {
-    if (!text) return "";
-    if (looksLikeMarkdown(text)) {
-        const html = marked.parse(text);
-        // highlight code blocks after parse
-        const wrap = document.createElement("div");
-        wrap.innerHTML = html;
-        wrap.querySelectorAll("pre code").forEach(el => hljs.highlightElement(el));
-        return `<div class="markdown-body">${wrap.innerHTML}</div>`;
-    }
-    // plain text — just escape and preserve newlines
-    return text
-        .replace(/&/g, "&amp;")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;")
-        .replace(/\n/g, "<br>");
-}
-
-const TEXT_EXTENSIONS = [
-    'txt', 'md', 'js', 'ts', 'jsx', 'tsx', 'json', 'json5',
-    'css', 'html', 'htm', 'xml', 'svg', 'sh', 'bash', 'zsh',
-    'py', 'rb', 'php', 'java', 'c', 'cpp', 'h', 'cs', 'go',
-    'rs', 'swift', 'kt', 'yaml', 'yml', 'toml', 'ini', 'env',
-    'gitignore', 'dockerfile', 'sql', 'csv', 'log'
-];
-
-const MAX_TEXT_PREVIEW_BYTES = 50 * 1024; // 50KB — beyond this we warn
-const MAX_TEXT_LINES = 200;
-
-function getPreviewType(filename) {
-    if (!filename) return "none";
-    const ext = filename.split(".").pop().toLowerCase();
-    if (/^(jpg|jpeg|png|gif|webp|bmp|svg)$/.test(ext)) return "image";
-    if (/^(mp4|webm|ogg|mov)$/.test(ext)) return "video";
-    if (/^(mp3|wav|ogg|m4a|flac|aac)$/.test(ext)) return "audio";
-    if (ext === "pdf") return "pdf";
-    if (TEXT_EXTENSIONS.includes(ext)) return "text";
-    return "none";
-}
-
-function getLanguage(filename) {
-    const ext = filename.split(".").pop().toLowerCase();
-    const map = {
-        js: "javascript", ts: "typescript", jsx: "javascript",
-        tsx: "typescript", py: "python", rb: "ruby", php: "php",
-        java: "java", c: "c", cpp: "cpp", h: "c", cs: "csharp",
-        go: "go", rs: "rust", swift: "swift", kt: "kotlin",
-        html: "html", htm: "html", css: "css", json: "json",
-        json5: "json", xml: "xml", svg: "xml", sh: "bash",
-        bash: "bash", zsh: "bash", yaml: "yaml", yml: "yaml",
-        toml: "toml", sql: "sql", md: "markdown", csv: "plaintext",
-        txt: "plaintext", log: "plaintext", env: "plaintext",
-        dockerfile: "dockerfile"
-    };
-    return map[ext] || "plaintext";
-}
-
-let openPreviewId = null;
-
-async function togglePreview(id, filename) {
-    const panel = document.getElementById("preview-" + id);
-    const btn = document.getElementById("prevbtn-" + id);
-    if (!panel || !btn) return;
-
-    const isOpen = panel.classList.contains("open");
-
-    // Close any other open preview first
-    if (openPreviewId && openPreviewId !== id) {
-        const otherPanel = document.getElementById("preview-" + openPreviewId);
-        const otherBtn = document.getElementById("prevbtn-" + openPreviewId);
-        if (otherPanel) otherPanel.classList.remove("open");
-        if (otherBtn) otherBtn.classList.remove("preview-active");
-    }
-
-    if (isOpen) {
-        panel.classList.remove("open");
-        btn.classList.remove("preview-active");
-        openPreviewId = null;
-        return;
-    }
-
-    // Open this one
-    panel.classList.add("open");
-    btn.classList.add("preview-active");
-    openPreviewId = id;
-
-    // Only build content once
-    if (panel.dataset.loaded) return;
-    panel.dataset.loaded = "true";
-
-    const type = getPreviewType(filename);
-    const url = `/uploads/${filename}`;
-
-    if (type === "image") {
-        panel.innerHTML = `<img src="${url}" alt="${filename}">`;
-
-    } else if (type === "video") {
-        panel.innerHTML = `
-      <video controls preload="metadata">
-        <source src="${url}">
-        Your browser doesn't support video preview.
-      </video>`;
-
-    } else if (type === "audio") {
-        panel.innerHTML = `
-      <audio controls preload="metadata">
-        <source src="${url}">
-        Your browser doesn't support audio preview.
-      </audio>`;
-
-    } else if (type === "pdf") {
-        panel.innerHTML = `<embed src="${url}" type="application/pdf">`;
-
-    } else if (type === "text") {
-        panel.innerHTML = `<div class="preview-loading">Loading...</div>`;
-
-        try {
-            const res = await fetch(url);
-            if (!res.ok) throw new Error("Failed to load");
-
-            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>`;
-                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
-                ? lines.slice(0, MAX_TEXT_LINES).join("\n")
-                : text;
-
-            const lang = getLanguage(filename);
-            const code = document.createElement("code");
-            code.className = `language-${lang}`;
-            code.textContent = preview;
-
-            const pre = document.createElement("pre");
-            pre.appendChild(code);
-            hljs.highlightElement(code);
-
-            panel.innerHTML = "";
-            panel.appendChild(pre);
-
-            if (truncated) {
-                const note = document.createElement("div");
-                note.className = "preview-truncated";
-                note.innerHTML = `Showing first ${MAX_TEXT_LINES} of ${lines.length} lines. <a href="${url}" target="_blank">View full file</a>`;
-                panel.appendChild(note);
-            }
-
-        } catch (err) {
-            panel.innerHTML = `
-          <div class="preview-error">
-            Could not load preview. <a href="${url}" target="_blank">Open directly</a>
-          </div>`;
-        }
-    }
-}
-
-function handleRowClick(el, type, value) {
-    if (type === "text") {
-        navigator.clipboard.writeText(value).then(() => {
-            el.classList.add("flash");
-            setTimeout(() => el.classList.remove("flash"), 800);
-        });
-    } else {
-        const a = document.createElement("a");
-        a.href = value;
-        a.download = "";
-        a.click();
-    }
-}
-
-document.getElementById("items").addEventListener("click", e => {
-    const left = e.target.closest(".left");
-    if (!left) return;
-    const type = left.dataset.type;
-    const value = left.dataset.value;
-    handleRowClick(left, type, value);
-});
-
-let openDropdown = null;
-
-let pendingDeleteId = null;
-let pendingDeleteTimer = null;
-let pendingDeleteEl = null;
-
-function toggleMoveDropdown(e, id, currentChannel) {
-    e.stopPropagation();
-
-    // close any open one first
-    if (openDropdown && openDropdown !== e.currentTarget.nextElementSibling) {
-        openDropdown.classList.remove("open");
-    }
-
-    const dropdown = e.currentTarget.nextElementSibling;
-    const isOpen = dropdown.classList.contains("open");
-
-    if (isOpen) {
-        dropdown.classList.remove("open");
-        openDropdown = null;
-        return;
-    }
-
-    // build channel list fresh each time (channels may have changed)
-    const others = channels.filter(c => c.name !== currentChannel);
-    dropdown.innerHTML = `<div class="dropdown-label">Move to</div>`;
-
-    others.forEach(ch => {
-        const btn = document.createElement("button");
-        btn.innerText = ch.name;
-        btn.onclick = (ev) => {
-            ev.stopPropagation();
-            moveItem(id, ch.name);
-            dropdown.classList.remove("open");
-            openDropdown = null;
-        };
-        dropdown.appendChild(btn);
-    });
-
-    dropdown.classList.add("open");
-    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",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ channel: toChannel })
-    });
-    // socket will handle the re-render via item-moved event
-}
-
-document.addEventListener("click", () => {
-    if (openDropdown) {
-        openDropdown.classList.remove("open");
-        openDropdown = null;
-    }
-});
-
-let channel = null;
-let channels = [];
-let unreadChannels = new Set();
-
-let uploader = localStorage.getItem("name") || "";
-
-async function initName() {
-    if (!uploader || uploader === "null" || uploader.trim() === "") {
-        let suggested = "USER-" + Math.floor(Math.random() * 1000);
-        const ua = navigator.userAgent;
-        if (/android/i.test(ua)) suggested = "Android-" + Math.floor(Math.random() * 1000);
-        else if (/iphone|ipad/i.test(ua)) suggested = "iPhone-" + Math.floor(Math.random() * 1000);
-        else if (/mac/i.test(ua)) suggested = "Mac-" + Math.floor(Math.random() * 1000);
-        else if (/windows/i.test(ua)) suggested = "Windows-" + Math.floor(Math.random() * 1000);
-        else if (/linux/i.test(ua)) suggested = "Linux-" + Math.floor(Math.random() * 1000);
-        else suggested = "User-" + Math.floor(Math.random() * 1000);
-        uploader = prompt("Your name?", suggested) || suggested;
-        localStorage.setItem("name", uploader);
-    }
-    document.getElementById("who").innerText = uploader;
-    socket.emit("join", uploader);
-}
-
-function highlight() {
-    document.querySelectorAll(".channels button")
-        .forEach(b => b.classList.remove("active"));
-    const el = document.getElementById("ch-" + channel);
-    if (el) el.classList.add("active");
-}
-
-function setChannel(c) {
-    // flush any pending delete before switching
-    if (pendingDeleteId !== null) {
-        clearTimeout(pendingDeleteTimer);
-        fetch("/item/" + pendingDeleteId, { method: "DELETE" });
-        pendingDeleteId = null;
-        pendingDeleteTimer = null;
-        pendingDeleteEl = null;
-        hideUndoToast();
-    }
-    unreadChannels.delete(c); // clear unread when switching to channel
-    channel = c;
-    renderChannels();
-    highlight();
-    load();
-}
-
-async function load(resetPage = true) {
-    if (resetPage) currentPage = 1;
-
-    const res = await fetch(`/items/${channel}?page=${currentPage}`);
-    const data = await res.json();
-
-    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) {
-    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 = "";
-
-    if (!data.length) {
-        el.innerHTML = "<div style='color:#6b7280;margin-top:10px;'>No results</div>";
-        return;
-    }
-
-    const grouped = {};
-    data.forEach(item => {
-        if (!grouped[item.channel]) grouped[item.channel] = [];
-        grouped[item.channel].push(item);
-    });
-
-    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 => section.appendChild(buildItemEl(i)));
-        el.appendChild(section);
-    });
-}
-
-async function sendText() {
-    const input = document.getElementById("msg");
-    const text = input.value.trim();
-    if (!text) return;
-
-    await fetch("/text", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ content: text, channel, uploader })
-    });
-
-    input.value = "";
-}
-
-function handleEnter(e) {
-    if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
-        e.preventDefault();
-        sendText();
-    }
-}
-
-function changeName() {
-    const n = prompt("Enter name:");
-    if (!n) return;
-    uploader = n;
-    localStorage.setItem("name", n);
-    document.getElementById("who").innerText = uploader;
-}
-
-let qrLoaded = false;
-
-async function toggleQR() {
-    const card = document.getElementById("qrCard");
-    card.classList.toggle("open");
-
-    if (card.classList.contains("open") && !qrLoaded) {
-        const res = await fetch("/info");
-        const { url } = await res.json();
-        document.getElementById("qrUrl").innerText = url;
-        document.getElementById("qrImg").src =
-            `https://api.qrserver.com/v1/create-qr-code/?size=160x160&data=${encodeURIComponent(url)}`;
-        qrLoaded = true;
-    }
-}
-
-document.addEventListener("click", e => {
-    const widget = document.querySelector(".qr-widget");
-    if (!widget.contains(e.target)) {
-        document.getElementById("qrCard").classList.remove("open");
-    }
-});
-
-const fileInput = document.getElementById("fileInput");
-
-fileInput.onchange = () => {
-    if (fileInput.files.length) uploadFiles(fileInput.files);
-};
-
-async function del(id, pinned) {
-    // pinned items keep confirm dialog
-    if (pinned) {
-        const confirmed = confirm("This item is pinned. Are you sure you want to delete it?");
-        if (!confirmed) return;
-        await fetch("/item/" + id, { method: "DELETE" });
-        return;
-    }
-
-    // if another delete is pending, execute it immediately (don't await — fire and forget)
-    if (pendingDeleteId !== null) {
-        clearTimeout(pendingDeleteTimer);
-        fetch("/item/" + pendingDeleteId, { method: "DELETE" });
-        pendingDeleteId = null;
-        pendingDeleteTimer = null;
-    }
-
-    // optimistically remove from UI
-    const el = document.querySelector(`[data-item-id="${id}"]`);
-    if (el) {
-        pendingDeleteEl = el.outerHTML;
-        el.remove();
-    }
-
-    pendingDeleteId = id;
-    showUndoToast();
-
-    pendingDeleteTimer = setTimeout(async () => {
-        await fetch("/item/" + pendingDeleteId, { method: "DELETE" });
-        pendingDeleteId = null;
-        pendingDeleteTimer = null;
-        pendingDeleteEl = null;
-        hideUndoToast();
-    }, 5000);
-}
-
-function undoDelete() {
-    if (pendingDeleteId === null) return;
-    clearTimeout(pendingDeleteTimer);
-    pendingDeleteId = null;
-    pendingDeleteTimer = null;
-    pendingDeleteEl = null;
-    hideUndoToast();
-    load(); // reload to restore item
-}
-
-function showUndoToast() {
-    const toast = document.getElementById("undoToast");
-    const progress = document.getElementById("undoProgress");
-    progress.classList.remove("running");
-    void progress.offsetWidth; // force reflow to restart animation
-    progress.classList.add("running");
-    toast.classList.add("show");
-}
-
-function hideUndoToast() {
-    const toast = document.getElementById("undoToast");
-    const progress = document.getElementById("undoProgress");
-    toast.classList.remove("show");
-    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();
-}
-
-
-async function logout() {
-    await fetch("/logout", { method: "POST" });
-    window.location.href = "/login";
-}
-
-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) {
-        if (!item.pinned) newItemIds.add(item.id);
-        unreadChannels.add(item.channel);
-        renderChannels();
-    }
-});
-
-socket.on("delete-item", id => {
-    // don't reload if this item is already removed or pending
-    if (id == pendingDeleteId) return;
-    const el = document.querySelector(`[data-item-id="${id}"]`);
-    if (el) el.remove();
-
-    // show empty state if no items left
-    const items = document.getElementById("items");
-    if (items && !items.querySelector(".item")) {
-        items.innerHTML = `<div class="empty-state">Nothing here yet — paste, type, or drop a file to share</div>`;
-    }
-});
-
-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
-        load();
-    }
-});
-
-socket.on("channel-added", (ch) => {
-    if (!channels.find(c => c.name === ch.name)) {
-        channels.push(ch);
-        renderChannels();
-    }
-});
-
-socket.on("channel-deleted", ({ name }) => {
-    channels = channels.filter(c => c.name !== name);
-    if (channel === name) {
-        channel = channels.length ? channels[0].name : null;
-        load();
-    }
-    renderChannels();
-    highlight();
-});
-
-socket.on("channel-renamed", ({ oldName, newName }) => {
-    channels = channels.map(c => c.name === oldName ? { ...c, name: newName } : c);
-    if (channel === oldName) channel = newName;
-    renderChannels();
-    highlight();
-});
-
-socket.on("channel-pin-update", ({ name, pinned }) => {
-    if (pinned) {
-        channels = channels.map(c => c.name === name ? { ...c, pinned } : c);
-        channels.sort((a, b) => (b.pinned ? 1 : 0) - (a.pinned ? 1 : 0));
-        renderChannels();
-        highlight();
-    } else {
-        loadChannels();
-    }
-});
-
-document.getElementById("search").addEventListener("input", async e => {
-    const q = e.target.value.trim();
-
-    if (!q) {
-        document.getElementById("loadMoreWrapper").style.display = "none";
-        highlight();
-        load();
-        return;
-    }
-
-    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);
-});
-
-
-document.addEventListener("paste", async e => {
-    const active = document.activeElement;
-
-    // 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;
-
-    await fetch("/text", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-            content: text,
-            channel,
-            uploader
-        })
-    });
-});
-
-async function uploadFiles(files) {
-    if (!files || !files.length) return;
-
-    const status = document.getElementById("uploadStatus");
-    const bar = document.getElementById("uploadBar");
-    const text = document.getElementById("uploadText");
-
-    const total = files.length;
-    const targetChannel = channel; // capture at start, won't change if user switches
-
-    for (let i = 0; i < total; i++) {
-        const file = files[i];
-
-        status.style.display = "block";
-        bar.style.width = "0%";
-        text.innerText = total > 1
-            ? `Uploading ${i + 1} of ${total} · ${file.name}`
-            : `Uploading: ${file.name}`;
-
-        await new Promise((resolve) => {
-            const form = new FormData();
-            form.append("file", file);
-            form.append("channel", targetChannel);
-            form.append("uploader", uploader);
-
-            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%";
-                    setTimeout(resolve, 1200);
-                    return;
-                }
-                resolve();
-            };
-
-            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);
-        });
-    }
-
-    status.style.display = "none";
-    fileInput.value = "";
-    load();
-}
-
-
-const overlay = document.getElementById("dragOverlay");
-let dragCounter = 0;
-
-/* DRAG ENTER */
-document.addEventListener("dragenter", e => {
-    e.preventDefault();
-    dragCounter++;
-    overlay.style.display = "flex";
-});
-
-/* DRAG LEAVE */
-document.addEventListener("dragleave", e => {
-    dragCounter--;
-    if (dragCounter <= 0) {
-        overlay.style.display = "none";
-        dragCounter = 0;
-    }
-});
-
-/*
-document.getElementById("addChannelBtn").onclick = async () => {
-    if (channels.length >= 10) { alert("Maximum 10 channels allowed"); return; }
-    const name = prompt("Channel name?");
-    if (!name) return;
-
-    const res = await fetch("/channels", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ name })
-    });
-
-    if (!res.ok) { const err = await res.json(); alert(err.error); return; }
-    await loadChannels();
-};
-*/
-
-function addChannelHandler() {
-    return async () => {
-        if (channels.length >= 10) { alert("Maximum 10 channels allowed"); return; }
-        const name = prompt("Channel name?");
-        if (!name) return;
-
-        const res = await fetch("/channels", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ name })
-        });
-
-        if (!res.ok) { const err = await res.json(); alert(err.error); return; }
-        await loadChannels();
-    };
-}
-
-document.getElementById("addChannelBtn").onclick = addChannelHandler();
-document.getElementById("addChannelBtnDesktop").onclick = addChannelHandler();
-
-async function loadChannels() {
-    const res = await fetch("/channels");
-    const data = await res.json();
-    channels = data; // [{ id, name, pinned }]
-    if (!channel && channels.length) channel = channels[0].name;
-    renderChannels();
-    highlight();
-}
-
-
-function renderChannels() {
-    const container = document.getElementById("channels");
-    container.innerHTML = "";
-
-    channels.forEach(ch => {
-        const btn = document.createElement("button");
-        btn.id = "ch-" + ch.name;
-
-        btn.onclick = (e) => {
-            if (e.target.classList.contains("ch-more")) return;
-            setChannel(ch.name);
-        };
-
-        btn.appendChild(document.createTextNode(ch.name));
-
-        if (ch.pinned) {
-            const dot = document.createElement("span");
-            dot.className = "ch-pin-dot";
-            dot.title = "Pinned — protected from deletion";
-            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 = "⋯";
-        more.title = "Channel options";
-        more.onclick = (e) => {
-            e.stopPropagation();
-            showChannelMenu(e, ch);
-        };
-        btn.appendChild(more);
-
-        btn.addEventListener("contextmenu", (e) => {
-            e.preventDefault();
-            showChannelMenu(e, ch);
-        });
-
-        if (ch.name === channel) btn.classList.add("active");
-        container.appendChild(btn);
-    });
-
-}
-
-function showChannelMenu(e, ch) {
-    const menu = document.getElementById("channelMenu");
-
-    menu.innerHTML = `
-    <button onclick="toggleChannelPin('${ch.name}')">
-      ${ch.pinned ? "📍 Unpin channel" : "📌 Pin channel"}
-    </button>
-    <div class="menu-divider"></div>
-    <button onclick="renameChannelPrompt('${ch.name}')">✎&nbsp; Rename</button>
-    <button class="${ch.pinned ? "muted" : "danger"}"
-      ${ch.pinned ? "" : `onclick="deleteChannel('${ch.name}')"`}>
-      🗑&nbsp; Delete${ch.pinned ? " (pinned)" : ""}
-    </button>
-  `;
-
-    menu.style.top = e.clientY + "px";
-    menu.style.left = e.clientX + "px";
-    menu.classList.add("open");
-
-    requestAnimationFrame(() => {
-        const rect = menu.getBoundingClientRect();
-        if (rect.right > window.innerWidth - 8)
-            menu.style.left = (e.clientX - rect.width) + "px";
-        if (rect.bottom > window.innerHeight - 8)
-            menu.style.top = (e.clientY - rect.height) + "px";
-    });
-}
-
-document.addEventListener("click", () => {
-    document.getElementById("channelMenu").classList.remove("open");
-});
-
-document.addEventListener("contextmenu", (e) => {
-    if (!e.target.closest("#channels"))
-        document.getElementById("channelMenu").classList.remove("open");
-});
-
-async function toggleChannelPin(name) {
-    await fetch(`/channels/${name}/pin`, { method: "POST" });
-}
-
-async function renameChannelPrompt(name) {
-    const newName = prompt("Rename channel to:", name);
-    if (!newName || newName.trim() === name) return;
-
-    const res = await fetch("/channels/" + name, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ name: newName.trim() })
-    });
-
-    if (!res.ok) { const err = await res.json(); alert(err.error); }
-}
-
-async function deleteChannel(name) {
-    const confirmed = confirm(`Delete "${name}"? All items will be permanently removed.`);
-    if (!confirmed) return;
-
-    const res = await fetch("/channels/" + name, { method: "DELETE" });
-    if (!res.ok) { const err = await res.json(); alert(err.error); }
-}
-
-/* DRAG OVER */
-document.addEventListener("dragover", e => {
-    e.preventDefault();
-});
-
-/* DROP ANYWHERE */
-document.addEventListener("drop", async e => {
-    e.preventDefault();
-    overlay.style.display = "none";
-    dragCounter = 0;
-
-    const files = e.dataTransfer.files;
-    if (!files.length) return;
-    uploadFiles(files);
-});
-
-// ========================
-// KEYBOARD SHORTCUTS
-// ========================
-document.addEventListener("keydown", e => {
-    const active = document.activeElement;
-    const isTyping = active && (active.id === "msg" || active.id === "search");
-
-    // Ctrl/Cmd + Enter — send message (only when msg is focused)
-    if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
-        if (active && active.id === "msg") {
-            e.preventDefault();
-            e.stopPropagation();
-            sendText();
-        }
-        return;
-    }
-
-    // Ctrl/Cmd + K — focus message input
-    if ((e.ctrlKey || e.metaKey) && e.key === "k") {
-        if (!isTyping) {
-            e.preventDefault();
-            document.getElementById("msg").focus();
-        }
-        return;
-    }
-
-    // / — focus search
-    if (e.key === "/" && !e.ctrlKey && !e.metaKey) {
-        e.preventDefault();
-        const search = document.getElementById("search");
-        search.focus();
-        search.select();
-        return;
-    }
-
-    // Tab — cycle channels
-    if (e.key === "Tab" && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
-        e.preventDefault();
-        if (!channels.length) return;
-        const currentIndex = channels.findIndex(c => c.name === channel);
-        const nextIndex = (currentIndex + 1) % channels.length;
-        setChannel(channels[nextIndex].name);
-        return;
-    }
-
-    // Escape — close state in priority order
-    if (e.key === "Escape") {
-
-        // 1. blur any focused input first
-        if (active && (active.id === "msg" || active.id === "search")) {
-            if (active.id === "search" && active.value) {
-                active.value = "";
-                highlight();
-                load();
-            }
-            active.blur();
-            return;
-        }
-
-        // 2. close open preview
-        if (openPreviewId) {
-            const panel = document.getElementById("preview-" + openPreviewId);
-            const btn = document.getElementById("prevbtn-" + openPreviewId);
-            if (panel) panel.classList.remove("open");
-            if (btn) btn.classList.remove("preview-active");
-            openPreviewId = null;
-            return;
-        }
-
-        // 3. close move dropdown
-        if (openDropdown) {
-            openDropdown.classList.remove("open");
-            openDropdown = null;
-            return;
-        }
-
-        // 4. close context menu
-        const contextMenu = document.getElementById("channelMenu");
-        if (contextMenu.classList.contains("open")) {
-            contextMenu.classList.remove("open");
-            return;
-        }
-
-        // 5. close QR card
-        const qrCard = document.getElementById("qrCard");
-        if (qrCard.classList.contains("open")) {
-            qrCard.classList.remove("open");
-            return;
-        }
-    }
-
-    // All remaining shortcuts — skip if typing
-    if (isTyping) return;
-
-});
-
-(async function init() {
-    await applyBranding();
-    await initName();
-    const infoRes = await fetch("/info");
-    const info = await infoRes.json();
-    if (!info.hasAuth) {
-        document.getElementById("logoutBtn").style.display = "none";
-    }
-    retention = info.retention; // null if "never", ms value otherwise
-    await loadChannels();
-    load();
+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)
+// ========================
+const THEME_KEY = "instbyte_theme";
+const mq = window.matchMedia("(prefers-color-scheme: dark)");
+
+function getStoredTheme() {
+    return localStorage.getItem(THEME_KEY) || "auto";
+}
+
+function applyTheme(theme) {
+    const root = document.documentElement;
+    const btn = document.getElementById("themeToggle");
+
+    // Apply attribute EXACTLY
+    if (theme === "dark") {
+        root.setAttribute("data-theme", "dark");
+    } else if (theme === "light") {
+        root.setAttribute("data-theme", "light");
+    } else {
+        root.removeAttribute("data-theme"); // auto
+    }
+
+    if (!btn) return;
+
+    // Update icon based on CURRENT stored state
+    if (theme === "dark") btn.textContent = "☀️";
+    else if (theme === "light") btn.textContent = "🌙";
+    else {
+        btn.textContent = mq.matches ? "☀️" : "🌙";
+    }
+}
+
+function cycleTheme() {
+    const current = getStoredTheme();
+
+    let next;
+    if (current === "dark") next = "light";
+    else if (current === "light") next = "dark";
+    else next = "dark"; // auto → dark first
+
+    localStorage.setItem(THEME_KEY, next);
+    applyTheme(next);
+}
+
+// INITIAL LOAD
+applyTheme(getStoredTheme());
+
+// OS change listener (only when auto)
+mq.addEventListener("change", () => {
+    if (getStoredTheme() === "auto") {
+        applyTheme("auto");
+    }
+});
+
+async function applyBranding() {
+    try {
+        const res = await fetch("/branding");
+        const b = await res.json();
+
+        // Update page title and app name
+        document.title = b.appName;
+        const nameEl = document.getElementById("appName");
+        if (nameEl) nameEl.innerText = b.appName;
+
+        // Update logo src to dynamic route
+        const logoEl = document.getElementById("appLogo");
+        if (logoEl) logoEl.src = "/logo-dynamic.png";
+
+        // Inject CSS variables
+        const p = b.palette;
+        const root = document.documentElement;
+        root.style.setProperty("--color-primary", p.primary);
+        root.style.setProperty("--color-primary-hover", p.primaryHover);
+        root.style.setProperty("--color-primary-light", p.primaryLight);
+        root.style.setProperty("--color-primary-dark", p.primaryDark);
+        root.style.setProperty("--color-on-primary", p.onPrimary);
+        root.style.setProperty("--color-secondary", p.secondary);
+        root.style.setProperty("--color-secondary-hover", p.secondaryHover);
+        root.style.setProperty("--color-secondary-light", p.secondaryLight);
+        root.style.setProperty("--color-on-secondary", p.onSecondary);
+
+    } catch (e) {
+        // Branding failed — default styles remain, no crash
+    }
+}
+
+function formatSize(bytes) {
+    if (!bytes) return "";
+    if (bytes >= 1024 ** 3) return (bytes / 1024 ** 3).toFixed(1) + " GB";
+    if (bytes >= 1024 ** 2) return (bytes / 1024 ** 2).toFixed(1) + " MB";
+    if (bytes >= 1024) return (bytes / 1024).toFixed(1) + " KB";
+    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);
+    if (mb > 1024) return "danger-dark";
+    if (mb > 500) return "danger-light";
+    if (mb > 100) return "warn";
+    return "";
+}
+
+// Configure marked
+marked.setOptions({
+    breaks: true,
+    gfm: true
+});
+
+function looksLikeMarkdown(text) {
+    return /^#{1,3} |[*_`~]|\[.+\]\(.+\)|^[-*+] |^\d+\. |^```/m.test(text);
+}
+
+function renderText(text) {
+    if (!text) return "";
+    if (looksLikeMarkdown(text)) {
+        const html = marked.parse(text);
+        // highlight code blocks after parse
+        const wrap = document.createElement("div");
+        wrap.innerHTML = html;
+        wrap.querySelectorAll("pre code").forEach(el => hljs.highlightElement(el));
+        return `<div class="markdown-body">${wrap.innerHTML}</div>`;
+    }
+    // plain text — just escape and preserve newlines
+    return text
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/\n/g, "<br>");
+}
+
+const TEXT_EXTENSIONS = [
+    'txt', 'md', 'js', 'ts', 'jsx', 'tsx', 'json', 'json5',
+    'css', 'html', 'htm', 'xml', 'svg', 'sh', 'bash', 'zsh',
+    'py', 'rb', 'php', 'java', 'c', 'cpp', 'h', 'cs', 'go',
+    'rs', 'swift', 'kt', 'yaml', 'yml', 'toml', 'ini', 'env',
+    'gitignore', 'dockerfile', 'sql', 'csv', 'log'
+];
+
+const MAX_TEXT_PREVIEW_BYTES = 50 * 1024; // 50KB — beyond this we warn
+const MAX_TEXT_LINES = 200;
+
+function getPreviewType(filename) {
+    if (!filename) return "none";
+    const ext = filename.split(".").pop().toLowerCase();
+    if (/^(jpg|jpeg|png|gif|webp|bmp|svg)$/.test(ext)) return "image";
+    if (/^(mp4|webm|ogg|mov)$/.test(ext)) return "video";
+    if (/^(mp3|wav|ogg|m4a|flac|aac)$/.test(ext)) return "audio";
+    if (ext === "pdf") return "pdf";
+    if (TEXT_EXTENSIONS.includes(ext)) return "text";
+    return "none";
+}
+
+function getLanguage(filename) {
+    const ext = filename.split(".").pop().toLowerCase();
+    const map = {
+        js: "javascript", ts: "typescript", jsx: "javascript",
+        tsx: "typescript", py: "python", rb: "ruby", php: "php",
+        java: "java", c: "c", cpp: "cpp", h: "c", cs: "csharp",
+        go: "go", rs: "rust", swift: "swift", kt: "kotlin",
+        html: "html", htm: "html", css: "css", json: "json",
+        json5: "json", xml: "xml", svg: "xml", sh: "bash",
+        bash: "bash", zsh: "bash", yaml: "yaml", yml: "yaml",
+        toml: "toml", sql: "sql", md: "markdown", csv: "plaintext",
+        txt: "plaintext", log: "plaintext", env: "plaintext",
+        dockerfile: "dockerfile"
+    };
+    return map[ext] || "plaintext";
+}
+
+let openPreviewId = null;
+
+async function togglePreview(id, filename) {
+    const panel = document.getElementById("preview-" + id);
+    const btn = document.getElementById("prevbtn-" + id);
+    if (!panel || !btn) return;
+
+    const isOpen = panel.classList.contains("open");
+
+    // Close any other open preview first
+    if (openPreviewId && openPreviewId !== id) {
+        const otherPanel = document.getElementById("preview-" + openPreviewId);
+        const otherBtn = document.getElementById("prevbtn-" + openPreviewId);
+        if (otherPanel) otherPanel.classList.remove("open");
+        if (otherBtn) otherBtn.classList.remove("preview-active");
+    }
+
+    if (isOpen) {
+        panel.classList.remove("open");
+        btn.classList.remove("preview-active");
+        openPreviewId = null;
+        return;
+    }
+
+    // Open this one
+    panel.classList.add("open");
+    btn.classList.add("preview-active");
+    openPreviewId = id;
+
+    // Only build content once
+    if (panel.dataset.loaded) return;
+    panel.dataset.loaded = "true";
+
+    const type = getPreviewType(filename);
+    const url = `/uploads/${filename}`;
+
+    if (type === "image") {
+        panel.innerHTML = `<img src="${url}" alt="${filename}">`;
+
+    } else if (type === "video") {
+        panel.innerHTML = `
+      <video controls preload="metadata">
+        <source src="${url}">
+        Your browser doesn't support video preview.
+      </video>`;
+
+    } else if (type === "audio") {
+        panel.innerHTML = `
+      <audio controls preload="metadata">
+        <source src="${url}">
+        Your browser doesn't support audio preview.
+      </audio>`;
+
+    } else if (type === "pdf") {
+        panel.innerHTML = `<embed src="${url}" type="application/pdf">`;
+
+    } else if (type === "text") {
+        panel.innerHTML = `<div class="preview-loading">Loading...</div>`;
+
+        try {
+            const res = await fetch(url);
+            if (!res.ok) throw new Error("Failed to load");
+
+            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>`;
+                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
+                ? lines.slice(0, MAX_TEXT_LINES).join("\n")
+                : text;
+
+            const lang = getLanguage(filename);
+            const code = document.createElement("code");
+            code.className = `language-${lang}`;
+            code.textContent = preview;
+
+            const pre = document.createElement("pre");
+            pre.appendChild(code);
+            hljs.highlightElement(code);
+
+            panel.innerHTML = "";
+            panel.appendChild(pre);
+
+            if (truncated) {
+                const note = document.createElement("div");
+                note.className = "preview-truncated";
+                note.innerHTML = `Showing first ${MAX_TEXT_LINES} of ${lines.length} lines. <a href="${url}" target="_blank">View full file</a>`;
+                panel.appendChild(note);
+            }
+
+        } catch (err) {
+            panel.innerHTML = `
+          <div class="preview-error">
+            Could not load preview. <a href="${url}" target="_blank">Open directly</a>
+          </div>`;
+        }
+    }
+}
+
+function handleRowClick(el, type, value) {
+    if (type === "text") {
+        navigator.clipboard.writeText(value).then(() => {
+            el.classList.add("flash");
+            setTimeout(() => el.classList.remove("flash"), 800);
+        });
+    } else {
+        const a = document.createElement("a");
+        a.href = value;
+        a.download = "";
+        a.click();
+    }
+}
+
+document.getElementById("items").addEventListener("click", e => {
+    const left = e.target.closest(".left");
+    if (!left) return;
+    const type = left.dataset.type;
+    const value = left.dataset.value;
+    handleRowClick(left, type, value);
+});
+
+let openDropdown = null;
+
+let pendingDeleteId = null;
+let pendingDeleteTimer = null;
+let pendingDeleteEl = null;
+
+function toggleMoveDropdown(e, id, currentChannel) {
+    e.stopPropagation();
+
+    // close any open one first
+    if (openDropdown && openDropdown !== e.currentTarget.nextElementSibling) {
+        openDropdown.classList.remove("open");
+    }
+
+    const dropdown = e.currentTarget.nextElementSibling;
+    const isOpen = dropdown.classList.contains("open");
+
+    if (isOpen) {
+        dropdown.classList.remove("open");
+        openDropdown = null;
+        return;
+    }
+
+    // build channel list fresh each time (channels may have changed)
+    const others = channels.filter(c => c.name !== currentChannel);
+    dropdown.innerHTML = `<div class="dropdown-label">Move to</div>`;
+
+    others.forEach(ch => {
+        const btn = document.createElement("button");
+        btn.innerText = ch.name;
+        btn.onclick = (ev) => {
+            ev.stopPropagation();
+            moveItem(id, ch.name);
+            dropdown.classList.remove("open");
+            openDropdown = null;
+        };
+        dropdown.appendChild(btn);
+    });
+
+    dropdown.classList.add("open");
+    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",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ channel: toChannel })
+    });
+    // socket will handle the re-render via item-moved event
+}
+
+document.addEventListener("click", () => {
+    if (openDropdown) {
+        openDropdown.classList.remove("open");
+        openDropdown = null;
+    }
+});
+
+let channel = null;
+let channels = [];
+let unreadChannels = new Set();
+
+let uploader = localStorage.getItem("name") || "";
+
+async function initName() {
+    if (!uploader || uploader === "null" || uploader.trim() === "") {
+        let suggested = "USER-" + Math.floor(Math.random() * 1000);
+        const ua = navigator.userAgent;
+        if (/android/i.test(ua)) suggested = "Android-" + Math.floor(Math.random() * 1000);
+        else if (/iphone|ipad/i.test(ua)) suggested = "iPhone-" + Math.floor(Math.random() * 1000);
+        else if (/mac/i.test(ua)) suggested = "Mac-" + Math.floor(Math.random() * 1000);
+        else if (/windows/i.test(ua)) suggested = "Windows-" + Math.floor(Math.random() * 1000);
+        else if (/linux/i.test(ua)) suggested = "Linux-" + Math.floor(Math.random() * 1000);
+        else suggested = "User-" + Math.floor(Math.random() * 1000);
+        uploader = prompt("Your name?", suggested) || suggested;
+        localStorage.setItem("name", uploader);
+    }
+    document.getElementById("who").innerText = uploader;
+    socket.emit("join", uploader);
+}
+
+function highlight() {
+    document.querySelectorAll(".channels button")
+        .forEach(b => b.classList.remove("active"));
+    const el = document.getElementById("ch-" + channel);
+    if (el) el.classList.add("active");
+}
+
+function setChannel(c) {
+    // flush any pending delete before switching
+    if (pendingDeleteId !== null) {
+        clearTimeout(pendingDeleteTimer);
+        fetch("/item/" + pendingDeleteId, { method: "DELETE" });
+        pendingDeleteId = null;
+        pendingDeleteTimer = null;
+        pendingDeleteEl = null;
+        hideUndoToast();
+    }
+    unreadChannels.delete(c); // clear unread when switching to channel
+    channel = c;
+    renderChannels();
+    highlight();
+    load();
+}
+
+async function load(resetPage = true) {
+    if (resetPage) currentPage = 1;
+
+    const res = await fetch(`/items/${channel}?page=${currentPage}`);
+    const data = await res.json();
+
+    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] });
+    } else {
+        console.warn("Lucide not yet defined when building item", i.id);
+    }
+    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) {
+    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 = "";
+
+    if (!data.length) {
+        el.innerHTML = "<div style='color:#6b7280;margin-top:10px;'>No results</div>";
+        return;
+    }
+
+    const grouped = {};
+    data.forEach(item => {
+        if (!grouped[item.channel]) grouped[item.channel] = [];
+        grouped[item.channel].push(item);
+    });
+
+    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 => section.appendChild(buildItemEl(i)));
+        el.appendChild(section);
+    });
+}
+
+async function sendText() {
+    const input = document.getElementById("msg");
+    const text = input.value.trim();
+    if (!text) return;
+
+    await fetch("/text", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content: text, channel, uploader })
+    });
+
+    input.value = "";
+}
+
+function handleEnter(e) {
+    if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
+        e.preventDefault();
+        sendText();
+    }
+}
+
+function changeName() {
+    const n = prompt("Enter name:");
+    if (!n) return;
+    uploader = n;
+    localStorage.setItem("name", n);
+    document.getElementById("who").innerText = uploader;
+}
+
+let qrLoaded = false;
+
+async function toggleQR() {
+    const card = document.getElementById("qrCard");
+    card.classList.toggle("open");
+
+    if (card.classList.contains("open") && !qrLoaded) {
+        const res = await fetch("/info");
+        const { url } = await res.json();
+        document.getElementById("qrUrl").innerText = url;
+        document.getElementById("qrImg").src =
+            `https://api.qrserver.com/v1/create-qr-code/?size=160x160&data=${encodeURIComponent(url)}`;
+        qrLoaded = true;
+    }
+}
+
+document.addEventListener("click", e => {
+    const widget = document.querySelector(".qr-widget");
+    if (!widget.contains(e.target)) {
+        document.getElementById("qrCard").classList.remove("open");
+    }
+});
+
+const fileInput = document.getElementById("fileInput");
+
+fileInput.onchange = () => {
+    if (fileInput.files.length) uploadFiles(fileInput.files);
+};
+
+async function del(id, pinned) {
+    // pinned items keep confirm dialog
+    if (pinned) {
+        const confirmed = confirm("This item is pinned. Are you sure you want to delete it?");
+        if (!confirmed) return;
+        await fetch("/item/" + id, { method: "DELETE" });
+        return;
+    }
+
+    // if another delete is pending, execute it immediately (don't await — fire and forget)
+    if (pendingDeleteId !== null) {
+        clearTimeout(pendingDeleteTimer);
+        fetch("/item/" + pendingDeleteId, { method: "DELETE" });
+        pendingDeleteId = null;
+        pendingDeleteTimer = null;
+    }
+
+    // optimistically remove from UI
+    const el = document.querySelector(`[data-item-id="${id}"]`);
+    if (el) {
+        pendingDeleteEl = el.outerHTML;
+        el.remove();
+    }
+
+    pendingDeleteId = id;
+    showUndoToast();
+
+    pendingDeleteTimer = setTimeout(async () => {
+        await fetch("/item/" + pendingDeleteId, { method: "DELETE" });
+        pendingDeleteId = null;
+        pendingDeleteTimer = null;
+        pendingDeleteEl = null;
+        hideUndoToast();
+    }, 5000);
+}
+
+function undoDelete() {
+    if (pendingDeleteId === null) return;
+    clearTimeout(pendingDeleteTimer);
+    pendingDeleteId = null;
+    pendingDeleteTimer = null;
+    pendingDeleteEl = null;
+    hideUndoToast();
+    load(); // reload to restore item
+}
+
+function showUndoToast() {
+    const toast = document.getElementById("undoToast");
+    const progress = document.getElementById("undoProgress");
+    progress.classList.remove("running");
+    void progress.offsetWidth; // force reflow to restart animation
+    progress.classList.add("running");
+    toast.classList.add("show");
+}
+
+function hideUndoToast() {
+    const toast = document.getElementById("undoToast");
+    const progress = document.getElementById("undoProgress");
+    toast.classList.remove("show");
+    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();
+}
+
+
+async function logout() {
+    await fetch("/logout", { method: "POST" });
+    window.location.href = "/login";
+}
+
+socket.on("new-item", item => {
+    if (document.getElementById("search").value.trim() !== "") return;
+
+    if (item.channel === channel) {
+        const container = document.getElementById("items");
+
+        const empty = container.querySelector(".empty-state");
+        if (empty) empty.remove();
+
+        if (!item.pinned) newItemIds.add(item.id);
+
+        const el = buildItemEl(item);
+
+        if (item.pinned) {
+            container.prepend(el);
+        } else {
+            const existing = container.querySelectorAll(".item");
+            let insertBefore = null;
+            for (let i = 0; i < existing.length; i++) {
+                if (!existing[i].querySelector(".icon-btn.pinned")) {
+                    insertBefore = existing[i];
+                    break;
+                }
+            }
+            if (insertBefore) {
+                container.insertBefore(el, insertBefore);
+            } else {
+                container.appendChild(el);
+            }
+        }
+
+        if (typeof lucide !== "undefined") lucide.createIcons({ nodes: [el] });
+        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 => {
+    // don't reload if this item is already removed or pending
+    if (id == pendingDeleteId) return;
+    const el = document.querySelector(`[data-item-id="${id}"]`);
+    if (el) el.remove();
+
+    // show empty state if no items left
+    const items = document.getElementById("items");
+    if (items && !items.querySelector(".item")) {
+        items.innerHTML = `<div class="empty-state">Nothing here yet — paste, type, or drop a file to share</div>`;
+    }
+});
+
+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
+        load();
+    }
+});
+
+socket.on("channel-added", (ch) => {
+    if (!channels.find(c => c.name === ch.name)) {
+        channels.push(ch);
+        renderChannels();
+    }
+});
+
+socket.on("channel-deleted", ({ name }) => {
+    channels = channels.filter(c => c.name !== name);
+    if (channel === name) {
+        channel = channels.length ? channels[0].name : null;
+        load();
+    }
+    renderChannels();
+    highlight();
+});
+
+socket.on("channel-renamed", ({ oldName, newName }) => {
+    channels = channels.map(c => c.name === oldName ? { ...c, name: newName } : c);
+    if (channel === oldName) channel = newName;
+    renderChannels();
+    highlight();
+});
+
+socket.on("channel-pin-update", ({ name, pinned }) => {
+    if (pinned) {
+        channels = channels.map(c => c.name === name ? { ...c, pinned } : c);
+        channels.sort((a, b) => (b.pinned ? 1 : 0) - (a.pinned ? 1 : 0));
+        renderChannels();
+        highlight();
+    } else {
+        loadChannels();
+    }
+});
+
+document.getElementById("search").addEventListener("input", async e => {
+    const q = e.target.value.trim();
+
+    if (!q) {
+        document.getElementById("loadMoreWrapper").style.display = "none";
+        highlight();
+        load();
+        return;
+    }
+
+    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);
+});
+
+
+document.addEventListener("paste", async e => {
+    const active = document.activeElement;
+
+    // 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;
+
+    await fetch("/text", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+            content: text,
+            channel,
+            uploader
+        })
+    });
+});
+
+async function uploadFiles(files) {
+    if (!files || !files.length) return;
+
+    const status = document.getElementById("uploadStatus");
+    const bar = document.getElementById("uploadBar");
+    const text = document.getElementById("uploadText");
+
+    const total = files.length;
+    const targetChannel = channel; // capture at start, won't change if user switches
+
+    for (let i = 0; i < total; i++) {
+        const file = files[i];
+
+        status.style.display = "block";
+        bar.style.width = "0%";
+        text.innerText = total > 1
+            ? `Uploading ${i + 1} of ${total} · ${file.name}`
+            : `Uploading: ${file.name}`;
+
+        await new Promise((resolve) => {
+            const form = new FormData();
+            form.append("file", file);
+            form.append("channel", targetChannel);
+            form.append("uploader", uploader);
+
+            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%";
+                    setTimeout(resolve, 1200);
+                    return;
+                }
+                resolve();
+            };
+
+            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);
+        });
+    }
+
+    status.style.display = "none";
+    fileInput.value = "";
+    // Delayed fallback — socket event should have already updated the DOM by now,
+    // but this catches any case where the socket path didn't fire (e.g. network hiccup).
+    setTimeout(() => load(), 500);
+}
+
+
+const overlay = document.getElementById("dragOverlay");
+let dragCounter = 0;
+
+/* DRAG ENTER */
+document.addEventListener("dragenter", e => {
+    e.preventDefault();
+    dragCounter++;
+    overlay.style.display = "flex";
+});
+
+/* DRAG LEAVE */
+document.addEventListener("dragleave", e => {
+    dragCounter--;
+    if (dragCounter <= 0) {
+        overlay.style.display = "none";
+        dragCounter = 0;
+    }
+});
+
+/*
+document.getElementById("addChannelBtn").onclick = async () => {
+    if (channels.length >= 10) { alert("Maximum 10 channels allowed"); return; }
+    const name = prompt("Channel name?");
+    if (!name) return;
+
+    const res = await fetch("/channels", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name })
+    });
+
+    if (!res.ok) { const err = await res.json(); alert(err.error); return; }
+    await loadChannels();
+};
+*/
+
+function addChannelHandler() {
+    return async () => {
+        if (channels.length >= 10) { alert("Maximum 10 channels allowed"); return; }
+        const name = prompt("Channel name?");
+        if (!name) return;
+
+        const res = await fetch("/channels", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ name })
+        });
+
+        if (!res.ok) { const err = await res.json(); alert(err.error); return; }
+        await loadChannels();
+    };
+}
+
+document.getElementById("addChannelBtn").onclick = addChannelHandler();
+document.getElementById("addChannelBtnDesktop").onclick = addChannelHandler();
+
+async function loadChannels() {
+    const res = await fetch("/channels");
+    const data = await res.json();
+    channels = data; // [{ id, name, pinned }]
+    if (!channel && channels.length) channel = channels[0].name;
+    renderChannels();
+    highlight();
+}
+
+
+function renderChannels() {
+    const container = document.getElementById("channels");
+    container.innerHTML = "";
+
+    channels.forEach(ch => {
+        const btn = document.createElement("button");
+        btn.id = "ch-" + ch.name;
+
+        btn.onclick = (e) => {
+            if (e.target.classList.contains("ch-more")) return;
+            setChannel(ch.name);
+        };
+
+        btn.appendChild(document.createTextNode(ch.name));
+
+        if (ch.pinned) {
+            const dot = document.createElement("span");
+            dot.className = "ch-pin-dot";
+            dot.title = "Pinned — protected from deletion";
+            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 = "⋯";
+        more.title = "Channel options";
+        more.onclick = (e) => {
+            e.stopPropagation();
+            showChannelMenu(e, ch);
+        };
+        btn.appendChild(more);
+
+        btn.addEventListener("contextmenu", (e) => {
+            e.preventDefault();
+            showChannelMenu(e, ch);
+        });
+
+        if (ch.name === channel) btn.classList.add("active");
+        container.appendChild(btn);
+    });
+
+}
+
+function showChannelMenu(e, ch) {
+    const menu = document.getElementById("channelMenu");
+
+    menu.innerHTML = `
+    <button onclick="toggleChannelPin('${ch.name}')">
+      ${ch.pinned ? "📍 Unpin channel" : "📌 Pin channel"}
+    </button>
+    <div class="menu-divider"></div>
+    <button onclick="renameChannelPrompt('${ch.name}')">✎&nbsp; Rename</button>
+    <button class="${ch.pinned ? "muted" : "danger"}"
+      ${ch.pinned ? "" : `onclick="deleteChannel('${ch.name}')"`}>
+      🗑&nbsp; Delete${ch.pinned ? " (pinned)" : ""}
+    </button>
+  `;
+
+    menu.style.top = e.clientY + "px";
+    menu.style.left = e.clientX + "px";
+    menu.classList.add("open");
+
+    requestAnimationFrame(() => {
+        const rect = menu.getBoundingClientRect();
+        if (rect.right > window.innerWidth - 8)
+            menu.style.left = (e.clientX - rect.width) + "px";
+        if (rect.bottom > window.innerHeight - 8)
+            menu.style.top = (e.clientY - rect.height) + "px";
+    });
+}
+
+document.addEventListener("click", () => {
+    document.getElementById("channelMenu").classList.remove("open");
+});
+
+document.addEventListener("contextmenu", (e) => {
+    if (!e.target.closest("#channels"))
+        document.getElementById("channelMenu").classList.remove("open");
+});
+
+async function toggleChannelPin(name) {
+    await fetch(`/channels/${name}/pin`, { method: "POST" });
+}
+
+async function renameChannelPrompt(name) {
+    const newName = prompt("Rename channel to:", name);
+    if (!newName || newName.trim() === name) return;
+
+    const res = await fetch("/channels/" + name, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name: newName.trim() })
+    });
+
+    if (!res.ok) { const err = await res.json(); alert(err.error); }
+}
+
+async function deleteChannel(name) {
+    const confirmed = confirm(`Delete "${name}"? All items will be permanently removed.`);
+    if (!confirmed) return;
+
+    const res = await fetch("/channels/" + name, { method: "DELETE" });
+    if (!res.ok) { const err = await res.json(); alert(err.error); }
+}
+
+/* DRAG OVER */
+document.addEventListener("dragover", e => {
+    e.preventDefault();
+});
+
+/* DROP ANYWHERE */
+document.addEventListener("drop", async e => {
+    e.preventDefault();
+    overlay.style.display = "none";
+    dragCounter = 0;
+
+    const files = e.dataTransfer.files;
+    if (!files.length) return;
+    uploadFiles(files);
+});
+
+// ========================
+// KEYBOARD SHORTCUTS
+// ========================
+document.addEventListener("keydown", e => {
+    const active = document.activeElement;
+    const isTyping = active && (active.id === "msg" || active.id === "search");
+
+    // Ctrl/Cmd + Enter — send message (only when msg is focused)
+    if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+        if (active && active.id === "msg") {
+            e.preventDefault();
+            e.stopPropagation();
+            sendText();
+        }
+        return;
+    }
+
+    // Ctrl/Cmd + K — focus message input
+    if ((e.ctrlKey || e.metaKey) && e.key === "k") {
+        if (!isTyping) {
+            e.preventDefault();
+            document.getElementById("msg").focus();
+        }
+        return;
+    }
+
+    // / — focus search
+    if (e.key === "/" && !e.ctrlKey && !e.metaKey) {
+        e.preventDefault();
+        const search = document.getElementById("search");
+        search.focus();
+        search.select();
+        return;
+    }
+
+    // Tab — cycle channels
+    if (e.key === "Tab" && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
+        e.preventDefault();
+        if (!channels.length) return;
+        const currentIndex = channels.findIndex(c => c.name === channel);
+        const nextIndex = (currentIndex + 1) % channels.length;
+        setChannel(channels[nextIndex].name);
+        return;
+    }
+
+    // Escape — close state in priority order
+    if (e.key === "Escape") {
+
+        // 1. blur any focused input first
+        if (active && (active.id === "msg" || active.id === "search")) {
+            if (active.id === "search" && active.value) {
+                active.value = "";
+                highlight();
+                load();
+            }
+            active.blur();
+            return;
+        }
+
+        // 2. close open preview
+        if (openPreviewId) {
+            const panel = document.getElementById("preview-" + openPreviewId);
+            const btn = document.getElementById("prevbtn-" + openPreviewId);
+            if (panel) panel.classList.remove("open");
+            if (btn) btn.classList.remove("preview-active");
+            openPreviewId = null;
+            return;
+        }
+
+        // 3. close move dropdown
+        if (openDropdown) {
+            openDropdown.classList.remove("open");
+            openDropdown = null;
+            return;
+        }
+
+        // 4. close context menu
+        const contextMenu = document.getElementById("channelMenu");
+        if (contextMenu.classList.contains("open")) {
+            contextMenu.classList.remove("open");
+            return;
+        }
+
+        // 5. close QR card
+        const qrCard = document.getElementById("qrCard");
+        if (qrCard.classList.contains("open")) {
+            qrCard.classList.remove("open");
+            return;
+        }
+    }
+
+    // All remaining shortcuts — skip if typing
+    if (isTyping) return;
+
+});
+
+(async function init() {
+    await applyBranding();
+    await initName();
+    const infoRes = await fetch("/info");
+    const info = await infoRes.json();
+    if (!info.hasAuth) {
+        document.getElementById("logoutBtn").style.display = "none";
+    }
+    retention = info.retention; // null if "never", ms value otherwise
+    await loadChannels();
+    load();
 })();