thandClaude Opus 4.6
0022f64c50
Caret and "chat" label were two hit targets with two hover states and
tooltips. Collapse them into a single <button id="chat-header-nav">
with one tooltip ("back to conversations") — the caret becomes a
visibility-only hint inside the button, shown when there's somewhere
to go back to, hidden on the list itself. The .navigable class
controls whether the button reads as interactive, so clicking the
label while already on the list is a cursor-default no-op.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
74 lines
4.9 KiB
HTML
74 lines
4.9 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>
|
|
<!-- Caret + "chat" label are a single trigger with one tooltip.
|
|
The caret shows only when there's somewhere to go back to
|
|
(thread / pick / room-info); on the list itself the click
|
|
is a no-op and the button styles itself as inert. -->
|
|
<button id="chat-header-nav" type="button" class="chat-header-nav" data-tip="back to conversations">
|
|
<i id="chat-header-back-caret" class="ph ph-caret-left text-sm hidden"></i>
|
|
<span id="chat-flyout-title" class="font-pixel text-[10px]">chat</span>
|
|
</button>
|
|
<span class="flex-1"></span>
|
|
<button id="chat-thread-disposable" class="hidden text-t-muted hover:text-t-accent transition-colors" data-tip="disposable: messages drop after delivery"><i class="ph ph-fire text-sm"></i></button>
|
|
<button id="chat-thread-info" class="hidden text-t-muted hover:text-t-accent transition-colors" data-tip="room info"><i class="ph ph-info text-sm"></i></button>
|
|
<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 / group creation.
|
|
Shared view: a mode toggle at top switches between picking one
|
|
peer (1:1) and building a group (name + multi-select). -->
|
|
<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 id="chat-pick-title" class="font-pixel text-[10px] text-t-bright flex-1">new conversation</span>
|
|
</div>
|
|
<div id="chat-pick-mode" class="chat-pick-mode">
|
|
<button class="chat-pick-mode-btn active" data-mode="peer" type="button">1:1</button>
|
|
<button class="chat-pick-mode-btn" data-mode="group" type="button">group</button>
|
|
</div>
|
|
<input id="chat-group-name" class="chat-group-name hidden" type="text" autocomplete="off" placeholder="group name..." maxlength="80">
|
|
<div id="chat-pick-list" class="chat-pick-list"></div>
|
|
<div id="chat-group-actions" class="chat-group-actions hidden">
|
|
<span id="chat-group-count" class="font-pixel text-[9px] text-t-dim"></span>
|
|
<span style="flex:1"></span>
|
|
<button id="chat-group-create" type="button" class="px-2 py-1 text-[10px] font-pixel border border-t-accent text-t-accent hover:bg-t-accent/10 transition-colors">Create</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Room info / member management view.
|
|
Shown when the user taps the info icon in a room thread. -->
|
|
<div id="chat-room-info-view" class="chat-view hidden">
|
|
<div id="chat-room-info-header">
|
|
<button id="chat-room-info-back" class="text-t-muted hover:text-t-accent transition-colors"><i class="ph ph-caret-left text-sm"></i></button>
|
|
<i class="ph ph-users-three text-t-accent text-sm"></i>
|
|
<span id="chat-room-info-name" class="font-pixel text-[10px] text-t-bright flex-1 truncate"></span>
|
|
</div>
|
|
<div id="chat-room-info-body" class="chat-room-info-body"></div>
|
|
</div>
|
|
</div>
|