add hub menagment functions

client/src/components/ChatArea.jsx

@@ -1,16 +1,42 @@
+import { useState } from 'react'
 import { useApp } from '../context/AppContext'
 import { colorToCss } from '../utils/color'
+import { connectionStatus } from '../utils/connection'
 import MessageList from './MessageList'
 import MessageInput from './MessageInput'
 
 export default function ChatArea() {
   const { state, userId } = useApp()
   const conn = state.connections.find(c => c.id === state.selectedId)
+  const [pendingFile, setPendingFile] = useState(null)
+  const [dragCount, setDragCount] = useState(0)
+  const isDragging = dragCount > 0
+
+  function onDragEnter(e) {
+    if (Array.from(e.dataTransfer?.types ?? []).includes('Files')) {
+      setDragCount(c => c + 1)
+    }
+  }
+  function onDragLeave() {
+    setDragCount(c => Math.max(0, c - 1))
+  }
+  function onDragOver(e) {
+    if (Array.from(e.dataTransfer?.types ?? []).includes('Files')) {
+      e.preventDefault()
+    }
+  }
+  function onDrop(e) {
+    e.preventDefault()
+    setDragCount(0)
+    const file = e.dataTransfer?.files?.[0]
+    if (file && state.selectedId) setPendingFile(file)
+  }
 
   let header = null
   if (conn) {
     const otherId = conn.requestorId === userId ? conn.recipientId : conn.requestorId
     const other = state.userMap[otherId]
+    const status = connectionStatus(conn, userId)
     header = (
       <div className="flex items-center gap-3 px-4 py-3 border-b border-gray-700/60 shrink-0">
         <div
@@ -25,26 +51,37 @@ export default function ChatArea() {
             <p className="text-xs text-gray-500">{other.pronouns}</p>
           )}
         </div>
-        {conn.state === 1 && (
-          <span className="ml-auto text-xs text-green-400">● friend</span>
+        {status && (
+          <span className={`ml-auto text-xs ${status.cls}`}>● {status.label}</span>
         )}
       </div>
     )
   }
 
   return (
-    <div className="flex-1 flex flex-col bg-gray-800 min-w-0">
+    <div
+      className="flex-1 flex flex-col bg-gray-800 min-w-0 relative"
+      onDragEnter={onDragEnter}
+      onDragLeave={onDragLeave}
+      onDragOver={onDragOver}
+      onDrop={onDrop}
+    >
       {header}
       {state.selectedId ? (
         <>
           <MessageList />
-          <MessageInput />
+          <MessageInput pendingFile={pendingFile} setPendingFile={setPendingFile} />
         </>
       ) : (
         <div className="flex-1 flex items-center justify-center text-gray-600 text-sm">
           Select a conversation
         </div>
       )}
+      {isDragging && state.selectedId && (
+        <div className="absolute inset-0 z-30 flex items-center justify-center bg-blue-500/20 border-2 border-dashed border-blue-400 pointer-events-none">
+          <p className="text-blue-200 text-sm font-semibold">Drop file to attach</p>
+        </div>
+      )}
     </div>
   )
 }