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

frontend/src/core/components/MaterialTextField.tsx

@@ -1,9 +0,0 @@
-import type { TextField } from "mdui/components/text-field";
-
-interface TextFieldProps extends React.ComponentPropsWithoutRef<"mdui-text-field"> { 
-    ref?: React.Ref<TextField> 
-}
-
-export function MaterialTextField({ ref, ...props }: TextFieldProps) {
-    return <mdui-text-field autocomplete="off" ref={ref as React.Ref<HTMLElement>} {...props} />
-}

frontend/src/core/components/SearchBar.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef } from "react";
 import "./css/searchBar.scss";
+import { MaterialIcon } from "@/utils/material";
 
 interface SearchBarProps {
     placeholder: string;
@@ -57,9 +58,9 @@ export default function SearchBar({
     function renderIcon(icon: string | React.ReactNode | undefined, defaultIcon?: string) {
         if (icon === null) return null;
         if (!icon) {
-            return defaultIcon ? <mdui-icon name={defaultIcon}></mdui-icon> : null;
+            return defaultIcon ? <MaterialIcon name={defaultIcon} /> : null;
         } else if (typeof icon === 'string') {
-            return <mdui-icon name={icon}></mdui-icon>;
+            return <MaterialIcon name={icon} />;
         } else {
             return icon;
         }

frontend/src/core/components/StatusBadge.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import { checkUserSimilarity } from "@/core/api/profileApi";
 import { useAppState } from "@/pages/chat/state";
+import { MaterialIcon } from "@/utils/material";
 
 interface StatusBadgeProps {
     verified: boolean;
@@ -33,7 +34,7 @@ export function StatusBadge({ verified, userId, size = "small" }: StatusBadgePro
     if (verified) {
         return (
             <span className={`${className} verified`} title="Подтверждённый аккаунт">
-                <mdui-icon name="verified--filled" />
+                <MaterialIcon name="verified--filled" />
             </span>
         );
     }
@@ -41,7 +42,7 @@ export function StatusBadge({ verified, userId, size = "small" }: StatusBadgePro
     if (isSimilarToVerified) {
         return (
             <span className={`${className} warning`} title="Похож на подтверждённый аккаунт">
-                <mdui-icon name="warning" />
+                <MaterialIcon name="warning--filled" />
             </span>
         );
     }

frontend/src/core/components/VerifyButton.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { verifyUser } from "@/core/api/profileApi";
 import { useAppState } from "@/pages/chat/state";
+import { MaterialButton } from "@/utils/material";
 
 interface VerifyButtonProps {
     userId: number;
@@ -34,13 +35,13 @@ export function VerifyButton({ userId, verified, onVerificationChange }: VerifyB
     }
 
     return (
-        <mdui-button 
+        <MaterialButton 
             variant="filled"
             loading={isVerifying}
             onClick={handleVerifyToggle}
             title={verified ? "Снять подтверждение" : "Подтвердить аккаунт"}
         >
             {verified ? "Отменить подтверждение" : "Подтвердить"}
-        </mdui-button>
+        </MaterialButton>
     );
 }