instbyte 1.7.0 → 1.8.0

package/client/index.html

@@ -25,10 +25,11 @@
       </div>
     </div>
     <div class="header-right">
-      <span id="who"></span>
-      <button onclick="changeName()" class="link-btn">change</button>
-      <button id="themeToggle" onclick="cycleTheme()">🌙</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>
 
@@ -54,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"

package/client/js/app.js

@@ -1,5 +1,8 @@
 const socket = io();
 
+let currentPage = 1;
+let hasMoreItems = false;
+
 // ========================
 // THEME MANAGEMENT (FIXED)
 // ========================
@@ -94,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);
@@ -363,6 +397,7 @@ document.addEventListener("click", () => {
 
 let channel = null;
 let channels = [];
+let unreadChannels = new Set();
 
 let uploader = localStorage.getItem("name") || "";
 
@@ -379,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);
 }
 
@@ -400,16 +435,36 @@ function setChannel(c) {
         pendingDeleteEl = null;
         hideUndoToast();
     }
+    unreadChannels.delete(c); // clear unread when switching to channel
     channel = c;
     renderChannels();
     highlight();
     load();
 }
 
-async function load() {
-    const res = await fetch("/items/" + channel);
+async function load(resetPage = true) {
+    if (resetPage) currentPage = 1;
+
+    const res = await fetch(`/items/${channel}?page=${currentPage}`);
     const data = await res.json();
-    render(data);
+
+    console.log("load called, page:", currentPage, "data:", data);
+
+    hasMoreItems = data.hasMore;
+
+    if (currentPage === 1) {
+        render(data.items);
+    } else {
+        renderMore(data.items);
+    }
+
+    const wrapper = document.getElementById("loadMoreWrapper");
+    wrapper.style.display = hasMoreItems ? "block" : "none";
+}
+
+async function loadMore() {
+    currentPage++;
+    await load(false);
 }
 
 function render(data) {
@@ -496,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 = "";
@@ -625,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;
@@ -719,6 +842,18 @@ function hideUndoToast() {
     progress.classList.remove("running");
 }
 
+
+// prime AudioContext on first interaction so chime works immediately after
+let audioContextPrimed = false;
+document.addEventListener("click", () => {
+    if (audioContextPrimed) return;
+    try {
+        const ctx = new (window.AudioContext || window.webkitAudioContext)();
+        ctx.resume().then(() => ctx.close());
+        audioContextPrimed = true;
+    } catch (e) { }
+}, { once: false });
+
 async function pin(id) {
     await fetch("/pin/" + id, { method: "POST" });
     load();
@@ -731,7 +866,14 @@ 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 => {
@@ -747,6 +889,11 @@ socket.on("delete-item", id => {
     }
 });
 
+socket.on("user-count", count => {
+    const el = document.getElementById("onlineCount");
+    if (el) el.textContent = `● ${count} online`;
+});
+
 socket.on("item-moved", ({ id, channel: toChannel }) => {
     if (toChannel !== channel) {
         // item left this channel — remove it from view
@@ -793,15 +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);
@@ -976,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 = "⋯";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instbyte",
-  "version": "1.7.0",
+  "version": "1.8.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/server.js

@@ -366,16 +366,47 @@ app.post("/pin/:id", (req, res) => {
 /* GET ITEMS */
 app.get("/items/:channel", (req, res) => {
   const channel = req.params.channel;
+  const page = parseInt(req.query.page) || 1;
+  const limit = 10;
+  const offset = (page - 1) * limit;
 
-  db.all(
-    `SELECT * FROM items WHERE channel=? ORDER BY pinned DESC, created_at DESC`,
+  db.get(
+    `SELECT COUNT(*) as count FROM items WHERE channel=? AND pinned=0`,
     [channel],
-    (err, rows) => {
-      res.json(rows);
+    (err, row) => {
+      if (err) return res.status(500).json({ error: "DB error" });
+
+      const totalUnpinned = row.count;
+      const hasMore = offset + limit < totalUnpinned;
+
+      db.all(
+        `SELECT * FROM items WHERE channel=? AND pinned=0 
+         ORDER BY created_at DESC LIMIT ? OFFSET ?`,
+        [channel, limit, offset],
+        (err, unpinned) => {
+          if (err) return res.status(500).json({ error: "DB error" });
+
+          if (page === 1) {
+            // only fetch pinned on first page
+            db.all(
+              `SELECT * FROM items WHERE channel=? AND pinned=1 
+               ORDER BY created_at DESC`,
+              [channel],
+              (err, pinned) => {
+                if (err) return res.status(500).json({ error: "DB error" });
+                res.json({ items: [...pinned, ...unpinned], hasMore, page });
+              }
+            );
+          } else {
+            res.json({ items: unpinned, hasMore, page });
+          }
+        }
+      );
     }
   );
 });
 
+
 /* SEARCH */
 app.get("/search/:channel/:q", (req, res) => {
   const { channel, q } = req.params;
@@ -624,6 +655,7 @@ let connectedUsers = 0;
 
 io.on("connection", (socket) => {
   connectedUsers++;
+  io.emit("user-count", connectedUsers);
 
   let username = "Unknown";
 
@@ -635,6 +667,7 @@ io.on("connection", (socket) => {
   socket.on("disconnect", () => {
     connectedUsers--;
     console.log(username + " disconnected | total:", connectedUsers);
+    io.emit("user-count", connectedUsers);
   });
 });
 
@@ -696,3 +729,33 @@ findFreePort(PREFERRED).then(p => {
     console.log("");
   });
 });
+
+
+// ========================
+// GRACEFUL SHUTDOWN
+// ========================
+function shutdown(signal) {
+  console.log(`\n${signal} received — shutting down gracefully...`);
+
+  // stop accepting new connections
+  server.close(() => {
+    console.log("HTTP server closed");
+
+    // close database connection
+    db.close((err) => {
+      if (err) console.error("Error closing database:", err);
+      else console.log("Database connection closed");
+      console.log("Shutdown complete");
+      process.exit(0);
+    });
+  });
+
+  // force exit after 10 seconds if something hangs
+  setTimeout(() => {
+    console.error("Forced shutdown after timeout");
+    process.exit(1);
+  }, 10000);
+}
+
+process.on("SIGTERM", () => shutdown("SIGTERM"));
+process.on("SIGINT", () => shutdown("SIGINT"));