Setup

package.json

@@ -21,8 +21,10 @@
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tailwindcss/vite": "^4.1.12",

src/app.css

@@ -0,0 +1,31 @@
+.riseAndFade {
+  animation: riseAndFade 5s ease-in-out forwards;
+}
+
+/* Keyframe for rising and fading */
+@keyframes riseAndFade {
+  0% {
+    bottom: 0;
+    opacity: 1;
+  }
+
+  70% {
+    /* bottom: 70%;     */
+    opacity: 0.9;
+  }
+
+  80% {
+    /* bottom: 70%;     */
+    opacity: 0.6;
+  }
+
+  90% {
+    /* bottom: 70%;     */
+    opacity: 0.4;
+  }
+
+  100% {
+    bottom: 75%;
+    opacity: 0;
+  }
+}

src/assets/index.ts

@@ -2,8 +2,31 @@ import emptyChat from './empty-chat.svg';
 import mitsiUi from './mitsi-ui.jpg';
 import logo from './logo.svg';
 
+import raisingHand from './emojis/raising-hand.png';
+import thumbsUp from './emojis/thumbs-up.png';
+import clappingHand from './emojis/clapping-hand.png';
+import fire from './emojis/fire.png';
+import partyPopper from './emojis/party-popper.png';
+import huggingFace from './emojis/hugging-face.png';
+import redHeart from './emojis/red-heart.png';
+import tearsJoy from './emojis/tears-joy.png';
+import cryingFace from './emojis/crying-face.png';
+import thinkingFace from './emojis/thinking-face.png';
+
 export const Assets = {
   emptyChat,
   mitsiUi,
   logo,
+
+  // emoji
+  raisingHand,
+  thumbsUp,
+  clappingHand,
+  fire,
+  partyPopper,
+  huggingFace,
+  redHeart,
+  tearsJoy,
+  cryingFace,
+  thinkingFace,
 };

src/components/modals/caution-modal.tsx

@@ -0,0 +1,73 @@
+import { OctagonAlert } from 'lucide-react';
+import { Dialog, DialogContent } from '../ui/dialog';
+import { Button } from '../ui/button';
+import { CautionType } from '@/types';
+import { useCautionActions, useCautionActive } from '@/store/conf/hooks';
+
+const CautionModal = () => {
+  const cautionActive = useCautionActive();
+  const cautionActions = useCautionActions();
+
+  const heading: Record<CautionType, string> = {
+    START_RECORDING: 'Start Recording',
+    STOP_RECORDING: 'Stop Recording',
+    END_SESSION: 'End Session',
+    REMOVE_PEER: 'Remove Attendee',
+    HIDE: '',
+  };
+
+  const body: Record<CautionType, string> = {
+    START_RECORDING: 'Confirm you want to start recording',
+    STOP_RECORDING: 'Confirm you want to stop recording',
+    END_SESSION: 'This will end the meeting for everyone',
+    REMOVE_PEER: `Are you sure you want to remove peer`,
+    HIDE: '',
+  };
+
+  const okText: Record<CautionType, string> = {
+    START_RECORDING: 'Start',
+    STOP_RECORDING: 'Stop',
+    END_SESSION: 'End Session',
+    REMOVE_PEER: 'Remove',
+    HIDE: '',
+  };
+
+  const okAction: Record<CautionType, () => void> = {
+    START_RECORDING: () => {},
+    STOP_RECORDING: () => {},
+    END_SESSION: () => {
+      window.location.reload();
+    },
+    REMOVE_PEER: () => {},
+    HIDE: () => {
+      cautionActions.set(CautionType.Hide);
+    },
+  };
+
+  return (
+    <Dialog
+      open={cautionActive !== CautionType.Hide}
+      onOpenChange={() => cautionActions.set(CautionType.Hide)}
+    >
+      <DialogContent className=" w-sm bg-linear-to-br  from-slate-950 via-slate-900 to-black">
+        <div className=" flex flex-col gap-y-4">
+          <div className=" flex items-center text-red-500 gap-2">
+            <OctagonAlert />
+            <span className=" font-medium">{heading[cautionActive]}</span>
+          </div>
+
+          <p className=" text-sm">{body[cautionActive]}</p>
+
+          <Button
+            onClick={okAction[cautionActive]}
+            className=" bg-red-500 hover:bg-red-500/90 cursor-pointer text-white "
+          >
+            {okText[cautionActive]}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default CautionModal;