From 6e0609f285fb3117500930303d345ddae8edbbd2 Mon Sep 17 00:00:00 2001 From: Daniel Date: Thu, 10 Sep 2026 13:27:29 +0200 Subject: [PATCH] refactor: drop the "Saved Chats" header and collapse arrow from the rail The list is simply there now. Its collapse preference is removed too, so a list someone had collapsed cannot come back hidden with no control to open it. The header's CSS (desktop, phone and preview) goes with it. Sizes, measured in Chromium before and after: switch, New chat and the name card are unchanged (desktop card 848, phone 790). The list takes the header's 16px, and the first date heading sits 10px below New chat on both desktop (167 -> 151) and phone (173 -> 165; phone list top padding 2px -> 10px), matching the menu's 10px rhythm. The rail itself still never scrolls. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01W4rptBNvn6RYieQw54GXNS --- public/components/assistant.html | 6 +----- public/css/assistant.css | 15 +++++---------- public/css/styles.css | 3 +-- public/js/clinicalAssistant.js | 15 +++------------ test/assistant-component-css.test.js | 7 ++++++- 5 files changed, 16 insertions(+), 30 deletions(-) diff --git a/public/components/assistant.html b/public/components/assistant.html index 98aa9fcf..05eb8731 100644 --- a/public/components/assistant.html +++ b/public/components/assistant.html @@ -26,11 +26,7 @@
- -
+

Chats save automatically as you go.

diff --git a/public/css/assistant.css b/public/css/assistant.css index 7baf10b8..9a31ffd4 100644 --- a/public/css/assistant.css +++ b/public/css/assistant.css @@ -143,9 +143,6 @@ .assistant-kbd { margin-left:auto; font:inherit; font-size:10px; color:var(--g400); background:var(--g100); border:1px solid var(--g200); border-radius:5px; padding:2px 5px; white-space:nowrap; } /* Saved Chats collapses, like the Chats group in the reference UI. */ -.assistant-chats-header { display:flex; align-items:center; justify-content:space-between; width:100%; border:0; background:none; cursor:pointer; text-align:left; } -.assistant-chats-caret { font-size:10px; color:var(--g400); transition:transform .15s ease; } -.assistant-chats-header[aria-expanded="false"] .assistant-chats-caret { transform:rotate(-90deg); } background-image:linear-gradient(var(--g100) 1px, transparent 1px), linear-gradient(90deg, var(--g100) 1px, transparent 1px); background-size:28px 28px; background-position:-1px -1px; } @@ -230,8 +227,9 @@ #assistant-saved-chats { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .assistant-layout.mobile-chats-open .assistant-history { transform:translateX(0); } .assistant-history .card { border:none; box-shadow:none; background:none; padding:0 8px; } - .assistant-history .card-header { padding:6px 10px 2px; } - #assistant-saved-chats { padding:2px 0 12px; gap:0; } + /* 10px above the first date heading, the menu's rhythm (switch → New chat is + 10px too) now that no "Saved Chats" header sits between. */ + #assistant-saved-chats { padding:10px 0 12px; gap:0; } .assistant-saved-chat { flex-direction:row; align-items:center; gap:0; border:none; border-radius:8px; padding:12px 36px 12px 12px; min-width:0; width:100%; max-width:none; position:relative; } .assistant-saved-chat:hover { background:var(--g100); } .assistant-saved-chat.active { background:var(--g100); } @@ -431,10 +429,9 @@ body.assistant-workspace #assistant-chat-view { min-height: 0; } .assistant-history .assistant-new-chat i { display:none; } /* Compact: every menu word fits the drawer width */ .assistant-goback-rail, .assistant-create-image, .assistant-new-chat { font-size:13px; padding:11px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } - .assistant-history .card-header h3 { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .assistant-rail-link { padding:11px 12px; font-size:14px; color:var(--g700); border-left:none; border-radius:8px; } - /* Plain: no keyboard shortcut on a phone, no icon out of line with the rows. */ - .assistant-kbd, .assistant-history .card-header h3 i { display:none; } + /* Plain: no keyboard shortcut on a phone. */ + .assistant-kbd { display:none; } .assistant-rail-link i { display:none; } /* The topbar keeps only the hamburger; Go back is in the menu */ } @@ -452,8 +449,6 @@ body.assistant-workspace #assistant-chat-view { min-height: 0; } } /* Saved chats: a plain sidebar list, not a card — desktop and mobile */ .assistant-history .card { border:none; box-shadow:none; background:none; padding:0; } -.assistant-history .card-header { padding:2px 4px; } -.assistant-history .card-header h3 { font-size:11px; font-weight:700; color:var(--g500); text-transform:uppercase; letter-spacing:.04em; } /* Workspace launcher: same ground, card language and spacing as the empty state, so the two views are one interface. Desktop only. */ diff --git a/public/css/styles.css b/public/css/styles.css index db3f4620..64a38ba9 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -1355,8 +1355,7 @@ button, a, .btn-sm, .btn-generate, .btn-send, .tab-btn, input, textarea, select, is not shown rather than shown and refused. */ body.assistant-preview .assistant-plus, body.assistant-preview .assistant-history .card, -body.assistant-preview .assistant-rail-actions, -body.assistant-preview .assistant-chats-header { display:none !important; } +body.assistant-preview .assistant-rail-actions { display:none !important; } body.assistant-preview .assistant-preview-note { display:flex; } .assistant-preview-note { display:none; align-items:center; gap:8px; margin:0 0 10px; padding:8px 12px; border:1px solid var(--blue-light); background:var(--blue-light); color:var(--blue); border-radius:10px; font-size:12px; } diff --git a/public/js/clinicalAssistant.js b/public/js/clinicalAssistant.js index 6e97bea1..1575256f 100644 --- a/public/js/clinicalAssistant.js +++ b/public/js/clinicalAssistant.js @@ -276,18 +276,9 @@ import { if (sourcesBtn) sourcesBtn.setAttribute('aria-expanded', 'true'); }); - var chatsToggle = document.getElementById('btn-assistant-chats-toggle'); - if (chatsToggle) chatsToggle.addEventListener('click', function() { - var list = document.getElementById('assistant-saved-chats'); - if (!list) return; - var open = list.hidden; - list.hidden = !open; - chatsToggle.setAttribute('aria-expanded', open ? 'true' : 'false'); - try { localStorage.setItem('ped_assistant_chats_open', open ? '1' : '0'); } catch (e) {} - }); - try { - if (localStorage.getItem('ped_assistant_chats_open') === '0' && chatsToggle) chatsToggle.click(); - } catch (e) {} + // The saved-chats list has no collapse control any more; drop the preference + // it left behind so nothing can restore a hidden list. + try { localStorage.removeItem('ped_assistant_chats_open'); } catch (e) {} // Ctrl+Shift+O starts a new chat, as advertised next to the button. onceOnDocument('keydown', function(event) { diff --git a/test/assistant-component-css.test.js b/test/assistant-component-css.test.js index c903557a..00514488 100644 --- a/test/assistant-component-css.test.js +++ b/test/assistant-component-css.test.js @@ -166,7 +166,12 @@ test('the empty state is composed, not a stack of competing blocks', () => { // empty; once there are messages it would fight the text. assert.match(css, /\.assistant-messages:has\(\.assistant-msg\) \{ background-image:none; \}/); assert.match(css, /\.assistant-kbd/, 'New chat advertises its shortcut'); - assert.match(css, /\.assistant-chats-header\[aria-expanded="false"\] \.assistant-chats-caret/, 'the chats group collapses'); + // The old "Saved Chats" header and its collapse arrow are gone: the list is + // simply there, and nothing can leave it hidden. + assert.doesNotMatch(html, /btn-assistant-chats-toggle|assistant-chats-header|Saved Chats/); + assert.doesNotMatch(css, /assistant-chats-header|assistant-chats-caret/); + assert.doesNotMatch(html, /id="assistant-saved-chats"[^>]*hidden/); + assert.doesNotMatch(read('public/js/clinicalAssistant.js'), /btn-assistant-chats-toggle|localStorage\.getItem\('ped_assistant_chats_open'\)/); }); test('the advertised New chat shortcut actually works, and only inside the assistant', () => {