@filipc77/cowrite 0.6.3 → 0.6.5

package/ui/client.js

@@ -14,13 +14,11 @@ const popupSelection = $("#popupSelection");
 const commentInput = $("#commentInput");
 const selectionToolbar = $("#selectionToolbar");
 const commentTrigger = $("#commentTrigger");
-const highlightPopover = $("#highlightPopover");
-const highlightPopoverText = $("#highlightPopoverText");
-const highlightEditBtn = $("#highlightEditBtn");
 const undoBtn = $("#undoBtn");
 const filePicker = $("#filePicker");
 const fileList = $("#fileList");
 const fileCommentBtn = $("#fileCommentBtn");
+const formatButtons = $("#formatButtons");
 
 /** @type {Comment[]} */
 let comments = [];
@@ -33,7 +31,6 @@ let currentBlocks = [];
 let insertBtn = null;
 let insertLine = null;
 let activeGapIndex = -1;
-let activeHighlightCommentId = null;
 let undoStack = [];
 const MAX_UNDO = 50;
 
@@ -46,6 +43,43 @@ let pendingFileUpdate = null;
 let pendingEditAfterInsert = -1;
 let contentEditableActive = false;
 
+// --- Resizable Sidebar ---
+(function initResizableSidebar() {
+  const handle = document.getElementById("sidebarDragHandle");
+  const sidebar = document.getElementById("sidebar");
+  if (!handle || !sidebar) return;
+
+  // Restore saved width
+  const saved = localStorage.getItem("cowrite-sidebar-width");
+  if (saved) document.documentElement.style.setProperty("--sidebar-width", saved + "px");
+
+  let startX = 0;
+  let startWidth = 0;
+
+  handle.addEventListener("mousedown", (e) => {
+    e.preventDefault();
+    startX = e.clientX;
+    startWidth = sidebar.offsetWidth;
+    document.body.classList.add("sidebar-resizing");
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  });
+
+  function onMouseMove(e) {
+    const delta = startX - e.clientX; // sidebar is on the right
+    const newWidth = Math.min(Math.max(startWidth + delta, 300), window.innerWidth * 0.5);
+    document.documentElement.style.setProperty("--sidebar-width", newWidth + "px");
+  }
+
+  function onMouseUp() {
+    document.body.classList.remove("sidebar-resizing");
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+    const width = sidebar.offsetWidth;
+    localStorage.setItem("cowrite-sidebar-width", String(width));
+  }
+})();
+
 const BLOCK_TYPES = [
   { id: "text",    label: "Text",          category: "Basic blocks", icon: "Aa",  template: "\u200B" },
   { id: "h1",      label: "Heading 1",     category: "Basic blocks", icon: "H1",  template: "# " },
@@ -90,15 +124,36 @@ function switchFile(file) {
   history.replaceState(null, "", url.toString());
 }
 
+// Track meta key for Cmd+Click to open in new tab
+let lastClickHadMeta = false;
+document.addEventListener("mousedown", (e) => { lastClickHadMeta = e.metaKey || e.ctrlKey; });
+
+function openFileInNewTab(file) {
+  const url = new URL(location.href);
+  url.searchParams.set("file", file);
+  window.open(url.toString(), "_blank");
+}
+
 filePicker.addEventListener("change", () => {
   const file = filePicker.value.trim();
-  if (file) switchFile(file);
+  if (!file) return;
+  if (lastClickHadMeta) {
+    openFileInNewTab(file);
+    filePicker.value = "";
+  } else {
+    switchFile(file);
+  }
 });
 
 filePicker.addEventListener("keydown", (e) => {
-  if (e.key === "Enter") {
-    const file = filePicker.value.trim();
-    if (file) switchFile(file);
+  const file = filePicker.value.trim();
+  if (!file) return;
+  if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+    e.preventDefault();
+    openFileInNewTab(file);
+    filePicker.value = "";
+  } else if (e.key === "Enter") {
+    switchFile(file);
   }
 });
 
@@ -236,6 +291,9 @@ document.addEventListener("mouseup", (e) => {
 
   selectionInfo = { offset, length: text.length, selectedText: text };
 
+  const isMarkdown = /\.(md|mdx)$/i.test(currentFile);
+  formatButtons.hidden = !isMarkdown;
+
   const range = selection.getRangeAt(0);
   const rect = range.getBoundingClientRect();
   selectionToolbar.style.left = `${rect.left + rect.width / 2 - 40}px`;
@@ -370,6 +428,88 @@ function hideTrigger() {
   selectionInfo = null;
 }
 
+// --- Rich text formatting (markdown files only) ---
+
+const FORMAT_SYNTAX = {
+  bold:          { prefix: "**", suffix: "**" },
+  italic:        { prefix: "*",  suffix: "*" },
+  strikethrough: { prefix: "~~", suffix: "~~" },
+  code:          { prefix: "`",  suffix: "`" },
+};
+
+function applyMarkdownFormat(format) {
+  if (!selectionInfo || selectionInfo.offset < 0) return;
+  const { offset, length, selectedText } = selectionInfo;
+
+  // Exit contenteditable mode first so file_update from our edit applies normally
+  if (contentEditableActive && editingBlockEl) {
+    cancelContentEditable(editingBlockEl);
+  }
+
+  pushUndo();
+
+  if (format === "link") {
+    const url = prompt("Link URL:", "https://");
+    if (!url) return;
+    send({ type: "edit_apply", offset, length, newText: `[${selectedText}](${url})` });
+    hideTrigger();
+    return;
+  }
+
+  if (format === "blockquote") {
+    const lines = selectedText.split("\n").map(l => `> ${l}`).join("\n");
+    send({ type: "edit_apply", offset, length, newText: lines });
+    hideTrigger();
+    return;
+  }
+
+  if (format === "bulletList") {
+    const lines = selectedText.split("\n").map(l => `- ${l}`).join("\n");
+    send({ type: "edit_apply", offset, length, newText: lines });
+    hideTrigger();
+    return;
+  }
+
+  const { prefix, suffix } = FORMAT_SYNTAX[format];
+
+  // Toggle detection: check if selection is already wrapped
+  const before = currentContent.slice(offset - prefix.length, offset);
+  const after = currentContent.slice(offset + length, offset + length + suffix.length);
+  if (before === prefix && after === suffix) {
+    // Unwrap: remove the surrounding markers
+    send({ type: "edit_apply", offset: offset - prefix.length, length: length + prefix.length + suffix.length, newText: selectedText });
+  } else {
+    // Wrap: add markers
+    send({ type: "edit_apply", offset, length, newText: `${prefix}${selectedText}${suffix}` });
+  }
+
+  hideTrigger();
+}
+
+selectionToolbar.addEventListener("click", (e) => {
+  const btn = e.target.closest("[data-format]");
+  if (!btn) return;
+  applyMarkdownFormat(btn.dataset.format);
+});
+
+document.addEventListener("keydown", (e) => {
+  if (!selectionInfo || selectionInfo.offset < 0) return;
+  if (!/\.(md|mdx)$/i.test(currentFile)) return;
+  if (e.target.closest("input, textarea, [contenteditable]")) return;
+
+  const mod = e.metaKey || e.ctrlKey;
+  if (!mod) return;
+
+  const map = { b: "bold", i: "italic", e: "code", k: "link" };
+  if (e.shiftKey && e.key.toLowerCase() === "s") {
+    e.preventDefault();
+    applyMarkdownFormat("strikethrough");
+  } else if (map[e.key]) {
+    e.preventDefault();
+    applyMarkdownFormat(map[e.key]);
+  }
+});
+
 function hidePopup() {
   popup.hidden = true;
   selectionInfo = null;
@@ -440,48 +580,99 @@ function renderComments() {
     return;
   }
 
-  commentListEl.innerHTML = comments.map((c) => `
-    <div class="comment-card ${c.status}" data-id="${c.id}">
-      <button class="comment-delete-btn" onclick="deleteComment('${c.id}')" title="Delete comment">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
-      </button>
-      ${c.selectedText
-        ? `<div class="comment-selected-text">${escapeHtml(c.selectedText)}</div>`
-        : `<div class="comment-file-badge">Whole file</div>`
-      }
-      <div class="comment-text">${escapeHtml(c.comment)}</div>
-      ${c.replies.length > 0 ? `
-        <div class="comment-replies">
-          ${c.replies.map((r) => `
-            <div class="reply ${r.from}">
-              <div class="reply-from ${r.from}">${r.from}</div>
-              <div>${escapeHtml(r.text)}</div>
+  commentListEl.innerHTML = comments.map((c) => {
+    const repliesHtml = c.replies.length > 0 ? `
+      <div class="comment-replies">
+        ${c.replies.map((r) => r.proposal ? `
+          <div class="reply agent proposal-reply proposal-${r.proposal.status}">
+            <div class="reply-from agent">agent — proposal</div>
+            <div class="proposal-explanation">${escapeHtml(r.proposal.explanation)}</div>
+            ${r.proposal.status === "pending" ? `
+              <div class="proposal-diff">
+                <div class="proposal-old"><span class="proposal-label">Current</span><pre>${escapeHtml(r.proposal.oldText)}</pre></div>
+                <div class="proposal-new"><span class="proposal-label">Proposed</span><pre>${escapeHtml(r.proposal.newText)}</pre></div>
+              </div>
+              <div class="proposal-actions">
+                <button class="proposal-apply-btn" onclick="applyProposal('${c.id}', '${r.id}')">Apply</button>
+                <button class="proposal-reject-btn" onclick="rejectProposal('${c.id}', '${r.id}')">Reject</button>
+              </div>
+            ` : r.proposal.status === "applied" ? `
+              <div class="proposal-diff">
+                <div class="proposal-new"><span class="proposal-label">&#10003; Applied</span><pre>${escapeHtml(r.proposal.newText)}</pre></div>
+              </div>
+            ` : `
+              <div class="proposal-diff">
+                <div class="proposal-old"><span class="proposal-label">&#10007; Rejected</span><pre>${escapeHtml(r.proposal.oldText)}</pre></div>
+              </div>
+            `}
+          </div>
+        ` : `
+          <div class="reply ${r.from}">
+            <div class="reply-from ${r.from}">${r.from}</div>
+            <div>${escapeHtml(r.text)}</div>
+          </div>
+        `).join("")}
+      </div>
+    ` : "";
+
+    if (c.status === "resolved") {
+      const truncated = c.comment.length > 60 ? c.comment.slice(0, 60) + "..." : c.comment;
+      return `
+        <div class="comment-card resolved" data-id="${c.id}">
+          <button class="comment-delete-btn" onclick="deleteComment('${c.id}')" title="Delete comment">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+          </button>
+          <div class="resolved-summary" onclick="toggleResolvedExpand('${c.id}')">
+            <svg class="resolved-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+            <span class="comment-status resolved">resolved</span>
+            <span class="resolved-summary-text">${escapeHtml(truncated)}</span>
+          </div>
+          <div class="resolved-details" hidden>
+            ${c.selectedText
+              ? `<div class="comment-selected-text">${escapeHtml(c.selectedText)}</div>`
+              : `<div class="comment-file-badge">Whole file</div>`
+            }
+            <div class="comment-text">${escapeHtml(c.comment)}</div>
+            ${repliesHtml}
+            <div class="comment-meta">
+              <span>${timeAgo(c.createdAt)}</span>
+            </div>
+            <div class="comment-actions">
+              <button onclick="reopenComment('${c.id}')">Reopen</button>
             </div>
-          `).join("")}
+          </div>
+        </div>
+      `;
+    }
+
+    return `
+      <div class="comment-card ${c.status}" data-id="${c.id}">
+        <button class="comment-delete-btn" onclick="deleteComment('${c.id}')" title="Delete comment">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+        </button>
+        ${c.selectedText
+          ? `<div class="comment-selected-text">${escapeHtml(c.selectedText)}</div>`
+          : `<div class="comment-file-badge">Whole file</div>`
+        }
+        <div class="comment-text">${escapeHtml(c.comment)}</div>
+        ${repliesHtml}
+        <div class="comment-meta">
+          <span>${timeAgo(c.createdAt)}</span>
+          <span class="comment-status ${c.status}">${c.status}</span>
         </div>
-      ` : ""}
-      <div class="comment-meta">
-        <span>${timeAgo(c.createdAt)}</span>
-        <span class="comment-status ${c.status}">${c.status}</span>
-      </div>
-      ${c.status !== "resolved" ? `
         <div class="comment-actions">
           <button onclick="showReplyForm('${c.id}')">Reply</button>
           <button onclick="resolveComment('${c.id}')">Resolve</button>
         </div>
-      ` : `
-        <div class="comment-actions">
-          <button onclick="reopenComment('${c.id}')">Reopen</button>
-        </div>
-      `}
-      <div class="reply-form" id="reply-form-${c.id}" hidden>
-        <textarea rows="2" placeholder="Reply..."></textarea>
-        <div class="reply-form-actions">
-          <button onclick="submitReply('${c.id}')">Send</button>
+        <div class="reply-form" id="reply-form-${c.id}" hidden>
+          <textarea rows="2" placeholder="Reply..."></textarea>
+          <div class="reply-form-actions">
+            <button onclick="submitReply('${c.id}')">Send</button>
+          </div>
         </div>
       </div>
-    </div>
-  `).join("");
+    `;
+  }).join("");
 
   // Click to scroll to highlight
   for (const card of commentListEl.querySelectorAll(".comment-card")) {
@@ -529,6 +720,25 @@ window.submitReply = function (id) {
   form.hidden = true;
 };
 
+window.applyProposal = function (commentId, replyId) {
+  send({ type: "proposal_apply", commentId, replyId });
+};
+
+window.rejectProposal = function (commentId, replyId) {
+  send({ type: "proposal_reject", commentId, replyId });
+};
+
+window.toggleResolvedExpand = function (id) {
+  const card = commentListEl.querySelector(`.comment-card[data-id="${id}"]`);
+  if (!card) return;
+  const details = card.querySelector(".resolved-details");
+  const chevron = card.querySelector(".resolved-chevron");
+  if (!details) return;
+  const expanding = details.hidden;
+  details.hidden = !expanding;
+  card.classList.toggle("resolved-expanded", expanding);
+};
+
 // --- Highlights ---
 
 function applyHighlights() {
@@ -657,6 +867,24 @@ themeToggle.addEventListener("change", () => {
   applyTheme(theme);
 });
 
+// --- Font size toggle ---
+const FONT_SIZE_KEY = "cowrite-font-size";
+(function initFontSize() {
+  const saved = localStorage.getItem(FONT_SIZE_KEY) || "large";
+  if (saved === "large") document.body.classList.add("font-large");
+  for (const btn of document.querySelectorAll(".font-size-btn")) {
+    btn.setAttribute("aria-pressed", btn.dataset.size === saved ? "true" : "false");
+    btn.addEventListener("click", () => {
+      const size = btn.dataset.size;
+      document.body.classList.toggle("font-large", size === "large");
+      localStorage.setItem(FONT_SIZE_KEY, size);
+      for (const b of document.querySelectorAll(".font-size-btn")) {
+        b.setAttribute("aria-pressed", b.dataset.size === size ? "true" : "false");
+      }
+    });
+  }
+})();
+
 // Hide trigger when selection is cleared
 document.addEventListener("selectionchange", () => {
   const selection = window.getSelection();
@@ -1228,6 +1456,17 @@ function enterContentEditable(blockIndex, blockEl) {
 
   const blockType = getBlockType(blockEl);
 
+  // Markdown shortcut patterns: detected on Space keydown BEFORE browser default.
+  // This prevents Chrome from auto-formatting "* " into a native list element.
+  const MD_SHORTCUTS = [
+    { pattern: /^(\*|-)\s*$/, prefix: "- " },
+    { pattern: /^1\.\s*$/, prefix: "1. " },
+    { pattern: /^###\s*$/, prefix: "### " },
+    { pattern: /^##\s*$/, prefix: "## " },
+    { pattern: /^#\s*$/, prefix: "# " },
+    { pattern: /^>\s*$/, prefix: "> " },
+  ];
+
   const onKeydown = (e) => {
     if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
       e.preventDefault();
@@ -1238,6 +1477,38 @@ function enterContentEditable(blockIndex, blockEl) {
     } else if (e.key === "Enter" && blockType === "heading") {
       e.preventDefault();
       commitContentEditable(blockEl);
+    } else if (e.key === "Enter" && blockType === "paragraph") {
+      // Insert a line break within the same block
+      e.preventDefault();
+      document.execCommand("insertLineBreak");
+    } else if (e.key === " " && blockType === "paragraph") {
+      // Markdown shortcuts: intercept Space BEFORE browser auto-formats.
+      // At keydown time, Space isn't in the DOM yet, so check text before cursor.
+      if (editingBlockIndex === -1 || !contentEditableActive) return;
+      const sel = window.getSelection();
+      if (!sel || !sel.rangeCount) return;
+      const range = sel.getRangeAt(0);
+      // Get text from start of block to cursor position
+      const preRange = range.cloneRange();
+      preRange.selectNodeContents(blockEl);
+      preRange.setEnd(range.startContainer, range.startOffset);
+      const textBeforeCursor = preRange.toString().replace(/\u200B/g, "");
+      // Get text after cursor
+      const postRange = range.cloneRange();
+      postRange.selectNodeContents(blockEl);
+      postRange.setStart(range.endContainer, range.endOffset);
+      const textAfterCursor = postRange.toString().replace(/\u200B/g, "");
+
+      for (const { pattern, prefix } of MD_SHORTCUTS) {
+        if (!pattern.test(textBeforeCursor)) continue;
+        // Match found — prevent browser default (stops Chrome list auto-format)
+        e.preventDefault();
+        const newSource = prefix + textAfterCursor;
+        pendingEditAfterInsert = editingBlockIndex;
+        cleanupContentEditable(blockEl);
+        commitBlockEdit(newSource);
+        return;
+      }
     }
   };
 
@@ -1261,22 +1532,51 @@ function enterContentEditable(blockIndex, blockEl) {
   blockEl.addEventListener("paste", onPaste);
 }
 
+// Walk DOM nodes and reconstruct markdown, preserving inline formatting
+function domToMarkdown(node) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return node.textContent.replace(/\u200B/g, "");
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) return "";
+
+  const tag = node.tagName.toLowerCase();
+
+  // Line break
+  if (tag === "br") return "  \n";
+
+  // Recurse into children
+  const inner = Array.from(node.childNodes).map(domToMarkdown).join("");
+
+  // Inline formatting
+  if (tag === "strong" || tag === "b") return `**${inner}**`;
+  if (tag === "em" || tag === "i") return `*${inner}*`;
+  if (tag === "del" || tag === "s") return `~~${inner}~~`;
+  if (tag === "code") return `\`${inner}\``;
+  if (tag === "a") {
+    const href = node.getAttribute("href") || "";
+    return `[${inner}](${href})`;
+  }
+
+  return inner;
+}
+
 function extractMarkdownFromElement(element, originalSource) {
   const blockType = getBlockType(element);
-  const text = element.textContent.replace(/\u200B/g, "").trim();
 
   if (blockType === "paragraph") {
-    return text;
+    return domToMarkdown(element).trim();
   }
 
   if (blockType === "heading") {
     const match = originalSource.match(/^(#{1,6})\s/);
     const prefix = match ? match[1] : "#";
-    return prefix + " " + text;
+    const inner = domToMarkdown(element).trim();
+    return prefix + " " + inner;
   }
 
   if (blockType === "blockquote") {
-    return text.split("\n").map(line => "> " + line.trim()).join("\n");
+    const inner = domToMarkdown(element).trim();
+    return inner.split("\n").map(line => "> " + line.trim()).join("\n");
   }
 
   if (blockType === "list") {
@@ -1284,10 +1584,11 @@ function extractMarkdownFromElement(element, originalSource) {
     const items = Array.from(element.querySelectorAll("li"));
     return items.map((li, i) => {
       const prefix = isOrdered ? `${i + 1}. ` : "- ";
-      return prefix + li.textContent.trim();
+      return prefix + domToMarkdown(li).trim();
     }).join("\n");
   }
 
+  const text = (element.innerText || element.textContent).replace(/\u200B/g, "").trim();
   return text;
 }
 
@@ -1331,15 +1632,23 @@ fileContentEl.addEventListener("click", (e) => {
   const target = e.target;
   if (target.closest("a, .mermaid-container, .block-insert-btn, .block-type-menu, .inline-editor, .block-edit-wrapper, .block-editing, .code-block-header")) return;
 
-  // Handle comment highlight clicks
+  // Handle comment highlight clicks — scroll to sidebar card (skip resolved, let them edit)
   const highlightEl = target.closest(".comment-highlight");
   if (highlightEl) {
     const commentId = highlightEl.dataset.commentId;
     const comment = comments.find(c => c.id === commentId);
-    if (comment) {
-      showHighlightPopover(highlightEl, comment);
+    if (comment && comment.status !== "resolved") {
+      for (const card of commentListEl.querySelectorAll(".comment-card")) {
+        card.classList.remove("active");
+      }
+      const card = commentListEl.querySelector(`.comment-card[data-id="${comment.id}"]`);
+      if (card) {
+        card.classList.add("active");
+        card.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      }
+      return;
     }
-    return;
+    // Resolved highlights fall through to block editing
   }
 
   if (!currentBlocks.length) return;
@@ -1364,55 +1673,12 @@ fileContentEl.addEventListener("click", (e) => {
   });
 });
 
-// --- Highlight Popover ---
-
-function showHighlightPopover(el, comment) {
-  activeHighlightCommentId = comment.id;
-  highlightPopoverText.textContent = comment.comment;
-
-  const rect = el.getBoundingClientRect();
-  highlightPopover.style.left = `${Math.min(rect.left, window.innerWidth - 260)}px`;
-  highlightPopover.style.top = `${rect.bottom + 8}px`;
-  highlightPopover.hidden = false;
-
-  // Highlight and scroll to the corresponding comment card in the sidebar
-  for (const card of commentListEl.querySelectorAll(".comment-card")) {
-    card.classList.remove("active");
-  }
-  const card = commentListEl.querySelector(`.comment-card[data-id="${comment.id}"]`);
-  if (card) {
-    card.classList.add("active");
-    card.scrollIntoView({ behavior: "smooth", block: "nearest" });
-  }
-}
-
-function hideHighlightPopover() {
-  highlightPopover.hidden = true;
-  activeHighlightCommentId = null;
-  for (const card of commentListEl.querySelectorAll(".comment-card.active")) {
-    card.classList.remove("active");
-  }
-}
-
-highlightEditBtn.addEventListener("click", () => {
-  if (!activeHighlightCommentId) return;
-  const comment = comments.find(c => c.id === activeHighlightCommentId);
-  if (!comment) { hideHighlightPopover(); return; }
-
-  for (let i = 0; i < currentBlocks.length; i++) {
-    const b = currentBlocks[i];
-    if (comment.offset >= b.sourceStart && comment.offset < b.sourceEnd) {
-      hideHighlightPopover();
-      enterBlockEditDispatch(i);
-      return;
-    }
-  }
-  hideHighlightPopover();
-});
-
+// --- Highlight click: clear active on outside click ---
 document.addEventListener("mousedown", (e) => {
-  if (!highlightPopover.hidden && !highlightPopover.contains(e.target) && !e.target.closest(".comment-highlight")) {
-    hideHighlightPopover();
+  if (!e.target.closest(".comment-highlight")) {
+    for (const card of commentListEl.querySelectorAll(".comment-card.active")) {
+      card.classList.remove("active");
+    }
   }
 });
 

package/ui/index.html

@@ -26,6 +26,11 @@
       <span class="file-path" id="filePath"></span>
     </div>
     <div class="header-right">
+      <div class="font-size-toggle" id="fontSizeToggle">
+        <button class="font-size-btn" data-size="regular" title="Regular size"><span>A</span></button>
+        <button class="font-size-btn" data-size="large" title="Large size" aria-pressed="true"><span>A</span></button>
+      </div>
+      <div class="header-divider"></div>
       <button class="undo-btn" id="undoBtn" disabled title="Undo (Cmd+Z)">
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
       </button>
@@ -49,6 +54,7 @@
       <div id="fileContent"></div>
     </div>
 
+    <div class="sidebar-drag-handle" id="sidebarDragHandle"></div>
     <div class="sidebar" id="sidebar">
       <div class="sidebar-header">
         <h2>Comments <span class="comment-count" id="commentCount">0</span></h2>
@@ -60,6 +66,16 @@
 
   <!-- Floating selection toolbar (appears on text selection) -->
   <div class="selection-toolbar" id="selectionToolbar" hidden>
+    <div class="format-buttons" id="formatButtons" hidden>
+      <button data-format="bold" title="Bold (Cmd+B)"><strong>B</strong></button>
+      <button data-format="italic" title="Italic (Cmd+I)"><em>I</em></button>
+      <button data-format="strikethrough" title="Strikethrough (Cmd+Shift+S)"><s>S</s></button>
+      <button data-format="code" title="Code (Cmd+E)"><code>&lt;/&gt;</code></button>
+      <button data-format="link" title="Link (Cmd+K)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></button>
+      <button data-format="blockquote" title="Quote"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V21"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3"/></svg></button>
+      <button data-format="bulletList" title="Bullet list"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg></button>
+      <span class="toolbar-divider"></span>
+    </div>
     <button id="commentTrigger">Comment</button>
   </div>
 
@@ -74,13 +90,6 @@
     </div>
   </div>
 
-  <!-- Highlight popover (appears when clicking a comment highlight) -->
-  <div class="highlight-popover" id="highlightPopover" hidden>
-    <div class="highlight-popover-text" id="highlightPopoverText"></div>
-    <div class="highlight-popover-actions">
-      <button id="highlightEditBtn">Edit</button>
-    </div>
-  </div>
 
   <script type="module">
     import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';