Upload 26 files

README.md

@@ -1,43 +1,43 @@
----
-title: School Notes Archives
-emoji: 📚
-colorFrom: blue
-colorTo: indigo
-sdk: docker
-app_port: 3000
-pinned: false
----
-
-A private study workspace for organizing notes, uploading documents, and collaborating in subject-based group chats.
-
-## Features
-
-- Subject-based notes archive
-- Image and `.docx` uploads
-- Searchable notes
-- Group chat rooms
-- Audio file and microphone voice-message attachments (audio up to 2 minutes, video up to 10 seconds)
-- User and admin controls
-- Persistent storage under `/Archives`
-
-## Run locally
-
-**Prerequisites:** Node.js 22 or later
-
-```bash
-npm install
-npm run dev
-```
-
-The application runs at `http://localhost:3000`.
-
-## Production build
-
-```bash
-npm run build
-npm start
-```
-
-For Hugging Face Spaces, the Docker Space should attach persistent storage at `/Archives` so uploaded files, call history, and application data survive restarts. The Gemini API key is not required for the core notes archive; configure any required secrets in the Space settings.
-
-Chat supports audio uploads, browser microphone recording, and short video uploads through the existing Node/Express API. Audio is limited to 2 minutes and video to 10 seconds. Microphone recording requires a secure browser context, which the HTTPS URL of a deployed Hugging Face Space provides. No Python or FastRTC service is required for this Docker-based app.
+---
+title: School Notes Archives
+emoji: 📚
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+app_port: 3000
+pinned: false
+---
+
+A private study workspace for organizing notes, uploading documents, and collaborating in subject-based group chats.
+
+## Features
+
+- Subject-based notes archive
+- Image and `.docx` uploads
+- Searchable notes
+- Group chat rooms
+- Audio file and microphone voice-message attachments (audio up to 2 minutes, video up to 10 seconds)
+- User and admin controls
+- Persistent storage under `/Archives`
+
+## Run locally
+
+**Prerequisites:** Node.js 22 or later
+
+```bash
+npm install
+npm run dev
+```
+
+The application runs at `http://localhost:3000`.
+
+## Production build
+
+```bash
+npm run build
+npm start
+```
+
+For Hugging Face Spaces, the Docker Space should attach persistent storage at `/Archives` so uploaded files, call history, and application data survive restarts. The Gemini API key is not required for the core notes archive; configure any required secrets in the Space settings.
+
+Chat supports audio uploads, browser microphone recording, and short video uploads through the existing Node/Express API. Audio is limited to 2 minutes and video to 10 seconds. Microphone recording requires a secure browser context, which the HTTPS URL of a deployed Hugging Face Space provides. No Python or FastRTC service is required for this Docker-based app.

bun.lock

@@ -7,14 +7,16 @@
       "dependencies": {
         "@google/genai": "^2.4.0",
         "@tailwindcss/vite": "^4.1.14",
+        "@types/react": "^18.3.12",
+        "@types/react-dom": "^18.3.1",
         "@vitejs/plugin-react": "^5.0.4",
         "dotenv": "^17.2.3",
         "express": "^4.21.2",
         "lucide-react": "^0.546.0",
         "motion": "^12.23.24",
         "multer": "^2.3.0",
-        "react": "^19.0.1",
-        "react-dom": "^19.0.1",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "vite": "^6.2.3",
       },
       "devDependencies": {
@@ -261,10 +263,16 @@
 
     "@types/node": ["@types/node@22.20.1", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-EANqOCF9QFyra+4pfxUcX9STKJpCLjMbObVzljIJomAWSnuSIEAvyzEU53GaajbXJEgdh0iEcPL+DGvpUd4k1Q=="],
 
+    "@types/prop-types": ["@types/prop-types@15.7.15", "", {}, "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw=="],
+
     "@types/qs": ["@types/qs@6.15.1", "", {}, "sha512-GZHUBZR9hckSUhrxmp1nG6NwdpM9fCunJwyThLW1X3AyHgd9IlHb6VANpQQqDr2o/qQp6McZ3y/IA2rVzKzSbw=="],
 
     "@types/range-parser": ["@types/range-parser@1.2.7", "", {}, "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="],
 
+    "@types/react": ["@types/react@18.3.31", "", { "dependencies": { "@types/prop-types": "*", "csstype": "^3.2.2" } }, "sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw=="],
+
+    "@types/react-dom": ["@types/react-dom@18.3.7", "", { "peerDependencies": { "@types/react": "^18.0.0" } }, "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ=="],
+
     "@types/retry": ["@types/retry@0.12.0", "", {}, "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="],
 
     "@types/send": ["@types/send@1.2.1", "", { "dependencies": { "@types/node": "*" } }, "sha512-arsCikDvlU99zl1g69TcAB3mzZPpxgw0UQnaHeC1Nwb015xp8bknZv5rIfri9xTOcMuaVgvabfIRA7PSZVuZIQ=="],
@@ -319,6 +327,8 @@
 
     "cookie-signature": ["cookie-signature@1.0.7", "", {}, "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA=="],
 
+    "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
+
     "data-uri-to-buffer": ["data-uri-to-buffer@4.0.1", "", {}, "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A=="],
 
     "debug": ["debug@2.6.9", "", { "dependencies": { "ms": "2.0.0" } }, "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="],
@@ -453,6 +463,8 @@
 
     "long": ["long@5.3.2", "", {}, "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA=="],
 
+    "loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
+
     "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
 
     "lucide-react": ["lucide-react@0.546.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Z94u6fKT43lKeYHiVyvyR8fT7pwCzDu7RyMPpTvh054+xahSgj4HFQ+NmflvzdXsoAjYGdCguGaFKYuvq0ThCQ=="],
@@ -521,9 +533,9 @@
 
     "raw-body": ["raw-body@2.5.3", "", { "dependencies": { "bytes": "~3.1.2", "http-errors": "~2.0.1", "iconv-lite": "~0.4.24", "unpipe": "~1.0.0" } }, "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA=="],
 
-    "react": ["react@19.2.8", "", {}, "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw=="],
+    "react": ["react@18.3.1", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ=="],
 
-    "react-dom": ["react-dom@19.2.8", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.8" } }, "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ=="],
+    "react-dom": ["react-dom@18.3.1", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" }, "peerDependencies": { "react": "^18.3.1" } }, "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw=="],
 
     "react-refresh": ["react-refresh@0.18.0", "", {}, "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw=="],
 
@@ -537,7 +549,7 @@
 
     "safer-buffer": ["safer-buffer@2.1.2", "", {}, "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="],
 
-    "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
+    "scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
 
     "semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
 

index.html

@@ -1,18 +1,17 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>School Notes Archives</title>
-    <meta name="description" content="Secure academic notes repository with 9 subject folders, study group chat, document search, dark mode, and admin controls." />
-    <meta property="og:title" content="School Notes Archives" />
-    <meta property="og:description" content="Secure academic notes repository with 9 subject folders, study group chat, document search, dark mode, and admin controls." />
-    <meta property="og:type" content="website" />
-    <meta name="twitter:card" content="summary_large_image" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
-
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>School Notes Archives</title>
+    <meta name="description" content="Secure academic notes repository with 9 subject folders, study group chat, document search, dark mode, and admin controls." />
+    <meta property="og:title" content="School Notes Archives" />
+    <meta property="og:description" content="Secure academic notes repository with 9 subject folders, study group chat, document search, dark mode, and admin controls." />
+    <meta property="og:type" content="website" />
+    <meta name="twitter:card" content="summary_large_image" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -14,14 +14,16 @@
   "dependencies": {
     "@google/genai": "^2.4.0",
     "@tailwindcss/vite": "^4.1.14",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^5.0.4",
     "dotenv": "^17.2.3",
     "express": "^4.21.2",
     "lucide-react": "^0.546.0",
     "motion": "^12.23.24",
     "multer": "^2.3.0",
-    "react": "^19.0.1",
-    "react-dom": "^19.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "vite": "^6.2.3"
   },
   "devDependencies": {

server.ts

@@ -21,6 +21,7 @@ const CHATS_FILE = path.join(ARCHIVES_DIR, 'chats.json');
 const NOTIFICATIONS_FILE = path.join(ARCHIVES_DIR, 'notifications.json');
 const GROUPS_FILE = path.join(ARCHIVES_DIR, 'groups.json');
 const CALLS_FILE = path.join(ARCHIVES_DIR, 'calls.json');
+const SESSIONS_FILE = path.join(ARCHIVES_DIR, 'sessions.json');
 
 // Ensure directories exist
 function ensureDirsAndFiles() {
@@ -135,6 +136,10 @@ function ensureDirsAndFiles() {
   if (!fs.existsSync(CALLS_FILE)) {
     fs.writeFileSync(CALLS_FILE, JSON.stringify([], null, 2), 'utf-8');
   }
+
+  if (!fs.existsSync(SESSIONS_FILE)) {
+    fs.writeFileSync(SESSIONS_FILE, JSON.stringify({}, null, 2), 'utf-8');
+  }
 }
 
 ensureDirsAndFiles();
@@ -158,12 +163,17 @@ function writeJson(filePath: string, data: any) {
   }
 }
 
-// Memory session tokens
-const sessionTokens = new Map<string, string>(); // token -> username
+// Persistent session tokens
+function getUsernameForToken(token: string): string | undefined {
+  const sessions = readJson<Record<string, string>>(SESSIONS_FILE, {});
+  return sessions[token];
+}
 
 function generateToken(username: string): string {
   const token = crypto.randomBytes(24).toString('hex');
-  sessionTokens.set(token, username);
+  const sessions = readJson<Record<string, string>>(SESSIONS_FILE, {});
+  sessions[token] = username;
+  writeJson(SESSIONS_FILE, sessions);
   return token;
 }
 
@@ -177,7 +187,7 @@ function authMiddleware(req: Request, res: Response, next: NextFunction) {
     return;
   }
 
-  const username = sessionTokens.get(token);
+  const username = getUsernameForToken(token);
   if (!username) {
     res.status(401).json({ error: 'Invalid or expired session token' });
     return;
@@ -656,9 +666,9 @@ app.post('/api/calls', authMiddleware, (req: Request, res: Response) => {
 
   const calls = readJson<any[]>(CALLS_FILE, []);
   const today = new Date().toISOString().split('T')[0];
-  const calledToday = calls.some((call) => call.caller.toLowerCase() === currentUser.username.toLowerCase() && callDate(call.startedAt) === today);
-  if (calledToday) {
-    res.status(400).json({ error: 'You can start only one voice call per day.' });
+  const callsTodayCount = calls.filter((call) => call.caller.toLowerCase() === currentUser.username.toLowerCase() && callDate(call.startedAt) === today).length;
+  if (callsTodayCount >= 3) {
+    res.status(400).json({ error: 'You can start a maximum of 3 voice calls per day.' });
     return;
   }
 
@@ -761,8 +771,9 @@ app.post('/api/chats/upload-file', authMiddleware, upload.single('file'), (req:
   }
 
   const ext = path.extname(file.originalname).toLowerCase();
-  const isVideo = file.mimetype.startsWith('video/') || ['.mp4', '.webm', '.mov', '.avi', '.mkv'].includes(ext);
-  const isAudio = file.mimetype.startsWith('audio/');
+  const audioExts = ['.webm', '.ogg', '.mp3', '.wav', '.m4a', '.aac', '.opus'];
+  const isAudio = file.mimetype.startsWith('audio/') || (audioExts.includes(ext) && !file.mimetype.startsWith('video/'));
+  const isVideo = (file.mimetype.startsWith('video/') || ['.mp4', '.mov', '.avi', '.mkv'].includes(ext)) && !isAudio;
   const mediaDuration = req.body.mediaDuration ? parseFloat(req.body.mediaDuration) : undefined;
 
   if (isVideo && mediaDuration !== undefined && (!Number.isFinite(mediaDuration) || mediaDuration > 10)) {
@@ -781,7 +792,7 @@ app.post('/api/chats/upload-file', authMiddleware, upload.single('file'), (req:
   if (file.mimetype.startsWith('image/')) fileType = 'image';
   else if (ext === '.docx' || file.mimetype.includes('wordprocessingml')) fileType = 'docx';
   else if (isVideo) fileType = 'video';
-  else if (file.mimetype.startsWith('audio/')) fileType = 'audio';
+  else if (isAudio) fileType = 'audio';
 
   const fileUrl = `/Archives/uploads/${file.filename}`;
 

src/App.tsx

@@ -64,6 +64,12 @@ export default function App() {
     };
 
     checkAutoLogin();
+
+    const handleUnauthorized = () => {
+      setCurrentUser(null);
+    };
+    window.addEventListener('auth_unauthorized', handleUnauthorized);
+    return () => window.removeEventListener('auth_unauthorized', handleUnauthorized);
   }, []);
 
   // Fetch Notes

src/components/ChatRoom.tsx

@@ -3,8 +3,6 @@ import {
   MessageSquare,
   Send,
   Paperclip,
-  Mic,
-  Square,
   Volume2,
   VolumeX,
   Users,
@@ -12,12 +10,20 @@ import {
   UserMinus,
   Video,
   FileText,
+  Image as ImageIcon,
   AlertCircle,
+  Clock,
   Sparkles,
   Download,
+  PhoneCall,
+  Shield,
+  Radio,
+  Mic,
+  X,
 } from 'lucide-react';
-import { User, ChatMessage, GroupInfo } from '../types';
+import { User, ChatMessage, GroupInfo, VoiceCall } from '../types';
 import { api } from '../services/api';
+import { VoiceMeetingModal } from './VoiceMeetingModal';
 
 interface ChatRoomProps {
   currentUser: User;
@@ -32,26 +38,182 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ currentUser, onRefreshUser }
   const [talkEffectEnabled, setTalkEffectEnabled] = useState(false);
   const [uploading, setUploading] = useState(false);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
-  const [isRecording, setIsRecording] = useState(false);
-  const [mediaDuration, setMediaDuration] = useState<number | null>(null);
+  const [videoDuration, setVideoDuration] = useState<number | null>(null);
   const [fileError, setFileError] = useState<string | null>(null);
   const [chatError, setChatError] = useState<string | null>(null);
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const lastReadChatIdRef = useRef<string | null>(null);
-  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
-  const recordedChunksRef = useRef<Blob[]>([]);
-  const recordingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const recordingStartedAtRef = useRef<number | null>(null);
 
   const joinedGroups = currentUser.joinedGroups || ['General Lobby'];
   const isJoined = joinedGroups.includes(selectedGroup);
 
+  // Voice Meetings State
+  const [activeCalls, setActiveCalls] = useState<VoiceCall[]>([]);
+  const [currentCall, setCurrentCall] = useState<VoiceCall | null>(null);
+  const [isMeetingModalOpen, setIsMeetingModalOpen] = useState(false);
+  const [callError, setCallError] = useState<string | null>(null);
+
+  // Voice Recording State
+  const [isRecording, setIsRecording] = useState(false);
+  const [recordingSeconds, setRecordingSeconds] = useState(0);
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const audioChunksRef = useRef<Blob[]>([]);
+  const recordingTimerRef = useRef<any>(null);
+  const mediaStreamRef = useRef<MediaStream | null>(null);
+
+  const startVoiceRecording = async () => {
+    setChatError(null);
+    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+      setChatError('Voice recording is not supported in this browser.');
+      return;
+    }
+
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      mediaStreamRef.current = stream;
+
+      let mimeType = 'audio/webm';
+      if (!MediaRecorder.isTypeSupported('audio/webm')) {
+        if (MediaRecorder.isTypeSupported('audio/mp4')) mimeType = 'audio/mp4';
+        else if (MediaRecorder.isTypeSupported('audio/ogg')) mimeType = 'audio/ogg';
+        else mimeType = '';
+      }
+
+      const options = mimeType ? { mimeType } : undefined;
+      const recorder = new MediaRecorder(stream, options);
+      mediaRecorderRef.current = recorder;
+      audioChunksRef.current = [];
+
+      recorder.ondataavailable = (event) => {
+        if (event.data && event.data.size > 0) {
+          audioChunksRef.current.push(event.data);
+        }
+      };
+
+      recorder.start(100);
+      setIsRecording(true);
+      setRecordingSeconds(0);
+
+      if (recordingTimerRef.current) clearInterval(recordingTimerRef.current);
+      recordingTimerRef.current = setInterval(() => {
+        setRecordingSeconds((prev) => prev + 1);
+      }, 1000);
+    } catch (err: any) {
+      console.warn('Microphone recording access attempt:', err?.name || err?.message || err);
+      const isDenied = err?.name === 'NotAllowedError' || err?.name === 'PermissionDeniedError' || err?.message?.includes('Permission denied') || err?.message?.includes('denied');
+      if (isDenied) {
+        setChatError('Microphone permission was denied by your browser. Please grant microphone access in your browser settings or click the paperclip icon to upload an audio file.');
+      } else {
+        setChatError('Unable to access microphone. Please check your browser audio settings.');
+      }
+    }
+  };
+
+  const stopAndSendVoiceRecording = () => {
+    if (!mediaRecorderRef.current || !isRecording) return;
+
+    const recorder = mediaRecorderRef.current;
+    recorder.onstop = async () => {
+      if (recordingTimerRef.current) clearInterval(recordingTimerRef.current);
+      if (mediaStreamRef.current) {
+        mediaStreamRef.current.getTracks().forEach((track) => track.stop());
+      }
+
+      const audioBlob = new Blob(audioChunksRef.current, {
+        type: recorder.mimeType || 'audio/webm',
+      });
+
+      if (audioBlob.size < 100) {
+        setChatError('Voice message was too short.');
+        setIsRecording(false);
+        setRecordingSeconds(0);
+        return;
+      }
+
+      const mime = recorder.mimeType || 'audio/webm';
+      const ext = mime.includes('mp4') ? 'm4a' : mime.includes('ogg') ? 'ogg' : 'webm';
+      const audioFile = new File([audioBlob], `voice-note-${Date.now()}.${ext}`, { type: mime });
+
+      setUploading(true);
+      setIsRecording(false);
+      setRecordingSeconds(0);
+
+      try {
+        const attachment = await api.uploadChatFile(audioFile);
+        await api.sendChatMessage(selectedGroup, '🎤 Voice Note', attachment);
+        const updated = await api.getChats(selectedGroup);
+        setChats(updated);
+      } catch (err: any) {
+        setChatError(err.message || 'Failed to send voice message');
+      } finally {
+        setUploading(false);
+      }
+    };
+
+    recorder.stop();
+  };
+
+  const cancelVoiceRecording = () => {
+    if (recordingTimerRef.current) clearInterval(recordingTimerRef.current);
+    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') {
+      mediaRecorderRef.current.stop();
+    }
+    if (mediaStreamRef.current) {
+      mediaStreamRef.current.getTracks().forEach((track) => track.stop());
+    }
+    setIsRecording(false);
+    setRecordingSeconds(0);
+    audioChunksRef.current = [];
+  };
+
   // Load Groups List
   useEffect(() => {
     api.getGroups().then((g) => setGroups(g)).catch(() => {});
   }, []);
 
+  // Poll Active Voice Calls for the group
+  const loadCalls = async () => {
+    try {
+      const calls = await api.getCalls(selectedGroup);
+      setActiveCalls(calls);
+    } catch (err) {
+      console.error('Calls polling error:', err);
+    }
+  };
+
+  useEffect(() => {
+    loadCalls();
+    const interval = setInterval(loadCalls, 2000);
+    return () => clearInterval(interval);
+  }, [selectedGroup]);
+
+  // Start Meeting
+  const handleStartCall = async (mode: 'public' | 'secret') => {
+    setCallError(null);
+    try {
+      const newCall = await api.createCall(selectedGroup, mode);
+      setCurrentCall(newCall);
+      setIsMeetingModalOpen(true);
+      await loadCalls();
+    } catch (err: any) {
+      setCallError(err.message || 'Failed to start meeting');
+    }
+  };
+
+  // Join Existing Meeting
+  const handleJoinCall = async (callId: string) => {
+    setCallError(null);
+    try {
+      const joined = await api.joinCall(callId);
+      setCurrentCall(joined);
+      setIsMeetingModalOpen(true);
+      await loadCalls();
+    } catch (err: any) {
+      setCallError(err.message || 'Failed to join meeting');
+    }
+  };
+
   // Poll Chats every 2 seconds for live real-time updates
   useEffect(() => {
     let isMounted = true;
@@ -98,97 +260,41 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ currentUser, onRefreshUser }
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   }, [chats]);
 
-  useEffect(() => {
-    return () => {
-      mediaRecorderRef.current?.stream.getTracks().forEach((track) => track.stop());
-      if (recordingTimerRef.current) clearTimeout(recordingTimerRef.current);
-    };
-  }, []);
-
+  // Handle File Selection with Video Duration Inspection
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setFileError(null);
-    setMediaDuration(null);
+    setVideoDuration(null);
 
     if (e.target.files && e.target.files[0]) {
       const file = e.target.files[0];
-      const isVideo = file.type.startsWith('video/');
-      const isAudio = file.type.startsWith('audio/');
-
-      if (isVideo || isAudio) {
-        const media = document.createElement(isVideo ? 'video' : 'audio');
-        const objectUrl = URL.createObjectURL(file);
-        media.preload = 'metadata';
-        media.src = objectUrl;
-        media.onloadedmetadata = () => {
-          URL.revokeObjectURL(objectUrl);
-          const duration = media.duration;
-          const maxDuration = isVideo ? 10 : 120;
-          if (!Number.isFinite(duration) || duration > maxDuration) {
-            setFileError(`${isVideo ? 'Video' : 'Audio'} is limited to ${maxDuration} seconds.`);
+      const isVid = file.type.startsWith('video/') || ['.mp4', '.webm', '.mov', '.avi'].some((ext) => file.name.toLowerCase().endsWith(ext));
+
+      if (isVid) {
+        // Load HTML5 Video element in memory to inspect duration
+        const videoEl = document.createElement('video');
+        videoEl.preload = 'metadata';
+        videoEl.src = URL.createObjectURL(file);
+
+        videoEl.onloadedmetadata = () => {
+          URL.revokeObjectURL(videoEl.src);
+          const dur = videoEl.duration;
+          setVideoDuration(dur);
+
+          if (dur > 5.5) {
+            setFileError(`Video Duration Exceeded! Uploaded video is ${dur.toFixed(1)} seconds. Strict limit is 5 seconds maximum.`);
             setSelectedFile(null);
             return;
           }
-          setMediaDuration(duration);
           setSelectedFile(file);
         };
-        media.onerror = () => {
-          URL.revokeObjectURL(objectUrl);
-          setFileError('Could not read the media file duration.');
+
+        videoEl.onerror = () => {
+          setFileError('Could not read video file duration.');
           setSelectedFile(null);
         };
-        return;
+      } else {
+        setSelectedFile(file);
       }
-      setSelectedFile(file);
-    }
-  };
-
-  const handleToggleRecording = async () => {
-    if (isRecording) {
-      mediaRecorderRef.current?.stop();
-      return;
-    }
-
-    if (!navigator.mediaDevices?.getUserMedia || !window.MediaRecorder) {
-      setFileError('Audio recording is not supported by this browser.');
-      return;
-    }
-
-    try {
-      setFileError(null);
-      setSelectedFile(null);
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      const recorder = new MediaRecorder(stream);
-      recordedChunksRef.current = [];
-      mediaRecorderRef.current = recorder;
-
-      recorder.ondataavailable = (event) => {
-        if (event.data.size > 0) recordedChunksRef.current.push(event.data);
-      };
-      recorder.onstop = () => {
-        const extension = recorder.mimeType.includes('ogg') ? 'ogg' : 'webm';
-        const recordedDuration = recordingStartedAtRef.current
-          ? (Date.now() - recordingStartedAtRef.current) / 1000
-          : undefined;
-        const audioFile = new File(
-          [new Blob(recordedChunksRef.current, { type: recorder.mimeType })],
-          `voice-message-${Date.now()}.${extension}`,
-          { type: recorder.mimeType },
-        );
-        setSelectedFile(audioFile);
-        setMediaDuration(recordedDuration ?? null);
-        stream.getTracks().forEach((track) => track.stop());
-        mediaRecorderRef.current = null;
-        recordingStartedAtRef.current = null;
-        recordingTimerRef.current = null;
-        setIsRecording(false);
-      };
-
-      recorder.start();
-      recordingStartedAtRef.current = Date.now();
-      setIsRecording(true);
-      recordingTimerRef.current = setTimeout(() => recorder.stop(), 120000);
-    } catch {
-      setFileError('Microphone access was denied or unavailable.');
     }
   };
 
@@ -204,14 +310,14 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ currentUser, onRefreshUser }
       let attachment = undefined;
 
       if (selectedFile) {
-        attachment = await api.uploadChatFile(selectedFile, mediaDuration || undefined);
+        attachment = await api.uploadChatFile(selectedFile, videoDuration || undefined);
       }
 
       await api.sendChatMessage(selectedGroup, messageText, attachment);
 
       setMessageText('');
       setSelectedFile(null);
-      setMediaDuration(null);
+      setVideoDuration(null);
 
       // Refresh chats
       const updated = await api.getChats(selectedGroup);
@@ -319,7 +425,30 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ currentUser, onRefreshUser }
             </p>
           </div>
 
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 flex-wrap">
+            {/* Start Live Meeting Buttons */}
+            {isJoined && (
+              <div className="flex items-center gap-1.5">
+                <button
+                  onClick={() => handleStartCall('public')}
+                  className="flex items-center gap-1 px-3 py-1.5 rounded-xl text-xs font-semibold bg-emerald-600 hover:bg-emerald-500 text-white shadow-md shadow-emerald-600/20 transition-all cursor-pointer"
+                  title="Start Google Meet-style Live Voice Meeting"
+                >
+                  <PhoneCall className="w-3.5 h-3.5" />
+                  <span>Start Live Meeting</span>
+                </button>
+
+                <button
+                  onClick={() => handleStartCall('secret')}
+                  className="flex items-center gap-1 px-3 py-1.5 rounded-xl text-xs font-semibold bg-amber-600 hover:bg-amber-500 text-white shadow-md shadow-amber-600/20 transition-all cursor-pointer"
+                  title="Start Secret Voice Call with Invited Members"
+                >
+                  <Shield className="w-3.5 h-3.5" />
+                  <span className="hidden sm:inline">Secret Call</span>
+                </button>
+              </div>
+            )}
+
             <button
               onClick={handleToggleJoinGroup}
               className={`flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-semibold transition-all cursor-pointer ${
@@ -341,12 +470,30 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ currentUser, onRefreshUser }
           </div>
         </div>
 
-        {/* Audio status banner */}
-        <div className="px-4 py-2 bg-emerald-50 dark:bg-emerald-950/40 border-b border-emerald-200/60 dark:border-emerald-900/40 text-[11px] text-emerald-800 dark:text-emerald-300 flex items-center justify-between">
+        {/* Active Voice Call Ongoing Banner */}
+        {activeCalls.length > 0 && (
+          <div className="px-4 py-2.5 bg-gradient-to-r from-emerald-600 to-teal-600 text-white text-xs font-semibold flex items-center justify-between border-b border-emerald-500 shadow-inner">
+            <div className="flex items-center gap-2">
+              <span className="w-2.5 h-2.5 rounded-full bg-white animate-ping shrink-0" />
+              <span>
+                <strong>Live Voice Meeting Active!</strong> Host: {activeCalls[0].caller} ({activeCalls[0].activeUsers.length} member{activeCalls[0].activeUsers.length === 1 ? '' : 's'} in call)
+              </span>
+            </div>
+            <button
+              onClick={() => handleJoinCall(activeCalls[0].id)}
+              className="px-3 py-1 rounded-lg bg-white text-emerald-800 hover:bg-emerald-50 font-bold text-xs shadow transition-all cursor-pointer flex items-center gap-1"
+            >
+              <PhoneCall className="w-3.5 h-3.5" /> Join Meeting
+            </button>
+          </div>
+        )}
+
+        {/* Video Limit Info Banner */}
+        <div className="px-4 py-2 bg-amber-50 dark:bg-amber-950/40 border-b border-amber-200/60 dark:border-amber-900/40 text-[11px] text-amber-800 dark:text-amber-300 flex items-center justify-between">
           <div className="flex items-center gap-1.5">
-            <Mic className="w-3.5 h-3.5 text-emerald-600 shrink-0" />
+            <Clock className="w-3.5 h-3.5 text-amber-600 shrink-0" />
             <span>
-              Audio up to <strong>2 minutes</strong> and video up to <strong>10 seconds</strong> are supported.
+              <strong>Video Rules:</strong> Max <strong>5 seconds</strong> video per upload &bull; Only <strong>1 video per user per day</strong>.
             </span>
           </div>
           {talkEffectEnabled && (
@@ -397,19 +544,29 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ currentUser, onRefreshUser }
                           />
                         )}
 
-                        {msg.attachment.fileType === 'audio' && (
-                          <audio src={msg.attachment.fileUrl} controls className="max-w-full" />
-                        )}
-
                         {msg.attachment.fileType === 'video' && (
                           <div className="space-y-1">
-                            <video src={msg.attachment.fileUrl} controls className="max-h-48 rounded-lg w-full bg-black" />
+                            <video
+                              src={msg.attachment.fileUrl}
+                              controls
+                              className="max-h-48 rounded-lg w-full bg-black"
+                            />
                             <p className="text-[10px] opacity-80 flex items-center gap-1">
-                              <Video className="w-3 h-3" /> 10-second limit
+                              <Video className="w-3 h-3" /> 5s Video limit checked
                             </p>
                           </div>
                         )}
 
+                        {msg.attachment.fileType === 'audio' && (
+                          <div className="space-y-1 mt-1">
+                            <audio
+                              src={msg.attachment.fileUrl}
+                              controls
+                              className="w-full max-w-[280px] h-9 rounded-lg"
+                            />
+                          </div>
+                        )}
+
                         {['docx', 'other'].includes(msg.attachment.fileType) && (
                           <a
                             href={msg.attachment.fileUrl}
@@ -440,15 +597,16 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ currentUser, onRefreshUser }
         </div>
 
         {/* Errors Alert */}
-        {(chatError || fileError) && (
+        {(chatError || fileError || callError) && (
           <div className="px-4 py-2 bg-rose-50 dark:bg-rose-950/80 text-rose-700 dark:text-rose-300 text-xs font-semibold flex items-center justify-between border-t border-rose-200 dark:border-rose-800">
             <span className="flex items-center gap-1.5">
-              <AlertCircle className="w-4 h-4 shrink-0" /> {chatError || fileError}
+              <AlertCircle className="w-4 h-4 shrink-0" /> {chatError || fileError || callError}
             </span>
             <button
               onClick={() => {
                 setChatError(null);
                 setFileError(null);
+                setCallError(null);
               }}
               className="text-xs hover:underline"
             >
@@ -463,16 +621,16 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ currentUser, onRefreshUser }
             <div className="flex items-center gap-2 truncate">
               <Paperclip className="w-4 h-4 text-indigo-500 shrink-0" />
               <span className="font-bold text-slate-800 dark:text-slate-200 truncate">{selectedFile.name}</span>
-              {mediaDuration !== null && (
-                <span className="text-[10px] text-indigo-700 dark:text-indigo-300 shrink-0">
-                  {mediaDuration.toFixed(1)}s
+              {videoDuration && (
+                <span className="px-1.5 py-0.5 rounded bg-indigo-200 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 text-[10px] font-bold">
+                  {videoDuration.toFixed(1)}s Video
                 </span>
               )}
             </div>
             <button
               onClick={() => {
                 setSelectedFile(null);
-                setMediaDuration(null);
+                setVideoDuration(null);
               }}
               className="text-rose-500 hover:underline text-xs"
             >
@@ -481,49 +639,108 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ currentUser, onRefreshUser }
           </div>
         )}
 
-        {/* Input Bar */}
-        <form onSubmit={handleSendMessage} className="p-3 border-t border-slate-200 dark:border-slate-800 flex items-center gap-2 bg-white dark:bg-slate-900">
-          <label className="p-2.5 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-300 cursor-pointer transition-colors">
-            <Paperclip className="w-4 h-4" />
-            <input type="file" accept="audio/*,video/*,image/*,.docx" onChange={handleFileChange} className="hidden" />
-          </label>
-
-          <button
-            type="button"
-            onClick={handleToggleRecording}
-            disabled={uploading || !isJoined}
-            title={isRecording ? 'Stop recording' : 'Record audio'}
-            className={`p-2.5 rounded-xl transition-colors disabled:opacity-40 ${
-              isRecording
-                ? 'bg-rose-600 text-white hover:bg-rose-500'
-                : 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700'
-            }`}
-          >
-            {isRecording ? <Square className="w-4 h-4" /> : <Mic className="w-4 h-4" />}
-          </button>
+        {/* Input Bar & Voice Recorder */}
+        {isRecording ? (
+          <div className="p-3 border-t border-slate-200 dark:border-slate-800 flex items-center justify-between gap-3 bg-rose-50/60 dark:bg-rose-950/40">
+            <div className="flex items-center gap-2.5">
+              <span className="relative flex h-3 w-3">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-3 w-3 bg-rose-500"></span>
+              </span>
+              <Mic className="w-4 h-4 text-rose-600 dark:text-rose-400 animate-pulse" />
+              <span className="font-mono text-xs font-extrabold text-rose-600 dark:text-rose-400">
+                {Math.floor(recordingSeconds / 60)
+                  .toString()
+                  .padStart(2, '0')}
+                :
+                {(recordingSeconds % 60).toString().padStart(2, '0')}
+              </span>
+              <span className="text-xs text-slate-600 dark:text-slate-300 font-medium hidden sm:inline">
+                Recording voice note...
+              </span>
+            </div>
 
-          <input
-            type="text"
-            value={messageText}
-            onChange={(e) => setMessageText(e.target.value)}
-            placeholder={isJoined ? `Message #${selectedGroup}...` : `Join #${selectedGroup} to participate in chat`}
-            disabled={!isJoined}
-            className="flex-1 px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/80 text-slate-900 dark:text-slate-100 text-xs sm:text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50"
-          />
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={cancelVoiceRecording}
+                className="p-2 rounded-xl bg-slate-200 hover:bg-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 text-xs font-semibold flex items-center gap-1 transition-all cursor-pointer"
+                title="Discard Recording"
+              >
+                <X className="w-4 h-4" />
+                <span className="hidden sm:inline">Cancel</span>
+              </button>
 
-          <button
-            type="submit"
-            disabled={uploading || (!messageText.trim() && !selectedFile) || !isJoined}
-            className="p-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-semibold text-xs shadow-md shadow-indigo-600/20 disabled:opacity-40 transition-all cursor-pointer"
-          >
-            {uploading ? (
-              <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-            ) : (
-              <Send className="w-4 h-4" />
+              <button
+                type="button"
+                onClick={stopAndSendVoiceRecording}
+                disabled={uploading}
+                className="p-2 px-3.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-semibold flex items-center gap-1.5 shadow-md shadow-emerald-600/20 transition-all cursor-pointer disabled:opacity-50"
+                title="Send Voice Note"
+              >
+                {uploading ? (
+                  <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                ) : (
+                  <>
+                    <Send className="w-3.5 h-3.5" />
+                    <span>Send Voice Note</span>
+                  </>
+                )}
+              </button>
+            </div>
+          </div>
+        ) : (
+          <form onSubmit={handleSendMessage} className="p-3 border-t border-slate-200 dark:border-slate-800 flex items-center gap-2 bg-white dark:bg-slate-900">
+            <label className="p-2.5 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-300 cursor-pointer transition-colors" title="Attach file">
+              <Paperclip className="w-4 h-4" />
+              <input type="file" onChange={handleFileChange} className="hidden" />
+            </label>
+
+            {isJoined && (
+              <button
+                type="button"
+                onClick={startVoiceRecording}
+                className="p-2.5 rounded-xl bg-indigo-50 hover:bg-indigo-100 dark:bg-indigo-950/60 dark:hover:bg-indigo-900/80 text-indigo-600 dark:text-indigo-400 transition-colors cursor-pointer"
+                title="Record & Send Voice Message"
+              >
+                <Mic className="w-4 h-4" />
+              </button>
             )}
-          </button>
-        </form>
+
+            <input
+              type="text"
+              value={messageText}
+              onChange={(e) => setMessageText(e.target.value)}
+              placeholder={isJoined ? `Message #${selectedGroup}...` : `Join #${selectedGroup} to participate in chat`}
+              disabled={!isJoined}
+              className="flex-1 px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/80 text-slate-900 dark:text-slate-100 text-xs sm:text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50"
+            />
+
+            <button
+              type="submit"
+              disabled={uploading || (!messageText.trim() && !selectedFile) || !isJoined}
+              className="p-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-semibold text-xs shadow-md shadow-indigo-600/20 disabled:opacity-40 transition-all cursor-pointer"
+            >
+              {uploading ? (
+                <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+              ) : (
+                <Send className="w-4 h-4" />
+              )}
+            </button>
+          </form>
+        )}
       </div>
+
+      {/* Google Meet Style Voice Meeting Modal */}
+      {isMeetingModalOpen && currentCall && (
+        <VoiceMeetingModal
+          isOpen={isMeetingModalOpen}
+          onClose={() => setIsMeetingModalOpen(false)}
+          currentUser={currentUser}
+          call={currentCall}
+          onRefreshCalls={loadCalls}
+        />
+      )}
     </div>
   );
 };

src/components/NotesView.tsx

@@ -48,7 +48,6 @@ export const NotesView: React.FC<NotesViewProps> = ({
     setDeletingId(noteId);
     try {
       await onDeleteNote(noteId);
-      setSelectedImage((selected) => (selected?.id === noteId ? null : selected));
     } finally {
       setDeletingId(null);
     }
@@ -62,6 +61,13 @@ export const NotesView: React.FC<NotesViewProps> = ({
 
   return (
     <div className="space-y-4">
+      {/* Header Info */}
+      <div className="flex items-center justify-between">
+        <h3 className="font-bold text-sm text-slate-800 dark:text-slate-200">
+          Archived Documents {searchQuery ? `(Search: "${searchQuery}")` : ''} ({notes.length})
+        </h3>
+      </div>
+
       {/* Grid of Notes */}
       {notes.length === 0 ? (
         <div className="p-12 text-center bg-white dark:bg-slate-800/60 rounded-2xl border border-dashed border-slate-300 dark:border-slate-700">
@@ -181,19 +187,15 @@ export const NotesView: React.FC<NotesViewProps> = ({
 
                     {userCanDelete && (
                       <button
-                        type="button"
                         onClick={() => handleDelete(note.id)}
                         disabled={deletingId === note.id}
-                        className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-rose-600 dark:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-950/50 transition-colors text-xs font-semibold"
+                        className="p-1.5 rounded-lg text-rose-600 dark:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-950/50 transition-colors"
                         title="Delete this note"
                       >
                         {deletingId === note.id ? (
                           <div className="w-4 h-4 border-2 border-rose-500 border-t-transparent rounded-full animate-spin" />
                         ) : (
-                          <>
-                            <Trash2 className="w-4 h-4" />
-                            <span>Delete</span>
-                          </>
+                          <Trash2 className="w-4 h-4" />
                         )}
                       </button>
                     )}
@@ -240,21 +242,6 @@ export const NotesView: React.FC<NotesViewProps> = ({
               >
                 <Download className="w-4 h-4" /> Download Image
               </a>
-              {canDelete(selectedImage) && (
-                <button
-                  type="button"
-                  onClick={() => handleDelete(selectedImage.id)}
-                  disabled={deletingId === selectedImage.id}
-                  className="px-4 py-2 bg-rose-600 hover:bg-rose-500 disabled:opacity-60 text-white font-semibold text-xs rounded-xl flex items-center gap-1.5 shadow"
-                >
-                  {deletingId === selectedImage.id ? (
-                    <div className="w-4 h-4 border-2 border-white/50 border-t-white rounded-full animate-spin" />
-                  ) : (
-                    <Trash2 className="w-4 h-4" />
-                  )}
-                  Delete Image
-                </button>
-              )}
             </div>
           </div>
         </div>

src/components/VoiceMeetingModal.tsx

@@ -0,0 +1,785 @@
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  Mic,
+  MicOff,
+  Video as VideoIcon,
+  VideoOff,
+  Monitor,
+  PhoneOff,
+  Hand,
+  MessageSquare,
+  Users,
+  Shield,
+  Clock,
+  Sparkles,
+  Volume2,
+  X,
+  Send,
+  UserPlus,
+  AlertCircle,
+  Copy,
+  Check,
+} from 'lucide-react';
+import { User, VoiceCall, ChatUser } from '../types';
+import { api } from '../services/api';
+
+interface VoiceMeetingModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  currentUser: User;
+  call: VoiceCall;
+  onRefreshCalls?: () => void;
+}
+
+interface InCallMessage {
+  id: string;
+  sender: string;
+  text: string;
+  time: string;
+}
+
+export const VoiceMeetingModal: React.FC<VoiceMeetingModalProps> = ({
+  isOpen,
+  onClose,
+  currentUser,
+  call,
+  onRefreshCalls,
+}) => {
+  // Local state for controls
+  const [isMuted, setIsMuted] = useState(false);
+  const [isVideoOn, setIsVideoOn] = useState(false);
+  const [isScreenSharing, setIsScreenSharing] = useState(false);
+  const [handRaised, setHandRaised] = useState(false);
+  const [raisedHands, setRaisedHands] = useState<Record<string, boolean>>({});
+
+  // Active side panel: 'chat' | 'people' | null
+  const [activePanel, setActivePanel] = useState<'chat' | 'people' | null>(null);
+
+  // In-call text messages
+  const [inCallMessages, setInCallMessages] = useState<InCallMessage[]>([]);
+  const [chatInput, setChatInput] = useState('');
+
+  // Audio level monitoring
+  const [isSpeaking, setIsSpeaking] = useState(false);
+  const [speakingUsers, setSpeakingUsers] = useState<Record<string, boolean>>({});
+
+  // Call duration counter
+  const [secondsElapsed, setSecondsElapsed] = useState(0);
+
+  // Invite modal for secret call
+  const [showInviteModal, setShowInviteModal] = useState(false);
+  const [groupUsers, setGroupUsers] = useState<ChatUser[]>([]);
+  const [selectedInvites, setSelectedInvites] = useState<string[]>([]);
+  const [copySuccess, setCopySuccess] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  // Media streams refs
+  const localVideoRef = useRef<HTMLVideoElement | null>(null);
+  const localStreamRef = useRef<MediaStream | null>(null);
+  const screenStreamRef = useRef<MediaStream | null>(null);
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const analyserRef = useRef<AnalyserNode | null>(null);
+
+  // Active call participants refreshed from server
+  const [participants, setParticipants] = useState<string[]>(call.activeUsers || [currentUser.username]);
+
+  // Duration Timer
+  useEffect(() => {
+    const startTime = new Date(call.startedAt).getTime();
+    const updateTimer = () => {
+      const now = Date.now();
+      const diff = Math.floor((now - startTime) / 1000);
+      setSecondsElapsed(diff > 0 ? diff : 0);
+    };
+    updateTimer();
+    const interval = setInterval(updateTimer, 1000);
+    return () => clearInterval(interval);
+  }, [call.startedAt]);
+
+  // Format Duration string (HH:MM:SS or MM:SS)
+  const formatDuration = (totalSeconds: number) => {
+    const hrs = Math.floor(totalSeconds / 3600);
+    const mins = Math.floor((totalSeconds % 3600) / 60);
+    const secs = totalSeconds % 60;
+    const pad = (n: number) => n.toString().padStart(2, '0');
+    if (hrs > 0) {
+      return `${pad(hrs)}:${pad(mins)}:${pad(secs)}`;
+    }
+    return `${pad(mins)}:${pad(secs)}`;
+  };
+
+  // Poll call state & signals
+  useEffect(() => {
+    let isMounted = true;
+
+    const pollCallStatus = async () => {
+      try {
+        const calls = await api.getCalls(call.group);
+        if (!isMounted) return;
+        const current = calls.find((c) => c.id === call.id);
+        if (current) {
+          setParticipants(current.activeUsers || []);
+        }
+
+        // Fetch signals
+        const signals = await api.getCallSignals(call.id);
+        if (!isMounted) return;
+
+        for (const sig of signals) {
+          if (sig.type === 'hand_raise') {
+            setRaisedHands((prev) => ({ ...prev, [sig.from]: sig.data.raised }));
+          } else if (sig.type === 'in_call_chat') {
+            setInCallMessages((prev) => [
+              ...prev,
+              {
+                id: sig.id || `${Date.now()}-${Math.random()}`,
+                sender: sig.from,
+                text: sig.data.text,
+                time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+              },
+            ]);
+          } else if (sig.type === 'speaking') {
+            setSpeakingUsers((prev) => ({ ...prev, [sig.from]: sig.data.speaking }));
+          }
+        }
+      } catch (err) {
+        console.error('Call polling error:', err);
+      }
+    };
+
+    pollCallStatus();
+    const interval = setInterval(pollCallStatus, 1500);
+    return () => {
+      isMounted = false;
+      clearInterval(interval);
+    };
+  }, [call.id, call.group]);
+
+  // Initialize Microphone & Web Audio Analyzer for Live Speaking Indicator
+  useEffect(() => {
+    let animationFrameId: number;
+
+    async function initAudio() {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
+        localStreamRef.current = stream;
+
+        // AudioContext for level detection
+        const AudioCtx = window.AudioContext || (window as any).webkitAudioContext;
+        if (AudioCtx) {
+          const audioCtx = new AudioCtx();
+          audioContextRef.current = audioCtx;
+          const source = audioCtx.createMediaStreamSource(stream);
+          const analyser = audioCtx.createAnalyser();
+          analyser.fftSize = 256;
+          source.connect(analyser);
+          analyserRef.current = analyser;
+
+          const dataArray = new Uint8Array(analyser.frequencyBinCount);
+          const checkVolume = () => {
+            if (!analyserRef.current) return;
+            analyserRef.current.getByteFrequencyData(dataArray);
+            let sum = 0;
+            for (let i = 0; i < dataArray.length; i++) {
+              sum += dataArray[i];
+            }
+            const avg = sum / dataArray.length;
+            const speaking = avg > 15 && !isMuted;
+            setIsSpeaking(speaking);
+
+            // Broadcast speaking state periodically
+            if (speaking !== speakingUsers[currentUser.username]) {
+              setSpeakingUsers((prev) => ({ ...prev, [currentUser.username]: speaking }));
+              api.sendCallSignal(call.id, 'ALL', 'speaking', { speaking }).catch(() => {});
+            }
+
+            animationFrameId = requestAnimationFrame(checkVolume);
+          };
+          checkVolume();
+        }
+      } catch (err) {
+        console.warn('Microphone permission or WebAudio not available:', err);
+      }
+    }
+
+    initAudio();
+
+    return () => {
+      if (animationFrameId) cancelAnimationFrame(animationFrameId);
+      if (localStreamRef.current) {
+        localStreamRef.current.getTracks().forEach((track) => track.stop());
+      }
+      if (audioContextRef.current && audioContextRef.current.state !== 'closed') {
+        audioContextRef.current.close();
+      }
+    };
+  }, [call.id, currentUser.username]);
+
+  // Handle Camera Toggle
+  const toggleVideo = async () => {
+    if (isVideoOn) {
+      if (localVideoRef.current && localVideoRef.current.srcObject) {
+        const stream = localVideoRef.current.srcObject as MediaStream;
+        stream.getTracks().forEach((t) => t.stop());
+        localVideoRef.current.srcObject = null;
+      }
+      setIsVideoOn(false);
+    } else {
+      try {
+        const videoStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
+        if (localVideoRef.current) {
+          localVideoRef.current.srcObject = videoStream;
+        }
+        setIsVideoOn(true);
+      } catch (err) {
+        console.warn('Camera permission denied or unavailable:', err);
+        setErrorMessage('Camera access was denied or device is unavailable.');
+      }
+    }
+  };
+
+  // Handle Screen Share Toggle
+  const toggleScreenShare = async () => {
+    if (isScreenSharing) {
+      if (screenStreamRef.current) {
+        screenStreamRef.current.getTracks().forEach((t) => t.stop());
+        screenStreamRef.current = null;
+      }
+      setIsScreenSharing(false);
+    } else {
+      try {
+        const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
+        screenStreamRef.current = screenStream;
+        if (localVideoRef.current) {
+          localVideoRef.current.srcObject = screenStream;
+        }
+        setIsScreenSharing(true);
+        screenStream.getVideoTracks()[0].onended = () => {
+          setIsScreenSharing(false);
+        };
+      } catch (err) {
+        console.warn('Screen share cancelled or failed:', err);
+      }
+    }
+  };
+
+  // Handle Hand Raise
+  const toggleHandRaise = () => {
+    const nextState = !handRaised;
+    setHandRaised(nextState);
+    setRaisedHands((prev) => ({ ...prev, [currentUser.username]: nextState }));
+
+    // Send hand raise signal to call room
+    for (const p of participants) {
+      if (p.toLowerCase() !== currentUser.username.toLowerCase()) {
+        api.sendCallSignal(call.id, p, 'hand_raise', { raised: nextState }).catch(() => {});
+      }
+    }
+  };
+
+  // Send In-Call Message
+  const handleSendInCallMessage = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!chatInput.trim()) return;
+
+    const newMsg: InCallMessage = {
+      id: `${Date.now()}-${Math.random()}`,
+      sender: currentUser.username,
+      text: chatInput.trim(),
+      time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+    };
+
+    setInCallMessages((prev) => [...prev, newMsg]);
+    setChatInput('');
+
+    // Send to other active participants
+    for (const p of participants) {
+      if (p.toLowerCase() !== currentUser.username.toLowerCase()) {
+        api.sendCallSignal(call.id, p, 'in_call_chat', { text: newMsg.text }).catch(() => {});
+      }
+    }
+  };
+
+  // Handle Leaving Call
+  const handleLeaveCall = async () => {
+    try {
+      await api.leaveCall(call.id);
+      if (onRefreshCalls) onRefreshCalls();
+    } catch (err) {
+      console.error('Error leaving call:', err);
+    } finally {
+      onClose();
+    }
+  };
+
+  // Load Group Users for Invite Modal
+  const handleOpenInviteModal = async () => {
+    try {
+      const users = await api.getChatUsers(call.group);
+      setGroupUsers(users);
+      setShowInviteModal(true);
+    } catch (err) {
+      console.error('Failed to fetch group users for call invite:', err);
+    }
+  };
+
+  const handleCopyMeetingInfo = () => {
+    const info = `Join Live Study Meeting in ${call.group}! Host: ${call.caller}. Meeting ID: ${call.id}`;
+    navigator.clipboard.writeText(info);
+    setCopySuccess(true);
+    setTimeout(() => setCopySuccess(false), 2000);
+  };
+
+  // Calculate Grid layout CSS based on participant count
+  const getGridColsClass = (count: number) => {
+    if (count <= 1) return 'grid-cols-1 max-w-2xl';
+    if (count === 2) return 'grid-cols-1 sm:grid-cols-2 max-w-4xl';
+    if (count <= 4) return 'grid-cols-2 max-w-5xl';
+    return 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 max-w-6xl';
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 bg-slate-950 flex flex-col font-sans select-none overflow-hidden">
+      {/* Top Meeting Header */}
+      <div className="px-4 py-3 bg-slate-900/90 border-b border-slate-800 flex items-center justify-between z-10 shrink-0">
+        <div className="flex items-center gap-3 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="w-3 h-3 rounded-full bg-emerald-500 animate-pulse" />
+            <h2 className="font-bold text-sm sm:text-base text-white truncate">
+              {call.group} &bull; Live Study Meeting
+            </h2>
+          </div>
+
+          <span
+            className={`hidden sm:inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold ${
+              call.mode === 'secret'
+                ? 'bg-amber-950/80 text-amber-300 border border-amber-800/60'
+                : 'bg-indigo-950/80 text-indigo-300 border border-indigo-800/60'
+            }`}
+          >
+            <Shield className="w-3.5 h-3.5" />
+            {call.mode === 'secret' ? 'Secret Call' : 'Public Room'}
+          </span>
+
+          {/* Meeting Timer */}
+          <div className="flex items-center gap-1 px-2.5 py-1 rounded-lg bg-slate-800/80 text-slate-300 text-xs font-mono">
+            <Clock className="w-3.5 h-3.5 text-indigo-400" />
+            {formatDuration(secondsElapsed)}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {/* Copy Call Info */}
+          <button
+            onClick={handleCopyMeetingInfo}
+            className="p-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white text-xs font-semibold flex items-center gap-1.5 transition-colors cursor-pointer"
+            title="Copy Meeting Info"
+          >
+            {copySuccess ? (
+              <>
+                <Check className="w-4 h-4 text-emerald-400" />
+                <span className="hidden md:inline text-emerald-400">Copied</span>
+              </>
+            ) : (
+              <>
+                <Copy className="w-4 h-4" />
+                <span className="hidden md:inline">Share Info</span>
+              </>
+            )}
+          </button>
+
+          {/* Invite Button for Secret Call */}
+          {call.mode === 'secret' && (
+            <button
+              onClick={handleOpenInviteModal}
+              className="p-2 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-semibold flex items-center gap-1.5 transition-all shadow-md shadow-indigo-600/20 cursor-pointer"
+            >
+              <UserPlus className="w-4 h-4" />
+              <span className="hidden sm:inline">Invite Members</span>
+            </button>
+          )}
+
+          {/* Close / Minimalize Button */}
+          <button
+            onClick={handleLeaveCall}
+            className="p-2 rounded-xl text-slate-400 hover:text-white hover:bg-slate-800 transition-colors cursor-pointer"
+            title="Leave Meeting"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+
+      {/* Main Body Area: Participant Video Cards Grid + Side Panel */}
+      <div className="flex-1 flex overflow-hidden relative">
+        {/* Video / Cards Grid Area */}
+        <div className="flex-1 p-4 sm:p-6 overflow-y-auto flex items-center justify-center">
+          <div className={`w-full grid gap-4 ${getGridColsClass(participants.length)}`}>
+            {participants.map((username) => {
+              const isMe = username.toLowerCase() === currentUser.username.toLowerCase();
+              const userSpeaking = isMe ? isSpeaking : Boolean(speakingUsers[username]);
+              const userHand = Boolean(raisedHands[username]);
+
+              return (
+                <div
+                  key={username}
+                  className={`relative rounded-3xl bg-slate-900 border transition-all overflow-hidden flex flex-col items-center justify-center min-h-[220px] sm:min-h-[260px] p-6 shadow-2xl ${
+                    userSpeaking
+                      ? 'border-emerald-500 ring-2 ring-emerald-500/40'
+                      : 'border-slate-800 hover:border-slate-700'
+                  }`}
+                >
+                  {/* Camera Video View for Local User */}
+                  {isMe && (isVideoOn || isScreenSharing) ? (
+                    <video
+                      key={`video-stream-${username}`}
+                      ref={localVideoRef}
+                      autoPlay
+                      playsInline
+                      muted
+                      className="absolute inset-0 w-full h-full object-cover rounded-3xl"
+                    />
+                  ) : (
+                    /* Default Google Meet Avatar Card */
+                    <div key={`avatar-card-${username}`} className="flex flex-col items-center justify-center relative z-10">
+                      <div className="relative">
+                        {/* Audio Speaking Ripple Effect Ring */}
+                        {userSpeaking && (
+                          <div className="absolute -inset-3 rounded-full bg-emerald-500/30 animate-ping" />
+                        )}
+                        <div
+                          className={`w-20 h-20 sm:w-24 sm:h-24 rounded-full flex items-center justify-center text-2xl sm:text-3xl font-bold uppercase shadow-xl transition-transform ${
+                            userSpeaking
+                              ? 'bg-gradient-to-tr from-emerald-500 to-teal-400 text-white scale-105'
+                              : 'bg-indigo-600 text-white'
+                          }`}
+                        >
+                          {username.substring(0, 2)}
+                        </div>
+                      </div>
+
+                      <h3 className="mt-4 font-bold text-sm sm:text-base text-white flex items-center gap-1.5">
+                        {username}
+                        {isMe && <span className="text-xs text-indigo-400 font-normal">(You)</span>}
+                      </h3>
+                    </div>
+                  )}
+
+                  {/* Top Badges (Hand Raise / Speaking Indicator) */}
+                  <div className="absolute top-3 left-3 right-3 flex items-center justify-between z-20 pointer-events-none">
+                    {userHand && (
+                      <span className="flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-bold bg-amber-500 text-slate-950 shadow-lg animate-bounce">
+                        <Hand className="w-3.5 h-3.5 fill-current" /> Hand Raised
+                      </span>
+                    )}
+
+                    {userSpeaking && (
+                      <span className="flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold bg-emerald-500 text-slate-950 shadow-md">
+                        <Volume2 className="w-3.5 h-3.5" /> Speaking
+                      </span>
+                    )}
+                  </div>
+
+                  {/* Bottom Status Tag */}
+                  <div className="absolute bottom-3 left-3 right-3 flex items-center justify-between z-20 pointer-events-none">
+                    <div className="px-3 py-1 rounded-xl bg-slate-950/80 backdrop-blur-md border border-slate-800 text-xs text-white font-medium flex items-center gap-1.5">
+                      <span className="w-2 h-2 rounded-full bg-emerald-400" />
+                      {username}
+                    </div>
+
+                    <div className="p-1.5 rounded-xl bg-slate-950/80 backdrop-blur-md border border-slate-800 text-white">
+                      {isMe ? (
+                        isMuted ? (
+                          <MicOff className="w-4 h-4 text-rose-500" />
+                        ) : (
+                          <Mic className="w-4 h-4 text-emerald-400" />
+                        )
+                      ) : (
+                        <Mic className="w-4 h-4 text-slate-400" />
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Right Side Panel (In-call Chat or Participant Roster) */}
+        {activePanel && (
+          <div className="w-full sm:w-80 bg-slate-900 border-l border-slate-800 flex flex-col z-20">
+            {/* Panel Header */}
+            <div className="p-4 border-b border-slate-800 flex items-center justify-between">
+              <h3 className="font-bold text-sm text-white flex items-center gap-2">
+                {activePanel === 'chat' ? (
+                  <>
+                    <MessageSquare className="w-4 h-4 text-indigo-400" /> In-Call Messages
+                  </>
+                ) : (
+                  <>
+                    <Users className="w-4 h-4 text-indigo-400" /> Participants ({participants.length})
+                  </>
+                )}
+              </h3>
+              <button
+                onClick={() => setActivePanel(null)}
+                className="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+
+            {/* Panel Content */}
+            <div className="flex-1 overflow-y-auto p-4">
+              {activePanel === 'chat' ? (
+                <div className="space-y-3">
+                  {inCallMessages.length === 0 ? (
+                    <p className="text-center text-xs text-slate-500 py-8">
+                      Messages sent here can be seen only by people in this call.
+                    </p>
+                  ) : (
+                    inCallMessages.map((msg) => (
+                      <div key={msg.id} className="p-3 rounded-2xl bg-slate-800/80 text-xs space-y-1">
+                        <div className="flex items-center justify-between text-[10px] text-slate-400 font-semibold">
+                          <span className="text-indigo-300">{msg.sender}</span>
+                          <span>{msg.time}</span>
+                        </div>
+                        <p className="text-slate-100 whitespace-pre-wrap">{msg.text}</p>
+                      </div>
+                    ))
+                  )}
+                </div>
+              ) : (
+                /* Participants List */
+                <div className="space-y-2">
+                  {participants.map((p) => {
+                    const isMe = p.toLowerCase() === currentUser.username.toLowerCase();
+                    return (
+                      <div
+                        key={p}
+                        className="p-3 rounded-2xl bg-slate-800/60 border border-slate-800 flex items-center justify-between"
+                      >
+                        <div className="flex items-center gap-2.5">
+                          <div className="w-8 h-8 rounded-full bg-indigo-600 text-white font-bold text-xs flex items-center justify-center">
+                            {p.substring(0, 2).toUpperCase()}
+                          </div>
+                          <div>
+                            <p className="text-xs font-bold text-white flex items-center gap-1">
+                              {p} {isMe && <span className="text-[10px] text-indigo-400">(You)</span>}
+                            </p>
+                            <p className="text-[10px] text-slate-400">Active in Voice</p>
+                          </div>
+                        </div>
+
+                        <Mic className="w-4 h-4 text-emerald-400" />
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+
+            {/* In-Call Chat Input Form */}
+            {activePanel === 'chat' && (
+              <form onSubmit={handleSendInCallMessage} className="p-3 border-t border-slate-800 flex items-center gap-2">
+                <input
+                  type="text"
+                  value={chatInput}
+                  onChange={(e) => setChatInput(e.target.value)}
+                  placeholder="Send a message to everyone..."
+                  className="flex-1 px-3 py-2 rounded-xl bg-slate-800 border border-slate-700 text-xs text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                />
+                <button
+                  type="submit"
+                  disabled={!chatInput.trim()}
+                  className="p-2 rounded-xl bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white cursor-pointer"
+                >
+                  <Send className="w-4 h-4" />
+                </button>
+              </form>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Error Toast Alert */}
+      {errorMessage && (
+        <div className="px-4 py-2 bg-rose-950/90 text-rose-200 border-t border-rose-800 text-xs font-semibold flex items-center justify-between shrink-0">
+          <span className="flex items-center gap-1.5">
+            <AlertCircle className="w-4 h-4 text-rose-400" /> {errorMessage}
+          </span>
+          <button onClick={() => setErrorMessage(null)} className="hover:underline">
+            Dismiss
+          </button>
+        </div>
+      )}
+
+      {/* Bottom Google Meet Controls Bar */}
+      <div className="p-4 bg-slate-900 border-t border-slate-800 flex items-center justify-between shrink-0">
+        {/* Left: Meeting Info */}
+        <div className="hidden md:flex items-center gap-2 text-xs text-slate-400">
+          <span className="font-semibold text-white">{call.group}</span>
+          <span>&bull;</span>
+          <span>{participants.length} Active in Call</span>
+        </div>
+
+        {/* Center Toolbar Buttons */}
+        <div className="flex items-center gap-2 sm:gap-3 mx-auto md:mx-0">
+          {/* Mic Toggle */}
+          <button
+            onClick={() => setIsMuted(!isMuted)}
+            className={`p-3.5 sm:p-4 rounded-2xl transition-all cursor-pointer ${
+              isMuted
+                ? 'bg-rose-600 text-white hover:bg-rose-500 shadow-lg shadow-rose-600/30'
+                : 'bg-slate-800 text-white hover:bg-slate-700'
+            }`}
+            title={isMuted ? 'Unmute Microphone' : 'Mute Microphone'}
+          >
+            {isMuted ? <MicOff className="w-5 h-5" /> : <Mic className="w-5 h-5 text-emerald-400" />}
+          </button>
+
+          {/* Camera Toggle */}
+          <button
+            onClick={toggleVideo}
+            className={`p-3.5 sm:p-4 rounded-2xl transition-all cursor-pointer ${
+              isVideoOn
+                ? 'bg-indigo-600 text-white hover:bg-indigo-500 shadow-lg shadow-indigo-600/30'
+                : 'bg-slate-800 text-white hover:bg-slate-700'
+            }`}
+            title={isVideoOn ? 'Turn Off Camera' : 'Turn On Camera'}
+          >
+            {isVideoOn ? <VideoIcon className="w-5 h-5" /> : <VideoOff className="w-5 h-5" />}
+          </button>
+
+          {/* Screen Share Toggle */}
+          <button
+            onClick={toggleScreenShare}
+            className={`p-3.5 sm:p-4 rounded-2xl transition-all cursor-pointer ${
+              isScreenSharing
+                ? 'bg-emerald-600 text-white hover:bg-emerald-500'
+                : 'bg-slate-800 text-white hover:bg-slate-700'
+            }`}
+            title="Share Screen"
+          >
+            <Monitor className="w-5 h-5" />
+          </button>
+
+          {/* Hand Raise Toggle */}
+          <button
+            onClick={toggleHandRaise}
+            className={`p-3.5 sm:p-4 rounded-2xl transition-all cursor-pointer ${
+              handRaised
+                ? 'bg-amber-500 text-slate-950 hover:bg-amber-400 font-bold'
+                : 'bg-slate-800 text-white hover:bg-slate-700'
+            }`}
+            title="Raise Hand"
+          >
+            <Hand className="w-5 h-5" />
+          </button>
+
+          {/* End Call / Leave Meeting Button */}
+          <button
+            onClick={handleLeaveCall}
+            className="px-6 py-3.5 sm:py-4 rounded-2xl bg-rose-600 hover:bg-rose-500 text-white font-bold text-xs sm:text-sm flex items-center gap-2 shadow-lg shadow-rose-600/30 transition-all cursor-pointer"
+            title="Leave Call"
+          >
+            <PhoneOff className="w-5 h-5" />
+            <span className="hidden sm:inline">Leave Call</span>
+          </button>
+        </div>
+
+        {/* Right: Side Panel Toggle Buttons */}
+        <div className="flex items-center gap-2">
+          {/* Chat Panel Button */}
+          <button
+            onClick={() => setActivePanel(activePanel === 'chat' ? null : 'chat')}
+            className={`p-3 rounded-xl transition-colors cursor-pointer ${
+              activePanel === 'chat'
+                ? 'bg-indigo-600 text-white'
+                : 'bg-slate-800 text-slate-400 hover:text-white hover:bg-slate-700'
+            }`}
+            title="In-call Messages"
+          >
+            <MessageSquare className="w-5 h-5" />
+          </button>
+
+          {/* People / Participants Button */}
+          <button
+            onClick={() => setActivePanel(activePanel === 'people' ? null : 'people')}
+            className={`p-3 rounded-xl transition-colors cursor-pointer ${
+              activePanel === 'people'
+                ? 'bg-indigo-600 text-white'
+                : 'bg-slate-800 text-slate-400 hover:text-white hover:bg-slate-700'
+            }`}
+            title="Participants Roster"
+          >
+            <Users className="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+
+      {/* Secret Call Invite Modal */}
+      {showInviteModal && (
+        <div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
+          <div className="bg-slate-900 border border-slate-800 rounded-3xl p-6 w-full max-w-md space-y-4 text-white">
+            <div className="flex items-center justify-between border-b border-slate-800 pb-3">
+              <h3 className="font-bold text-base flex items-center gap-2">
+                <UserPlus className="w-5 h-5 text-indigo-400" /> Invite Members to Secret Call
+              </h3>
+              <button
+                onClick={() => setShowInviteModal(false)}
+                className="text-slate-400 hover:text-white"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            <p className="text-xs text-slate-400">
+              Secret calls are visible only to invited group members. Select students to invite:
+            </p>
+
+            <div className="max-h-60 overflow-y-auto space-y-2 pr-1">
+              {groupUsers.length === 0 ? (
+                <p className="text-xs text-slate-500 py-4 text-center">No other members in this group.</p>
+              ) : (
+                groupUsers.map((u) => {
+                  const isSelected = selectedInvites.includes(u.username);
+                  return (
+                    <button
+                      key={u.username}
+                      type="button"
+                      onClick={() => {
+                        if (isSelected) {
+                          setSelectedInvites(selectedInvites.filter((x) => x !== u.username));
+                        } else {
+                          setSelectedInvites([...selectedInvites, u.username]);
+                        }
+                      }}
+                      className={`w-full text-left p-3 rounded-xl border flex items-center justify-between text-xs transition-colors cursor-pointer ${
+                        isSelected
+                          ? 'bg-indigo-950 border-indigo-600 text-white'
+                          : 'bg-slate-800/60 border-slate-800 text-slate-300 hover:bg-slate-800'
+                      }`}
+                    >
+                      <span className="font-semibold">{u.username}</span>
+                      {isSelected && <Check className="w-4 h-4 text-indigo-400" />}
+                    </button>
+                  );
+                })
+              )}
+            </div>
+
+            <div className="flex items-center justify-end gap-2 pt-2 border-t border-slate-800">
+              <button
+                onClick={() => setShowInviteModal(false)}
+                className="px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-xs font-semibold text-slate-300"
+              >
+                Done
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

src/index.css

@@ -1,3 +1 @@
 @import "tailwindcss";
-
-@custom-variant dark (&:where(.dark, .dark *));

src/services/api.ts

@@ -1,4 +1,4 @@
-import { User, NoteItem, ChatMessage, AppNotification, GroupInfo } from '../types';
+import { User, NoteItem, ChatMessage, AppNotification, GroupInfo, VoiceCall, ChatUser } from '../types';
 
 const TOKEN_KEY = 'school_archive_token';
 const SAVED_USER_KEY = 'school_archive_saved_user';
@@ -46,6 +46,10 @@ async function request<T>(endpoint: string, options: RequestInit = {}): Promise<
   const data = await res.json();
 
   if (!res.ok) {
+    if (res.status === 401) {
+      clearStoredToken();
+      window.dispatchEvent(new Event('auth_unauthorized'));
+    }
     throw new Error(data.error || 'An error occurred while communicating with the server');
   }
 
@@ -169,11 +173,11 @@ export const api = {
     return data.chats;
   },
 
-  async uploadChatFile(file: File, mediaDuration?: number): Promise<any> {
+  async uploadChatFile(file: File, videoDuration?: number): Promise<any> {
     const formData = new FormData();
     formData.append('file', file);
-    if (mediaDuration !== undefined) {
-      formData.append('mediaDuration', mediaDuration.toString());
+    if (videoDuration !== undefined) {
+      formData.append('videoDuration', videoDuration.toString());
     }
 
     const data = await request<{ attachment: any }>('/api/chats/upload-file', {
@@ -200,4 +204,50 @@ export const api = {
   async markNotificationsRead(): Promise<void> {
     await request('/api/notifications/read', { method: 'POST' });
   },
+
+  // VOICE MEETINGS / CALLS
+  async getCalls(group?: string): Promise<VoiceCall[]> {
+    const query = group ? `?group=${encodeURIComponent(group)}` : '';
+    const data = await request<{ calls: VoiceCall[] }>(`/api/calls${query}`);
+    return data.calls;
+  },
+
+  async createCall(group: string, mode: 'public' | 'secret', invitedUsers: string[] = []): Promise<VoiceCall> {
+    const data = await request<{ call: VoiceCall }>('/api/calls', {
+      method: 'POST',
+      body: JSON.stringify({ group, mode, invitedUsers }),
+    });
+    return data.call;
+  },
+
+  async joinCall(callId: string): Promise<VoiceCall> {
+    const data = await request<{ call: VoiceCall }>(`/api/calls/${encodeURIComponent(callId)}/join`, {
+      method: 'POST',
+    });
+    return data.call;
+  },
+
+  async leaveCall(callId: string): Promise<void> {
+    await request(`/api/calls/${encodeURIComponent(callId)}/leave`, {
+      method: 'POST',
+    });
+  },
+
+  async sendCallSignal(callId: string, to: string, type: string, data: any): Promise<void> {
+    await request(`/api/calls/${encodeURIComponent(callId)}/signals`, {
+      method: 'POST',
+      body: JSON.stringify({ to, type, data }),
+    });
+  },
+
+  async getCallSignals(callId: string): Promise<any[]> {
+    const data = await request<{ signals: any[] }>(`/api/calls/${encodeURIComponent(callId)}/signals`);
+    return data.signals;
+  },
+
+  async getChatUsers(group: string): Promise<ChatUser[]> {
+    const query = group ? `?group=${encodeURIComponent(group)}` : '';
+    const data = await request<{ users: ChatUser[] }>(`/api/chat-users${query}`);
+    return data.users;
+  },
 };

src/types.ts

@@ -12,6 +12,7 @@ export interface User {
   permissions: UserPermissions;
   joinedGroups: string[];
   createdAt: string;
+  password?: string;
 }
 
 export interface SubjectFolder {
@@ -54,7 +55,7 @@ export interface ChatMessage {
     fileType: 'image' | 'docx' | 'video' | 'audio' | 'other';
     mimeType: string;
     size: number;
-    mediaDuration?: number;
+    videoDuration?: number;
   };
   timestamp: string;
 }
@@ -77,3 +78,24 @@ export interface GroupInfo {
   description: string;
   icon: string;
 }
+
+export interface CallParticipant {
+  username: string;
+  active: boolean;
+}
+
+export interface VoiceCall {
+  id: string;
+  group: string;
+  mode: 'public' | 'secret';
+  caller: string;
+  startedAt: string;
+  invitedUsers: string[];
+  activeUsers: string[];
+  participantUsers: CallParticipant[];
+}
+
+export interface ChatUser {
+  username: string;
+  active: boolean;
+}