Add web client and containerized deployment stack
All checks were successful
CI / test (push) Successful in 19s
All checks were successful
CI / test (push) Successful in 19s
Web client: - Added React + TypeScript + Vite + Tailwind application in web/. - Implemented auth, chat list, chat messages, typing indicators, file uploads, and voice recording/playback. - Added typed API layer, Zustand stores, and realtime websocket hook integration. Containerization: - Added backend Dockerfile and project .dockerignore. - Added web multi-stage Dockerfile with nginx static hosting and API/WS reverse proxy. - Added full docker-compose stack with postgres, redis, minio, backend, worker, mailpit, and web. - Added MinIO bucket bootstrap init job and updated README with Docker quick-start.
This commit is contained in:
45
web/src/pages/ChatsPage.tsx
Normal file
45
web/src/pages/ChatsPage.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import { useEffect } from "react";
|
||||
import { ChatList } from "../components/ChatList";
|
||||
import { MessageComposer } from "../components/MessageComposer";
|
||||
import { MessageList } from "../components/MessageList";
|
||||
import { useRealtime } from "../hooks/useRealtime";
|
||||
import { useAuthStore } from "../store/authStore";
|
||||
import { useChatStore } from "../store/chatStore";
|
||||
|
||||
export function ChatsPage() {
|
||||
const me = useAuthStore((s) => s.me);
|
||||
const logout = useAuthStore((s) => s.logout);
|
||||
const loadChats = useChatStore((s) => s.loadChats);
|
||||
const activeChatId = useChatStore((s) => s.activeChatId);
|
||||
const loadMessages = useChatStore((s) => s.loadMessages);
|
||||
|
||||
useRealtime();
|
||||
|
||||
useEffect(() => {
|
||||
void loadChats();
|
||||
}, [loadChats]);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeChatId) {
|
||||
void loadMessages(activeChatId);
|
||||
}
|
||||
}, [activeChatId, loadMessages]);
|
||||
|
||||
return (
|
||||
<main className="flex h-screen w-full bg-bg text-text">
|
||||
<ChatList />
|
||||
<section className="flex flex-1 flex-col">
|
||||
<div className="flex items-center justify-between border-b border-slate-700 bg-panel px-4 py-3">
|
||||
<p className="text-sm">Signed in as {me?.username}</p>
|
||||
<button className="rounded bg-slate-700 px-3 py-1 text-sm" onClick={logout}>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
<div className="min-h-0 flex-1">
|
||||
<MessageList />
|
||||
</div>
|
||||
<MessageComposer />
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user