instbyte 1.6.2 → 1.7.0

package/README.md

@@ -167,6 +167,20 @@ The difference between *a tool you use* and *a tool you own.*
 
 **QR join** — built-in QR code so phones can join instantly without typing the URL.
 
+**Dark mode** — follows system preference automatically. Override with the toggle in the header.
+
+---
+
+## Keyboard Shortcuts
+
+| Key | Action |
+|---|---|
+| `/` | Focus search |
+| `Escape` | Close previews, menus, or blur input |
+| `Ctrl/Cmd + Enter` | Send message |
+| `Ctrl/Cmd + K` | Jump to message input |
+| `Tab` | Cycle channels |
+
 ---
 
 ## Manual / Self-hosted from Source

package/client/css/app.css

@@ -188,6 +188,7 @@ input[type=text]:focus {
 
 .logo {
     height: 24px;
+    filter: none;
 }
 
 .app-name {
@@ -686,6 +687,27 @@ input[type=text]:focus {
     padding: 60px 20px;
 }
 
+.theme-toggle {
+    font-size: 15px;
+    padding: 2px 6px;
+    border-radius: 6px;
+    transition: background 0.15s ease;
+}
+
+.theme-toggle:hover {
+    background: #f3f4f6;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) .theme-toggle:hover {
+        background: #2d3148;
+    }
+}
+
+:root[data-theme="dark"] .theme-toggle:hover {
+    background: #2d3148;
+}
+
 @media (max-width: 640px) {
     .app-header {
         flex-wrap: wrap;
@@ -810,4 +832,642 @@ input[type=text]:focus {
         padding: 6px 12px;
         font-size: 12px;
     }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+
+        body {
+            background: #0f1117;
+        }
+
+        .app-header {
+            background: #1a1d27;
+            border-bottom-color: #2d3148;
+        }
+
+        .app-name {
+            color: #f3f4f6;
+        }
+
+        .search-wrapper input {
+            background: #252836;
+            border-color: #2d3148;
+            color: #f3f4f6;
+        }
+
+        .search-wrapper input:focus {
+            background: #2d3148;
+            border-color: #4b5563;
+        }
+
+        .search-wrapper input::placeholder {
+            color: #6b7280;
+        }
+
+        .search-icon {
+            color: #6b7280;
+        }
+
+        .logo {
+            filter: invert(1) brightness(1.2);
+        }
+
+        .link-btn {
+            color: #9ca3af;
+        }
+
+        .link-btn:hover {
+            color: #f3f4f6;
+        }
+
+        .channel-bar {
+            background: #1a1d27;
+        }
+
+        .channel-bar::after {
+            background: linear-gradient(to right, transparent, #1a1d27);
+        }
+
+        .channels button {
+            color: #9ca3af;
+        }
+
+        .channels button:hover {
+            background: #2d3148;
+            color: #f3f4f6;
+        }
+
+        .channels button.active {
+            background: #252836;
+            color: #f3f4f6;
+        }
+
+        .add-channel {
+            color: #9ca3af;
+        }
+
+        .add-channel:hover {
+            background: #2d3148;
+        }
+
+        .add-channel-mobile {
+            color: #9ca3af;
+            border-left-color: #2d3148;
+        }
+
+        .add-channel-mobile:hover {
+            background: #2d3148;
+            color: #f3f4f6;
+        }
+
+        .composer {
+            background: #1a1d27;
+        }
+
+        input[type=text] {
+            background: #252836;
+            border-color: #2d3148;
+            color: #f3f4f6;
+        }
+
+        input[type=text]::placeholder {
+            color: #6b7280;
+        }
+
+        .drop {
+            background: #1a1d27;
+            border-color: #2d3148;
+            color: #6b7280;
+        }
+
+        .item {
+            background: #1a1d27;
+        }
+
+        .item:hover {
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+        }
+
+        .item a {
+            color: #60a5fa;
+        }
+
+        .meta {
+            color: #6b7280;
+        }
+
+        .preview-panel {
+            border-top-color: #2d3148;
+        }
+
+        .preview-panel embed,
+        .preview-panel iframe {
+            background: #252836;
+        }
+
+        .preview-panel pre {
+            background: #0f1117;
+            border-color: #2d3148;
+            color: #e5e7eb;
+        }
+
+        .preview-truncated,
+        .preview-error,
+        .preview-loading {
+            color: #6b7280;
+        }
+
+        .icon-btn {
+            background: #252836;
+            border-color: #2d3148;
+            color: #9ca3af;
+        }
+
+        .icon-btn:hover {
+            background: #2d3148;
+        }
+
+        .icon-btn.delete {
+            background: #1a1d27;
+            border-color: #7f1d1d;
+            color: #f87171;
+        }
+
+        .icon-btn.delete:hover {
+            background: #2d1515;
+        }
+
+        .icon-btn.preview-active {
+            background: #1e3a5f;
+            border-color: #2563eb;
+            color: #60a5fa;
+        }
+
+        .move-dropdown {
+            background: #1a1d27;
+            border-color: #2d3148;
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+        }
+
+        .move-dropdown button {
+            color: #d1d5db;
+        }
+
+        .move-dropdown button:hover {
+            background: #252836;
+            color: #f3f4f6;
+        }
+
+        .move-dropdown .dropdown-label {
+            color: #6b7280;
+        }
+
+        .context-menu {
+            background: #1a1d27;
+            border-color: #2d3148;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+        }
+
+        .context-menu button {
+            color: #d1d5db;
+        }
+
+        .context-menu button:hover {
+            background: #252836;
+        }
+
+        .context-menu button.danger {
+            color: #f87171;
+        }
+
+        .context-menu button.danger:hover {
+            background: #2d1515;
+        }
+
+        .context-menu button.muted {
+            color: #4b5563;
+        }
+
+        .context-menu .menu-divider {
+            background: #2d3148;
+        }
+
+        .qr-card {
+            background: #1a1d27;
+            border-color: #2d3148;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+        }
+
+        .qr-card .qr-label {
+            color: #f3f4f6;
+        }
+
+        .qr-card .qr-url {
+            color: #9ca3af;
+        }
+
+        .markdown-body {
+            color: #e5e7eb;
+        }
+
+        .markdown-body code {
+            background: #252836;
+            color: #e5e7eb;
+        }
+
+        .markdown-body pre {
+            background: #0f1117;
+            border-color: #2d3148;
+        }
+
+        .markdown-body a {
+            color: #60a5fa;
+        }
+
+        .size-tag.warn {
+            background: #422006;
+            color: #fbbf24;
+        }
+
+        .size-tag.danger-light {
+            background: #2d1515;
+            color: #f87171;
+        }
+
+        .left.flash {
+            background: #064e3b;
+        }
+
+        .left:hover::after {
+            background: #374151;
+            color: #f3f4f6;
+        }
+
+        .empty-state {
+            color: #4b5563;
+        }
+
+        .upload-status {
+            background: #1a1d27 !important;
+        }
+    }
+}
+
+:root[data-theme="dark"] {
+
+    body {
+        background: #0f1117;
+    }
+
+    .app-header {
+        background: #1a1d27;
+        border-bottom-color: #2d3148;
+    }
+
+    .app-name {
+        color: #f3f4f6;
+    }
+
+    .search-wrapper input {
+        background: #252836;
+        border-color: #2d3148;
+        color: #f3f4f6;
+    }
+
+    .search-wrapper input:focus {
+        background: #2d3148;
+        border-color: #4b5563;
+    }
+
+    .search-wrapper input::placeholder {
+        color: #6b7280;
+    }
+
+    .search-icon {
+        color: #6b7280;
+    }
+
+    .logo {
+        filter: invert(1) brightness(1.2);
+    }
+
+    .link-btn {
+        color: #9ca3af;
+    }
+
+    .link-btn:hover {
+        color: #f3f4f6;
+    }
+
+    .channel-bar {
+        background: #1a1d27;
+    }
+
+    .channel-bar::after {
+        background: linear-gradient(to right, transparent, #1a1d27);
+    }
+
+    .channels button {
+        color: #9ca3af;
+    }
+
+    .channels button:hover {
+        background: #2d3148;
+        color: #f3f4f6;
+    }
+
+    .channels button.active {
+        background: #252836;
+        color: #f3f4f6;
+    }
+
+    .add-channel {
+        color: #9ca3af;
+    }
+
+    .header-right span {
+        color: #f3f4f6;
+    }
+
+    .add-channel:hover {
+        background: #2d3148;
+    }
+
+    .add-channel-mobile {
+        color: #9ca3af;
+        border-left-color: #2d3148;
+    }
+
+    .add-channel-mobile:hover {
+        background: #2d3148;
+        color: #f3f4f6;
+    }
+
+    .composer {
+        background: #1a1d27;
+    }
+
+    input[type=text] {
+        background: #252836;
+        border-color: #2d3148;
+        color: #f3f4f6;
+    }
+
+    input[type=text]::placeholder {
+        color: #6b7280;
+    }
+
+    .drop {
+        background: #1a1d27;
+        border-color: #2d3148;
+        color: #6b7280;
+    }
+
+    .item {
+        background: #1a1d27;
+    }
+
+    .item:hover {
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    }
+
+    .item a {
+        color: #60a5fa;
+    }
+
+    .meta {
+        color: #6b7280;
+    }
+
+    .preview-panel {
+        border-top-color: #2d3148;
+    }
+
+    .preview-panel embed,
+    .preview-panel iframe {
+        background: #252836;
+    }
+
+    .preview-panel pre {
+        background: #0f1117;
+        border-color: #2d3148;
+        color: #e5e7eb;
+    }
+
+    .preview-truncated,
+    .preview-error,
+    .preview-loading {
+        color: #6b7280;
+    }
+
+    .icon-btn {
+        background: #252836;
+        border-color: #2d3148;
+        color: #9ca3af;
+    }
+
+    .icon-btn:hover {
+        background: #2d3148;
+    }
+
+    .icon-btn.delete {
+        background: #1a1d27;
+        border-color: #7f1d1d;
+        color: #f87171;
+    }
+
+    .icon-btn.delete:hover {
+        background: #2d1515;
+    }
+
+    .icon-btn.preview-active {
+        background: #1e3a5f;
+        border-color: #2563eb;
+        color: #60a5fa;
+    }
+
+    .move-dropdown {
+        background: #1a1d27;
+        border-color: #2d3148;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+    }
+
+    .move-dropdown button {
+        color: #d1d5db;
+    }
+
+    .move-dropdown button:hover {
+        background: #252836;
+        color: #f3f4f6;
+    }
+
+    .move-dropdown .dropdown-label {
+        color: #6b7280;
+    }
+
+    .context-menu {
+        background: #1a1d27;
+        border-color: #2d3148;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    }
+
+    .context-menu button {
+        color: #d1d5db;
+    }
+
+    .context-menu button:hover {
+        background: #252836;
+    }
+
+    .context-menu button.danger {
+        color: #f87171;
+    }
+
+    .context-menu button.danger:hover {
+        background: #2d1515;
+    }
+
+    .context-menu button.muted {
+        color: #4b5563;
+    }
+
+    .context-menu .menu-divider {
+        background: #2d3148;
+    }
+
+    .qr-card {
+        background: #1a1d27;
+        border-color: #2d3148;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+    }
+
+    .qr-card .qr-label {
+        color: #f3f4f6;
+    }
+
+    .qr-card .qr-url {
+        color: #9ca3af;
+    }
+
+    .markdown-body {
+        color: #e5e7eb;
+    }
+
+    .markdown-body code {
+        background: #252836;
+        color: #e5e7eb;
+    }
+
+    .markdown-body pre {
+        background: #0f1117;
+        border-color: #2d3148;
+    }
+
+    .markdown-body a {
+        color: #60a5fa;
+    }
+
+    .size-tag.warn {
+        background: #422006;
+        color: #fbbf24;
+    }
+
+    .size-tag.danger-light {
+        background: #2d1515;
+        color: #f87171;
+    }
+
+    .left.flash {
+        background: #064e3b;
+    }
+
+    .left:hover::after {
+        background: #374151;
+        color: #f3f4f6;
+    }
+
+    .empty-state {
+        color: #4b5563;
+    }
+
+    .upload-status {
+        background: #1a1d27 !important;
+    }
+}
+
+.undo-toast {
+    position: fixed;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%) translateY(80px);
+    background: #1f2937;
+    color: #f3f4f6;
+    padding: 12px 16px;
+    border-radius: 10px;
+    font-size: 13px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+    z-index: 9999;
+    opacity: 0;
+    transition: transform 0.2s ease, opacity 0.2s ease;
+    min-width: 220px;
+    overflow: hidden;
+}
+
+.undo-toast.show {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
+}
+
+.undo-toast #undoBtn {
+    background: none;
+    border: 1px solid #4b5563;
+    color: #f3f4f6;
+    padding: 4px 10px;
+    border-radius: 6px;
+    font-size: 12px;
+    cursor: pointer;
+    flex-shrink: 0;
+}
+
+.undo-toast #undoBtn:hover {
+    background: #374151;
+}
+
+.undo-progress {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 3px;
+    width: 100%;
+    background: #4b5563;
+    transform-origin: left;
+    animation: none;
+}
+
+.undo-progress.running {
+    animation: drain 5s linear forwards;
+}
+
+@keyframes drain {
+    from {
+        transform: scaleX(1);
+    }
+
+    to {
+        transform: scaleX(0);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) .undo-toast {
+        background: #374151;
+    }
+}
+
+:root[data-theme="dark"] .undo-toast {
+    background: #374151;
 }

package/client/index.html

@@ -27,6 +27,7 @@
     <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>
     </div>
   </header>
@@ -41,7 +42,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>
@@ -71,6 +72,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,60 @@
 const socket = io();
 
+// ========================
+// 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");
@@ -249,6 +304,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();
 
@@ -332,6 +391,15 @@ 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();
+    }
     channel = c;
     renderChannels();
     highlight();
@@ -356,6 +424,7 @@ function render(data) {
     data.forEach(i => {
         const div = document.createElement("div");
         div.className = "item";
+        div.dataset.itemId = i.id;
 
         let content = "";
 
@@ -456,6 +525,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 +614,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();
     }
@@ -584,16 +654,69 @@ 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");
 }
 
 async function pin(id) {
@@ -612,7 +735,16 @@ socket.on("new-item", item => {
 });
 
 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("item-moved", ({ id, channel: toChannel }) => {
@@ -696,47 +828,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();
 }
 
 
@@ -922,15 +1070,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() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instbyte",
-  "version": "1.6.2",
+  "version": "1.7.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": {
@@ -26,7 +26,7 @@
     "socket-io",
     "sqlite"
   ],
-  "author": "your name",
+  "author": "Mohit Gauniyal",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -39,9 +39,10 @@
     "cookie-parser": "^1.4.6",
     "express": "^4.18.2",
     "express-rate-limit": "^7.1.5",
+    "helmet": "^8.1.0",
     "multer": "^2.0.2",
     "sharp": "^0.33.2",
     "socket.io": "^4.6.1",
     "sqlite3": "^5.1.6"
   }
-}
+}

package/server/server.js

@@ -4,6 +4,7 @@ const os = require("os");
 const net = require("net");
 const cookieParser = require("cookie-parser");
 const rateLimit = require("express-rate-limit");
+const helmet = require("helmet");
 
 let sharp = null;
 try { sharp = require("sharp"); } catch (e) { }
@@ -26,6 +27,10 @@ const app = express();
 const server = http.createServer(app);
 const io = new Server(server, { cors: { origin: "*" } });
 
+app.use(helmet({
+  contentSecurityPolicy: false  // disable CSP for now — it would block CDN scripts
+}));
+
 app.use(express.json());
 app.use(cookieParser());
 app.use(requireAuth);
@@ -121,7 +126,7 @@ function requireAuth(req, res, next) {
   if (!config.auth.passphrase) return next(); // no passphrase set, skip
 
   // Allow the login route itself through
-  if (req.path === "/login" || req.path === "/info") return next();
+  if (req.path === "/login" || req.path === "/info" || req.path === "/health") return next();
 
 
   // Check cookie
@@ -411,19 +416,27 @@ app.post("/channels", (req, res) => {
   const { name } = req.body;
   if (!name) return res.status(400).json({ error: "Name required" });
 
+  const trimmed = name.trim();
+  if (trimmed.length < 1 || trimmed.length > 32) {
+    return res.status(400).json({ error: "Channel name must be 1–32 characters" });
+  }
+  if (!/^[a-zA-Z0-9 _\-]+$/.test(trimmed)) {
+    return res.status(400).json({ error: "Only letters, numbers, spaces, hyphens, and underscores allowed" });
+  }
+
   db.get("SELECT COUNT(*) as count FROM channels", (err, row) => {
 
     if (row.count >= 10) {
       return res.status(400).json({ error: "Max 10 channels allowed" });
     }
 
-    db.run("INSERT INTO channels (name) VALUES (?)", [name], function (err) {
+    db.run("INSERT INTO channels (name) VALUES (?)", [trimmed], function (err) {
 
       if (err) {
         return res.status(400).json({ error: "Channel exists" });
       }
-      io.emit("channel-added", { id: this.lastID, name });
-      res.json({ id: this.lastID, name });
+      io.emit("channel-added", { id: this.lastID, trimmed });
+      res.json({ id: this.lastID, name: trimmed });
 
     });
 
@@ -485,18 +498,25 @@ app.patch("/item/:id/move", (req, res) => {
 app.patch("/channels/:name", (req, res) => {
   const oldName = req.params.name;
   const { name: newName } = req.body;
-
   if (!newName) return res.status(400).json({ error: "Name required" });
 
+  const trimmed = newName.trim();
+  if (trimmed.length < 1 || trimmed.length > 32) {
+    return res.status(400).json({ error: "Channel name must be 1–32 characters" });
+  }
+  if (!/^[a-zA-Z0-9 _\-]+$/.test(trimmed)) {
+    return res.status(400).json({ error: "Only letters, numbers, spaces, hyphens, and underscores allowed" });
+  }
+
   db.get("SELECT * FROM channels WHERE name=?", [oldName], (err, row) => {
     if (!row) return res.status(404).json({ error: "Channel not found" });
 
-    db.run("UPDATE channels SET name=? WHERE name=?", [newName, oldName], (err) => {
+    db.run("UPDATE channels SET name=? WHERE name=?", [trimmed, oldName], (err) => {
       if (err) return res.status(400).json({ error: "Channel name already exists" });
 
-      db.run("UPDATE items SET channel=? WHERE channel=?", [newName, oldName], () => {
-        io.emit("channel-renamed", { oldName, newName });
-        res.json({ oldName, newName });
+      db.run("UPDATE items SET channel=? WHERE channel=?", [trimmed, oldName], () => {
+        io.emit("channel-renamed", { oldName, newName: trimmed });
+        res.json({ oldName, newName: trimmed });
       });
     });
   });
@@ -539,6 +559,15 @@ app.get("/branding", (req, res) => {
   });
 });
 
+/* HEALTH MONITOR */
+app.get("/health", (req, res) => {
+  res.json({
+    status: "ok",
+    uptime: Math.floor(process.uptime()),
+    version: require("../package.json").version
+  });
+});
+
 
 /* FAVICON */
 app.get("/favicon-dynamic.png", async (req, res) => {
@@ -570,6 +599,7 @@ app.get("/favicon-dynamic.png", async (req, res) => {
 });
 
 
+
 /* LOGO */
 app.get("/logo-dynamic.png", (req, res) => {
   const b = config.branding;