From 27e1cf7a680706028d93790dc78b5b5661bdce70 Mon Sep 17 00:00:00 2001 From: denis0001-dev Date: Mon, 20 Oct 2025 22:08:12 +0300 Subject: [PATCH] Clean up --- frontend/src/App.tsx | 15 +++--- frontend/src/pages/chat/ui/ChatPage.tsx | 4 +- frontend/src/pages/chat/ui/ProfileDialog.tsx | 52 +++++-------------- .../src/pages/chat/ui/right/ChatMessages.tsx | 1 - frontend/src/pages/chat/ui/right/Message.tsx | 7 ++- 5 files changed, 26 insertions(+), 53 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index a7354b3..f99b514 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -2,10 +2,10 @@ import { BrowserRouter, Routes, Route, useNavigate, matchRoutes, type RouteObjec import { ElectronTitleBar } from "./Electron"; import { useAppState } from "./pages/chat/state"; import { lazy, useEffect, useState } from "react"; -import { parseProfileLink } from "./core/profileLinks.ts"; -import NotFoundPage from "./pages/not-found/NotFoundPage.tsx"; -import ProtectedRoute from "./pages/ProtectedRoute.tsx"; -import DownloadAppPage from "./pages/download-app/DownloadAppPage.tsx"; +import { parseProfileLink } from "./core/profileLinks"; +import NotFoundPage from "./pages/not-found/NotFoundPage"; +import ProtectedRoute from "./pages/ProtectedRoute"; +import DownloadAppPage from "./pages/download-app/DownloadAppPage"; // Lazy load route components const HomePage = lazy(() => import("./pages/home/HomePage")); @@ -19,12 +19,12 @@ const routeConfig: RouteObject[] = [ { path: "/register", element: }, { path: "/download-app", element: }, { - path: "/chat", + path: "/chat", element: ( - ) + ) }, { path: "*", element: } ]; @@ -46,8 +46,7 @@ function SmartCatchAll() { return; } - // Check if it's a profile link - const profileInfo = parseProfileLink(); // no url specified intentionally to let it use the current url + const profileInfo = parseProfileLink(); // No URL specified intentionally to let it use the current URL if (profileInfo) { setShowNotFound(false); diff --git a/frontend/src/pages/chat/ui/ChatPage.tsx b/frontend/src/pages/chat/ui/ChatPage.tsx index 56486bc..6bfe5c8 100644 --- a/frontend/src/pages/chat/ui/ChatPage.tsx +++ b/frontend/src/pages/chat/ui/ChatPage.tsx @@ -27,8 +27,8 @@ export default function ChatPage() { const profileInfo = location.state.profileInfo; // Create a unique key for this profile - const profileKey = profileInfo.userId - ? `user_${profileInfo.userId}` + const profileKey = profileInfo.userId + ? `user_${profileInfo.userId}` : `username_${profileInfo.username}`; // Skip if we've already processed this exact profile diff --git a/frontend/src/pages/chat/ui/ProfileDialog.tsx b/frontend/src/pages/chat/ui/ProfileDialog.tsx index 836279d..0790ae9 100644 --- a/frontend/src/pages/chat/ui/ProfileDialog.tsx +++ b/frontend/src/pages/chat/ui/ProfileDialog.tsx @@ -74,8 +74,7 @@ export function ProfileDialog() { const [isSaving, setIsSaving] = useState(false); const [errors, setErrors] = useState<{[key: string]: string}>({}); const fileInputRef = useRef(null); - const backdropRef = useRef(null); - const dialogRef = useRef(null); + const [openClass, setOpenClass] = useState(false); // Handle dialog open/close based on state useEffect(() => { @@ -84,17 +83,12 @@ export function ProfileDialog() { fetchFreshProfileData(chat.profileDialog); } else if (!chat.profileDialog && isOpen) { // Start close animation - if (backdropRef.current && dialogRef.current) { - backdropRef.current.classList.remove('open'); - dialogRef.current.classList.remove('open'); + setOpenClass(false); // Wait for animation to complete before closing setTimeout(() => { setIsOpen(false); - }, 300); // Match CSS transition duration - } else { - setIsOpen(false); - } + }, 300); } }, [chat.profileDialog, isOpen]); @@ -132,13 +126,10 @@ export function ProfileDialog() { useEffect(() => { if (isOpen) { // Small delay to ensure DOM is ready for transition - const timer = setTimeout(() => { - if (backdropRef.current && dialogRef.current) { - backdropRef.current.classList.add('open'); - dialogRef.current.classList.add('open'); - } - }, 10); - return () => clearTimeout(timer); + const timer = requestAnimationFrame(() => { + setOpenClass(true); + }); + return () => cancelAnimationFrame(timer); } }, [isOpen]); @@ -214,17 +205,12 @@ export function ProfileDialog() { }; function triggerCloseAnimation() { - if (backdropRef.current && dialogRef.current) { - backdropRef.current.classList.remove('open'); - dialogRef.current.classList.remove('open'); + setOpenClass(false); - // Wait for animation to complete before closing - setTimeout(() => { - closeProfileDialog(); - }, 300); // Match CSS transition duration - } else { + // Wait for animation to complete before closing + setTimeout(() => { closeProfileDialog(); - } + }, 300); // Match CSS transition duration }; function handleBackdropClick(e: React.MouseEvent) { @@ -402,13 +388,10 @@ export function ProfileDialog() { return createPortal(
-
+ className={`profile-dialog-backdrop ${openClass ? "open" : ""}`} + onClick={handleBackdropClick}> +
- {/* Profile Picture */}
- {/* Display Name */}
- {/* Online Status */} {(currentData?.userId || currentData?.isOwnProfile) && (
@@ -462,8 +443,6 @@ export function ProfileDialog() { readOnly={!currentData.isOwnProfile} placeholder="username" /> - - {/* Bio */} {currentData.bio !== undefined && (
)} - {/* Member Since */} {currentData.memberSince && (
- {/* Save FAB */} {currentData.isOwnProfile && ( )} - {/* Hidden file input */} - )} -
+ onClick={handleLinkClick} /> {message.files && message.files.length > 0 && (