instbyte 1.8.0 → 1.9.1

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>