Skip to content

Handle End room and Settings Modal Responsiveness #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
obrucheoghene merged 3 commits into from
Nov 25, 2025
Merged

Handle End room and Settings Modal Responsiveness #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a73524f
feat: handle end room
obrucheoghene Nov 25, 2025
61a4e02
style: make setting modal responsive
obrucheoghene Nov 25, 2025
1807abe
feat: handle end meeting
obrucheoghene Nov 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/components/modals/caution-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,11 @@ import { Dialog, DialogContent } from '../ui/dialog';
import { Button } from '../ui/button';
import { CautionType } from '@/types';
import { useCautionActions, useCautionActive } from '@/store/conf/hooks';
import { useSignaling } from '@/hooks/use-signaling';
import { Actions } from '@/types/actions';

const CautionModal = () => {
const { signalingService } = useSignaling();
const cautionActive = useCautionActive();
const cautionActions = useCautionActions();

Expand Down Expand Up @@ -36,7 +39,9 @@ const CautionModal = () => {
START_RECORDING: () => {},
STOP_RECORDING: () => {},
END_SESSION: () => {
window.location.reload();
signalingService?.sendMessage({
action: Actions.EndRoom,
});
},
REMOVE_PEER: () => {},
HIDE: () => {
Expand Down
26 changes: 16 additions & 10 deletions src/components/modals/settings-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const NotificationToggle: FC<NotificationItemProps> = ({
<div className="flex items-center justify-between p-4 bg-slate-800/30 rounded-lg hover:bg-slate-800/50 transition-colors">
<div className="flex items-center gap-3">
{icon}
<span className="text-white">{label}</span>
<span className="text-white text-sm md:text-base ">{label}</span>
</div>
<button
onClick={onChange}
Expand Down Expand Up @@ -78,7 +78,9 @@ const DeviceSettings: FC<{

return (
<div>
<h3 className="text-white text-xl font-semibold mb-8">Device Settings</h3>
<h3 className="text-white md:text-xl font-semibold mb-8">
Device Settings
</h3>

{/* Video */}
<div className="mb-8">
Expand Down Expand Up @@ -144,7 +146,9 @@ const NotificationsSettings = () => {
const settingsActions = useSettingsActions();
return (
<div>
<h3 className="text-white text-xl font-semibold mb-8">Notifications</h3>
<h3 className="text-white md:text-xl font-semibold mb-8">
Notifications
</h3>

<div className="space-y-4">
<NotificationToggle
Expand Down Expand Up @@ -196,14 +200,14 @@ interface TabButtonProps {
const TabButton: FC<TabButtonProps> = ({ isActive, onClick, icon, label }) => (
<button
onClick={onClick}
className={`w-full flex items-center gap-3 px-4 py-2 rounded-lg transition-colors ${
className={`w-full flex items-center justify-center md:justify-start gap-3 md:px-4 py-2 rounded-lg transition-colors ${
isActive
? 'bg-slate-800 text-white'
: 'text-slate-400 hover:text-slate-300'
}`}
>
{icon}
<span>{label}</span>
<span className=" hidden md:inline">{label}</span>
</button>
);

Expand Down Expand Up @@ -235,7 +239,7 @@ const MediaDeviceDropdown = ({
) : (
<Mic size={18} className="text-slate-400" />
)}
<span>
<span className="text-xs sm:text-sm md:text-base">
{devices
.find(device => device.deviceId === selectedDeviceId)
?.label.toString()}
Expand Down Expand Up @@ -275,11 +279,13 @@ const SettingsModal: FC = () => {

return (
<Dialog open={settingsOpen} onOpenChange={settingsAction.toggle}>
<DialogContent className="md:max-w-2xl lg:max-w-3xl p-0 gap-0 border-slate-800 max-h-[90%] h-[600px] bg-linear-to-br from-slate-950 via-slate-900 to-black">
<DialogContent className="w-full overflow-y-auto md:max-w-3xl p-0 gap-0 border-slate-800 max-h-[90%] h-[600px] bg-linear-to-br from-slate-950 via-slate-900 to-black">
<div className="flex h-full">
{/* Left Sidebar */}
<div className="w-64 border-r border-slate-800 p-6 flex flex-col">
<h2 className="text-white text-2xl font-semibold mb-8">Settings</h2>
<div className="w-16 md:w-64 border-r border-slate-800 p-3 md:p-6 flex flex-col">
<h2 className="text-white text-2xl font-semibold mb-8 ">
<span className="hidden md:flex"> Settings</span>
</h2>

<nav className="space-y-3 flex-1">
<TabButton
Expand All @@ -299,7 +305,7 @@ const SettingsModal: FC = () => {
</div>

{/* Right Content Area */}
<div className="flex-1 p-8 overflow-y-auto relative">
<div className="flex-1 px-4 py-8 md:p-8 overflow-y-auto relative">
{activeTab === 'device' && (
<DeviceSettings
micVolume={micVolume}
Expand Down
Loading