wip

src/app/chat/index.tsx

@@ -52,39 +52,37 @@ export function ChatScreen() {
 				>
 					<h3 className="font-semibold text-zinc-100">Encrypted Chat</h3>
 				</div>
-				<div className="w-full flex-1 p-3">
-					{account && (
-						<div className="flex h-full flex-col justify-between rounded-md bg-zinc-900">
+				<div className="w-full h-full flex-1 p-3">
+					<div className="h-full flex flex-col justify-between rounded-xl border-t border-zinc-800/50 bg-zinc-900 overflow-hidden">
+						<div className="flex-1 w-full h-full">
 							{status === "loading" ? (
 								<p>Loading...</p>
 							) : (
-								<div className="h-full w-full">
-									<Virtuoso
-										ref={virtuosoRef}
-										data={data}
-										itemContent={itemContent}
-										computeItemKey={computeItemKey}
-										initialTopMostItemIndex={data.length - 1}
-										alignToBottom={true}
-										followOutput={true}
-										overscan={50}
-										increaseViewportBy={{ top: 200, bottom: 200 }}
-										className="scrollbar-hide h-full w-full overflow-y-auto"
-										components={{
-											EmptyPlaceholder: () => Empty,
-										}}
-									/>
-								</div>
-							)}
-							<div className="shrink-0 px-5 p-3 border-t border-zinc-800">
-								<ChatMessageForm
-									receiverPubkey={pubkey}
-									userPubkey={account.pubkey}
-									userPrivkey={account.privkey}
+								<Virtuoso
+									ref={virtuosoRef}
+									data={data}
+									itemContent={itemContent}
+									computeItemKey={computeItemKey}
+									initialTopMostItemIndex={data.length - 1}
+									alignToBottom={true}
+									followOutput={true}
+									overscan={50}
+									increaseViewportBy={{ top: 200, bottom: 200 }}
+									className="relative scrollbar-hide overflow-y-auto"
+									components={{
+										EmptyPlaceholder: () => Empty,
+									}}
 								/>
-							</div>
+							)}
 						</div>
-					)}
+						<div className="shrink-0 px-5 p-3 rounded-b-xl border-t border-zinc-800 bg-zinc-900 z-50">
+							<ChatMessageForm
+								receiverPubkey={pubkey}
+								userPubkey={account.pubkey}
+								userPrivkey={account.privkey}
+							/>
+						</div>
+					</div>
 				</div>
 			</div>
 			<div className="col-span-1">
@@ -92,18 +90,16 @@ export function ChatScreen() {
 					data-tauri-drag-region
 					className="h-11 w-full shrink-0 inline-flex items-center justify-center border-b border-zinc-900"
 				/>
-				{pubkey && <ChatSidebar pubkey={pubkey} />}
+				<ChatSidebar pubkey={pubkey} />
 			</div>
 		</div>
 	);
 }
 
 const Empty = (
-	<div className="flex flex-col gap-1 text-center">
-		<h3 className="text-base font-semibold leading-none text-white">
-			Nothing to see here yet
-		</h3>
-		<p className="text-base leading-none text-zinc-400">
+	<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full flex flex-col gap-1 text-center">
+		<h3 className="mb-2 text-4xl">🙌</h3>
+		<p className="leading-none text-zinc-400">
 			You two didn't talk yet, let's send first message
 		</p>
 	</div>