Create new Material components, redesign the chat UI, add security settings

frontend/src/pages/chat/ui/left/LeftPanel.tsx

@@ -4,29 +4,25 @@ import { SettingsDialog } from "./settings/SettingsDialog";
 import { UsernameSearch } from "./UsernameSearch";
 import { ChatTabs } from "./ChatTabs";
 import { ChatHeader } from "./ChatHeader";
+import { MaterialBottomAppBar, MaterialFab, MaterialIconButton } from "@/utils/material";
 
 function BottomAppBar() {
     const [settingsOpen, onSettingsOpenChange] = useState(false);
     const { logout } = useAppState();
 
-    const handleLogout = () => {
-        logout();
-    };
-
     return (
         <>
-            <mdui-bottom-app-bar>
-                <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>
+            <MaterialBottomAppBar>
+                <MaterialIconButton icon="settings--filled" id="settings-open" onClick={() => onSettingsOpenChange(true)} />
+                <MaterialIconButton icon="group_add--filled" />
                 <div style={{ flexGrow: 1 }}></div>
-                <mdui-button-icon
+                <MaterialIconButton
                     icon="logout--filled"
                     id="logout-btn"
-                    onClick={handleLogout}
-                    title="Выйти"
-                ></mdui-button-icon>
-                <mdui-fab icon="edit--filled"></mdui-fab>
-            </mdui-bottom-app-bar>
+                    onClick={logout}
+                    title="Выйти" />
+                <MaterialFab icon="edit--filled" />
+            </MaterialBottomAppBar>
             <SettingsDialog isOpen={settingsOpen} onOpenChange={onSettingsOpenChange} />
         </>
     );