danvics/pediatric-ai-scribe-v3
1
0
Fork 0
Code Issues Pull requests Projects Releases 16 Packages Wiki Activity Actions

refactor: drop the "Saved Chats" header and collapse arrow from the rail

Browse source 
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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W4rptBNvn6RYieQw54GXNS
This commit is contained in:
Daniel 2026-09-10 13:27:29 +02:00
parent f93994ad69
commit 6e0609f285
5 changed files with 16 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
public/components/assistant.html
View file

@ -26,11 +26,7 @@
<div id="assistant-workspace-links" class="assistant-rail-links"></div>
</nav>
<div class="card">
<button type="button" class="card-header assistant-chats-header" id="btn-assistant-chats-toggle" aria-expanded="true" aria-controls="assistant-saved-chats">
<h3><i class="fas fa-bookmark"></i> Saved Chats</h3>
<i class="fas fa-chevron-down assistant-chats-caret"></i>
</button>
<div id="assistant-saved-chats" class="assistant-saved-chats">
<div id="assistant-saved-chats" class="assistant-saved-chats" aria-label="Saved chats">
<p class="assistant-muted">Chats save automatically as you go.</p>
</div>
</div>

15
public/css/assistant.css
View file

@ -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. */

3
public/css/styles.css
View file

@ -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; }

15
public/js/clinicalAssistant.js
View file

@ -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) {

7
test/assistant-component-css.test.js
View file

@ -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', () => {