instbyte 1.6.3 → 1.8.0

package/client/index.html

@@ -25,9 +25,11 @@
       </div>
     </div>
     <div class="header-right">
-      <span id="who"></span>
-      <button onclick="changeName()" class="link-btn">change</button>
-      <button id="logoutBtn" onclick="logout()" class="link-btn">logout</button>
+      <span id="who" class="username-display" onclick="changeName()" title="Click to change name"></span>
+      <span id="onlineCount" class="online-count"></span>
+      <button id="themeToggle" onclick="cycleTheme()" class="link-btn theme-toggle" title="Toggle theme">🌙</button>
+      <button id="logoutBtn" onclick="logout()" class="logout-btn">logout</button>
+    </div>
     </div>
   </header>
 
@@ -41,7 +43,7 @@
     <div class="composer">
       <input id="msg" type="text" placeholder="Type message or paste link" onkeydown="handleEnter(event)" />
       <button onclick="sendText()">Send</button>
-      <input type="file" id="fileInput" hidden>
+      <input type="file" id="fileInput" hidden multiple>
       <button onclick="fileInput.click()">Upload</button>
     </div>
     <div class="drop" id="drop">Drag files anywhere to upload</div>
@@ -53,6 +55,9 @@
       </div>
     </div>
     <div id="items"></div>
+    <div id="loadMoreWrapper" style="display:none; text-align:center; margin:16px 0;">
+      <button id="loadMoreBtn" onclick="loadMore()" class="load-more-btn">Load more</button>
+    </div>
   </div>
 
   <div id="dragOverlay"
@@ -71,6 +76,12 @@
 
   <div class="context-menu" id="channelMenu"></div>
 
+  <div id="undoToast" class="undo-toast">
+    <span id="undoMsg">Item deleted</span>
+    <button id="undoBtn" onclick="undoDelete()">Undo</button>
+    <div id="undoProgress" class="undo-progress"></div>
+  </div>
+
   <script src="/socket.io/socket.io.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

package/client/js/app.js

@@ -1,5 +1,63 @@
 const socket = io();
 
+let currentPage = 1;
+let hasMoreItems = false;
+
+// ========================
+// 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");
@@ -39,6 +97,37 @@ function formatSize(bytes) {
     return bytes + " B";
 }
 
+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);
@@ -249,6 +338,10 @@ document.getElementById("items").addEventListener("click", e => {
 
 let openDropdown = null;
 
+let pendingDeleteId = null;
+let pendingDeleteTimer = null;
+let pendingDeleteEl = null;
+
 function toggleMoveDropdown(e, id, currentChannel) {
     e.stopPropagation();
 
@@ -304,6 +397,7 @@ document.addEventListener("click", () => {
 
 let channel = null;
 let channels = [];
+let unreadChannels = new Set();
 
 let uploader = localStorage.getItem("name") || "";
 
@@ -320,7 +414,7 @@ async function initName() {
         uploader = prompt("Your name?", suggested) || suggested;
         localStorage.setItem("name", uploader);
     }
-    document.getElementById("who").innerText = "You: " + uploader;
+    document.getElementById("who").innerText = uploader;
     socket.emit("join", uploader);
 }
 
@@ -332,16 +426,45 @@ function highlight() {
 }
 
 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() {
-    const res = await fetch("/items/" + channel);
+async function load(resetPage = true) {
+    if (resetPage) currentPage = 1;
+
+    const res = await fetch(`/items/${channel}?page=${currentPage}`);
     const data = await res.json();
-    render(data);
+
+    console.log("load called, page:", currentPage, "data:", data);
+
+    hasMoreItems = data.hasMore;
+
+    if (currentPage === 1) {
+        render(data.items);
+    } else {
+        renderMore(data.items);
+    }
+
+    const wrapper = document.getElementById("loadMoreWrapper");
+    wrapper.style.display = hasMoreItems ? "block" : "none";
+}
+
+async function loadMore() {
+    currentPage++;
+    await load(false);
 }
 
 function render(data) {
@@ -356,6 +479,7 @@ function render(data) {
     data.forEach(i => {
         const div = document.createElement("div");
         div.className = "item";
+        div.dataset.itemId = i.id;
 
         let content = "";
 
@@ -427,6 +551,74 @@ data-value="${i.type === 'file'
     });
 }
 
+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}`;
+            }
+        } 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);
+            }
+        }
+
+        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>`;
+
+        el.appendChild(div);
+    });
+}
+
 function renderGrouped(data) {
     const el = document.getElementById("items");
     el.innerHTML = "";
@@ -456,6 +648,7 @@ function renderGrouped(data) {
         grouped[ch].forEach(i => {
             const div = document.createElement("div");
             div.className = "item";
+            div.dataset.itemId = i.id;
 
             let content = "";
 
@@ -544,7 +737,7 @@ async function sendText() {
 }
 
 function handleEnter(e) {
-    if (e.key === "Enter" && !e.shiftKey) {
+    if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
         e.preventDefault();
         sendText();
     }
@@ -555,7 +748,7 @@ function changeName() {
     if (!n) return;
     uploader = n;
     localStorage.setItem("name", n);
-    document.getElementById("who").innerText = "You: " + uploader;
+    document.getElementById("who").innerText = uploader;
 }
 
 let qrLoaded = false;
@@ -584,18 +777,83 @@ document.addEventListener("click", e => {
 const fileInput = document.getElementById("fileInput");
 
 fileInput.onchange = () => {
-    const file = fileInput.files[0];
-    if (file) uploadFile(file);
+    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;
     }
-    await fetch("/item/" + id, { method: "DELETE" });
+
+    // 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();
@@ -608,11 +866,32 @@ async function logout() {
 }
 
 socket.on("new-item", item => {
-    if (item.channel === channel) load();
+    if (item.channel === channel) {
+        load();
+        if (item.uploader !== uploader) playChime();
+    } else if (item.uploader !== uploader) {
+        // item arrived in a different channel — mark it unread
+        unreadChannels.add(item.channel);
+        renderChannels();
+    }
 });
 
 socket.on("delete-item", id => {
-    load();
+    // 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("user-count", count => {
+    const el = document.getElementById("onlineCount");
+    if (el) el.textContent = `● ${count} online`;
 });
 
 socket.on("item-moved", ({ id, channel: toChannel }) => {
@@ -661,15 +940,17 @@ document.getElementById("search").addEventListener("input", async e => {
     const q = e.target.value.trim();
 
     if (!q) {
+        document.getElementById("loadMoreWrapper").style.display = "none";
         highlight();
         load();
         return;
     }
 
-    // remove active tab highlight while searching
     document.querySelectorAll(".channels button")
         .forEach(b => b.classList.remove("active"));
 
+    document.getElementById("loadMoreWrapper").style.display = "none";
+
     const res = await fetch(`/search/${q}`);
     const data = await res.json();
     renderGrouped(data);
@@ -696,47 +977,63 @@ document.addEventListener("paste", async e => {
     });
 });
 
-function uploadFile(file) {
+async function uploadFiles(files) {
+    if (!files || !files.length) return;
+
     const status = document.getElementById("uploadStatus");
     const bar = document.getElementById("uploadBar");
     const text = document.getElementById("uploadText");
 
-    status.style.display = "block";
-    bar.style.width = "0%";
-    text.innerText = "Uploading: " + file.name;
+    const total = files.length;
+    const targetChannel = channel; // capture at start, won't change if user switches
 
-    const form = new FormData();
-    form.append("file", file);
-    form.append("channel", channel);
-    form.append("uploader", uploader);
+    for (let i = 0; i < total; i++) {
+        const file = files[i];
 
-    const xhr = new XMLHttpRequest();
-    xhr.open("POST", "/upload", true);
+        status.style.display = "block";
+        bar.style.width = "0%";
+        text.innerText = total > 1
+            ? `Uploading ${i + 1} of ${total} · ${file.name}`
+            : `Uploading: ${file.name}`;
 
-    xhr.upload.onprogress = e => {
-        if (e.lengthComputable) {
-            const percent = Math.round((e.loaded / e.total) * 100);
-            bar.style.width = percent + "%";
-        }
-    };
+        await new Promise((resolve) => {
+            const form = new FormData();
+            form.append("file", file);
+            form.append("channel", targetChannel);
+            form.append("uploader", uploader);
 
-    xhr.onload = () => {
-        status.style.display = "none";
-        if (xhr.status === 413) {
-            alert("File too large — 2GB maximum allowed.");
-            fileInput.value = "";
-            return;
-        }
-        fileInput.value = "";
-        load();
-    };
+            const xhr = new XMLHttpRequest();
+            xhr.open("POST", "/upload", true);
 
-    xhr.onerror = () => {
-        status.style.display = "none";
-        alert("Upload failed");
-    };
+            xhr.upload.onprogress = e => {
+                if (e.lengthComputable) {
+                    bar.style.width = Math.round((e.loaded / e.total) * 100) + "%";
+                }
+            };
+
+            xhr.onload = () => {
+                if (xhr.status === 413) {
+                    text.innerText = `⚠ ${file.name} is too large — skipped`;
+                    bar.style.width = "0%";
+                    setTimeout(resolve, 1200);
+                    return;
+                }
+                resolve();
+            };
+
+            xhr.onerror = () => {
+                text.innerText = `⚠ ${file.name} failed — skipped`;
+                bar.style.width = "0%";
+                setTimeout(resolve, 1200);
+            };
+
+            xhr.send(form);
+        });
+    }
 
-    xhr.send(form);
+    status.style.display = "none";
+    fileInput.value = "";
+    load();
 }
 
 
@@ -828,6 +1125,12 @@ function renderChannels() {
             btn.appendChild(dot);
         }
 
+        if (unreadChannels.has(ch.name)) {
+            const unread = document.createElement("span");
+            unread.className = "ch-unread-dot";
+            btn.appendChild(unread);
+        }
+
         const more = document.createElement("span");
         more.className = "ch-more";
         more.innerText = "⋯";
@@ -922,15 +1225,105 @@ document.addEventListener("drop", async e => {
     overlay.style.display = "none";
     dragCounter = 0;
 
-    const file = e.dataTransfer.files[0];
-    if (!file) return;
+    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;
+        }
+    }
 
-    const form = new FormData();
-    form.append("file", file);
-    form.append("channel", channel);
-    form.append("uploader", uploader);
+    // All remaining shortcuts — skip if typing
+    if (isTyping) return;
 
-    uploadFile(file);
 });
 
 (async function init() {