thandClaude Opus 4.6
81d9ce0e87
Switching conversations used to require bouncing back to the list view and picking from there. Now the thread view has a horizontal peer strip at the top: one click hops to another conversation, active tab is highlighted and auto-scrolls into view, unread peers show a dot. Scrollbar is hidden — vertical wheel delta is redirected to horizontal scroll so the user can slide the strip with the mouse wheel when it overflows. In-thread header is gone; the back button moved next to "chat" in the flyout header and only shows while a thread is open. Peer name stays visible via the active tab. Bumps to 1.9.3. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
43 lines
2.7 KiB
HTML
43 lines
2.7 KiB
HTML
<!-- Chat plugin: bottom-right flyout. Hidden by default; toggled by the
|
|
footer button injected via chat.js. -->
|
|
<div id="chat-flyout" class="hidden">
|
|
<div id="chat-flyout-header">
|
|
<i class="ph ph-chats-circle text-t-accent text-sm"></i>
|
|
<span id="chat-flyout-title" class="font-pixel text-[10px] text-t-bright">chat</span>
|
|
<button id="chat-header-back" class="hidden text-t-muted hover:text-t-accent transition-colors" data-tip="back to list"><i class="ph ph-caret-left text-sm"></i></button>
|
|
<span class="flex-1"></span>
|
|
<button id="chat-new-btn" class="text-t-muted hover:text-t-accent transition-colors" data-tip="new conversation"><i class="ph ph-plus-square text-sm"></i></button>
|
|
<button id="chat-refresh-btn" class="text-t-muted hover:text-t-accent transition-colors" data-tip="refresh"><i class="ph ph-arrows-clockwise text-sm" id="chat-refresh-icon"></i></button>
|
|
<button id="chat-close-btn" class="text-t-muted hover:text-t-danger transition-colors"><i class="ph ph-x text-sm"></i></button>
|
|
</div>
|
|
|
|
<!-- Conversation list (default view) -->
|
|
<div id="chat-list-view" class="chat-view">
|
|
<div id="chat-list" class="chat-list"></div>
|
|
<div id="chat-empty" class="hidden chat-empty">
|
|
<i class="ph ph-chats text-2xl text-t-dim mb-2"></i>
|
|
<p class="font-pixel text-[10px] text-t-dim cursor-blink">no conversations yet</p>
|
|
<button id="chat-empty-start" class="mt-3 px-2 py-1 text-[10px] font-pixel border border-t-accent text-t-accent hover:bg-t-accent/10 transition-colors">Start chat</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Conversation thread view -->
|
|
<div id="chat-thread-view" class="chat-view hidden">
|
|
<div id="chat-thread-peers" class="chat-thread-peers"></div>
|
|
<div id="chat-thread-messages" class="chat-thread-messages"></div>
|
|
<form id="chat-thread-form">
|
|
<input id="chat-thread-input" type="text" autocomplete="off" placeholder="type a message..." maxlength="2000">
|
|
<button type="submit" id="chat-thread-send" class="text-t-accent hover:brightness-125" data-tip="send"><i class="ph ph-paper-plane-tilt text-sm"></i></button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- New-conversation peer picker -->
|
|
<div id="chat-pick-view" class="chat-view hidden">
|
|
<div id="chat-pick-header">
|
|
<button id="chat-pick-back" class="text-t-muted hover:text-t-accent transition-colors"><i class="ph ph-caret-left text-sm"></i></button>
|
|
<span class="font-pixel text-[10px] text-t-bright flex-1">pick a recipient</span>
|
|
</div>
|
|
<div id="chat-pick-list" class="chat-pick-list"></div>
|
|
</div>
|
|
</div>
|