Handle network disconnection and reconnection

package.json

@@ -33,11 +33,13 @@
     "lucide-react": "^0.541.0",
     "mediasoup-client": "3.17.0",
     "mic-check": "^1.1.0",
+    "next-themes": "^0.4.6",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-hook-form": "^7.62.0",
     "react-router-dom": "^7.8.2",
     "socket.io-client": "^4.8.1",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.12",
     "uniqid": "^5.4.0",

src/app.tsx

@@ -1,21 +1,19 @@
-import { ToastContainer, ToastProvider } from './packages/toast';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import Home from './pages/home';
 import Room from './pages/room';
 import { ThemeProvider } from './providers/theme-provider';
+import { Toaster } from './components/ui/sonner';
 
 const App = () => {
   return (
     <ThemeProvider storageKey="vite-ui-theme">
-      <ToastProvider defaultPosition="top-right">
-        <BrowserRouter>
-          <Routes>
-            <Route path="" element={<Home />} />
-            <Route path="/:roomId" element={<Room />} />
-          </Routes>
-        </BrowserRouter>
-        <ToastContainer />
-      </ToastProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path="" element={<Home />} />
+          <Route path="/:roomId" element={<Room />} />
+        </Routes>
+      </BrowserRouter>
+      <Toaster />
     </ThemeProvider>
   );
 };

src/components/home/call-to-action.tsx

@@ -27,9 +27,9 @@ const CallToAction = () => {
         <div className="space-y-8">
           <Button
             onClick={openJoinPage}
-            className="bg-linear-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white border-0 px-16 py-6 text-lg font-light shadow-2xl hover:shadow-blue-500/25 transition-all duration-300"
+            className=" cursor-pointer bg-linear-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white border-0 px-16 py-6 text-lg font-light shadow-2xl hover:shadow-blue-500/25 transition-all duration-300"
           >
-            Get Started
+            Host a Meeting
             <ArrowRight className="w-6 h-6 ml-4" />
           </Button>
         </div>

src/components/home/footer.tsx

@@ -14,16 +14,31 @@ const Footer = () => {
           </div>
 
           <div className="flex items-center space-x-8 text-sm text-slate-400">
-            <a href="#" className="hover:text-white transition-colors">
+            <a
+              title="Coming soon"
+              href="#"
+              className="hover:text-white transition-colors"
+            >
               Documentation
             </a>
-            <a href="#" className="hover:text-white transition-colors">
+            <a
+              title="Coming soon"
+              href="#"
+              className="hover:text-white transition-colors"
+            >
               API
             </a>
-            <a href="#" className="hover:text-white transition-colors">
+            <a
+              title="Coming soon"
+              href="#"
+              className="hover:text-white transition-colors"
+            >
               Support
             </a>
-            <a href="#" className="hover:text-white transition-colors">
+            <a
+              href="https://github.com/softhon/mitsi-web"
+              className="hover:text-white transition-colors"
+            >
               GitHub
             </a>
           </div>

src/components/home/hero.tsx

@@ -23,7 +23,7 @@ const Hero = () => {
           <div className="space-y-6">
             <h1 className="text-6xl md:text-8xl lg:text-9xl font-extralight tracking-tighter leading-none">
               <span className="block text-white/90">The future of</span>
-              <span className="block bg-gradient-to-r from-blue-400 via-purple-400 to-indigo-400 bg-clip-text text-transparent font-light">
+              <span className="block bg-linear-to-r from-blue-400 via-purple-400 to-indigo-400 bg-clip-text text-transparent font-light">
                 meetings
               </span>
             </h1>
@@ -40,7 +40,7 @@ const Hero = () => {
           <div className="flex flex-col sm:flex-row gap-6 justify-center items-center pt-12">
             <Button
               size="lg"
-              className="group bg-linear-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white border-0 px-12 py-6 text-lg font-light shadow-2xl hover:shadow-blue-500/25 transition-all duration-300"
+              className=" cursor-pointer group bg-linear-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white border-0 px-12 py-6 text-lg font-light shadow-2xl hover:shadow-blue-500/25 transition-all duration-300"
               onClick={openJoinPage}
             >
               <Play className="w-5 h-5 mr-3 group-hover:scale-110 transition-transform" />

src/components/home/navbar.tsx

@@ -33,26 +33,29 @@ const Navbar = () => {
 
           <div className="hidden lg:flex items-center space-x-12">
             <a
-              href="#features"
+              title="Coming soon"
+              href="#"
               className="text-slate-300 hover:text-white transition-all duration-300 text-sm font-light tracking-wide"
             >
               Documentations
             </a>
             <a
-              href="#technology"
+              title="Coming soon"
+              href="#"
               className="text-slate-300 hover:text-white transition-all duration-300 text-sm font-light tracking-wide"
             >
               Projects
             </a>
             <a
-              href="#enterprise"
+              title="Coming soon"
+              href="#"
               className="text-slate-300 hover:text-white transition-all duration-300 text-sm font-light tracking-wide"
             >
               Community
             </a>
             <div className="h-6 w-px bg-slate-700" />
 
-            <a href="https://github.com/softhon" target="_blank">
+            <a href="https://github.com/softhon/mitsi-web" target="_blank">
               <Button
                 variant="ghost"
                 size="sm"
@@ -64,9 +67,9 @@ const Navbar = () => {
             </a>
             <Button
               onClick={openJoinPage}
-              className="bg-linear-to-r text-white from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 border-0 shadow-xl"
+              className=" cursor-pointer bg-linear-to-r text-white from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 border-0 shadow-xl"
             >
-              Get Started
+              Host a Meeting
             </Button>
           </div>
         </div>

src/components/room/chat/chat-container.tsx

@@ -33,7 +33,10 @@ const ChatContainer = () => {
             <ChevronRightIcon size={12} />
           </div>
         </div>
-        <div className=" h-12 flex items-center gap-2  bg-gray-700/40  p-2 rounded-md ">
+        <div
+          className=" h-12 flex items-center gap-2  bg-gray-700/40  p-2 rounded-md "
+          title="Coming soon"
+        >
           <input
             className=" flex-1 bg-transparent focus:outline-none border-none focus:border-none placeholder:text-gray-500 text-sm"
             placeholder="Send a message..."

src/components/room/display/index.tsx

@@ -5,8 +5,9 @@ import ScreenView from './screen-view';
 const Display = () => {
   return (
     <div
-      className={`${'fixed h-full inset-0  pt-10 pb-18 px-3 flex  flex-row w-full justify-between overflow-hidden '}`}
+      className={`${'fixed h-full inset-0  pt-4 pb-18 px-3 flex  flex-row w-full justify-between overflow-hidden '}`}
     >
+      {/* change padding to pt-10 */}
       {/* screen sharing */}
       <ScreenView />
       {/* peers grid */}

src/components/room/emoji.tsx

@@ -7,8 +7,9 @@ const Emoji = () => {
       variant="ghost"
       size="icon"
       className="w-12 h-12 rounded-xl text-white
-      bg-gradient-to-bl from-white/15 to-white/1  backdrop-blur-xl
+      bg-linear-to-bl from-white/15 to-white/1  backdrop-blur-xl
       "
+      title="Coming soon"
     >
       <Smile className="w-5 h-5" />
     </Button>

src/components/room/end.tsx

@@ -3,7 +3,7 @@ import { MoreVertical, PhoneOff } from 'lucide-react';
 
 const End = () => {
   const handleLeaveCall = () => {
-    console.log('Leaving call...');
+    window.location.reload();
   };
   return (
     <div className="flex items-center gap-1">

src/components/room/grid/my-tile.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { Mic, MicOff } from 'lucide-react';
 import type { Layout } from '@/types';
-import { getInitials } from '@/lib/utils';
+import { cn, getInitials } from '@/lib/utils';
 import {
   useCameraDeviceId,
   useCameraOn,
@@ -56,7 +56,14 @@ const MyTile: React.FC<PeerTileProps> = ({ layout }) => {
         )}
 
         {/* Mic Status */}
-        <div className="absolute top-2 right-2 z-10  p-1 rounded-full bg-black/50">
+        <div
+          className={cn(
+            'absolute top-2 right-2 z-10 p-1.5 rounded-full ',
+            micOn
+              ? 'bg-green-500/20 backdrop-blur-sm'
+              : 'bg-red-500/20 backdrop-blur-sm'
+          )}
+        >
           {micOn ? (
             <Mic className="w-4 h-4 text-green-400" />
           ) : (

src/components/room/grid/peer-tile.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { Mic, MicOff } from 'lucide-react';
 import type { Layout } from '@/types';
-import { getInitials } from '@/lib/utils';
+import { cn, getInitials } from '@/lib/utils';
 import { usePeerMediasById, usePeerOthersById } from '@/store/conf/hooks';
 import { useMedia } from '@/hooks/use-media';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
@@ -48,14 +48,21 @@ export const PeerTile: React.FC<PeerTileProps> = ({ peerId, layout }) => {
         ) : (
           <Avatar className=" w-24 h-24 ">
             {/* <AvatarImage src="https://github.com/shadcn.png" /> */}
-            <AvatarFallback className="text-white text-xl bg-gradient-to-bl from-white/15 to-white/1  backdrop-blur-x ">
+            <AvatarFallback className="text-white text-xl bg-linear-to-bl from-white/15 to-white/1  backdrop-blur-x ">
               {getInitials(peerData.name)}
             </AvatarFallback>
           </Avatar>
         )}
 
         {/* Mic Status */}
-        <div className="absolute top-2 right-2 z-10 p-1 rounded-full bg-black/50">
+        <div
+          className={cn(
+            'absolute top-2 right-2 z-10 p-1.5 rounded-full ',
+            media?.mic
+              ? 'bg-green-500/20 backdrop-blur-sm'
+              : 'bg-red-500/20 backdrop-blur-sm'
+          )}
+        >
           {media?.mic ? (
             <Mic className="w-4 h-4 text-green-400" />
           ) : (

src/components/room/hand.tsx

@@ -12,11 +12,12 @@ const Hand = () => {
       variant="ghost"
       size="icon"
       className={cn(
-        'w-12 h-12 rounded-xl transition-all duration-200 bg-gradient-to-bl text-white',
+        'w-12 h-12 rounded-xl transition-all duration-200 bg-linear-to-bl text-white',
         isHandRaised
-          ? 'bg-yellow-600 hover:bg-yellow-700 '
+          ? 'from-white/10 hover:from-white/15 '
           : ' from-white/15 to-white/1  backdrop-blur-xl'
       )}
+      title="Coming soon"
     >
       <HandIcon className="w-5 h-5" />
     </Button>

src/components/room/header.tsx

@@ -1,25 +1,13 @@
-import { Loader2 } from 'lucide-react';
-import { Badge } from '../ui/badge';
-
 const Header = () => {
   return (
-    <div className="flex items-center justify-between px-4 py-2  top-0 left-0 right-0 z-20">
-      {/* Left side - Meeting info */}
-      <div className="flex items-center gap-3">
-        <div className="flex items-center gap-2">
-          {/* <div className="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center"> */}
-          <Loader2 className="w-3 h-3 text-white " />
-          {/* </div>  */}
-          {/* <span className="text-white font-medium">Mitsi</span> */}
-        </div>
-      </div>
+    <div className="flex items-center justify-between px-4 py-0  top-0 left-0 right-0 z-20">
+      {/* <img src={Assets.logo} alt="Logo" className=" h-4" /> */}
 
-      {/* Right side - Recording indicator */}
       <div className="flex items-center ">
-        <Badge className="bg-red-600 hover:bg-red-700 text-white ">
+        {/* <Badge className="bg-red-600 hover:bg-red-700 text-white ">
           <div className="w-2 h-2 bg-white rounded-full mr-1 animate-pulse" />
           <span className=" text-xs">REC</span>
-        </Badge>
+        </Badge> */}
       </div>
     </div>
   );

src/components/room/join/join-camera-preview.tsx

@@ -35,18 +35,9 @@ const CameraPreview = () => {
           />
         ) : (
           <div className="w-full h-full flex items-center justify-center relative z-10">
-            {/* Enhanced avatar container with animated background */}
             <div className="relative">
-              {/* Animated glow rings */}
-              <div className="absolute inset-0 w-24 h-24 bg-linear-to-br from-purple-500/20 to-blue-600/20 rounded-full animate-pulse delay-1000 blur-md" />
-              <div className="absolute inset-2 w-20 h-20 bg-linear-to-tr from-blue-500/30 to-purple-600/30 rounded-full animate-pulse delay-1500 blur-sm" />
-
-              {/* Main avatar */}
-              <div className="relative w-20 h-20 bg-linear-to-br from-purple-500 to-blue-600 rounded-full flex items-center justify-center shadow-lg">
+              <div className="relative w-20 h-20 bg-linear-to-br from-white/15 to-white/1 rounded-full flex items-center justify-center shadow-lg">
                 <User className="w-8 h-8 text-white" />
-
-                {/* Floating particles around avatar */}
-                {/* <div className="absolute -top-2 -left-2 w-2 h-2 bg-blue-300/60 rounded-full animate-pulse delay-500" /> */}
               </div>
             </div>
           </div>
@@ -74,11 +65,6 @@ const CameraPreview = () => {
           </div>
         </div>
       </div>
-
-      {/* Floating elements around video container */}
-
-      {/* <div className="absolute top-1/2 -left-2 w-1 h-1 bg-indigo-300/50 rounded-full animate-pulse delay-900" /> */}
-      {/* <div className="absolute top-1/2 -right-2 w-1.5 h-1.5 bg-teal-400/35 rounded-full animate-pulse delay-1800" /> */}
     </div>
   );
 };

src/components/room/menu.tsx

@@ -7,8 +7,9 @@ const Menu = () => {
       variant="ghost"
       size="icon"
       className="w-12 h-12 rounded-xl  text-white
-      bg-gradient-to-tl from-white/15 to-white/1  backdrop-blur-xl
+      bg-linear-to-tl from-white/15 to-white/1  backdrop-blur-xl
       "
+      title="Coming soon"
     >
       <MenuIcon className="w-5 h-5" />
     </Button>