feat: migrate Leptos frontend to Next.js 16 (React 19)
Deploy to VPS / deploy (push) Failing after 42s

Complete migration from services/frontend.old/ (Leptos 0.7 WASM + Rust)
to services/frontend/ (Next.js 16 static export + TypeScript + Tailwind v4).

Summary:
- Port all shared types (message, guild, voice, media, dashboard, recording, ui)
- Build fetch-based API client covering all 30+ backend endpoints
- WebSocket client with auto-reconnect (exponential backoff, 20 attempts)
- React context provider for WS with typed event subscription (22 event types)
- Login page with localStorage auth + auto-redirect
- Dashboard layout with sidebar, header (WS status + theme toggle)
- Messages: feed, search, images tab, review tab, channel filter, detail modal
- Live: voice connection, music player, recordings, mic transmit, active speakers
- Dashboard: stats, user list, channel list, detail views
- Mascot chatbot with history + clear
- uiStateApi persistence for selected tab
- Add static export config, update deploy scripts and CI
This commit is contained in:
asepharyana
2026-07-26 11:27:21 +07:00
parent cbbe939fad
commit 5e01ec0806
165 changed files with 5035 additions and 16410 deletions
@@ -0,0 +1,78 @@
"use client";
import {
createContext,
type ReactNode,
useCallback,
useContext,
useEffect,
useState,
} from "react";
import { login } from "@/lib/api";
interface AuthContextValue {
authenticated: boolean;
loading: boolean;
login: (password: string) => Promise<boolean>;
logout: () => void;
}
const AuthContext = createContext<AuthContextValue | null>(null);
export function AuthProvider({ children }: { children: ReactNode }) {
const [authenticated, setAuthenticated] = useState(false);
const [loading, setLoading] = useState(true);
useEffect(() => {
const password = localStorage.getItem("admin-password");
if (password) {
// Verify stored password still works
login(password)
.then((ok) => {
setAuthenticated(ok);
setLoading(false);
})
.catch(() => {
localStorage.removeItem("admin-password");
setLoading(false);
});
} else {
setLoading(false);
}
}, []);
const handleLogin = useCallback(async (password: string) => {
const ok = await login(password);
if (ok) {
localStorage.setItem("admin-password", password);
setAuthenticated(true);
}
return ok;
}, []);
const handleLogout = useCallback(() => {
localStorage.removeItem("admin-password");
setAuthenticated(false);
}, []);
return (
<AuthContext.Provider
value={{
authenticated,
loading,
login: handleLogin,
logout: handleLogout,
}}
>
{children}
</AuthContext.Provider>
);
}
export function useAuth(): AuthContextValue {
const ctx = useContext(AuthContext);
if (!ctx) {
throw new Error("useAuth must be used within an AuthProvider");
}
return ctx;
}
@@ -0,0 +1,29 @@
import { useState, useEffect } from "react";
import { configApi } from "@/lib/api";
export interface AppConfig {
monitorGuildId: string | null;
webserverPort?: number;
nodeEnv?: string;
}
export function useAppConfig() {
const [config, setConfig] = useState<AppConfig | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
configApi
.get()
.then((cfg) => {
setConfig({
monitorGuildId: cfg.monitor_guild_id ?? null,
});
})
.catch(() => {
// silent — config fetch is not critical
})
.finally(() => setLoading(false));
}, []);
return { config, loading };
}