Skip to content

Commit 9de8413

Browse files
2color2color
committed
feat: overhaul ui and load chat by default
1 parent 34b6b35 commit 9de8413

File tree

7 files changed

+386
-184
lines changed

7 files changed

+386
-184
lines changed

‎js-peer/src/components/chat-peer-list.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,11 @@ import React, { useEffect, useState } from 'react'
44
import type { PeerId } from '@libp2p/interface'
55
import { PeerWrapper } from './peer'
66

7-
export function ChatPeerList() {
7+
interface ChatPeerListProps {
8+
hideHeader?: boolean;
9+
}
10+
11+
export function ChatPeerList({ hideHeader = false }: ChatPeerListProps) {
812
const { libp2p } = useLibp2pContext()
913
const [subscribers, setSubscribers] = useState<PeerId[]>([])
1014

@@ -22,8 +26,10 @@ export function ChatPeerList() {
2226

2327
return (
2428
<div className="border-l border-gray-300 lg:col-span-1">
25-
<h2 className="my-2 mb-2 ml-2 text-lg text-gray-600">Peers</h2>
26-
<div className="overflow-auto h-[32rem]">
29+
{!hideHeader && (
30+
<h2 className="my-2 mb-2 ml-2 text-lg text-gray-600">Peers</h2>
31+
)}
32+
<div className="overflow-auto h-[20rem] lg:h-[32rem]">
2733
<div className="px-3 py-2 border-b border-gray-300 focus:outline-none">
2834
{<PeerWrapper peer={libp2p.peerId} self withName={true} withUnread={false} />}
2935
</div>

‎js-peer/src/components/chat.tsx‎

Lines changed: 62 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Message } from './message'
77
import { forComponent } from '@/lib/logger'
88
import { ChatPeerList } from './chat-peer-list'
99
import { ChevronLeftIcon } from '@heroicons/react/20/solid'
10+
import { UsersIcon } from '@heroicons/react/24/outline'
1011
import Blockies from 'react-18-blockies'
1112
import { peerIdFromString } from '@libp2p/peer-id'
1213

@@ -22,6 +23,7 @@ export default function ChatContainer() {
2223
const [input, setInput] = useState<string>('')
2324
const fileRef = useRef<HTMLInputElement>(null)
2425
const [messages, setMessages] = useState<ChatMessage[]>([])
26+
const [showMobilePeerList, setShowMobilePeerList] = useState(false)
2527

2628
// Send message to public chat over gossipsub
2729
const sendPublicMessage = useCallback(async () => {
@@ -183,6 +185,10 @@ export default function ChatContainer() {
183185
setMessages(messageHistory)
184186
}
185187

188+
const toggleMobilePeerList = () => {
189+
setShowMobilePeerList(!showMobilePeerList);
190+
}
191+
186192
useEffect(() => {
187193
// assumes a chat room is a peerId thus a direct message
188194
if (roomId === PUBLIC_CHAT_ROOM_ID) {
@@ -193,26 +199,67 @@ export default function ChatContainer() {
193199
}, [roomId, directMessages, messageHistory])
194200

195201
return (
196-
<div className="container mx-auto">
197-
<div className="min-w-full border rounded lg:grid lg:grid-cols-6">
198-
<div className="lg:col-span-5 lg:block">
202+
<div className="container mx-auto w-full px-0">
203+
<div className="min-w-full border-0 rounded-none lg:rounded grid grid-cols-1 lg:grid-cols-6">
204+
<div className="col-span-1 lg:col-span-5">
199205
<div className="w-full">
200206
<div className="relative flex items-center p-3 border-b border-gray-300">
201207
{roomId === PUBLIC_CHAT_ROOM_ID && (
202-
<span className="block ml-2 font-bold text-gray-600">{PUBLIC_CHAT_ROOM_NAME}</span>
208+
<>
209+
<span className="block ml-2 font-bold text-gray-600">{PUBLIC_CHAT_ROOM_NAME}</span>
210+
<button
211+
onClick={toggleMobilePeerList}
212+
className="ml-auto lg:hidden flex items-center text-gray-500 hover:text-gray-700"
213+
aria-label="Toggle peer list"
214+
>
215+
<UsersIcon className="h-5 w-5" />
216+
<span className="ml-1 text-sm">Peers</span>
217+
</button>
218+
</>
203219
)}
204220
{roomId !== PUBLIC_CHAT_ROOM_ID && (
205221
<>
206222
<Blockies seed={roomId} size={8} scale={3} className="rounded mr-2 max-h-10 max-w-10" />
207223
<span className={`text-gray-500 flex`}>{roomId.toString().slice(-7)}</span>
208-
<button onClick={handleBackToPublic} className="text-gray-500 flex ml-auto">
209-
<ChevronLeftIcon className="w-6 h-6 text-gray-500" />
210-
<span>Back to Public Chat</span>
211-
</button>
224+
<div className="flex items-center ml-auto">
225+
<button
226+
onClick={toggleMobilePeerList}
227+
className="lg:hidden flex items-center text-gray-500 hover:text-gray-700 mr-4"
228+
aria-label="Toggle peer list"
229+
>
230+
<UsersIcon className="h-5 w-5" />
231+
<span className="ml-1 text-sm">Peers</span>
232+
</button>
233+
<button onClick={handleBackToPublic} className="text-gray-500 flex">
234+
<ChevronLeftIcon className="w-6 h-6 text-gray-500" />
235+
<span className="hidden sm:inline">Back to Public Chat</span>
236+
<span className="sm:hidden">Back</span>
237+
</button>
238+
</div>
212239
</>
213240
)}
214241
</div>
215-
<div className="relative w-full flex flex-col-reverse p-3 overflow-y-auto h-[40rem] bg-gray-100">
242+
243+
{/* Show mobile peer list when toggled */}
244+
{showMobilePeerList && (
245+
<div className="lg:hidden border-b border-gray-300">
246+
<div className="flex items-center justify-between p-2 bg-gray-50">
247+
<h2 className="text-lg text-gray-600">Peers</h2>
248+
<button
249+
onClick={toggleMobilePeerList}
250+
className="text-gray-500 hover:text-gray-700"
251+
aria-label="Close peer list"
252+
>
253+
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
254+
<path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
255+
</svg>
256+
</button>
257+
</div>
258+
<ChatPeerList hideHeader={true} />
259+
</div>
260+
)}
261+
262+
<div className="relative w-full flex flex-col-reverse p-3 overflow-y-auto h-[calc(60vh-8rem)] sm:h-[40rem] bg-gray-100">
216263
<ul className="space-y-2">
217264
{messages.map(({ msgId, msg, fileObjectUrl, peerId, read, receivedAt }: ChatMessage) => (
218265
<Message
@@ -229,7 +276,7 @@ export default function ChatContainer() {
229276
</ul>
230277
</div>
231278

232-
<div className="flex items-center justify-between w-full p-3 border-t border-gray-300">
279+
<div className="flex items-center justify-between w-full p-2 sm:p-3 border-t border-gray-300">
233280
<input
234281
ref={fileRef}
235282
className="hidden"
@@ -241,7 +288,7 @@ export default function ChatContainer() {
241288
onClick={handleFileSend}
242289
disabled={roomId !== PUBLIC_CHAT_ROOM_ID}
243290
title={roomId === PUBLIC_CHAT_ROOM_ID ? 'Upload file' : "Unsupported in DM's"}
244-
className={roomId === PUBLIC_CHAT_ROOM_ID ? '' : 'cursor-not-allowed'}
291+
className={`${roomId === PUBLIC_CHAT_ROOM_ID ? '' : 'cursor-not-allowed'} p-1`}
245292
>
246293
<svg
247294
xmlns="http://www.w3.org/2000/svg"
@@ -265,7 +312,7 @@ export default function ChatContainer() {
265312
onChange={handleInput}
266313
type="text"
267314
placeholder="Message"
268-
className="block w-full py-2 pl-4 mx-3 bg-gray-100 rounded-full outline-none focus:text-gray-700"
315+
className="block w-full py-2 pl-2 sm:pl-4 mx-2 sm:mx-3 bg-gray-100 rounded-full outline-none focus:text-gray-700 text-sm sm:text-base"
269316
name="message"
270317
required
271318
/>
@@ -282,7 +329,9 @@ export default function ChatContainer() {
282329
</div>
283330
</div>
284331
</div>
285-
<ChatPeerList />
332+
<div className="hidden lg:block">
333+
<ChatPeerList />
334+
</div>
286335
</div>
287336
</div>
288337
)

0 commit comments

Comments
 (0)