diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 4a9d629..31c4fad 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,10 +1,7 @@ -import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"; +import { BrowserRouter, Routes, Route } from "react-router-dom"; import { ElectronTitleBar } from "./Electron"; import { useAppState } from "./pages/chat/state"; -import { useEffect, useState, lazy, Suspense } from "react"; -import { isElectron } from "./core/electron/electron"; -import { MINIMUM_WIDTH } from "./core/config"; -import useWindowSize from "./core/hooks/useWindowSize"; +import { useEffect, useState, lazy } from "react"; import ProtectedRoute from "./pages/ProtectedRoute"; import NotFoundPage from "./pages/not-found/NotFoundPage"; import DownloadAppPage from "./pages/download-app/DownloadAppPage"; @@ -17,7 +14,6 @@ const ChatPage = lazy(() => import("./pages/chat/ui/ChatPage")); export default function App() { const { restoreUserFromStorage } = useAppState(); - const { width } = useWindowSize(); const [authReady, setAuthReady] = useState(false); // Restore user from localStorage on app initialization @@ -29,28 +25,13 @@ export default function App() { return authReady && ( - {!isElectron && width < MINIMUM_WIDTH && }
- - - - } /> - - - - } /> - - - - } /> - - } /> + } /> + } /> + } /> + } /> @@ -58,9 +39,7 @@ export default function App() { } /> - - } /> + } />
diff --git a/frontend/src/core/hooks/useDownloadAppScreen.tsx b/frontend/src/core/hooks/useDownloadAppScreen.tsx new file mode 100644 index 0000000..bc058f2 --- /dev/null +++ b/frontend/src/core/hooks/useDownloadAppScreen.tsx @@ -0,0 +1,13 @@ +import { Navigate } from "react-router-dom"; +import { MINIMUM_WIDTH } from "../config"; +import useWindowSize from "./useWindowSize"; + +export default function useDownloadAppScreen() { + const { width } = useWindowSize(); + const isMobile = width < MINIMUM_WIDTH; + + return { + isMobile, + navigate: isMobile ? : null + }; +} \ No newline at end of file diff --git a/frontend/src/pages/auth/LoginPage.tsx b/frontend/src/pages/auth/LoginPage.tsx index 4ff1004..3904627 100644 --- a/frontend/src/pages/auth/LoginPage.tsx +++ b/frontend/src/pages/auth/LoginPage.tsx @@ -12,11 +12,14 @@ import { initialize, isSupported, startElectronReceiver, subscribe } from "@/cor import { isElectron } from "@/core/electron/electron"; import { useNavigate } from "react-router-dom"; import "./auth.scss"; +import useDownloadAppScreen from "@/core/hooks/useDownloadAppScreen"; export default function LoginPage() { const [alerts, updateAlerts] = useImmer([]); const setUser = useAppState(state => state.setUser); const navigate = useNavigate(); + const { navigate: navigateDownloadApp } = useDownloadAppScreen(); + if (navigateDownloadApp) return navigateDownloadApp; function showAlert(type: AlertType, message: string) { updateAlerts((alerts) => { alerts.push({type: type, message: message}) }); diff --git a/frontend/src/pages/auth/RegisterPage.tsx b/frontend/src/pages/auth/RegisterPage.tsx index 5e5f000..e4e484d 100644 --- a/frontend/src/pages/auth/RegisterPage.tsx +++ b/frontend/src/pages/auth/RegisterPage.tsx @@ -10,11 +10,14 @@ import { MaterialTextField } from "@/core/components/TextField"; import { ensureKeysOnLogin } from "@/core/api/authApi"; import { useNavigate } from "react-router-dom"; import "./auth.scss"; +import useDownloadAppScreen from "@/core/hooks/useDownloadAppScreen"; export default function RegisterPage() { const [alerts, updateAlerts] = useImmer([]); const setUser = useAppState(state => state.setUser); const navigate = useNavigate(); + const { navigate: navigateDownloadApp } = useDownloadAppScreen(); + if (navigateDownloadApp) return navigateDownloadApp; function showAlert(type: AlertType, message: string) { updateAlerts((alerts) => { alerts.push({type: type, message: message}) }); diff --git a/frontend/src/pages/chat/css/_context-menu.scss b/frontend/src/pages/chat/css/_context-menu.scss index 1720e46..9e2e1bb 100644 --- a/frontend/src/pages/chat/css/_context-menu.scss +++ b/frontend/src/pages/chat/css/_context-menu.scss @@ -84,7 +84,6 @@ } .context-menu { - position: fixed; background: $color-dark-surface; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); @@ -269,24 +268,3 @@ transform: rotate(90deg); } } - -// Mobile responsive -@media (max-width: 768px) { - .reaction-bar { - padding: 6px; - } - - .reaction-emoji-button, - .reaction-expand-button { - width: 28px; - height: 28px; - } - - .reaction-emoji-button { - font-size: 16px; - } - - .reaction-expand-button .material-symbols { - font-size: 16px; - } -} diff --git a/frontend/src/pages/chat/ui/ChatPage.tsx b/frontend/src/pages/chat/ui/ChatPage.tsx index 9bc44fe..b94bbc7 100644 --- a/frontend/src/pages/chat/ui/ChatPage.tsx +++ b/frontend/src/pages/chat/ui/ChatPage.tsx @@ -1,8 +1,12 @@ import { LeftPanel } from "./left/LeftPanel"; import { RightPanel } from "./right/RightPanel"; import "@/pages/chat/css/chat.scss"; +import useDownloadAppScreen from "@/core/hooks/useDownloadAppScreen"; export default function ChatPage() { + const { navigate: navigateDownloadApp } = useDownloadAppScreen(); + if (navigateDownloadApp) return navigateDownloadApp; + return (
diff --git a/frontend/src/pages/home/HomePage.tsx b/frontend/src/pages/home/HomePage.tsx index 9ed2c3c..27b2777 100644 --- a/frontend/src/pages/home/HomePage.tsx +++ b/frontend/src/pages/home/HomePage.tsx @@ -1,7 +1,7 @@ -import { Navigate, useNavigate } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import { useAppState } from "@/pages/chat/state"; -import { isElectron } from "@/core/electron/electron"; import "./home.scss"; +import useDownloadAppScreen from "@/core/hooks/useDownloadAppScreen"; function GitHubLink({ children }: { children: React.ReactNode }) { return ( @@ -18,18 +18,24 @@ function SupportLink({ children }: { children: React.ReactNode }) { export default function HomePage() { const navigate = useNavigate(); const { user } = useAppState(); + const { isMobile } = useDownloadAppScreen(); + const isLoggedIn = user.authToken && user.currentUser; - const handleGetStarted = () => { - if (user.authToken && user.currentUser) { + function handleGetStarted() { + if (isMobile) { + navigate("/download-app"); + } else if (isLoggedIn) { navigate("/chat"); } else { navigate("/login"); } } - if (isElectron) { - return ; - } + const openBtn = ( + + {isMobile ? "Скачать приложение" : isLoggedIn ? "Перейти в чат" : "Войти"} + + ); return (
@@ -48,15 +54,7 @@ export default function HomePage() { Поддержка - {user.authToken ? ( - navigate("/chat")}> - Перейти в чат - - ) : ( - navigate("/login")}> - Войти - - )} + {openBtn}
@@ -74,18 +72,13 @@ export default function HomePage() { поддержкой файлов и уведомлений. Создан для тех, кто ценит приватность и свободу.

- - {user.authToken ? "Перейти в чат" : "Начать общение"} - - navigate("/register")} > Зарегистрироваться - + }
@@ -129,7 +122,7 @@ export default function HomePage() {
- +

End-to-End Шифрование

@@ -140,7 +133,7 @@ export default function HomePage() {

- +

100% открытый код

@@ -151,7 +144,7 @@ export default function HomePage() {

- +

Обмен Файлами

@@ -162,7 +155,7 @@ export default function HomePage() {

- +

Уведомления

@@ -173,7 +166,7 @@ export default function HomePage() {

- +

Редактирование

@@ -184,7 +177,7 @@ export default function HomePage() {

- +

Кроссплатформенность

@@ -205,20 +198,28 @@ export default function HomePage() { уведомлений и автономной работы.

- - - - Скачать для ПК + {!isMobile ? ( + <> + + + + Скачать для ПК + + + navigate("/login")}> + + Веб-версия + + + ) : ( + navigate("/download-app")}> + Скачать приложение - - navigate("/login")}> - - Веб-версия - + )}
@@ -232,18 +233,24 @@ export default function HomePage() { Присоединяйтесь к FromChat и общайтесь безопасно с друзьями и коллегами.

- navigate("/register")} - > - Создать аккаунт - - navigate("/login")} - > - Войти - + {isMobile ? ( + navigate("/download-app")}> + Скачать приложение + + ) : ( + <> + navigate("/register")}> + Создать аккаунт + + navigate("/login")}> + Войти + + + )}