From b82b26efb10ac2095d5ec7432e070c2da1903a62 Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Sun, 7 Jun 2026 02:19:36 -0400
Subject: [PATCH] Definition always pins on top; submodes are just the lists
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Definition button is gone — every lookup shows the dictionary card
above whichever list is active (rhymes / near / synonyms).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 static/index.html | 23 ++++++-----------------
 1 file changed, 6 insertions(+), 17 deletions(-)

diff --git a/static/index.html b/static/index.html
index e6ec8c0..58cd7e4 100644
--- a/static/index.html
+++ b/static/index.html
@@ -269,14 +269,13 @@ Double-click any word to look it up on the right."></textarea>
         <button class="btn" id="lookupBtn">Go</button>
       </div>
       <div class="seg" id="modeSeg">
-        <button class="active" data-mode="dict">Definition</button>
-        <button data-mode="rhyme">Rhymes</button>
+        <button class="active" data-mode="rhyme">Rhymes</button>
         <button data-mode="near">Near</button>
         <button data-mode="syn">Synonyms</button>
       </div>
       <div id="defBox"></div>
       <div id="lookupResults">
-        <p class="muted">Type a word and hit Go, or double-click a word in your draft. The buttons switch between its definition, rhymes, and synonyms.</p>
+        <p class="muted">Type a word and hit Go, or double-click a word in your draft. Its definition pins on top; the buttons switch rhymes, near rhymes, and synonyms.</p>
       </div>
     </div>
 
@@ -528,7 +527,7 @@ editor.addEventListener('dblclick', ()=>{
   if(sel){
     document.getElementById('lookupInput').value = sel;
     tab('lookup');
-    setMode('dict');
+    doLookup();
   }
 });
 
@@ -551,7 +550,7 @@ function insertAtCursor(word){
    frequency-ranked). Synonyms come from the free Datamuse API.
 ============================================================ */
 const modeSeg = document.getElementById('modeSeg');
-let mode = 'dict';
+let mode = 'rhyme';
 function setMode(m){
   mode = m;
   [...modeSeg.children].forEach(c=>c.classList.toggle('active', c.dataset.mode === m));
@@ -568,12 +567,7 @@ const resultsBox = document.getElementById('lookupResults');
 async function doLookup(){
   const word = document.getElementById('lookupInput').value.trim();
   if(!word) return;
-  defBox.innerHTML = '';
-  if(mode === 'dict'){
-    resultsBox.innerHTML = '';
-    showDefinition(word);
-    return;
-  }
+  showDefinition(word);  // the definition always pins on top
   resultsBox.innerHTML = '<p class="muted">Searching…</p>';
   try{
     const r = await fetch(`/api/lookup?word=${encodeURIComponent(word)}&mode=${mode}`);
@@ -606,7 +600,7 @@ function wireChips(){
   resultsBox.querySelectorAll('.chip').forEach(c=>{
     c.addEventListener('click', ()=>{
       document.getElementById('lookupInput').value = c.dataset.w;
-      setMode('dict');
+      doLookup();
     });
   });
 }
@@ -621,14 +615,9 @@ function defCard(word, inner){
       ${inner}
       <div class="def-actions">
         <button class="btn small" id="defInsert">Insert at cursor</button>
-        <button class="btn small" id="defRhymes">Rhymes</button>
       </div>
     </div>`;
   defBox.querySelector('#defInsert').addEventListener('click', ()=> insertAtCursor(word));
-  defBox.querySelector('#defRhymes').addEventListener('click', ()=>{
-    document.getElementById('lookupInput').value = word;
-    setMode('rhyme');
-  });
   defBox.querySelector('.defx').addEventListener('click', ()=>{ defBox.innerHTML=''; });
 }
 async function showDefinition(word){