Fix lints

This reverts commit f98b91ea3c.

.cursor/commands/clean-up.md

@@ -0,0 +1,4 @@
+View git diff between the branch i specified and HEAD. If no branch is specified, 
+default to main. Identify code that needs to be cleaned up, like debug logs, 
+unused variables etc. Think twice before removing or adding code, because you 
+mustn't alter the behavior.

.cursor/commands/restructure.md

@@ -0,0 +1 @@
+Analyze my codebase and think how it could be better organized, like a better folder or code structure.

.cursor/commands/smart-rebase.md

@@ -0,0 +1,25 @@
+Please analyze the recent commits in this repository and help me clean up the commit history. I want you to:
+
+1. First, show me all commits between the target ref and HEAD using: `git log --oneline <base-branch>..HEAD`
+2. Identify which commits should be squashed together (like cleanup commits, small fixes, or related changes)
+3. For each group of commits you plan to squash, read their full details using: `git show <commit-hash>` to understand what changes they contain
+4. Create a git-rebase-todo.txt file with your recommended rebase plan
+5. Explain your reasoning for the squashing decisions, including what changes each squashed group contains. Be concise.
+6. Stop and ask me if i agree with your plan.
+7. Then execute the rebase using these exact commands (replace `<base-branch>` with the target branch/ref):
+   ```bash
+   export GIT_SEQUENCE_EDITOR="cp git-rebase-todo.txt"
+   git rebase -i <base-branch>
+   ```
+8. If there are conflicts, stop and ask me to fix them.
+9. Delete the `git-rebase-todo.txt` file you created.s
+
+**Usage:** You can specify a target branch/ref as an argument. If no argument is provided, stop and ask me for the branch or ref to rebase onto.
+
+Focus on:
+- Squashing small cleanup commits into their related feature commits
+- Combining related bug fixes
+- Keeping meaningful feature commits separate
+- Maintaining a clean, logical commit history
+
+Please be conservative - if you're unsure about squashing something, ask me for clarification.

.cursor/mcp.json

@@ -0,0 +1,8 @@
+{
+    "mcpServers": {
+        "mdui": {
+            "command": "npx",
+            "args": ["-y", "@mdui/mcp"]
+        }
+    }
+}

.cursor/rules/general.mdc

@@ -0,0 +1,52 @@
+---
+alwaysApply: true
+---
+
+When working with this project, follow these rules:
+
+## Core Behavior
+- NEVER do anything i didn't ask you for!
+- Don't talk like a robot. Behave more like a human.
+- Be concise and direct in responses.
+- If you're unsure about something, ask for clarification instead of guessing.
+
+## Code Quality & Principles
+- Follow DRY, SOLID, YAGNI and KISS principles.
+- Do NOT use old, outdated or deprecated APIs and functions.
+- Use double quotes ("") for strings consistently.
+- Prefer functional components over class components in React.
+- Use TypeScript strictly - avoid `any` types unless absolutely necessary.
+
+## File Operations
+- If possible, try to update files in a single edit when making multiple changes.
+- Do NOT "cd" to the project directory.
+
+## Testing & Validation
+- Do NOT "test the implementation" when you are done. The only exception is when you 
+  need to typecheck or build the app, in that case:
+  - To typecheck, run `npm run frontend:typecheck`.
+  - To build, run `npm run frontend:build`.
+- Do NOT execute other commands like "cd".
+- If the typecheck passed, there's no need for checking the linter errors.
+
+## Async Operations
+- When you need a delay, use `await delay(millis);` in an async function. If the current function is not async,
+  make it async.
+
+## Database
+- NEVER create database migrations, they are auto-generated.
+
+## Project Structure Awareness
+- This is a React/TypeScript frontend with Python FastAPI backend
+- Uses MDUI components for UI
+- Has Electron support for desktop app
+- Uses Zustand for state management
+- Uses use-immer for immutable state updates
+- Uses React Router for navigation
+- Has WebSocket support for real-time features
+- Uses encryption (tweetnacl) for security
+
+## Performance & Efficiency
+- Batch tool calls when possible to reduce latency
+- Use semantic search before grep when looking for concepts
+- Use TODOs for complex multi-step tasks to track progress

.cursor/rules/ui.mdc

@@ -1,8 +1,8 @@
 ---
 alwaysApply: true
 ---
-
 When you work with UI:
 
-1. Use MDUI components as HTML elements
-2. Do NOT dynamically create HTML if it's going to be loaded when the page loads, instead put it statically in the HTML.
+1. Use MDUI components as HTML elements with the name "mdui-***". In JSX/TSX use the same elements and props as in HTML.
+3. The supporting text slot for MDUI lists is "description".
+4. When working with lists/sets in states, use the "useImmer" hook.

.github/workflows/build.yml

@@ -1,35 +1,133 @@
-name: Build Electron Apps
+name: Build Electron app
 
 on:
   workflow_dispatch:
+    inputs:
+      apiBaseUrl:
+        description: "API base URL"
+        required: false
+        default: "fromchat.ru"
+        type: string
   push:
-    branches: ["main", "electron"]
+    tags: ["v**"]
     paths:
       - 'frontend/**'
       - 'package.json'
-      - 'package-lock.json'
-      - 'frontend/electron/**'
       - '.github/workflows/build.yml'
 
 concurrency:
   group: build-${{ github.ref }}
   cancel-in-progress: true
 
+permissions:
+  contents: read
+
 jobs:
-  build:
-    name: Build (${{ matrix.os }})
-    runs-on: ${{ matrix.os }}
-    strategy:
-      fail-fast: false
-      matrix:
-        os: [ubuntu-latest, macos-latest, windows-latest]
+  build-linux:
+    name: Build Linux
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '24'
+
+      - name: Cache dependencies
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: npm-ubuntu-latest-node-24-${{ hashFiles('package.json') }}
+          restore-keys: |
+            npm-ubuntu-latest-node-24-
+
+      - name: Install dependencies
+        run: npm install --ignore-scripts --no-audit --no-fund
+
+      - name: Cache Electron downloads
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.cache/electron
+            ~/.cache/electron-builder
+          key: electron-ubuntu-latest-${{ hashFiles('package.json', 'package.json') }}
+          restore-keys: |
+            electron-ubuntu-latest-
+
+      - name: Build Electron app
+        shell: bash
+        env:
+          VITE_API_BASE_URL: ${{ inputs.apiBaseUrl }}
+        run: npm run build:electron
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: FromChat-linux
+          path: |
+            frontend/build/electron/forge/make/*/**
+          if-no-files-found: error
+
+  build-macos:
+    name: Build macOS
+    runs-on: macos-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '24'
+
+      - name: Cache dependencies
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: npm-macos-latest-node-24-${{ hashFiles('package.json') }}
+          restore-keys: |
+            npm-macos-latest-node-24-
+
+      - name: Install dependencies
+        run: npm install --ignore-scripts --no-audit --no-fund
+
+      # - name: Cache Electron downloads
+      #   uses: actions/cache@v4
+      #   with:
+      #     path: |
+      #       ~/.cache/electron
+      #       ~/.cache/electron-builder
+      #     key: electron-macos-latest-${{ hashFiles('package.json') }}
+      #     restore-keys: |
+      #       electron-macos-latest-
+
+      - name: Build Electron app
+        shell: bash
+        env:
+          VITE_API_BASE_URL: ${{ inputs.apiBaseUrl }}
+        run: npm run build:electron
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: FromChat-macOS
+          path: |
+            frontend/build/electron/forge/make/zip/darwin/*/**.zip
+          if-no-files-found: error
+
+  build-windows:
+    name: Build Windows
+    runs-on: windows-latest
 
     steps:
       - name: Checkout
         uses: actions/checkout@v4
 
       - name: Force npm to use Bash
-        if: runner.os == 'Windows'
         run: npm config set script-shell "C:\Program Files\Git\bin\bash.exe"
 
       - name: Setup Node.js
@@ -37,61 +135,37 @@ jobs:
         with:
           node-version: '24'
 
-      - name: Cache npm (Linux/macOS)
-        if: runner.os != 'Windows'
+      - name: Cache dependencies
         uses: actions/cache@v4
         with:
-          path: ~/.npm
-          key: npm-${{ runner.os }}-node-24-${{ hashFiles('package.json') }}
+          path: node_modules
+          key: npm-windows-latest-node-24-${{ hashFiles('package.json') }}
           restore-keys: |
-            npm-${{ runner.os }}-node-24-
+            npm-windows-latest-node-24-
 
-      - name: Cache npm (Windows)
-        if: runner.os == 'Windows'
-        uses: actions/cache@v4
-        with:
-          path: ~\AppData\Local\npm-cache
-          key: npm-${{ runner.os }}-node-24-${{ hashFiles('package.json') }}
-          restore-keys: |
-            npm-${{ runner.os }}-node-24-
-
-      - name: Install root deps (no scripts)
+      - name: Install dependencies
         run: npm install --ignore-scripts --no-audit --no-fund
 
-      - name: Install Electron Forge deps
-        run: npm run frontend:electron:dependencies
-
-      - name: Cache Electron downloads (Linux/macOS)
-        if: runner.os != 'Windows'
-        uses: actions/cache@v4
-        with:
-          path: |
-            ~/.cache/electron
-            ~/.cache/electron-builder
-          key: electron-${{ runner.os }}-${{ hashFiles('package.json', 'frontend/electron/forge/package.json') }}
-          restore-keys: |
-            electron-${{ runner.os }}-
-
-      - name: Cache Electron downloads (Windows)
-        if: runner.os == 'Windows'
+      - name: Cache Electron downloads
         uses: actions/cache@v4
         with:
           path: |
             ~\AppData\Local\electron\Cache
             ~\AppData\Local\electron-builder\Cache
-          key: electron-${{ runner.os }}-${{ hashFiles('package.json', 'frontend/electron/forge/package.json') }}
+          key: electron-windows-latest-${{ hashFiles('package.json') }}
           restore-keys: |
-            electron-${{ runner.os }}-
+            electron-windows-latest-
 
       - name: Build Electron app
         shell: bash
+        env:
+          VITE_API_BASE_URL: ${{ inputs.apiBaseUrl }}
         run: npm run build:electron
 
       - name: Upload artifact
         uses: actions/upload-artifact@v4
         with:
-          name: fromchat-${{ runner.os }}
+          name: FromChat-windows
           path: |
-            frontend/electron/forge/out/**
-          if-no-files-found: error
-
+            frontend/build/electron/forge/make/zip/win32/x64
+          if-no-files-found: error

.github/workflows/deploy.yml

@@ -5,6 +5,15 @@ on:
   # Runs on pushes targeting the default branch
   push:
     branches: ["main"]
+    paths:
+      - "backend/**"
+      - "frontend/**"
+      - "deployment/**"
+      - "**/package.json"
+      - ".nvmrc"
+      - ".github/workflows/deploy.yml"
+      - "!frontend/electron/**"
+      - "!**.d.ts"
   workflow_dispatch:
 
 # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
@@ -13,6 +22,9 @@ concurrency:
   group: "pages"
   cancel-in-progress: false
 
+permissions:
+  contents: read
+
 jobs:
   deploy:
     runs-on: self-hosted
@@ -20,7 +32,7 @@ jobs:
       HOME: "/root"
     environment:
       name: production
-      url: https://fromchat.toolbox-io.ru
+      url: https://fromchat.ru
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -30,6 +42,8 @@ jobs:
           touch deployment/.env
           cat > deployment/.env << EOF
           JWT_SECRET=${{ secrets.JWT_SECRET }}
+          VAPID_PUBLIC_KEY=${{ secrets.VAPID_PUBLIC_KEY }}
+          VAPID_PRIVATE_KEY=${{ secrets.VAPID_PRIVATE_KEY }}
           EOF
       - name: Build container
         run: |

.gitignore

@@ -1,6 +1,6 @@
 # File created using '.gitignore Generator' for Visual Studio Code: https://bit.ly/vscode-gig
-# Created by https://www.toptal.com/developers/gitignore/api/visualstudiocode,python,macos,node,osx
-# Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode,python,macos,node,osx
+# Created by https://www.toptal.com/developers/gitignore/api/visualstudiocode,python,osx,node,macos,react,reactnative
+# Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode,python,osx,node,macos,react,reactnative
 
 ### macOS ###
 # General
@@ -203,6 +203,8 @@ dist/
 downloads/
 eggs/
 .eggs/
+lib/
+lib64/
 parts/
 sdist/
 var/
@@ -353,6 +355,194 @@ poetry.toml
 # LSP config files
 pyrightconfig.json
 
+### react ###
+.DS_*
+**/*.backup.*
+**/*.back.*
+
+node_modules
+
+*.sublime*
+
+psd
+thumb
+sketch
+
+### ReactNative ###
+# React Native Stack Base
+
+.expo
+__generated__
+
+### ReactNative.macOS Stack ###
+# General
+
+# Icon must end with two \r
+
+# Thumbnails
+
+# Files that might appear in the root of a volume
+
+# Directories potentially created on remote AFP share
+
+### ReactNative.Android Stack ###
+# Gradle files
+.gradle/
+
+# Local configuration file (sdk path, etc)
+local.properties
+
+# Log/OS Files
+
+# Android Studio generated files and folders
+captures/
+.externalNativeBuild/
+.cxx/
+*.apk
+output.json
+
+# IntelliJ
+*.iml
+.idea/
+misc.xml
+deploymentTargetDropDown.xml
+render.experimental.xml
+
+# Keystore files
+*.jks
+*.keystore
+
+# Google Services (e.g. APIs or Firebase)
+google-services.json
+
+# Android Profiling
+*.hprof
+
+### ReactNative.Gradle Stack ###
+.gradle
+**/build/
+!src/**/build/
+
+# Ignore Gradle GUI config
+gradle-app.setting
+
+# Avoid ignoring Gradle wrapper jar file (.jar files are usually ignored)
+!gradle-wrapper.jar
+
+# Avoid ignore Gradle wrappper properties
+!gradle-wrapper.properties
+
+# Cache of project
+.gradletasknamecache
+
+# Eclipse Gradle plugin generated files
+# Eclipse Core
+.project
+# JDT-specific (Eclipse Java Development Tools)
+.classpath
+
+### ReactNative.Xcode Stack ###
+## User settings
+xcuserdata/
+
+## Xcode 8 and earlier
+*.xcscmblueprint
+*.xccheckout
+
+### ReactNative.Linux Stack ###
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+### ReactNative.Node Stack ###
+# Logs
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+
+# Runtime data
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+
+# Coverage directory used by tools like istanbul
+
+# nyc test coverage
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+
+# Bower dependency directory (https://bower.io/)
+
+# node-waf configuration
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+
+# Dependency directories
+
+# Snowpack dependency directory (https://snowpack.dev/)
+
+# TypeScript cache
+
+# Optional npm cache directory
+
+# Optional eslint cache
+
+# Optional stylelint cache
+
+# Microbundle cache
+
+# Optional REPL history
+
+# Output of 'npm pack'
+
+# Yarn Integrity file
+
+# dotenv environment variable files
+
+# parcel-bundler cache (https://parceljs.org/)
+
+# Next.js build output
+
+# Nuxt.js build / generate output
+
+# Gatsby files
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+
+# vuepress v2.x temp and cache directory
+
+# Docusaurus cache and generated files
+
+# Serverless directories
+
+# FuseBox cache
+
+# DynamoDB Local files
+
+# TernJS port file
+
+# Stores VSCode versions used for testing VSCode extensions
+
+# yarn v2
+
+### ReactNative.Buck Stack ###
+buck-out/
+.buckconfig.local
+.buckd/
+.buckversion
+.fakebuckversion
+
 ### VisualStudioCode ###
 .vscode/*
 !.vscode/settings.json
@@ -372,12 +562,15 @@ pyrightconfig.json
 .history
 .ionide
 
-# End of https://www.toptal.com/developers/gitignore/api/visualstudiocode,python,macos,node,osx
+# End of https://www.toptal.com/developers/gitignore/api/visualstudiocode,python,osx,node,macos,react,reactnative
 
 # Custom rules (everything added below won't be overriden by 'Generate .gitignore File' if you use 'Update' option)
 
-data
+backend/data
 .vite
 *.db
 package-lock.json
-dist-electron
+backend/alembic/**
+!backend/alembic/env.py
+!backend/alembic/script.py.mako
+!frontend/src/css/lib

.husky/pre-commit

@@ -0,0 +1,2 @@
+#!/bin/sh
+npm run frontend:typecheck

.vscode/settings.json

@@ -2,5 +2,8 @@
     "files.exclude": {
         "**/__pycache__": true,
         "**/package-lock.json": true
-    }
+    },
+    "github-actions.workflows.pinned.workflows": [],
+    "github-actions.workflows.pinned.workflows.ignore": true,
+    "github-actions.workflows.pinned.workflows.ignoreContextAccess": true
 }

.vscode/tasks.json

@@ -2,9 +2,9 @@
     "version": "2.0.0",
     "tasks": [
         {
-            "label": "Run",
-            "type": "shell",
-            "command": "npm run dev",
+            "label": "Backend",
+            "type": "npm",
+            "script": "backend:run",
             "options": {
                 "cwd": "${workspaceFolder}"
             },
@@ -16,23 +16,73 @@
             },
             "group": {
                 "kind": "build"
+            },
+            "isBackground": true
+        },
+        {
+            "label": "Frontend (Web)",
+            "type": "npm",
+            "script": "frontend:dev",
+            "options": {
+                "cwd": "${workspaceFolder}"
+            },
+            "presentation": {
+                "echo": true,
+                "reveal": "always",
+                "focus": false,
+                "panel": "shared"
+            },
+            "group": {
+                "kind": "build",
+            },
+            "isBackground": true
+        },
+        {
+            "label": "Frontend (Electron)",
+            "type": "npm",
+            "script": "frontend:electron:dev",
+            "options": {
+                "cwd": "${workspaceFolder}"
+            },
+            "presentation": {
+                "echo": true,
+                "reveal": "always",
+                "focus": false,
+                "panel": "shared"
+            },
+            "group": {
+                "kind": "build"
+            },
+            "isBackground": true
+        },
+
+        {
+            "label": "Web",
+            "dependsOn": ["Backend", "Frontend (Web)"],
+            "dependsOrder": "parallel",
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            },
+            "presentation": {
+                "echo": true,
+                "reveal": "always",
+                "focus": false,
+                "panel": "shared"
             }
         },
         {
-            "label": "Run (Electron)",
-            "type": "shell",
-            "command": "npm run dev:electron",
-            "options": {
-                "cwd": "${workspaceFolder}"
+            "label": "Electron",
+            "dependsOn": ["Backend", "Frontend (Electron)"],
+            "dependsOrder": "parallel",
+            "group": {
+                "kind": "build"
             },
             "presentation": {
                 "echo": true,
                 "reveal": "always",
                 "focus": false,
                 "panel": "shared"
-            },
-            "group": {
-                "kind": "build"
             }
         }
     ]

backend/alembic.ini

@@ -0,0 +1,147 @@
+# A generic, single database configuration.
+
+[alembic]
+# path to migration scripts.
+# this is typically a path given in POSIX (e.g. forward slashes)
+# format, relative to the token %(here)s which refers to the location of this
+# ini file
+script_location = %(here)s/alembic
+
+# template used to generate migration file names; The default value is %%(rev)s_%%(slug)s
+# Uncomment the line below if you want the files to be prepended with date and time
+# see https://alembic.sqlalchemy.org/en/latest/tutorial.html#editing-the-ini-file
+# for all available tokens
+# file_template = %%(year)d_%%(month).2d_%%(day).2d_%%(hour).2d%%(minute).2d-%%(rev)s_%%(slug)s
+
+# sys.path path, will be prepended to sys.path if present.
+# defaults to the current working directory.  for multiple paths, the path separator
+# is defined by "path_separator" below.
+prepend_sys_path = .
+
+
+# timezone to use when rendering the date within the migration file
+# as well as the filename.
+# If specified, requires the python>=3.9 or backports.zoneinfo library and tzdata library.
+# Any required deps can installed by adding `alembic[tz]` to the pip requirements
+# string value is passed to ZoneInfo()
+# leave blank for localtime
+# timezone =
+
+# max length of characters to apply to the "slug" field
+# truncate_slug_length = 40
+
+# set to 'true' to run the environment during
+# the 'revision' command, regardless of autogenerate
+# revision_environment = false
+
+# set to 'true' to allow .pyc and .pyo files without
+# a source .py file to be detected as revisions in the
+# versions/ directory
+# sourceless = false
+
+# version location specification; This defaults
+# to <script_location>/versions.  When using multiple version
+# directories, initial revisions must be specified with --version-path.
+# The path separator used here should be the separator specified by "path_separator"
+# below.
+# version_locations = %(here)s/bar:%(here)s/bat:%(here)s/alembic/versions
+
+# path_separator; This indicates what character is used to split lists of file
+# paths, including version_locations and prepend_sys_path within configparser
+# files such as alembic.ini.
+# The default rendered in new alembic.ini files is "os", which uses os.pathsep
+# to provide os-dependent path splitting.
+#
+# Note that in order to support legacy alembic.ini files, this default does NOT
+# take place if path_separator is not present in alembic.ini.  If this
+# option is omitted entirely, fallback logic is as follows:
+#
+# 1. Parsing of the version_locations option falls back to using the legacy
+#    "version_path_separator" key, which if absent then falls back to the legacy
+#    behavior of splitting on spaces and/or commas.
+# 2. Parsing of the prepend_sys_path option falls back to the legacy
+#    behavior of splitting on spaces, commas, or colons.
+#
+# Valid values for path_separator are:
+#
+# path_separator = :
+# path_separator = ;
+# path_separator = space
+# path_separator = newline
+#
+# Use os.pathsep. Default configuration used for new projects.
+path_separator = os
+
+# set to 'true' to search source files recursively
+# in each "version_locations" directory
+# new in Alembic version 1.10
+# recursive_version_locations = false
+
+# the output encoding used when revision files
+# are written from script.py.mako
+# output_encoding = utf-8
+
+# database URL.  This is consumed by the user-maintained env.py script only.
+# other means of configuring database URLs may be customized within the env.py
+# file.
+sqlalchemy.url = sqlite:///./data/database.db
+
+
+[post_write_hooks]
+# post_write_hooks defines scripts or Python functions that are run
+# on newly generated revision scripts.  See the documentation for further
+# detail and examples
+
+# format using "black" - use the console_scripts runner, against the "black" entrypoint
+# hooks = black
+# black.type = console_scripts
+# black.entrypoint = black
+# black.options = -l 79 REVISION_SCRIPT_FILENAME
+
+# lint with attempts to fix using "ruff" - use the module runner, against the "ruff" module
+# hooks = ruff
+# ruff.type = module
+# ruff.module = ruff
+# ruff.options = check --fix REVISION_SCRIPT_FILENAME
+
+# Alternatively, use the exec runner to execute a binary found on your PATH
+# hooks = ruff
+# ruff.type = exec
+# ruff.executable = ruff
+# ruff.options = check --fix REVISION_SCRIPT_FILENAME
+
+# Logging configuration.  This is also consumed by the user-maintained
+# env.py script only.
+[loggers]
+keys = root,sqlalchemy,alembic
+
+[handlers]
+keys = console
+
+[formatters]
+keys = generic
+
+[logger_root]
+level = WARNING
+handlers = console
+qualname =
+
+[logger_sqlalchemy]
+level = WARNING
+handlers =
+qualname = sqlalchemy.engine
+
+[logger_alembic]
+level = INFO
+handlers =
+qualname = alembic
+
+[handler_console]
+class = StreamHandler
+args = (sys.stderr,)
+level = NOTSET
+formatter = generic
+
+[formatter_generic]
+format = %(levelname)-5.5s [%(name)s] %(message)s
+datefmt = %H:%M:%S

backend/alembic/env.py

@@ -0,0 +1,78 @@
+from logging.config import fileConfig
+import logging
+
+from sqlalchemy import engine_from_config
+from sqlalchemy import pool
+
+from alembic import context
+
+# this is the Alembic Config object, which provides
+# access to the values within the .ini file in use.
+config = context.config
+
+# Interpret the config file for Python logging.
+# This line sets up loggers basically.
+if config.config_file_name is not None:
+    fileConfig(config.config_file_name)
+
+# add your model's MetaData object here
+# for 'autogenerate' support
+from models import Base
+target_metadata = Base.metadata
+
+# other values from the config, defined by the needs of env.py,
+# can be acquired:
+# my_important_option = config.get_main_option("my_important_option")
+# ... etc.
+
+
+def run_migrations_offline() -> None:
+    """Run migrations in 'offline' mode.
+
+    This configures the context with just a URL
+    and not an Engine, though an Engine is acceptable
+    here as well.  By skipping the Engine creation
+    we don't even need a DBAPI to be available.
+
+    Calls to context.execute() here emit the given string to the
+    script output.
+
+    """
+    url = config.get_main_option("sqlalchemy.url")
+    context.configure(
+        url=url,
+        target_metadata=target_metadata,
+        literal_binds=True,
+        dialect_opts={"paramstyle": "named"},
+    )
+
+    with context.begin_transaction():
+        context.run_migrations()
+
+
+def run_migrations_online() -> None:
+    """Run migrations in 'online' mode.
+
+    In this scenario we need to create an Engine
+    and associate a connection with the context.
+
+    """
+    connectable = engine_from_config(
+        config.get_section(config.config_ini_section, {}),
+        prefix="sqlalchemy.",
+        poolclass=pool.NullPool,
+    )
+
+    with connectable.connect() as connection:
+        context.configure(
+            connection=connection, target_metadata=target_metadata
+        )
+
+        with context.begin_transaction():
+            context.run_migrations()
+
+
+if context.is_offline_mode():
+    run_migrations_offline()
+else:
+    run_migrations_online()

backend/alembic/script.py.mako

@@ -0,0 +1,28 @@
+"""${message}
+
+Revision ID: ${up_revision}
+Revises: ${down_revision | comma,n}
+Create Date: ${create_date}
+
+"""
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+${imports if imports else ""}
+
+# revision identifiers, used by Alembic.
+revision: str = ${repr(up_revision)}
+down_revision: Union[str, Sequence[str], None] = ${repr(down_revision)}
+branch_labels: Union[str, Sequence[str], None] = ${repr(branch_labels)}
+depends_on: Union[str, Sequence[str], None] = ${repr(depends_on)}
+
+
+def upgrade() -> None:
+    """Upgrade schema."""
+    ${upgrades if upgrades else "pass"}
+
+
+def downgrade() -> None:
+    """Downgrade schema."""
+    ${downgrades if downgrades else "pass"}

backend/app.py

@@ -1,10 +1,39 @@
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
+from contextlib import asynccontextmanager
+import subprocess
+import sys
+import os
 
-from routes import account, messaging, profile
+from routes import account, messaging, profile, push
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    # Startup - run migration in separate process to avoid logging interference
+    try:
+        print("Starting database migration check...")
+        # Run migration in a separate process
+        subprocess.run(
+            [
+                sys.executable, 
+                "-c", 
+                "import sys; sys.path.append('.'); from migration import run_migrations; run_migrations()"
+            ], 
+            cwd=os.path.dirname(os.path.abspath(__file__))
+            # No capture_output - let it stream to terminal in real-time
+            # No text=True - let it use the terminal's encoding
+        )
+    except Exception as e:
+        print(f"Failed to run database migrations: {e}")
+        raise
+    
+    yield
+    
+    # Shutdown (if needed in the future)
+    # logger.info("Application shutdown")
 
 # Инициализация FastAPI
-app = FastAPI(title="PixelChat")
+app = FastAPI(title="FromChat", lifespan=lifespan)
 
 # CORS
 app.add_middleware(
@@ -18,4 +47,5 @@ app.add_middleware(
 # Routes
 app.include_router(account.router)
 app.include_router(messaging.router)
-app.include_router(profile.router)
+app.include_router(profile.router)
+app.include_router(push.router, prefix="/push")

backend/generate_vapid_keys.py

@@ -0,0 +1,45 @@
+#!/usr/bin/env python3
+"""
+Generate VAPID keys for push notifications
+Run this script to generate new VAPID keys for your application
+"""
+
+import sys
+import base64
+from cryptography.hazmat.primitives import serialization
+from cryptography.hazmat.primitives.asymmetric import ec
+from cryptography.hazmat.backends import default_backend
+
+def generate_vapid_keys():
+    """Generate VAPID keys for push notifications"""
+    try:
+        private_key = ec.generate_private_key(ec.SECP256R1(), default_backend())
+        public_key = private_key.public_key()
+        
+        # Convert to base64 for web push
+        private_key_b64 = base64.urlsafe_b64encode(
+            private_key.private_bytes(
+                encoding=serialization.Encoding.DER,
+                format=serialization.PrivateFormat.PKCS8,
+                encryption_algorithm=serialization.NoEncryption()
+            )
+        ).decode('utf-8').rstrip('=')
+        
+        # Get the raw uncompressed public key point (65 bytes: 0x04 + 32 bytes x + 32 bytes y)
+        public_numbers = public_key.public_numbers()
+        x_bytes = public_numbers.x.to_bytes(32, 'big')
+        y_bytes = public_numbers.y.to_bytes(32, 'big')
+        public_key_raw = b'\x04' + x_bytes + y_bytes
+        
+        public_key_b64 = base64.urlsafe_b64encode(public_key_raw).decode('utf-8').rstrip('=')
+        
+        print(f"VAPID_PRIVATE_KEY=\"{private_key_b64}\"")
+        print(f"VAPID_PUBLIC_KEY=\"{public_key_b64}\"")
+        
+        return private_key_b64, public_key_b64
+    except Exception as e:
+        print(f"Error generating VAPID keys: {e}", file=sys.stderr)
+        return None, None
+
+if __name__ == "__main__":
+    generate_vapid_keys()

backend/migration.py

@@ -0,0 +1,523 @@
+"""
+Database migration utility using Alembic.
+This module handles running database migrations on startup.
+"""
+import os
+import logging
+from alembic import command
+from alembic.config import Config
+from alembic.runtime.migration import MigrationContext
+from sqlalchemy import create_engine
+from constants import DATABASE_URL
+import logging
+
+logger = logging.getLogger(__name__)
+
+def run_migrations():
+    """
+    Run database migrations using Alembic.
+    This function will upgrade the database to the latest migration.
+    Fully automated - handles all scenarios automatically.
+    """
+    try:
+        # Get the directory where this script is located
+        current_dir = os.path.dirname(os.path.abspath(__file__))
+        
+        # Create Alembic configuration
+        alembic_cfg = Config(os.path.join(current_dir, "alembic.ini"))
+        
+        # Disable Alembic's logging configuration to avoid interfering with FastAPI
+        alembic_cfg.set_main_option("configure_logging", "false")
+        
+        # Set the database URL in the config
+        alembic_cfg.set_main_option("sqlalchemy.url", DATABASE_URL)
+        
+        # Check if any migration files exist
+        versions_dir = os.path.join(current_dir, "alembic", "versions")
+
+        if not os.path.exists(versions_dir):
+            os.makedirs(versions_dir)
+
+        migration_files = [f for f in os.listdir(versions_dir) if f.endswith('.py') and not f.startswith('__')]
+        
+        if not migration_files:
+            logger.info("No migration files found. Creating initial migration...")
+            # Check if database exists and has tables
+            engine = create_engine(DATABASE_URL)
+            with engine.connect() as connection:
+                from sqlalchemy import text
+                result = connection.execute(text("SELECT name FROM sqlite_master WHERE type='table' AND name != 'alembic_version'"))
+                existing_tables = result.fetchall()
+                
+                if existing_tables:
+                    logger.info("Found existing database with tables. Creating migration to match current schema...")
+                    # Create migration with autogenerate to detect differences
+                    command.revision(alembic_cfg, autogenerate=True, message="Initial migration from existing database")
+                    
+                    # Check if the generated migration is empty (common with existing databases)
+                    versions_dir = os.path.join(current_dir, "alembic", "versions")
+                    migration_files = [f for f in os.listdir(versions_dir) if f.endswith('.py') and not f.startswith('__')]
+                    if migration_files:
+                        latest_migration = max(migration_files)
+                        migration_path = os.path.join(versions_dir, latest_migration)
+                        
+                        # Check if migration is empty
+                        with open(migration_path, 'r') as f:
+                            content = f.read()
+                            if 'pass' in content and 'op.create_table' not in content and 'op.add_column' not in content:
+                                logger.info("Generated migration is empty. Creating complete schema migration...")
+                                # Remove the empty migration
+                                os.remove(migration_path)
+                                # Create a complete migration
+                                _create_complete_migration(alembic_cfg)
+                else:
+                    logger.info("No existing tables found. Creating fresh migration...")
+                    # Create fresh migration
+                    command.revision(alembic_cfg, autogenerate=True, message="Initial migration")
+            logger.info("Initial migration created successfully.")
+        else:
+            # Migration files exist, check if we need to create a new migration for schema changes
+            logger.info("Migration files exist. Checking for pending schema changes...")
+            try:
+                # Create a new migration to detect any schema changes
+                command.revision(alembic_cfg, autogenerate=True, message="Auto-generated migration for schema changes")
+                
+                # Check if the new migration is empty (no changes detected)
+                migration_files = [f for f in os.listdir(versions_dir) if f.endswith('.py') and not f.startswith('__')]
+                if migration_files:
+                    latest_migration = max(migration_files)
+                    migration_path = os.path.join(versions_dir, latest_migration)
+                    
+                    # Check if migration is empty
+                    with open(migration_path, 'r') as f:
+                        content = f.read()
+                        if 'pass' in content and 'op.create_table' not in content and 'op.add_column' not in content and 'op.drop_table' not in content and 'op.drop_column' not in content:
+                            logger.info("No schema changes detected. Removing empty migration...")
+                            # Remove the empty migration
+                            os.remove(migration_path)
+                        else:
+                            logger.info("Schema changes detected. New migration created.")
+                            
+            except Exception as e:
+                logger.info(f"No new migrations needed or error creating migration: {e}")
+                pass
+        
+        # Run the upgrade command
+        logger.info("Running database migrations...")
+        try:
+            command.upgrade(alembic_cfg, "head")
+            logger.info("Database migrations completed successfully.")
+        except Exception as upgrade_error:
+            if "Can't locate revision identified by 'direct_creation'" in str(upgrade_error):
+                logger.info("Found 'direct_creation' revision - resetting migration state...")
+                # Clear the alembic_version table and start fresh
+                engine = create_engine(DATABASE_URL)
+                with engine.connect() as connection:
+                    from sqlalchemy import text
+                    connection.execute(text("DELETE FROM alembic_version"))
+                    connection.commit()
+                # Try upgrade again
+                command.upgrade(alembic_cfg, "head")
+                logger.info("Database migrations completed successfully after reset.")
+            else:
+                raise upgrade_error
+        
+    except Exception as e:
+        logger.error(f"Error running database migrations: {e}")
+        # Fully automated recovery - handle ALL error scenarios
+        logger.info("Attempting automated recovery...")
+        try:
+            # Clear the alembic_version table to reset state
+            engine = create_engine(DATABASE_URL)
+            with engine.connect() as connection:
+                from sqlalchemy import text
+                connection.execute(text("DROP TABLE IF EXISTS alembic_version"))
+                connection.commit()
+            
+            # Remove any existing migration files to start fresh
+            versions_dir = os.path.join(current_dir, "alembic", "versions")
+            for file in os.listdir(versions_dir):
+                if file.endswith('.py') and not file.startswith('__'):
+                    os.remove(os.path.join(versions_dir, file))
+            
+            # Create a completely fresh migration with full schema
+            logger.info("Creating fresh migration with complete schema...")
+            _create_complete_migration(alembic_cfg)
+            
+            # Run the migration
+            command.upgrade(alembic_cfg, "head")
+            logger.info("Automated recovery completed successfully.")
+            
+        except Exception as recovery_error:
+            logger.error(f"Automated recovery failed: {recovery_error}")
+            # Last resort: create database using SQLAlchemy directly
+            logger.info("Using fallback: creating database directly...")
+            _create_database_directly()
+            logger.info("Database created successfully using fallback method.")
+
+
+def _create_complete_migration(alembic_cfg):
+    """Create a complete migration file with all database schema."""
+    # Create a new migration file
+    command.revision(alembic_cfg, message="Complete schema migration")
+    
+    # Get the latest migration file
+    versions_dir = os.path.join(os.path.dirname(os.path.abspath(__file__)), "alembic", "versions")
+    migration_files = [f for f in os.listdir(versions_dir) if f.endswith('.py') and not f.startswith('__')]
+    latest_migration = max(migration_files) if migration_files else None
+    
+    if latest_migration:
+        migration_path = os.path.join(versions_dir, latest_migration)
+        _populate_migration_file(migration_path)
+
+
+def _populate_migration_file(migration_path):
+    """Populate a migration file with the complete database schema from models."""
+    # Generate the migration content dynamically from models
+    migration_content = _generate_migration_from_models()
+    
+    # Read the current migration file
+    with open(migration_path, 'r') as f:
+        content = f.read()
+    
+    # Add datetime import if needed
+    if "datetime.now" in migration_content and "from datetime import datetime" not in content:
+        # Insert the import after the existing imports
+        import re
+        content = re.sub(
+            r'(from alembic import op\nimport sqlalchemy as sa\n)',
+            r'\1from datetime import datetime\n',
+            content
+        )
+    
+    # Replace the empty upgrade/downgrade functions
+    import re
+    # More flexible regex to match the actual content
+    content = re.sub(
+        r'def upgrade\(\) -> None:.*?pass.*?(?=\n\ndef downgrade|\n\nif __name__|\Z)',
+        migration_content,
+        content,
+        flags=re.DOTALL
+    )
+    
+    # Write the updated content back
+    with open(migration_path, 'w') as f:
+        f.write(content)
+
+
+def _generate_migration_from_models():
+    """Generate migration content dynamically from SQLAlchemy models."""
+    from models import Base
+    import sqlalchemy as sa
+    from datetime import datetime
+    
+    # Generate migration content using Alembic's op functions
+    upgrade_statements = []
+    downgrade_statements = []
+    
+    # Get all tables from Base metadata
+    for table_name, table in Base.metadata.tables.items():
+        if table_name != 'alembic_version':  # Skip alembic_version table
+            # Check if table exists and compare schema
+            schema_diff = _detect_schema_differences(table_name, table)
+            
+            if schema_diff['table_exists']:
+                if schema_diff['needs_update']:
+                    # Generate ALTER TABLE statements for existing table
+                    upgrade_statements.append(f"    # Update {table_name} table schema")
+                    for statement in schema_diff['alter_statements']:
+                        upgrade_statements.append(f"    {statement}")
+                else:
+                    # Table exists and is up to date - skip creating it
+                    upgrade_statements.append(f"    # Table {table_name} already exists and is up to date")
+            else:
+                # Generate CREATE TABLE for new table
+                table_code = _generate_table_creation_code(table_name, table)
+                upgrade_statements.append(f"    # Create {table_name} table")
+                upgrade_statements.append(table_code)
+            
+            # Only add to downgrade if table actually exists
+            if schema_diff['table_exists']:
+                downgrade_statements.append(f"    # op.drop_table('{table_name}')  # Skipped - table exists")
+            else:
+                downgrade_statements.append(f"    op.drop_table('{table_name}')")
+    
+    # Combine all statements
+    upgrade_content = "def upgrade() -> None:\n    \"\"\"Upgrade schema.\"\"\"\n" + "\n".join(upgrade_statements)
+    downgrade_content = "def downgrade() -> None:\n    \"\"\"Downgrade schema.\"\"\"\n" + "\n".join(downgrade_statements)
+    
+    return upgrade_content + "\n\n" + downgrade_content
+
+
+def _detect_schema_differences(table_name, expected_table):
+    """Detect differences between existing table and expected schema."""
+    engine = create_engine(DATABASE_URL)
+    
+    with engine.connect() as connection:
+        from sqlalchemy import text, inspect
+        
+        # Check if table exists
+        inspector = inspect(connection)
+        if table_name not in inspector.get_table_names():
+            return {
+                'table_exists': False,
+                'needs_update': False,
+                'alter_statements': []
+            }
+        
+        # Get existing columns
+        existing_columns = inspector.get_columns(table_name)
+        existing_column_names = {col['name'] for col in existing_columns}
+        
+        # Get expected columns
+        expected_column_names = {col.name for col in expected_table.columns}
+        
+        # Check for missing columns
+        missing_columns = expected_column_names - existing_column_names
+        extra_columns = existing_column_names - expected_column_names
+        
+        alter_statements = []
+        
+        # Add missing columns
+        for column in expected_table.columns:
+            if column.name in missing_columns:
+                column_def = _generate_column_definition(column)
+                alter_statements.append(f"op.add_column('{table_name}', {column_def})")
+        
+        # Add missing indexes
+        for index in expected_table.indexes:
+            if not index.unique:
+                cols = "', '".join([col.name for col in index.columns])
+                alter_statements.append(f"op.create_index(op.f('ix_{table_name}_{index.name}'), '{table_name}', ['{cols}'], unique=False)")
+        
+        return {
+            'table_exists': True,
+            'needs_update': len(alter_statements) > 0,
+            'alter_statements': alter_statements
+        }
+
+
+def _generate_column_definition(column):
+    """Generate column definition for ALTER TABLE."""
+    type_def = _get_column_type(column)
+    nullable = "nullable=True" if column.nullable else "nullable=False"
+    
+    definition = f"sa.Column('{column.name}', {type_def}, {nullable}"
+    
+    # Handle default values properly
+    if column.default is not None:
+        if hasattr(column.default, 'arg'):
+            # Handle callable defaults
+            if callable(column.default.arg):
+                definition += f", default=datetime.now"
+            else:
+                definition += f", default={repr(column.default.arg)}"
+        else:
+            definition += f", default={repr(column.default)}"
+    
+    definition += ")"
+    return definition
+
+
+def _generate_table_creation_code(table_name, table):
+    """Generate op.create_table code for a SQLAlchemy table."""
+    lines = [f"    op.create_table('{table_name}',"]
+    
+    # Collect all table items (columns + constraints)
+    all_items = []
+    
+    # Add columns
+    for column in table.columns:
+        column_def = f"        sa.Column('{column.name}', {_get_column_type(column)}, nullable={column.nullable}"
+        if column.default is not None:
+            # Handle callable defaults properly
+            if hasattr(column.default, 'arg') and callable(column.default.arg):
+                column_def += f", default=datetime.now"
+            else:
+                column_def += f", default={repr(column.default)}"
+        column_def += ")"
+        all_items.append(column_def)
+    
+    # Add constraints
+    for constraint in table.constraints:
+        if hasattr(constraint, 'columns'):
+            if constraint.__class__.__name__ == 'PrimaryKeyConstraint':
+                all_items.append(f"        sa.PrimaryKeyConstraint('{constraint.columns.keys()[0]}')")
+            elif constraint.__class__.__name__ == 'UniqueConstraint':
+                cols = "', '".join(constraint.columns.keys())
+                all_items.append(f"        sa.UniqueConstraint('{cols}')")
+    
+    # Add foreign key constraints
+    for fk in table.foreign_keys:
+        all_items.append(f"        sa.ForeignKeyConstraint(['{fk.parent.name}'], ['{fk.column.table.name}.{fk.column.name}'], )")
+    
+    # Add all items with commas (except the last one)
+    for i, item in enumerate(all_items):
+        if i < len(all_items) - 1:
+            item += ","
+        lines.append(item)
+    
+    lines.append("    )")
+    
+    # Add indexes with IF NOT EXISTS equivalent using try/except
+    for index in table.indexes:
+        if not index.unique:
+            cols = "', '".join([col.name for col in index.columns])
+            lines.append(f"    # Create index for {table_name}")
+            lines.append(f"    try:")
+            lines.append(f"        op.create_index(op.f('ix_{table_name}_{index.name}'), '{table_name}', ['{cols}'], unique=False)")
+            lines.append(f"    except Exception:")
+            lines.append(f"        pass  # Index may already exist")
+    
+    return "\n".join(lines)
+
+
+def _get_column_type(column):
+    """Get SQLAlchemy column type string."""
+    type_name = column.type.__class__.__name__
+    
+    if type_name == 'String':
+        return f"sa.String(length={column.type.length})"
+    elif type_name == 'Integer':
+        return "sa.Integer()"
+    elif type_name == 'Text':
+        return "sa.Text()"
+    elif type_name == 'Boolean':
+        return "sa.Boolean()"
+    elif type_name == 'DateTime':
+        return "sa.DateTime()"
+    else:
+        return f"sa.{type_name}()"
+
+
+def _create_database_directly():
+    """Fallback method: create database directly using SQLAlchemy."""
+    from models import Base
+    from db import engine
+    from sqlalchemy import text, inspect
+    
+    # Check existing tables and update schema
+    with engine.connect() as connection:
+        inspector = inspect(connection)
+        existing_tables = inspector.get_table_names()
+        
+        # For each model table, check if it needs updates
+        for table_name, table in Base.metadata.tables.items():
+            if table_name != 'alembic_version':
+                if table_name in existing_tables:
+                    # Table exists, check for missing columns
+                    existing_columns = {col['name'] for col in inspector.get_columns(table_name)}
+                    expected_columns = {col.name for col in table.columns}
+                    missing_columns = expected_columns - existing_columns
+                    
+                    # Add missing columns
+                    for column in table.columns:
+                        if column.name in missing_columns:
+                            # Convert to raw SQL for direct execution
+                            sql_type = _get_sql_type(column)
+                            nullable = "NULL" if column.nullable else "NOT NULL"
+                            
+                            # Handle datetime columns without default (SQLite limitation)
+                            if column.type.__class__.__name__ == 'DateTime':
+                                # Add column without default, then update existing rows
+                                alter_sql = f"ALTER TABLE {table_name} ADD COLUMN {column.name} {sql_type} {nullable}"
+                                try:
+                                    connection.execute(text(alter_sql))
+                                    logger.info(f"Added column {column.name} to {table_name}")
+                                    
+                                    # Update existing rows with current timestamp
+                                    update_sql = f"UPDATE {table_name} SET {column.name} = CURRENT_TIMESTAMP WHERE {column.name} IS NULL"
+                                    connection.execute(text(update_sql))
+                                    logger.info(f"Updated {column.name} with current timestamp")
+                                except Exception as e:
+                                    logger.error(f"Could not add column {column.name}: {e}")
+                            else:
+                                # Handle other column types with defaults
+                                default_clause = ""
+                                if column.default is not None:
+                                    if hasattr(column.default, 'arg') and callable(column.default.arg):
+                                        # Skip callable defaults for SQLite compatibility
+                                        pass
+                                    elif hasattr(column.default, 'arg'):
+                                        default_clause = f" DEFAULT {repr(column.default.arg)}"
+                                
+                                alter_sql = f"ALTER TABLE {table_name} ADD COLUMN {column.name} {sql_type} {nullable}{default_clause}"
+                                try:
+                                    connection.execute(text(alter_sql))
+                                    logger.info(f"Added column {column.name} to {table_name}")
+                                except Exception as e:
+                                    logger.error(f"Could not add column {column.name}: {e}")
+                else:
+                    # Table doesn't exist, create it
+                    logger.info(f"Creating table {table_name}")
+        
+        # Create alembic_version table manually
+        connection.execute(text("""
+            CREATE TABLE IF NOT EXISTS alembic_version (
+                version_num VARCHAR(32) NOT NULL,
+                CONSTRAINT alembic_version_pkc PRIMARY KEY (version_num)
+            )
+        """))
+        connection.execute(text("INSERT OR IGNORE INTO alembic_version (version_num) VALUES ('direct_creation')"))
+        connection.commit()
+
+
+def _get_sql_type(column):
+    """Get SQL type for direct SQL execution."""
+    type_name = column.type.__class__.__name__
+    
+    if type_name == 'String':
+        return f"VARCHAR({column.type.length})"
+    elif type_name == 'Integer':
+        return "INTEGER"
+    elif type_name == 'Text':
+        return "TEXT"
+    elif type_name == 'Boolean':
+        return "BOOLEAN"
+    elif type_name == 'DateTime':
+        return "DATETIME"
+    else:
+        return "TEXT"  # fallback
+
+
+def check_migration_status():
+    """
+    Check if the database needs migrations.
+    Returns True if migrations are needed, False otherwise.
+    """
+    try:
+        # Create engine
+        engine = create_engine(DATABASE_URL)
+        
+        # Check if alembic_version table exists
+        with engine.connect() as connection:
+            # Check if alembic_version table exists
+            from sqlalchemy import text
+            result = connection.execute(
+                text("SELECT name FROM sqlite_master WHERE type='table' AND name='alembic_version'")
+            )
+            alembic_table_exists = result.fetchone() is not None
+            
+            if not alembic_table_exists:
+                return True
+            
+            # Get current migration context
+            context = MigrationContext.configure(connection)
+            current_rev = context.get_current_revision()
+            
+            # Get the latest revision from alembic
+            current_dir = os.path.dirname(os.path.abspath(__file__))
+            alembic_cfg = Config(os.path.join(current_dir, "alembic.ini"))
+            script_dir = command.ScriptDirectory.from_config(alembic_cfg)
+            head_rev = script_dir.get_current_head()
+            
+            return current_rev != head_rev
+            
+    except Exception as e:
+        logger.error(f"Error checking migration status: {e}")
+        return True  # Assume migrations are needed if we can't check
+
+
+if __name__ == "__main__":
+    # This allows running migrations directly
+    run_migrations()

backend/models.py

@@ -1,8 +1,7 @@
 from sqlalchemy.ext.declarative import declarative_base
-from sqlalchemy import Column, Integer, String, Text, Boolean, DateTime, ForeignKey, inspect, text
+from sqlalchemy import Column, Integer, String, Text, Boolean, DateTime, ForeignKey, inspect, null, text, UniqueConstraint
 from sqlalchemy.orm import relationship
 from datetime import datetime
-from db import engine
 from pydantic import BaseModel
 
 Base = declarative_base()
@@ -36,6 +35,110 @@ class Message(Base):
 
     author = relationship("User", back_populates="messages")
     reply_to = relationship("Message", remote_side=[id])
+    files = relationship("MessageFile", back_populates="message", cascade="all, delete-orphan", lazy="select")
+    reactions = relationship("Reaction", cascade="all, delete-orphan", lazy="select")
+
+
+class MessageFile(Base):
+    __tablename__ = "message_file"
+
+    id = Column(Integer, primary_key=True, index=True)
+    message_id = Column(Integer, ForeignKey("message.id"), nullable=False, index=True)
+    path = Column(Text, nullable=False)
+    name = Column(Text, nullable=False)
+
+    message = relationship("Message", back_populates="files")
+
+
+class CryptoPublicKey(Base):
+    __tablename__ = "crypto_public_key"
+
+    id = Column(Integer, primary_key=True, index=True)
+    user_id = Column(Integer, ForeignKey("user.id"), nullable=False, unique=True)
+    public_key_b64 = Column(Text, nullable=False)
+
+
+class CryptoBackup(Base):
+    __tablename__ = "crypto_backup"
+
+    id = Column(Integer, primary_key=True, index=True)
+    user_id = Column(Integer, ForeignKey("user.id"), nullable=False, unique=True)
+    blob_json = Column(Text, nullable=False)
+
+
+class DMEnvelope(Base):
+    __tablename__ = "dm_envelope"
+
+    id = Column(Integer, primary_key=True, index=True)
+    sender_id = Column(Integer, ForeignKey("user.id"), nullable=False)
+    recipient_id = Column(Integer, ForeignKey("user.id"), nullable=False)
+    iv_b64 = Column(Text, nullable=False)
+    ciphertext_b64 = Column(Text, nullable=False)
+    salt_b64 = Column(Text, nullable=False)
+    iv2_b64 = Column(Text, nullable=False)
+    wrapped_mk_b64 = Column(Text, nullable=False)
+    reply_to_id = Column(Integer, nullable=True)
+    timestamp = Column(DateTime, default=datetime.now)
+    files = relationship("DMFile", back_populates="message", cascade="all, delete-orphan", lazy="select")
+    reactions = relationship("DMReaction", cascade="all, delete-orphan", lazy="select")
+
+
+class DMFile(Base):
+    __tablename__ = "dm_file"
+
+    id = Column(Integer, primary_key=True, index=True)
+    message_id = Column(Integer, ForeignKey("dm_envelope.id"), nullable=False, index=True)
+    sender_id = Column(Integer, ForeignKey("user.id"), nullable=False)
+    recipient_id = Column(Integer, ForeignKey("user.id"), nullable=False)
+    name = Column(Text, nullable=False)
+    path = Column(Text, nullable=False)
+
+    message = relationship("DMEnvelope", back_populates="files")
+
+
+class PushSubscription(Base):
+    __tablename__ = "push_subscription"
+
+    id = Column(Integer, primary_key=True, index=True)
+    user_id = Column(Integer, ForeignKey("user.id"), nullable=False)
+    endpoint = Column(Text, nullable=False)
+    p256dh_key = Column(Text, nullable=False)
+    auth_key = Column(Text, nullable=False)
+    created_at = Column(DateTime, default=datetime.now)
+    updated_at = Column(DateTime, default=datetime.now, onupdate=datetime.now)
+
+
+class Reaction(Base):
+    __tablename__ = "reaction"
+
+    id = Column(Integer, primary_key=True, index=True)
+    message_id = Column(Integer, ForeignKey("message.id"), nullable=False, index=True)
+    user_id = Column(Integer, ForeignKey("user.id"), nullable=False)
+    emoji = Column(String(10), nullable=False)  # Store emoji as string
+    timestamp = Column(DateTime, default=datetime.now)
+    
+    # Relationships
+    user = relationship("User")
+    
+    # Ensure unique combination of message, user, and emoji
+    __table_args__ = (UniqueConstraint('message_id', 'user_id', 'emoji', name='unique_reaction'),)
+
+
+class DMReaction(Base):
+    __tablename__ = "dm_reaction"
+
+    id = Column(Integer, primary_key=True, index=True)
+    dm_envelope_id = Column(Integer, ForeignKey("dm_envelope.id"), nullable=False, index=True)
+    user_id = Column(Integer, ForeignKey("user.id"), nullable=False)
+    emoji = Column(String(10), nullable=False)  # Store emoji as string
+    timestamp = Column(DateTime, default=datetime.now)
+    
+    # Relationships
+    user = relationship("User")
+    dm_envelope = relationship("DMEnvelope", overlaps="reactions")
+    
+    # Ensure unique combination of dm_envelope, user, and emoji
+    __table_args__ = (UniqueConstraint('dm_envelope_id', 'user_id', 'emoji', name='unique_dm_reaction'),)
 
 
 # Pydantic модели
@@ -52,17 +155,13 @@ class RegisterRequest(BaseModel):
 
 class SendMessageRequest(BaseModel):
     content: str
+    reply_to_id: int | None = None
 
 
 class EditMessageRequest(BaseModel):
     content: str
 
 
-class ReplyMessageRequest(BaseModel):
-    content: str
-    reply_to_id: int
-
-
 class DeleteMessageRequest(BaseModel):
     message_id: int
 
@@ -71,6 +170,11 @@ class UpdateBioRequest(BaseModel):
     bio: str
 
 
+class PushSubscriptionRequest(BaseModel):
+    endpoint: str
+    keys: dict
+
+
 class UserProfileResponse(BaseModel):
     id: int
     username: str
@@ -97,5 +201,39 @@ class MessageResponse(BaseModel):
         from_attributes = True
 
 
-# Создание таблиц
-Base.metadata.create_all(bind=engine)
+class ReactionRequest(BaseModel):
+    message_id: int
+    emoji: str
+
+
+class ReactionResponse(BaseModel):
+    id: int
+    message_id: int
+    user_id: int
+    emoji: str
+    timestamp: datetime
+    username: str
+
+    class Config:
+        from_attributes = True
+
+
+class DMReactionRequest(BaseModel):
+    dm_envelope_id: int
+    emoji: str
+
+
+class DMReactionResponse(BaseModel):
+    id: int
+    dm_envelope_id: int
+    user_id: int
+    emoji: str
+    timestamp: datetime
+    username: str
+
+    class Config:
+        from_attributes = True
+
+
+# Tables are now created through Alembic migrations
+# Base.metadata.create_all(bind=engine)

backend/push_service.py

@@ -0,0 +1,152 @@
+import json
+import logging
+import os
+from typing import List, Optional
+from sqlalchemy.orm import Session
+from pywebpush import webpush, WebPushException
+from models import PushSubscription, User, Message, DMEnvelope
+
+logger = logging.getLogger("uvicorn.error")
+
+class PushNotificationService:
+    def __init__(self):
+        self.vapid_private_key = os.getenv("VAPID_PRIVATE_KEY")
+        self.vapid_public_key = os.getenv("VAPID_PUBLIC_KEY")
+
+        if (not self.vapid_public_key) or (not self.vapid_private_key):
+            raise ValueError("VAPID public or private key is None")
+
+        self.vapid_claims = {
+            "sub": "mailto:support@fromchat.ru",
+            "aud": "https://fcm.googleapis.com"
+        }
+
+    async def subscribe_user(self, db: Session, user_id: int, endpoint: str, p256dh_key: str, auth_key: str) -> bool:
+        """Subscribe a user to push notifications"""
+        try:
+            # Check if user already has a subscription
+            existing_sub = db.query(PushSubscription).filter(PushSubscription.user_id == user_id).first()
+            
+            if existing_sub:
+                # Update existing subscription
+                existing_sub.endpoint = endpoint
+                existing_sub.p256dh_key = p256dh_key
+                existing_sub.auth_key = auth_key
+            else:
+                # Create new subscription
+                new_sub = PushSubscription(
+                    user_id=user_id,
+                    endpoint=endpoint,
+                    p256dh_key=p256dh_key,
+                    auth_key=auth_key
+                )
+                db.add(new_sub)
+            
+            db.commit()
+            logger.info(f"Push subscription saved for user {user_id}")
+            return True
+        except Exception as e:
+            logger.error(f"Failed to save push subscription for user {user_id}: {e}")
+            db.rollback()
+            return False
+
+    async def send_public_message_notification(self, db: Session, message: Message, exclude_user_id: Optional[int] = None):
+        """Send push notification for a new public chat message"""
+        try:
+            # Get all users except the sender
+            users = db.query(User).filter(User.id != message.user_id)
+            if exclude_user_id:
+                users = users.filter(User.id != exclude_user_id)
+            
+            for user in users:
+                # Check if user has push subscription before trying to send
+                subscription = db.query(PushSubscription).filter(PushSubscription.user_id == user.id).first()
+                if not subscription:
+                    continue
+                    
+                await self._send_notification_to_user(
+                    db, user.id, 
+                    f"New message from {message.author.username}",
+                    message.content[:100] + ("..." if len(message.content) > 100 else ""),
+                    message.author.profile_picture,
+                    {
+                        "type": "public_message",
+                        "message_id": message.id,
+                        "sender_id": message.user_id,
+                        "sender_username": message.author.username
+                    }
+                )
+        except Exception as e:
+            logger.error(f"Failed to send public message notifications: {e}")
+
+    async def send_dm_notification(self, db: Session, dm_envelope: DMEnvelope, sender: User):
+        """Send push notification for a new DM"""
+        try:
+            await self._send_notification_to_user(
+                db, dm_envelope.recipient_id,
+                f"New message from {sender.username}",
+                "You have a new direct message",
+                sender.profile_picture,
+                {
+                    "type": "dm",
+                    "dm_id": dm_envelope.id,
+                    "sender_id": sender.id,
+                    "sender_username": sender.username
+                }
+            )
+        except Exception as e:
+            logger.error(f"Failed to send DM notification: {e}")
+
+    async def _send_notification_to_user(self, db: Session, user_id: int, title: str, body: str, icon: Optional[str], data: dict):
+        """Send a push notification to a specific user"""
+        try:
+            subscription = db.query(PushSubscription).filter(PushSubscription.user_id == user_id).first()
+            if not subscription:
+                return
+
+            payload = {
+                "title": title,
+                "body": body,
+                "icon": icon or "/logo.png",
+                "tag": f"message_{user_id}",
+                "data": data
+            }
+
+            subscription_info = {
+                "endpoint": subscription.endpoint,
+                "keys": {
+                    "p256dh": subscription.p256dh_key,
+                    "auth": subscription.auth_key
+                }
+            }
+
+            webpush(
+                subscription_info=subscription_info,
+                data=json.dumps(payload),
+                vapid_private_key=self.vapid_private_key,
+                vapid_claims=self.vapid_claims
+            )
+            
+        except WebPushException as e:
+            logger.error(f"WebPush error for user {user_id}: {e}")
+            # If the subscription is invalid, remove it
+            if hasattr(e, 'response') and e.response and e.response.status_code in [410, 404]:
+                db.query(PushSubscription).filter(PushSubscription.user_id == user_id).delete()
+                db.commit()
+        except Exception as e:
+            logger.error(f"Failed to send push notification to user {user_id}: {e}")
+
+    async def unsubscribe_user(self, db: Session, user_id: int) -> bool:
+        """Unsubscribe a user from push notifications"""
+        try:
+            db.query(PushSubscription).filter(PushSubscription.user_id == user_id).delete()
+            db.commit()
+            logger.info(f"Push subscription removed for user {user_id}")
+            return True
+        except Exception as e:
+            logger.error(f"Failed to remove push subscription for user {user_id}: {e}")
+            db.rollback()
+            return False
+
+# Global instance
+push_service = PushNotificationService()

backend/requirements.txt

@@ -5,4 +5,8 @@ sqlalchemy>=2.0.43
 bcrypt>=4.3.0
 websockets>=15.0.1
 Pillow>=10.0.0
-python-multipart>=0.0.6
+python-multipart>=0.0.6
+pywebpush>=1.14.0
+cryptography>=41.0.0
+alembic>=1.13.2
+better-profanity>=0.7.0

backend/routes/account.py

@@ -2,10 +2,9 @@ from datetime import datetime
 from fastapi import APIRouter, Depends, HTTPException, status
 from sqlalchemy.orm import Session
 
-from routes.messaging import convert_message
 from constants import OWNER_USERNAME
 from dependencies import get_current_user, get_db
-from models import LoginRequest, RegisterRequest, User
+from models import LoginRequest, RegisterRequest, User, CryptoPublicKey, CryptoBackup
 from utils import create_token, get_password_hash, verify_password
 from validation import is_valid_password, is_valid_username
 
@@ -18,6 +17,8 @@ def convert_user(user: User) -> dict:
         "last_seen": user.last_seen.isoformat(),
         "online": user.online,
         "username": user.username,
+        "profile_picture": user.profile_picture,
+        "bio": user.bio,
         "admin": user.username == OWNER_USERNAME
     }
 
@@ -115,11 +116,56 @@ def register(request: RegisterRequest, db: Session = Depends(get_db)):
     db.commit()
     db.refresh(new_user)
 
+    token = create_token(new_user.id, new_user.username)
+
     return {
         "status": "success",
-        "message": "Регистрация прошла успешно Теперь вы можете войти."
+        "message": "Регистрация прошла успешно",
+        "token": token,
+        "user": convert_user(new_user)
     }
 
+@router.get("/crypto/public-key")
+def get_public_key(current_user: User = Depends(get_current_user), db: Session = Depends(get_db)):
+    row = db.query(CryptoPublicKey).filter(CryptoPublicKey.user_id == current_user.id).first()
+    return {"publicKey": row.public_key_b64 if row else None}
+
+
+@router.post("/crypto/public-key")
+def set_public_key(payload: dict, current_user: User = Depends(get_current_user), db: Session = Depends(get_db)):
+    pk = payload.get("publicKey")
+    if not pk:
+        raise HTTPException(status_code=400, detail="publicKey required")
+    row = db.query(CryptoPublicKey).filter(CryptoPublicKey.user_id == current_user.id).first()
+    if row:
+        row.public_key_b64 = pk
+    else:
+        row = CryptoPublicKey(user_id=current_user.id, public_key_b64=pk)
+        db.add(row)
+    db.commit()
+    return {"status": "ok"}
+
+
+@router.get("/crypto/backup")
+def get_backup(current_user: User = Depends(get_current_user), db: Session = Depends(get_db)):
+    row = db.query(CryptoBackup).filter(CryptoBackup.user_id == current_user.id).first()
+    return {"blob": row.blob_json if row else None}
+
+
+@router.post("/crypto/backup")
+def set_backup(payload: dict, current_user: User = Depends(get_current_user), db: Session = Depends(get_db)):
+    blob = payload.get("blob")
+    if not blob:
+        raise HTTPException(status_code=400, detail="blob required")
+    row = db.query(CryptoBackup).filter(CryptoBackup.user_id == current_user.id).first()
+    if row:
+        row.blob_json = blob
+    else:
+        row = CryptoBackup(user_id=current_user.id, blob_json=blob)
+        db.add(row)
+    db.commit()
+    return {"status": "ok"}
+
 
 @router.delete("/admin/user/{user_id}")
 def delete_user_as_owner(
@@ -160,4 +206,20 @@ def logout(
     return {
         "status": "success",
         "message": "Logged out successfully"
-    }
+    }
+
+
+@router.get("/users")
+def list_users(current_user: User = Depends(get_current_user), db: Session = Depends(get_db)):
+    users = db.query(User).order_by(User.username.asc()).all()
+    return {
+        "users": [
+            convert_user(u) for u in users if u.id != current_user.id
+        ]
+    }
+
+
+@router.get("/crypto/public-key/of/{user_id}")
+def get_public_key_of(user_id: int, current_user: User = Depends(get_current_user), db: Session = Depends(get_db)):
+    row = db.query(CryptoPublicKey).filter(CryptoPublicKey.user_id == user_id).first()
+    return {"publicKey": row.public_key_b64 if row else None}

backend/routes/messaging.py

@@ -1,16 +1,53 @@
 from datetime import datetime
 import logging
-from fastapi import APIRouter, Depends, HTTPException, WebSocket, WebSocketDisconnect
+from pathlib import Path
+import os
+import re
+import uuid
+from fastapi import APIRouter, Depends, HTTPException, WebSocket, WebSocketDisconnect, UploadFile, File, Form
+from fastapi.responses import FileResponse
 from fastapi.security import HTTPAuthorizationCredentials
 from sqlalchemy.orm import Session
 from dependencies import get_current_user, get_db
 from constants import OWNER_USERNAME
-from models import Message, SendMessageRequest, EditMessageRequest, ReplyMessageRequest, User
+from models import Message, SendMessageRequest, EditMessageRequest, User, DMEnvelope, MessageFile, DMFile, Reaction, ReactionRequest, ReactionResponse, DMReaction, DMReactionRequest, DMReactionResponse
+from push_service import push_service
+from PIL import Image
+import io
+import json
+from better_profanity import profanity as _bp
 
 router = APIRouter()
 logger = logging.getLogger("uvicorn.error")
 
+MAX_TOTAL_SIZE = 4 * 1024 * 1024 * 1024  # 4 GB
+
+FILES_BASE_DIR = Path("data/uploads/files")
+FILES_NORMAL_DIR = FILES_BASE_DIR / "normal"
+FILES_ENCRYPTED_DIR = FILES_BASE_DIR / "encrypted"
+
+os.makedirs(FILES_NORMAL_DIR, exist_ok=True)
+os.makedirs(FILES_ENCRYPTED_DIR, exist_ok=True)
+
+
 def convert_message(msg: Message) -> dict:
+    # Group reactions by emoji
+    reactions_dict = {}
+    if msg.reactions:
+        for reaction in msg.reactions:
+            emoji = reaction.emoji
+            if emoji not in reactions_dict:
+                reactions_dict[emoji] = {
+                    "emoji": emoji,
+                    "count": 0,
+                    "users": []
+                }
+            reactions_dict[emoji]["count"] += 1
+            reactions_dict[emoji]["users"].append({
+                "id": reaction.user_id,
+                "username": reaction.user.username
+            })
+    
     return {
         "id": msg.id,
         "content": msg.content,
@@ -19,31 +56,145 @@ def convert_message(msg: Message) -> dict:
         "is_edited": msg.is_edited,
         "username": msg.author.username,
         "profile_picture": msg.author.profile_picture,
-        "reply_to": convert_message(msg.reply_to) if msg.reply_to else None
+        "reply_to": convert_message(msg.reply_to) if msg.reply_to else None,
+        "reactions": list(reactions_dict.values()),
+        "files": [
+            {
+                "path": f"/api/uploads/files/normal/{Path(f.path).name}",
+                "id": f.id,
+                "name": f.name,
+                "message_id": f.message_id
+            }
+            for f in (msg.files or [])
+        ]
     }
 
 
+def convert_dm_envelope(envelope: DMEnvelope) -> dict:
+    # Group reactions by emoji
+    reactions_dict = {}
+    if envelope.reactions:
+        for reaction in envelope.reactions:
+            emoji = reaction.emoji
+            if emoji not in reactions_dict:
+                reactions_dict[emoji] = {
+                    "emoji": emoji,
+                    "count": 0,
+                    "users": []
+                }
+            reactions_dict[emoji]["count"] += 1
+            reactions_dict[emoji]["users"].append({
+                "id": reaction.user_id,
+                "username": reaction.user.username
+            })
+    
+    return {
+        "id": envelope.id,
+        "senderId": envelope.sender_id,
+        "recipientId": envelope.recipient_id,
+        "iv": envelope.iv_b64,
+        "ciphertext": envelope.ciphertext_b64,
+        "salt": envelope.salt_b64,
+        "iv2": envelope.iv2_b64,
+        "wrappedMk": envelope.wrapped_mk_b64,
+        "timestamp": envelope.timestamp.isoformat(),
+        "reactions": list(reactions_dict.values()),
+        "files": [
+            {
+                "path": f"/api/uploads/files/encrypted/{Path(f.path).name}",
+                "id": f.id,
+                "name": f.name,
+                "dm_envelope_id": f.dm_envelope_id
+            }
+            for f in (envelope.files or [])
+        ]
+    }
+
+# для тех кто читает этот код я эти маты не писал
+# мат писал ии а я сам не матерюсь))
+# - denis0001-dev
+_RU_EXTRA = [
+    "бляд", "блять", "бля", "сука", "суки", "сучка", "мразь", "ебан",
+    "ебать", "ебёт", "ебет", "уёбок", "уебок", "уебище", "пизда",
+    "пиздец", "пизд", "хуй", "хуя", "хуе", "хуё", "хер", "гондон",
+    "долбоёб", "долбоеб", "дебил"
+]
+
+_bp.load_censor_words()
+_bp.add_censor_words(_RU_EXTRA)
+
+# Additional phrase-level filters (case-insensitive)
+_PHRASE_PATTERNS: list[re.Pattern] = [
+    re.compile(r"\bmax\s+is\s+better\b", re.IGNORECASE | re.UNICODE),
+    re.compile(r"\bмакс\s+лучше\b", re.IGNORECASE | re.UNICODE),
+    re.compile(r"\bfromchat\s+г[ао]вно\b", re.IGNORECASE | re.UNICODE),
+    re.compile(r"\bфромчат\s+г[ао]вно\b", re.IGNORECASE | re.UNICODE),
+]
+
+def _mask_span(text: str, start: int, end: int) -> str:
+    return text[:start] + ("\\*" * (end - start)) + text[end:]
+
+def _apply_phrase_filters(text: str) -> str:
+    result = text
+    for pattern in _PHRASE_PATTERNS:
+        # Replace all occurrences; iterate until no more matches to avoid overlapping issues
+        while True:
+            m = pattern.search(result)
+            if not m:
+                break
+            result = _mask_span(result, m.start(), m.end())
+    return result
+
+def filter_profanity(text: str) -> str:
+    preprocessed = _apply_phrase_filters(text)
+    return _bp.censor(preprocessed, censor_char="\\*")
+
+
 @router.post("/send_message")
 async def send_message(
-    request: SendMessageRequest,
+    request: SendMessageRequest | None = None,
     current_user: User = Depends(get_current_user),
-    db: Session = Depends(get_db)
+    db: Session = Depends(get_db),
+    # Optional multipart form support
+    payload: str | None = Form(default=None),
+    files: list[UploadFile] = File(default=[]),
 ):
+    # If payload is provided, prefer it for multipart requests
+    if payload and request is None:
+        # Expect JSON: {"type":"text","data":{"content": str}, "reply_to_id": number|null}
+        try:
+            obj = json.loads(payload)
+            content = obj.get("content", "")
+            reply_to_id = obj.get("reply_to_id", None)
+            request = SendMessageRequest(content=content, reply_to_id=reply_to_id)
+        except Exception:
+            raise HTTPException(status_code=400, detail="Invalid payload JSON")
+
+    if request.reply_to_id:
+        # Check if the message being replied to exists
+        original_message = db.query(Message).filter(Message.id == request.reply_to_id).first()
+        if not original_message:
+            raise HTTPException(status_code=404, detail="Original message not found")
+
     if not request.content.strip():
         raise HTTPException(
             status_code=400,
             detail="No content provided"
         )
 
-    if len(request.content.strip()) > 4096:
+    # Apply profanity filter before storing
+    filtered_content = filter_profanity(request.content.strip())
+
+    if len(filtered_content) > 4096:
         raise HTTPException(
             status_code=400,
             detail="Message too long"
         )
 
     new_message = Message(
-        content=request.content.strip(),
+        content=filtered_content,
         user_id=current_user.id,
+        reply_to_id=request.reply_to_id,
         timestamp=datetime.now()
     )
 
@@ -51,6 +202,77 @@ async def send_message(
     db.commit()
     db.refresh(new_message)
 
+    # Handle files if provided (normal, not encrypted)
+    if files:
+        total_size = 0
+        for up in files:
+            # Accumulate size if available
+            if hasattr(up, "size") and up.size is not None:
+                total_size += int(up.size)
+            else:
+                # If size unknown, read into memory to determine
+                data = await up.read()
+                up.file.seek(0)
+                total_size += len(data)
+            if total_size > MAX_TOTAL_SIZE:
+                raise HTTPException(status_code=400, detail="Total attachments size exceeds 4GB")
+
+        for up in files:
+            # Sanitize filename
+            original_name = Path(up.filename or "file").name
+            ext = Path(original_name).suffix.lower()
+            uid = uuid.uuid4().hex
+            safe_name = f"{new_message.id}_{uid}{ext or ''}"
+            out_path = FILES_NORMAL_DIR / safe_name
+
+            content = await up.read()
+            up.file.seek(0)
+
+            # If image, try lossless optimization
+            try:
+                if up.content_type and up.content_type.startswith("image/"):
+                    image = Image.open(io.BytesIO(content))
+                    img_format = image.format or ("PNG" if ext == ".png" else "JPEG")
+                    buf = io.BytesIO()
+                    save_kwargs = {"optimize": True}
+                    if img_format.upper() == "JPEG":
+                        # Use quality=95 with optimize to keep high quality (not truly lossless but near)
+                        save_kwargs["quality"] = 95
+                    image.save(buf, format=img_format, **save_kwargs)
+                    buf.seek(0)
+                    content = buf.read()
+            except Exception:
+                # Fallback to original content
+                pass
+
+            with open(out_path, "wb") as f:
+                f.write(content)
+
+            mf = MessageFile(
+                message_id=new_message.id,
+                name=original_name,
+                path=str(out_path)
+            )
+            db.add(mf)
+        db.commit()
+        db.refresh(new_message)
+
+    # Send push notifications for public messages
+    try:
+        await push_service.send_public_message_notification(db, new_message, exclude_user_id=current_user.id)
+    except Exception as e:
+        logger.error(f"Failed to send push notification for message {new_message.id}: {e}")
+
+    # Realtime broadcast for HTTP uploads as well
+    try:
+        from .messaging import messagingManager  # self import safe here
+        await messagingManager.broadcast({
+            "type": "newMessage",
+            "data": convert_message(new_message)
+        })
+    except Exception:
+        pass
+
     return {"status": "success", "message": convert_message(new_message)}
 
 
@@ -68,6 +290,164 @@ async def get_messages(db: Session = Depends(get_db)):
     }
 
 
+@router.post("/dm/send")
+async def dm_send(
+    payload: dict | None = None,
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db),
+    # Multipart support
+    dm_payload: str | None = Form(default=None),
+    files: list[UploadFile] = File(default=[]),
+    fileNames: str | None = Form(default=None),  # JSON array of filenames corresponding to files
+):
+    if dm_payload and payload is None:
+        try:
+            payload = json.loads(dm_payload)
+        except Exception:
+            raise HTTPException(status_code=400, detail="Invalid dm_payload JSON")
+
+    if payload is None:
+        raise HTTPException(status_code=400, detail="Missing payload")
+
+    required = ["recipientId", "iv", "ciphertext", "salt", "iv2", "wrappedMk"]
+    for key in required:
+        if key not in payload:
+            raise HTTPException(status_code=400, detail=f"Missing {key}")
+
+    env = DMEnvelope(
+        sender_id=current_user.id,
+        recipient_id=int(payload["recipientId"]),
+        iv_b64=payload["iv"],
+        ciphertext_b64=payload["ciphertext"],
+        salt_b64=payload["salt"],
+        iv2_b64=payload["iv2"],
+        wrapped_mk_b64=payload["wrappedMk"],
+        reply_to_id=payload.get("replyToId") if isinstance(payload.get("replyToId"), int) else None,
+    )
+    db.add(env)
+    db.commit()
+    db.refresh(env)
+
+    # Save encrypted files if any (no processing)
+    if files:
+        # Validate total size
+        total_size = 0
+        for file in files:
+            if hasattr(file, "size") and file.size is not None:
+                total_size += int(file.size)
+            else:
+                data = await file.read()
+                file.file.seek(0)
+                total_size += len(data)
+            if total_size > MAX_TOTAL_SIZE:
+                raise HTTPException(status_code=400, detail="Total attachments size exceeds 4GB")
+
+        names: list[str] = []
+        if fileNames:
+            try:
+                decoded = json.loads(fileNames)
+                if isinstance(decoded, list):
+                    names = [str(x) for x in decoded]
+            except Exception:
+                names = []
+
+        for i, file in enumerate(files):
+            provided = names[i] if i < len(names) else None
+            # Sanitize provided name to avoid path traversal
+            if provided and not re.match(r"^[A-Za-z0-9._-]{1,200}$", provided):
+                provided = None
+            original_name = provided or Path(file.filename or "file").name
+            # Save using provided/original name to allow client to reference path directly
+            safe_name = uid = uuid.uuid4().hex
+            out_name = f"{current_user.id}_{env.recipient_id}_{env.id}_{safe_name}"
+            out_path = FILES_ENCRYPTED_DIR / out_name
+
+            content = await file.read()
+            with open(out_path, "wb") as f:
+                f.write(content)
+
+            # Save DM file record
+            df = DMFile(
+                message_id=env.id,
+                sender_id=current_user.id,
+                recipient_id=env.recipient_id,
+                path=f"/api/uploads/files/encrypted/{out_name}",
+                name=original_name
+            )
+            db.add(df)
+        db.commit()
+
+    # Send push notification for DM
+    try:
+        await push_service.send_dm_notification(db, env, current_user)
+    except Exception as e:
+        logger.error(f"Failed to send push notification for DM {env.id}: {e}")
+
+    # Realtime notify both users for HTTP requests
+    try:
+        payload_ws = {
+            "type": "dmNew",
+            "data": {
+                "id": env.id,
+                "senderId": env.sender_id,
+                "recipientId": env.recipient_id,
+                "iv": env.iv_b64,
+                "ciphertext": env.ciphertext_b64,
+                "salt": env.salt_b64,
+                "iv2": env.iv2_b64,
+                "wrappedMk": env.wrapped_mk_b64,
+                "timestamp": env.timestamp.isoformat(),
+                "replyToId": env.reply_to_id,
+            }
+        }
+        await messagingManager.send_to_user(env.recipient_id, payload_ws)
+        await messagingManager.send_to_user(env.sender_id, payload_ws)
+    except Exception:
+        pass
+
+    return {"status": "ok", "id": env.id}
+
+def convert_envelopes(envs: list[DMEnvelope]):
+    return {
+        "status": "ok",
+        "messages": [
+            {
+                "id": e.id,
+                "senderId": e.sender_id,
+                "recipientId": e.recipient_id,
+                "iv": e.iv_b64,
+                "ciphertext": e.ciphertext_b64,
+                "salt": e.salt_b64,
+                "iv2": e.iv2_b64,
+                "wrappedMk": e.wrapped_mk_b64,
+                "timestamp": e.timestamp.isoformat(),
+                "files": [{"name": file.name, "path": file.path, "id": file.id} for file in e.files]
+            }
+            for e in envs
+        ]
+    }
+
+@router.get("/dm/fetch")
+async def dm_fetch(since: int | None = None, current_user: User = Depends(get_current_user), db: Session = Depends(get_db)):
+    q = db.query(DMEnvelope).filter(DMEnvelope.recipient_id == current_user.id)
+    if since:
+        q = q.filter(DMEnvelope.id > since)
+    return convert_envelopes(q.order_by(DMEnvelope.id.asc()).all())
+
+
+@router.get("/dm/history/{other_user_id}")
+async def dm_history(other_user_id: int, current_user: User = Depends(get_current_user), db: Session = Depends(get_db)):
+    return convert_envelopes(
+        db.query(DMEnvelope)
+        .filter(
+            ((DMEnvelope.sender_id == current_user.id) & (DMEnvelope.recipient_id == other_user_id))
+            | ((DMEnvelope.sender_id == other_user_id) & (DMEnvelope.recipient_id == current_user.id))
+        )
+        .order_by(DMEnvelope.id.asc())
+        .all()
+    )
+
+
 @router.put("/edit_message/{message_id}")
 async def edit_message(
     message_id: int,
@@ -116,37 +496,128 @@ async def delete_message(
     return {"status": "success", "message_id": message_id}
 
 
-@router.post("/reply_message")
-async def reply_message(
-    request: ReplyMessageRequest,
+@router.post("/add_reaction")
+async def add_reaction(
+    request: ReactionRequest,
     current_user: User = Depends(get_current_user),
     db: Session = Depends(get_db)
 ):
-    # Check if the message being replied to exists
-    original_message = db.query(Message).filter(Message.id == request.reply_to_id).first()
-    if not original_message:
-        raise HTTPException(status_code=404, detail="Original message not found")
+    # Check if message exists
+    message = db.query(Message).filter(Message.id == request.message_id).first()
+    if not message:
+        raise HTTPException(status_code=404, detail="Message not found")
     
-    if not request.content.strip():
-        raise HTTPException(status_code=400, detail="No content provided")
+    # Check if reaction already exists
+    existing_reaction = db.query(Reaction).filter(
+        Reaction.message_id == request.message_id,
+        Reaction.user_id == current_user.id,
+        Reaction.emoji == request.emoji
+    ).first()
     
-    new_message = Message(
-        content=request.content.strip(),
-        user_id=current_user.id,
-        timestamp=datetime.now(),
-        reply_to_id=request.reply_to_id
-    )
+    if existing_reaction:
+        # Remove existing reaction (toggle off)
+        db.delete(existing_reaction)
+        action = "removed"
+    else:
+        # Add new reaction
+        new_reaction = Reaction(
+            message_id=request.message_id,
+            user_id=current_user.id,
+            emoji=request.emoji
+        )
+        db.add(new_reaction)
+        action = "added"
     
-    db.add(new_message)
     db.commit()
-    db.refresh(new_message)
     
-    return {"status": "success", "message": convert_message(new_message)}
+    # Refresh message to get updated reactions
+    db.refresh(message)
+    
+    # Broadcast reaction update
+    try:
+        from .messaging import messagingManager
+        await messagingManager.broadcast({
+            "type": "reactionUpdate",
+            "data": {
+                "message_id": request.message_id,
+                "emoji": request.emoji,
+                "action": action,
+                "user_id": current_user.id,
+                "username": current_user.username,
+                "reactions": convert_message(message)["reactions"]
+            }
+        })
+    except Exception:
+        pass
+    
+    return {"status": "success", "action": action, "reactions": convert_message(message)["reactions"]}
+
+
+@router.post("/dm/add_reaction")
+async def add_dm_reaction(
+    request: DMReactionRequest,
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db)
+):
+    # Check if DM envelope exists
+    envelope = db.query(DMEnvelope).filter(DMEnvelope.id == request.dm_envelope_id).first()
+    if not envelope:
+        raise HTTPException(status_code=404, detail="DM envelope not found")
+    
+    # Check if user is part of this DM conversation
+    if current_user.id not in [envelope.sender_id, envelope.recipient_id]:
+        raise HTTPException(status_code=403, detail="Not authorized to react to this message")
+    
+    # Check if reaction already exists
+    existing_reaction = db.query(DMReaction).filter(
+        DMReaction.dm_envelope_id == request.dm_envelope_id,
+        DMReaction.user_id == current_user.id,
+        DMReaction.emoji == request.emoji
+    ).first()
+    
+    if existing_reaction:
+        # Remove existing reaction (toggle off)
+        db.delete(existing_reaction)
+        action = "removed"
+    else:
+        # Add new reaction
+        new_reaction = DMReaction(
+            dm_envelope_id=request.dm_envelope_id,
+            user_id=current_user.id,
+            emoji=request.emoji
+        )
+        db.add(new_reaction)
+        action = "added"
+    
+    db.commit()
+    
+    # Refresh envelope to get updated reactions
+    db.refresh(envelope)
+    
+    # Broadcast reaction update to both participants
+    try:
+        from .messaging import messagingManager
+        await messagingManager.broadcast({
+            "type": "dmReactionUpdate",
+            "data": {
+                "dm_envelope_id": request.dm_envelope_id,
+                "emoji": request.emoji,
+                "action": action,
+                "user_id": current_user.id,
+                "username": current_user.username,
+                "reactions": convert_dm_envelope(envelope)["reactions"]
+            }
+        })
+    except Exception:
+        pass
+    
+    return {"status": "success", "action": action, "reactions": convert_dm_envelope(envelope)["reactions"]}
 
 
 class MessaggingSocketManager:
     def __init__(self) -> None:
         self.connections: list[WebSocket] = []
+        self.user_by_ws: dict[WebSocket, int] = {}
 
     async def send_error(self, websocket: WebSocket, type: str, e: HTTPException):
         await websocket.send_json({"type": type, "error": {"code": e.status_code, "detail": e.detail}})
@@ -169,12 +640,39 @@ class MessaggingSocketManager:
                     return None
 
             if type == "ping":
+                try:
+                    current_user = get_current_user_inner()
+                    if current_user:
+                        self.user_by_ws[websocket] = current_user.id
+                    else:
+                        await websocket.send_json({
+                            "type": "ping", 
+                            "data": {
+                                "status": "error", 
+                                "error": {
+                                    "detail": "Failed to authorize", 
+                                    "code": 401
+                                }
+                            }
+                        })
+                except HTTPException:
+                    await websocket.send_json({
+                        "type": "ping", 
+                        "data": {
+                            "status": "error", 
+                            "error": {
+                                "detail": "Failed to authorize",
+                                "code": 401
+                            }
+                        }
+                    })
                 await websocket.send_json({"type": "ping", "data": {"status": "success"}})
             elif type == "getMessages":
                 try:
                     current_user = get_current_user_inner()
                     if not current_user:
                         raise HTTPException(401)
+                    self.user_by_ws[websocket] = current_user.id
 
                     await websocket.send_json({"type": type, "data": await get_messages(current_user, db)})
                 except HTTPException as e:
@@ -184,10 +682,11 @@ class MessaggingSocketManager:
                     current_user = get_current_user_inner()
                     if not current_user:
                         raise HTTPException(401)
+                    self.user_by_ws[websocket] = current_user.id
                     
                     request: SendMessageRequest = SendMessageRequest.model_validate(data["data"])
 
-                    response = await send_message(request, current_user, db)
+                    response = await send_message(request, current_user, db, None, [])
                     await self.broadcast({
                         "type": "newMessage",
                         "data": response["message"]
@@ -196,6 +695,58 @@ class MessaggingSocketManager:
                     await websocket.send_json({"type": type, "data": response})
                 except HTTPException as e:
                     await self.send_error(websocket, type, e)
+            elif type == "dmSend":
+                try:
+                    current_user = get_current_user_inner()
+                    if not current_user:
+                        raise HTTPException(401)
+                    self.user_by_ws[websocket] = current_user.id
+                    payload = data["data"]
+                    required = ["recipientId", "iv", "ciphertext", "salt", "iv2", "wrappedMk"]
+                    for key in required:
+                        if key not in payload:
+                            raise HTTPException(status_code=400, detail=f"Missing {key}")
+                    env = DMEnvelope(
+                        sender_id=current_user.id,
+                        recipient_id=int(payload["recipientId"]),
+                        iv_b64=payload["iv"],
+                        ciphertext_b64=payload["ciphertext"],
+                        salt_b64=payload["salt"],
+                        iv2_b64=payload["iv2"],
+                        wrapped_mk_b64=payload["wrappedMk"],
+                        reply_to_id=payload.get("replyToId") if isinstance(payload.get("replyToId"), int) else None,
+                    )
+                    db.add(env)
+                    db.commit()
+                    db.refresh(env)
+
+                    payload = {
+                        "type": "dmNew",
+                        "data": {
+                            "id": env.id,
+                            "senderId": env.sender_id,
+                            "recipientId": env.recipient_id,
+                            "iv": env.iv_b64,
+                            "ciphertext": env.ciphertext_b64,
+                            "salt": env.salt_b64,
+                            "iv2": env.iv2_b64,
+                            "wrappedMk": env.wrapped_mk_b64,
+                            "timestamp": env.timestamp.isoformat(),
+                            "replyToId": env.reply_to_id,
+                        }
+                    }
+
+                    # Send push notification for DM
+                    try:
+                        await push_service.send_dm_notification(db, env, current_user)
+                    except Exception as e:
+                        logger.error(f"Failed to send push notification for DM {env.id}: {e}")
+
+                    await self.send_to_user(env.recipient_id, payload);
+                    await websocket.send_json({"type": type, "data": {"status": "ok", "id": env.id}});
+                    await self.send_to_user(env.sender_id, payload);
+                except HTTPException as e:
+                    await self.send_error(websocket, type, e)
             elif type == "editMessage":
                 try:
                     current_user = get_current_user_inner()
@@ -214,6 +765,76 @@ class MessaggingSocketManager:
                     await websocket.send_json({"type": type, "data": response})
                 except HTTPException as e:
                     await self.send_error(websocket, type, e)
+            elif type == "dmEdit":
+                try:
+                    current_user = get_current_user_inner()
+                    if not current_user:
+                        raise HTTPException(401)
+
+                    payload = data["data"]
+                    env_id = int(payload["id"])
+                    env: DMEnvelope | None = db.query(DMEnvelope).filter(DMEnvelope.id == env_id).first()
+                    if not env:
+                        raise HTTPException(status_code=404, detail="DM not found")
+                    if env.sender_id != current_user.id:
+                        raise HTTPException(status_code=403, detail="You can only edit your own messages")
+
+                    # Replace ciphertext and iv
+                    env.iv_b64 = payload["iv"]
+                    env.ciphertext_b64 = payload["ciphertext"]
+                    env.iv2_b64 = payload["iv2"]
+                    env.wrapped_mk_b64 = payload["wrappedMk"]
+                    env.salt_b64 = payload["salt"]
+                    db.commit()
+                    db.refresh(env)
+
+                    payload_ws = {
+                        "type": "dmEdited",
+                        "data": {
+                            "id": env.id,
+                            "iv": env.iv_b64,
+                            "ciphertext": env.ciphertext_b64,
+                            "iv2": env.iv2_b64,
+                            "wrappedMk": env.wrapped_mk_b64,
+                            "salt": env.salt_b64,
+                            "timestamp": env.timestamp.isoformat(),
+                        }
+                    }
+                    await self.send_to_user(env.recipient_id, payload_ws)
+                    await self.send_to_user(env.sender_id, payload_ws)
+                    await websocket.send_json({"type": type, "data": {"status": "ok", "id": env.id}})
+                except HTTPException as e:
+                    await self.send_error(websocket, type, e)
+            elif type == "dmDelete":
+                try:
+                    current_user = get_current_user_inner()
+                    if not current_user:
+                        raise HTTPException(401)
+
+                    payload = data["data"]
+                    env_id = int(payload["id"])
+                    env: DMEnvelope | None = db.query(DMEnvelope).filter(DMEnvelope.id == env_id).first()
+                    if not env:
+                        raise HTTPException(status_code=404, detail="DM not found")
+                    if env.sender_id != current_user.id:
+                        raise HTTPException(status_code=403, detail="You can only delete your own messages")
+
+                    db.delete(env)
+                    db.commit()
+
+                    payload_ws = {
+                        "type": "dmDeleted",
+                        "data": {
+                            "id": env_id,
+                            "senderId": current_user.id,
+                            "recipientId": payload.get("recipientId")
+                        }
+                    }
+                    await self.send_to_user(env.recipient_id, payload_ws)
+                    await websocket.send_json({"type": type, "data": {"status": "ok", "id": env_id}})
+                    await self.send_to_user(env.sender_id, payload_ws)
+                except HTTPException as e:
+                    await self.send_error(websocket, type, e)
             elif type == "deleteMessage":
                 try:
                     current_user = get_current_user_inner()
@@ -230,17 +851,61 @@ class MessaggingSocketManager:
                     await websocket.send_json({"type": type, "data": response})
                 except HTTPException as e:
                     await self.send_error(websocket, type, e)
-            elif type == "replyMessage":
+            elif type == "addReaction":
                 try:
                     current_user = get_current_user_inner()
                     if not current_user:
                         raise HTTPException(401)
                     
-                    request: ReplyMessageRequest = ReplyMessageRequest.model_validate(data["data"])
-                    response = await reply_message(request, current_user, db)
+                    request_data = data["data"]
+                    reaction_request = ReactionRequest(
+                        message_id=request_data["message_id"],
+                        emoji=request_data["emoji"]
+                    )
+                    
+                    response = await add_reaction(reaction_request, current_user, db)
+                    
+                    # Broadcast reaction update
                     await self.broadcast({
-                        "type": "newMessage",
-                        "data": response["message"]
+                        "type": "reactionUpdate",
+                        "data": {
+                            "message_id": request_data["message_id"],
+                            "emoji": request_data["emoji"],
+                            "action": response["action"],
+                            "user_id": current_user.id,
+                            "username": current_user.username,
+                            "reactions": response["reactions"]
+                        }
+                    })
+
+                    await websocket.send_json({"type": type, "data": response})
+                except HTTPException as e:
+                    await self.send_error(websocket, type, e)
+            elif type == "addDmReaction":
+                try:
+                    current_user = get_current_user_inner()
+                    if not current_user:
+                        raise HTTPException(401)
+                    
+                    request_data = data["data"]
+                    reaction_request = DMReactionRequest(
+                        dm_envelope_id=request_data["dm_envelope_id"],
+                        emoji=request_data["emoji"]
+                    )
+                    
+                    response = await add_dm_reaction(reaction_request, current_user, db)
+                    
+                    # Broadcast reaction update
+                    await self.broadcast({
+                        "type": "dmReactionUpdate",
+                        "data": {
+                            "dm_envelope_id": request_data["dm_envelope_id"],
+                            "emoji": request_data["emoji"],
+                            "action": response["action"],
+                            "user_id": current_user.id,
+                            "username": current_user.username,
+                            "reactions": response["reactions"]
+                        }
                     })
 
                     await websocket.send_json({"type": type, "data": response})
@@ -264,11 +929,18 @@ class MessaggingSocketManager:
             logger.info(f"WebSocket disconnected with code {e.code}: {e.reason}")
         finally:
             self.connections.remove(websocket)
+            if websocket in self.user_by_ws:
+                del self.user_by_ws[websocket]
 
     async def broadcast(self, message: dict):
         for websocket in self.connections:
             await websocket.send_json(message)
 
+    async def send_to_user(self, user_id: int, message: dict):
+        for websocket in self.connections:
+            if self.user_by_ws.get(websocket) == user_id:
+                await websocket.send_json(message)
+
 messagingManager = MessaggingSocketManager()
 
 @router.websocket("/chat/ws")
@@ -276,4 +948,36 @@ async def chat_websocket(
     websocket: WebSocket,
     db: Session = Depends(get_db)
 ):
-    await messagingManager.connect(websocket, db)
+    await messagingManager.connect(websocket, db)
+
+
+# File serving endpoints
+@router.get("/uploads/files/normal/{filename}")
+async def get_file_normal(filename: str):
+    if not re.match(r"^[A-Za-z0-9._-]+$", filename):
+        raise HTTPException(status_code=400, detail="Invalid file name")
+    path = FILES_NORMAL_DIR / filename
+    if not path.exists():
+        raise HTTPException(status_code=404, detail="File not found")
+    return FileResponse(str(path))
+
+
+@router.get("/uploads/files/encrypted/{filename}")
+async def get_file_encrypted(filename: str, current_user: User = Depends(get_current_user)):
+    if not re.match(r"^[A-Za-z0-9._-]+$", filename):
+        raise HTTPException(status_code=400, detail="Invalid file name")
+    path = FILES_ENCRYPTED_DIR / filename
+    if not path.exists():
+        raise HTTPException(status_code=404, detail="File not found")
+
+    match = re.match(r"^(\d+)_(\d+)_(\d+)_.*$", path.resolve().name)
+    if match:
+        sender_id = int(match.group(1))
+        recipient_id = int(match.group(2))
+
+        if not current_user.id in [sender_id, recipient_id]:
+            raise HTTPException(403)
+    else:
+        raise HTTPException(500)
+
+    return FileResponse(str(path))

backend/routes/profile.py

@@ -1,5 +1,7 @@
 from pathlib import Path
+import re
 from fastapi import APIRouter, Depends, HTTPException, UploadFile, File
+from fastapi.responses import FileResponse
 from sqlalchemy.orm import Session
 from PIL import Image
 import os
@@ -8,9 +10,15 @@ import io
 
 from dependencies import get_db, get_current_user
 from models import User, UpdateBioRequest, UserProfileResponse
+from pydantic import BaseModel
 
 router = APIRouter()
 
+# Request models
+class UpdateProfileRequest(BaseModel):
+    nickname: str | None = None
+    description: str | None = None
+
 # Create uploads directory if it doesn't exist
 PROFILE_PICTURES_DIR = Path("data/uploads/pfp")
 
@@ -72,12 +80,15 @@ async def get_profile_picture(filename: str):
     """
     Serve profile picture files
     """
+
+    if not re.match(r"^\d+_[0-9a-z]+\.jpg$", filename):
+        raise HTTPException(status_code=400, detail="Invalid file name")
+
     filepath = os.path.join(PROFILE_PICTURES_DIR, filename)
     
     if not os.path.exists(filepath):
         raise HTTPException(status_code=404, detail="Profile picture not found")
     
-    from fastapi.responses import FileResponse
     return FileResponse(filepath, media_type="image/jpeg")
 
 @router.get("/user/profile")
@@ -98,6 +109,56 @@ async def get_user_profile(
         "created_at": current_user.created_at
     }
 
+@router.put("/user/profile")
+async def update_user_profile(
+    request: UpdateProfileRequest,
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db)
+):
+    """
+    Update current user's profile information
+    """
+    updated = False
+    
+    # Update username if provided
+    if request.nickname is not None:
+        nickname = request.nickname.strip()
+        if len(nickname) < 3:
+            raise HTTPException(status_code=400, detail="Username must be at least 3 characters long")
+        if len(nickname) > 50:
+            raise HTTPException(status_code=400, detail="Username must be 50 characters or less")
+        
+        # Check if username is already taken by another user
+        existing_user = db.query(User).filter(User.username == nickname, User.id != current_user.id).first()
+        if existing_user:
+            raise HTTPException(status_code=400, detail="Username already taken")
+        
+        current_user.username = nickname
+        updated = True
+    
+    # Update bio if provided
+    if request.description is not None:
+        bio = request.description.strip()
+        if len(bio) > 500:
+            raise HTTPException(status_code=400, detail="Bio must be 500 characters or less")
+        
+        current_user.bio = bio
+        updated = True
+    
+    if updated:
+        db.commit()
+        return {
+            "message": "Profile updated successfully",
+            "username": current_user.username,
+            "bio": current_user.bio
+        }
+    else:
+        return {
+            "message": "No changes made",
+            "username": current_user.username,
+            "bio": current_user.bio
+        }
+
 
 @router.put("/user/bio")
 async def update_user_bio(

backend/routes/push.py

@@ -0,0 +1,46 @@
+from fastapi import APIRouter, Depends, HTTPException
+from sqlalchemy.orm import Session
+from dependencies import get_current_user, get_db
+from models import User, PushSubscriptionRequest
+from push_service import push_service
+
+router = APIRouter()
+
+@router.post("/subscribe")
+async def subscribe_to_push_notifications(
+    request: PushSubscriptionRequest,
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db)
+):
+    """Subscribe user to push notifications"""
+    try:
+        success = await push_service.subscribe_user(
+            db=db,
+            user_id=current_user.id,
+            endpoint=request.endpoint,
+            p256dh_key=request.keys["p256dh"],
+            auth_key=request.keys["auth"]
+        )
+        
+        if success:
+            return {"status": "success", "message": "Push notifications enabled"}
+        else:
+            raise HTTPException(status_code=500, detail="Failed to enable push notifications")
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@router.delete("/unsubscribe")
+async def unsubscribe_from_push_notifications(
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db)
+):
+    """Unsubscribe user from push notifications"""
+    try:
+        success = await push_service.unsubscribe_user(db=db, user_id=current_user.id)
+        
+        if success:
+            return {"status": "success", "message": "Push notifications disabled"}
+        else:
+            raise HTTPException(status_code=500, detail="Failed to disable push notifications")
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))

deployment/.env.example

@@ -1 +0,0 @@
-JWT_SECRET="jwt-secret-change-in-production"

deployment/docker-compose.yml

@@ -6,6 +6,8 @@ services:
     environment:
       PORT: 8300
       JWT_SECRET: ${JWT_SECRET}
+      VAPID_PUBLIC_KEY: ${VAPID_PUBLIC_KEY}
+      VAPID_PRIVATE_KEY: ${VAPID_PRIVATE_KEY}
     volumes:
       - "data:/app/data"
     develop:
@@ -15,8 +17,6 @@ services:
           target: /app
         - action: rebuild
           path: ../backend/requirements.txt
-    networks:
-      - main
 
   frontend:
     build: 
@@ -38,15 +38,7 @@ services:
           target: /server/server.js
         - action: rebuild
           path: package.json
-    networks:
-      - main
-      - default
 
 volumes:
   data:
-    name: fromchat-data
-
-networks:
-  main:
-    driver: bridge
-    internal: true # isolate from the outside world
+    name: fromchat-data

deployment/frontend/Dockerfile

@@ -11,6 +11,7 @@ RUN --mount=type=cache,target=/root/.npm \
 COPY frontend frontend
 RUN npm run frontend:build
 
+
 # 2. Build the static file server
 FROM node:24 AS server
 
@@ -23,6 +24,10 @@ RUN --mount=type=cache,target=/root/.npm \
 # 2.2. Copy the code
 COPY deployment/frontend/ .
 
+# 2.3. Build
+RUN npm run build
+
+
 # 3. Put it all together
 FROM node:24-slim
 
@@ -36,7 +41,7 @@ USER app
 
 # 3.1. Frontend static files
 WORKDIR /app
-COPY --from=frontend --chown=app /app/frontend/dist .
+COPY --from=frontend --chown=app /app/frontend/build/normal/dist .
 
 # 3.2. Static file server
 WORKDIR /server
@@ -44,4 +49,4 @@ COPY --from=server --chown=app /server .
 
 # 4. Final command
 ENV STATIC_FILE_PATH=/app
-ENTRYPOINT ["npm", "run", "start"]
+ENTRYPOINT ["npm", "run", "start:prod"]

deployment/frontend/package.json

@@ -3,10 +3,18 @@
     "version": "1.0.0",
     "main": "server.js",
     "scripts": {
-        "start": "node server.js"
+        "start": "ts-node server.ts",
+        "build": "tsc -b",
+        "start:prod": "node dist/server.js"
     },
     "dependencies": {
         "express": "^5.1.0",
         "http-proxy-middleware": "^3.0.5"
+    },
+    "devDependencies": {
+        "@types/express": "^4.17.21",
+        "@types/node": "^20.10.0",
+        "typescript": "^5.3.0",
+        "ts-node": "^10.9.0"
     }
 }

deployment/frontend/server.js

@@ -1,22 +0,0 @@
-// server.js
-const express = require('express');
-const { createProxyMiddleware } = require('http-proxy-middleware');
-const path = require('path');
-
-const app = express();
-const port = process.env.PORT || 3000;
-const backendHost = process.env.BACKEND_HOST || "http://localhost:8300";
-const file_path = process.env.STATIC_FILE_PATH || ".";
-
-app.use('/api', createProxyMiddleware({
-    target: backendHost,
-    changeOrigin: true,
-    pathRewrite: { '^/api': '' },
-    ws: true
-}));
-
-app.use(express.static(path.resolve(file_path)));
-
-app.listen(port, () => {
-    console.log(`Server launched на http://localhost:${port}`);
-});

deployment/frontend/server.ts

@@ -0,0 +1,28 @@
+import express from 'express';
+import { createProxyMiddleware } from 'http-proxy-middleware';
+import { resolve } from 'path';
+
+const app = express();
+const port = process.env.PORT || 3000;
+const backendHost = process.env.BACKEND_HOST || "http://localhost:8300";
+const filePath = process.env.STATIC_FILE_PATH || ".";
+
+// API proxy middleware
+app.use('/api', createProxyMiddleware({
+    target: backendHost,
+    changeOrigin: true,
+    pathRewrite: { '^/api': '' },
+    ws: true
+}));
+
+// Serve static files
+app.use(express.static(resolve(filePath)));
+
+// SPA routing - catch all handler for client-side routing
+app.use((_req, res) => {
+    res.sendFile(resolve(filePath, 'index.html'));
+});
+
+app.listen(port, () => {
+    console.log(`Server launched on http://localhost:${port}`);
+});

deployment/frontend/tsconfig.json

@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "outDir": "./dist",
+        "rootDir": "./",
+        "declaration": true,
+        "sourceMap": true
+    },
+    "include": [
+        "server.ts"
+    ],
+    "exclude": [
+        "node_modules",
+        "dist"
+    ]
+}

frontend/electron.d.ts

@@ -1,8 +1,21 @@
 export type Platform = "win32" | "darwin" | "linux"
 
+export interface NotificationShowOptions {
+    title: string;
+    body: string;
+    icon?: string;
+    tag?: string;
+}
+
+export interface ElectronNotifications {
+    requestPermission: () => Promise<NotificationPermission>;
+    show: (options: NotificationShowOptions) => Promise<boolean>;
+}
+
 export interface ElectronInterface {
     desktop: true,
-    platform: Platform
+    platform: Platform,
+    notifications: ElectronNotifications
 }
 
 declare global {

frontend/electron/forge/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>Hello World!</title>
-
-  </head>
-  <body>
-    <h1>💖 Hello World!</h1>
-    <p>Welcome to your Electron application.</p>
-    <script type="module" src="/src/renderer.js"></script>
-  </body>
-</html>

frontend/electron/forge/package.json

@@ -1,33 +0,0 @@
-{
-    "name": "FromChat",
-    "productName": "FromChat",
-    "version": "1.0.0",
-    "description": "A 100% Open Source Messenger",
-    "main": "dist-electron/main.js",
-    "scripts": {
-        "package": "electron-forge package",
-        "make": "electron-forge make",
-        "publish": "electron-forge publish"
-    },
-    "keywords": [],
-    "author": {
-        "name": "denis0001-dev",
-        "email": "denis0001.dev@ya.ru"
-    },
-    "license": "GPL-2.0",
-    "devDependencies": {
-        "@electron-forge/cli": "^7.8.3",
-        "@electron-forge/maker-deb": "^7.8.3",
-        "@electron-forge/maker-rpm": "^7.8.3",
-        "@electron-forge/maker-squirrel": "^7.8.3",
-        "@electron-forge/maker-zip": "^7.8.3",
-        "@electron-forge/plugin-auto-unpack-natives": "^7.8.3",
-        "@electron-forge/plugin-fuses": "^7.8.3",
-        "@electron/fuses": "^1.8.0",
-        "electron": "37.3.1",
-        "vite": "^5.4.19"
-    },
-    "dependencies": {
-        "electron-squirrel-startup": "^1.0.1"
-    }
-}

frontend/electron/main.ts

@@ -1,28 +1,65 @@
-import { app, BrowserWindow } from 'electron';
+import { app, BrowserWindow, Notification, ipcMain } from 'electron';
 import path from "node:path";
+import type { NotificationShowOptions } from '../electron.d.ts';
+
+let mainWindow: BrowserWindow | null = null;
 
 app.whenReady().then(() => {
-    const win = new BrowserWindow({
+    mainWindow = new BrowserWindow({
         title: 'Main window',
-        minWidth: 650,
+        minWidth: 800,
         minHeight: 420,
         webPreferences: {
             preload: path.join(import.meta.dirname, "preload.mjs")
         },
         titleBarStyle: "hidden",
-        ...(process.platform !== 'darwin' ? { titleBarOverlay: true } : {}),
         trafficLightPosition: {
             x: 16 - 4,
             y: 16 - 4
         },
         titleBarOverlay: process.platform !== "darwin"
-    })
+    });
 
-    // You can use `process.env.VITE_DEV_SERVER_URL` when the vite command is called `serve`
     if (process.env.VITE_DEV_SERVER_URL) {
-        win.loadURL(process.env.VITE_DEV_SERVER_URL)
+        mainWindow.loadURL(process.env.VITE_DEV_SERVER_URL);
     } else {
-        // Load your file
-        win.loadFile('dist/index.html');
+        mainWindow.loadFile('frontend/build/electron/dist/index.html');
     }
+
+    // Handle notification permission requests
+    ipcMain.handle('request-notification-permission', async () => {
+        if (Notification.isSupported()) {
+            return 'granted';
+        }
+        return 'denied';
+    });
+
+    // Handle showing notifications
+    ipcMain.handle('show-notification', async (event, options: NotificationShowOptions) => {
+        if (Notification.isSupported()) {
+            try {
+                const notification = new Notification({
+                    title: options.title,
+                    body: options.body,
+                    icon: options.icon,
+                    silent: false,
+                    urgency: 'normal'
+                });
+
+                notification.on('click', () => {
+                    if (mainWindow) {
+                        mainWindow.show();
+                        mainWindow.focus();
+                    }
+                });
+
+                notification.show();
+                return true;
+            } catch (error) {
+                console.error('Error creating notification:', error);
+                return false;
+            }
+        }
+        return false;
+    });
 });

frontend/electron/preload.ts

@@ -1,9 +1,11 @@
-import { contextBridge } from "electron";
+import { contextBridge, ipcRenderer } from "electron";
 import type { ElectronInterface, Platform } from "../electron";
 
-const electronInterface: ElectronInterface = {
+contextBridge.exposeInMainWorld("electronInterface", {
     desktop: true,
-    platform: process.platform as Platform
-}
-
-contextBridge.exposeInMainWorld("electronInterface", electronInterface);
+    platform: process.platform as Platform,
+    notifications: {
+        requestPermission: () => ipcRenderer.invoke('request-notification-permission'),
+        show: (options) => ipcRenderer.invoke('show-notification', options)
+    }
+} satisfies ElectronInterface);

frontend/eslint.config.ts

@@ -0,0 +1,141 @@
+import js from "@eslint/js";
+import typescript from "@typescript-eslint/eslint-plugin";
+import typescriptParser from "@typescript-eslint/parser";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import jsxA11y from "eslint-plugin-jsx-a11y";
+
+export default [
+    js.configs.recommended,
+    {
+        files: ["**/*.{js,jsx,ts,tsx}"],
+        languageOptions: {
+            parser: typescriptParser,
+            parserOptions: {
+                ecmaVersion: "latest",
+                sourceType: "module",
+                ecmaFeatures: {
+                    jsx: true
+                }
+            }
+        },
+        plugins: {
+            "@typescript-eslint": typescript,
+            "react": react,
+            "react-hooks": reactHooks,
+            "react-refresh": reactRefresh,
+            "jsx-a11y": jsxA11y
+        },
+        rules: {
+            // TypeScript rules
+            ...typescript.configs.recommended.rules,
+            "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+            "@typescript-eslint/no-explicit-any": "warn",
+            "@typescript-eslint/no-non-null-assertion": "off",
+
+            // React rules
+            ...react.configs.recommended.rules,
+            "react/react-in-jsx-scope": "off", // Not needed with React 17+
+            "react/prop-types": "off", // Using TypeScript instead
+            "react/jsx-uses-react": "off", // Not needed with React 17+
+            "react/jsx-uses-vars": "error",
+            "react/jsx-no-undef": "error",
+            "react/jsx-key": "error",
+            "react/jsx-no-duplicate-props": "error",
+            "react/jsx-pascal-case": "error",
+            "react/no-array-index-key": "off",
+            "react/no-danger": "off",
+            "react/no-deprecated": "error",
+            "react/no-direct-mutation-state": "error",
+            "react/no-unescaped-entities": "error",
+            "react/no-unknown-property": "error",
+            "react/require-render-return": "error",
+            "react/self-closing-comp": "error",
+            "react/jsx-wrap-multilines": "error",
+            "react/jsx-closing-bracket-location": "off",
+            "react/jsx-closing-tag-location": "error",
+            "react/jsx-curly-spacing": ["error", "never"],
+            "react/jsx-equals-spacing": ["error", "never"],
+            "react/jsx-first-prop-new-line": ["off", "multiline-multiprop"],
+            "react/jsx-max-props-per-line": ["error", { maximum: 2, when: "multiline" }],
+            "react/jsx-no-bind": "off",
+            "react/jsx-no-literals": "off",
+            "react/jsx-sort-props": "off",
+
+            // React Hooks rules
+            ...reactHooks.configs.recommended.rules,
+
+            // React Refresh rules
+            "react-refresh/only-export-components": [
+                "warn",
+                { allowConstantExport: true }
+            ],
+
+            // Accessibility rules
+            ...jsxA11y.configs.recommended.rules,
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/anchor-has-content": "error",
+            "jsx-a11y/aria-props": "error",
+            "jsx-a11y/aria-proptypes": "error",
+            "jsx-a11y/aria-unsupported-elements": "error",
+            "jsx-a11y/click-events-have-key-events": "off",
+            "jsx-a11y/heading-has-content": "error",
+            "jsx-a11y/img-redundant-alt": "warn",
+            "jsx-a11y/no-access-key": "error",
+            "jsx-a11y/role-has-required-aria-props": "error",
+            "jsx-a11y/role-supports-aria-props": "error",
+            "jsx-a11y/scope": "error",
+            "jsx-a11y/tabindex-no-positive": "error",
+            "jsx-a11y/no-noninteractive-element-interactions": "off",
+            "jsx-a11y/anchor-is-valid": "off",
+
+            // General JavaScript/TypeScript rules
+            "no-console": "off",
+            "no-debugger": "error",
+            "no-unused-vars": "off", // Handled by TypeScript version
+            "prefer-const": "error",
+            "no-var": "error",
+            "no-undef": "off", // Handled by TypeScript version
+            "eqeqeq": ["error", "always"],
+            "curly": "off", // Changed from error to warn
+            "brace-style": ["off", "1tbs"],
+            "comma-dangle": "warn", // Changed from error to warn
+            "comma-spacing": ["error", { before: false, after: true }],
+            "comma-style": ["error", "last"],
+            "computed-property-spacing": ["error", "never"],
+            "func-call-spacing": ["off", "never"],
+            "key-spacing": ["error", { beforeColon: false, afterColon: true }],
+            "keyword-spacing": ["error", { before: true, after: true }],
+            "object-curly-spacing": ["error", "always"],
+            "semi-spacing": ["error", { before: false, after: true }],
+            "space-before-blocks": "error",
+            "space-before-function-paren": ["off", "never"],
+            "space-in-parens": ["error", "never"],
+            "space-infix-ops": "error",
+            "space-unary-ops": ["error", { words: true, nonwords: false }],
+            "quotes": "warn", // Changed from error to warn
+            "max-len": ["warn", { code: 150, ignoreUrls: true, ignoreStrings: true }],
+            "no-empty": "off"
+        },
+        settings: {
+            react: {
+                version: "detect"
+            }
+        }
+    },
+    {
+        ignores: [
+            "node_modules/**",
+            "dist/**",
+            "build/**",
+            "out/**",
+            "*.min.js",
+            "coverage/**",
+            ".nyc_output/**",
+            "backend/**",
+            "deployment/**",
+            "web-calls/**"
+        ]
+    }
+];

frontend/forge.config.ts

@@ -1,29 +1,28 @@
 import { FusesPlugin } from '@electron-forge/plugin-fuses';
 import { FuseV1Options, FuseVersion } from '@electron/fuses';
-import type { ForgeConfig } from "@electron-forge/shared-types";
+import type { ForgeConfig } from '@electron-forge/shared-types';
 
-const config: ForgeConfig = {
+export default {
     packagerConfig: {
-        asar: true
+        asar: true,
     },
+    outDir: "frontend/build/electron/forge",
     rebuildConfig: {},
     makers: [
-        {
-            name: '@electron-forge/maker-squirrel',
-            config: {},
-        },
         {
             name: '@electron-forge/maker-zip',
             config: {},
-            platforms: ['darwin'],
+            platforms: ['win32', 'darwin'],
         },
         {
             name: '@electron-forge/maker-deb',
             config: {},
+            platforms: ['linux'],
         },
         {
             name: '@electron-forge/maker-rpm',
             config: {},
+            platforms: ['linux'],
         },
     ],
     plugins: [
@@ -43,6 +42,4 @@ const config: ForgeConfig = {
             [FuseV1Options.OnlyLoadAppFromAsar]: true,
         }),
     ],
-};
-
-export default config;
+} satisfies ForgeConfig;

frontend/index.html

@@ -7,414 +7,7 @@
         <link rel="icon" href="./src/images/logo.png" />
     </head>
     <body>
-        <div id="electron-title-bar">
-            <div class="macos-padding"></div>
-            <div id="window-title"></div>
-            <!-- <div class="window-controls">
-                <mdui-button-icon icon="remove" id="window-minimize"></mdui-button-icon>
-                <mdui-button-icon icon="stack--outlined" id="window-restore" class="hidden"></mdui-button-icon>
-                <mdui-button-icon icon="ad--outlined" id="window-maximize"></mdui-button-icon>
-                <mdui-button-icon icon="close" id="window-close"></mdui-button-icon>
-            </div> -->
-        </div>
-        <div id="main-wrapper">
-            <!-- Login Form -->
-            <div id="login-form" class="auth-container">
-                <div class="auth-card fade-in">
-                    <div class="auth-header">
-                        <h2>
-                            <span class="material-symbols filled large">login</span> 
-                            Добро пожаловать!
-                        </h2>
-                        <p>Войдите в свой аккаунт</p>
-                    </div>
-                    <div class="auth-body">
-                        <div id="login-alerts"></div>
-                        
-                        <form id="login-form-element">
-                            <mdui-text-field
-                                label="Имя пользователя" 
-                                id="login-username" 
-                                name="username" 
-                                variant="outlined"
-                                icon="person--filled"
-                                autocomplete="username"
-                                required>
-                            </mdui-text-field>
-                            <mdui-text-field
-                                label="Пароль" 
-                                id="login-password" 
-                                name="password" 
-                                variant="outlined" 
-                                type="password" 
-                                toggle-password
-                                icon="password--filled"
-                                autocomplete="current-password"
-                                required>
-                            </mdui-text-field>
-
-                            <mdui-button type="submit">Войти</mdui-button>
-                        </form>
-                        
-                        <div class="text-center">
-                            <p>Ещё нет аккаунта? <a href="#" id="register-link" class="link">Зарегистрируйтесь</a></p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Register Form -->
-            <div id="register-form" class="auth-container" style="display: none;">
-                <div class="auth-card fade-in">
-                    <div class="auth-header">
-                        <h2>
-                            <span class="material-symbols filled large">person_add</span> 
-                            Регистрация
-                        </h2>
-                        <p>Создайте новый аккаунт</p>
-                    </div>
-                    <div class="auth-body">
-                        <div id="register-alerts"></div>
-                        
-                        <form id="register-form-element">
-                            <mdui-text-field 
-                                label="Имя пользователя" 
-                                id="register-username" 
-                                name="username" 
-                                variant="outlined"
-                                icon="person--filled"
-                                autocomplete="username"
-                                maxlength="20"
-                                counter
-                                required>
-                            </mdui-text-field>
-                            <mdui-text-field 
-                                label="Пароль" 
-                                id="register-password" 
-                                name="password" 
-                                variant="outlined" 
-                                type="password" 
-                                toggle-password
-                                icon="password--filled"
-                                autocomplete="new-password"
-                                required>
-                            </mdui-text-field>
-                            <mdui-text-field 
-                                label="Подтвердите пароль" 
-                                id="register-confirm-password" 
-                                name="confirm_password" 
-                                variant="outlined" 
-                                type="password" 
-                                toggle-password
-                                icon="password--filled"
-                                autocomplete="new-password"
-                                required>
-                            </mdui-text-field>
-
-                            <mdui-button type="submit">Зарегистрироваться</mdui-button>
-                        </form>
-                        
-                        <div class="text-center">
-                            <p>
-                                Уже есть аккаунт? 
-                                <a href="#" id="login-link" class="link">Войдите</a>
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Chat Interface -->
-            <div id="chat-interface" style="display: none;">
-                <div class="all-container">
-                    <div class="chat-list" id="chat-list">
-                        <header class="chat-header-left">
-                            <div id="productname">Loading...</div> 
-                            <div class="profile">
-                                <a href="#" id="profile-open">
-                                    <img src="./src/images/default-avatar.png" alt="" id="preview1" />
-                                </a>
-                            </div>
-                        </header>
-                        <div class="chat-tabs">
-                            <mdui-tabs value="chats" full-width>
-                                <mdui-tab value="chats">
-                                    Чаты
-                                </mdui-tab>
-                                <mdui-tab value="channels">
-                                    Каналы
-                                </mdui-tab>
-                                <mdui-tab value="contacts">
-                                    Контакты
-                                </mdui-tab>
-
-                                <mdui-tab-panel slot="panel" value="chats">
-                                    <mdui-list>
-                                        <mdui-list-item headline="Общий чат" description="Вы: Последнее сообщение" id="chat-list-chat-1">
-                                            <img src="./src/images/default-avatar.png" alt="" slot="icon" />
-                                        </mdui-list-item>
-                                        <mdui-list-item headline="Общий чат 2" description="Вы: Последнее сообщение" id="chat-list-chat-2">
-                                            <img src="./src/images/default-avatar.png" alt="" slot="icon" />
-                                        </mdui-list-item>
-                                    </mdui-list>
-                                </mdui-tab-panel>
-                                <mdui-tab-panel slot="panel" value="channels">Скоро будет...</mdui-tab-panel>
-                                <mdui-tab-panel slot="panel" value="contacts">Скоро будет...</mdui-tab-panel>
-                            </mdui-tabs>
-                        </div>
-                        <mdui-bottom-app-bar>
-                            <mdui-button-icon icon="settings--filled" id="settings-open"></mdui-button-icon>
-                            <mdui-button-icon icon="group_add--filled"></mdui-button-icon>
-                            <div style="flex-grow: 1"></div>
-                            <mdui-fab icon="edit--filled"></mdui-fab>
-                        </mdui-bottom-app-bar>
-                    </div>
-                    <div class="chat-container">          
-                        <div class="chat-main" id="chat-inner">
-                            <div class="chat-header">
-                                <img src="src/images/default-avatar.png" alt="Avatar" class="chat-header-avatar">
-                                <div class="chat-header-info">
-                                    <div class="info-chat">
-                                        <h4 id="chat-name">Общий чат</h4>
-                                        <p>
-                                            <span class="online-status"></span>
-                                            Онлайн
-                                        </p>
-                                    </div>
-                                    <a href="#" id="hide-chat">Свернуть чат</a>
-                                </div>
-                            </div>
-                            
-                            <div class="chat-messages" id="chat-messages">
-                                <!-- Messages will be loaded here dynamically -->
-                            </div>
-                            
-                            <div class="chat-input-wrapper">
-                                <div class="chat-input">
-                                    <form class="input-group" id="message-form">
-                                        <input type="text" class="message-input" id="message-input" placeholder="Напишите сообщение..." autocomplete="off">
-                                        <button type="submit" class="send-btn">
-                                            <span class="material-symbols filled">send</span>
-                                        </button>
-                                    </form>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <mdui-dialog id="profile-dialog" close-on-overlay-click close-on-esc>
-            <div class="content">
-                <div class="header-top">
-                    <div class="profile-picture-container">
-                        <img id="profile-picture" src="./src/images/default-avatar.png" alt="Ваше фото" />
-                        <mdui-button-icon icon="camera_alt--filled" id="upload-pfp-btn" class="upload-overlay" variant="filled"></mdui-button-icon>
-                        <input type="file" id="pfp-file-input" accept="image/*" style="display: none;">
-                    </div>
-                    <mdui-text-field id="username-field" label="Имя пользователя" variant="outlined" value="user123" autocomplete="username"></mdui-text-field>
-                </div>
-
-                <form id="profile-form">
-                    <mdui-text-field 
-                        id="description-field"
-                        label="О себе" 
-                        variant="outlined" 
-                        multiline 
-                        rows="3" 
-                        placeholder="Расскажите о себе..."
-                        autocomplete="none"></mdui-text-field>
-                    <div class="dialog-actions">
-                        <mdui-button type="submit" id="profile-submit">Сохранить изменения</mdui-button>
-                        <mdui-button id="profile-dialog-close" variant="outlined">Закрыть</mdui-button>
-                    </div>
-                </div>
-            </div>
-        </mdui-dialog>
-
-        <!-- Profile Picture Cropper Dialog -->
-        <mdui-dialog id="cropper-dialog" close-on-overlay-click close-on-esc>
-            <div class="cropper-dialog-content">
-                <div class="cropper-header">
-                    <h3>Обрезать фото профиля</h3>
-                    <mdui-button-icon icon="close" id="cropper-close"></mdui-button-icon>
-                </div>
-                <div class="cropper-container">
-                    <div id="cropper-area"></div>
-                </div>
-                <div class="cropper-actions">
-                    <mdui-button id="crop-cancel" variant="outlined">Отмена</mdui-button>
-                    <mdui-button id="crop-save">Сохранить</mdui-button>
-                </div>
-            </div>
-        </mdui-dialog>
-
-        <mdui-dialog id="settings-dialog" close-on-overlay-click close-on-esc fullscreen>
-            <div class="fullscreen-wrapper">
-                <div id="settings-dialog-inner">
-                    <div class="header">
-                        <mdui-button-icon icon="close" id="settings-close"></mdui-button-icon>
-                        <mdui-top-app-bar-title>Настройки</mdui-top-app-bar-title>
-                    </div>
-                    <div id="settings-menu">
-                        <mdui-list>
-                            <mdui-list-item icon="notifications--filled" rounded active>Уведомления</mdui-list-item>
-                            <mdui-list-item icon="palette--filled" rounded>Внешний вид</mdui-list-item>
-                            <mdui-list-item icon="security--filled" rounded>Безопасность</mdui-list-item>
-                            <mdui-list-item icon="language--filled" rounded>Язык</mdui-list-item>
-                            <mdui-list-item icon="storage--filled" rounded>Хранилище</mdui-list-item>
-                            <mdui-list-item icon="help--filled" rounded>Помощь</mdui-list-item>
-                            <mdui-list-item icon="info--filled" rounded>О приложении</mdui-list-item>
-                        </mdui-list>
-                        <div class="screen">
-                            <div id="notifications-settings" class="settings-panel active">
-                                <h3>Уведомления</h3>
-                                <mdui-switch checked>Новые сообщения</mdui-switch>
-                                <mdui-switch checked>Звуковые уведомления</mdui-switch>
-                                <mdui-switch>Уведомления о статусе</mdui-switch>
-                                <mdui-switch checked>Email уведомления</mdui-switch>
-                            </div>
-                            
-                            <div id="appearance-settings" class="settings-panel">
-                                <h3>Внешний вид</h3>
-                                <mdui-select label="Тема" variant="outlined">
-                                    <mdui-menu-item value="dark">Тёмная</mdui-menu-item>
-                                    <mdui-menu-item value="light">Светлая</mdui-menu-item>
-                                    <mdui-menu-item value="auto">Авто</mdui-menu-item>
-                                </mdui-select>
-                                <mdui-select label="Размер шрифта" variant="outlined">
-                                    <mdui-menu-item value="small">Маленький</mdui-menu-item>
-                                    <mdui-menu-item value="medium">Средний</mdui-menu-item>
-                                    <mdui-menu-item value="large">Большой</mdui-menu-item>
-                                </mdui-select>
-                            </div>
-                            
-                            <div id="security-settings" class="settings-panel">
-                                <h3>Безопасность</h3>
-                                <mdui-button variant="outlined">Изменить пароль</mdui-button>
-                                <mdui-button variant="outlined">Двухфакторная аутентификация</mdui-button>
-                                <mdui-switch>Автоматический выход</mdui-switch>
-                            </div>
-                            
-                            <div id="language-settings" class="settings-panel">
-                                <h3>Язык</h3>
-                                <mdui-select label="Выберите язык" variant="outlined">
-                                    <mdui-menu-item value="ru">Русский</mdui-menu-item>
-                                    <mdui-menu-item value="en">English</mdui-menu-item>
-                                    <mdui-menu-item value="es">Español</mdui-menu-item>
-                                </mdui-select>
-                            </div>
-                            
-                            <div id="storage-settings" class="settings-panel">
-                                <h3>Хранилище</h3>
-                                <p>Использовано: 2.5 ГБ из 10 ГБ</p>
-                                <mdui-linear-progress value="25"></mdui-linear-progress>
-                                <mdui-button variant="outlined">Очистить кэш</mdui-button>
-                            </div>
-                            
-                            <div id="help-settings" class="settings-panel">
-                                <h3>Помощь</h3>
-                                <mdui-button variant="outlined">Руководство пользователя</mdui-button>
-                                <mdui-button variant="outlined">Связаться с поддержкой</mdui-button>
-                                <mdui-button variant="outlined">FAQ</mdui-button>
-                            </div>
-                            
-                            <div id="about-settings" class="settings-panel">
-                                <h3>О приложении</h3>
-                                <p>Версия: 1.0.0</p>
-                                <p>© 2024 From Chat. Все права защищены.</p>
-                                <mdui-button variant="outlined">Политика конфиденциальности</mdui-button>
-                                <mdui-button variant="outlined">Условия использования</mdui-button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </mdui-dialog>
-
-        <div id="message-context-menu" class="context-menu">
-            <div class="context-menu-item" data-action="reply">
-                <span class="material-symbols">reply</span>
-                Reply
-            </div>
-            <div class="context-menu-item" data-action="edit">
-                <span class="material-symbols">edit</span>
-                Edit
-            </div>
-            <div class="context-menu-item" data-action="delete">
-                <span class="material-symbols">delete</span>
-                Delete
-            </div>
-        </div>
-
-        <mdui-dialog id="edit-message-dialog" close-on-overlay-click close-on-esc>
-            <div class="dialog-content">
-                <h3>Edit Message</h3>
-                <mdui-text-field 
-                    id="edit-message-input"
-                    label="Edit Message" 
-                    variant="outlined" 
-                    multiline 
-                    rows="4" 
-                    placeholder="Edit your message..."
-                    maxlength="1000">
-                </mdui-text-field>
-                <div class="dialog-actions">
-                    <mdui-button id="edit-cancel" variant="outlined">Cancel</mdui-button>
-                    <mdui-button id="edit-save">Save</mdui-button>
-                </div>
-            </div>
-        </mdui-dialog>
-
-        <mdui-dialog id="reply-message-dialog" close-on-overlay-click close-on-esc>
-            <div class="dialog-content">
-                <h3>Reply to Message</h3>
-                <div class="reply-preview" id="reply-preview"></div>
-                <mdui-text-field 
-                    id="reply-message-input"
-                    label="Reply" 
-                    variant="outlined" 
-                    multiline 
-                    rows="4" 
-                    placeholder="Type your reply..."
-                    maxlength="1000">
-                </mdui-text-field>
-                <div class="dialog-actions">
-                    <mdui-button id="reply-cancel" variant="outlined">Cancel</mdui-button>
-                    <mdui-button id="reply-send">Send Reply</mdui-button>
-                </div>
-            </div>
-        </mdui-dialog>
-
-        <mdui-dialog id="user-profile-dialog" close-on-overlay-click close-on-esc>
-            <div class="content">
-                <div class="profile-picture-section">
-                    <img class="profile-picture" src="" alt="Profile Picture">
-                </div>
-                <div class="profile-info">
-                    <div class="username-section">
-                        <h4 class="username"></h4>
-                        <div class="online-status"></div>
-                    </div>
-                    <div class="bio-section">
-                        <label>Bio:</label>
-                        <div class="bio-display"></div>
-                    </div>
-                    <div class="profile-stats">
-                        <div class="stat">
-                            <span class="stat-label">Member since:</span>
-                            <span class="stat-value member-since"></span>
-                        </div>
-                        <div class="stat">
-                            <span class="stat-label">Last seen:</span>
-                            <span class="stat-value last-seen"></span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </mdui-dialog>
-
-        <script src="src/main.ts" type="module"></script>
+        <div id="root"></div>
+        <script src="src/main.tsx" type="module"></script>
     </body>
 </html>

frontend/src/App.tsx

@@ -0,0 +1,47 @@
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { ElectronTitleBar } from "./Electron";
+import { useAppState } from "./pages/chat/state";
+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";
+
+// Lazy load route components
+const HomePage = lazy(() => import("./pages/home/HomePage"));
+const LoginPage = lazy(() => import("./pages/auth/LoginPage"));
+const RegisterPage = lazy(() => import("./pages/auth/RegisterPage"));
+const ChatPage = lazy(() => import("./pages/chat/ui/ChatPage"));
+
+export default function App() {
+    const { restoreUserFromStorage } = useAppState();
+    const [authReady, setAuthReady] = useState(false);
+
+    // Restore user from localStorage on app initialization
+    useEffect(() => {
+        restoreUserFromStorage().finally(() => {
+            setAuthReady(true);
+        });
+    }, [restoreUserFromStorage]);
+
+    return authReady && (
+        <BrowserRouter>
+            <ElectronTitleBar />
+            <div id="main-wrapper">
+                <Routes>
+                    <Route path="/" element={<HomePage />} />
+                    <Route path="/login" element={<LoginPage />} />
+                    <Route path="/register" element={<RegisterPage />} />
+                    <Route path="/download-app" element={<DownloadAppPage />} />
+                    <Route path="/">
+                        <Route path="chat" element={
+                            <ProtectedRoute>
+                                <ChatPage />
+                            </ProtectedRoute>
+                        } />
+                    </Route>
+                    <Route path="*" element={<NotFoundPage />} />
+                </Routes>
+            </div>
+        </BrowserRouter>
+    )
+}

frontend/src/Electron.tsx

@@ -0,0 +1,11 @@
+import { PRODUCT_NAME } from "./core/config";
+import { isElectron } from "./core/electron/electron";
+
+export function ElectronTitleBar() {
+    return isElectron && (
+        <div id="electron-title-bar">
+            {window.electronInterface.platform === "darwin" && <div className="macos-padding" />}
+            <div id="window-title">{PRODUCT_NAME}</div>
+        </div>
+    )
+}

frontend/src/auth.ts

@@ -1,305 +0,0 @@
-/**
- * @fileoverview Authentication system implementation
- * @description Handles user authentication, registration, and session management
- * @author Cursor
- * @version 1.0.0
- */
-
-import { loadMessages } from "./chat";
-import { initializeProfile } from "./profile";
-import type { Headers, ErrorResponse, User, LoginResponse, LoginRequest, RegisterRequest } from "./types";
-import { API_BASE_URL } from "./config";
-
-/**
- * Current authenticated user information
- * @type {User | null}
- */
-export let currentUser: User | null = null;
-
-/**
- * JWT authentication token
- * @type {string | null}
- */
-export let authToken: string | null = null;
-
-/**
- * Generates authentication headers for API requests
- * @param {boolean} json - Whether to include JSON content type header
- * @returns {Headers} Headers object with authentication and content type
- * @function getAuthHeaders
- * @example
- * const headers = getAuthHeaders();
- * fetch('/api/endpoint', { headers });
- */
-export function getAuthHeaders(json: boolean = true): Headers {
-    const headers: Headers = {};
-
-    if (json) {
-        headers["Content-Type"] = "application/json";
-    }
-
-    if (authToken) {
-        headers['Authorization'] = `Bearer ${authToken}`;
-    }
-    return headers;
-}
-
-/**
- * Shows the login form and hides other interfaces
- * @function showLogin
- * @example
- * showLogin();
- */
-export function showLogin(): void {
-    document.getElementById('login-form')!.style.display = 'flex';
-    document.getElementById('register-form')!.style.display = 'none';
-    document.getElementById('chat-interface')!.style.display = 'none';
-    clearAlerts();
-    document.getElementById("electron-title-bar")!.classList.add("color-surface");
-}
-
-/**
- * Shows the registration form and hides other interfaces
- * @function showRegister
- * @example
- * showRegister();
- */
-export function showRegister(): void {
-    document.getElementById('login-form')!.style.display = 'none';
-    document.getElementById('register-form')!.style.display = 'flex';
-    document.getElementById('chat-interface')!.style.display = 'none';
-    clearAlerts();
-    document.getElementById("electron-title-bar")!.classList.add("color-surface");
-}
-
-/**
- * Shows the chat interface and hides authentication forms
- * @function showChat
- * @example
- * showChat();
- */
-export function showChat(): void {
-    document.getElementById('login-form')!.style.display = 'none';
-    document.getElementById('register-form')!.style.display = 'none';
-    document.getElementById('chat-interface')!.style.display = 'block';
-    loadMessages();
-    document.getElementById("electron-title-bar")!.classList.remove("color-surface");
-}
-
-/**
- * Clears all alert messages from authentication forms
- * @function clearAlerts
- * @private
- */
-export function clearAlerts(): void {
-    document.getElementById('login-alerts')!.innerHTML = '';
-    document.getElementById('register-alerts')!.innerHTML = '';
-}
-
-/**
- * Shows an alert message in the specified container
- * @param {string} containerId - ID of the container to show the alert in
- * @param {string} message - Alert message to display
- * @param {'success' | 'danger'} type - Type of alert (success or danger)
- * @function showAlert
- * @example
- * showAlert('login-alerts', 'Login successful!', 'success');
- */
-export function showAlert(containerId: string, message: string, type: "success" | "danger" = 'danger'): void {
-    const container = document.getElementById(containerId)!;
-    const alertDiv = document.createElement('div');
-    alertDiv.className = `alert alert-${type}`;
-    alertDiv.textContent = message;
-    container.appendChild(alertDiv);
-}
-
-/**
- * Handles login form submission
- * @async
- * @function handleLogin
- * @param {Event} e - Form submission event
- * @private
- */
-async function handleLogin(e: Event): Promise<void> {
-    e.preventDefault();
-
-    const usernameElement = document.getElementById('login-username') as HTMLInputElement;
-    const passwordElement = document.getElementById('login-password') as HTMLInputElement;
-    
-    const username = usernameElement.value.trim();
-    const password = passwordElement.value.trim();
-    
-    if (!username || !password) {
-        showAlert('login-alerts', 'Пожалуйста, заполните все поля', 'danger');
-        return;
-    }
-    
-    try {
-        const request: LoginRequest = {
-            username: username,
-            password: password
-        }
-
-        const response = await fetch(`${API_BASE_URL}/login`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(request)
-        });
-        
-        if (response.ok) {
-            const data: LoginResponse = await response.json();
-            // Store the JWT token
-            authToken = data.token;
-            currentUser = data.user;
-            showChat();
-            loadMessages(); // Start loading messages
-            initializeProfile(); // Initialize profile after login
-        } else {
-            const data: ErrorResponse = await response.json();
-            showAlert('login-alerts', data.message || 'Неверное имя пользователя или пароль', 'danger');
-        }
-    } catch (error) {
-        showAlert('login-alerts', 'Ошибка соединения с сервером', 'danger');
-    }
-}
-
-/**
- * Handles registration form submission
- * @async
- * @function handleRegister
- * @param {Event} e - Form submission event
- * @private
- */
-async function handleRegister(e: Event): Promise<void> {
-    e.preventDefault();
-
-    const usernameElement = document.getElementById('register-username') as HTMLInputElement;
-    const passwordElement = document.getElementById('register-password') as HTMLInputElement;
-    const confirmPasswordElement = document.getElementById('register-confirm-password') as HTMLInputElement;
-    
-    const username = usernameElement.value.trim();
-    const password = passwordElement.value.trim();
-    const confirmPassword = confirmPasswordElement.value.trim();
-    
-    if (!username || !password || !confirmPassword) {
-        showAlert('register-alerts', 'Пожалуйста, заполните все поля', 'danger');
-        return;
-    }
-    
-    if (password !== confirmPassword) {
-        showAlert('register-alerts', 'Пароли не совпадают', 'danger');
-        return;
-    }
-    
-    if (username.length < 3 || username.length > 20) {
-        showAlert('register-alerts', 'Имя пользователя должно быть от 3 до 20 символов', 'danger');
-        return;
-    }
-    
-    if (password.length < 5 || password.length > 50) {
-        showAlert('register-alerts', 'Пароль должен быть от 5 до 50 символов', 'danger');
-        return;
-    }
-    
-    try {
-        const request: RegisterRequest = {
-            username: username,
-            password: password,
-            confirm_password: confirmPassword
-        }
-
-        const response = await fetch(`${API_BASE_URL}/register`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(request)
-        });
-        
-        if (response.ok) {
-            // Registration successful
-            showAlert('register-alerts', 'Регистрация прошла успешно! Теперь вы можете войти.', 'success');
-            setTimeout(() => {
-                showLogin();
-            }, 2000);
-        } else {
-            const data: ErrorResponse = await response.json();
-            showAlert('register-alerts', data.message || 'Ошибка при регистрации', 'danger');
-        }
-    } catch (error) {
-        showAlert('register-alerts', 'Ошибка соединения с сервером', 'danger');
-    }
-}
-
-/**
- * Logs out the current user and clears session data
- * @async
- * @function logout
- * @example
- * await logout();
- */
-export async function logout(): Promise<void> {
-    try {
-        await fetch(`${API_BASE_URL}/logout`, {
-            method: 'GET',
-            headers: getAuthHeaders()
-        });
-    } catch (error) {
-        console.error('Logout error:', error);
-    }
-    
-    currentUser = null;
-    authToken = null;
-    showLogin();
-    clearAlerts();
-}
-
-/**
- * Loads the chat interface and initializes messaging
- * @function loadChat
- * @example
- * loadChat();
- */
-export function loadChat(): void {
-    showChat();
-    loadMessages();
-}
-
-/**
- * Checks authentication status on page load
- * @async
- * @function checkAuthStatus
- * @example
- * await checkAuthStatus();
- */
-export async function checkAuthStatus(): Promise<void> {
-    // For JWT, we don't have a persistent token on page load
-    // So we'll just show the login form
-    showLogin();
-}
-
-/**
- * Sets up authentication form event listeners
- * @function setupAuthForms
- * @private
- */
-function setupAuthForms(): void {
-    document.getElementById('login-form-element')!.addEventListener('submit', handleLogin);
-    document.getElementById('register-form-element')!.addEventListener('submit', handleRegister);
-}
-
-/**
- * Initializes links
- * @function setupLinks
- * @private
- */
-function setupLinks(): void {
-    document.getElementById("login-link")!.addEventListener("click", showLogin);
-    document.getElementById("register-link")!.addEventListener("click", showRegister);
-}
-
-// Initialize authentication forms
-setupAuthForms();
-setupLinks();

frontend/src/chat.ts

@@ -1,263 +0,0 @@
-/**
- * @fileoverview Chat functionality and message management
- * @description Handles message display, loading, sending, and real-time updates
- * @author Cursor
- * @version 1.0.0
- */
-
-import { getAuthHeaders, currentUser, authToken } from "./auth";
-import { API_BASE_URL } from "./config";
-import { websocket } from "./websocket";
-import type { Message, Messages, WebSocketMessage } from "./types";
-import { formatTime } from "./utils/utils";
-import { show as showContextMenu } from "./message-context-menu";
-import { show as showUserProfileDialog } from "./user-profile-dialog";
-import defaultAvatar from "./images/default-avatar.png";
-
-/**
- * Adds a new message to the chat interface
- * @param {Message} message - Message object to display
- * @param {boolean} isAuthor - Whether the current user is the message author
- * @function addMessage
- * @example
- * addMessage(messageData, messageData.username === currentUser.username);
- */
-export function addMessage(message: Message, isAuthor: boolean): void {
-    const messagesContainer = document.querySelector('.chat-messages') as HTMLElement;
-    const messageDiv = document.createElement('div');
-    messageDiv.classList.add("message");
-    if (isAuthor) {
-        messageDiv.classList.add("sent");
-    } else {
-        messageDiv.classList.add("received");
-    }
-    messageDiv.dataset.id = `${message.id}`;
-
-    const messageInner = document.createElement('div');
-    messageInner.classList.add('message-inner');
-
-    // Add profile picture for received messages
-    if (!isAuthor) {
-        const profilePicDiv = document.createElement('div');
-        profilePicDiv.classList.add('message-profile-pic');
-        
-        const profileImg = document.createElement('img');
-        profileImg.src = message.profile_picture || defaultAvatar;
-        profileImg.alt = message.username;
-
-        let errorLock = false;
-
-        profileImg.addEventListener("error", () => {
-            if (!errorLock) {
-                profileImg.src = defaultAvatar;
-                errorLock = true;
-            }
-        });
-        
-        // Add click handler to profile picture
-        profileImg.style.cursor = 'pointer';
-        profileImg.addEventListener('click', () => {
-            showUserProfileDialog(message.username);
-        });
-        
-        profilePicDiv.appendChild(profileImg);
-        messageDiv.appendChild(profilePicDiv);
-    }
-
-    if (!isAuthor) {
-        const usernameDiv = document.createElement('div');
-        usernameDiv.classList.add('message-username');
-        usernameDiv.textContent = message.username;
-        
-        // Add click handler to username
-        usernameDiv.style.cursor = 'pointer';
-        usernameDiv.addEventListener('click', () => {
-            showUserProfileDialog(message.username);
-        });
-        
-        messageInner.appendChild(usernameDiv);
-    }
-
-    // Add reply preview if this is a reply
-    if (message.reply_to) {
-        const replyDiv = document.createElement('div');
-        replyDiv.classList.add('message-reply');
-        replyDiv.innerHTML = `
-            <div class="reply-content">
-                <span class="reply-username">${message.reply_to.username}</span>
-                <span class="reply-text">${message.reply_to.content}</span>
-            </div>
-        `;
-        messageInner.appendChild(replyDiv);
-    }
-
-    const contentDiv = document.createElement('div');
-    contentDiv.classList.add('message-content');
-    contentDiv.textContent = message.content;
-    messageInner.appendChild(contentDiv);
-
-    const timeDiv = document.createElement('div');
-    timeDiv.classList.add('message-time');
-    
-    let timeText = formatTime(message.timestamp);
-    if (message.is_edited) {
-        timeText += ' (edited)';
-    }
-    timeDiv.textContent = timeText;
-
-    if (isAuthor && message.is_read) {
-        const checkIcon = document.createElement('span');
-        checkIcon.classList.add("material-symbols", "outlined");
-        timeDiv.appendChild(checkIcon);
-    }
-
-    messageInner.appendChild(timeDiv);
-    messageDiv.appendChild(messageInner);
-    messagesContainer.appendChild(messageDiv);
-
-    // Add right-click context menu
-    messageDiv.addEventListener('contextmenu', (e) => {
-        e.preventDefault();
-        showContextMenu(message, e.clientX, e.clientY);
-    });
-
-    // Прокрутка к новому сообщению
-    messagesContainer.scrollTop = messagesContainer.scrollHeight;
-}
-
-/**
- * Loads chat messages from the server
- * @function loadMessages
- * @example
- * loadMessages();
- */
-export function loadMessages(): void {
-    fetch(`${API_BASE_URL}/get_messages`, {
-        headers: getAuthHeaders()
-    })
-        .then(response => response.json())
-        .then((data: Messages) => {
-            if (data.messages && data.messages.length > 0) {
-                const messagesContainer = document.querySelector('.chat-messages') as HTMLElement;
-
-                const lastMessage = messagesContainer.lastElementChild as HTMLElement
-                let lastMessageId: number = 0
-                if (lastMessage) {
-                    lastMessageId = Number(lastMessage.dataset.id)
-                }
-                
-                // Добавляем только новые сообщения
-                data.messages.forEach(msg => {
-                    if (msg.id > lastMessageId) {
-                        addMessage(msg, msg.username == currentUser!.username);
-                    }
-                });
-            }
-        });
-}
-
-/**
- * Sends a message via WebSocket
- * @function sendMessage
- * @example
- * sendMessage();
- */
-export function sendMessage(): void {
-    const input = document.querySelector('.message-input') as HTMLInputElement;
-    const message = input.value.trim();
-
-    if (message) {
-        const payload: WebSocketMessage = {
-            data: {
-                content: message
-            }, 
-            credentials: {
-                scheme: "Bearer", 
-                credentials: authToken!
-            },
-            type: "sendMessage"
-        }
-
-        let callback: ((e: MessageEvent) => void) | null = null
-        callback = (e) => {
-            websocket.removeEventListener("message", callback!);
-            const response: WebSocketMessage = JSON.parse(e.data)
-            console.log(response)
-            if (!response.error) {
-                input.value = "";
-            }
-        }
-        websocket.addEventListener("message", callback);
-
-        websocket.send(JSON.stringify(payload));
-    }
-}
-
-
-document.getElementById('message-form')!.addEventListener('submit', (e) => {
-    e.preventDefault();
-    sendMessage();
-});
-
-/**
- * Updates an existing message in the chat interface
- * @param {Message} message - Updated message object
- * @function updateMessage
- */
-export function updateMessage(message: Message): void {
-    const messageElement = document.querySelector(`[data-id="${message.id}"]`) as HTMLElement;
-    if (!messageElement) return;
-
-    const contentDiv = messageElement.querySelector('.message-content') as HTMLElement;
-    const timeDiv = messageElement.querySelector('.message-time') as HTMLElement;
-
-    if (contentDiv) {
-        contentDiv.textContent = message.content;
-    }
-
-    if (timeDiv) {
-        let timeText = formatTime(message.timestamp);
-        if (message.is_edited) {
-            timeText += ' (edited)';
-        }
-        timeDiv.textContent = timeText;
-    }
-}
-
-/**
- * Removes a message from the chat interface
- * @param {number} messageId - ID of the message to remove
- * @function removeMessage
- */
-export function removeMessage(messageId: number): void {
-    const messageElement = document.querySelector(`[data-id="${messageId}"]`) as HTMLElement;
-    if (messageElement) {
-        messageElement.remove();
-    }
-}
-
-/**
- * Handles WebSocket message updates
- * @param {WebSocketMessage} response - WebSocket response
- * @function handleWebSocketMessage
- */
-export function handleWebSocketMessage(response: WebSocketMessage): void {
-    switch (response.type) {
-        case 'messageEdited':
-            if (response.data) {
-                updateMessage(response.data);
-            }
-            break;
-        case 'messageDeleted':
-            if (response.data && response.data.message_id) {
-                removeMessage(response.data.message_id);
-            }
-            break;
-        case 'newMessage':
-            if (response.data) {
-                const isAuthor = response.data.username === currentUser?.username;
-                addMessage(response.data, isAuthor);
-            }
-            break;
-    }
-}

frontend/src/core/api/authApi.ts

@@ -0,0 +1,139 @@
+import type { Headers, UploadPublicKeyRequest, BackupBlob } from "@/core/types";
+import { generateX25519KeyPair } from "@/utils/crypto/asymmetric";
+import { encodeBlob, encryptBackupWithPassword, decryptBackupWithPassword, decodeBlob } from "@/utils/crypto/backup";
+import { b64, ub64 } from "@/utils/utils";
+import { API_BASE_URL } from "@/core/config";
+
+/**
+ * Generates authentication headers for API requests
+ * @param {boolean} json - Whether to include JSON content type header
+ * @returns {Headers} Headers object with authentication and content type
+ */
+export function getAuthHeaders(token: string | null, json: boolean = true): Headers {
+    const headers: Headers = {};
+
+    if (json) {
+        headers["Content-Type"] = "application/json";
+    }
+
+    if (token) {
+        headers["Authorization"] = `Bearer ${token}`;
+    }
+    return headers;
+}
+
+let currentPublicKey: Uint8Array | null = null;
+let currentPrivateKey: Uint8Array | null = null;
+
+async function fetchPublicKey(token: string): Promise<Uint8Array | null> {
+	const headers = getAuthHeaders(token, true);
+	const res = await fetch(`${API_BASE_URL}/crypto/public-key`, { method: "GET", headers });
+	if (!res.ok) return null;
+	const data = await res.json();
+	if (!data?.publicKey) return null;
+	return ub64(data.publicKey);
+}
+
+async function uploadPublicKey(publicKey: Uint8Array, token: string): Promise<void> {
+	await fetch(`${API_BASE_URL}/crypto/public-key`, {
+		method: "POST",
+		headers: getAuthHeaders(token, true),
+		body: JSON.stringify({ 
+			publicKey: b64(publicKey) 
+		} satisfies UploadPublicKeyRequest)
+	});
+}
+
+async function fetchBackupBlob(token: string): Promise<string | null> {
+	const headers = getAuthHeaders(token, true);
+	const res = await fetch(`${API_BASE_URL}/crypto/backup`, { 
+		method: "GET",
+		headers 
+	});
+	if (res.ok) {
+		const response: BackupBlob = await res.json();
+		return response.blob;
+	} else {
+		return null;
+	}
+}
+
+async function uploadBackupBlob(blobJson: string, token: string): Promise<void> {
+	const payload: BackupBlob = { blob: blobJson }
+
+	const headers = getAuthHeaders(token, true);
+	await fetch(`${API_BASE_URL}/crypto/backup`, {
+		method: "POST",
+		headers,
+		body: JSON.stringify(payload)
+	});
+}
+
+export interface UserKeyPairMemory {
+	publicKey: Uint8Array;
+	privateKey: Uint8Array;
+}
+
+export function getCurrentKeys(): UserKeyPairMemory | null {
+	if (currentPublicKey && currentPrivateKey) return { publicKey: currentPublicKey, privateKey: currentPrivateKey };
+	return null;
+}
+
+function saveKeys(
+	publicKey: Uint8Array<ArrayBufferLike>, 
+	privateKey: Uint8Array<ArrayBufferLike>
+) {
+	const encodedPublicKey = b64(publicKey);
+	const encodedPrivateKey = b64(privateKey);
+
+	localStorage.setItem("publicKey", encodedPublicKey);
+	localStorage.setItem("privateKey", encodedPrivateKey);
+}
+
+export async function ensureKeysOnLogin(password: string, token: string): Promise<UserKeyPairMemory> {
+	// Try to restore from backup
+	const blobJson = await fetchBackupBlob(token);
+	if (blobJson) {
+		const blob = decodeBlob(blobJson);
+		const bundle = await decryptBackupWithPassword(password, blob);
+		currentPrivateKey = bundle.privateKey;
+		// Ensure public key exists on server; if not, derive from private (not possible via libsafely), so keep previous
+		// In our simple scheme, we rely on server having the public key or we reupload generated one on first setup
+		const serverPub = await fetchPublicKey(token);
+		if (serverPub) {
+			currentPublicKey = serverPub;
+		} else {
+			// We don't have the corresponding public key from server; regenerate pair to resync
+			const pair = generateX25519KeyPair();
+			currentPublicKey = pair.publicKey;
+			currentPrivateKey = pair.privateKey;
+			await uploadPublicKey(currentPublicKey, token);
+			const newBlob = await encryptBackupWithPassword(password, { version: 1, privateKey: currentPrivateKey });
+			await uploadBackupBlob(encodeBlob(newBlob), token);
+		}
+
+		saveKeys(currentPublicKey!, currentPrivateKey!);
+
+		return { 
+			publicKey: currentPublicKey!, 
+			privateKey: currentPrivateKey! 
+		};
+	}
+
+	// First-time setup: generate keys and upload
+	const pair = generateX25519KeyPair();
+	currentPublicKey = pair.publicKey;
+	currentPrivateKey = pair.privateKey;
+	await uploadPublicKey(currentPublicKey, token);
+	const encBlob = await encryptBackupWithPassword(password, { version: 1, privateKey: currentPrivateKey });
+	await uploadBackupBlob(encodeBlob(encBlob), token);
+
+	saveKeys(pair.publicKey, pair.privateKey);
+
+	return pair;
+}
+
+export function restoreKeys() {
+	currentPublicKey = ub64(localStorage.getItem("publicKey")!);
+	currentPrivateKey = ub64(localStorage.getItem("privateKey")!);
+}

frontend/src/core/api/dmApi.ts

@@ -0,0 +1,183 @@
+import { API_BASE_URL } from "@/core/config";
+import { getAuthHeaders } from "./authApi";
+import { ecdhSharedSecret, deriveWrappingKey } from "@/utils/crypto/asymmetric";
+import { importAesGcmKey, aesGcmEncrypt, aesGcmDecrypt } from "@/utils/crypto/symmetric";
+import { randomBytes } from "@/utils/crypto/kdf";
+import { getCurrentKeys } from "./authApi";
+import { request } from "@/core/websocket";
+import type { SendDMRequest, DmEnvelope, User, DMEditRequest, DmEncryptedJSON, BaseDmEnvelope } from "@/core/types";
+import { b64, ub64 } from "@/utils/utils";
+
+export async function decryptDm(envelope: DmEnvelope, senderPublicKeyB64: string): Promise<string> {
+    const keys = getCurrentKeys();
+    if (!keys) throw new Error("Keys not initialized");
+
+    // Obtain the key
+    const shared = ecdhSharedSecret(keys.privateKey, ub64(senderPublicKeyB64));
+    const wkRaw = await deriveWrappingKey(shared, ub64(envelope.salt), new Uint8Array([1]));
+    const wk = await importAesGcmKey(wkRaw);
+    const mk = await aesGcmDecrypt(wk, ub64(envelope.iv2), ub64(envelope.wrappedMk));
+
+    // Decrypt
+    const msg = await aesGcmDecrypt(await importAesGcmKey(mk), ub64(envelope.iv), ub64(envelope.ciphertext));
+    return new TextDecoder().decode(msg);
+}
+
+export async function fetchUsers(token: string): Promise<User[]> {
+    const res = await fetch(`${API_BASE_URL}/users`, { headers: getAuthHeaders(token, true) });
+    if (!res.ok) return [];
+    const data = await res.json();
+    return data.users || [];
+}
+
+export async function fetchUserPublicKey(userId: number, token: string): Promise<string | null> {
+    const res = await fetch(`${API_BASE_URL}/crypto/public-key/of/${userId}`, { headers: getAuthHeaders(token, true) });
+    if (!res.ok) return null;
+    const data = await res.json();
+    return data.publicKey;
+}
+
+export async function fetchDMHistory(userId: number, token: string, limit: number = 50): Promise<DmEnvelope[]> {
+    const response = await fetch(`${API_BASE_URL}/dm/history/${userId}?limit=${limit}`, { 
+        headers: getAuthHeaders(token, true) 
+    });
+    if (!response.ok) return [];
+    const data = await response.json();
+    return data.messages || [];
+}
+
+export async function sendDMViaWebSocket(
+    recipientId: number, 
+    recipientPublicKeyB64: string,
+    plaintext: string,
+    authToken: string,
+    replyToId?: number
+): Promise<void> {
+    const keys = getCurrentKeys();
+    if (!keys) throw new Error("Keys not initialized");
+
+    // Encryption key
+    const mk = randomBytes(32);
+    const wkSalt = randomBytes(16);
+    const shared = ecdhSharedSecret(keys.privateKey, ub64(recipientPublicKeyB64));
+    const wkRaw = await deriveWrappingKey(shared, wkSalt, new Uint8Array([1]));
+    const wk = await importAesGcmKey(wkRaw);
+
+    // Encrypt the message
+    const encMsg = await aesGcmEncrypt(await importAesGcmKey(mk), new TextEncoder().encode(plaintext));
+    const wrap = await aesGcmEncrypt(wk, mk);
+
+    const payload: SendDMRequest = {
+        recipientId: recipientId,
+        iv: b64(encMsg.iv),
+        ciphertext: b64(encMsg.ciphertext),
+        salt: b64(wkSalt),
+        iv2: b64(wrap.iv),
+        wrappedMk: b64(wrap.ciphertext)
+    };
+    if (replyToId) payload.replyToId = replyToId;
+
+    await request({
+        type: "dmSend",
+        credentials: { 
+            scheme: "Bearer", 
+            credentials: authToken
+        },
+        data: payload
+    });
+}
+
+export async function sendDmWithFiles(
+    recipientId: number, 
+    recipientPublicKeyB64: string, 
+    plaintextJson: string, 
+    files: File[], 
+    token: string
+): Promise<void> {
+    const keys = getCurrentKeys();
+    if (!keys) throw new Error("Keys not initialized");
+
+    const mk = randomBytes(32);
+    const wkSalt = randomBytes(16);
+    const shared = await ecdhSharedSecret(keys.privateKey, ub64(recipientPublicKeyB64));
+    const wkRaw = await deriveWrappingKey(shared, wkSalt, new Uint8Array([1]));
+    const wk = await importAesGcmKey(wkRaw);
+
+    const wrap = await aesGcmEncrypt(wk, mk);
+
+    const form = new FormData();
+    const names: string[] = [];
+    function sliceBuffer(u8: Uint8Array): ArrayBuffer {
+        return (u8.buffer as ArrayBuffer).slice(u8.byteOffset, u8.byteOffset + u8.byteLength);
+    }
+
+    for (const f of files) {
+        // Encrypt file with same mk
+        const data = new Uint8Array(await f.arrayBuffer());
+        const enc = await aesGcmEncrypt(await importAesGcmKey(mk), data);
+        const blob = new Blob([sliceBuffer(enc.iv), sliceBuffer(enc.ciphertext)], { type: "application/octet-stream" });
+        const serverName = f.name; // server uses provided name
+        names.push(serverName);
+        form.append("files", new File([blob], serverName));
+    }
+    form.append("fileNames", JSON.stringify(names));
+
+    // Merge files metadata into plaintext JSON and encrypt
+    let obj: DmEncryptedJSON;
+    try {
+        obj = JSON.parse(plaintextJson);
+    } catch {
+        obj = { type: "text", data: { content: String(plaintextJson) } };
+    }
+
+    const encMsg = await aesGcmEncrypt(await importAesGcmKey(mk), new TextEncoder().encode(JSON.stringify(obj)));
+    form.append("dm_payload", JSON.stringify({
+        recipientId: recipientId,
+        iv: b64(encMsg.iv),
+        ciphertext: b64(encMsg.ciphertext),
+        salt: b64(wkSalt),
+        iv2: b64(wrap.iv),
+        wrappedMk: b64(wrap.ciphertext)
+    } satisfies BaseDmEnvelope));
+
+    await fetch(`${API_BASE_URL}/dm/send`, {
+        method: "POST",
+        headers: getAuthHeaders(token, false),
+        body: form
+    });
+}
+
+export async function editDmEnvelope(id: number, recipientPublicKeyB64: string, newPlaintextJson: string, authToken: string): Promise<void> {
+    const keys = getCurrentKeys();
+    if (!keys) throw new Error("Keys not initialized");
+
+    // We cannot reuse the old mk safely without knowing it; generate a fresh mk and wrap
+    const mk = randomBytes(32);
+    const wkSalt = randomBytes(16);
+    const shared = await ecdhSharedSecret(keys.privateKey, ub64(recipientPublicKeyB64));
+    const wkRaw = await deriveWrappingKey(shared, wkSalt, new Uint8Array([1]));
+    const wk = await importAesGcmKey(wkRaw);
+    const encMsg = await aesGcmEncrypt(await importAesGcmKey(mk), new TextEncoder().encode(newPlaintextJson));
+    const wrap = await aesGcmEncrypt(wk, mk);
+
+    await request({
+        type: "dmEdit",
+        credentials: { scheme: "Bearer", credentials: authToken },
+        data: {
+            id,
+            iv: b64(encMsg.iv),
+            ciphertext: b64(encMsg.ciphertext),
+            iv2: b64(wrap.iv),
+            wrappedMk: b64(wrap.ciphertext),
+            salt: b64(wkSalt)
+        }
+    } as DMEditRequest);
+}
+
+export async function deleteDmEnvelope(id: number, recipientId: number, authToken: string): Promise<void> {
+    await request({
+        type: "dmDelete",
+        credentials: { scheme: "Bearer", credentials: authToken },
+        data: { id, recipientId }
+    });
+}

frontend/src/core/api/profileApi.ts

@@ -0,0 +1,128 @@
+import { getAuthHeaders } from "./authApi";
+import { API_BASE_URL } from "@/core/config";
+import type { UserProfile } from "@/core/types";
+
+export interface ProfileData {
+    profile_picture?: string;
+    nickname?: string;
+    description?: string;
+}
+
+export interface UploadResponse {
+    profile_picture_url: string;
+}
+
+/**
+ * Loads user profile data from the server
+ */
+export async function loadProfile(token: string): Promise<ProfileData | null> {
+    try {
+        const response = await fetch(`${API_BASE_URL}/user/profile`, {
+            headers: getAuthHeaders(token)
+        });
+
+        if (response.ok) {
+            const data = await response.json();
+            // Map backend fields to frontend fields
+            return {
+                profile_picture: data.profile_picture,
+                nickname: data.username,
+                description: data.bio
+            };
+        }
+        
+        return null;
+    } catch (error) {
+        console.error("Error loading profile:", error);
+        return null;
+    }
+}
+
+/**
+ * Uploads a profile picture to the server
+ */
+export async function uploadProfilePicture(token: string, file: Blob): Promise<UploadResponse | null> {
+    try {
+        const formData = new FormData();
+        formData.append("profile_picture", file, "profile_picture.jpg");
+
+        const response = await fetch(`${API_BASE_URL}/upload-profile-picture`, {
+            method: "POST",
+            body: formData,
+            headers: getAuthHeaders(token, false)
+        });
+
+        if (response.ok) {
+            return await response.json();
+        }
+        return null;
+    } catch (error) {
+        console.error("Upload error:", error);
+        return null;
+    }
+}
+
+/**
+ * Updates user profile information
+ */
+export async function updateProfile(token: string, data: Partial<ProfileData>): Promise<boolean> {
+    try {
+        // Map frontend fields to backend fields
+        const backendData = {
+            nickname: data.nickname,
+            description: data.description
+        };
+
+        const response = await fetch(`${API_BASE_URL}/user/profile`, {
+            method: "PUT",
+            headers: {
+                ...getAuthHeaders(token),
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify(backendData)
+        });
+
+        return response.ok;
+    } catch (error) {
+        console.error("Error updating profile:", error);
+        return false;
+    }
+}
+
+/**
+ * Updates user bio
+ */
+export async function updateBio(token: string, bio: string): Promise<boolean> {
+    try {
+        const response = await fetch(`${API_BASE_URL}/user/bio`, {
+            method: "PUT",
+            headers: getAuthHeaders(token),
+            body: JSON.stringify({ bio })
+        });
+
+        return response.ok;
+    } catch (error) {
+        console.error("Error updating bio:", error);
+        return false;
+    }
+}
+
+/**
+ * Fetches user profile data by username
+ */
+export async function fetchUserProfile(token: string, username: string): Promise<UserProfile | null> {
+    try {
+        const response = await fetch(`${API_BASE_URL}/user/${username}`, {
+            headers: getAuthHeaders(token)
+        });
+
+        if (response.ok) {
+            return await response.json();
+        }
+        
+        return null;
+    } catch (error) {
+        console.error("Error fetching user profile:", error);
+        return null;
+    }
+}

frontend/src/core/components/Dialog.tsx

@@ -0,0 +1,48 @@
+import type { Dialog as MduiDialog } from "mdui/components/dialog";
+import { useEffect, type Ref } from "react"
+import { createPortal } from "react-dom";
+import { id } from "@/utils/utils";
+import useCombinedRefs from "@/core/hooks/useCombinedRefs";
+
+export interface BaseDialogProps {
+    onOpenChange: (value: boolean) => void;
+    ref?: Ref<MduiDialog & HTMLElement>
+}
+
+export type FullDialogProps = React.ComponentPropsWithoutRef<"mdui-dialog"> & BaseDialogProps;
+
+export function MaterialDialog(props: FullDialogProps) {
+    // eslint-disable-next-line react-hooks/refs
+    const [setDialogRef, dialogRef] = useCombinedRefs(props.ref);
+    const { open, onOpenChange } = props;
+
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog) return;
+
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === "attributes" && mutation.attributeName === "open") {
+                    const isOpen = dialog.hasAttribute("open");
+                    if (isOpen !== open) {
+                        onOpenChange(isOpen);
+                    }
+                }
+            });
+        });
+
+        // Start observing the dialog element for attribute changes
+        observer.observe(dialog, {
+            attributes: true,
+            attributeFilter: ["open"]
+        });
+
+        // Cleanup observer
+        return () => {
+            observer.disconnect();
+        };
+    }, [open, onOpenChange, dialogRef]);
+
+    // eslint-disable-next-line react-hooks/refs
+    return createPortal(<mdui-dialog {...props} ref={setDialogRef} />, id("root"));
+}

frontend/src/core/components/Quote.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+
+export interface QuoteProps {
+    className?: string;
+    children?: ReactNode;
+    background?: "surfaceContainer" | "primaryContainer"
+}
+
+export default function Quote({ className, children, background = "primaryContainer" }: QuoteProps) {
+    return (
+        <div className={`quote bg-${background} ${className}`}>
+            <div className="quote-inner">
+                {children}
+            </div>
+        </div>
+    )
+}

frontend/src/core/components/RichTextArea.tsx

@@ -0,0 +1,211 @@
+import { useEffect, useRef, useCallback, useLayoutEffect } from "react";
+
+interface RichTextAreaProps {
+    text: string;
+    onTextChange: (value: string) => void;
+    onEnter?: "newLine" | null | ((e: React.KeyboardEvent<HTMLTextAreaElement>) => void);
+    onCtrlEnter?: ((e: React.KeyboardEvent<HTMLTextAreaElement>) => void) | null;
+    placeholder?: string;
+    id?: string;
+    className?: string;
+    rows?: number;
+    autoComplete?: string;
+}
+
+export function RichTextArea({
+    text,
+    onTextChange,
+    onEnter = "newLine",
+    onCtrlEnter = null,
+    placeholder,
+    className,
+    rows = 1,
+    autoComplete = "off"
+}: RichTextAreaProps) {
+    const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+    const hiddenTextareaRef = useRef<HTMLTextAreaElement | null>(null);
+    const heightRef = useRef<number | null>(null);
+
+    function getStyleValue(computedStyle: CSSStyleDeclaration, prop: keyof CSSStyleDeclaration): number {
+        const raw = computedStyle[prop] as string | number | undefined;
+        if (raw === null) return 0;
+        const str = String(raw);
+        return str.endsWith("px") ? parseFloat(str) : parseFloat(str) || 0;
+    }
+
+    const calculateTextareaStyles = useCallback(() => {
+        const textarea = textareaRef.current;
+        const hidden = hiddenTextareaRef.current;
+        if (!textarea || !hidden) return undefined;
+
+        const computedStyle = window.getComputedStyle(textarea);
+        if (computedStyle.width === "0px") {
+            return { outerHeightStyle: 0, overflowing: false };
+        }
+
+        // Ensure hidden textarea copies width but not percentage-based anomalies from parents
+        // Normalize hidden textarea to avoid inherited constraints and copy critical metrics
+        hidden.style.position = "fixed";
+        hidden.style.top = "-9999px";
+        hidden.style.left = "-9999px";
+        hidden.style.visibility = "hidden";
+        hidden.style.height = "auto";
+        hidden.style.minHeight = "0";
+        hidden.style.maxHeight = "none";
+        hidden.style.overflow = "hidden";
+        hidden.style.boxSizing = computedStyle.boxSizing;
+        // Avoid counting vertical padding twice: keep 0 for measurement
+        hidden.style.paddingTop = "0";
+        hidden.style.paddingBottom = "0";
+        hidden.style.paddingLeft = computedStyle.paddingLeft;
+        hidden.style.paddingRight = computedStyle.paddingRight;
+        // Do not include borders in the inner scrollHeight measurement
+        hidden.style.borderTopWidth = "0";
+        hidden.style.borderBottomWidth = "0";
+        hidden.style.borderLeftWidth = computedStyle.borderLeftWidth;
+        hidden.style.borderRightWidth = computedStyle.borderRightWidth;
+        hidden.style.fontFamily = computedStyle.fontFamily;
+        hidden.style.fontSize = computedStyle.fontSize;
+        hidden.style.fontWeight = computedStyle.fontWeight;
+        hidden.style.lineHeight = computedStyle.lineHeight;
+        hidden.style.letterSpacing = computedStyle.letterSpacing;
+        hidden.style.whiteSpace = computedStyle.whiteSpace;
+        hidden.style.wordSpacing = computedStyle.wordSpacing;
+        hidden.style.textIndent = computedStyle.textIndent;
+        hidden.style.textTransform = computedStyle.textTransform;
+        hidden.style.textDecoration = computedStyle.textDecoration;
+        hidden.style.width = computedStyle.width;
+        hidden.style.maxWidth = computedStyle.width;
+        hidden.value = textarea.value || placeholder || "x";
+        if (hidden.value.slice(-1) === "\n") {
+            hidden.value += " ";
+        }
+
+        const boxSizing = computedStyle.boxSizing;
+        const padding = getStyleValue(computedStyle, "paddingBottom") + getStyleValue(computedStyle, "paddingTop");
+        const border = getStyleValue(computedStyle, "borderBottomWidth") + getStyleValue(computedStyle, "borderTopWidth");
+
+        const innerHeight = hidden.scrollHeight;
+
+        hidden.value = "x";
+        const singleRowHeight = hidden.scrollHeight;
+
+        let outerHeight = innerHeight;
+        const minRows = Number(rows || 1);
+        if (minRows) {
+            outerHeight = Math.max(minRows * singleRowHeight, outerHeight);
+        }
+        outerHeight = Math.max(outerHeight, singleRowHeight);
+
+        // Use ceil to avoid sub-pixel gaps and subtract a tiny epsilon to reduce visual gap
+        let outerHeightStyle = outerHeight + (boxSizing === "border-box" ? padding + border : 0);
+        outerHeightStyle = Math.round(outerHeightStyle); // snap to pixel to avoid half-line gaps
+        const overflowing = Math.abs(outerHeight - innerHeight) <= 1;
+        return { outerHeightStyle, overflowing };
+    }, [rows, placeholder]);
+
+    const syncHeight = useCallback(() => {
+        const textarea = textareaRef.current;
+        const styles = calculateTextareaStyles();
+        if (!textarea || !styles) return;
+        const { outerHeightStyle, overflowing } = styles;
+        if (heightRef.current !== outerHeightStyle) {
+            heightRef.current = outerHeightStyle;
+            textarea.style.height = `${outerHeightStyle}px`;
+        }
+        textarea.style.overflowY = overflowing ? "hidden" : "";
+    }, [calculateTextareaStyles]);
+
+    useLayoutEffect(() => {
+        syncHeight();
+    }, [syncHeight, text]);
+
+    useEffect(() => {
+        const textarea = textareaRef.current;
+        if (!textarea) return;
+        const onResize = () => syncHeight();
+        window.addEventListener("resize", onResize);
+        let ro: ResizeObserver | null = null;
+        if (typeof ResizeObserver !== "undefined") {
+            ro = new ResizeObserver(() => {
+                ro!.unobserve(textarea);
+                syncHeight();
+                requestAnimationFrame(() => ro && textarea && ro.observe(textarea));
+            });
+            ro.observe(textarea);
+        }
+        return () => {
+            window.removeEventListener("resize", onResize);
+            if (ro) ro.disconnect();
+        };
+    }, [syncHeight]);
+
+    function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
+        // Keep height responsive during rapid uncontrolled input bursts
+        syncHeight();
+        onTextChange(e.target.value);
+    }
+
+    function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+        const isCtrlEnter = e.key === "Enter" && (e.ctrlKey || e.metaKey);
+        const isPlainEnter = e.key === "Enter" && !e.ctrlKey && !e.metaKey && !e.shiftKey && !e.altKey;
+
+        if (isCtrlEnter) {
+            e.preventDefault();
+            if (typeof onCtrlEnter === "function") {
+                onCtrlEnter(e);
+            }
+            return;
+        }
+
+        if (isPlainEnter) {
+            if (onEnter === "newLine") {
+                // allow default
+                return;
+            }
+            if (onEnter === null) {
+                e.preventDefault();
+                return;
+            }
+            if (typeof onEnter === "function") {
+                e.preventDefault();
+                onEnter(e);
+                return;
+            }
+        }
+    }
+
+    return (
+        <>
+            <textarea
+                className={`rich-text-area ${className}`}
+                ref={textareaRef}
+                value={text}
+                placeholder={placeholder}
+                rows={rows}
+                autoComplete={autoComplete}
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
+            />
+            <textarea
+                aria-hidden
+                readOnly
+                tabIndex={-1}
+                ref={hiddenTextareaRef}
+                style={{
+                    position: "fixed",
+                    top: "-9999px",
+                    left: "-9999px",
+                    visibility: "hidden",
+                    paddingTop: 0,
+                    paddingBottom: 0,
+                    height: "auto",
+                    minHeight: 0,
+                    maxHeight: "none",
+                    overflow: "hidden"
+                }}
+                rows={1}
+            />
+        </>
+    );
+}

frontend/src/core/components/TextField.tsx

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

frontend/src/core/components/animations/AnimatedHeight.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useState, useRef } from "react";
+import type { AnimatedPropertyProps } from "./types";
+
+export default function AnimatedHeight({ visible, duration = 0.25, onFinish, children, ...props }: AnimatedPropertyProps) {
+    const [height, setHeight] = useState("0px");
+    const [shouldRender, setShouldRender] = useState(!!visible);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const measureRef = useRef<HTMLDivElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (visible) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            setShouldRender(true);
+            setIsAnimating(true);
+            // Wait for content to render, then measure
+            setTimeout(() => {
+                if (measureRef.current) {
+                    const contentHeight = measureRef.current.scrollHeight;
+                    setHeight(`${contentHeight}px`);
+                }
+                // Animation complete
+                setTimeout(() => {
+                    setHeight("auto");
+                    setIsAnimating(false);
+                }, duration * 1000);
+            }, 0);
+        } else if (shouldRender) {
+            setIsAnimating(true);
+            if (measureRef.current) {
+                const contentHeight = measureRef.current.scrollHeight;
+                setHeight(`${contentHeight}px`);
+                // Force a reflow before animating to 0
+                requestAnimationFrame(() => {
+                    // Read layout to ensure the previous height assignment is flushed
+                    if (containerRef.current) {
+                        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                        containerRef.current.offsetHeight;
+                    }
+                    // Use a second frame to ensure the measured pixel height is applied before collapsing
+                    requestAnimationFrame(() => {
+                        setHeight("0px");
+                    });
+                });
+            }
+            // Hide content after animation completes
+            setTimeout(() => {
+                setShouldRender(false);
+                setIsAnimating(false);
+                if (onFinish) {
+                    onFinish();
+                }
+            }, duration * 1000);
+        }
+    }, [visible, shouldRender, duration, onFinish]);
+
+    return (visible || shouldRender || isAnimating) && (
+        <div
+            {...props}
+            ref={containerRef}
+            style={{
+                height,
+                transition: `height ${duration}s ease`,
+                overflow: "hidden",
+                ...props.style
+            }}
+        >
+            <div ref={measureRef} style={{ height: "auto" }}>
+                {shouldRender && children}
+            </div>
+        </div>
+    );
+}

frontend/src/core/components/animations/AnimatedOpacity.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+import type { AnimatedPropertyProps } from "./types";
+
+export default function AnimatedOpacity({ visible, duration = 0.5, onFinish, children, ...props }: AnimatedPropertyProps) {
+    const [opacity, setOpacity] = useState(visible ? 1 : 0);
+    const [shouldRender, setShouldRender] = useState(visible);
+
+    useEffect(() => {
+        if (visible) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            setShouldRender(true);
+            setOpacity(0);
+
+            // Wait for content to render, then animate in
+            const id = setTimeout(() => {
+                setOpacity(1);
+            }, 10);
+            return () => clearTimeout(id);
+        } else {
+            setOpacity(0);
+
+            const id = setTimeout(() => {
+                setShouldRender(false);
+                if (onFinish) {
+                    onFinish();
+                }
+            }, duration * 1000);
+            return () => clearTimeout(id);
+        }
+    }, [visible, duration, onFinish]);
+
+    return shouldRender && (
+        <div
+            {...props}
+            style={{
+                opacity,
+                transition: `opacity ${duration}s ease`,
+                ...props.style
+            }}
+            >{children}
+        </div>
+    );
+}

frontend/src/core/components/animations/types.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+
+export interface BaseAnimatedPropertyProps {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    visible: any;
+    duration?: number;
+    onFinish?: () => void
+    children?: ReactNode;
+}
+
+export type AnimatedPropertyProps = BaseAnimatedPropertyProps & React.ComponentPropsWithRef<"div">

frontend/src/core/config.ts

@@ -6,22 +6,27 @@
  */
 
 /**
- * Base API endpoint for all backend requests
- * @type {string}
+ * Base domain name for all requests in production
  * @constant
  */
-export const API_BASE_URL: string = '/api';
+export const BASE_DOMAIN = import.meta.env.VITE_API_BASE_URL ?? "fromchat.ru";
+
+/**
+ * Base API endpoint for all backend requests
+ * @constant
+ */
+export const API_BASE_URL = `${location.host ? "" : `https://${BASE_DOMAIN}`}/api`;
 
 /**
  * Full API URL including hostname and port for WebSocket connections
- * @type {string}
  * @constant
  */
-export const API_FULL_BASE_URL: string = `${location.host}/api`;
+export const API_WS_BASE_URL = `${location.host || BASE_DOMAIN}/api`;
 
 /**
  * Application name displayed in UI and document title
- * @type {string}
  * @constant
  */
-export const PRODUCT_NAME: string = "FromChat";
+export const PRODUCT_NAME = "FromChat";
+
+export const MINIMUM_WIDTH = 800;

frontend/src/core/electron/electron.scss

@@ -1,4 +1,4 @@
-@use "common/material" as *;
+@use "../../css/material" as *;
 
 #electron-title-bar {
     display: none;
@@ -9,13 +9,14 @@ html.electron {
         display: flex;
         flex-direction: row;
         gap: 8px;
-        height: 40px;
+        min-height: 40px;
         background-color: $color-dark-surface-container;
         width: 100%;
         -webkit-app-region: drag;
         user-select: none;
         z-index: 10;
         transition: background-color 0.5s ease;
+        flex-shrink: 0;
 
         &.color-surface {
             background-color: $color-dark-surface;
@@ -29,15 +30,12 @@ html.electron {
         font-weight: 500;
     }
 
-    &.platform-darwin .macos-padding {
-        width: 70px;
+    #main-wrapper {
+        flex: 1;
+        min-height: 0;
     }
 
-    // .window-controls {
-    //     -webkit-app-region: no-drag;
-
-    //     .hidden {
-    //         display: none;
-    //     }
-    // }
+    &.platform-darwin .macos-padding {
+        width: 80px;
+    }
 }

frontend/src/core/electron/electron.ts

@@ -0,0 +1,17 @@
+/**
+ * @fileoverview Electron-specific code
+ * @description This module initializes Electron-specific functionality.
+ * @author denis0001-dev
+ * @version 1.0.0
+ */
+
+import "./electron.scss";
+
+export const isElectron = import.meta.env.VITE_ELECTRON && window.electronInterface !== undefined;
+
+if (isElectron) {
+    console.log("Running in Electron");
+    document.documentElement.classList.add("electron", `platform-${window.electronInterface.platform}`);
+} else {
+    console.log("Running in normal browser");
+}

frontend/src/core/hooks/useCombinedRefs.ts

@@ -0,0 +1,34 @@
+import { useRef, useCallback, type RefCallback, type Ref } from "react";
+
+// Определяем тип для ref, который может быть либо функцией, либо объектом
+type PossibleRef<T> = Ref<T> | undefined;
+
+export default function useCombinedRefs<T>(...refs: PossibleRef<T>[]): [RefCallback<T>, React.RefObject<T | null>] {
+    const targetRef = useRef<T | null>(null);
+
+    const setRefs = useCallback((node: T | null) => {
+        // Обновляем внутренний ref
+        targetRef.current = node;
+
+        // Обновляем все переданные refs
+        refs.forEach((ref) => {
+            if (!ref) return;
+
+            if (typeof ref === "function") {
+                // Если ref - это функция, вызываем её
+                ref(node);
+            } else {
+                // Если ref - это объект, обновляем его свойство .current
+                // Используем проверку, чтобы убедиться, что это действительно MutableRefObject
+                // (хотя в реальном коде это почти всегда так)
+                ref.current = node;
+            }
+        });
+        },
+        // Убедитесь, что массив зависимостей всегда актуален
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [...refs]
+    );
+
+    return [setRefs, targetRef];
+}

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 ? <Navigate to="/download-app" replace /> : null
+    };
+}

frontend/src/core/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
+    }
+}

frontend/src/core/init.ts

@@ -5,9 +5,8 @@
  * @version 1.0.0
  */
 
-import { showLogin } from "./auth";
 import { PRODUCT_NAME } from "./config";
+import { enableMapSet } from "immer";
 
-showLogin();
-document.getElementById("productname")!.textContent = PRODUCT_NAME;
-document.title = PRODUCT_NAME;
+document.title = PRODUCT_NAME;
+enableMapSet();

frontend/src/core/push-notifications/push-notifications.ts

@@ -0,0 +1,257 @@
+import { API_BASE_URL } from "@/core/config";
+import { isElectron } from "@/core/electron/electron";
+import { websocket } from "@/core/websocket";
+import type { Message, NewMessageWebSocketMessage, WebSocketMessage } from "@/core/types";
+import serviceWorker from "./service-worker?worker&url";
+
+export interface PushSubscriptionData {
+    endpoint: string;
+    keys: {
+        p256dh: string;
+        auth: string;
+    };
+}
+
+export interface NotificationPayload {
+    title: string;
+    body: string;
+    icon?: string;
+    image?: string;
+    tag?: string;
+}
+
+// Global state
+let isInitialized = false;
+let registration: ServiceWorkerRegistration | null = null;
+let subscription: PushSubscription | null = null;
+let isElectronReceiverRunning = false;
+let messageListener: ((event: MessageEvent) => void) | null = null;
+
+// Helper functions
+function urlBase64ToUint8Array(base64String: string): Uint8Array {
+    const padding = "=".repeat((4 - base64String.length % 4) % 4);
+    const base64 = (base64String + padding)
+        .replace(/-/g, "+")
+        .replace(/_/g, "/");
+
+    const rawData = window.atob(base64);
+    const outputArray = new Uint8Array(rawData.length);
+
+    for (let i = 0; i < rawData.length; ++i) {
+        outputArray[i] = rawData.charCodeAt(i);
+    }
+    return outputArray;
+}
+
+function arrayBufferToBase64(buffer: ArrayBuffer): string {
+    const bytes = new Uint8Array(buffer);
+    let binary = "";
+    for (let i = 0; i < bytes.byteLength; i++) {
+        binary += String.fromCharCode(bytes[i]);
+    }
+    return window.btoa(binary);
+}
+
+async function subscribeToWebPush(): Promise<PushSubscription | null> {
+    if (!registration) {
+        throw new Error("Service Worker not initialized");
+    }
+
+    try {
+        subscription = await registration.pushManager.subscribe({
+            userVisibleOnly: true,
+            applicationServerKey: urlBase64ToUint8Array(
+                "BPFs0EYyE2XqAuY8vQ8B_ZggkJVhf9NmtKqSPtIKqy7lU0yGcM5qfpBz2ESRxNmC_CPbzoLbhKfF8fkKCFUwIjo"
+            ).slice().buffer
+        });
+
+        console.log("Push subscription successful");
+        return subscription;
+    } catch (error) {
+        console.error("Push subscription failed:", error);
+        return null;
+    }
+}
+
+async function sendSubscriptionToServer(token: string): Promise<boolean> {
+    if (!subscription) {
+        throw new Error("No push subscription available");
+    }
+
+    const subscriptionData: PushSubscriptionData = {
+        endpoint: subscription.endpoint,
+        keys: {
+            p256dh: arrayBufferToBase64(subscription.getKey("p256dh")!),
+            auth: arrayBufferToBase64(subscription.getKey("auth")!)
+        }
+    };
+
+    try {
+        const response = await fetch(`${API_BASE_URL}/push/subscribe`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": `Bearer ${token}`
+            },
+            body: JSON.stringify(subscriptionData)
+        });
+
+        return response.ok;
+    } catch (error) {
+        console.error("Failed to send subscription to server:", error);
+        return false;
+    }
+}
+
+async function showMessageNotification(message: Message): Promise<void> {
+    try {
+        await showNotification({
+            title: `New message from ${message.username}`,
+            body: message.content.length > 100 
+                ? message.content.substring(0, 100) + "..." 
+                : message.content,
+            icon: message.profile_picture || "/logo.png",
+            tag: `message_${message.id}`
+        });
+    } catch (error) {
+        console.error("Failed to show message notification:", error);
+    }
+}
+
+async function handleWebSocketMessage(response: WebSocketMessage<object>): Promise<void> {
+    // Handle notifications for new messages
+    if (response.type === "newMessage" && response.data) {
+        const newResponse = response as NewMessageWebSocketMessage;
+        await showMessageNotification(newResponse.data);
+    }
+}
+
+// Public API functions
+export async function initialize(): Promise<boolean> {
+    if (isInitialized) {
+        return true;
+    }
+
+    try {
+        if (isElectron) {
+            // For Electron, we just need to request permission
+            const permission = await window.electronInterface.notifications.requestPermission();
+            isInitialized = permission === "granted";
+            return isInitialized;
+        } else {
+            // For web browsers, initialize service worker and push manager
+            if (!("serviceWorker" in navigator) || !("PushManager" in window)) {
+                console.log("Push messaging is not supported");
+                return false;
+            }
+
+            try {
+                registration = await navigator.serviceWorker.register(serviceWorker, { type: "module" });
+                console.log("Service Worker registered successfully");
+                
+                const permission = await Notification.requestPermission();
+                if (permission === "granted") {
+                    await subscribeToWebPush();
+                    isInitialized = true;
+                }
+                return isInitialized;
+            } catch (error) {
+                console.error("Service Worker registration failed:", error);
+                return false;
+            }
+        }
+    } catch (error) {
+        console.error("Failed to initialize notification service:", error);
+        return false;
+    }
+}
+
+export async function subscribe(token: string): Promise<boolean> {
+    if (!isInitialized) {
+        return false;
+    }
+
+    if (isElectron) {
+        // In Electron, we don't need server-side subscription
+        return true;
+    }
+
+    return await sendSubscriptionToServer(token);
+}
+
+export async function showNotification(payload: NotificationPayload): Promise<boolean> {
+    if (isElectron) {
+        try {
+            return await window.electronInterface.notifications.show(payload);
+        } catch (error) {
+            console.error("Failed to show Electron notification:", error);
+            return false;
+        }
+    }
+    
+    // For web browsers, notifications are handled by the service worker
+    // when push messages are received from the server
+    return false;
+}
+
+export async function unsubscribe(): Promise<boolean> {
+    if (isElectron) {
+        // In Electron, we don't need to unsubscribe from server
+        return true;
+    }
+
+    if (!subscription) {
+        return true;
+    }
+
+    try {
+        const result = await subscription.unsubscribe();
+        subscription = null;
+        return result;
+    } catch (error) {
+        console.error("Failed to unsubscribe:", error);
+        return false;
+    }
+}
+
+export function isSupported(): boolean {
+    if (isElectron) {
+        return true; // Electron always supports notifications
+    }
+    return "serviceWorker" in navigator && "PushManager" in window;
+}
+
+// Electron-specific functions
+export async function startElectronReceiver(): Promise<void> {
+    if (!isElectron || isElectronReceiverRunning) {
+        return;
+    }
+
+    isElectronReceiverRunning = true;
+    
+    // Add our own message listener to the existing WebSocket
+    messageListener = (event: MessageEvent) => {
+        try {
+            const response: WebSocketMessage<object> = JSON.parse(event.data);
+            handleWebSocketMessage(response);
+        } catch (error) {
+            console.error("Failed to parse WebSocket message:", error);
+        }
+    };
+    
+    websocket.addEventListener("message", messageListener);
+}
+
+export function stopElectronReceiver(): void {
+    if (!isElectron) {
+        return;
+    }
+
+    isElectronReceiverRunning = false;
+    
+    // Remove our message listener
+    if (messageListener) {
+        websocket.removeEventListener("message", messageListener);
+        messageListener = null;
+    }
+}

frontend/src/core/push-notifications/service-worker.ts

@@ -0,0 +1,89 @@
+/// <reference lib="webworker" />
+
+declare const self: ServiceWorkerGlobalScope;
+
+interface NotificationPayload {
+    title: string;
+    body: string;
+    icon?: string;
+    image?: string;
+    tag?: string;
+    data?: object;
+}
+
+interface NotificationAction {
+    action: string;
+    title: string;
+}
+
+interface NotificationOptions {
+    body: string;
+    icon: string;
+    badge: string;
+    image?: string;
+    tag: string;
+    data?: object;
+    actions: NotificationAction[];
+    requireInteraction: boolean;
+    silent: boolean;
+}
+
+// Service Worker for Push Notifications
+self.addEventListener("push", function(event: ExtendableEvent) {
+    const pushEvent = event as PushEvent;
+    if (pushEvent.data) {
+        const data: NotificationPayload = pushEvent.data.json();
+        
+        const options: NotificationOptions = {
+            body: data.body,
+            icon: data.icon || "/logo.png",
+            badge: "/logo.png",
+            image: data.image,
+            tag: data.tag || "message",
+            data: data.data,
+            actions: [
+                {
+                    action: "open",
+                    title: "Open Chat"
+                },
+                {
+                    action: "close",
+                    title: "Close"
+                }
+            ],
+            requireInteraction: true,
+            silent: false
+        };
+
+        event.waitUntil(
+            self.registration.showNotification(data.title, options)
+        );
+    }
+});
+
+self.addEventListener("notificationclick", function(event: ExtendableEvent) {
+    const notificationEvent = event as NotificationEvent;
+    notificationEvent.notification.close();
+
+    if (notificationEvent.action === "open" || !notificationEvent.action) {
+        event.waitUntil(
+            self.clients.matchAll({ type: "window" }).then(function(clientList: readonly WindowClient[]) {
+                // If there's already a window open, focus it
+                for (let i = 0; i < clientList.length; i++) {
+                    const client = clientList[i];
+                    if (client.url === self.location.origin && "focus" in client) {
+                        return client.focus();
+                    }
+                }
+                // Otherwise, open a new window
+                if (self.clients.openWindow) {
+                    return self.clients.openWindow(self.location.origin);
+                }
+            })
+        );
+    }
+});
+
+self.addEventListener("notificationclose", function(_event: ExtendableEvent) {
+    // Handle notification close if needed
+});

frontend/src/core/types.d.ts

@@ -0,0 +1,439 @@
+/**
+ * @fileoverview Global TypeScript type definitions
+ * @description Contains all type definitions used throughout the application
+ * @author Cursor
+ * @version 1.0.0
+ */
+
+
+/**
+ * HTTP headers object type
+ * @typedef {Object.<string, string>} Headers
+ */
+export type Headers = {[x: string]: string}
+
+/**
+ * API error response structure
+ * @interface ErrorResponse
+ * @property {string} message - Error message from the server
+ */
+export interface ErrorResponse {
+    message: string;
+}
+
+/**
+ * 2D coordinate structure
+ * @interface Size2D
+ * @property {number} x - X coordinate
+ * @property {number} y - Y coordinate
+ */
+export interface Size2D {
+    x: number;
+    y: number;
+}
+
+export interface Rect extends Size2D {
+    width: number;
+    height: number;
+}
+
+// App types
+
+/**
+ * Chat message structure
+ * @interface Message
+ * @property {number} id - Unique message identifier
+ * @property {string} username - Username of the message sender
+ * @property {string} content - Message content
+ * @property {boolean} is_read - Whether the message has been read
+ * @property {boolean} is_edited - Whether the message has been edited
+ * @property {string} timestamp - ISO timestamp of the message
+ * @property {string} [profile_picture] - URL to sender's profile picture
+ * @property {Message} [reply_to] - The message this is replying to
+ */
+export interface Reaction {
+    emoji: string;
+    count: number;
+    users: Array<{
+        id: number;
+        username: string;
+    }>;
+}
+
+export interface Message {
+    id: number;
+    username: string;
+    content: string;
+    is_read: boolean;
+    is_edited: boolean;
+    timestamp: string;
+    profile_picture?: string;
+    reply_to?: Message;
+    files?: Attachment[];
+    reactions?: Reaction[];
+
+    runtimeData?: {
+        dmEnvelope?: DmEnvelope;
+        sendingState?: {
+            status: "sending" | "sent" | "failed";
+            tempId?: string; // Temporary ID for tracking until server confirms
+            retryData?: {
+                content: string;
+                replyToId?: number;
+                files?: File[];
+            };
+        };
+    }
+}
+
+/**
+ * Collection of messages
+ * @interface Messages
+ * @property {Message[]} messages - Array of message objects
+ */
+export interface Messages {
+    messages: Message[];
+}
+
+/**
+ * User information structure
+ * @interface User
+ * @property {number} id - Unique user identifier
+ * @property {string} created_at - ISO timestamp of account creation
+ * @property {string} last_seen - ISO timestamp of last activity
+ * @property {boolean} online - Whether the user is currently online
+ * @property {string} username - Username
+ * @property {string} [bio] - User biography
+ */
+export interface User {
+    id: number;
+    created_at: string;
+    last_seen: string;
+    online: boolean;
+    username: string;
+    admin?: boolean;
+    bio?: string;
+    profile_picture: string;
+}
+
+/**
+ * User profile response structure
+ * @interface UserProfile
+ * @property {number} id - Unique user identifier
+ * @property {string} username - Username
+ * @property {string} [profile_picture] - URL to user's profile picture
+ * @property {string} [bio] - User biography
+ * @property {boolean} online - Whether the user is currently online
+ * @property {string} last_seen - ISO timestamp of last activity
+ * @property {string} created_at - ISO timestamp of account creation
+ */
+export interface UserProfile {
+    id: number;
+    username: string;
+    profile_picture?: string;
+    bio?: string;
+    online: boolean;
+    last_seen: string;
+    created_at: string;
+}
+
+// ----------
+// API models
+// ----------
+
+// Requests
+
+/**
+ * Login request structure
+ * @interface LoginRequest
+ * @property {string} username - Username for authentication
+ * @property {string} password - Password for authentication
+ */
+export interface LoginRequest {
+    username: string;
+    password: string;
+}
+
+/**
+ * Registration request structure
+ * @interface RegisterRequest
+ * @property {string} username - Desired username
+ * @property {string} password - Desired password
+ * @property {string} confirm_password - Password confirmation
+ */
+export interface RegisterRequest {
+    username: string;
+    password: string;
+    confirm_password: string;
+}
+
+export interface UploadPublicKeyRequest {
+    publicKey: string;
+}
+
+export interface SendDMRequest {
+    recipientId: number;
+    iv: string;
+    ciphertext: string;
+    salt: string;
+    iv2: string;
+    wrappedMk: string;
+    replyToId?: number;
+}
+
+// Responses
+
+/**
+ * Login response structure
+ * @interface LoginResponse
+ * @property {User} user - User information
+ * @property {string} token - JWT authentication token
+ */
+export interface LoginResponse {
+    user: User;
+    token: string;
+}
+
+export interface BackupBlob {
+    blob: string;
+}
+
+export interface BaseDmEnvelope {
+    iv: string;
+    ciphertext: string;
+    salt: string;
+    iv2: string;
+    wrappedMk: string;
+    recipientId: number;
+}
+
+export interface DmEnvelope extends BaseDmEnvelope {
+    id: number;
+    senderId: number;
+    files?: DmFile[];
+    timestamp: string;
+    reactions?: Reaction[];
+}
+
+export interface DmFile {
+    name: string;
+    id: number;
+    path: string;
+}
+
+export interface DmEditedPayload { 
+    id: number; 
+    iv: string; 
+    ciphertext: string; 
+    timestamp: string 
+}
+
+export interface DmDeletedPayload { 
+    id: number; 
+    senderId: number; 
+    recipientId: number 
+}
+
+export interface FetchDMResponse {
+    messages: DmEnvelope[]
+}
+
+export interface DmEncryptedJSON {
+    type: "text";
+    data: {
+        content: string;
+        reply_to_id?: number;
+        files?: Attachment[];
+    }
+}
+
+// ---------------
+// WebSocket types
+// ---------------
+
+/**
+ * WebSocket message structure
+ * @interface WebSocketMessage
+ * @property {string} type - Message type identifier
+ * @property {WebSocketCredentials} [credentials] - Authentication credentials
+ * @property {any} [data] - Message payload data
+ * @property {WebSocketError} [error] - Error information if applicable
+ */
+export interface WebSocketMessage<T> {
+    type: string;
+    credentials?: WebSocketCredentials;
+    data?: T;
+    error?: WebSocketError;
+}
+
+/**
+ * WebSocket error structure
+ * @interface WebSocketError
+ * @property {number} code - Error code
+ * @property {string} detail - Error detail message
+ */
+export interface WebSocketError {
+    code: number;
+    detail: string;
+}
+
+/**
+ * WebSocket authentication credentials
+ * @interface WebSocketCredentials
+ * @property {string} scheme - Authentication scheme (e.g., "Bearer")
+ * @property {string} credentials - Authentication token or credentials
+ */
+export interface WebSocketCredentials {
+    scheme: string;
+    credentials: string;
+}
+
+export interface Attachment {
+    path: string;
+    encrypted: boolean;
+    name: string;
+}
+
+// -----------------------
+// WebSocket message types
+// -----------------------
+
+// Utils
+export interface DMEditPayload {
+    id: number;
+    iv: string;
+    ciphertext: string;
+    iv2: string;
+    wrappedMk: string;
+    salt: string;
+}
+
+// Requests
+export interface DMEditRequest extends WebSocketMessage {
+    type: "dmEdit";
+    credentials: WebSocketCredentials;
+    data: DMEditPayload
+}
+
+export interface SendMessageRequest extends WebSocketMessage {
+    type: "sendMessage";
+    credentials: WebSocketCredentials;
+    data: {
+        content: string;
+        reply_to_id: number | null;
+    }
+}
+
+export interface AddReactionRequest extends WebSocketMessage {
+    type: "addReaction";
+    credentials: WebSocketCredentials;
+    data: {
+        message_id: number;
+        emoji: string;
+    }
+}
+
+export interface AddDmReactionRequest extends WebSocketMessage {
+    type: "addDmReaction";
+    credentials: WebSocketCredentials;
+    data: {
+        dm_envelope_id: number;
+        emoji: string;
+    }
+}
+
+// Messages
+export interface DMNewWebSocketMessage extends WebSocketMessage {
+    type: "dmNew";
+    data: DmEnvelope
+}
+
+export interface DMEditedWebSocketMessage extends WebSocketMessage {
+    type: "dmEdited";
+    data: DMEditPayload
+}
+
+export interface DMDeletedWebSocketMessage extends WebSocketMessage {
+    type: "dmDeleted";
+    data: {
+        id: number;
+    }
+}
+
+export interface MessageEditedWebSocketMessage extends WebSocketMessage {
+    type: "messageEdited";
+    data: Partial<Message> & { id: number }
+}
+
+export interface MessageDeletedWebSocketMessage extends WebSocketMessage {
+    type: "messageDeleted";
+    data: {
+        message_id: number;
+    }
+}
+
+export interface NewMessageWebSocketMessage extends WebSocketMessage {
+    type: "newMessage";
+    data: Message
+}
+
+export interface ReactionUpdateWebSocketMessage extends WebSocketMessage {
+    type: "reactionUpdate";
+    data: {
+        message_id: number;
+        emoji: string;
+        action: "added" | "removed";
+        user_id: number;
+        username: string;
+        reactions: Reaction[];
+    }
+}
+
+export interface DMReactionUpdateWebSocketMessage extends WebSocketMessage {
+    type: "dmReactionUpdate",
+    data: {
+        dm_envelope_id: number;
+        emoji: string;
+        action: "added" | "removed";
+        user_id: number;
+        username: string;
+        reactions: Reaction[];
+    }
+}
+
+// Shared types
+export type DMWebSocketMessage = 
+    DMNewWebSocketMessage | 
+    DMEditedWebSocketMessage | 
+    DMDeletedWebSocketMessage | 
+    DMReactionUpdateWebSocketMessage;
+export type ChatWebSocketMessage = 
+    MessageEditedWebSocketMessage | 
+    MessageDeletedWebSocketMessage | 
+    NewMessageWebSocketMessage | 
+    ReactionUpdateWebSocketMessage;
+
+// -----------
+// Encrypted message JSON (plaintext structure before encryption)
+// -----------
+
+export type ChatMessageKind = "text"; // Extendable for future kinds
+
+export interface EncryptedTextMessageData {
+    content: string;
+    files?: Attachment[];
+    reply_to_id?: number | null;
+}
+
+export interface EncryptedMessageJson {
+    type: ChatMessageKind;
+    data: EncryptedTextMessageData;
+}
+
+// -----------
+// React types
+// -----------
+export interface DialogProps {
+    isOpen: boolean;
+    onOpenChange: (value: boolean) => void;
+}

frontend/src/core/websocket.ts

@@ -0,0 +1,108 @@
+/**
+ * @fileoverview WebSocket connection management for real-time chat
+ * @description Handles WebSocket connections, message processing, and auto-reconnection
+ * @author Cursor
+ * @version 1.0.0
+ */
+
+import { API_WS_BASE_URL } from "./config";
+import type { WebSocketMessage } from "./types";
+import { delay } from "@/utils/utils";
+
+/**
+ * Creates a new WebSocket connection to the chat server
+ * @returns {WebSocket} New WebSocket instance
+ * @private
+ */
+function create(): WebSocket {
+    let prefix = "ws://";
+    if (location.protocol.includes("https")) {
+        prefix = "wss://";
+    }
+
+    return new WebSocket(`${prefix}${API_WS_BASE_URL}/chat/ws`);
+}
+
+/**
+ * Global WebSocket instance
+ * @type {WebSocket}
+ */
+export let websocket: WebSocket = create();
+
+/**
+ * Global WebSocket message handler reference
+ * This will be set by the active panel to handle incoming messages
+ */
+let globalMessageHandler: ((response: WebSocketMessage<object>) => void) | null = null;
+
+/**
+ * Set the global WebSocket message handler
+ * @param handler - Function to handle WebSocket messages
+ */
+export function setGlobalMessageHandler(handler: ((response: WebSocketMessage<object>) => void) | null): void {
+    globalMessageHandler = handler;
+}
+
+export function request<Request, Response = object>(payload: WebSocketMessage<Request>): Promise<WebSocketMessage<Response>> {
+    console.log("WebSocket request:", payload);
+    return new Promise((resolve, reject) => {
+        function requestInner() {
+            let listener: ((e: MessageEvent) => void) | null = null;
+            listener = (e) => {
+                resolve(JSON.parse(e.data));
+                websocket.removeEventListener("message", listener!);
+            }
+            websocket.addEventListener("message", listener);
+            websocket.send(JSON.stringify(payload))
+
+            setTimeout(() => reject("Request timed out"), 10000);
+        }
+
+        if (websocket.readyState === 0) {
+            websocket.addEventListener("open", requestInner);
+            setTimeout(() => reject("Request timed out"), 10000);
+        } else {
+            requestInner();
+        }
+    })
+}
+
+/**
+ * This function will wait 3 seconds and them attempts to reconnect the WebSocket.
+ * If it fails, tries again in an endless loop until the connection is established
+ * again.
+ * 
+ * @private
+ */
+async function onError() {
+    console.warn("WebSocket disconnected, retrying in 3 seconds...");
+    await delay(3000);
+    websocket = create();
+
+    let listener: (() => void) | null = null;
+    listener = () => {
+        console.log("WebSocket successfully reconnected!");
+        websocket.removeEventListener("open", listener!);
+    }
+
+    websocket.addEventListener("open", listener);
+    websocket.addEventListener("error", onError);
+}
+
+// --------------
+// Initialization
+// --------------
+
+websocket.addEventListener("message", (e) => {
+    try {
+        const response: WebSocketMessage<object> = JSON.parse(e.data);
+        
+        // Route message to global handler if set
+        if (globalMessageHandler) {
+            globalMessageHandler(response);
+        }
+    } catch (error) {
+        console.error("Error parsing WebSocket message:", error);
+    }
+});
+websocket.addEventListener("error", onError);

frontend/src/css/_animations.scss

@@ -0,0 +1,119 @@
+@keyframes fadeIn {
+    from { 
+        opacity: 0; 
+        transform: translateY(10px); 
+    }
+    
+    to { 
+        opacity: 1; 
+        transform: translateY(0); 
+    }
+}
+  
+.fade-in {
+    animation: fadeIn 0.3s ease forwards;
+}
+
+@keyframes fadeOutUp {
+    from {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+}
+
+@keyframes fadeInDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeInLeft {
+    from {
+        opacity: 0;
+        transform: translateX(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeInUpLeft {
+    from {
+        opacity: 0;
+        transform: translate(10px, 10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translate(0, 0);
+    }
+}
+
+@keyframes fadeOutRight {
+    from {
+        opacity: 1;
+        transform: translateX(0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translateX(10px);
+    }
+}
+
+@keyframes fadeOutDown {
+    from {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+}
+
+@keyframes fadeOutDownRight {
+    from {
+        opacity: 1;
+        transform: translate(0, 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translate(10px, 10px);
+    }
+}
+
+.chat-switch-out {
+    animation: fadeOutUp 0.2s ease forwards;
+}
+
+.chat-switch-in {
+    animation: fadeInDown 0.2s ease forwards;
+}

frontend/src/css/_chat.scss

@@ -1,342 +0,0 @@
-@use "common/colors" as *;
-@use "common/material" as *;
-
-#chat-interface {
-    height: 100%;
-
-    .header {
-        display: flex;
-        background-color: $color-dark-surface-container;
-        color: white;
-        padding: 16px 16px;
-        justify-content: end;
-        width: fit-content;
-        z-index: 1000;
-        position: absolute;
-        top: 0;
-        right: 0;
-
-        .header-content {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .logo {
-                font-size: 1.8rem;
-                font-weight: 700;
-                display: flex;
-                align-items: center;
-            }
-
-            #logouts {
-                display: none;
-                list-style: none;
-                gap: 10px;
-
-                li {
-                    a {
-                        color: white;
-                        text-decoration: none;
-                        font-weight: 500;
-                        transition: all 0.3s ease;
-                        padding: 10px;
-                        border-radius: 10px;
-                        display: flex;
-                        flex-direction: row;
-                        align-items: center;
-                        gap: 10px;
-
-                        &:hover {
-                            background-color: rgba(255, 255, 255, 0.2);
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    .chat-container {
-        display: flex;
-        width: 100%;
-        flex-direction: column;
-
-        .chat-main {
-            flex-grow: 1;
-            display: flex;
-            flex-direction: column;
-            height: 100%;
-
-            .chat-header {
-                padding: 16px;
-                background: $color-dark-surface-container;
-                display: flex;
-                align-items: center;
-                box-shadow: black 0 0 20px;
-
-                .chat-header-avatar {
-                    width: 45px;
-                    height: 45px;
-                    border-radius: 20%;
-                    object-fit: cover;
-                    margin-right: 1rem;
-                }
-
-                .chat-header-info {
-                    display: flex;
-
-                    .info-chat {
-                        display: flex;
-                        flex-direction: column;
-
-                        h4 {
-                            font-size: 1.1rem;
-                            margin: 0 0 0.2rem;
-                        }
-
-                        p {
-                            margin: 0;
-                            font-size: 0.8rem;
-                            color: #718096;
-                        }
-                    }
-
-                    .online-status {
-                        display: inline-block;
-                        width: 10px;
-                        height: 10px;
-                        border-radius: 50%;
-                        background-color: $success;
-                        margin-right: 5px;
-                    }
-
-                    a {
-                        display: flex;
-                        flex-direction: row;
-                        text-decoration: none;
-                        color: white;
-                        justify-content: end;
-                        padding: 0;
-                        margin: 0;
-                        position: absolute;
-                        right: 2%;
-                        top: 2%;
-
-                        &:hover {
-                            border: none;
-                        }
-                    }
-                }
-            }
-
-            .chat-messages {
-                flex: 1;
-                padding: 1rem;
-                overflow-y: auto;
-
-                &::-webkit-scrollbar {
-                    width: 7px;
-                }
-
-                &::-webkit-scrollbar-track {
-                    background: transparent;
-                }
-
-                &::-webkit-scrollbar-thumb {
-                    background-color: $color-dark-surface-container-high;
-                    border-radius: 20px;
-                }
-
-                .message {
-                    margin-bottom: 1rem;
-                    max-width: 70%;
-                    position: relative;
-                    width: fit-content;
-                    display: flex;
-                    align-items: flex-end;
-                    gap: 8px;
-
-                    .message-profile-pic {
-                        width: 32px;
-                        height: 32px;
-                        flex-shrink: 0;
-                        margin-bottom: 4px;
-
-                        img {
-                            width: 100%;
-                            height: 100%;
-                            border-radius: 50%;
-                            object-fit: cover;
-                            transition: transform 0.2s ease, box-shadow 0.2s ease;
-
-                            &:hover {
-                                transform: scale(1.1);
-                                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-                            }
-                        }
-                    }
-
-                    .message-inner {
-                        padding: 0.8rem 1rem;
-                        border-radius: 12px;
-                        position: relative;
-                        word-wrap: break-word;
-
-                        .message-content {
-                            word-wrap: break-word;
-                            margin-bottom: 0.3rem;
-                        }
-
-                        .message-reply {
-                            background-color: rgba(255, 255, 255, 0.1);
-                            border-radius: 8px;
-                            padding: 0.5rem;
-                            margin-bottom: 0.5rem;
-                            border-left: 3px solid $color-dark-primary;
-
-                            .reply-content {
-                                display: flex;
-                                flex-direction: column;
-                                gap: 0.2rem;
-
-                                .reply-username {
-                                    font-weight: 600;
-                                    font-size: 0.8rem;
-                                    color: $color-dark-primary;
-                                }
-
-                                .reply-text {
-                                    font-size: 0.85rem;
-                                    color: $color-dark-on-surface-variant;
-                                    overflow: hidden;
-                                    text-overflow: ellipsis;
-                                    white-space: nowrap;
-                                    max-width: 200px;
-                                }
-                            }
-                        }
-
-                        .message-time {
-                            font-size: 0.7rem;
-                            color: $color-dark-on-surface-variant;
-                            margin-top: 0.3rem;
-                            text-align: right;
-                        }
-                    }
-
-                    &.received .message-inner {
-                        background-color: $color-dark-surface-container;
-                        border-top-left-radius: 5px;
-                        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-                    }
-
-                    &.sent {
-                        margin-left: auto;
-                        flex-direction: row-reverse;
-
-                        .message-inner {
-                            background-color: $color-dark-primary-container;
-                            color: $color-dark-on-primary-container;
-                            border-top-right-radius: 5px;
-                        }
-
-                        .message-time {
-                            color: $color-dark-on-primary-container;
-                        }
-                    }
-                }
-            
-                .message-username {
-                    font-weight: 600;
-                    margin-bottom: 0.3rem;
-                    font-size: 0.9rem;
-                    transition: color 0.2s ease;
-
-                    &:hover {
-                        color: $color-dark-primary;
-                        text-decoration: underline;
-                    }
-                }
-            }
-
-            .chat-input-wrapper {
-                position: relative;
-
-                &::before {
-                    $height: 20px;
-
-                    content: '';
-                    position: absolute;
-                    top: -$height;
-                    left: 0;
-                    right: 0;
-                    width: 100%;
-                    height: $height;
-                    background: linear-gradient(
-                        0deg,
-                        $color-dark-surface,
-                        rgba(255, 255, 255, 0),
-                    );
-                }
-
-                .chat-input {
-                    margin: 0 20px 20px 20px;
-                    background-color: $color-dark-surface-container;
-                    border-radius: 40px;
-    
-                    .input-group {
-                        display: flex;
-    
-                        .message-input {
-                            flex: 1;
-                            padding: 10px 20px;
-                            border: none;
-                            border-radius: 25px;
-                            font-size: 1rem;
-                            outline: none;
-                            background-color: inherit;
-                            caret-color: $color-dark-primary;
-                            color: $color-dark-on-surface;
-                        }
-                        
-                        .send-btn {
-                            margin: 10px;
-                            width: 50px;
-                            height: 50px;
-                            border-radius: 50%;
-                            background-color: $color-dark-primary;
-                            color: $color-dark-on-primary;
-                            border: none;
-                            cursor: pointer;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            transition: background-color 0.25s ease;
-    
-                            @include hoverStateLayer($background: $color-dark-primary);
-                        }
-                    } 
-                }
-            }
-        }
-    }
-}
-
-// Reply preview styles
-.reply-preview {
-    background-color: $color-dark-surface;
-    border-radius: 8px;
-    padding: 0.75rem;
-    margin-bottom: 1rem;
-    border-left: 3px solid $color-dark-primary;
-
-    .reply-preview-content {
-        color: $color-dark-on-surface-variant;
-        font-size: 0.9rem;
-        line-height: 1.4;
-
-        strong {
-            color: $color-dark-primary;
-        }
-    }
-}
-

frontend/src/css/_components.scss

@@ -0,0 +1,84 @@
+@use "material" as *;
+@use "sass:color";
+
+.text-center {
+    text-align: center;
+}
+
+.alert {
+    padding: 0.8rem 1rem;
+    border-radius: 6px;
+    margin-bottom: 1rem;
+
+    &.alert-success {
+        background-color: #C6F6D5;
+        color: #22543D;
+    }
+    
+    &.alert-danger {
+        background-color: #FED7D7;
+        color: #742A2A;
+    }
+}
+
+.link {
+    color: $color-dark-primary; 
+    font-weight: 600;
+}
+
+button, input {
+    font: inherit;
+}
+
+// Dialog content styles
+.dialog-content {
+    h3 {
+        margin: 0 0 1rem 0;
+        color: $color-dark-on-surface;
+        font-size: 1.2rem;
+        font-weight: 600;
+    }
+    
+    mdui-text-field {
+        width: 100%;
+    }
+    
+    .dialog-actions {
+        display: flex;
+        gap: 0.75rem;
+        justify-content: flex-end;
+        margin-top: 1rem;
+    }
+}
+
+.rich-text-area {
+    width: 100%;
+    resize: none;
+    transition: height 0.2s ease;
+    overflow-y: hidden;
+    background-color: transparent;
+    display: block;
+}
+
+.quote {
+    background-color: $color-dark-surface-primary-container-lightened;
+    border-radius: 8px;
+    overflow: hidden;
+
+    color: $color-dark-on-surface-variant;
+    font-size: 0.9rem;
+    line-height: 1.4;
+
+    &.bg-surfaceContainer {
+        background-color: $color-dark-secondary-container;
+
+        .quote-inner {
+            border-left: 3px solid $color-dark-secondary;
+        }
+    }
+
+    .quote-inner {
+        border-left: 3px solid $color-dark-primary;
+        padding: 0.5rem;
+    }
+}

frontend/src/css/_material.scss

@@ -50,6 +50,9 @@ $color-dark-surface-container-low: rgb(24 28 31);
 $color-dark-surface-container: rgb(28 32 36);
 $color-dark-surface-container-high: rgb(38 43 46);
 $color-dark-surface-container-highest: rgb(49 53 57);
+$color-dark-surface-primary-container-lightened: color.adjust($color-dark-primary-container, $lightness: 5%);
+$color-dark-surface-container-lightened: color.adjust($color-dark-surface-container, $lightness: 5%);
+
 // custom colors
 $color-1: rgb(82, 109, 246);   
 $color-2: rgb(65, 11, 113);   

frontend/src/css/_panelchat.scss

@@ -1,122 +0,0 @@
-@use "common/colors" as *;
-@use "common/material" as *;
-
-
-// контейнер чата и панели с чатами
-.all-container {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    height: 100%;
-}
-
-#profile {
-    display: none;
-    flex-direction: column;
-    z-index: 2000;
-    top: 0;
-    left: 0;
-    position: fixed;
-    height: 100vh;
-    width: 27%;
-    background-color: $color-dark-surface-container;
-    position: relative;
-
-    .profileheader {
-        display: flex;
-        gap: 200px;
-
-        p {
-            color: white;
-        }
-
-        a {
-            text-decoration: none;
-            color: white;
-            border: solid 2px $color-dark-on-surface-variant;
-            padding: 5px;
-            border-radius: 10px;
-
-            &:hover {
-                background-color: rgba(255, 255, 255, 0.241);
-            }
-        }
-    }
-}
-
-#chat-list {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 0;
-    width: 40%;
-    background-color: $color-dark-surface-container;
-    height: 100%;
-    z-index: 1000;
-
-    .chat-header-left {
-        display: flex;
-        color: white;
-        font-size: 25px;
-        background-color: $color-dark-surface-container;
-        width: 100%;
-        justify-content: center;
-        align-items: center;
-        padding: 16px;
-        overflow: hidden;
-
-        #productname {
-            flex-grow: 1;
-        }
-    
-        .profile {
-            font-size: 24px;
-            display: flex;
-            justify-content: start;
-            flex-shrink: 0;
-            flex-grow: 0;
-
-            #closeprofile a {
-                text-decoration: none;
-                color: white;
-                border: solid 2px $color-dark-on-surface-variant;
-                padding: 5px;
-                border-radius: 10px;
-                
-                &:hover {
-                    background-color: rgba(255, 255, 255, 0.241);
-                }
-            }
-
-            img {
-                $size: 45px;
-                display: flex;
-                border-radius: 50%;
-                width: $size;
-                height: $size;
-            }
-        }
-    }
-
-    .chat-tabs {
-        margin-top: 5px;
-        width: 100%;
-        --mdui-color-surface: $color-dark-surface-container;
-        --mdui-color-surface-variant: transparent;
-
-        img {
-            width: 45px;
-            height: 45px;
-            border-radius: 20%;
-            object-fit: cover;
-            margin-right: 1rem;
-        }
-    }
-
-    mdui-bottom-app-bar {
-        position: relative;
-        width: 100%;
-        padding-left: 16px;
-        padding-right: 16px;
-        margin-top: auto;
-    }
-}

frontend/src/css/common/_animations.scss

@@ -1,15 +0,0 @@
-@keyframes fadeIn {
-    from { 
-        opacity: 0; 
-        transform: translateY(10px); 
-    }
-    
-    to { 
-        opacity: 1; 
-        transform: translateY(0); 
-    }
-}
-  
-.fade-in {
-    animation: fadeIn 0.3s ease forwards;
-}

frontend/src/css/common/_components.scss

@@ -1,112 +0,0 @@
-@use "material" as *;
-
-.text-center {
-    text-align: center;
-}
-
-.alert {
-    padding: 0.8rem 1rem;
-    border-radius: 6px;
-    margin-bottom: 1rem;
-
-    &.alert-success {
-        background-color: #C6F6D5;
-        color: #22543D;
-    }
-    
-    &.alert-danger {
-        background-color: #FED7D7;
-        color: #742A2A;
-    }
-}
-
-.link {
-    color: $color-dark-primary; 
-    font-weight: 600;
-}
-
-button, input {
-    font: inherit;
-}
-
-.context-menu {
-    position: fixed;
-    background-color: $color-dark-surface-container;
-    border-radius: 8px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-    padding: 0.5rem 0;
-    z-index: 1000;
-    display: none;
-    min-width: 150px;
-    max-width: 200px;
-    white-space: nowrap;
-    user-select: none;
-
-    .context-menu-item {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.75rem 1rem;
-        cursor: pointer;
-        color: $color-dark-on-surface;
-        transition: background-color 0.2s ease;
-        font-size: 0.9rem;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        &:hover {
-            background-color: rgba(255, 255, 255, 0.1);
-        }
-
-        .material-symbols {
-            font-size: 1.1rem;
-            flex-shrink: 0;
-        }
-    }
-
-    &.pos-top-left {
-        transform-origin: top right;
-    }
-    &.pos-top-right {
-        transform-origin: top left;
-    }
-    &.pos-bottom-left {
-        transform-origin: bottom right;
-    }
-    &.pos-bottom-right {
-        transform-origin: bottom left;
-    }
-
-    &.open {
-        animation: context-menu-open 0.25s ease;
-    }
-
-    @keyframes context-menu-open {
-        0% {
-            opacity: 0;
-            transform: scale(0.5);
-        }
-
-        100% {
-            opacity: 1;
-            transform: scale(1);
-        }
-    }
-}
-
-// Dialog content styles
-.dialog-content {
-    h3 {
-        margin: 0 0 1rem 0;
-        color: $color-dark-on-surface;
-        font-size: 1.2rem;
-    }
-
-    .dialog-actions {
-        display: flex;
-        gap: 0.75rem;
-        justify-content: flex-end;
-        margin-top: 1.5rem;
-    }
-}

frontend/src/css/style.scss

@@ -1,16 +1,10 @@
-@use "auth";
-@use "chat";
-@use "profile";
-@use "settings";
-@use "panelchat";
-@use "common/animations";
-@use "common/components";
-@use "common/colors" as *;
-@use "common/material" as *;
-@use "electron";
+@use "animations";
+@use "components";
+@use "colors" as *;
+@use "material" as *;
 
-@use "lib/fonts/montserrat";
-@use "lib/fonts/material-symbols";
+@use "fonts/montserrat";
+@use "fonts/material-symbols";
 
 
 * {
@@ -22,17 +16,20 @@ body {
     background-color: $color-dark-surface;
     color: $color-dark-on-surface;
     line-height: 1.6;
+
+    #main-wrapper {
+        flex: 1;
+        position: relative;
+        min-height: 0;
+    }
+}
+
+body, #root {
     height: 100vh;
     position: relative;
     margin: 0;
     display: flex;
     flex-direction: column;
-
-    #main-wrapper {
-        flex: 1;
-        position: relative;
-        height: 100vh;
-    }
 }
 
 mdui-dialog {

frontend/src/electron.ts

@@ -1,10 +0,0 @@
-import "../electron.d.ts";
-import { PRODUCT_NAME } from "./config";
-
-if (window.electronInterface !== undefined) {
-    console.log("Running in Electron");
-    document.documentElement.classList.add("electron", `platform-${window.electronInterface.platform}`);
-    document.getElementById("window-title")!.textContent = PRODUCT_NAME;
-} else {
-    console.log("Running in normal browser");
-}

frontend/src/leftpanel.ts

@@ -1,70 +0,0 @@
-/**
- * @fileoverview Left panel UI controls and interactions
- * @description Handles chat collapse/expand, chat switching, and profile dialog
- * @author Cursor
- * @version 1.0.0
- */
-
-import type { Dialog } from "mdui/components/dialog";
-import { loadProfilePicture } from "./profile/upload";
-
-// сварачивание и разворачивание чата
-const chatCollapseBtn = document.getElementById('hide-chat')!;
-const chat1 = document.getElementById('chat-list-chat-1')!;
-const chat2 = document.getElementById('chat-list-chat-2')!;
-const chatInner = document.getElementById('chat-inner')!;
-const chatName = document.getElementById('chat-name')!;
-const profileButton = document.getElementById('profile-open')!;
-const dialog = document.getElementById("profile-dialog") as Dialog;
-const dialogClose = document.getElementById("profile-dialog-close")!;
-
-/**
- * Sets up chat collapse functionality
- * @function setupChatCollapse
- * @private
- */
-function setupChatCollapse(): void {
-    chatCollapseBtn.addEventListener('click', () => {
-        chatCollapseBtn.style.display = 'none';
-        chatInner.style.display = 'none';
-    });
-}
-
-/**
- * Sets up chat switching functionality
- * @function setupChatSwitching
- * @private
- */
-function setupChatSwitching(): void {
-    chat1.addEventListener('click', () => {
-        chatCollapseBtn.style.display = 'flex';
-        chatInner.style.display = 'flex';
-        chatName.textContent = 'общий чат';
-    });
-    
-    chat2.addEventListener('click', () => {
-        chatCollapseBtn.style.display = 'flex';
-        chatInner.style.display = 'flex';
-        chatName.textContent = 'общий чат 2';
-    });
-}
-
-/**
- * Sets up profile dialog functionality
- * @function setupProfileDialog
- * @private
- */
-function setupProfileDialog(): void {
-    profileButton.addEventListener('click', () => {
-        dialog.open = true;
-        loadProfilePicture();
-    });
-
-    dialogClose.addEventListener("click", () => {
-        dialog.open = false;
-    });
-}
-
-setupChatCollapse();
-setupChatSwitching();
-setupProfileDialog();

frontend/src/main.ts

@@ -1,19 +0,0 @@
-/**
- * @fileoverview Application entry point for FromChat frontend
- * @description Main module that initializes all required components and styles
- * @author Cursor
- * @version 1.0.0
- */
-
-import './css/style.scss';
-import "mdui/mdui.css";
-
-import "./utils/material";
-import "./chat";
-import "./settings";
-import "./leftpanel";
-import "./init";
-import "./profile";
-import "./message-context-menu";
-import "./user-profile-dialog";
-import "./electron";

frontend/src/main.tsx

@@ -0,0 +1,21 @@
+/**
+ * @fileoverview Application entry point for FromChat frontend
+ * @description Main module that initializes all required components and styles
+ * @author Cursor
+ * @version 1.0.0
+ */
+
+import "./css/style.scss";
+
+import "./utils/material";
+import "./core/init";
+import "./core/electron/electron";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import { StrictMode } from "react";
+
+createRoot(document.getElementById("root")!).render(
+    <StrictMode>
+        <App />
+    </StrictMode>
+);

frontend/src/message-context-menu.ts

@@ -1,338 +0,0 @@
-/**
- * @fileoverview Message context menu functionality
- * @description Handles right-click context menu for message actions (edit, delete, reply)
- * @author Cursor
- * @version 1.0.0
- */
-
-import { currentUser, authToken } from "./auth";
-import { websocket } from "./websocket";
-import type { Message, WebSocketMessage } from "./types";
-import { showSuccess, showError } from "./utils/notification";
-import { delay } from "./utils/utils";
-import type { Dialog } from "mdui/components/dialog";
-import type { TextField } from "mdui/components/text-field";
-
-
-let menu = document.getElementById("message-context-menu")!;
-let editDialog = document.getElementById("edit-message-dialog") as Dialog;
-let replyDialog = document.getElementById("reply-message-dialog") as Dialog;
-let currentMessage: Message | null = null;
-
-function init() {
-    bindEvents();
-}
-
-/**
- * Binds event listeners
- * @private
- */
-function bindEvents(): void {
-    // Context menu events
-    menu?.addEventListener('click', (e) => {
-        const target = e.target as HTMLElement;
-        const action = target.closest('.context-menu-item')?.getAttribute('data-action');
-        
-        if (action && currentMessage) {
-            handleAction(action, currentMessage);
-        }
-    });
-
-    // Close menu when clicking outside
-    document.addEventListener('click', (e) => {
-        if (!menu?.contains(e.target as Node)) {
-            hide();
-        }
-    });
-
-    // Edit dialog events
-    const editCancelBtn = editDialog?.querySelector('#edit-cancel');
-    const editSaveBtn = editDialog?.querySelector('#edit-save');
-
-    editCancelBtn?.addEventListener('click', () => hideEditDialog());
-    editSaveBtn?.addEventListener('click', () => saveEdit());
-
-    // Reply dialog events
-    const replyCancelBtn = replyDialog?.querySelector('#reply-cancel');
-    const replySendBtn = replyDialog?.querySelector('#reply-send');
-
-    replyCancelBtn?.addEventListener('click', () => hideReplyDialog());
-    replySendBtn?.addEventListener('click', () => sendReply());
-
-    // Keyboard shortcuts
-    document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape') {
-            hide();
-            hideEditDialog();
-            hideReplyDialog();
-        }
-    });
-}
-
-/**
- * Shows the context menu at the specified position
- * @param {Message} message - The message to show menu for
- * @param {number} x - X coordinate
- * @param {number} y - Y coordinate
- */
-export function show(message: Message, x: number, y: number): void {
-    currentMessage = message;
-    
-    // Show delete for own messages and for owner on any message
-    const editItem = menu.querySelector('[data-action="edit"]') as HTMLElement;
-    const deleteItem = menu.querySelector('[data-action="delete"]') as HTMLElement;
-    
-    const isAuthor = message.username === currentUser?.username;
-    const isOwner = !!currentUser?.admin;
-
-    editItem.style.display = isAuthor ? 'flex' : 'none';
-    deleteItem.style.display = (isAuthor || isOwner) ? 'flex' : 'none';
-    
-    // Position the menu properly
-    menu.style.display = 'block';
-
-    let menuWidth = menu.offsetWidth;
-    let menuHeight = menu.offsetHeight;
-    
-    let adjustedX = x;
-    let adjustedY = y;
-    let vertical = "top";
-    let horizontal = "right";
-
-    // Adjust horizontal position if menu would go off-screen
-    if (x + menuWidth > window.innerWidth) {
-        adjustedX = x - menuWidth;
-        horizontal = "left";
-    }
-
-    // Adjust vertical position if menu would go off-screen
-    if (y + menuHeight > window.innerHeight) {
-        adjustedY = y - menuHeight;
-        vertical = "bottom";
-    }
-
-    // Ensure menu doesn't go off the left or top edges
-    adjustedX = Math.max(0, adjustedX);
-    adjustedY = Math.max(0, adjustedY);
-
-    menu.style.left = `${adjustedX}px`;
-    menu.style.top = `${adjustedY}px`;
-    menu.classList.add(`pos-${vertical}-${horizontal}`, "open");
-}
-
-/**
- * Hides the context menu
- */
-export function hide(): void {
-    menu.style.display = 'none';
-    menu.classList.forEach((name) => {
-        if (name.match(/pos-\w+-\w+/)) {
-            menu.classList.remove(name);
-        }
-    })
-    currentMessage = null;
-}
-
-/**
- * Handles context menu actions
- * @param {string} action - The action to perform
- * @param {Message} message - The message to act on
- * @private
- */
-function handleAction(action: string, message: Message): void {
-    hide();
-
-    switch (action) {
-        case 'edit':
-            showEditDialog(message);
-            break;
-        case 'delete':
-            deleteMessage(message);
-            break;
-        case 'reply':
-            showReplyDialog(message);
-            break;
-    }
-}
-
-/**
- * Shows the edit dialog
- * @param {Message} message - The message to edit
- * @private
- */
-async function showEditDialog(message: Message): Promise<void> {
-    const textField = editDialog.querySelector('#edit-message-input') as TextField;
-    textField.value = message.content;
-    
-    currentMessage = message;
-    editDialog.open = true;
-    
-    // Focus the text field
-    await delay(100);
-    textField?.focus();
-}
-
-/**
- * Hides the edit dialog
- * @private
- */
-function hideEditDialog(): void {
-    editDialog.open = false;
-}
-
-/**
- * Saves the edited message
- * @private
- */
-function saveEdit(): void {
-    if (!currentMessage) return;
-
-    const textField = editDialog.querySelector('#edit-message-input') as TextField;
-    const newContent = textField?.value?.trim() || '';
-
-    if (!newContent) {
-        showError('Message cannot be empty');
-        return;
-    }
-
-    const payload: WebSocketMessage = {
-        type: "editMessage",
-        data: {
-            message_id: currentMessage.id,
-            content: newContent
-        },
-        credentials: {
-            scheme: "Bearer",
-            credentials: authToken!
-        }
-    };
-
-    let callback: ((e: MessageEvent) => void) | null = null;
-    callback = (e) => {
-        websocket.removeEventListener("message", callback!);
-        const response: WebSocketMessage = JSON.parse(e.data);
-        
-        if (response.error) {
-            showError(response.error.detail);
-        } else {
-            showSuccess('Message edited successfully');
-            hideEditDialog();
-        }
-    };
-    websocket.addEventListener("message", callback);
-    websocket.send(JSON.stringify(payload));
-}
-
-/**
- * Shows the reply dialog
- * @param {Message} message - The message to reply to
- * @private
- */
-async function showReplyDialog(message: Message): Promise<void> {
-    const preview = replyDialog.querySelector('#reply-preview') as HTMLElement;
-    preview.innerHTML = `
-        <div class="reply-preview-content">
-            <strong>${message.username}</strong>: ${message.content}
-        </div>
-    `;
-    
-    currentMessage = message;
-    replyDialog.open = true;
-    
-    // Focus the text field
-    await delay(100);
-    const textField = replyDialog?.querySelector('#reply-message-input') as TextField;
-    textField?.focus();
-}
-
-/**
- * Hides the reply dialog
- * @private
- */
-function hideReplyDialog(): void {
-    replyDialog.open = false;
-}
-
-/**
- * Sends the reply message
- * @private
- */
-function sendReply(): void {
-    if (!currentMessage) return;
-
-    const textField = replyDialog.querySelector('#reply-message-input') as TextField;
-    const content = textField?.value?.trim() || '';
-
-    if (!content) {
-        showError('Reply cannot be empty');
-        return;
-    }
-
-    const payload: WebSocketMessage = {
-        type: "replyMessage",
-        data: {
-            content: content,
-            reply_to_id: currentMessage.id
-        },
-        credentials: {
-            scheme: "Bearer",
-            credentials: authToken!
-        }
-    };
-
-    let callback: ((e: MessageEvent) => void) | null = null;
-    callback = (e) => {
-        websocket.removeEventListener("message", callback!);
-        const response: WebSocketMessage = JSON.parse(e.data);
-        
-        if (response.error) {
-            showError(response.error.detail);
-        } else {
-            showSuccess('Reply sent successfully');
-            hideReplyDialog();
-            if (textField) {
-                textField.value = '';
-            }
-        }
-    };
-    websocket.addEventListener("message", callback);
-    websocket.send(JSON.stringify(payload));
-}
-
-/**
- * Deletes a message
- * @param {Message} message - The message to delete
- * @private
- */
-function deleteMessage(message: Message): void {
-    if (!confirm('Are you sure you want to delete this message?')) {
-        return;
-    }
-
-    const payload: WebSocketMessage = {
-        type: "deleteMessage",
-        data: {
-            message_id: message.id
-        },
-        credentials: {
-            scheme: "Bearer",
-            credentials: authToken!
-        }
-    };
-
-    let callback: ((e: MessageEvent) => void) | null = null;
-    callback = (e) => {
-        websocket.removeEventListener("message", callback!);
-        const response: WebSocketMessage = JSON.parse(e.data);
-        
-        if (response.error) {
-            showError(response.error.detail);
-        } else {
-            showSuccess('Message deleted successfully');
-        }
-    };
-    websocket.addEventListener("message", callback);
-    websocket.send(JSON.stringify(payload));
-}
-
-init();

frontend/src/pages/ProtectedRoute.tsx

@@ -0,0 +1,21 @@
+import { useEffect } from "react";
+import { useAppState } from "./chat/state";
+import { useNavigate } from "react-router-dom";
+
+interface ProtectedRouteProps {
+    children: React.ReactNode;
+}
+
+export default function ProtectedRoute({ children }: ProtectedRouteProps) {
+    const { user } = useAppState();
+    const navigate = useNavigate();
+    
+    useEffect(() => {
+        if (!user.authToken) {
+            navigate("/login");
+            return;
+        }
+    }, [user.authToken, user.currentUser, navigate]);
+    
+    return <>{children}</>;
+}

frontend/src/pages/auth/Auth.tsx

@@ -0,0 +1,56 @@
+import type React from "react";
+
+export function AuthContainer({ children }: { children?: React.ReactNode }) {
+    return (
+        <div className="auth-container">
+            <div className="auth-card fade-in">
+                {children}
+            </div>
+        </div>
+    )
+}
+
+export type IconType = "filled" | "outlined";
+
+export interface AuthHeaderIcon {
+    name: string;
+    type: IconType
+}
+
+export interface AuthHeaderProps {
+    title: string;
+    icon: string | AuthHeaderIcon;
+    subtitle: string;
+}
+
+export function AuthHeader({ title, icon, subtitle }: AuthHeaderProps) {
+    const iconType = typeof icon === "string" ? "filled" : icon.type;
+    const iconName = typeof icon === "string" ? icon : icon.name;
+
+    return (
+        <div className="auth-header">
+            <h2>
+                <span className={`material-symbols ${iconType} large`}>{iconName}</span> 
+                {title}
+            </h2>
+            <p>{subtitle}</p>
+        </div>
+    )
+}
+
+export type AlertType = "success" | "danger"
+
+export interface Alert {
+    type: AlertType;
+    message: string;
+}
+
+export function AlertsContainer({ alerts }: { alerts: Alert[]}) {
+    return (
+        <div>
+            {alerts.slice(-3).map((alert, i) => {
+                return <div className={`alert alert-${alert.type}`} key={i}>{alert.message}</div>
+            })}
+        </div>
+    )
+}

frontend/src/pages/auth/LoginPage.tsx

@@ -0,0 +1,148 @@
+import { useImmer } from "use-immer";
+import { AlertsContainer, type Alert, type AlertType } from "./Auth";
+import { AuthContainer, AuthHeader } from "./Auth";
+import type { ErrorResponse, LoginRequest, LoginResponse } from "@/core/types";
+import { ensureKeysOnLogin } from "@/core/api/authApi";
+import { API_BASE_URL } from "@/core/config";
+import { useRef } from "react";
+import type { TextField } from "mdui/components/text-field";
+import { useAppState } from "@/pages/chat/state";
+import { MaterialTextField } from "@/core/components/TextField";
+import { initialize, isSupported, startElectronReceiver, subscribe } from "@/core/push-notifications/push-notifications";
+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<Alert[]>([]);
+    const setUser = useAppState(state => state.setUser);
+    const navigate = useNavigate();
+    const { navigate: navigateDownloadApp } = useDownloadAppScreen();
+    const usernameElement = useRef<TextField>(null);
+    const passwordElement = useRef<TextField>(null);
+
+    if (navigateDownloadApp) return navigateDownloadApp;
+
+    function showAlert(type: AlertType, message: string) {
+        updateAlerts((alerts) => {
+            alerts.push({ type: type, message: message });
+        });
+    }
+
+    return (
+        <AuthContainer>
+            <AuthHeader icon="login" title="Добро пожаловать!" subtitle="Войдите в свой аккаунт" />
+            <div className="auth-body">
+                <AlertsContainer alerts={alerts} />
+                
+                <form
+                    onSubmit={async (e) => {
+                        e.preventDefault();
+                        
+                        const username = usernameElement.current!.value.trim();
+                        const password = passwordElement.current!.value.trim();
+                        
+                        if (!username || !password) {
+                            showAlert("danger", "Пожалуйста, заполните все поля");
+                            return;
+                        }
+                        
+                        try {
+                            const request: LoginRequest = {
+                                username: username,
+                                password: password
+                            };
+
+                            const response = await fetch(`${API_BASE_URL}/login`, {
+                                method: "POST",
+                                headers: {
+                                    "Content-Type": "application/json"
+                                },
+                                body: JSON.stringify(request)
+                            });
+                            
+                            if (response.ok) {
+                                const data: LoginResponse = await response.json();
+                                // Store the JWT token first
+                                setUser(data.token, data.user);
+                                
+                                // Setup keys with the token we just received
+                                try {
+                                    await ensureKeysOnLogin(password, data.token);
+                                } catch (e) {
+                                    console.error("Key setup failed:", e);
+                                }
+
+                                navigate("/chat");
+                                
+                                // Initialize notifications
+                                try {
+                                    if (isSupported()) {
+                                        const initialized = await initialize();
+                                        if (initialized) {
+                                            await subscribe(data.token);
+                                            
+                                            // For Electron, start the notification receiver
+                                            if (isElectron) {
+                                                await startElectronReceiver();
+                                            }
+                                            
+                                            console.log("Notifications enabled");
+                                        } else {
+                                            console.log("Notification permission denied");
+                                        }
+                                    } else {
+                                        console.log("Notifications not supported");
+                                    }
+                                } catch (e) {
+                                    console.error("Notification setup failed:", e);
+                                }
+                            } else {
+                                const data: ErrorResponse = await response.json();
+                                showAlert("danger", data.message || "Неверное имя пользователя или пароль");
+                            }
+                        } catch {
+                            showAlert("danger", "Ошибка соединения с сервером");
+                        }
+                    }}>
+                    <MaterialTextField
+                        label="Имя пользователя"
+                        id="login-username"
+                        name="username"
+                        variant="outlined"
+                        icon="person--filled"
+                        autocomplete="username"
+                        required
+                        ref={usernameElement} />
+                    
+                    <MaterialTextField
+                        label="Пароль"
+                        id="login-password"
+                        name="password"
+                        variant="outlined"
+                        type="password"
+                        toggle-password
+                        icon="password--filled"
+                        autocomplete="current-password"
+                        required
+                        ref={passwordElement} />
+
+                    <mdui-button type="submit">Войти</mdui-button>
+                </form>
+                
+                <div className="text-center">
+                    <p>
+                        Ещё нет аккаунта? 
+                        <a
+                            href="#"
+                            className="link" 
+                            onClick={() => navigate("/register")}>
+                            Зарегистрируйтесь
+                        </a>
+                    </p>
+                </div>
+            </div>
+        </AuthContainer>
+    )
+}

frontend/src/pages/auth/RegisterPage.tsx

@@ -0,0 +1,153 @@
+import { useImmer } from "use-immer";
+import { AuthContainer, AuthHeader } from "./Auth";
+import { AlertsContainer, type Alert, type AlertType } from "./Auth";
+import { useRef } from "react";
+import { TextField } from "mdui/components/text-field";
+import type { ErrorResponse, RegisterRequest, LoginResponse } from "@/core/types";
+import { API_BASE_URL } from "@/core/config";
+import { useAppState } from "@/pages/chat/state";
+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<Alert[]>([]);
+    const setUser = useAppState(state => state.setUser);
+    const navigate = useNavigate();
+    const { navigate: navigateDownloadApp } = useDownloadAppScreen();
+    const usernameElement = useRef<TextField>(null);
+    const passwordElement = useRef<TextField>(null);
+    const confirmPasswordElement = useRef<TextField>(null);
+
+    if (navigateDownloadApp) return navigateDownloadApp;
+
+    function showAlert(type: AlertType, message: string) {
+        updateAlerts((alerts) => {
+            alerts.push({ type: type, message: message });
+        });
+    }
+
+    return (
+        <AuthContainer>
+            <AuthHeader icon="person_add" title="Регистрация" subtitle="Создайте новый аккаунт" />
+            <div className="auth-body">
+                <AlertsContainer alerts={alerts} />
+                
+                <form onSubmit={async (e) => {
+                    e.preventDefault();
+                    
+                    const username = usernameElement.current!.value.trim();
+                    const password = passwordElement.current!.value.trim();
+                    const confirmPassword = confirmPasswordElement.current!.value.trim();
+                    
+                    if (!username || !password || !confirmPassword) {
+                        showAlert("danger", "Пожалуйста, заполните все поля");
+                        return;
+                    }
+                    
+                    if (password !== confirmPassword) {
+                        showAlert("danger", "Пароли не совпадают");
+                        return;
+                    }
+                    
+                    if (username.length < 3 || username.length > 20) {
+                        showAlert("danger", "Имя пользователя должно быть от 3 до 20 символов");
+                        return;
+                    }
+                    
+                    if (password.length < 5 || password.length > 50) {
+                        showAlert("danger", "Пароль должен быть от 5 до 50 символов");
+                        return;
+                    }
+                    
+                    try {
+                        const request: RegisterRequest = {
+                            username: username,
+                            password: password,
+                            confirm_password: confirmPassword
+                        }
+                
+                        const response = await fetch(`${API_BASE_URL}/register`, {
+                            method: "POST",
+                            headers: {
+                                "Content-Type": "application/json"
+                            },
+                            body: JSON.stringify(request)
+                        });
+                        
+                        if (response.ok) {
+                            const data: LoginResponse = await response.json();
+                            // Store the JWT token first
+                            setUser(data.token, data.user);
+                            
+                            // Setup keys with the token we just received
+                            try {
+                                await ensureKeysOnLogin(password, data.token);
+                            } catch {
+                                console.error("Key setup failed:", e);
+                            }
+
+                            navigate("/chat");
+                        } else {
+                            const data: ErrorResponse = await response.json();
+                            showAlert("danger", data.message || "Ошибка при регистрации");
+                        }
+                    } catch {
+                        showAlert("danger", "Ошибка соединения с сервером");
+                    }
+                }}>
+                    <MaterialTextField
+                        label="Имя пользователя" 
+                        id="register-username" 
+                        name="username" 
+                        variant="outlined"
+                        icon="person--filled"
+                        autocomplete="username"
+                        maxlength={20}
+                        counter
+                        required
+                        ref={usernameElement} />
+                    <MaterialTextField
+                        label="Пароль" 
+                        id="register-password" 
+                        name="password" 
+                        variant="outlined" 
+                        type="password" 
+                        toggle-password
+                        icon="password--filled"
+                        autocomplete="new-password"
+                        required
+                        ref={passwordElement} />
+                    <MaterialTextField
+                        label="Подтвердите пароль" 
+                        id="register-confirm-password" 
+                        name="confirm_password" 
+                        variant="outlined" 
+                        type="password" 
+                        toggle-password
+                        icon="password--filled"
+                        autocomplete="new-password"
+                        required
+                        ref={confirmPasswordElement} />
+
+                    <mdui-button type="submit">Зарегистрироваться</mdui-button>
+                </form>
+                
+                <div className="text-center">
+                    <p>
+                        Уже есть аккаунт? 
+                        <a 
+                            href="#" 
+                            id="login-link" 
+                            className="link" 
+                            onClick={() => navigate("/login")}>
+                            Войдите
+                        </a>
+                    </p>
+                </div>
+            </div>
+        </AuthContainer>
+    )
+}

frontend/src/pages/auth/auth.scss

@@ -1,5 +1,5 @@
-@use "common/colors" as *;
-@use "common/material" as *;
+@use "../../css/colors" as *;
+@use "../../css/material" as *;
 
 .auth-container {
     display: flex;

frontend/src/pages/chat/css/_animations.scss

@@ -0,0 +1,107 @@
+@use "../../../css/colors" as *;
+@use "../../../css/material" as *;
+@use "sass:color";
+
+// Animation for reactions appearing/disappearing
+@keyframes messageReactionsFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes reactionFadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes reactionFadeOut {
+    from {
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    to {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+}
+
+// Context menu wrapper animations
+@keyframes contextMenuEnter {
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes contextMenuEnterLeft {
+    to {
+        opacity: 1;
+        transform: translateX(0) scale(1);
+    }
+}
+
+@keyframes contextMenuEnterUp {
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes contextMenuEnterUpLeft {
+    to {
+        opacity: 1;
+        transform: translateX(0) translateY(0) scale(1);
+    }
+}
+
+@keyframes contextMenuClose {
+    to {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+}
+
+@keyframes contextMenuCloseLeft {
+    to {
+        opacity: 0;
+        transform: translateX(-20px) scale(0.8);
+    }
+}
+
+@keyframes contextMenuCloseUp {
+    to {
+        opacity: 0;
+        transform: translateY(20px) scale(0.8);
+    }
+}
+
+@keyframes contextMenuCloseUpLeft {
+    to {
+        opacity: 0;
+        transform: translateX(-20px) translateY(20px) scale(0.8);
+    }
+}
+
+@keyframes emojiMenuEnter {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}

frontend/src/pages/chat/css/_chat-input.scss

@@ -0,0 +1,318 @@
+@use "../../../css/colors" as *;
+@use "../../../css/material" as *;
+@use "sass:color";
+
+.chat-input-wrapper {
+    position: relative;
+    margin: 0 10px 10px 10px;
+
+    .input-group {
+        display: flex;
+        background: $color-dark-surface-container;
+        border-radius: 30px;
+        flex-direction: column;
+        border: 1px solid rgba($color-dark-outline-variant, 0.4);
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+
+        .contextual-preview {
+            padding: 12px 16px 0 16px;
+            display: flex;
+            align-items: flex-start;
+            gap: 16px;
+    
+            mdui-icon {
+                align-self: center;
+                box-sizing: content-box;
+            }
+    
+            .reply-cancel {
+                margin-left: auto;
+            }
+        }
+
+        .attachments-preview {
+            align-items: center;
+
+            .attachments-chips {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 8px;
+            }
+        }
+
+        .chat-input {
+            flex: 1;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            
+            .buttons, .left-buttons {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+            }
+            
+            .left-buttons {
+                .emoji-btn {
+                    margin: 10px;
+                    color: $color-dark-on-surface-variant;
+                    transition: color 0.2s ease;
+                    flex-shrink: 0;
+                    align-self: flex-end;
+    
+                    &:hover {
+                        color: $color-dark-primary;
+                    }
+                }
+            }
+    
+            .message-input {
+                flex: 1;
+                padding: 20px 0;
+                border: none;
+                border-radius: 25px;
+                font-size: 1rem;
+                outline: none;
+                caret-color: $color-dark-primary;
+                color: $color-dark-on-surface;
+                background: transparent;
+                resize: none;
+                font: inherit;
+                font-size: 13pt;
+                height: 100%;
+                width: 100%;
+                
+                &::placeholder {
+                    color: $color-dark-on-surface-variant;
+                    opacity: 0.7;
+                }
+            }
+
+            .buttons {
+                .send-btn {
+                    margin: 10px;
+                    width: 50px;
+                    height: 50px;
+                    border-radius: 50%;
+                    background: linear-gradient(135deg, color.adjust($color-dark-primary, $lightness: 8%), color.adjust($color-dark-primary-container, $lightness: 5%));
+                    color: $color-dark-on-primary;
+                    border: 1px solid rgba($color-dark-primary, 0.5);
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    transition: all 0.25s ease;
+                    align-self: flex-end;
+                    box-shadow: 0 0 20px rgba($color-dark-primary, 0.4);
+    
+                    &:hover {
+                        transform: translateY(-2px);
+                        box-shadow: 0 0 30px rgba($color-dark-primary, 0.6);
+                    }
+                }
+            }
+        }
+    }
+}
+
+// Emoji Menu Styles
+.emoji-menu {
+    $transition: cubic-bezier(0.4, 0, 0.2, 1);
+
+    background: $color-dark-surface-container;
+    border: 1px solid rgba($color-dark-outline-variant, 0.4);
+    border-radius: 16px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(20px);
+    width: 320px;
+    height: 400px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    transform-origin: bottom left;
+    opacity: 0;
+    transform: translateY(30px);
+    transition: transform 0.25s $transition, opacity 0.25s $transition;
+    user-select: none;
+
+    &.open {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    .emoji-menu-header {
+        background: $color-dark-surface-container-high;
+        border-bottom: 1px solid rgba($color-dark-outline-variant, 0.2);
+        position: sticky;
+        top: 0;
+        z-index: 1;
+
+        .emoji-category-tabs {
+            display: flex;
+            gap: 4px;
+            overflow-x: auto;
+            overflow-y: hidden;
+            scroll-behavior: smooth;
+            padding: 8px;
+            
+            &::-webkit-scrollbar {
+                height: 4px;
+            }
+
+            &::-webkit-scrollbar-track {
+                background: transparent;
+            }
+
+            &::-webkit-scrollbar-thumb {
+                background-color: $color-dark-surface-container;
+                border-radius: 2px;
+            }
+
+            &::-webkit-scrollbar-thumb:hover {
+                background-color: $color-dark-surface-container-high;
+            }
+
+            .emoji-category-tab {
+                background: transparent;
+                border: none;
+                border-radius: 10px;
+                padding: 8px;
+                cursor: pointer;
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                font-size: 1.2rem;
+                min-width: 40px;
+                height: 40px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                position: relative;
+                overflow: hidden;
+
+                &:hover {
+                    background: $color-dark-surface-container;
+                }
+
+                &.active {
+                    background: $color-dark-primary-container;
+                    color: $color-dark-on-primary-container;
+                    transform: scale(1.05);
+                }
+
+                &::before {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    background: $color-dark-primary-container;
+                    opacity: 0;
+                    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                    border-radius: 8px;
+                }
+
+                &.active::before {
+                    opacity: 1;
+                }
+
+                span {
+                    position: relative;
+                    z-index: 1;
+                }
+            }
+        }
+    }
+
+    .emoji-grid {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        overflow-y: auto;
+        scroll-behavior: smooth;
+        
+        &::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        &::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: $color-dark-surface-container-high;
+            border-radius: 3px;
+        }
+
+        .emoji-category-section {
+            .emoji-category-title {
+                position: sticky;
+                top: 0;
+                padding-top: 5px;
+                padding-bottom: 5px;
+                padding-left: 12px;
+                padding-right: 12px;
+                font-size: 0.85rem;
+                font-weight: 600;
+                color: $color-dark-on-surface-variant;
+                z-index: 2;
+                margin: 0;
+                backdrop-filter: blur(10px);
+            }
+
+            .emoji-category-grid {
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
+                gap: 2px;
+                padding: 8px;
+            }
+        }
+
+        .emoji-item {
+            $size: 30px;
+
+            background: transparent;
+            border: none;
+            border-radius: 6px;
+            padding: 5px;
+            cursor: pointer;
+            transition: all 0.15s ease;
+            font-size: $size;
+            width: $size;
+            height: $size;
+            box-sizing: content-box;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &:hover {
+                background: $color-dark-surface-container-high;
+                transform: scale(1.1);
+            }
+
+            &:active {
+                transform: scale(0.95);
+            }
+        }
+    }
+
+    .emoji-empty-state {
+        padding: 20px;
+        text-align: center;
+        color: $color-dark-on-surface-variant;
+        font-size: 0.9rem;
+    }
+
+    // Integrated mode styles (inside reaction bar)
+    &.integrated {
+        position: relative !important;
+        width: 320px !important;
+        height: 400px !important;
+        transform: none !important;
+        opacity: 1 !important;
+        box-shadow: none;
+        border: none;
+        background: $color-dark-surface-container;
+        overflow: visible;
+    }
+}

frontend/src/pages/chat/css/_context-menu.scss

@@ -0,0 +1,270 @@
+@use "../../../css/colors" as *;
+@use "../../../css/material" as *;
+@use "sass:color";
+
+// Reaction bar styles (standalone)
+.reaction-bar {
+    background: $color-dark-surface-container;
+    border: 1px solid $color-dark-outline;
+    border-radius: 24px;
+    padding: 8px;
+    opacity: 1;
+    transition: all 0.15s ease;
+    backdrop-filter: blur(8px);
+    transform: translateY(0);
+    
+    &.closing {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+}
+
+// Emoji menu wrapper inside reaction bar
+.emoji-menu-wrapper {
+    width: 320px;
+    height: 400px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+// Context menu wrapper with animations
+.context-menu-wrapper {
+    position: relative;
+    display: block;
+    
+    // Animation states
+    &.entering {
+        opacity: 0;
+        transform: scale(0.8);
+        animation: contextMenuEnter 0.2s ease forwards;
+    }
+    
+    &.entering-left {
+        opacity: 0;
+        transform: translateX(-20px) scale(0.8);
+        animation: contextMenuEnterLeft 0.2s ease forwards;
+    }
+    
+    &.entering-up {
+        opacity: 0;
+        transform: translateY(20px) scale(0.8);
+        animation: contextMenuEnterUp 0.2s ease forwards;
+    }
+    
+    &.entering-up-left {
+        opacity: 0;
+        transform: translateX(-20px) translateY(20px) scale(0.8);
+        animation: contextMenuEnterUpLeft 0.2s ease forwards;
+    }
+    
+    &.closing {
+        opacity: 1;
+        transform: scale(1);
+        animation: contextMenuClose 0.2s ease forwards;
+    }
+    
+    &.closing-left {
+        opacity: 1;
+        transform: translateX(0) scale(1);
+        animation: contextMenuCloseLeft 0.2s ease forwards;
+    }
+    
+    &.closing-up {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+        animation: contextMenuCloseUp 0.2s ease forwards;
+    }
+    
+    &.closing-up-left {
+        opacity: 1;
+        transform: translateX(0) translateY(0) scale(1);
+        animation: contextMenuCloseUpLeft 0.2s ease forwards;
+    }
+}
+
+.context-menu {
+    background: $color-dark-surface;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    padding: 0.5rem 0;
+    min-width: 160px;
+    z-index: 1000;
+    
+    &.entering {
+        animation: fadeInDown 0.2s ease forwards;
+    }
+    
+    &.entering-left {
+        animation: fadeInLeft 0.2s ease forwards;
+    }
+    
+    &.entering-up {
+        animation: fadeInUp 0.2s ease forwards;
+    }
+    
+    &.entering-up-left {
+        animation: fadeInUpLeft 0.2s ease forwards;
+    }
+    
+    &.closing {
+        animation: fadeOutUp 0.2s ease forwards;
+    }
+    
+    &.closing-left {
+        animation: fadeOutRight 0.2s ease forwards;
+    }
+    
+    &.closing-up {
+        animation: fadeOutDown 0.2s ease forwards;
+    }
+    
+    &.closing-up-left {
+        animation: fadeOutDownRight 0.2s ease forwards;
+    }
+    
+    .context-menu-item {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        padding: 0.75rem 1rem;
+        cursor: pointer;
+        color: $color-dark-on-surface;
+        font-size: 0.9rem;
+        transition: background-color 0.2s ease;
+        
+        &:hover {
+            background-color: $color-dark-surface-container;
+        }
+        
+        .material-symbols {
+            font-size: 1.1rem;
+            color: $color-dark-on-surface-variant;
+        }
+    }
+}
+
+// Reaction bar inside context menu wrapper
+.context-menu-reaction-bar {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 8px 12px;
+    background: $color-dark-surface-container;
+    border: 1px solid $color-dark-outline;
+    border-radius: 16px;
+    position: absolute;
+    bottom: 100%;
+    justify-content: center;
+    margin-bottom: 10px;
+    transition: width 0.3s ease-out, height 0.3s ease-out;
+    
+    &.left {
+        left: 0;
+        transform: translateX(0);
+    }
+    
+    &.right {
+        right: 0;
+        transform: translateX(0);
+    }
+    
+    &.expanded {
+        padding: 0;
+        overflow: hidden;
+        width: 320px;
+        height: 400px;
+        border-radius: 16px;
+        
+        // Default: expand downward from the reaction bar's bottom edge
+        position: absolute;
+        bottom: auto;
+        top: 0;
+        left: 0;
+        transform: translateY(0);
+        
+        &.expand-upward {
+            // Expand upward from the reaction bar's top edge
+            bottom: 100%;
+            top: auto;
+            margin-bottom: 10px;
+            margin-top: 0;
+            transform: translateY(0);
+        }
+
+        .emoji-menu-wrapper {
+            animation: emojiMenuEnter 0.5s ease;
+        }
+    }
+}
+
+.reaction-bar-content {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    transition: opacity 0.3s ease-out;
+    
+    &.faded {
+        opacity: 0;
+    }
+}
+
+.reaction-emoji-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 16px;
+    background: transparent;
+    cursor: pointer;
+    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+    font-size: 18px;
+    
+    &:hover {
+        background: var(--mdui-color-surface-container-high);
+        transform: scale(1.3);
+        box-shadow: var(--mdui-elevation-1);
+    }
+    
+    &:active {
+        transform: scale(0.95);
+        transition: transform 0.1s ease;
+    }
+}
+
+.reaction-expand-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: 1px solid var(--mdui-color-outline);
+    border-radius: 16px;
+    background: var(--mdui-color-surface);
+    cursor: pointer;
+    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+    
+    &:hover {
+        background: var(--mdui-color-surface-container-high);
+        border-color: var(--mdui-color-primary);
+        transform: scale(1.1);
+        box-shadow: var(--mdui-elevation-1);
+    }
+    
+    &:active {
+        transform: scale(0.95);
+        transition: transform 0.1s ease;
+    }
+    
+    .material-symbols {
+        font-size: 18px;
+        color: var(--mdui-color-on-surface);
+        transition: transform 0.2s ease;
+    }
+    
+    &:hover .material-symbols {
+        transform: rotate(90deg);
+    }
+}

frontend/src/pages/chat/css/_layout.scss

@@ -0,0 +1,49 @@
+@use "../../../css/colors" as *;
+@use "../../../css/material" as *;
+@use "sass:color";
+
+#chat-interface {
+    height: 100%;
+    background: linear-gradient(135deg, $color-dark-background 0%, $color-dark-surface-container 70%, rgba($color-dark-primary-container, 0.3) 100%);
+    position: relative;
+    
+    &::before {
+        content: '';
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: 
+            radial-gradient(circle at 20% 80%, rgba($color-dark-primary, 0.15) 0%, transparent 50%),
+            radial-gradient(circle at 80% 20%, rgba($color-dark-tertiary, 0.15) 0%, transparent 50%),
+            radial-gradient(circle at 40% 40%, rgba($color-dark-secondary, 0.1) 0%, transparent 50%);
+        pointer-events: none;
+        z-index: 0;
+    }
+
+    .chat-container {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        overflow: hidden;
+
+        .chat-main {
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            position: relative;
+            overflow: hidden;
+        }
+    }
+}
+
+// Panel chat styles
+// контейнер чата и панели с чатами
+.all-container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+}

frontend/src/pages/chat/css/_left-panel.scss

@@ -0,0 +1,234 @@
+@use "../../../css/colors" as *;
+@use "../../../css/material" as *;
+@use "sass:color";
+
+.header {
+    display: flex;
+    background-color: $color-dark-surface-container;
+    color: white;
+    padding: 16px 16px;
+    justify-content: end;
+    width: fit-content;
+    z-index: 1000;
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    .header-content {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .logo {
+            font-size: 1.8rem;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+        }
+
+        #logouts {
+            display: none;
+            list-style: none;
+            gap: 10px;
+
+            li {
+                a {
+                    color: white;
+                    text-decoration: none;
+                    font-weight: 500;
+                    transition: all 0.3s ease;
+                    padding: 10px;
+                    border-radius: 10px;
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    gap: 10px;
+
+                    &:hover {
+                        background-color: rgba(255, 255, 255, 0.2);
+                    }
+                }
+            }
+        }
+    }
+}
+
+#profile {
+    display: none;
+    flex-direction: column;
+    z-index: 2000;
+    top: 0;
+    left: 0;
+    position: fixed;
+    height: 100vh;
+    width: 27%;
+    background-color: $color-dark-surface-container;
+    position: relative;
+
+    .profileheader {
+        display: flex;
+        gap: 200px;
+
+        p {
+            color: white;
+        }
+
+        a {
+            text-decoration: none;
+            color: white;
+            border: solid 2px $color-dark-on-surface-variant;
+            padding: 5px;
+            border-radius: 10px;
+
+            &:hover {
+                background-color: rgba(255, 255, 255, 0.241);
+            }
+        }
+    }
+}
+
+#chat-list {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 0;
+    width: 40%;
+    background-color: $color-dark-surface-container;
+    height: 100%;
+    z-index: 1000;
+    min-height: 0; // allow children to manage their own scrolling
+
+    .chat-header-left {
+        display: flex;
+        color: white;
+        font-size: 25px;
+        background-color: $color-dark-surface-container;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+        padding: 16px;
+        overflow: hidden;
+
+        .product-name {
+            flex-grow: 1;
+        }
+    
+        .profile {
+            font-size: 24px;
+            display: flex;
+            justify-content: start;
+            flex-shrink: 0;
+            flex-grow: 0;
+
+            #closeprofile a {
+                text-decoration: none;
+                color: white;
+                border: solid 2px $color-dark-on-surface-variant;
+                padding: 5px;
+                border-radius: 10px;
+                
+                &:hover {
+                    background-color: rgba(255, 255, 255, 0.241);
+                }
+            }
+
+            img {
+                $size: 45px;
+                display: flex;
+                border-radius: 50%;
+                width: $size;
+                height: $size;
+            }
+        }
+    }
+
+    .chat-tabs {
+        margin-top: 5px;
+        width: 100%;
+        height: calc(100% - 80px);
+        display: flex;
+        flex-direction: column;
+        min-height: 0; // prevent flex collapse when inner overflows
+        --mdui-color-surface: $color-dark-surface-container;
+        --mdui-color-surface-variant: transparent;
+
+        img {
+            width: 45px;
+            height: 45px;
+            border-radius: 20%;
+            object-fit: cover;
+            margin-right: 1rem;
+        }
+
+        mdui-tabs {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            min-height: 0; // enable inner panel to scroll
+        }
+
+        mdui-tab-panel[active] {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            min-height: 0; // critical to avoid collapsing
+            overflow: hidden;
+        }
+
+        mdui-list {
+            flex: 1;
+            min-height: 0; // allow scroll area to size correctly
+            overflow-y: auto;
+            padding: 0;
+            margin: 0;
+        }
+    }
+
+    mdui-bottom-app-bar {
+        position: relative;
+        width: 100%;
+        padding-left: 16px;
+        padding-right: 16px;
+        margin-top: auto;
+    }
+}
+
+// ChatHeader component styles
+.chat-header-left {
+    .product-name {
+        font-size: 1.8rem;
+        font-weight: 700;
+        background: linear-gradient(45deg, $color-dark-primary, $color-dark-tertiary);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        text-shadow: 0 0 20px rgba($color-dark-primary, 0.5);
+    }
+    
+    .profile {
+        a {
+            display: flex;
+            align-items: center;
+            text-decoration: none;
+            transition: transform 0.3s ease;
+            
+            &:hover {
+                transform: scale(1.05);
+            }
+            
+            img {
+                width: 40px;
+                height: 40px;
+                border-radius: 50%;
+                object-fit: cover;
+                border: 2px solid rgba($color-dark-primary, 0.4);
+                box-shadow: 0 0 15px rgba($color-dark-primary, 0.3);
+                transition: all 0.3s ease;
+                
+                &:hover {
+                    box-shadow: 0 0 25px rgba($color-dark-primary, 0.5);
+                    border-color: rgba($color-dark-primary, 0.6);
+                }
+            }
+        }
+    }
+}

frontend/src/pages/chat/css/_message-reactions.scss

@@ -0,0 +1,59 @@
+@use "../../../css/colors" as *;
+@use "../../../css/material" as *;
+@use "sass:color";
+
+// Reaction styles
+.message-reactions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-top: 8px;
+    margin-left: 10px;
+    margin-right: 10px;
+    animation: messageReactionsFadeIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.reaction-button {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border: none;
+    border-radius: 16px;
+    background-color: $color-dark-surface-container;
+    cursor: pointer;
+    transition: transform 0.2s ease, background-color 0.2s ease;
+    font-size: 1px;
+    min-height: 28px;
+    animation: reactionFadeIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    
+    &.removing {
+        animation: reactionFadeOut 0.2s ease forwards;
+    }
+    
+    &:hover {
+        background-color: $color-dark-surface-container-high;
+        transform: scale(1.05);
+    }
+    
+    &.reacted {
+        background-color: $color-dark-primary-container;
+        border-color: $color-dark-primary;
+        color: $color-dark-on-primary-container;
+        
+        &:hover {
+            background-color: color.adjust($color-dark-primary-container, $lightness: 20%);
+        }
+    }
+}
+
+.reaction-emoji {
+    font-size: 17px;
+    line-height: 1;
+}
+
+.reaction-count {
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1;
+}

frontend/src/pages/chat/css/_message.scss

@@ -0,0 +1,352 @@
+@use "../../../css/colors" as *;
+@use "../../../css/material" as *;
+@use "sass:color";
+
+.quote.contextual-content > .quote-inner {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    .reply-username {
+        font-weight: 600;
+        color: $color-dark-on-surface;
+        font-size: 0.85rem;
+    }
+
+    .reply-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+.message {
+    margin-bottom: 1rem;
+    max-width: 70%;
+    position: relative;
+    width: fit-content;
+    display: flex;
+    align-items: flex-end;
+    gap: 8px;
+
+    .message-inner {
+        border-radius: 12px;
+        position: relative;
+        word-wrap: break-word;
+        overflow-wrap: anywhere;
+        word-break: break-word;
+        width: fit-content;
+        max-width: 100%;
+        display: inline-block;
+
+        .message-profile-pic {
+            width: 32px;
+            height: 32px;
+            flex-shrink: 0;
+            margin-bottom: 4px;
+            margin: 10px;
+    
+            img {
+                width: 100%;
+                height: 100%;
+                border-radius: 50%;
+                object-fit: cover;
+                transition: transform 0.2s ease, box-shadow 0.2s ease;
+    
+                &:hover {
+                    transform: scale(1.1);
+                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+                }
+            }
+        }
+
+        .message-username {
+            font-weight: 600;
+            margin-bottom: 0.3rem;
+            font-size: 0.9rem;
+            transition: color 0.2s ease;
+            margin: 10px;
+    
+            &:hover {
+                color: $color-dark-primary;
+                text-decoration: underline;
+            }
+        }
+
+        .message-content {
+            word-wrap: break-word;
+            margin: 10px 10px 0 10px;
+            white-space: pre-wrap;
+
+            > p:first-child {
+                margin-block-start: 0;
+            }
+
+            > p:last-child {
+                margin-block-end: 0;
+            }
+        }
+
+        .quote.reply-preview {
+            user-select: none;
+            margin: 10px;
+        }
+
+        .message-attachments {
+            padding: 5px 0 0 0;
+            overflow: hidden;
+
+            .attachment {
+                a {
+                    text-decoration: none;
+                }
+                
+                .attachement-image {
+                    max-width: 200px;
+                    border-radius: 8px;
+                    cursor: pointer;
+                    margin-left: 3px;
+                    margin-right: 3px;
+                    margin-bottom: 3px;
+
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+
+                    &.loading {
+                        filter: blur(10px);
+                        transition: filter 200ms ease;
+                    }
+                }
+
+                .attachement-image.placeholder {
+                    background: $color-dark-surface-container-highest;
+                    pointer-events: none;
+                }
+
+                .image-wrapper {
+                    position: relative;
+                    display: inline-block;
+                }
+
+                .loading-overlay {
+                    position: absolute;
+                    inset: 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    background: rgba(0, 0, 0, 0.08);
+                    backdrop-filter: blur(6px);
+                    border-radius: 8px;
+                }
+
+                .preload-image {
+                    position: absolute;
+                    width: 0;
+                    height: 0;
+                    opacity: 0;
+                    pointer-events: none;
+                }
+
+                .with-icon-gap {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: 8px;
+                }
+            }
+        }
+
+        .message-time {
+            font-size: 0.7rem;
+            color: $color-dark-on-surface-variant;
+            margin-top: 0.3rem;
+            text-align: right;
+            user-select: none;
+            margin: 4px 8px 8px 8px;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            gap: 4px;
+
+            .message-status-indicator {
+                display: flex;
+                align-items: center;
+                width: 16px;
+                height: 16px;
+
+                .error-icon {
+                    color: #f44336;
+                    font-size: 16px;
+                }
+
+                .success-icon {
+                    color: #4caf50;
+                    font-size: 16px;
+                }
+
+                mdui-circular-progress {
+                    width: 16px;
+                    height: 16px;
+                }
+            }
+        }
+    }
+
+    &.received .message-inner {
+        background: $color-dark-surface-container;
+        color: $color-dark-on-surface;
+        border-top-left-radius: 5px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        border: 1px solid rgba($color-dark-outline-variant, 0.4);
+        position: relative;
+        overflow: hidden;
+        
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, rgba($color-dark-primary, 0.05), rgba($color-dark-tertiary, 0.03));
+            pointer-events: none;
+            z-index: 0;
+        }
+        
+        > * {
+            position: relative;
+            z-index: 1;
+        }
+    }
+    
+    &.received .message-time {
+        color: $color-dark-on-surface-variant;
+        font-weight: 500;
+        
+        .message-status-indicator {
+            .success-icon {
+                color: $color-dark-on-surface-variant;
+                filter: brightness(1.1);
+            }
+            
+            .error-icon {
+                color: #ff6b6b;
+                filter: brightness(1.1);
+            }
+        }
+    }
+
+    &.sent {
+        margin-left: auto;
+        flex-direction: row-reverse;
+
+        .message-inner {
+            background: linear-gradient(135deg, color.adjust($color-dark-primary, $lightness: 8%), color.adjust($color-dark-primary-container, $lightness: 5%));
+            color: $color-dark-on-primary;
+            border-top-right-radius: 5px;
+            box-shadow: 0 0 20px rgba($color-dark-primary, 0.4);
+            border: 1px solid rgba($color-dark-primary, 0.5);
+            position: relative;
+            overflow: hidden;
+            
+            &::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
+                pointer-events: none;
+                z-index: 0;
+            }
+            
+            > * {
+                position: relative;
+                z-index: 1;
+            }
+        }
+
+        .message-time {
+            color: $color-dark-on-primary;
+            font-weight: 500;
+            
+            .message-status-indicator {
+                .success-icon {
+                    color: $color-dark-on-primary;
+                    filter: brightness(1.2);
+                }
+                
+                .error-icon {
+                    color: #ff6b6b;
+                    filter: brightness(1.2);
+                }
+            }
+        }
+    }
+}
+
+.message-profile-pic {
+    img {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        object-fit: cover;
+        border: 2px solid $color-dark-outline;
+        
+        &.loading {
+            opacity: 0.6;
+            cursor: default;
+        }
+    }
+}
+
+.message-username {
+    &.loading {
+        opacity: 0.6;
+        cursor: default;
+    }
+}
+
+// Fullscreen Image Viewer
+.fullscreen-image-overlay {
+    position: fixed;
+    inset: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(20px);
+    z-index: 9999;
+    opacity: 1;
+    transition: opacity 0.3s ease;
+
+    &.closing {
+        opacity: 0;
+    }
+
+    .fullscreen-animated-image {
+        position: absolute;
+        object-fit: contain;
+        border-radius: 12px;
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+        transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease;
+    }
+
+    .fullscreen-controls {
+        position: absolute;
+        display: flex;
+        gap: 8px;
+
+        &.top-right {
+            top: 12px;
+            right: 12px;
+        }
+    }
+
+    .progress-wrapper {
+        width: 40px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}

frontend/src/pages/chat/css/_profile-dialog.scss

@@ -1,6 +1,8 @@
-@use "common/colors" as *;
-@use "common/material" as *;
+@use "../../../css/colors" as *;
+@use "../../../css/material" as *;
+@use "sass:color";
 
+// Profile styles
 #profile-dialog .content {
     display: flex;
     flex-direction: column;
@@ -187,6 +189,16 @@
                 }
             }
         }
+
+        .profile-actions {
+            display: flex;
+            gap: 0.75rem;
+            margin-top: 0.5rem;
+
+            mdui-button {
+                flex: 1;
+            }
+        }
     }
 }
 
@@ -236,4 +248,4 @@
         padding-top: 16px;
         border-top: 1px solid $color-dark-outline;
     }
-}
+}