viberoom 0.4.2 → 0.5.0

package/ui/icons.js

@@ -29,6 +29,7 @@
     at: `<circle cx="12" cy="12" r="4"/><path d="M16 12v1.5a2.5 2.5 0 0 0 5 0V12a9 9 0 1 0-3.5 7.1"/>`,
     trash: `<path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3"/>`,
     pencil: `<path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/>`,
+    pin: `<path d="M9 4h6l-.8 6.5L17 13v2H7v-2l2.8-2.5L9 4z"/><path d="M12 15v6"/>`,
     send: `<path d="M4 12l16-8-6 16-2.5-6.5L4 12z"/>`,
     folder: `<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/>`,
     spark: `<path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3z"/><path d="M19 15l.6 1.6 1.6.6-1.6.6L19 19.4l-.6-1.6-1.6-.6 1.6-.6z"/>`,
@@ -56,20 +57,22 @@
 
   function install() {
     if (document.getElementById("viberoom-icons")) return;
-    const symbols = Object.entries(ICONS)
-      .map(([name, body]) => `<symbol id="i-${name}" viewBox="0 0 24 24">${body}</symbol>`)
-      .join("");
-    const holder = document.createElement("div");
-    holder.id = "viberoom-icons";
-    holder.setAttribute("aria-hidden", "true");
-    holder.style.cssText = "position:absolute;width:0;height:0;overflow:hidden";
-    holder.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg">${symbols}</svg>`;
-    document.body.prepend(holder);
+    const style = document.createElement("style");
+    style.id = "viberoom-icons";
+    style.textContent = Object.entries(ICONS)
+      .map(([name, body]) => `.i-${name}{--icon:url("${dataUri(body)}")}`)
+      .join("\n");
+    document.head.appendChild(style);
+  }
+
+  function dataUri(body) {
+    const markup = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'>${body.replace(/"/g, "'").replace(/currentColor/g, "#000")}</svg>`;
+    return "data:image/svg+xml," + markup.replace(/%/g, "%25").replace(/#/g, "%23").replace(/</g, "%3C").replace(/>/g, "%3E");
   }
 
   function svg(name, cls) {
     if (!ICONS[name]) name = "info";
-    return `<svg class="i${cls ? ` ${cls}` : ""}" aria-hidden="true"><use href="#i-${name}"/></svg>`;
+    return `<span class="i i-${name}${cls ? ` ${cls}` : ""}" aria-hidden="true"></span>`;
   }
 
   window.Icons = { install, svg, names: Object.keys(ICONS) };

package/ui/index.html

@@ -22,7 +22,7 @@
       <div class="rail-items">
         <button class="rail-item new" id="rail-new-room" title="Open a room"><span class="ico" data-icon="plus"></span><span class="label">Open a room</span></button>
         <button class="rail-item" data-nav="rooms" title="Rooms"><span class="ico" data-icon="rooms"></span><span class="label">Rooms</span></button>
-        <button class="rail-item" data-nav="room" title="Current room" id="rail-room" hidden><span class="ico" data-icon="chat"></span><span class="label" id="rail-room-label">Room</span><span class="rail-count" id="rail-unread" hidden></span></button>
+        <div class="rail-rooms-wrap" id="rail-rooms-wrap" hidden><span class="rail-hr"></span><div class="rail-rooms" id="rail-rooms" aria-label="Open rooms"></div><span class="rail-hr"></span></div>
         <button class="rail-item" data-nav="skills" title="Skills"><span class="ico" data-icon="skills"></span><span class="label">Skills</span></button>
         <button class="rail-item" data-nav="settings" title="Settings"><span class="ico" data-icon="settings"></span><span class="label">Settings</span></button>
       </div>
@@ -70,15 +70,25 @@
         <header class="main-head chat-head">
           <div class="chat-title">
             <h1 id="chat-room-name">…</h1>
+            <div id="working-now" class="working-now" hidden></div>
             <div class="chat-sub" id="chat-room-sub"></div>
           </div>
           <div class="chat-actions">
+            <button id="pins-btn" class="chip pins-chip" type="button" hidden title="Pinned messages"></button>
             <label class="search"><span class="search-icon" data-icon="search"></span><input id="search" type="search" placeholder="Search in this room…" autocomplete="off"></label>
             <button id="chat-info-btn" class="icon-btn" title="Room settings"><span data-icon="settings"></span></button>
           </div>
         </header>
+        <div id="cast-banner" class="cast-banner" hidden></div>
         <div id="messages" class="messages"></div>
+        <div id="pins-panel" class="pins-panel" hidden></div>
+        <div id="timeline-left" class="timeline left" hidden>
+          <div class="tl-view"></div>
+          <div class="tl-ticks"></div>
+          <div class="tl-pop" hidden></div>
+        </div>
         <button type="button" id="jump-latest" class="jump-latest" title="Back to the latest messages" hidden><span data-icon="arrow-down"></span>Latest</button>
+        <div id="done-notes" class="done-notes" hidden></div>
         <div id="timeline" class="timeline" hidden>
           <div class="tl-view"></div>
           <div class="tl-ticks"></div>
@@ -87,9 +97,11 @@
         <div id="mention-menu" class="mention-menu" hidden></div>
         <div id="emoji-menu" class="mention-menu emoji-menu" hidden></div>
         <form id="composer" class="composer">
+          <div class="composer-grip" id="composer-grip" title="Drag to make the box taller; double-click to reset"></div>
           <button type="button" class="smile-btn" id="emoji-btn" title="Add an emoji"><span data-icon="smile"></span></button>
           <div class="composer-box">
-            <textarea id="input" rows="1" placeholder="Message the room… @Name or /skill" title="Enter sends, Shift+Enter is a new line"></textarea>
+            <div class="shots-tray" id="shots-tray" hidden></div>
+            <textarea id="input" rows="1" placeholder="Message the room… @Name or /skill" title="Enter sends, Shift+Enter is a new line; paste or drop an image"></textarea>
           </div>
           <button type="submit" class="send-btn" title="Send"><span data-icon="send"></span></button>
         </form>
@@ -100,7 +112,6 @@
     </main>
     <aside class="details" id="details" hidden>
       <div class="resizer" id="details-resizer" title="Drag to resize; double-click to fit"></div>
-      <button type="button" class="details-handle" id="details-handle" title="Close the panel"><span data-icon="forward"></span></button>
       <div class="details-inner" id="details-inner"></div>
     </aside>
   </div>
@@ -137,6 +148,21 @@
       <div class="actions"><button type="button" class="btn ghost" data-close>Cancel</button><button type="submit" class="btn primary">Open the room</button></div>
     </form>
   </dialog>
+  <dialog id="template-dialog" class="dialog wide">
+    <form id="template-form" method="dialog">
+      <h3><span class="h-ico" data-icon="rooms"></span>Start from a template</h3>
+      <p class="lead">A template is a room's rules and its vibemates, ready to summon. Pick one, choose who runs each vibemate, name the room.</p>
+      <div class="tpl-layout">
+        <div class="tpl-list" id="tpl-list"></div>
+        <div class="tpl-detail" id="tpl-detail"></div>
+      </div>
+      <label>Room name<input id="tpl-room-name" type="text" maxlength="60" required placeholder="e.g. Payments refactor"></label>
+      <label>Working directory <span class="hint">(optional)</span>
+        <span class="dir-row"><input id="tpl-room-dir" type="text" placeholder="C:\projects\my-app"><button type="button" class="btn ghost browse-btn" id="tpl-dir-browse" title="Choose a folder"><span data-icon="folder"></span>Browse</button></span></label>
+      <p class="error" id="tpl-error" hidden></p>
+      <div class="actions"><button type="button" class="btn ghost" data-close>Cancel</button><button type="submit" class="btn primary" id="tpl-create">Create the room</button></div>
+    </form>
+  </dialog>
   <dialog id="invite-dialog" class="dialog wide">
     <form id="invite-form" method="dialog">
       <h3><span class="h-ico" data-icon="spark"></span>Summon a Vibemate</h3>
@@ -176,6 +202,7 @@
       </div>
     </form>
   </dialog>
+  <div id="lightbox" class="lightbox" hidden><img alt=""></div>
   <dialog id="edit-dialog" class="dialog">
     <form id="edit-form" method="dialog">
       <h3><span class="h-ico" data-icon="pencil"></span>Edit your message</h3>

package/ui/theme.css

@@ -108,7 +108,7 @@ pre { background: var(--code-bg); color: #f4f2ff; padding: 10px 12px; border-rad
 *::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: padding-box; }
 *::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); background-clip: padding-box; }
 *::-webkit-scrollbar-corner { background: transparent; }
-.i { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.25em; display: inline-block; }
+.i { width: 1.2em; height: 1.2em; flex: none; vertical-align: -0.25em; display: inline-block; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
 .i.lg { width: 20px; height: 20px; }
 .i.xl { width: 24px; height: 24px; }
 [data-icon] { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
@@ -321,7 +321,7 @@ p .geek-tip, .hint > .geek-tip, .switch .label > .geek-tip { margin-left: 8px; }
 .avatar-status.status-error { background: var(--rose-ink); }
 .avatar-status.status-starting { background: #7aa7ff; }
 .avatar-status.status-queued { background: #7aa7ff; }
-.avatar-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; margin: 4px 0 8px; }
+.avatar-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; margin: 4px 0 8px; max-height: 148px; overflow-y: auto; padding: 2px 4px 2px 2px; scroll-padding: 4px; }
 .avatar-picker button { aspect-ratio: 1; width: 100%; border-radius: 12px; border: 2px solid transparent; background: var(--soft); font-size: 20px; padding: 0; display: inline-flex; align-items: center; justify-content: center; transition: transform var(--t-fast) var(--ease-pop), border-color var(--t-fast), background var(--t-fast); }
 .avatar-picker button:hover { transform: translateY(-1px); background: var(--lav); }
 .avatar-picker button.selected { border-color: var(--primary); background: var(--lav); }