instbyte 1.8.0 → 1.9.0

package/README.md

@@ -63,7 +63,7 @@ One person runs the server — everyone else on the same WiFi opens the URL in t
 
 **Sharing is instant:**
 - Type or paste text → hit Send
-- Paste anywhere on the page → auto-sends
+- Paste anywhere on the page → auto-sends text or uploads images directly
 - Drag a file anywhere onto the page → uploads
 - Click any text item → copies to clipboard
 - Click any file item → downloads
@@ -125,7 +125,7 @@ Instbyte works out of the box with zero configuration. All options are optional
 | `server.port` | `3000` | Port to run on. Overridden by `PORT` env var if set |
 | `auth.passphrase` | `""` | Shared passphrase for access. Empty = no auth |
 | `storage.maxFileSize` | `"2GB"` | Max upload size. Accepts `KB`, `MB`, `GB` |
-| `storage.retention` | `"24h"` | How long before items auto-delete. Accepts `h`, `d` |
+| `storage.retention` | `"24h"` | How long before items auto-delete. Accepts `h`, `d`, or `"never"` to disable cleanup entirely |
 | `branding.appName` | `"Instbyte"` | App name in header and browser tab |
 | `branding.primaryColor` | `"#111827"` | Primary brand color in hex. Full palette auto-derived |
 | `branding.logoPath` | — | Path to your logo file relative to where you run the command |
@@ -163,7 +163,7 @@ The difference between *a tool you use* and *a tool you own.*
 
 **Smart port handling** — if port 3000 is busy, Instbyte finds the next available port automatically.
 
-**Short-lived by design** — all content auto-deletes after 24 hours. Nothing lingers.
+**Short-lived by design** — content auto-deletes after 24 hours by default. Configure retention per your needs, or disable cleanup entirely.
 
 **QR join** — built-in QR code so phones can join instantly without typing the URL.
 
@@ -175,6 +175,9 @@ The difference between *a tool you use* and *a tool you own.*
 
 **Presence awareness** — see how many people are currently connected in real time.
 
+**Read receipts** — see how many devices have viewed each shared item. Updates live as teammates open the page.
+
+**Item management** — add optional titles to label any item for future reference. Edit text items inline without deleting and re-pasting. Pinned items are protected from both manual deletion and auto-cleanup.
 ---
 
 ## Keyboard Shortcuts

package/client/css/app.css

@@ -396,7 +396,8 @@ input[type=text]:focus {
 
 .item-actions {
     display: flex;
-    gap: 8px;
+    gap: 6px;
+    align-items: flex-start;
 }
 
 .empty-state {
@@ -443,11 +444,16 @@ input[type=text]:focus {
     background: #f9fafb;
     border: 1px solid #e5e7eb;
     border-radius: 6px;
-    padding: 6px 8px;
+    padding: 5px 7px;
     cursor: pointer;
-    font-size: 14px;
+    font-size: 13px;
     line-height: 1;
     color: #6b7280;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .icon-btn:hover {
@@ -707,6 +713,12 @@ input[type=text]:focus {
     font-size: 12px;
 }
 
+.markdown-preview {
+    padding: 4px 0;
+    max-height: 500px;
+    overflow-y: auto;
+}
+
 .preview-truncated {
     font-size: 11px;
     color: #9ca3af;
@@ -881,6 +893,159 @@ input[type=text]:focus {
     background: #e5e7eb;
 }
 
+.item-title {
+    font-size: 11px;
+    font-weight: 600;
+    color: #6b7280;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 4px;
+}
+
+.title-input {
+    font-size: 12px;
+    padding: 3px 7px;
+    border: 1px solid #d1d5db;
+    border-radius: 5px;
+    margin-bottom: 4px;
+    width: 200px;
+    display: block;
+    color: #111827;
+    background: #fff;
+}
+
+.title-input:focus {
+    outline: none;
+    border-color: var(--color-primary);
+}
+
+.edit-textarea {
+    width: min(600px, 60vw);
+    min-height: 80px;
+    padding: 8px 10px;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    font-size: 14px;
+    font-family: system-ui;
+    resize: vertical;
+    display: block;
+    box-sizing: border-box;
+    line-height: 1.5;
+    color: #111827;
+    background: #f9fafb;
+    margin-bottom: 6px;
+}
+
+.edit-textarea:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    background: #fff;
+}
+
+.edit-hint {
+    font-size: 11px;
+    color: #9ca3af;
+    margin-bottom: 4px;
+}
+
+.expiry-badge {
+    display: inline-block;
+    font-size: 10px;
+    font-weight: 500;
+    padding: 1px 6px;
+    border-radius: 4px;
+    margin-left: 6px;
+    vertical-align: middle;
+    background: #fef3c7;
+    color: #92400e;
+}
+
+.expiry-badge.expiry-gone {
+    background: #fee2e2;
+    color: #991b1b;
+}
+
+.seen-count {
+    font-size: px;
+    color: #9ca3af;
+    margin-left: 6px;
+}
+
+.more-wrapper {
+    position: relative;
+}
+
+.more-btn {
+    font-size: 16px;
+    padding: 4px 7px;
+    letter-spacing: 0;
+    line-height: 1;
+}
+
+.more-dropdown {
+    position: absolute;
+    bottom: calc(100% + 6px);
+    right: 0;
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    z-index: 100;
+    min-width: 160px;
+    overflow: hidden;
+    display: none;
+    padding: 4px;
+}
+
+.more-dropdown.open {
+    display: block;
+}
+
+.more-dropdown button {
+    display: block;
+    width: 100%;
+    text-align: left;
+    background: none;
+    border: none;
+    padding: 8px 12px;
+    font-size: 13px;
+    color: #374151;
+    cursor: pointer;
+    border-radius: 6px;
+}
+
+.more-dropdown button:hover {
+    background: #f3f4f6;
+    color: #111827;
+}
+
+.more-dropdown .dropdown-label {
+    font-size: 11px;
+    color: #9ca3af;
+    padding: 6px 12px 2px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    cursor: default;
+}
+
+.icon-btn i {
+    width: 14px;
+    height: 14px;
+    display: block;
+    stroke-width: 2;
+}
+
+.icon-btn.pinned i {
+    color: #f59e0b;
+}
+
+.item-new {
+    border-left: 3px solid #22c55e;
+    padding-left: 13px;
+    background: #f0fdf4;
+    transition: background 1.5s ease, border-color 1.5s ease;
+}
 
 /* ============================================================
    MOBILE
@@ -1339,6 +1504,74 @@ input[type=text]:focus {
             background: #2d3148;
         }
 
+        .markdown-preview {
+            color: #e5e7eb;
+        }
+
+        .item-title {
+            color: #6b7280;
+        }
+
+        .title-input {
+            background: #252836;
+            border-color: #2d3148;
+            color: #f3f4f6;
+        }
+
+        .edit-textarea {
+            background: #252836;
+            border-color: #2d3148;
+            color: #f3f4f6;
+        }
+
+        .edit-textarea:focus {
+            background: #1a1d27;
+            border-color: #4b5563;
+        }
+
+        .expiry-badge {
+            background: #422006;
+            color: #fbbf24;
+        }
+
+        .expiry-badge.expiry-gone {
+            background: #2d1515;
+            color: #f87171;
+        }
+
+        .seen-count {
+            color: #6b7280;
+        }
+
+        .more-dropdown {
+            background: #1a1d27;
+            border-color: #2d3148;
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+        }
+
+        .more-dropdown button {
+            color: #d1d5db;
+        }
+
+        .more-dropdown button:hover {
+            background: #252836;
+            color: #f3f4f6;
+        }
+
+        .more-dropdown .dropdown-label {
+            color: #6b7280;
+        }
+
+        .icon-btn.pinned i {
+            color: #f59e0b;
+        }
+
+        .item-new {
+            border-left: 3px solid #16a34a;
+            padding-left: 13px;
+            background: #052e16;
+        }
+
         #uploadStatus {
             background: #1a1d27 !important;
             color: #e5e7eb !important;
@@ -1665,6 +1898,74 @@ input[type=text]:focus {
         background: #2d3148;
     }
 
+    .markdown-preview {
+        color: #e5e7eb;
+    }
+
+    .item-title {
+        color: #6b7280;
+    }
+
+    .title-input {
+        background: #252836;
+        border-color: #2d3148;
+        color: #f3f4f6;
+    }
+
+    .edit-textarea {
+        background: #252836;
+        border-color: #2d3148;
+        color: #f3f4f6;
+    }
+
+    .edit-textarea:focus {
+        background: #1a1d27;
+        border-color: #4b5563;
+    }
+
+    .expiry-badge {
+        background: #422006;
+        color: #fbbf24;
+    }
+
+    .expiry-badge.expiry-gone {
+        background: #2d1515;
+        color: #f87171;
+    }
+
+    .seen-count {
+        color: #6b7280;
+    }
+
+    .more-dropdown {
+        background: #1a1d27;
+        border-color: #2d3148;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+    }
+
+    .more-dropdown button {
+        color: #d1d5db;
+    }
+
+    .more-dropdown button:hover {
+        background: #252836;
+        color: #f3f4f6;
+    }
+
+    .more-dropdown .dropdown-label {
+        color: #6b7280;
+    }
+
+    .icon-btn.pinned i {
+        color: #f59e0b;
+    }
+
+    .item-new {
+        border-left: 3px solid #16a34a;
+        padding-left: 13px;
+        background: #052e16;
+    }
+
     #uploadStatus {
         background: #1a1d27 !important;
         color: #e5e7eb !important;

package/client/index.html

@@ -9,6 +9,8 @@
 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
   <link rel="stylesheet" href="/css/app.css">
+
+  <script src="https://unpkg.com/lucide@0.513.0/dist/umd/lucide.min.js"></script>
 </head>
 
 <body>
@@ -87,6 +89,7 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
   <script src="/js/app.js"></script>
 
+
 </body>
 
 </html>

package/client/js/app.js

@@ -2,6 +2,37 @@ const socket = io();
 
 let currentPage = 1;
 let hasMoreItems = false;
+let retention = 24 * 60 * 60 * 1000; // default 24h, overwritten on init
+const newItemIds = new Set();
+const seenEmitted = new Set(); // item IDs this session has already emitted seen for
+
+const seenObserver = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (!entry.isIntersecting) return;
+        const id = parseInt(entry.target.dataset.itemId);
+        if (!id || seenEmitted.has(id)) return;
+
+        // wait 1 second of visibility before counting as seen
+        const timer = setTimeout(() => {
+            if (seenEmitted.has(id)) return;
+            seenEmitted.add(id);
+            socket.emit("seen", { id, name: uploader });
+            seenObserver.unobserve(entry.target); // done with this element
+        }, 1000);
+
+        // if element leaves viewport before 1s, cancel
+        entry.target._seenTimer = timer;
+    });
+
+    // cancel timers for elements that left viewport
+    entries.forEach(entry => {
+        if (entry.isIntersecting) return;
+        if (entry.target._seenTimer) {
+            clearTimeout(entry.target._seenTimer);
+            entry.target._seenTimer = null;
+        }
+    });
+}, { threshold: 0.5 }); // at least 50% of item must be visible
 
 // ========================
 // THEME MANAGEMENT (FIXED)
@@ -89,6 +120,7 @@ async function applyBranding() {
         // Branding failed — default styles remain, no crash
     }
 }
+
 function formatSize(bytes) {
     if (!bytes) return "";
     if (bytes >= 1024 ** 3) return (bytes / 1024 ** 3).toFixed(1) + " GB";
@@ -97,6 +129,33 @@ function formatSize(bytes) {
     return bytes + " B";
 }
 
+function getExpiryBadge(createdAt) {
+    // if retention is null ("never"), nothing expires
+    if (retention === null) return "";
+
+    const expiresAt = createdAt + retention;
+    const remaining = expiresAt - Date.now();
+    const THREE_HOURS = 3 * 60 * 60 * 1000;
+
+    if (remaining > THREE_HOURS) return "";
+    if (remaining <= 0) return `<span class="expiry-badge expiry-gone">expired</span>`;
+
+    const m = Math.floor(remaining / 60000);
+    const h = Math.floor(m / 60);
+    const label = h > 0 ? `${h}h ${m % 60}m` : `${m}m`;
+
+    return `<span class="expiry-badge">⏱ ${label}</span>`;
+}
+
+function escapeHtml(str) {
+    if (!str) return "";
+    return str
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}
+
 function playChime() {
     try {
         const ctx = new (window.AudioContext || window.webkitAudioContext)();
@@ -265,21 +324,37 @@ async function togglePreview(id, filename) {
 
         try {
             const res = await fetch(url);
-
             if (!res.ok) throw new Error("Failed to load");
 
-            // Check size via content-length header before reading
             const contentLength = res.headers.get("content-length");
             if (contentLength && parseInt(contentLength) > MAX_TEXT_PREVIEW_BYTES) {
                 panel.innerHTML = `
-          <div class="preview-error">
-            File is too large to preview (${formatSize(parseInt(contentLength))}).
-            <a href="${url}" target="_blank">Open in new tab</a>
-          </div>`;
+              <div class="preview-error">
+                File is too large to preview (${formatSize(parseInt(contentLength))}).
+                <a href="${url}" target="_blank">Open in new tab</a>
+              </div>`;
                 return;
             }
 
             const text = await res.text();
+            const ext = filename.split(".").pop().toLowerCase();
+
+            // markdown files — render as HTML, not syntax-highlighted raw text
+            if (ext === "md") {
+                const html = marked.parse(text);
+                const wrap = document.createElement("div");
+                wrap.className = "markdown-body markdown-preview";
+                wrap.innerHTML = html;
+
+                // syntax highlight any code blocks inside
+                wrap.querySelectorAll("pre code").forEach(el => hljs.highlightElement(el));
+
+                panel.innerHTML = "";
+                panel.appendChild(wrap);
+                return;
+            }
+
+            // all other text files — syntax highlighted raw view
             const lines = text.split("\n");
             const truncated = lines.length > MAX_TEXT_LINES;
             const preview = truncated
@@ -307,9 +382,9 @@ async function togglePreview(id, filename) {
 
         } catch (err) {
             panel.innerHTML = `
-        <div class="preview-error">
-          Could not load preview. <a href="${url}" target="_blank">Open directly</a>
-        </div>`;
+          <div class="preview-error">
+            Could not load preview. <a href="${url}" target="_blank">Open directly</a>
+          </div>`;
         }
     }
 }
@@ -379,6 +454,48 @@ function toggleMoveDropdown(e, id, currentChannel) {
     openDropdown = dropdown;
 }
 
+function toggleMoreMenu(e, id, currentChannel) {
+    e.stopPropagation();
+
+    const moreDropdown = e.currentTarget.nextElementSibling;
+    const isOpen = moreDropdown.classList.contains("open");
+
+    // close any other open dropdown
+    if (openDropdown && openDropdown !== moreDropdown) {
+        openDropdown.classList.remove("open");
+    }
+
+    if (isOpen) {
+        moreDropdown.classList.remove("open");
+        openDropdown = null;
+        return;
+    }
+
+    // build move list fresh each time
+    const moveList = moreDropdown.querySelector(".move-list");
+    const others = channels.filter(c => c.name !== currentChannel);
+    moveList.innerHTML = "";
+
+    if (others.length === 0) {
+        moveList.innerHTML = `<div class="dropdown-label" style="padding:4px 14px 8px">No other channels</div>`;
+    } else {
+        others.forEach(ch => {
+            const btn = document.createElement("button");
+            btn.innerText = ch.name;
+            btn.onclick = (ev) => {
+                ev.stopPropagation();
+                moveItem(id, ch.name);
+                moreDropdown.classList.remove("open");
+                openDropdown = null;
+            };
+            moveList.appendChild(btn);
+        });
+    }
+
+    moreDropdown.classList.add("open");
+    openDropdown = moreDropdown;
+}
+
 async function moveItem(id, toChannel) {
     await fetch(`/item/${id}/move`, {
         method: "PATCH",
@@ -467,158 +584,291 @@ async function loadMore() {
     await load(false);
 }
 
-function render(data) {
-    const el = document.getElementById("items");
-    el.innerHTML = "";
+// ========================
+// ITEM RENDERING
+// ========================
+function buildItemContent(i) {
+    if (i.type === "file") {
+        const isImg = i.filename.match(/\.(jpg|png|jpeg|gif)$/i);
+        const sizeLabel = formatSize(i.size);
+        const sizeClass = getSizeTag(i.size);
+        const sizeTag = sizeClass
+            ? `<span class="size-tag ${sizeClass}">${sizeLabel}</span>`
+            : sizeLabel
+                ? `<span style="font-size:11px;color:#9ca3af;margin-left:6px;">${sizeLabel}</span>`
+                : "";
+
+        if (isImg) {
+            return `<img src="/uploads/${i.filename}" style="max-width:200px;border-radius:6px"><br>
+                <a href="/uploads/${i.filename}" target="_blank">${i.filename}</a>${sizeTag}`;
+        }
+        return `<a href="/uploads/${i.filename}" target="_blank">${i.filename}</a>${sizeTag}`;
+    }
 
-    if (!data.length) {
-        el.innerHTML = `<div class="empty-state">Nothing here yet — paste, type, or drop a file to share</div>`;
-        return;
+    const isLink = i.content && i.content.startsWith("http");
+    if (isLink) return `<a href="${i.content}" target="_blank">${i.content}</a>`;
+    return renderText(i.content);
+}
+
+function buildItemEl(i) {
+    const div = document.createElement("div");
+    div.className = "item";
+
+    if (newItemIds.has(i.id) && !i.pinned) {
+        div.classList.add("item-new");
+        setTimeout(() => {
+            div.classList.remove("item-new");
+            newItemIds.delete(i.id);
+        }, 4000);
     }
+    div.dataset.itemId = i.id;
+
+    const content = buildItemContent(i);
+    const isFile = i.type === "file";
+    const dataValue = isFile
+        ? `/uploads/${i.filename}`
+        : (i.content || "").replace(/"/g, "&quot;");
+    const tooltip = isFile ? "Click to download" : "Click to copy";
+
+    // contextual slot — preview for files, edit for text, nothing otherwise
+    const contextualBtn = getPreviewType(i.filename) !== "none" && getPreviewType(i.filename) !== "image"
+        ? `<button class="icon-btn" id="prevbtn-${i.id}"
+           onclick="togglePreview(${i.id}, '${i.filename}')"
+           title="Preview"><i data-lucide="eye"></i></button>`
+        : !isFile
+            ? `<button class="icon-btn" onclick="editContent(${i.id})" title="Edit content"><i data-lucide="pencil-line"></i></button>`
+            : "";
+
+    const titleHtml = i.title
+        ? `<div class="item-title" id="item-title-${i.id}">${escapeHtml(i.title)}</div>`
+        : `<div class="item-title" id="item-title-${i.id}" style="display:none"></div>`;
+
+    div.innerHTML = `
+    <div class="item-top">
+        <div class="left"
+             data-tooltip="${tooltip}"
+             data-type="${isFile ? "file" : "text"}"
+             data-value="${dataValue}">
+            ${titleHtml}
+            ${content}
+            <div class="meta">
+                ${i.uploader}
+                <span class="seen-count" id="seen-${i.id}" style="display:none">👁 <span class="seen-num"></span></span>
+                ${getExpiryBadge(i.created_at)}
+            </div>
+        </div>
+        <div class="item-actions">
+            ${contextualBtn}
+            <button class="icon-btn ${i.pinned ? "pinned" : ""}" onclick="pin(${i.id})" title="${i.pinned ? "Unpin" : "Pin"}">
+                <i data-lucide="${i.pinned ? "pin-off" : "pin"}"></i>
+            </button>
+            <button class="icon-btn delete" onclick="del(${i.id}, ${i.pinned})" title="Delete">
+                <i data-lucide="trash-2"></i>
+            </button>
+            <div class="more-wrapper">
+                <button class="icon-btn more-btn" onclick="toggleMoreMenu(event, ${i.id}, '${i.channel}')" title="More">
+                    <i data-lucide="more-vertical"></i>
+                </button>
+                <div class="more-dropdown">
+                    <button onclick="editTitle(${i.id})">
+                        <i data-lucide="tag"></i> Add / edit title
+                    </button>
+                    <div class="menu-divider"></div>
+                    <div class="dropdown-label">Move to</div>
+                    <div class="move-list"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="preview-panel" id="preview-${i.id}"></div>`;
 
-    data.forEach(i => {
-        const div = document.createElement("div");
-        div.className = "item";
-        div.dataset.itemId = i.id;
-
-        let content = "";
-
-        if (i.type === "file") {
-            const isImg = i.filename.match(/\.(jpg|png|jpeg|gif)$/i);
-            const sizeLabel = formatSize(i.size);
-            const sizeClass = getSizeTag(i.size);
-            const sizeTag = sizeClass
-                ? `<span class="size-tag ${sizeClass}">${sizeLabel}</span>`
-                : sizeLabel
-                    ? `<span style="font-size:11px;color:#9ca3af;margin-left:6px;">${sizeLabel}</span>`
-                    : "";
-
-            if (isImg) {
-                content = `<img src="/uploads/${i.filename}" style="max-width:200px;border-radius:6px"><br>
-        <a href="/uploads/${i.filename}" target="_blank">${i.filename}</a>${sizeTag}`;
-            } else {
-                content = `<a href="/uploads/${i.filename}" target="_blank">${i.filename}</a>${sizeTag}`;
-            }
+    seenObserver.observe(div);
+    if (typeof lucide !== "undefined") lucide.createIcons({ nodes: [div] });
+    return div;
+}
+
+function editTitle(id) {
+    const titleEl = document.getElementById("item-title-" + id);
+    if (!titleEl) return;
+
+    const current = titleEl.dataset.value || titleEl.innerText.trim();
+
+    const input = document.createElement("input");
+    input.type = "text";
+    input.className = "title-input";
+    input.value = current;
+    input.placeholder = "Add a title...";
+    input.maxLength = 100;
+
+    titleEl.replaceWith(input);
+    input.focus();
+    input.select();
+
+    async function save() {
+        const newTitle = input.value.trim();
+        const res = await fetch(`/item/${id}/title`, {
+            method: "PATCH",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ title: newTitle })
+        });
+        if (!res.ok) { restore(); return; }
+
+        const fresh = document.createElement("div");
+        fresh.className = "item-title";
+        fresh.id = "item-title-" + id;
+        if (newTitle) {
+            fresh.innerText = newTitle;
+            fresh.style.display = "";
         } else {
-            const isLink = i.content && i.content.startsWith("http");
-            if (isLink) {
-                content = `<a href="${i.content}" target="_blank">${i.content}</a>`;
-            } else {
-                content = renderText(i.content);
-            }
+            fresh.style.display = "none";
         }
+        input.replaceWith(fresh);
+    }
 
-        const pinText = i.pinned ? "unpin" : "pin";
-
-        const isFile = i.type === "file";
-        const clickValue = isFile
-            ? `/uploads/${i.filename}`
-            : i.content;
-        const tooltip = isFile ? "Click to download" : "Click to copy";
-
-        div.innerHTML = `
-  <div class="item-top">
-    <div class="left"
-     data-tooltip="${i.type === 'file' ? 'Click to download' : 'Click to copy'}"
-     data-type="${i.type === 'file' ? 'file' : 'text'}"
-data-value="${i.type === 'file'
-                ? `/uploads/${i.filename}`
-                : (i.content || '').replace(/"/g, '&quot;')}">
-  ${content}
-  <div class="meta">${i.uploader}</div>
-</div>
-    <div class="item-actions">
-     ${getPreviewType(i.filename) !== "none" && getPreviewType(i.filename) !== "image"
-                ? `<button class="icon-btn" id="prevbtn-${i.id}"
-       onclick="togglePreview(${i.id}, '${i.filename}')"
-       title="Preview">👁</button>`
-                : ""}
-      <button class="icon-btn" onclick="pin(${i.id})" title="${i.pinned ? 'Unpin' : 'Pin'}">
-        ${i.pinned ? "📍" : "📌"}
-      </button>
-      <div class="move-wrapper">
-        <button class="icon-btn" title="Move to channel"
-          onclick="toggleMoveDropdown(event, ${i.id}, '${i.channel}')">⇄</button>
-        <div class="move-dropdown"></div>
-      </div>
-      <button class="icon-btn delete" onclick="del(${i.id}, ${i.pinned})" title="Delete">🗑</button>
+    function restore() {
+        const fresh = document.createElement("div");
+        fresh.className = "item-title";
+        fresh.id = "item-title-" + id;
+        if (current) {
+            fresh.innerText = current;
+            fresh.style.display = "";
+        } else {
+            fresh.style.display = "none";
+        }
+        input.replaceWith(fresh);
+    }
 
-    </div>
-  </div>
-  <div class="preview-panel" id="preview-${i.id}"></div>
-`;
-        el.appendChild(div);
+    input.addEventListener("keydown", e => {
+        if (e.key === "Enter") { e.preventDefault(); save(); }
+        if (e.key === "Escape") { e.preventDefault(); restore(); }
     });
+
+    input.addEventListener("blur", save);
 }
 
-function renderMore(data) {
-    const el = document.getElementById("items");
-    data.forEach(i => {
-        const div = document.createElement("div");
-        div.className = "item";
-        div.dataset.itemId = i.id;
-
-        let content = "";
-
-        if (i.type === "file") {
-            const isImg = i.filename.match(/\.(jpg|png|jpeg|gif)$/i);
-            const sizeLabel = formatSize(i.size);
-            const sizeClass = getSizeTag(i.size);
-            const sizeTag = sizeClass
-                ? `<span class="size-tag ${sizeClass}">${sizeLabel}</span>`
-                : sizeLabel
-                    ? `<span style="font-size:11px;color:#9ca3af;margin-left:6px;">${sizeLabel}</span>`
-                    : "";
-
-            if (isImg) {
-                content = `<img src="/uploads/${i.filename}" style="max-width:200px;border-radius:6px"><br>
-                <a href="/uploads/${i.filename}" target="_blank">${i.filename}</a>${sizeTag}`;
-            } else {
-                content = `<a href="/uploads/${i.filename}" target="_blank">${i.filename}</a>${sizeTag}`;
-            }
+function editContent(id) {
+    const itemEl = document.querySelector(`.item[data-item-id="${id}"]`);
+    if (!itemEl) return;
+
+    const leftEl = itemEl.querySelector(".left");
+    if (!leftEl) return;
+
+    // grab current raw content from data-value
+    const current = leftEl.dataset.value || "";
+
+    // find the content node — everything except .meta and .item-title
+    const metaEl = leftEl.querySelector(".meta");
+    const titleEl = leftEl.querySelector(".item-title");
+
+    // collect content nodes (not meta, not title)
+    const contentNodes = Array.from(leftEl.childNodes).filter(n => {
+        if (n === metaEl) return false;
+        if (n === titleEl) return false;
+        return true;
+    });
+
+    // replace content nodes with textarea
+    const textarea = document.createElement("textarea");
+    textarea.className = "edit-textarea";
+    textarea.value = current;
+
+    contentNodes.forEach(n => n.remove());
+    leftEl.insertBefore(textarea, metaEl);
+    textarea.focus();
+
+    // auto-height
+    textarea.style.height = Math.max(80, textarea.scrollHeight) + "px";
+    textarea.addEventListener("input", () => {
+        textarea.style.height = "auto";
+        textarea.style.height = textarea.scrollHeight + "px";
+    });
+
+    let done = false;
+
+    async function save() {
+        if (done) return;
+        done = true;
+
+        const newContent = textarea.value.trim();
+        if (!newContent) { restore(); return; }
+        if (newContent === current) { restore(); return; }
+
+        const res = await fetch(`/item/${id}/content`, {
+            method: "PATCH",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ content: newContent })
+        });
+
+        if (!res.ok) { done = false; restore(); return; }
+
+        leftEl.dataset.value = newContent;
+        restoreWithContent(newContent);
+    }
+
+    function restore() {
+        if (done) return;
+        done = true;
+        restoreWithContent(current);
+    }
+
+    function restoreWithContent(text) {
+        textarea.remove();
+
+        const isLink = text.startsWith("http");
+        let node;
+        if (isLink) {
+            node = document.createElement("a");
+            node.href = text;
+            node.target = "_blank";
+            node.innerText = text;
         } else {
-            const isLink = i.content && i.content.startsWith("http");
-            if (isLink) {
-                content = `<a href="${i.content}" target="_blank">${i.content}</a>`;
-            } else {
-                content = renderText(i.content);
-            }
+            const wrap = document.createElement("div");
+            wrap.innerHTML = renderText(text);
+            node = wrap;
         }
 
-        div.innerHTML = `
-        <div class="item-top">
-            <div class="left"
-             data-tooltip="${i.type === 'file' ? 'Click to download' : 'Click to copy'}"
-             data-type="${i.type === 'file' ? 'file' : 'text'}"
-             data-value="${i.type === 'file'
-                ? `/uploads/${i.filename}`
-                : (i.content || '').replace(/"/g, '&quot;')}">
-                ${content}
-                <div class="meta">${i.uploader}</div>
-            </div>
-            <div class="item-actions">
-                ${getPreviewType(i.filename) !== "none" && getPreviewType(i.filename) !== "image"
-                ? `<button class="icon-btn" id="prevbtn-${i.id}"
-                       onclick="togglePreview(${i.id}, '${i.filename}')"
-                       title="Preview">👁</button>`
-                : ""}
-                <button class="icon-btn" onclick="pin(${i.id})" title="${i.pinned ? 'Unpin' : 'Pin'}">
-                    ${i.pinned ? "📍" : "📌"}
-                </button>
-                <div class="move-wrapper">
-                    <button class="icon-btn" title="Move to channel"
-                        onclick="toggleMoveDropdown(event, ${i.id}, '${i.channel}')">⇄</button>
-                    <div class="move-dropdown"></div>
-                </div>
-                <button class="icon-btn delete" onclick="del(${i.id}, ${i.pinned})" title="Delete">🗑</button>
-            </div>
-        </div>
-        <div class="preview-panel" id="preview-${i.id}"></div>`;
+        leftEl.insertBefore(node, metaEl);
+    }
+
+    textarea.addEventListener("keydown", e => {
+        // Ctrl+Enter or Cmd+Enter saves
+        if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+            e.preventDefault();
+            save();
+        }
+        if (e.key === "Escape") {
+            e.preventDefault();
+            restore();
+        }
+    });
 
-        el.appendChild(div);
+    // blur saves only if focus didn't move to another part of same item
+    textarea.addEventListener("blur", e => {
+        setTimeout(() => {
+            if (!itemEl.contains(document.activeElement)) {
+                save();
+            }
+        }, 150);
     });
 }
 
+function render(data) {
+    const el = document.getElementById("items");
+    el.innerHTML = "";
+
+    if (!data.length) {
+        el.innerHTML = `<div class="empty-state">Nothing here yet — paste, type, or drop a file to share</div>`;
+        return;
+    }
+
+    data.forEach(i => el.appendChild(buildItemEl(i)));
+}
+
+function renderMore(data) {
+    const el = document.getElementById("items");
+    data.forEach(i => el.appendChild(buildItemEl(i)));
+}
+
 function renderGrouped(data) {
     const el = document.getElementById("items");
     el.innerHTML = "";
@@ -628,7 +878,6 @@ function renderGrouped(data) {
         return;
     }
 
-    // group by channel
     const grouped = {};
     data.forEach(item => {
         if (!grouped[item.channel]) grouped[item.channel] = [];
@@ -638,86 +887,11 @@ function renderGrouped(data) {
     Object.keys(grouped).forEach(ch => {
         const section = document.createElement("div");
         section.style.marginTop = "20px";
-
         section.innerHTML = `
-      <div style="font-size:13px;font-weight:600;color:#6b7280;margin-bottom:8px;">
-        ${ch.toUpperCase()}
-      </div>
-    `;
-
-        grouped[ch].forEach(i => {
-            const div = document.createElement("div");
-            div.className = "item";
-            div.dataset.itemId = i.id;
-
-            let content = "";
-
-            if (i.type === "file") {
-                const isImg = i.filename.match(/\.(jpg|png|jpeg|gif)$/i);
-                const sizeLabel = formatSize(i.size);
-                const sizeClass = getSizeTag(i.size);
-                const sizeTag = sizeClass
-                    ? `<span class="size-tag ${sizeClass}">${sizeLabel}</span>`
-                    : sizeLabel
-                        ? `<span style="font-size:11px;color:#9ca3af;margin-left:6px;">${sizeLabel}</span>`
-                        : "";
-
-                if (isImg) {
-                    content = `<img src="/uploads/${i.filename}" style="max-width:200px;border-radius:6px"><br>
-        <a href="/uploads/${i.filename}" target="_blank">${i.filename}</a>${sizeTag}`;
-                } else {
-                    content = `<a href="/uploads/${i.filename}" target="_blank">${i.filename}</a>${sizeTag}`;
-                }
-            } else {
-                const isLink = i.content && i.content.startsWith("http");
-                if (isLink) {
-                    content = `<a href="${i.content}" target="_blank">${i.content}</a>`;
-                } else {
-                    content = renderText(i.content);
-                }
-            }
-
-            const isFile = i.type === "file";
-            const clickValue = isFile
-                ? `/uploads/${i.filename}`
-                : i.content;
-            const tooltip = isFile ? "Click to download" : "Click to copy";
-
-            div.innerHTML = `
-  <div class="item-top">
-    <div class="left"
-     data-tooltip="${i.type === 'file' ? 'Click to download' : 'Click to copy'}"
-     data-type="${i.type === 'file' ? 'file' : 'text'}"
-data-value="${i.type === 'file'
-                    ? `/uploads/${i.filename}`
-                    : (i.content || '').replace(/"/g, '&quot;')}">
-  ${content}
-  <div class="meta">${i.uploader}</div>
-</div>
-    <div class="item-actions">
-      ${getPreviewType(i.filename) !== "none" && getPreviewType(i.filename) !== "image"
-                    ? `<button class="icon-btn" id="prevbtn-${i.id}"
-       onclick="togglePreview(${i.id}, '${i.filename}')"
-       title="Preview">👁</button>`
-                    : ""}
-      <button class="icon-btn" onclick="pin(${i.id})" title="${i.pinned ? 'Unpin' : 'Pin'}">
-        ${i.pinned ? "📍" : "📌"}
-      </button>
-      <div class="move-wrapper">
-        <button class="icon-btn" title="Move to channel"
-          onclick="toggleMoveDropdown(event, ${i.id}, '${i.channel}')">⇄</button>
-        <div class="move-dropdown"></div>
-      </div>
-      <button class="icon-btn delete" onclick="del(${i.id}, ${i.pinned})" title="Delete">🗑</button>
-
-    </div>
-  </div>
-  <div class="preview-panel" id="preview-${i.id}"></div>
-`;
-
-            section.appendChild(div);
-        });
-
+            <div style="font-size:13px;font-weight:600;color:#6b7280;margin-bottom:8px;">
+                ${ch.toUpperCase()}
+            </div>`;
+        grouped[ch].forEach(i => section.appendChild(buildItemEl(i)));
         el.appendChild(section);
     });
 }
@@ -867,10 +1041,11 @@ async function logout() {
 
 socket.on("new-item", item => {
     if (item.channel === channel) {
+        if (!item.pinned) newItemIds.add(item.id);
         load();
         if (item.uploader !== uploader) playChime();
     } else if (item.uploader !== uploader) {
-        // item arrived in a different channel — mark it unread
+        if (!item.pinned) newItemIds.add(item.id);
         unreadChannels.add(item.channel);
         renderChannels();
     }
@@ -889,6 +1064,56 @@ socket.on("delete-item", id => {
     }
 });
 
+socket.on("item-updated", ({ id, title, content, edited_at }) => {
+    if (title !== undefined) {
+        const titleEl = document.getElementById("item-title-" + id);
+        if (titleEl) {
+            titleEl.innerText = title;
+            titleEl.style.display = title ? "" : "none";
+        }
+    }
+
+    if (content !== undefined) {
+        const itemEl = document.querySelector(`.item[data-item-id="${id}"]`);
+        if (!itemEl) return;
+        const leftEl = itemEl.querySelector(".left");
+        if (!leftEl) return;
+
+        // only update if not currently being edited
+        if (leftEl.querySelector(".edit-textarea")) return;
+
+        leftEl.dataset.value = content;
+
+        const metaEl = leftEl.querySelector(".meta");
+        const titleEl = leftEl.querySelector(".item-title");
+        Array.from(leftEl.childNodes).forEach(n => {
+            if (n !== metaEl && n !== titleEl) n.remove();
+        });
+
+        const isLink = content.startsWith("http");
+        if (isLink) {
+            const a = document.createElement("a");
+            a.href = content;
+            a.target = "_blank";
+            a.innerText = content;
+            leftEl.insertBefore(a, metaEl);
+        } else {
+            const wrap = document.createElement("div");
+            wrap.innerHTML = renderText(content);
+            leftEl.insertBefore(wrap, metaEl);
+        }
+    }
+});
+
+socket.on("seen-update", ({ id, count }) => {
+    const el = document.getElementById("seen-" + id);
+    if (!el) return;
+    if (count >= 2) {
+        el.querySelector(".seen-num").innerText = count;
+        el.style.display = "";
+    }
+});
+
 socket.on("user-count", count => {
     const el = document.getElementById("onlineCount");
     if (el) el.textContent = `● ${count} online`;
@@ -963,6 +1188,26 @@ document.addEventListener("paste", async e => {
     // if user is typing in input, don't auto-send
     if (active && active.id === "msg") return;
 
+    // check for image in clipboard first
+    const items = e.clipboardData.items;
+    for (const item of items) {
+        if (item.type.startsWith("image/")) {
+            const file = item.getAsFile();
+            if (!file) continue;
+
+            // give it a meaningful name with timestamp
+            const ext = item.type.split("/")[1] || "png";
+            const named = new File(
+                [file],
+                `pasted-${Date.now()}.${ext}`,
+                { type: item.type }
+            );
+            uploadFiles([named]);
+            return; // image found, don't fall through to text
+        }
+    }
+
+    // no image — handle as text
     const text = e.clipboardData.getData("text");
     if (!text) return;
 
@@ -1334,6 +1579,7 @@ document.addEventListener("keydown", e => {
     if (!info.hasAuth) {
         document.getElementById("logoutBtn").style.display = "none";
     }
+    retention = info.retention; // null if "never", ms value otherwise
     await loadChannels();
     load();
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instbyte",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "A self-hosted LAN sharing utility for fast, frictionless file, link, and snippet exchange across devices — no cloud required.",
   "main": "server/server.js",
   "bin": {

package/server/cleanup.js

@@ -3,13 +3,12 @@ const fs = require("fs");
 const path = require("path");
 const config = require("./config");
 
-const DAY = config.storage.retention;
-
 setInterval(() => {
-  const cutoff = Date.now() - DAY;
+  if (config.storage.retention === null) return;
+  const cutoff = Date.now() - config.storage.retention;
 
   db.all(
-    `SELECT * FROM items WHERE created_at < ?`,
+    `SELECT * FROM items WHERE created_at < ? AND pinned = 0`,
     [cutoff],
     (err, rows) => {
       rows.forEach((item) => {

package/server/config.js

@@ -30,6 +30,7 @@ function parseFileSize(val) {
 }
 
 function parseRetention(val) {
+    if (String(val).toLowerCase() === "never") return null;
     if (typeof val === "number") return val;
     const units = { h: 3600000, d: 86400000 };
     const match = String(val).match(/^(\d+)(h|d)$/i);

package/server/db.js

@@ -36,6 +36,9 @@ db.serialize(() => {
   db.run(`ALTER TABLE items ADD COLUMN size INTEGER DEFAULT 0`, () => { });
   db.run(`ALTER TABLE channels ADD COLUMN pinned INTEGER DEFAULT 0`, () => { });
 
+  db.run(`ALTER TABLE items ADD COLUMN title TEXT DEFAULT ''`, () => { });
+  db.run(`ALTER TABLE items ADD COLUMN edited_at INTEGER DEFAULT NULL`, () => { });
+
   // Insert default channels if empty
   db.get("SELECT COUNT(*) as count FROM channels", (err, row) => {
     if (err) {

package/server/server.js

@@ -525,6 +525,45 @@ app.patch("/item/:id/move", (req, res) => {
   });
 });
 
+/* UPDATE ITEM TITLE */
+app.patch("/item/:id/title", (req, res) => {
+  const { id } = req.params;
+  const { title } = req.body;
+
+  if (title === undefined) return res.status(400).json({ error: "Title required" });
+
+  db.run(
+    "UPDATE items SET title=? WHERE id=?",
+    [title.trim(), id],
+    function (err) {
+      if (err) return res.status(500).json({ error: "Update failed" });
+      if (this.changes === 0) return res.status(404).json({ error: "Item not found" });
+      io.emit("item-updated", { id: parseInt(id), title: title.trim() });
+      res.json({ id, title: title.trim() });
+    }
+  );
+});
+
+/* UPDATE ITEM CONTENT */
+app.patch("/item/:id/content", (req, res) => {
+  const { id } = req.params;
+  const { content } = req.body;
+
+  if (content === undefined) return res.status(400).json({ error: "Content required" });
+  if (content.trim() === "") return res.status(400).json({ error: "Content cannot be empty" });
+
+  db.run(
+    "UPDATE items SET content=?, edited_at=? WHERE id=? AND type='text'",
+    [content.trim(), Date.now(), id],
+    function (err) {
+      if (err) return res.status(500).json({ error: "Update failed" });
+      if (this.changes === 0) return res.status(404).json({ error: "Item not found or not editable" });
+      io.emit("item-updated", { id: parseInt(id), content: content.trim(), edited_at: Date.now() });
+      res.json({ id, content: content.trim() });
+    }
+  );
+});
+
 /* RENAME CHANNEL */
 app.patch("/channels/:name", (req, res) => {
   const oldName = req.params.name;
@@ -573,7 +612,8 @@ app.post("/channels/:name/pin", (req, res) => {
 app.get("/info", (req, res) => {
   res.json({
     url: `http://${localIP}:${PORT}`,
-    hasAuth: !!config.auth.passphrase
+    hasAuth: !!config.auth.passphrase,
+    retention: config.storage.retention  // null means "never"
   });
 });
 
@@ -650,6 +690,9 @@ app.get("/logo-dynamic.png", (req, res) => {
 /* ============================
    SOCKET CONNECTION LOGGING
 ============================ */
+// in-memory seen tracking — item id → Set of socket ids
+// resets on server restart, no DB needed
+const seenBy = new Map();
 
 let connectedUsers = 0;
 
@@ -664,6 +707,15 @@ io.on("connection", (socket) => {
     console.log(username + " connected | total:", connectedUsers);
   });
 
+  socket.on("seen", ({ id, name }) => {
+    if (!id || !name) return;
+    if (!seenBy.has(id)) seenBy.set(id, new Set());
+    seenBy.get(id).add(name); // name instead of socket.id
+    const count = seenBy.get(id).size;
+    console.log(`seen: item ${id} | count: ${count}`);
+    io.emit("seen-update", { id, count });
+  });
+
   socket.on("disconnect", () => {
     connectedUsers--;
     console.log(username + " disconnected | total:", connectedUsers);