claude-plan-review 0.3.2 → 0.4.0

package/src/ui/index.html

@@ -24,6 +24,7 @@
       <label>Version
         <select id="versionSel"></select>
       </label>
+      <button class="iconbtn" id="deleteVerBtn" title="Delete this version" aria-label="Delete this version" hidden>🗑</button>
     </div>
     <div class="saveActions" id="saveActions" hidden>
       <button class="btn" id="saveBtn">Save to gist</button>
@@ -34,30 +35,34 @@
       <button class="btn approve" id="approveBtn">Approve plan</button>
       <button class="btn reject" id="rejectBtn">Request changes</button>
     </div>
+    <button class="iconbtn" id="manageBtn" title="Manage &amp; delete plans" aria-label="Manage plans">🗄</button>
     <button class="iconbtn" id="themeToggle" title="Toggle light / dark theme" aria-label="Toggle theme">🌓</button>
   </header>
 
   <nav class="tabs">
-    <button class="tab active" data-tab="preview">Preview</button>
-    <button class="tab" data-tab="source">Source &amp; comments <span class="count" id="cCount"></span></button>
+    <button class="tab active" data-tab="preview">Preview <span class="count" id="cCount"></span></button>
     <button class="tab" data-tab="diff">Diff</button>
   </nav>
 
   <main>
-    <!-- PREVIEW -->
+    <!-- PREVIEW + COMMENTS -->
     <section class="panel active" id="panel-preview">
-      <article class="markdown-body" id="preview"></article>
-    </section>
-
-    <!-- SOURCE + COMMENTS -->
-    <section class="panel" id="panel-source">
-      <div class="source" id="source"></div>
-      <div class="general">
-        <h3>General comments</h3>
-        <div id="generalList"></div>
-        <div class="composer">
-          <textarea id="generalInput" placeholder="Leave a general comment on this plan…"></textarea>
-          <button class="btn" id="generalAdd">Comment</button>
+      <div class="preview-toolbar">
+        <p class="selhint">Select any text in the plan to comment on it.</p>
+        <button class="btn tree-toggle" id="treeToggle" hidden>View as tree</button>
+      </div>
+      <div class="preview-layout">
+        <aside class="doc-sidebar" id="docSidebar" hidden></aside>
+        <div class="preview-main">
+          <article class="markdown-body" id="preview"></article>
+          <div class="general">
+            <h3>General comments</h3>
+            <div id="generalList"></div>
+            <div class="composer">
+              <textarea id="generalInput" placeholder="Leave a general comment on this plan…"></textarea>
+              <button class="btn" id="generalAdd">Comment</button>
+            </div>
+          </div>
         </div>
       </div>
     </section>
@@ -68,6 +73,9 @@
         <label>Compare base
           <select id="baseSel"></select>
         </label>
+        <label id="diffDocWrap" hidden>Document
+          <select id="diffDocSel"></select>
+        </label>
         <span class="arrow">→ current v<span id="diffCur"></span></span>
         <div class="modetoggle">
           <button class="seg active" data-mode="split">Side-by-side</button>
@@ -112,6 +120,34 @@
     </div>
   </div>
 
+  <div class="confirmModal" id="deleteModal" hidden>
+    <div class="box">
+      <h3 id="deleteTitle">Delete</h3>
+      <p id="deleteDesc"></p>
+      <div class="pendingInfo" id="deletePending" hidden></div>
+      <div class="row">
+        <button class="btn" id="deleteCancel">Cancel</button>
+        <button class="btn reject" id="deleteConfirm">Delete</button>
+        <button class="btn reject" id="deleteForce" hidden>Force delete</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="manageModal" id="manageModal" hidden>
+    <div class="box wide">
+      <h3>Manage plans</h3>
+      <p class="hint">Delete individual versions, several at once, or a whole project. Deletes are permanent.</p>
+      <div id="manageList"></div>
+      <div class="row">
+        <button class="btn" id="manageClose">Close</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="selpop" id="selPop" hidden>
+    <button class="btn primary" id="selComment">💬 Comment</button>
+  </div>
+
   <div class="toast" id="toast" hidden></div>
 </div>
 <script src="/app.js"></script>

package/src/ui/style.css

@@ -100,24 +100,22 @@ main { flex: 1; padding: 22px; max-width: 1100px; width: 100%; margin: 0 auto; }
 .markdown-body table { border-collapse: collapse; }
 .markdown-body th, .markdown-body td { border: 1px solid var(--border); padding: 6px 12px; }
 
-/* source + comments */
-.source { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; font-family: var(--mono); font-size: 12.5px; }
-.srow { display: flex; align-items: flex-start; }
-.srow:hover { background: var(--bg-soft); }
-.sgutter {
-  width: 52px; flex: none; text-align: right; padding: 1px 10px 1px 0; color: var(--fg-muted);
-  user-select: none; position: relative; cursor: pointer;
-}
-.sgutter:hover::after { content: "+"; position: absolute; left: 6px; color: #fff; background: var(--accent);
-  width: 15px; height: 15px; line-height: 15px; text-align: center; border-radius: 4px; font-size: 12px; }
-.scode { white-space: pre-wrap; word-break: break-word; padding: 1px 10px; flex: 1; }
-.srow.has-comments .sgutter { box-shadow: inset 2px 0 0 #d29922; }
-.source.dragging { user-select: none; }
-.source.dragging .sgutter { cursor: ns-resize; }
-.srow.sel { background: color-mix(in srgb, var(--accent) 14%, transparent); }
-.srow.sel .sgutter { background: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--fg); }
-.threads { padding: 0 10px 0 62px; background: var(--bg-soft); }
+/* preview commenting: select text → comment inline */
+.selhint { color: var(--fg-muted); font-size: 12px; margin: 0 0 10px; }
+.markdown-body .md-block { margin-left: -16px; padding-left: 16px; } /* gutter for the has-comments marker */
+.markdown-body .md-block.has-comments { box-shadow: inset 3px 0 0 #d29922; }
+.markdown-body ::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
+
+.selpop { position: fixed; z-index: 40; }
+.selpop .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 10px #0004; }
+.selpop .btn.primary:hover { filter: brightness(1.08); }
+
+.threads { margin: 8px 0 14px; }
 .comment .loc { font-family: var(--mono); color: var(--accent); }
+.cquote {
+  border-left: 3px solid var(--accent); padding: 3px 10px; margin: 6px 12px; color: var(--fg-muted);
+  font-style: italic; background: var(--bg-soft); border-radius: 0 4px 4px 0; white-space: pre-wrap; word-break: break-word;
+}
 
 .comment {
   border: 1px solid var(--border); border-radius: 8px; margin: 8px 0; background: var(--bg); font-family: var(--sans);
@@ -129,7 +127,9 @@ main { flex: 1; padding: 22px; max-width: 1100px; width: 100%; margin: 0 auto; }
 .comment .del:hover { color: var(--red); }
 
 .composer { display: flex; gap: 8px; margin: 8px 0 12px; }
-.composer.inline { padding: 8px 10px 12px 62px; background: var(--bg-soft); }
+.composer.inline { display: block; padding: 10px 12px; margin: 8px 0 14px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; }
+.composer.inline .cquote { margin: 0 0 8px; }
+.composer.inline .composer-row { display: flex; gap: 8px; }
 textarea {
   flex: 1; font-family: var(--sans); font-size: 13px; padding: 8px 10px; border: 1px solid var(--border);
   border-radius: 6px; background: var(--bg); color: var(--fg); min-height: 38px; resize: vertical;
@@ -196,3 +196,58 @@ textarea {
   padding: 10px 18px; border-radius: 8px; font-size: 13px; z-index: 60; box-shadow: 0 4px 16px #0004; }
 
 .empty { color: var(--fg-muted); padding: 40px; text-align: center; }
+
+/* ---------- multi-document: sidebar + layout ---------- */
+.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
+.preview-toolbar .selhint { margin: 0; }
+.tree-toggle { font-size: 12px; padding: 4px 10px; flex: none; }
+.tree-toggle.active { background: var(--accent); border-color: var(--accent); color: #fff; }
+.tree-toggle.active:hover { filter: brightness(1.08); }
+
+.preview-layout { display: flex; align-items: flex-start; gap: 20px; }
+.preview-main { flex: 1; min-width: 0; }
+
+.doc-sidebar {
+  flex: none; width: 220px; align-self: stretch; position: sticky; top: 96px;
+  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft);
+  padding: 6px; font-size: 13px; max-height: calc(100vh - 120px); overflow-y: auto;
+}
+.doc-sidebar .sb-head {
+  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
+  color: var(--fg-muted); padding: 6px 8px 8px;
+}
+.doc-sidebar .sb-row {
+  display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px;
+  color: var(--fg); text-decoration: none; cursor: pointer; line-height: 1.3;
+}
+.doc-sidebar .sb-row:hover { background: var(--border-soft); }
+.doc-sidebar .sb-row.active { background: var(--border-soft); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
+.doc-sidebar .sb-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sb-badge { flex: none; background: var(--border-soft); border-radius: 999px; padding: 0 7px; font-size: 11px; color: var(--fg-muted); }
+.sb-dot { flex: none; width: 7px; height: 7px; border-radius: 999px; background: #d29922; }
+
+/* view-as-tree hides blocks display-only — they stay in the DOM for line anchoring */
+.md-block.tree-hidden, .threads.tree-hidden, .composer.inline.tree-hidden { display: none !important; }
+
+/* diff document select reuses the .diffbar label styling automatically */
+
+/* ---------- delete confirm + manage modals ---------- */
+.confirmModal, .manageModal { position: fixed; inset: 0; background: #00000066; display: flex; align-items: center; justify-content: center; z-index: 50; }
+.confirmModal .box, .manageModal .box { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 20px; width: 460px; max-width: 92vw; }
+.manageModal .box.wide { width: 620px; max-height: 84vh; display: flex; flex-direction: column; }
+.confirmModal h3, .manageModal h3 { margin-top: 0; }
+.confirmModal p, .manageModal .hint { color: var(--fg-muted); font-size: 13px; }
+.confirmModal .row, .manageModal .row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
+.confirmModal .btn:disabled, .manageModal .btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
+.pendingInfo { background: #fff8c5; color: #7d4e00; font-size: 12.5px; padding: 10px 12px; border-radius: 6px; margin-top: 12px; line-height: 1.5; }
+
+#manageList { overflow-y: auto; margin-top: 8px; }
+.mg-project { border: 1px solid var(--border); border-radius: 8px; margin: 10px 0; overflow: hidden; }
+.mg-phead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--bg-soft); border-bottom: 1px solid var(--border-soft); }
+.mg-name { font-weight: 600; display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mg-actions { display: flex; gap: 8px; flex: none; }
+.btn.sm { font-size: 12px; padding: 4px 9px; }
+.mg-vers { padding: 6px 12px; }
+.mg-ver { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; cursor: pointer; }
+.mg-ver .mg-vn { font-weight: 600; font-family: var(--mono); font-size: 12.5px; }
+.mg-meta { color: var(--fg-muted); font-size: 12px; }