@filipc77/cowrite 0.4.13 → 0.4.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@filipc77/cowrite",
-  "version": "0.4.13",
+  "version": "0.4.14",
   "description": "Live commenting plugin for coding agent sessions",
   "type": "module",
   "bin": {

package/ui/client.js

@@ -12,6 +12,7 @@ const statusEl = $("#status");
 const popup = $("#commentPopup");
 const popupSelection = $("#popupSelection");
 const commentInput = $("#commentInput");
+const commentTrigger = $("#commentTrigger");
 const filePicker = $("#filePicker");
 const fileList = $("#fileList");
 
@@ -120,38 +121,55 @@ function send(msg) {
 // --- Selection & Comment Creation ---
 
 document.addEventListener("mouseup", (e) => {
-  // Don't trigger when clicking inside popup or sidebar
-  if (popup.contains(e.target) || $("#sidebar").contains(e.target)) return;
+  // Don't trigger when clicking inside popup, sidebar, or trigger button
+  if (popup.contains(e.target) || commentTrigger.contains(e.target) || $("#sidebar").contains(e.target)) return;
 
   const selection = window.getSelection();
   if (!selection || selection.isCollapsed) {
-    hidePopup();
+    hideTrigger();
     return;
   }
 
   const text = selection.toString().trim();
   if (!text) {
-    hidePopup();
+    hideTrigger();
     return;
   }
 
   // Compute character offset in the source content
   const offset = computeOffset(selection, text);
   if (offset === -1) {
-    hidePopup();
+    hideTrigger();
     return;
   }
 
   selectionInfo = { offset, length: text.length, selectedText: text };
 
-  // Position popup near the selection
+  // Show the small "Comment" trigger button near the selection end
   const range = selection.getRangeAt(0);
   const rect = range.getBoundingClientRect();
-  popup.style.left = `${Math.min(rect.left, window.innerWidth - 340)}px`;
-  popup.style.top = `${rect.bottom + 8}px`;
-  popupSelection.textContent = text;
+  commentTrigger.style.left = `${Math.min(rect.right + 8, window.innerWidth - 100)}px`;
+  commentTrigger.style.top = `${rect.top - 4}px`;
+  commentTrigger.hidden = false;
+});
+
+// Clicking the trigger button opens the full comment popup
+commentTrigger.addEventListener("mousedown", (e) => {
+  // Prevent the mousedown from clearing the text selection
+  e.preventDefault();
+});
+
+commentTrigger.addEventListener("click", () => {
+  if (!selectionInfo) return;
+
+  // Position the popup near the trigger
+  const triggerRect = commentTrigger.getBoundingClientRect();
+  popup.style.left = `${Math.min(triggerRect.left, window.innerWidth - 340)}px`;
+  popup.style.top = `${triggerRect.bottom + 8}px`;
+  popupSelection.textContent = selectionInfo.selectedText;
   commentInput.value = "";
   popup.hidden = false;
+  commentTrigger.hidden = true;
   commentInput.focus();
 });
 
@@ -247,8 +265,17 @@ function computeDomOffset(node, charOffset) {
   return -1;
 }
 
+function hideTrigger() {
+  commentTrigger.hidden = true;
+  // Only clear selectionInfo if popup isn't open
+  if (popup.hidden) {
+    selectionInfo = null;
+  }
+}
+
 function hidePopup() {
   popup.hidden = true;
+  commentTrigger.hidden = true;
   selectionInfo = null;
 }
 
@@ -478,5 +505,16 @@ themeToggle.addEventListener("change", () => {
   applyTheme(theme);
 });
 
+// Hide trigger when selection is cleared (e.g. clicking elsewhere)
+document.addEventListener("selectionchange", () => {
+  const selection = window.getSelection();
+  if (!selection || selection.isCollapsed) {
+    // Small delay to avoid race with the trigger button click
+    setTimeout(() => {
+      if (popup.hidden) hideTrigger();
+    }, 100);
+  }
+});
+
 // --- Init ---
 connect();

package/ui/index.html

@@ -50,7 +50,10 @@
     </div>
   </main>
 
-  <!-- Floating comment button/form -->
+  <!-- Floating comment button (appears on text selection) -->
+  <button class="comment-trigger" id="commentTrigger" hidden>Comment</button>
+
+  <!-- Comment form (appears when comment button is clicked) -->
   <div class="comment-popup" id="commentPopup" hidden>
     <div class="popup-header">Selection</div>
     <div class="popup-selection" id="popupSelection"></div>

package/ui/styles.css

@@ -671,6 +671,34 @@ main {
   transform: scale(0.97);
 }
 
+/* ---- Comment trigger button ---- */
+.comment-trigger {
+  position: fixed;
+  z-index: 999;
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 600;
+  padding: 6px 14px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--accent);
+  cursor: pointer;
+  box-shadow: var(--shadow-md);
+  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
+  animation: popup-enter 0.15s ease;
+}
+
+.comment-trigger:hover {
+  background: var(--accent);
+  color: var(--bg);
+  border-color: var(--accent);
+}
+
+.comment-trigger:active {
+  transform: scale(0.96);
+}
+
 /* ---- Comment popup ---- */
 .comment-popup {
   position: fixed;