Improve settings dialog

frontend/src/ui/components/Dialog.tsx

@@ -38,5 +38,5 @@ export function MaterialDialog(props: FullDialogProps) {
         };
     }, [dialogRef.current, props.open, props.onOpenChange]);
 
-    return <mdui-dialog {...props} ref={dialogRef} />;
+    return <mdui-dialog {...props} ref={dialogRef} style={{ all: "revert" }} />;
 }

frontend/src/ui/components/chat/LeftPanel.tsx

@@ -4,21 +4,21 @@ import { useChat } from "../../hooks/useChat";
 import defaultAvatar from "../../../resources/images/default-avatar.png";
 import { useState } from "react";
 import { ProfileDialog } from "../profile/ProfileDialog";
+import { SettingsDialog } from "../settings/SettingsDialog";
 
 function BottomAppBar() {
-    const { openSettings } = useDialog();
-
-    const handleSettingsClick = () => {
-        openSettings();
-    };
+    const [settingsOpen, onSettingsOpenChange] = useState(false);
 
     return (
+        <>
             <mdui-bottom-app-bar>
-            <mdui-button-icon icon="settings--filled" id="settings-open" onClick={handleSettingsClick}></mdui-button-icon>
+                <mdui-button-icon icon="settings--filled" id="settings-open" onClick={() => onSettingsOpenChange(true)}></mdui-button-icon>
                 <mdui-button-icon icon="group_add--filled"></mdui-button-icon>
                 <div style={{ flexGrow: 1 }}></div>
                 <mdui-fab icon="edit--filled"></mdui-fab>
             </mdui-bottom-app-bar>
+            <SettingsDialog isOpen={settingsOpen} onOpenChange={onSettingsOpenChange} />
+        </>
     );
 }
 

frontend/src/ui/components/settings/SettingsDialog.tsx

@@ -1,9 +1,9 @@
 import { useState } from "react";
-import { useDialog } from "../../contexts/DialogContext";
 import { PRODUCT_NAME } from "../../../core/config";
+import type { DialogProps } from "../../../core/types";
+import { MaterialDialog } from "../Dialog";
 
-export function SettingsDialog() {
-    const { isSettingsOpen, closeSettings } = useDialog();
+export function SettingsDialog({ isOpen, onOpenChange }: DialogProps) {
     const [activePanel, setActivePanel] = useState("notifications-settings");
 
     const handlePanelChange = (panelId: string) => {
@@ -11,11 +11,11 @@ export function SettingsDialog() {
     };
 
     return (
-        <mdui-dialog id="settings-dialog" close-on-overlay-click close-on-esc fullscreen open={isSettingsOpen}>
+        <MaterialDialog close-on-overlay-click close-on-esc fullscreen open={isOpen} onOpenChange={onOpenChange}>
             <div className="fullscreen-wrapper">
                 <div id="settings-dialog-inner">
                     <div className="header">
-                        <mdui-button-icon icon="close" id="settings-close" onClick={closeSettings}></mdui-button-icon>
+                        <mdui-button-icon icon="close" id="settings-close" onClick={() => onOpenChange(false)}></mdui-button-icon>
                         <mdui-top-app-bar-title>Настройки</mdui-top-app-bar-title>
                     </div>
                     <div id="settings-menu">
@@ -148,6 +148,6 @@ export function SettingsDialog() {
                     </div>
                 </div>
             </div>
-        </mdui-dialog>
+        </MaterialDialog>
     );
 }

frontend/src/ui/screen/ChatScreen.tsx

@@ -1,21 +1,17 @@
 import { ChatInterface } from "../components/chat/ChatInterface";
 import { CropperDialog } from "../components/profile/CropperDialog";
-import { SettingsDialog } from "../components/settings/SettingsDialog";
 import { MessageContextMenu } from "../components/chat/MessageContextMenu";
 import { EditMessageDialog } from "../components/chat/EditMessageDialog";
 import { ReplyMessageDialog } from "../components/chat/ReplyMessageDialog";
-import { UserProfileDialog } from "../components/chat/UserProfileDialog";
 
 export default function ChatScreen() {
     return (
         <>
             <ChatInterface />
             <CropperDialog />
-            <SettingsDialog />
             <MessageContextMenu />
             <EditMessageDialog />
             <ReplyMessageDialog />
-            <UserProfileDialog isOpen={false} onOpenChange={() => {}} />
         </>
     );
 }