Move Focus chips and Mark-orphans toggle to the side panel

The topbar got cramped between the title, focus chips, orphan
toggle, and the search input. Moves these two pieces — the focus
chips block and the orphan-marker checkbox — into the side panel,
restyled as panel blocks with consistent borders. The topbar keeps
just back, title, and search.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

diff --git a/data/viewer.css b/data/viewer.css
index f575c5542c30e2026692558a3cc9ec6007b88e90..69ead975e6856331d4fdc283a04d8f8b790bc277 100644 (file)
--- a/data/viewer.css
+++ b/data/viewer.css
@@ -202,14 +202,19 @@ body { display: flex; }
 #back-button[hidden] { display: none; }
 
 #orphan-toggle-wrap {
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  gap: 4px;
-  font-size: 11px;
+  gap: 6px;
+  margin: 0 0 12px;
+  padding: 8px 12px;
+  font-size: 12px;
   color: #6b7280;
   user-select: none;
   cursor: pointer;
   white-space: nowrap;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
 }
 #orphan-toggle-wrap input { margin: 0; }
 
@@ -218,8 +223,11 @@ body { display: flex; }
   align-items: center;
   flex-wrap: wrap;
   gap: 6px;
-  flex: 1 1 auto;
-  min-width: 0;
+  margin: 0 0 12px;
+  padding: 8px 12px;
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+  border-radius: 6px;
 }
 #pin-chips[hidden] { display: none; }
 #pin-label {

diff --git a/data/viewer.html b/data/viewer.html
index 5240767c01e33228f38749082e3958c64ceb646e..d1e90d6de2c99f559fbecaed089c6776fad3516e 100644 (file)
--- a/data/viewer.html
+++ b/data/viewer.html
@@ -11,15 +11,6 @@
       <button id="back-button" title="Back to class hierarchy">&larr;</button>
       <h1 id="view-title">classgraph</h1>
       <span id="view-subtitle"></span>
-      <div id="pin-chips" hidden>
-        <span id="pin-label">Focus on:</span>
-        <span id="pin-list"></span>
-        <button id="pin-clear" title="Show full graph">Clear</button>
-      </div>
-      <label id="orphan-toggle-wrap" title="Mark orphan instances with a red dashed border">
-        <input type="checkbox" id="orphan-toggle" />
-        <span>Mark orphans</span>
-      </label>
       <div id="search-wrap">
         <input id="search" type="search" placeholder="Find class or family…  (press / to focus)" autocomplete="off" spellcheck="false" />
         <ul id="search-results" hidden></ul>
@@ -74,6 +65,15 @@
       <p class="hint" id="hint-instance" hidden>Click to highlight; <strong>double-click</strong> a class or family to drill in. The back arrow returns to the hierarchy.</p>
       <p class="hint" id="hint-family" hidden>Each entry is a <code>type instance</code> declaration. <strong>Double-click</strong> the parent class to see its instances.</p>
     </header>
+    <div id="pin-chips" hidden>
+      <span id="pin-label">Focus on:</span>
+      <span id="pin-list"></span>
+      <button id="pin-clear" title="Show full graph">Clear</button>
+    </div>
+    <label id="orphan-toggle-wrap" title="Mark orphan instances with a red dashed border">
+      <input type="checkbox" id="orphan-toggle" />
+      <span>Mark orphans</span>
+    </label>
     <details id="editor-settings">
       <summary>Editor link <span id="editor-summary"></span></summary>
       <p class="mute-hint">Make every <em>Defined at</em> line in the right-hand panel a clickable link that jumps to the file at the right line in your editor.</p>