diff --git a/frontend/src/core/config.ts b/frontend/src/core/config.ts index 65cd10f..c117bd0 100644 --- a/frontend/src/core/config.ts +++ b/frontend/src/core/config.ts @@ -27,4 +27,6 @@ export const API_WS_BASE_URL = `${location.host || BASE_DOMAIN}/api`; * Application name displayed in UI and document title * @constant */ -export const PRODUCT_NAME = "FromChat"; \ No newline at end of file +export const PRODUCT_NAME = "FromChat"; + +export const MINIMUM_WIDTH = 800; \ No newline at end of file diff --git a/frontend/src/resources/css/_download-app.scss b/frontend/src/resources/css/_download-app.scss new file mode 100644 index 0000000..0c66a25 --- /dev/null +++ b/frontend/src/resources/css/_download-app.scss @@ -0,0 +1,8 @@ +.download-app-screen { + display: flex; + justify-content: center; + align-items: center; + min-width: 100vw; + min-height: 100vh; + padding: 32px; +} \ No newline at end of file diff --git a/frontend/src/resources/css/style.scss b/frontend/src/resources/css/style.scss index c380a7b..a63eebf 100644 --- a/frontend/src/resources/css/style.scss +++ b/frontend/src/resources/css/style.scss @@ -9,6 +9,7 @@ @use "common/material" as *; @use "electron"; @use "dialogs/reply"; +@use "download-app"; @use "lib/fonts/montserrat"; @use "lib/fonts/material-symbols"; diff --git a/frontend/src/ui/App.tsx b/frontend/src/ui/App.tsx index a8f9f37..9ece2e2 100644 --- a/frontend/src/ui/App.tsx +++ b/frontend/src/ui/App.tsx @@ -1,5 +1,8 @@ +import { MINIMUM_WIDTH } from "../core/config"; import { ElectronTitleBar } from "./components/Electron"; +import useWindowSize from "./hooks/useWindowSize"; import ChatScreen from "./screen/ChatScreen"; +import DownloadAppScreen from "./screen/DownloadAppScreen"; import LoginScreen from "./screen/LoginScreen"; import RegisterScreen from "./screen/RegisterScreen"; import { useAppState } from "./state"; @@ -7,12 +10,17 @@ import { useEffect } from "react"; export default function App() { const { currentPage, restoreUserFromStorage } = useAppState(); + const { width } = useWindowSize(); // Restore user from localStorage on app initialization useEffect(() => { restoreUserFromStorage(); }, [restoreUserFromStorage]); + if (width < MINIMUM_WIDTH) { + return + } + let page = ; switch (currentPage) { diff --git a/frontend/src/ui/components/chat/MessageContextMenu.tsx b/frontend/src/ui/components/chat/MessageContextMenu.tsx index f297873..493bcf2 100644 --- a/frontend/src/ui/components/chat/MessageContextMenu.tsx +++ b/frontend/src/ui/components/chat/MessageContextMenu.tsx @@ -176,17 +176,17 @@ export function MessageContextMenu({ >
handleAction("reply")}> reply - Reply + Ответить
{isAuthor && ( <>
handleAction("edit")}> edit - Edit + Редактировать
handleAction("delete")}> delete - Delete + Удалить
)} diff --git a/frontend/src/ui/components/chat/MessagePanelRenderer.tsx b/frontend/src/ui/components/chat/MessagePanelRenderer.tsx index e48114e..313d307 100644 --- a/frontend/src/ui/components/chat/MessagePanelRenderer.tsx +++ b/frontend/src/ui/components/chat/MessagePanelRenderer.tsx @@ -41,8 +41,8 @@ export function MessagePanelRenderer({ panel, isChatSwitching }: MessagePanelRen // Cleanup function return () => { - if (panel && (panel as any).onStateChange) { - (panel as any).onStateChange = null; + if (panel && panel.onStateChange) { + panel.onStateChange = null; } }; }, [panel]); @@ -72,10 +72,10 @@ export function MessagePanelRenderer({ panel, isChatSwitching }: MessagePanelRen Avatar
-

Select a chat

+

Выбор чата

- Choose a chat to start messaging + Выберите чат, чтобы начать переписку

@@ -88,7 +88,7 @@ export function MessagePanelRenderer({ panel, isChatSwitching }: MessagePanelRen height: "100%", color: "var(--mdui-color-on-surface-variant)" }}> - Select a chat from the sidebar to start messaging + Выберите чат на боковой панели, чтобы начать переписку @@ -128,7 +128,7 @@ export function MessagePanelRenderer({ panel, isChatSwitching }: MessagePanelRen height: "100%", color: "var(--mdui-color-on-surface-variant)" }}> - Loading messages... + Загрузка сообщений... ): ( diff --git a/frontend/src/ui/components/chat/ReplyMessageDialog.tsx b/frontend/src/ui/components/chat/ReplyMessageDialog.tsx index 0af2fd1..f270d1a 100644 --- a/frontend/src/ui/components/chat/ReplyMessageDialog.tsx +++ b/frontend/src/ui/components/chat/ReplyMessageDialog.tsx @@ -36,7 +36,7 @@ export function ReplyMessageDialog({ isOpen, onOpenChange, replyToMessage, onSen return (
-

Reply to Message

+

Ответить на сообщение

{replyToMessage.username} diff --git a/frontend/src/ui/components/chat/UserProfileDialog.tsx b/frontend/src/ui/components/chat/UserProfileDialog.tsx index 14e3f11..1f3b8eb 100644 --- a/frontend/src/ui/components/chat/UserProfileDialog.tsx +++ b/frontend/src/ui/components/chat/UserProfileDialog.tsx @@ -28,24 +28,24 @@ export function UserProfileDialog({ isOpen, onOpenChange, userProfile }: UserPro
{userProfile.online ? ( <> - Online + Онлайн ) : ( <> - Last seen {formatTime(userProfile.last_seen)} + Последний заход {formatTime(userProfile.last_seen)} )}
- +
{userProfile.bio || "No bio available."}
- Member since: + Зарегистрирован: {formatTime(userProfile.created_at)}
diff --git a/frontend/src/ui/hooks/useWindowSize.ts b/frontend/src/ui/hooks/useWindowSize.ts new file mode 100644 index 0000000..4f8df09 --- /dev/null +++ b/frontend/src/ui/hooks/useWindowSize.ts @@ -0,0 +1,29 @@ +import { useEffect, useState } from "react"; + +export interface WindowSize { + width: number; + height: number; +} + +export default function useWindowSize(): WindowSize { + const [width, setWidth] = useState(innerWidth); + const [height, setHeight] = useState(innerHeight); + + useEffect(() => { + function listener() { + setWidth(innerWidth); + setHeight(innerHeight); + } + + addEventListener("resize", listener); + + return () => { + removeEventListener("resize", listener); + } + }); + + return { + width: width, + height: height + } +} \ No newline at end of file diff --git a/frontend/src/ui/screen/DownloadAppScreen.tsx b/frontend/src/ui/screen/DownloadAppScreen.tsx new file mode 100644 index 0000000..8b4e5e5 --- /dev/null +++ b/frontend/src/ui/screen/DownloadAppScreen.tsx @@ -0,0 +1,25 @@ +export default function DownloadAppScreen() { + return ( +
+
+

Чтобы пользоваться мессенджером, скачайте приложение

+

+ Этот сайт не предназначен для работы на маленьких экранах, поэтому + вам нужно скачать приложение мессенджера. +

+ + + Скачать на GitHub + + +

+ Если возникнут сложности или есть вопросы, нажмите кнопку! +

+ + + Написать в поддержку + +
+
+ ) +} \ No newline at end of file