Migrate to SCSS modules

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

@@ -4,6 +4,7 @@ import defaultAvatar from "@/images/default-avatar.png";
 import { useState } from "react";
 import { useAppState } from "@/pages/chat/state";
 import { MinimizedCallBar } from "@/pages/chat/ui/right/calls/MinimizedCallBar";
+import styles from "@/pages/chat/css/left-panel.module.scss";
 
 export function ChatHeader() {
     const { profileData } = useProfile();
@@ -25,9 +26,9 @@ export function ChatHeader() {
 
     return (
         <>
-            <header className="chat-header-left">
-                <div className="product-name">{PRODUCT_NAME}</div>
-                <div className="profile">
+            <header className={styles.chatHeaderLeft}>
+                <div className={styles.productName}>{PRODUCT_NAME}</div>
+                <div className={styles.profile}>
                     <a href="#" id="profile-open" onClick={handleProfileClick}>
                         <img
                             src={profilePictureUrl}

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

@@ -1,12 +1,13 @@
 import { useAppState, type ChatTabs } from "@/pages/chat/state";
 import { UnifiedChatsList } from "./UnifiedChatsList";
 import { MaterialTab, MaterialTabPanel, MaterialTabs } from "@/utils/material";
+import styles from "@/pages/chat/css/left-panel.module.scss";
 
 export function ChatTabs() {
     const { chat, setActiveTab } = useAppState();
 
     return (
-        <div className="chat-tabs">
+        <div className={styles.chatTabs}>
             <MaterialTabs
                 value={chat.activeTab}
                 full-width

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

@@ -5,6 +5,7 @@ import { UsernameSearch } from "./UsernameSearch";
 import { ChatTabs } from "./ChatTabs";
 import { ChatHeader } from "./ChatHeader";
 import { MaterialBottomAppBar, MaterialFab, MaterialIconButton } from "@/utils/material";
+import styles from "@/pages/chat/css/left-panel.module.scss";
 
 function BottomAppBar() {
     const [settingsOpen, onSettingsOpenChange] = useState(false);
@@ -30,9 +31,9 @@ function BottomAppBar() {
 
 export function LeftPanel() {
     return (
-        <div className="chat-list" id="chat-list">
+        <div className={styles.chatList} id="chat-list">
             <ChatHeader />
-            <div className="search-container">
+            <div className={styles.searchContainer}>
                 <UsernameSearch />
             </div>
             <ChatTabs />

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

@@ -11,6 +11,7 @@ import { onlineStatusManager } from "@/core/onlineStatusManager";
 import { OnlineIndicator } from "@/pages/chat/ui/right/OnlineIndicator";
 import defaultAvatar from "@/images/default-avatar.png";
 import { MaterialBadge, MaterialCircularProgress, MaterialList, MaterialListItem } from "@/utils/material";
+import styles from "@/pages/chat/css/left-panel.module.scss";
 
 interface PublicChat {
     id: string;
@@ -239,7 +240,7 @@ export function UnifiedChatsList() {
                             style={{ cursor: "pointer" }}
                         >
                             {formatPublicChatMessage(chat.id) && (
-                                <span slot="description" className="list-description">
+                                <span slot="description" className={styles.listDescription}>
                                     {formatPublicChatMessage(chat.id)}
                                 </span>
                             )}
@@ -272,7 +273,7 @@ export function UnifiedChatsList() {
                                     size="small"
                                 />
                             </div>
-                            <span slot="description" className="list-description">
+                            <span slot="description" className={styles.listDescription}>
                                 {chat.lastMessage || "Нет сообщений"}
                             </span>
                             <div slot="icon" style={{ position: "relative", width: "40px", height: "40px", display: "inline-block" }}>

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

@@ -1,13 +1,15 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useAppState } from "@/pages/chat/state";
 import { searchUsers, fetchUserPublicKey } from "@/core/api/dmApi";
 import { StatusBadge } from "@/core/components/StatusBadge";
 import type { User } from "@/core/types";
 import { onlineStatusManager } from "@/core/onlineStatusManager";
 import { OnlineIndicator } from "@/pages/chat/ui/right/OnlineIndicator";
+import { OnlineStatus } from "@/pages/chat/ui/right/OnlineStatus";
 import defaultAvatar from "@/images/default-avatar.png";
 import SearchBar from "@/core/components/SearchBar";
 import { MaterialCircularProgress, MaterialIconButton, MaterialList, MaterialListItem } from "@/utils/material";
+import styles from "@/pages/chat/css/left-panel.module.scss";
 
 interface SearchUser extends User {
     publicKey?: string | null;
@@ -15,12 +17,14 @@ interface SearchUser extends User {
 }
 
 export function UsernameSearch() {
-    const { user, switchToDM } = useAppState();
+    const { user, switchToDM, chat } = useAppState();
     const [searchQuery, setSearchQuery] = useState("");
     const [searchResults, setSearchResults] = useState<SearchUser[]>([]);
     const [isSearching, setIsSearching] = useState(false);
     const [isExpanded, setIsExpanded] = useState(false);
     const [debounceTimeout, setDebounceTimeout] = useState<NodeJS.Timeout | null>(null);
+    const switchingToUserIdRef = useRef<number | null>(null);
+    const previousSearchResultIdsRef = useRef<Set<number>>(new Set());
 
     // Debounced search
     useEffect(() => {
@@ -58,18 +62,45 @@ export function UsernameSearch() {
 
     // Subscribe to online status for all search results
     useEffect(() => {
-        // Subscribe to all search results
+        const activeDmUserId = chat.activeDm?.userId;
+        const switchingToUserId = switchingToUserIdRef.current;
+        const currentSearchResultIds = new Set(searchResults.map(u => u.id));
+        const previousSearchResultIds = new Set(previousSearchResultIdsRef.current);
+        
+        // Unsubscribe from users that were in previous results but not in current results
+        // (unless they're the active DM or we're switching to them)
+        previousSearchResultIds.forEach(userId => {
+            if (!currentSearchResultIds.has(userId) && 
+                userId !== activeDmUserId && 
+                userId !== switchingToUserId) {
+                onlineStatusManager.unsubscribe(userId);
+            }
+        });
+
+        // Subscribe to all current search results
         searchResults.forEach(searchUser => {
             onlineStatusManager.subscribe(searchUser.id);
         });
 
-        // Cleanup function to unsubscribe from all users
+        // Update previous results for next effect run
+        previousSearchResultIdsRef.current = currentSearchResultIds;
+
+        // Cleanup function - don't unsubscribe here as normal transitions are handled in effect body
+        // This only runs when component unmounts or when transitioning to empty results
         return () => {
-            searchResults.forEach(searchUser => {
-                onlineStatusManager.unsubscribe(searchUser.id);
-            });
+            // Note: Normal search result transitions are handled above in the effect body
+            // by comparing previous vs current. This cleanup only runs when the component
+            // unmounts or when the dependency changes, but we've already handled
+            // unsubscription in the effect body above, so this is mostly a no-op for normal transitions.
+            
+            // Clear the ref if the user is now the active DM (state has updated)
+            const finalSwitchingToUserId = switchingToUserIdRef.current;
+            const finalActiveDmUserId = chat.activeDm?.userId;
+            if (finalSwitchingToUserId && finalSwitchingToUserId === finalActiveDmUserId) {
+                switchingToUserIdRef.current = null;
+            }
         };
-    }, [searchResults]);
+    }, [searchResults, chat.activeDm?.userId]);
 
 
     async function handleUserClick(searchUser: SearchUser) {
@@ -84,6 +115,8 @@ export function UsernameSearch() {
             }
 
             if (publicKey) {
+                // Store the userId we're switching to so cleanup doesn't unsubscribe
+                switchingToUserIdRef.current = searchUser.id;
                 switchToDM({
                     userId: searchUser.id,
                     username: searchUser.username,
@@ -134,14 +167,14 @@ export function UsernameSearch() {
             ) : "search--outlined"}
         >
             {isSearching && (
-                <div className="search-loading">
+                <div className={styles.searchLoading}>
                     <MaterialCircularProgress />
                     <span>Поиск...</span>
                 </div>
             )}
 
             {!isSearching && searchQuery.length >= 2 && searchResults.length === 0 && (
-                <div className="search-empty">
+                <div className={styles.searchEmpty}>
                     <span>Пользователи не найдены</span>
                 </div>
             )}
@@ -155,30 +188,33 @@ export function UsernameSearch() {
                             onClick={() => handleUserClick(searchUser)}
                             style={{ cursor: "pointer" }}
                         >
-                            <div slot="headline" className="search-result-headline">
-                                {searchUser.username}
-                                <StatusBadge 
-                                    verified={searchUser.verified || false}
-                                    userId={searchUser.id}
-                                    size="small"
-                                />
-                            </div>
-                            <div slot="icon" style={{ position: "relative", width: "40px", height: "40px", display: "inline-block" }}>
-                                <img
-                                    src={searchUser.profile_picture || defaultAvatar}
-                                    alt={searchUser.username}
-                                    style={{
-                                        width: "40px",
-                                        height: "40px",
-                                        borderRadius: "50%",
-                                        objectFit: "cover",
-                                        display: "block"
-                                    }}
-                                    onError={(e) => {
-                                        e.target.src = defaultAvatar;
-                                    }}
-                                />
-                                <OnlineIndicator userId={searchUser.id} />
+                            <div slot="custom" className={styles.searchResultContainer}>
+                                <div className={styles.searchResult}>
+                                    <div className={styles.searchResultIcon}>
+                                        <img
+                                            src={searchUser.profile_picture || defaultAvatar}
+                                            alt={searchUser.username}
+                                            className={styles.searchResultIconImg}
+                                            onError={(e) => {
+                                                e.target.src = defaultAvatar;
+                                            }}
+                                        />
+                                        <OnlineIndicator userId={searchUser.id} />
+                                    </div>
+                                    <div className={styles.searchResultBody}>
+                                        <div className={styles.searchResultHeadline}>
+                                            {searchUser.username}
+                                            <StatusBadge 
+                                                verified={searchUser.verified || false}
+                                                userId={searchUser.id}
+                                                size="small"
+                                            />
+                                        </div>
+                                        <div className={styles.searchResultDescription}>
+                                            <OnlineStatus userId={searchUser.id} />
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                         </MaterialListItem>
                     ))}
@@ -186,7 +222,7 @@ export function UsernameSearch() {
             )}
 
             {!isSearching && searchQuery.length < 2 && (
-                <div className="search-hint">
+                <div className={styles.searchHint}>
                     <span>Введите минимум 2 символа для поиска</span>
                 </div>
             )}

frontend/src/pages/chat/ui/left/profile/CropperDialog.tsx

@@ -1,22 +0,0 @@
-import { MaterialButton, MaterialIconButton } from "@/utils/material";
-import "./css/cropper-dialog.scss";
-
-export function CropperDialog() {
-    return (
-        <mdui-dialog id="cropper-dialog" close-on-overlay-click close-on-esc>
-            <div className="cropper-dialog-content">
-                <div className="cropper-header">
-                    <h3>Обрезать фото профиля</h3>
-                    <MaterialIconButton icon="close" id="cropper-close" />
-                </div>
-                <div className="cropper-container">
-                    <div id="cropper-area"></div>
-                </div>
-                <div className="cropper-actions">
-                    <MaterialButton id="crop-cancel" variant="outlined">Отмена</MaterialButton>
-                    <MaterialButton id="crop-save">Сохранить</MaterialButton>
-                </div>
-            </div>
-        </mdui-dialog>
-    );
-}

frontend/src/pages/chat/ui/left/profile/ImageCropper.tsx

@@ -1,193 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import type { Size2D, Rect } from "@/core/types";
-import { MaterialButton } from "@/utils/material";
-
-interface ImageCropperProps {
-    onCrop: (croppedImageData: string) => void;
-    onCancel: () => void;
-    imageFile: File | null;
-}
-
-export function ImageCropper({ onCrop, onCancel, imageFile }: ImageCropperProps) {
-    const canvasRef = useRef<HTMLCanvasElement>(null);
-    const imageRef = useRef<HTMLImageElement>(null);
-    const [src, setSrc] = useState<string | undefined>(undefined);
-    const [isLoaded, setIsLoaded] = useState(false);
-    const [cropArea, setCropArea] = useState<Rect>({ x: 0, y: 0, width: 200, height: 200 });
-    const [isDragging, setIsDragging] = useState(false);
-    const [dragStart, setDragStart] = useState<Size2D>({ x: 0, y: 0 });
-
-    useEffect(() => {
-        if (imageFile) {
-            const reader = new FileReader();
-
-            function handleImageLoad() {
-                setIsLoaded(true);
-                // Initialize crop area to center of image
-                const img = imageRef.current;
-                if (img) {
-                    const size = Math.min(img.naturalWidth, img.naturalHeight) * 0.8;
-                    setCropArea({
-                        x: (img.naturalWidth - size) / 2,
-                        y: (img.naturalHeight - size) / 2,
-                        width: size,
-                        height: size
-                    });
-                }
-            }
-
-            function handleReaderLoad() {
-                if (imageRef.current) {
-                    setSrc(reader.result as string);
-                    imageRef.current.addEventListener("load", handleImageLoad);
-                }
-            }
-
-            reader.addEventListener("load", handleReaderLoad);
-            reader.readAsDataURL(imageFile);
-
-            return () => {
-                reader.abort();
-                reader.removeEventListener("load", handleReaderLoad);
-                imageRef.current?.removeEventListener("load", handleImageLoad);
-            }
-        }
-    }, [imageFile]);
-
-    function handleMouseDown(e: React.MouseEvent) {
-        if (!isLoaded) return;
-
-        const rect = canvasRef.current?.getBoundingClientRect();
-        if (!rect) return;
-
-        const x = e.clientX - rect.left;
-        const y = e.clientY - rect.top;
-
-        // Check if click is within crop area
-        if (x >= cropArea.x && x <= cropArea.x + cropArea.width &&
-            y >= cropArea.y && y <= cropArea.y + cropArea.height) {
-            setIsDragging(true);
-            setDragStart({ x: x - cropArea.x, y: y - cropArea.y });
-        }
-    };
-
-    function handleMouseMove(e: React.MouseEvent) {
-        const rect = canvasRef.current?.getBoundingClientRect();
-        if (isDragging && isLoaded && rect && imageRef.current) {
-            const x = e.clientX - rect.left;
-            const y = e.clientY - rect.top;
-
-            const newX = Math.max(
-                0,
-                Math.min(
-                    x - dragStart.x,
-                    imageRef.current.naturalWidth - cropArea.width
-                )
-            );
-            const newY = Math.max(
-                0,
-                Math.min(
-                    y - dragStart.y,
-                    imageRef.current.naturalHeight - cropArea.height
-                )
-            );
-
-            setCropArea(prev => ({ ...prev, x: newX, y: newY }));
-        }
-    };
-
-    function handleMouseUp() {
-        setIsDragging(false);
-    };
-
-    function handleCrop() {
-        if (!canvasRef.current || !imageRef.current || !isLoaded) return;
-
-        const canvas = canvasRef.current;
-        const ctx = canvas.getContext('2d');
-        if (!ctx) return;
-
-        // Set canvas size to crop area
-        canvas.width = cropArea.width;
-        canvas.height = cropArea.height;
-
-        // Draw cropped portion
-        ctx.drawImage(
-            imageRef.current,
-            cropArea.x, cropArea.y, cropArea.width, cropArea.height,
-            0, 0, cropArea.width, cropArea.height
-        );
-
-        // Convert to data URL
-        const croppedImageData = canvas.toDataURL('image/jpeg', 0.9);
-        onCrop(croppedImageData);
-    };
-
-    function drawCropArea() {
-        if (!canvasRef.current || !imageRef.current || !isLoaded) return;
-
-        const canvas = canvasRef.current;
-        const ctx = canvas.getContext('2d');
-        if (!ctx) return;
-
-        // Clear canvas
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-        // Draw image
-        ctx.drawImage(imageRef.current, 0, 0, canvas.width, canvas.height);
-
-        // Draw crop overlay
-        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-        // Clear crop area
-        ctx.globalCompositeOperation = 'destination-out';
-        ctx.fillRect(cropArea.x, cropArea.y, cropArea.width, cropArea.height);
-
-        // Draw crop border
-        ctx.globalCompositeOperation = 'source-over';
-        ctx.strokeStyle = '#fff';
-        ctx.lineWidth = 2;
-        ctx.strokeRect(cropArea.x, cropArea.y, cropArea.width, cropArea.height);
-    };
-
-    useEffect(() => {
-        drawCropArea();
-    }, [cropArea, isLoaded]);
-
-    if (!imageFile) return null;
-
-    return (
-        <div className="cropper-container">
-            <canvas
-                ref={canvasRef}
-                width={400}
-                height={400}
-                style={{
-                    cursor: isDragging ? 'grabbing' : 'grab',
-                    border: '1px solid #ccc',
-                    maxWidth: '100%',
-                    height: 'auto'
-                }}
-                onMouseDown={handleMouseDown}
-                onMouseMove={handleMouseMove}
-                onMouseUp={handleMouseUp}
-                onMouseLeave={handleMouseUp}
-            />
-            <img
-                ref={imageRef}
-                src={src}
-                style={{ display: 'none' }}
-                alt="Crop source"
-            />
-            <div className="cropper-actions">
-                <MaterialButton onClick={handleCrop} disabled={!isLoaded}>
-                    Обрезать
-                </MaterialButton>
-                <MaterialButton variant="outlined" onClick={onCancel}>
-                    Отмена
-                </MaterialButton>
-            </div>
-        </div>
-    );
-}

frontend/src/pages/chat/ui/left/settings/ChangePasswordDialog.tsx

@@ -4,6 +4,7 @@ import type { DialogProps } from "@/core/types";
 import { useAppState } from "@/pages/chat/state";
 import { changePassword } from "@/core/api/securityApi";
 import { MaterialButton, MaterialIconButton, MaterialSwitch, MaterialTextField } from "@/utils/material";
+import styles from "@/pages/chat/css/changePasswordDialog.module.scss";
 
 export default function ChangePasswordDialog({ isOpen, onOpenChange }: DialogProps) {
     const { user } = useAppState();
@@ -16,12 +17,12 @@ export default function ChangePasswordDialog({ isOpen, onOpenChange }: DialogPro
 
     return (
         <StyledDialog open={isOpen} onOpenChange={onOpenChange} className="change-password-dialog">
-            <div className="cpd-container">
-                <div className="cpd-titlebar">
+            <div className={styles.cpdContainer}>
+                <div className={styles.cpdTitlebar}>
                     <MaterialIconButton icon="close" onClick={() => onOpenChange(false)}></MaterialIconButton>
-                    <div className="cpd-title">Изменить пароль</div>
+                    <div className={styles.cpdTitle}>Изменить пароль</div>
                 </div>
-                <div className="cpd-content">
+                <div className={styles.cpdContent}>
                     <form onSubmit={async (e) => {
                         e.preventDefault();
                         if (!user.authToken || !user.currentUser?.username) return;
@@ -64,14 +65,14 @@ export default function ChangePasswordDialog({ isOpen, onOpenChange }: DialogPro
                             variant="outlined"
                             toggle-password
                             required />
-                        <div className="cpd-logout-all">
+                        <div className={styles.cpdLogoutAll}>
                             <MaterialSwitch 
                                 name="cpd-logout-all" 
                                 checked={logoutAll} 
                                 onInput={(e) => setLogoutAll(e.target.checked)} />
                             <label htmlFor="cpd-logout-all">Выйти на всех устройствах (кроме текущего)</label>
                         </div>
-                        <div className="cpd-actions">
+                        <div className={styles.cpdActions}>
                             <MaterialButton type="submit" disabled={busy}>Сохранить</MaterialButton>
                         </div>
                     </form>

frontend/src/pages/chat/ui/left/settings/SettingsDialog.tsx

@@ -10,6 +10,7 @@ import ChangePasswordDialog from "./ChangePasswordDialog";
 import { listDevices, revokeDevice, logoutAllOtherDevices, type DeviceInfo } from "@/core/api/devicesApi";
 import { useImmer } from "use-immer";
 import { MaterialButton, MaterialIconButton, MaterialList, MaterialListItem, MaterialSwitch } from "@/utils/material";
+import styles from "@/pages/chat/css/settings-dialog.module.scss";
 
 export function SettingsDialog({ isOpen, onOpenChange }: DialogProps) {
     const [activePanel, setActivePanel] = useState("notifications-settings");
@@ -77,13 +78,13 @@ export function SettingsDialog({ isOpen, onOpenChange }: DialogProps) {
 
     return (
         <>
-            <StyledDialog open={isOpen} onOpenChange={onOpenChange} className="settings-dialog">
-                <div id="settings-dialog-inner">
-                    <div className="header">
-                        <MaterialIconButton icon="close" id="settings-close" onClick={() => onOpenChange(false)}></MaterialIconButton>
-                        <div className="title">Настройки</div>
+            <StyledDialog open={isOpen} onOpenChange={onOpenChange} className={styles.settingsDialog}>
+                <div className={styles.settingsDialogInner}>
+                    <div className={styles.header}>
+                        <MaterialIconButton icon="close" onClick={() => onOpenChange(false)}></MaterialIconButton>
+                        <div className={styles.title}>Настройки</div>
                     </div>
-                    <div id="settings-menu">
+                    <div className={styles.settingsMenu}>
                         <MaterialList>
                             <MaterialListItem
                                 icon="notifications--filled"
@@ -122,8 +123,8 @@ export function SettingsDialog({ isOpen, onOpenChange }: DialogProps) {
                                 О приложении
                             </MaterialListItem>
                         </MaterialList>
-                        <div className="screen">
-                            <div id="notifications-settings" className={`settings-panel ${activePanel === "notifications-settings" ? "active" : ""}`}>
+                        <div className={styles.screen}>
+                            <div className={`${styles.settingsPanel} ${activePanel === "notifications-settings" ? styles.active : ""}`}>
                                 <h3>Уведомления</h3>
                                 {pushSupported && (
                                     <MaterialSwitch
@@ -134,12 +135,12 @@ export function SettingsDialog({ isOpen, onOpenChange }: DialogProps) {
                                 )}
                             </div>
 
-                            <div id="security-settings" className={`settings-panel ${activePanel === "security-settings" ? "active" : ""}`}>
+                            <div className={`${styles.settingsPanel} ${activePanel === "security-settings" ? styles.active : ""}`}>
                                 <h3>Безопасность</h3>
                                 <MaterialButton variant="tonal" onClick={() => setCpOpen(true)}>Изменить пароль</MaterialButton>
                             </div>
 
-                            <div id="devices-settings" className={`settings-panel ${activePanel === "devices-settings" ? "active" : ""}`}>
+                            <div className={`${styles.settingsPanel} ${activePanel === "devices-settings" ? styles.active : ""}`}>
                                 <h3>Устройства</h3>
                                 <div style={{ display: "flex", gap: 12, marginBottom: 12 }}>
                                     <MaterialButton variant="tonal" onClick={async () => { if (!user.authToken) return; await logoutAllOtherDevices(user.authToken); const list = await listDevices(user.authToken); updateDevices(() => list); }}>Выйти на всех остальных устройствах</MaterialButton>
@@ -166,10 +167,10 @@ export function SettingsDialog({ isOpen, onOpenChange }: DialogProps) {
                                 </MaterialList>
                             </div>
 
-                            <div id="about-settings" className={`settings-panel ${activePanel === "about-settings" ? "active" : ""}`}>
+                            <div className={`${styles.settingsPanel} ${activePanel === "about-settings" ? styles.active : ""}`}>
                                 <h3>О приложении</h3>
                                 <p>100% open source. Репозиторий на <a href="https://github.com/Toolbox-io/FromChat" target="_blank" rel="noreferrer">GitHub</a>.</p>
-                                <p><span className="product-name">{PRODUCT_NAME}</span></p>
+                                <p><span className={styles.productName}>{PRODUCT_NAME}</span></p>
                             </div>
                         </div>
                     </div>