voice v2

src/renderer/api/voiceRooms.ts

@@ -0,0 +1,62 @@
+const API_BASE = 'https://minecraft.api.popa-popa.ru';
+
+export type ApiRoom = {
+  id: string;
+  name: string;
+  public: boolean;
+  owner: string;
+  max_users: number;
+  usernames: string[];
+  users: number;
+  created_at: string;
+};
+
+export async function fetchRooms(): Promise<ApiRoom[]> {
+  const res = await fetch(`${API_BASE}/api/voice/rooms`);
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  return res.json();
+}
+
+export async function fetchRoomDetails(roomId: string): Promise<RoomDetails> {
+  const res = await fetch(`${API_BASE}/api/voice/rooms/${roomId}`);
+  if (!res.ok) throw new Error(await res.text());
+  return res.json();
+}
+
+export async function createPublicRoom(
+  name: string,
+  owner: string,
+  isPublic: boolean,
+) {
+  const res = await fetch(`${API_BASE}/api/voice/rooms`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      name,
+      public: isPublic,
+      owner,
+    }),
+  });
+
+  return res.json();
+}
+
+export async function joinPrivateRoom(code: string): Promise<ApiRoom> {
+  const res = await fetch(`${API_BASE}/api/voice/rooms/join`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ code }),
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  return res.json();
+}

src/renderer/components/PageHeader.tsx

@@ -36,6 +36,7 @@ export default function PageHeader() {
       path === '/inventory' ||
       path === '/fakepaymentpage' ||
       path === '/promocode' ||
+      path === '/voice' ||
       path.startsWith('/launch')
     ) {
       return { title: '', subtitle: '', hidden: true };

src/renderer/components/Voice/CreateRoomDialog.tsx

@@ -0,0 +1,112 @@
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  TextField,
+  FormControlLabel,
+  Switch,
+  Typography,
+} from '@mui/material';
+import { useState } from 'react';
+
+export function CreateRoomDialog({
+  open,
+  onClose,
+  onCreate,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onCreate: (data: { name: string; isPublic: boolean }) => Promise<{
+    invite_code?: string | null;
+  }>;
+}) {
+  const [name, setName] = useState('');
+  const [isPublic, setIsPublic] = useState(true);
+  const [inviteCode, setInviteCode] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const handleCreate = async () => {
+    setLoading(true);
+
+    const res = await onCreate({
+      name,
+      isPublic,
+    });
+
+    if (!isPublic && res?.invite_code) {
+      setInviteCode(res.invite_code);
+    } else {
+      onClose();
+    }
+
+    setLoading(false);
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
+      <DialogTitle>Создать комнату</DialogTitle>
+
+      <DialogContent>
+        {!inviteCode ? (
+          <>
+            <TextField
+              autoFocus
+              fullWidth
+              label="Название комнаты"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              margin="dense"
+            />
+
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={isPublic}
+                  onChange={(e) => setIsPublic(e.target.checked)}
+                />
+              }
+              label={isPublic ? 'Публичная' : 'Приватная'}
+              sx={{ mt: 1 }}
+            />
+          </>
+        ) : (
+          <>
+            <Typography sx={{ mb: 1 }}>Код для входа в комнату:</Typography>
+
+            <TextField
+              fullWidth
+              value={inviteCode}
+              InputProps={{ readOnly: true }}
+            />
+
+            <Button
+              sx={{ mt: 2 }}
+              fullWidth
+              onClick={() => {
+                navigator.clipboard.writeText(inviteCode);
+              }}
+            >
+              Скопировать код
+            </Button>
+          </>
+        )}
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={onClose}>Закрыть</Button>
+
+        {!inviteCode && (
+          <Button
+            variant="contained"
+            onClick={handleCreate}
+            disabled={!name || loading}
+          >
+            Создать
+          </Button>
+        )}
+      </DialogActions>
+    </Dialog>
+  );
+}

src/renderer/components/Voice/JoinByCodeDialog.tsx

@@ -0,0 +1,58 @@
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  TextField,
+} from '@mui/material';
+import { useState } from 'react';
+
+export function JoinByCodeDialog({
+  open,
+  onClose,
+  onJoin,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onJoin: (code: string) => Promise<void>;
+}) {
+  const [code, setCode] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleJoin = async () => {
+    setLoading(true);
+    await onJoin(code);
+    setLoading(false);
+    setCode('');
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
+      <DialogTitle>Войти по коду</DialogTitle>
+
+      <DialogContent>
+        <TextField
+          autoFocus
+          fullWidth
+          label="Invite-код"
+          value={code}
+          onChange={(e) => setCode(e.target.value)}
+          margin="dense"
+        />
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={onClose}>Отмена</Button>
+        <Button
+          variant="contained"
+          onClick={handleJoin}
+          disabled={!code || loading}
+        >
+          Войти
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

src/renderer/components/Voice/RoomsPanel.tsx

@@ -0,0 +1,115 @@
+import { Box, Typography, Button } from '@mui/material';
+import { glassBox, GRADIENT } from '../../theme/voiceStyles';
+import type { RoomInfo } from '../../types/rooms';
+
+type Props = {
+  rooms: RoomInfo[];
+  currentRoomId: string | null;
+  onJoin: (roomId: string) => void;
+  onCreate: () => void;
+  onJoinByCode: () => void;
+};
+
+export function RoomsPanel({
+  rooms,
+  currentRoomId,
+  onJoin,
+  onCreate,
+  onJoinByCode,
+}: Props) {
+  return (
+    <Box
+      sx={{
+        width: 300,
+        p: '1.2vw',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '1vw',
+        borderRadius: '1.5vw',
+        ...glassBox,
+      }}
+    >
+      <Typography
+        sx={{
+          fontFamily: 'Benzin-Bold',
+          fontSize: '1.4vw',
+          backgroundImage: GRADIENT,
+          WebkitBackgroundClip: 'text',
+          WebkitTextFillColor: 'transparent',
+        }}
+      >
+        Голосовые комнаты
+      </Typography>
+
+      <Box sx={{ flex: 1, overflowY: 'auto', pr: '0.3vw' }}>
+        {rooms.map((room) => {
+          const active = room.id === currentRoomId;
+
+          return (
+            <Box
+              key={room.id}
+              onClick={() => onJoin(room.id)}
+              sx={{
+                p: '0.9vw',
+                mb: '0.6vw',
+                borderRadius: '1vw',
+                cursor: 'pointer',
+                transition: 'all 0.18s ease',
+                background: active ? GRADIENT : 'rgba(255,255,255,0.04)',
+                color: active ? '#fff' : 'rgba(255,255,255,0.9)',
+                '&:hover': {
+                  //transform: 'scale(1.01)',
+                  background: active ? GRADIENT : 'rgba(255,255,255,0.07)',
+                },
+              }}
+            >
+              <Typography sx={{ fontWeight: 800 }}>{room.name}</Typography>
+
+              {room.users.length > 0 && (
+                <Box sx={{ mt: '0.4vw', pl: '0.8vw' }}>
+                  {room.users.map((u) => (
+                    <Typography
+                      key={u}
+                      sx={{
+                        fontSize: '0.85vw',
+                        opacity: 0.8,
+                      }}
+                    >
+                      • {u}
+                    </Typography>
+                  ))}
+                </Box>
+              )}
+            </Box>
+          );
+        })}
+      </Box>
+
+      <Button
+        onClick={onCreate}
+        sx={{
+          borderRadius: '999px',
+          py: '0.8vw',
+          fontFamily: 'Benzin-Bold',
+          background: GRADIENT,
+          color: '#fff',
+        }}
+      >
+        + Создать комнату
+      </Button>
+
+      <Button
+        onClick={onJoinByCode}
+        sx={{
+          borderRadius: '999px',
+          py: '0.8vw',
+          fontFamily: 'Benzin-Bold',
+          background: 'rgba(255,255,255,0.08)',
+          color: '#fff',
+        }}
+      >
+        Войти по коду
+      </Button>
+    </Box>
+  );
+}

src/renderer/components/Voice/VoicePanel.tsx

@@ -0,0 +1,84 @@
+import { Box, Button, Typography } from '@mui/material';
+import { useVoiceRoom } from '../../realtime/voice/useVoiceRoom';
+import { useState, useEffect } from 'react';
+import { getVoiceState, subscribeVoice } from '../../realtime/voice/voiceStore';
+import { glassBox, GRADIENT } from '../../theme/voiceStyles';
+
+type Props = {
+  roomId: string;
+  voice: {
+    disconnect: () => void;
+    toggleMute: () => void;
+  };
+};
+
+export function VoicePanel({ roomId, voice }: Props) {
+  const [state, setState] = useState(getVoiceState());
+
+  useEffect(
+    () =>
+      subscribeVoice(() => {
+        setState({ ...getVoiceState() });
+      }),
+    [],
+  );
+
+  return (
+    <Box
+      sx={{
+        flex: 1,
+        ml: '1.5vw',
+        p: '2vw',
+        borderRadius: '1.5vw',
+        ...glassBox,
+      }}
+    >
+      <Typography
+        sx={{
+          fontFamily: 'Benzin-Bold',
+          fontSize: '2vw',
+          mb: '1.2vw',
+          backgroundImage: GRADIENT,
+          WebkitBackgroundClip: 'text',
+          WebkitTextFillColor: 'transparent',
+        }}
+      >
+        {roomId}
+      </Typography>
+
+      <Box sx={{ display: 'flex', gap: '1vw', mb: '2vw' }}>
+        <Button
+          onClick={voice.toggleMute}
+          sx={{
+            borderRadius: '999px',
+            px: '2vw',
+            background: 'rgba(255,255,255,0.08)',
+            color: '#fff',
+            fontFamily: 'Benzin-Bold',
+          }}
+        >
+          {state.muted ? 'Вкл. микрофон' : 'Выкл. микрофон'}
+        </Button>
+
+        <Button
+          onClick={voice.disconnect}
+          sx={{
+            borderRadius: '999px',
+            px: '2vw',
+            background: 'rgba(255,60,60,0.25)',
+            color: '#fff',
+            fontFamily: 'Benzin-Bold',
+          }}
+        >
+          Выйти
+        </Button>
+      </Box>
+
+      <Typography sx={{ mb: '0.6vw', opacity: 0.7 }}>Участники:</Typography>
+
+      {state.participants.map((u) => (
+        <Typography key={u}>• {u}</Typography>
+      ))}
+    </Box>
+  );
+}

src/renderer/components/VoicePanel.tsx

@@ -1,40 +0,0 @@
-import { useVoiceRoom } from '../realtime/voice/useVoiceRoom';
-import { useState, useEffect } from 'react';
-import { getVoiceState, subscribeVoice } from '../realtime/voice/voiceStore';
-
-export function VoicePanel({
-  roomId,
-  username,
-}: {
-  roomId: string;
-  username: string;
-}) {
-  const [voice, setVoice] = useState(getVoiceState());
-  const { connect, disconnect, toggleMute } = useVoiceRoom(roomId, username);
-
-  useEffect(() => {
-    return subscribeVoice(() => {
-      setVoice({ ...getVoiceState() });
-    });
-  }, []);
-
-  return (
-    <div>
-      <button disabled={voice.connected} onClick={connect}>
-        Войти
-      </button>
-
-      <button onClick={toggleMute}>
-        {voice.muted ? 'Включить микрофон' : 'Выключить микрофон'}
-      </button>
-
-      <button onClick={disconnect}>Выйти</button>
-
-      <ul>
-        {voice.participants.map((u) => (
-          <li key={u}>{u}</li>
-        ))}
-      </ul>
-    </div>
-  );
-}

src/renderer/mappers/roomMapper.ts

@@ -0,0 +1,11 @@
+import type { ApiRoom } from '../api/voiceRooms';
+import type { RoomInfo } from '../types/rooms';
+
+export function mapApiRoomToUI(room: ApiRoom): RoomInfo {
+  return {
+    id: room.id,
+    name: room.name,
+    public: room.public,
+    users: room.usernames ?? [], // ⬅️ ВАЖНО: список пользователей приходит ТОЛЬКО по WS
+  };
+}

src/renderer/pages/VoicePage.tsx

@@ -1,23 +1,146 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
-import { VoicePanel } from '../components/VoicePanel';
+import { RoomsPanel } from '../components/Voice/RoomsPanel';
+import { VoicePanel } from '../components/Voice/VoicePanel';
+import {
+  fetchRooms,
+  createPublicRoom,
+  joinPrivateRoom,
+} from '../api/voiceRooms';
+import { mapApiRoomToUI } from '../mappers/roomMapper';
+import type { RoomInfo } from '../types/rooms';
+import { CreateRoomDialog } from '../components/Voice/CreateRoomDialog';
+import { JoinByCodeDialog } from '../components/Voice/JoinByCodeDialog';
+import { useVoiceRoom } from '../realtime/voice/useVoiceRoom';
+import type { RoomDetails } from '../types/rooms';
 
 export default function VoicePage() {
-  const [username, setUsername] = useState<string>('');
+  const [roomDetails, setRoomDetails] = useState<RoomDetails | null>(null);
 
+  const [username, setUsername] = useState('');
+  const [rooms, setRooms] = useState<RoomInfo[]>([]);
+  const [currentRoomId, setCurrentRoomId] = useState<string | null>(null);
+
+  const [createOpen, setCreateOpen] = useState(false);
+  const [joinOpen, setJoinOpen] = useState(false);
+
+  const voice = useVoiceRoom(username);
+
+  const wsRef = useRef<WebSocket | null>(null);
+
+  // --- username ---
   useEffect(() => {
     const savedConfig = localStorage.getItem('launcher_config');
     if (savedConfig) {
       const config = JSON.parse(savedConfig);
-      if (config.uuid && config.username) {
+      if (config.username) {
         setUsername(config.username);
       }
     }
   }, []);
 
-  if (!username) {
+  // --- HTTP: initial rooms list ---
-    console.warn('Voice: username is empty');
+  useEffect(() => {
-    return;
+    if (!username) return;
-  }
 
-  return <VoicePanel roomId="test-room" username={username} />;
+    fetchRooms()
+      .then((apiRooms) => {
+        setRooms(apiRooms.map(mapApiRoomToUI));
+      })
+      .catch(console.error);
+  }, [username]);
+
+  // --- open dialog ---
+  const handleCreateClick = () => {
+    setCreateOpen(true);
+  };
+
+  // --- WS: users inside rooms ---
+  useEffect(() => {
+    if (!username) return;
+
+    const ws = new WebSocket(
+      `wss://minecraft.api.popa-popa.ru/ws/rooms?username=${username}`,
+    );
+
+    ws.onmessage = (ev) => {
+      const msg = JSON.parse(ev.data);
+
+      if (msg.type !== 'rooms') return;
+
+      setRooms((prev) => {
+        const map = new Map(prev.map((r) => [r.id, r]));
+
+        for (const updated of msg.rooms) {
+          const existing = map.get(updated.id);
+          if (!existing) continue;
+
+          map.set(updated.id, {
+            ...existing,
+            users: updated.users ?? [],
+          });
+        }
+
+        return Array.from(map.values());
+      });
+    };
+
+    return () => ws.close();
+  }, [username]);
+
+  // --- handlers ---
+  const joinRoom = (roomId: string) => {
+    setCurrentRoomId(roomId);
+    voice.connect(roomId); // 🔥 АВТОПОДКЛЮЧЕНИЕ
+  };
+
+  const handleCreateRoom = async ({
+    name,
+    isPublic,
+  }: {
+    name: string;
+    isPublic: boolean;
+  }) => {
+    const apiRoom = await createPublicRoom(name, username, isPublic);
+
+    setCurrentRoomId(apiRoom.id);
+
+    return {
+      invite_code: apiRoom.invite_code ?? null,
+    };
+  };
+
+  const handleJoinByCode = async (code: string) => {
+    const room = await joinPrivateRoom(code);
+    setCurrentRoomId(room.id);
+  };
+
+  if (!username) return null;
+
+  return (
+    <div
+      style={{ display: 'flex', width: '98%', height: '90%', marginTop: '9vh' }}
+    >
+      <RoomsPanel
+        rooms={rooms}
+        currentRoomId={currentRoomId}
+        onJoin={joinRoom}
+        onCreate={() => setCreateOpen(true)}
+        onJoinByCode={() => setJoinOpen(true)}
+      />
+
+      <CreateRoomDialog
+        open={createOpen}
+        onClose={() => setCreateOpen(false)}
+        onCreate={handleCreateRoom}
+      />
+
+      <JoinByCodeDialog
+        open={joinOpen}
+        onClose={() => setJoinOpen(false)}
+        onJoin={handleJoinByCode}
+      />
+
+      {currentRoomId && <VoicePanel roomId={currentRoomId} voice={voice} />}
+    </div>
+  );
 }

src/renderer/realtime/voice/types.ts

@@ -1,4 +1,5 @@
 export type WSMessage =
+  | { type: 'users'; users: string[] }
   | { type: 'join'; user: string }
   | { type: 'leave'; user: string }
   | {

src/renderer/realtime/voice/useVoiceRoom.ts

@@ -5,11 +5,15 @@ import { setVoiceState, getVoiceState } from './voiceStore';
 
 type PeerMap = Map<string, RTCPeerConnection>;
 
-export function useVoiceRoom(roomId: string, username: string) {
+export function useVoiceRoom(username: string) {
   const wsRef = useRef<WebSocket | null>(null);
   const peersRef = useRef<PeerMap>(new Map());
   const streamRef = useRef<MediaStream | null>(null);
 
+  const currentRoomIdRef = useRef<string | null>(null);
+
+  const reconnectTimeout = useRef<number | null>(null);
+
   // const [connected, setConnected] = useState(false);
   // const [participants, setParticipants] = useState<string[]>([]);
   // const [muted, setMuted] = useState(false);
@@ -17,75 +21,111 @@ export function useVoiceRoom(roomId: string, username: string) {
   const pendingIceRef = useRef<Map<string, RTCIceCandidateInit[]>>(new Map());
 
   // --- connect ---
-  const connect = useCallback(async () => {
+  const connect = useCallback(
-    if (wsRef.current) return;
+    async (roomId: string) => {
+      if (wsRef.current) return;
 
-    // 1. микрофон
+      currentRoomIdRef.current = roomId;
-    const stream = await navigator.mediaDevices.getUserMedia({
-      audio: {
-        echoCancellation: true,
-        noiseSuppression: true,
-        autoGainControl: true,
-      },
-    });
-    streamRef.current = stream;
 
-    // 2. websocket
+      // 1. микрофон
-    const ws = new WebSocket(
+      const stream = await navigator.mediaDevices.getUserMedia({
-      `wss://minecraft.api.popa-popa.ru/ws/voice?room_id=${roomId}&username=${username}`,
+        audio: {
-    );
+          echoCancellation: true,
-    wsRef.current = ws;
+          noiseSuppression: true,
-
+          autoGainControl: true,
-    ws.onopen = () => {
+        },
-      setVoiceState({
-        connected: true,
-        participants: [username],
       });
-    };
+      streamRef.current = stream;
 
-    ws.onclose = () => {
+      // 2. websocket
-      setVoiceState({
+      const ws = new WebSocket(
-        connected: false,
+        `wss://minecraft.api.popa-popa.ru/ws/voice?room_id=${roomId}&username=${username}`,
-        participants: [],
+      );
-        muted: false,
+      wsRef.current = ws;
-      });
-      cleanup();
-    };
 
-    // ws.onclose = () => {
+      ws.onopen = () => {
-    //   cleanup();
+        setVoiceState({
-    //   setConnected(false);
+          connected: true,
-    // };
+          shouldBeConnected: true,
+          participants: [username],
+        });
+      };
 
-    ws.onmessage = async (ev) => {
+      ws.onclose = () => {
-      const msg: WSMessage = JSON.parse(ev.data);
+        cleanup();
 
-      if (msg.type === 'join' && msg.user !== username) {
+        setVoiceState({ connected: false });
-        await createPeer(msg.user, false);
+
+        if (getVoiceState().shouldBeConnected) {
+          reconnectTimeout.current = window.setTimeout(() => {
+            const lastRoomId = currentRoomIdRef.current;
+            if (lastRoomId) {
+              connect(lastRoomId);
+            }
+          }, 1500);
+        }
+      };
+
+      // ws.onclose = () => {
+      //   cleanup();
+      //   setConnected(false);
+      // };
+
+      ws.onmessage = async (ev) => {
+        const msg: WSMessage = JSON.parse(ev.data);
+
+        if (msg.type === 'join' && msg.user !== username) {
+          await createPeer(msg.user, false);
+
+          const { participants } = getVoiceState();
+          if (!participants.includes(msg.user)) {
+            setVoiceState({
+              participants: [...participants, msg.user],
+            });
+          }
+        }
+
+        if (msg.type === 'leave') {
+          removePeer(msg.user);
 
-        const { participants } = getVoiceState();
-        if (!participants.includes(msg.user)) {
           setVoiceState({
-            participants: [...participants, msg.user],
+            participants: getVoiceState().participants.filter(
+              (u) => u !== msg.user,
+            ),
           });
         }
-      }
 
-      if (msg.type === 'leave') {
+        if (msg.type === 'signal') {
-        removePeer(msg.user);
+          await handleSignal(msg.from, msg.data);
+        }
 
-        setVoiceState({
+        if (msg.type === 'users') {
-          participants: getVoiceState().participants.filter(
+          const current = getVoiceState().participants;
-            (u) => u !== msg.user,
+          const next = msg.users;
-          ),
-        });
-      }
 
-      if (msg.type === 'signal') {
+          // 1. удаляем ушедших
-        await handleSignal(msg.from, msg.data);
+          for (const user of current) {
-      }
+            if (!next.includes(user)) {
-    };
+              removePeer(user);
-  }, [roomId, username]);
+            }
+          }
+
+          // 2. создаём peer для новых
+          for (const user of next) {
+            if (user !== username && !peersRef.current.has(user)) {
+              await createPeer(user, true);
+            }
+          }
+
+          // 3. обновляем store
+          setVoiceState({
+            participants: next,
+          });
+        }
+      };
+    },
+    [username],
+  );
 
   // --- create peer ---
   const createPeer = async (user: string, polite: boolean) => {
@@ -232,16 +272,22 @@ export function useVoiceRoom(roomId: string, username: string) {
     wsRef.current?.close();
     wsRef.current = null;
 
+    if (reconnectTimeout.current) {
+      clearTimeout(reconnectTimeout.current);
+      reconnectTimeout.current = null;
+    }
+
     document.querySelectorAll('audio[data-user]').forEach((a) => a.remove());
   };
 
   const disconnect = () => {
-    cleanup();
     setVoiceState({
       connected: false,
+      shouldBeConnected: false,
       participants: [],
       muted: false,
     });
+    cleanup();
   };
 
   return {

src/renderer/realtime/voice/voiceStore.ts

@@ -1,11 +1,13 @@
 type VoiceState = {
   connected: boolean;
+  shouldBeConnected: boolean;
   participants: string[];
   muted: boolean;
 };
 
 const state: VoiceState = {
   connected: false,
+  shouldBeConnected: false,
   participants: [],
   muted: false,
 };

src/renderer/theme/voiceStyles.ts

@@ -0,0 +1,12 @@
+export const GRADIENT =
+  'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)';
+
+export const glassBox = {
+  background:
+    'radial-gradient(circle at 10% 10%, rgba(242,113,33,0.12), transparent 55%),' +
+    'radial-gradient(circle at 90% 20%, rgba(233,64,205,0.10), transparent 55%),' +
+    'rgba(10,10,20,0.86)',
+  border: '1px solid rgba(255,255,255,0.10)',
+  backdropFilter: 'blur(14px)',
+  boxShadow: '0 1.2vw 3.2vw rgba(0,0,0,0.55)',
+};

src/renderer/types/rooms.ts

@@ -0,0 +1,16 @@
+export type RoomInfo = {
+  id: string;
+  name: string;
+  public: boolean;
+  users: string[]; // usernames
+};
+
+export type RoomDetails = {
+  id: string;
+  name: string;
+  owner: string;
+  max_users: number;
+  users: number;
+  usernames: string[];
+  public: boolean;
+};