chat drin

public/plugins/chat/chat.html

@@ -0,0 +1,44 @@
+<!-- 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 flex-1">chat</span>
+        <button id="chat-new-btn" class="text-t-muted hover:text-t-accent transition-colors" title="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" title="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">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-header">
+            <button id="chat-thread-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-user-circle text-t-accent text-sm"></i>
+            <span id="chat-thread-peer" class="font-pixel text-[10px] text-t-bright flex-1 truncate"></span>
+        </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" title="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>