@filipc77/cowrite 0.6.4 → 0.6.6

package/ui/client.js

@@ -14,9 +14,6 @@ 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");
@@ -34,7 +31,6 @@ let currentBlocks = [];
 let insertBtn = null;
 let insertLine = null;
 let activeGapIndex = -1;
-let activeHighlightCommentId = null;
 let undoStack = [];
 const MAX_UNDO = 50;
 
@@ -47,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: "# " },
@@ -91,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);
   }
 });
 
@@ -526,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>
-          `).join("")}
+            <div class="comment-actions">
+              <button onclick="reopenComment('${c.id}')">Reopen</button>
+            </div>
+          </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")) {
@@ -615,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() {
@@ -743,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();
@@ -1490,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;
@@ -1523,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>
@@ -84,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';

package/ui/styles.css

@@ -185,6 +185,53 @@ header h1 {
   letter-spacing: 0.2px;
 }
 
+/* ---- Font size toggle ---- */
+.font-size-toggle {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 2px;
+}
+
+.font-size-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--text-faint);
+  cursor: pointer;
+  border-radius: 6px;
+  padding: 3px 8px;
+  font-family: var(--font-sans);
+  font-weight: 600;
+  transition: all 0.15s ease;
+}
+
+.font-size-btn[data-size="regular"] span { font-size: 11px; }
+.font-size-btn[data-size="large"] span { font-size: 15px; }
+
+.font-size-btn:hover {
+  color: var(--text-dim);
+}
+
+.font-size-btn[aria-pressed="true"] {
+  background: var(--surface-hover);
+  color: var(--accent);
+}
+
+/* Large font size mode */
+body.font-large #fileContent .markdown-body {
+  font-size: 19px !important;
+}
+
+body.font-large #fileContent .plain-text {
+  font-size: 15px !important;
+}
+
 /* ---- Undo button ---- */
 .undo-btn {
   display: flex;
@@ -443,6 +490,7 @@ main {
 .comment-highlight.resolved {
   background: transparent;
   border-bottom: none;
+  cursor: text;
 }
 
 [data-theme="light"] .comment-highlight:hover {
@@ -453,10 +501,31 @@ main {
   background: rgba(58, 114, 160, 0.12);
 }
 
+/* ---- Sidebar drag handle ---- */
+.sidebar-drag-handle {
+  width: 5px;
+  cursor: col-resize;
+  background: transparent;
+  flex-shrink: 0;
+  transition: background 0.15s ease;
+  z-index: 10;
+}
+
+.sidebar-drag-handle:hover,
+body.sidebar-resizing .sidebar-drag-handle {
+  background: var(--accent);
+}
+
+body.sidebar-resizing {
+  cursor: col-resize;
+  user-select: none;
+}
+
 /* ---- Sidebar ---- */
 .sidebar {
-  width: 360px;
-  min-width: 360px;
+  width: var(--sidebar-width, 360px);
+  min-width: 300px;
+  max-width: 50vw;
   background: var(--surface);
   border-left: 1px solid var(--border);
   overflow-y: auto;
@@ -596,12 +665,58 @@ main {
 }
 
 .comment-card.resolved {
-  opacity: 0.5;
   border-left: 3px solid var(--green);
+  padding: 10px 14px;
+}
+
+.comment-card.resolved .comment-text,
+.comment-card.resolved .comment-selected-text,
+.comment-card.resolved .comment-meta {
+  color: var(--text-faint);
+}
+
+.comment-card.resolved .comment-selected-text {
+  border-left-color: var(--green);
+  background: var(--green-bg);
+}
+
+/* Resolved collapsed summary */
+.resolved-summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.resolved-summary:hover .resolved-summary-text {
+  color: var(--text-dim);
 }
 
-.comment-card.resolved:hover {
-  opacity: 0.7;
+.resolved-chevron {
+  flex-shrink: 0;
+  color: var(--text-faint);
+  transition: transform 0.15s ease;
+}
+
+.comment-card.resolved-expanded .resolved-chevron {
+  transform: rotate(90deg);
+}
+
+.resolved-summary-text {
+  font-size: 12px;
+  color: var(--text-faint);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  transition: color 0.15s ease;
+}
+
+.resolved-details {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border);
 }
 
 @keyframes card-enter {
@@ -1269,6 +1384,130 @@ main {
   padding-right: 2px;
 }
 
+/* ---- Proposal diff ---- */
+.proposal-explanation {
+  font-size: 12px;
+  line-height: 1.5;
+  margin-bottom: 8px;
+}
+
+.proposal-diff {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+
+.proposal-diff pre {
+  margin: 0;
+  padding: 8px 10px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.proposal-label {
+  display: block;
+  font-family: var(--font-sans);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 4px 10px 0;
+}
+
+.proposal-old {
+  background: rgba(212, 97, 110, 0.08);
+  border-bottom: 1px solid var(--border);
+}
+
+.proposal-old .proposal-label { color: var(--red); }
+
+.proposal-new {
+  background: rgba(111, 191, 138, 0.08);
+}
+
+.proposal-new .proposal-label { color: var(--green); }
+
+.proposal-actions {
+  display: flex;
+  gap: 6px;
+}
+
+.proposal-apply-btn {
+  font-family: var(--font-sans);
+  font-size: 11px;
+  font-weight: 600;
+  padding: 5px 14px;
+  border-radius: var(--radius-sm);
+  border: none;
+  background: var(--green);
+  color: var(--bg);
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+}
+
+.proposal-apply-btn:hover { opacity: 0.85; }
+
+.proposal-reject-btn {
+  font-family: var(--font-sans);
+  font-size: 11px;
+  font-weight: 500;
+  padding: 5px 14px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text-dim);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.proposal-reject-btn:hover {
+  color: var(--red);
+  border-color: var(--red);
+}
+
+.proposal-status-badge {
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 3px 10px;
+  border-radius: 100px;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+
+.proposal-status-badge.applied {
+  color: var(--green);
+  background: var(--green-bg);
+}
+
+.proposal-status-badge.rejected {
+  color: var(--red);
+  background: rgba(212, 97, 110, 0.08);
+}
+
+.proposal-reply.proposal-applied .proposal-diff {
+  border-left: 3px solid var(--green);
+}
 
+.proposal-reply.proposal-rejected .proposal-diff {
+  border-left: 3px solid var(--text-faint);
+}
+
+.proposal-reply.proposal-rejected .proposal-diff pre {
+  text-decoration: line-through;
+  color: var(--text-faint);
+}
+
+.proposal-reply.proposal-rejected .proposal-label {
+  color: var(--text-faint);
+}
+
+.proposal-reply.proposal-rejected .proposal-old {
+  background: var(--surface-hover);
+}