From 3f2de17223c909bdd5611d810e414f3252c22d0a Mon Sep 17 00:00:00 2001
From: grabic21 <suchok.listok25@bk.ru>
Date: Wed, 20 Aug 2025 18:05:46 +0400
Subject: [PATCH 01/14] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D1=81=D0=B2=D0=BE=D0=B9=20=D0=B4=D0=B8=D0=B7=D0=B0?=
 =?UTF-8?q?=D0=B9=D0=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/index.html              | 87 +++++++++++++++++---------------
 frontend/src/css/_chat.scss      | 60 +++++++++++++++-------
 frontend/src/css/_panelchat.scss | 85 +++++++++++++++++++++++++++++++
 frontend/src/css/style.scss      |  3 ++
 frontend/src/links.ts            | 10 ++--
 frontend/src/main.ts             | 23 ++++++++-
 6 files changed, 204 insertions(+), 64 deletions(-)
 create mode 100644 frontend/src/css/_panelchat.scss

diff --git a/frontend/index.html b/frontend/index.html
index baa5caf..6c2e67e 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -76,54 +76,59 @@
 
         <!-- Chat Interface -->
         <div id="chat-interface" style="display: none;">
-            <div class="header">
-                <div class="header-content">
-                    <div class="logo">
-                        <span id="productname">Loading...</span>
-                    </div>
-                    <ul class="nav-links">
-                        <li>
-                            <a href="#" id="chat-link">
-                                <span class="material-symbols filled">chat_bubble</span> Общий чат
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#" id="logout-link">
-                                <span class="material-symbols filled">logout</span> Выйти
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-
-            <div class="chat-container">
-                <div class="chat-main">
-                    <div class="chat-header">
-                        <img src="src/images/default-avatar.png" alt="Avatar" class="chat-header-avatar">
-                        <div class="chat-header-info">
-                            <h4>Общий чат</h4>
-                            <p><span class="online-status"></span> Онлайн</p>
+            <div class="all-conteiner">
+                <div class="chat-list" id="chat-list">
+                    <header class="chat-sitting">
+                        <div id="productname">Loading...</div> 
+                        <div class="profile">
+                            <a href="#">Профиль</a>
                         </div>
+                    </header>
+                    <div class="chat-sortirovka"><nav><ul>
+                        <li>чаты</li>
+                        <li>канал</li>
+                        <li>контакты</li>
+                    </ul></nav></div>
+                    <div class="chats-chanel-kontarti">
+                        <a href="#" id="chat1but">Общий чат</a>
+                        <a href="#" id="chat1but2">Общий чат 2</a>
                     </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 class="ponel"><a href="#">+чат</a> <a href="#">+канал</a> <a href="#">Выйти</a></div>
+                    <footer></footer>
+                </div>
+                <div class="chat-container">          
+                    <div class="chat-main" id="conteinerchat">
+                        <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="namechat">Общий чат</h4>
+                                    <p>
+                                        <span class="online-status"></span> Онлайн
+                                    </p>
+                                </div>
+                                <a href="#" id="chat-recrol">Свернуть чат</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>
-
         <script src="src/main.ts" type="module"></script>
     </body>
 </html> 
\ No newline at end of file
diff --git a/frontend/src/css/_chat.scss b/frontend/src/css/_chat.scss
index d00197f..7ed8efc 100644
--- a/frontend/src/css/_chat.scss
+++ b/frontend/src/css/_chat.scss
@@ -4,13 +4,18 @@
 #chat-interface {
     /* Header */
     .header {
+        display: flex;
         background-color: $color-dark-surface-container;
         color: white;
         padding: 16px 16px;
-        position: fixed;
-        width: 100%;
-        top: 0;
+        position: static;
+        justify-content: end;
+        width: fit-content;
         z-index: 1000;
+        position: absolute;
+        top: 0;
+        right: 0;
+
 
         .header-content {
             display: flex;
@@ -24,11 +29,10 @@
                 align-items: center;
             }
 
-            .nav-links {
-                display: flex;
+            #logouts {
+                display: none;
                 list-style: none;
                 gap: 10px;
-
                 li {
                     a {
                         color: white;
@@ -53,13 +57,15 @@
 
     .chat-container {
         display: flex;
-        height: calc(100vh - 70px);
-        margin-top: 70px;
+        width: 100%;
+        flex-direction: column;
+
 
         .chat-main {
-            flex: 1;
+            flex-grow: 1;
             display: flex;
             flex-direction: column;
+            height: 100%;
 
             .chat-header {
                 padding: 16px;
@@ -77,16 +83,20 @@
                 }
 
                 .chat-header-info {
-                    h4 {
-                        font-size: 1.1rem;
-                        margin-bottom: 0.2rem;
-                    }
+                    display: flex;
+                    .info-chat{
+                        display: flex;
+                        flex-direction: column;
+                        h4 {
+                            font-size: 1.1rem;
+                            margin-bottom: 0.2rem;
+                        }
 
-                    p {
-                        font-size: 0.8rem;
-                        color: #718096;
+                        p {
+                            font-size: 0.8rem;
+                            color: #718096;
+                        }
                     }
-
                     .online-status {
                         display: inline-block;
                         width: 10px;
@@ -95,6 +105,21 @@
                         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;
+                        }
+                    }
                 }
             }
 
@@ -225,4 +250,5 @@
             }
         }
     }
+    
 }
\ No newline at end of file
diff --git a/frontend/src/css/_panelchat.scss b/frontend/src/css/_panelchat.scss
new file mode 100644
index 0000000..2c3bd40
--- /dev/null
+++ b/frontend/src/css/_panelchat.scss
@@ -0,0 +1,85 @@
+@use "common/colors" as *;
+@use "common/material" as *;
+// контейнер чата и панели с чатами
+.all-conteiner{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100vh;
+}
+#chat-list{
+    display: flex;
+    flex-direction: column;
+    flex-grow: 0;
+    width: 40%;
+    background-color: $color-light-primary-container;
+    height: 100%;
+    z-index: 1000;
+    .chat-sitting{
+        display: flex;
+        color: $color-dark-on-primary-container;
+        font-size: 42px;
+        font-weight: bolder;
+        background-color: rgb(159, 163, 165);
+        width: 100%;
+        justify-content: center;
+        .profile{
+            font-size: 24px;
+            display: flex;
+            justify-content: end;
+            a{
+                display: flex;
+                color: $color-dark-surface;
+                text-decoration: none;
+                width: 100%;
+                &:hover{
+                    font-size: 26px;
+                }
+            }
+        }
+    }
+    .chats-chanel-kontarti{
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-top: 5px;
+        a{
+            display: flex;
+            text-decoration: none;
+            padding: 10px;
+            border:  solid 2px black;
+            margin-left: 20px;
+            margin-right: 20px;
+            background-color: $gray;
+            color: $color-dark-shadow;
+            font-weight: 20px;
+        }
+    }
+    .chat-sortirovka{
+        display: flex;
+        flex-direction: row;
+        font-size: 24px;
+        justify-content: center;
+            ul{
+                display: flex;
+                flex-direction: row;
+                gap: 5px;
+            }
+            li{
+                display: flex;
+                flex-direction: row;
+            }
+    }
+
+    .ponel{
+        display: flex;
+        position: fixed;
+        top: 95%;
+        left: 2%;
+        gap: 10px;
+        a{
+            text-decoration: none;
+            color: $color-dark-surface;
+        }
+    }
+}
diff --git a/frontend/src/css/style.scss b/frontend/src/css/style.scss
index b721e95..fe9ddd0 100644
--- a/frontend/src/css/style.scss
+++ b/frontend/src/css/style.scss
@@ -1,5 +1,6 @@
 @use "auth";
 @use "chat";
+@use "panelchat";
 @use "common/animations";
 @use "common/components";
 @use "common/colors" as *;
@@ -19,4 +20,6 @@ body {
     background-color: $color-dark-surface;
     color: $color-dark-on-surface;
     line-height: 1.6;
+    height: 100vh;
+    position: relative;
 }
\ No newline at end of file
diff --git a/frontend/src/links.ts b/frontend/src/links.ts
index 56a6762..b051b28 100644
--- a/frontend/src/links.ts
+++ b/frontend/src/links.ts
@@ -1,11 +1,11 @@
-import { loadChat, logout, showLogin, showRegister } from "./auth";
+import { /* loadChat, */ /* logout, */ showLogin, showRegister } from "./auth";
 
 const login = document.getElementById("login-link")!;
 const register = document.getElementById("register-link")!;
-const chat = document.getElementById("chat-link")!;
-const logoutLink = document.getElementById("logout-link")!;
+// const chat = document.getElementById("chat-link")!;
+// const logoutLink = document.getElementById("logout-link")!;
 
 login.addEventListener("click", showLogin);
 register.addEventListener("click", showRegister);
-chat.addEventListener("click", loadChat);
-logoutLink.addEventListener("click", logout);
+// chat.addEventListener("click", loadChat);
+// logoutLink.addEventListener("click", logout);
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 5c4753c..779c224 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -143,4 +143,25 @@ document.getElementById('message-form')!.addEventListener('submit', (e) => {
 });
 
 document.getElementById("productname")!.textContent = PRODUCT_NAME;
-document.title = PRODUCT_NAME;
\ No newline at end of file
+document.title = PRODUCT_NAME;
+const but = document.getElementById('chat-recrol')!;
+const but_list1 = document.getElementById('chat1but')!;
+const but_list2 = document.getElementById('chat1but2')!;
+const cont1 = document.getElementById('conteinerchat')!;
+const logout = document.getElementById('logouts')!;
+const namechat = document.getElementById('namechat')!;
+but.addEventListener('click',() => {
+    but.style.display = 'none';
+    cont1.style.display = 'none';
+    logout.style.display = 'flex';
+});
+but_list1.addEventListener('click',() => {
+    but.style.display = 'flex';
+    cont1.style.display = 'flex';
+    namechat.textContent = 'общий чат';
+});
+but_list2.addEventListener('click',() => {
+    but.style.display = 'flex';
+    cont1.style.display = 'flex';
+    namechat.textContent = 'общий чат 2';
+});
\ No newline at end of file

From 9ff6fe3462a4993eb8e2eb164d7f4f55b39f9a15 Mon Sep 17 00:00:00 2001
From: grabic21 <suchok.listok25@bk.ru>
Date: Wed, 20 Aug 2025 19:35:39 +0400
Subject: [PATCH 02/14] =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81=20=D0=B4=D0=B8?=
 =?UTF-8?q?=D0=B7=D0=B0=D0=B9=D0=BD=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/index.html                    |  6 ++---
 frontend/src/css/_chat.scss            |  2 +-
 frontend/src/css/_panelchat.scss       | 36 +++++++++++++++++++++-----
 frontend/src/css/common/_material.scss |  6 ++++-
 frontend/src/css/style.scss            |  1 +
 5 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 6c2e67e..3d37430 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -81,7 +81,7 @@
                     <header class="chat-sitting">
                         <div id="productname">Loading...</div> 
                         <div class="profile">
-                            <a href="#">Профиль</a>
+                            <a href="#"><img src="./src/images/default-avatar.png" alt=""></a>
                         </div>
                     </header>
                     <div class="chat-sortirovka"><nav><ul>
@@ -90,8 +90,8 @@
                         <li>контакты</li>
                     </ul></nav></div>
                     <div class="chats-chanel-kontarti">
-                        <a href="#" id="chat1but">Общий чат</a>
-                        <a href="#" id="chat1but2">Общий чат 2</a>
+                        <a href="#" id="chat1but"><img src="./src/images/default-avatar.png" alt=""> Общий чат</a>
+                        <a href="#" id="chat1but2"><img src="./src/images/default-avatar.png" alt="">Общий чат 2</a>
                     </div>
                     <div class="ponel"><a href="#">+чат</a> <a href="#">+канал</a> <a href="#">Выйти</a></div>
                     <footer></footer>
diff --git a/frontend/src/css/_chat.scss b/frontend/src/css/_chat.scss
index 7ed8efc..b8c98c1 100644
--- a/frontend/src/css/_chat.scss
+++ b/frontend/src/css/_chat.scss
@@ -77,7 +77,7 @@
                 .chat-header-avatar {
                     width: 45px;
                     height: 45px;
-                    border-radius: 50%;
+                    border-radius: 20%;
                     object-fit: cover;
                     margin-right: 1rem;
                 }
diff --git a/frontend/src/css/_panelchat.scss b/frontend/src/css/_panelchat.scss
index 2c3bd40..a858056 100644
--- a/frontend/src/css/_panelchat.scss
+++ b/frontend/src/css/_panelchat.scss
@@ -12,21 +12,27 @@
     flex-direction: column;
     flex-grow: 0;
     width: 40%;
-    background-color: $color-light-primary-container;
+    background-color: $color-dark-surface-container;
     height: 100%;
     z-index: 1000;
+    border-right: solid 2px black;
     .chat-sitting{
         display: flex;
-        color: $color-dark-on-primary-container;
+        color: white;
         font-size: 42px;
         font-weight: bolder;
-        background-color: rgb(159, 163, 165);
+        background-color: $color-dark-surface-container;
         width: 100%;
         justify-content: center;
+        height: 85px;
+        border-block-end: solid 2px black;
+        gap: 110px;
+        align-items: center;
+    
         .profile{
             font-size: 24px;
             display: flex;
-            justify-content: end;
+            justify-content: start;
             a{
                 display: flex;
                 color: $color-dark-surface;
@@ -36,6 +42,12 @@
                     font-size: 26px;
                 }
             }
+            img{
+                display: flex;
+                border-radius: 100px;
+                width: 56px;
+                height: 56px;
+            }
         }
     }
     .chats-chanel-kontarti{
@@ -47,12 +59,21 @@
             display: flex;
             text-decoration: none;
             padding: 10px;
-            border:  solid 2px black;
+            border:  solid 2px $color-dark-surface;
             margin-left: 20px;
             margin-right: 20px;
-            background-color: $gray;
+            background-color: $color-dark-on-surface-variant;
             color: $color-dark-shadow;
             font-weight: 20px;
+            border-radius: 20px;
+            align-items: center;
+            img{
+                    width: 45px;
+                    height: 45px;
+                    border-radius: 20%;
+                    object-fit: cover;
+                    margin-right: 1rem;
+                }
         }
     }
     .chat-sortirovka{
@@ -69,6 +90,7 @@
                 display: flex;
                 flex-direction: row;
             }
+            }
     }
 
     .ponel{
@@ -82,4 +104,4 @@
             color: $color-dark-surface;
         }
     }
-}
+
diff --git a/frontend/src/css/common/_material.scss b/frontend/src/css/common/_material.scss
index 46834c8..d2a5079 100644
--- a/frontend/src/css/common/_material.scss
+++ b/frontend/src/css/common/_material.scss
@@ -50,7 +50,11 @@ $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);
-
+// custom colors
+$color-1: rgb(82, 109, 246);   
+$color-2: rgb(65, 11, 113);   
+$color-4: rgb(95, 26, 198);   
+$color-3: rgb(49, 71, 179);   
 // Light
 $color-light-primary: rgb(31 101 134);
 $color-light-surface-tint: rgb(31 101 134);
diff --git a/frontend/src/css/style.scss b/frontend/src/css/style.scss
index fe9ddd0..302081e 100644
--- a/frontend/src/css/style.scss
+++ b/frontend/src/css/style.scss
@@ -22,4 +22,5 @@ body {
     line-height: 1.6;
     height: 100vh;
     position: relative;
+
 }
\ No newline at end of file

From db16e82fe38710405ccbaaaf2a13a14efdbea39d Mon Sep 17 00:00:00 2001
From: grabic21 <suchok.listok25@bk.ru>
Date: Wed, 20 Aug 2025 19:42:27 +0400
Subject: [PATCH 03/14] add icon

---
 frontend/index.html              |   4 ++--
 frontend/src/css/_panelchat.scss |   4 +++-
 frontend/src/images/logotip.png  | Bin 0 -> 22381 bytes
 3 files changed, 5 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/images/logotip.png

diff --git a/frontend/index.html b/frontend/index.html
index 3d37430..2d9ee15 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,7 +4,7 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Loading...</title>
-        <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>">
+        <link rel="icon" href="./src/images/logotip.png" viewBox='0 0 100% 100%'>
     </head>
     <body>
         <!-- Login Form -->
@@ -86,7 +86,7 @@
                     </header>
                     <div class="chat-sortirovka"><nav><ul>
                         <li>чаты</li>
-                        <li>канал</li>
+                        <li>каналы</li>
                         <li>контакты</li>
                     </ul></nav></div>
                     <div class="chats-chanel-kontarti">
diff --git a/frontend/src/css/_panelchat.scss b/frontend/src/css/_panelchat.scss
index a858056..1e47489 100644
--- a/frontend/src/css/_panelchat.scss
+++ b/frontend/src/css/_panelchat.scss
@@ -59,7 +59,8 @@
             display: flex;
             text-decoration: none;
             padding: 10px;
-            border:  solid 2px $color-dark-surface;
+            border:  solid 3px $color-dark-surface;
+            box-shadow: 0px 3px 0px black 0.9;
             margin-left: 20px;
             margin-right: 20px;
             background-color: $color-dark-on-surface-variant;
@@ -81,6 +82,7 @@
         flex-direction: row;
         font-size: 24px;
         justify-content: center;
+        color: white;
             ul{
                 display: flex;
                 flex-direction: row;
diff --git a/frontend/src/images/logotip.png b/frontend/src/images/logotip.png
new file mode 100644
index 0000000000000000000000000000000000000000..4eade181b826abfe605dd641870a7678c22272ab
GIT binary patch
literal 22381
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

literal 0
HcmV?d00001


From e6e71adbf1cca9407c23f05d891b2e4b9a471ee0 Mon Sep 17 00:00:00 2001
From: denis0001-dev <denis0001.dev@ya.ru>
Date: Wed, 20 Aug 2025 19:27:11 +0300
Subject: [PATCH 04/14] Fix the new design

---
 frontend/index.html              |  37 +++++++----
 frontend/src/css/_chat.scss      |   1 -
 frontend/src/css/_panelchat.scss | 102 +++++++++++++++++--------------
 3 files changed, 83 insertions(+), 57 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 2d9ee15..9f59de8 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -76,24 +76,39 @@
 
         <!-- Chat Interface -->
         <div id="chat-interface" style="display: none;">
-            <div class="all-conteiner">
+            <div class="all-container">
                 <div class="chat-list" id="chat-list">
-                    <header class="chat-sitting">
+                    <header class="chat-header-left">
                         <div id="productname">Loading...</div> 
                         <div class="profile">
                             <a href="#"><img src="./src/images/default-avatar.png" alt=""></a>
                         </div>
                     </header>
-                    <div class="chat-sortirovka"><nav><ul>
-                        <li>чаты</li>
-                        <li>каналы</li>
-                        <li>контакты</li>
-                    </ul></nav></div>
-                    <div class="chats-chanel-kontarti">
-                        <a href="#" id="chat1but"><img src="./src/images/default-avatar.png" alt=""> Общий чат</a>
-                        <a href="#" id="chat1but2"><img src="./src/images/default-avatar.png" alt="">Общий чат 2</a>
+                    <div class="chat-tabs">
+                        <nav>
+                            <ul>
+                                <li>Чаты</li>
+                                <li>Каналы</li>
+                                <li>Контакты</li>
+                            </ul>
+                        </nav>
+                    </div>
+                    <div class="chats">
+                        <a href="#" id="chat1but">
+                            <img src="./src/images/default-avatar.png" alt=""> 
+                            Общий чат
+                        </a>
+                        <a href="#" id="chat1but2">
+                            <img src="./src/images/default-avatar.png" alt="">
+                            Общий чат 2
+                        </a>
+                    </div>
+                    
+                    <div class="ponel">
+                        <a href="#">+чат</a> 
+                        <a href="#">+канал</a> 
+                        <a href="#">Выйти</a>
                     </div>
-                    <div class="ponel"><a href="#">+чат</a> <a href="#">+канал</a> <a href="#">Выйти</a></div>
                     <footer></footer>
                 </div>
                 <div class="chat-container">          
diff --git a/frontend/src/css/_chat.scss b/frontend/src/css/_chat.scss
index b8c98c1..b45373a 100644
--- a/frontend/src/css/_chat.scss
+++ b/frontend/src/css/_chat.scss
@@ -60,7 +60,6 @@
         width: 100%;
         flex-direction: column;
 
-
         .chat-main {
             flex-grow: 1;
             display: flex;
diff --git a/frontend/src/css/_panelchat.scss b/frontend/src/css/_panelchat.scss
index 1e47489..df00a33 100644
--- a/frontend/src/css/_panelchat.scss
+++ b/frontend/src/css/_panelchat.scss
@@ -1,13 +1,16 @@
 @use "common/colors" as *;
 @use "common/material" as *;
+
+
 // контейнер чата и панели с чатами
-.all-conteiner{
+.all-container {
     display: flex;
     flex-direction: row;
     width: 100%;
     height: 100vh;
 }
-#chat-list{
+
+#chat-list {
     display: flex;
     flex-direction: column;
     flex-grow: 0;
@@ -15,47 +18,52 @@
     background-color: $color-dark-surface-container;
     height: 100%;
     z-index: 1000;
-    border-right: solid 2px black;
-    .chat-sitting{
+
+    .chat-header-left {
         display: flex;
         color: white;
-        font-size: 42px;
-        font-weight: bolder;
+        font-size: 25px;
         background-color: $color-dark-surface-container;
         width: 100%;
         justify-content: center;
-        height: 85px;
-        border-block-end: solid 2px black;
         gap: 110px;
         align-items: center;
+        padding: 16px;
     
-        .profile{
+        .profile {
             font-size: 24px;
             display: flex;
             justify-content: start;
-            a{
+
+            a {
                 display: flex;
                 color: $color-dark-surface;
                 text-decoration: none;
                 width: 100%;
-                &:hover{
+
+                &:hover {
                     font-size: 26px;
                 }
             }
-            img{
+
+            img {
+                $size: 45px;
+
                 display: flex;
-                border-radius: 100px;
-                width: 56px;
-                height: 56px;
+                border-radius: 50%;
+                width: $size;
+                height: $size;
             }
         }
     }
-    .chats-chanel-kontarti{
+
+    .chats {
         display: flex;
         flex-direction: column;
         gap: 10px;
         margin-top: 5px;
-        a{
+
+        a {
             display: flex;
             text-decoration: none;
             padding: 10px;
@@ -68,42 +76,46 @@
             font-weight: 20px;
             border-radius: 20px;
             align-items: center;
-            img{
-                    width: 45px;
-                    height: 45px;
-                    border-radius: 20%;
-                    object-fit: cover;
-                    margin-right: 1rem;
-                }
+
+            img {
+                width: 45px;
+                height: 45px;
+                border-radius: 20%;
+                object-fit: cover;
+                margin-right: 1rem;
+            }
         }
     }
-    .chat-sortirovka{
+
+    .chat-tabs {
         display: flex;
         flex-direction: row;
         font-size: 24px;
         justify-content: center;
         color: white;
-            ul{
-                display: flex;
-                flex-direction: row;
-                gap: 5px;
-            }
-            li{
-                display: flex;
-                flex-direction: row;
-            }
-            }
-    }
 
-    .ponel{
-        display: flex;
-        position: fixed;
-        top: 95%;
-        left: 2%;
-        gap: 10px;
-        a{
-            text-decoration: none;
-            color: $color-dark-surface;
+        ul {
+            display: flex;
+            flex-direction: row;
+            gap: 5px;
+        }
+
+        li {
+            display: flex;
+            flex-direction: row;
         }
     }
+}
 
+.ponel {
+    display: flex;
+    position: fixed;
+    top: 95%;
+    left: 2%;
+    gap: 10px;
+
+    a {
+        text-decoration: none;
+        color: $color-dark-surface;
+    }
+}
\ No newline at end of file

From f7307b53ae4a075dc20b16e04329822d490fd5b9 Mon Sep 17 00:00:00 2001
From: grabic21 <suchok.listok25@bk.ru>
Date: Wed, 20 Aug 2025 20:26:33 +0400
Subject: [PATCH 05/14] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BF=D1=80=D0=BE=D1=84=D0=B8=D0=BB?=
 =?UTF-8?q?=D1=8F=20=D0=BF=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0=D1=82?=
 =?UTF-8?q?=D0=B5=D0=BB=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/index.html              |  7 +++-
 frontend/src/css/_panelchat.scss | 71 ++++++++++++++++++++++++--------
 frontend/src/main.ts             | 18 +++++++-
 3 files changed, 75 insertions(+), 21 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 9f59de8..7e964a0 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -77,11 +77,14 @@
         <!-- Chat Interface -->
         <div id="chat-interface" style="display: none;">
             <div class="all-container">
+                <div class="profile" id="profile">
+                    <div class="profileheader"><p>Твой профиль</p><a href="#" id="closeprofile">закрыть</a></div>
+                </div>
                 <div class="chat-list" id="chat-list">
                     <header class="chat-header-left">
                         <div id="productname">Loading...</div> 
                         <div class="profile">
-                            <a href="#"><img src="./src/images/default-avatar.png" alt=""></a>
+                            <a href="#" id="profbut"><img src="./src/images/default-avatar.png" alt=""></a>
                         </div>
                     </header>
                     <div class="chat-tabs">
@@ -103,7 +106,7 @@
                             Общий чат 2
                         </a>
                     </div>
-                    
+
                     <div class="ponel">
                         <a href="#">+чат</a> 
                         <a href="#">+канал</a> 
diff --git a/frontend/src/css/_panelchat.scss b/frontend/src/css/_panelchat.scss
index df00a33..a5f2de9 100644
--- a/frontend/src/css/_panelchat.scss
+++ b/frontend/src/css/_panelchat.scss
@@ -10,6 +10,35 @@
     height: 100vh;
 }
 
+#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;
+    .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;
@@ -35,14 +64,15 @@
             display: flex;
             justify-content: start;
 
-            a {
-                display: flex;
-                color: $color-dark-surface;
+            #closeprofile a {
                 text-decoration: none;
-                width: 100%;
-
+                color: white;
+                border: solid 2px $color-dark-on-surface-variant;
+                padding: 5px;
+                border-radius: 10px;
+                
                 &:hover {
-                    font-size: 26px;
+                    background-color: rgba(255, 255, 255, 0.241);
                 }
             }
 
@@ -104,18 +134,23 @@
             display: flex;
             flex-direction: row;
         }
-    }
-}
 
-.ponel {
-    display: flex;
-    position: fixed;
-    top: 95%;
-    left: 2%;
-    gap: 10px;
-
-    a {
-        text-decoration: none;
-        color: $color-dark-surface;
+        .ponel {
+            display: flex;
+            position: fixed;
+            top: 95%;
+            left: 0.5%;
+            gap: 10px;
+            a {
+                text-decoration: none;
+                color: $color-dark-on-surface-variant;
+                border: solid 2px $color-dark-on-surface-variant;
+                padding: 5px;
+                border-radius: 10px;
+                &:hover {
+                    background-color: rgba(255, 255, 255, 0.241);
+                }
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 779c224..cff3909 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -144,6 +144,7 @@ document.getElementById('message-form')!.addEventListener('submit', (e) => {
 
 document.getElementById("productname")!.textContent = PRODUCT_NAME;
 document.title = PRODUCT_NAME;
+// сварачивание и разворачивание чата
 const but = document.getElementById('chat-recrol')!;
 const but_list1 = document.getElementById('chat1but')!;
 const but_list2 = document.getElementById('chat1but2')!;
@@ -164,4 +165,19 @@ but_list2.addEventListener('click',() => {
     but.style.display = 'flex';
     cont1.style.display = 'flex';
     namechat.textContent = 'общий чат 2';
-});
\ No newline at end of file
+});
+// открытие профиля
+const butprofile = document.getElementById('profbut')!
+const chatlist = document.getElementById('chat-list')!
+const profile = document.getElementById('profile')!
+const closeprofile = document.getElementById('closeprofile')!
+butprofile.addEventListener('click',()=>{
+    chatlist.style.display = 'none'
+    cont1.style.display = 'none'
+    profile.style.display = 'flex'
+
+})
+closeprofile.addEventListener('click',()=>{
+    chatlist.style.display = 'flex'
+    profile.style.display = 'none'
+})
\ No newline at end of file

From 6c0686677e9a6d5dd2e45fc5a7e92fd5c71a0885 Mon Sep 17 00:00:00 2001
From: denis0001-dev <denis0001.dev@ya.ru>
Date: Wed, 20 Aug 2025 19:33:30 +0300
Subject: [PATCH 06/14] Improve formatting

---
 frontend/src/css/_panelchat.scss | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/css/_panelchat.scss b/frontend/src/css/_panelchat.scss
index a5f2de9..b0c7eb6 100644
--- a/frontend/src/css/_panelchat.scss
+++ b/frontend/src/css/_panelchat.scss
@@ -20,19 +20,23 @@
     height: 100vh;
     width: 27%;
     background-color: $color-dark-surface-container;
-    .profileheader{
+
+    .profileheader {
         display: flex;
         gap: 200px;
-        p{
+
+        p {
             color: white;
         }
-        a{
+
+        a {
             text-decoration: none;
             color: white;
             border: solid 2px $color-dark-on-surface-variant;
             padding: 5px;
             border-radius: 10px;
-            &:hover{
+
+            &:hover {
                 background-color: rgba(255, 255, 255, 0.241);
             }
         }
@@ -141,12 +145,14 @@
             top: 95%;
             left: 0.5%;
             gap: 10px;
+
             a {
                 text-decoration: none;
                 color: $color-dark-on-surface-variant;
                 border: solid 2px $color-dark-on-surface-variant;
                 padding: 5px;
                 border-radius: 10px;
+
                 &:hover {
                     background-color: rgba(255, 255, 255, 0.241);
                 }

From 2728a9c6c9c2999ba52e3d519946ec63cdff30ae Mon Sep 17 00:00:00 2001
From: denis0001-dev <denis0001.dev@ya.ru>
Date: Wed, 20 Aug 2025 19:54:25 +0300
Subject: [PATCH 07/14] Replace tabs with Material Design tabs

---
 frontend/index.html              | 51 +++++++++++++++++++-------------
 frontend/src/css/_panelchat.scss | 44 +++------------------------
 frontend/src/main.ts             |  2 ++
 frontend/src/material.ts         |  6 ++++
 package.json                     | 13 ++++----
 5 files changed, 50 insertions(+), 66 deletions(-)
 create mode 100644 frontend/src/material.ts

diff --git a/frontend/index.html b/frontend/index.html
index 7e964a0..0bf670a 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="ru">
+<html lang="ru" class="mdui-theme-dark">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -78,7 +78,10 @@
         <div id="chat-interface" style="display: none;">
             <div class="all-container">
                 <div class="profile" id="profile">
-                    <div class="profileheader"><p>Твой профиль</p><a href="#" id="closeprofile">закрыть</a></div>
+                    <div class="profileheader">
+                        <p>Твой профиль</p>
+                        <a href="#" id="closeprofile">закрыть</a>
+                    </div>
                 </div>
                 <div class="chat-list" id="chat-list">
                     <header class="chat-header-left">
@@ -88,25 +91,33 @@
                         </div>
                     </header>
                     <div class="chat-tabs">
-                        <nav>
-                            <ul>
-                                <li>Чаты</li>
-                                <li>Каналы</li>
-                                <li>Контакты</li>
-                            </ul>
-                        </nav>
-                    </div>
-                    <div class="chats">
-                        <a href="#" id="chat1but">
-                            <img src="./src/images/default-avatar.png" alt=""> 
-                            Общий чат
-                        </a>
-                        <a href="#" id="chat1but2">
-                            <img src="./src/images/default-avatar.png" alt="">
-                            Общий чат 2
-                        </a>
-                    </div>
+                        <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">
+                                <div class="chats">
+                                    <a href="#" id="chat1but">
+                                        <img src="./src/images/default-avatar.png" alt=""> 
+                                        Общий чат
+                                    </a>
+                                    <a href="#" id="chat1but2">
+                                        <img src="./src/images/default-avatar.png" alt="">
+                                        Общий чат 2
+                                    </a>
+                                </div>
+                            </mdui-tab-panel>
+                            <mdui-tab-panel slot="panel" value="channels">ertgergert</mdui-tab-panel>
+                            <mdui-tab-panel slot="panel" value="contacts">erhnbftgynftdhge4w</mdui-tab-panel>
+                        </mdui-tabs>
+                    </div>
                     <div class="ponel">
                         <a href="#">+чат</a> 
                         <a href="#">+канал</a> 
diff --git a/frontend/src/css/_panelchat.scss b/frontend/src/css/_panelchat.scss
index b0c7eb6..40e850b 100644
--- a/frontend/src/css/_panelchat.scss
+++ b/frontend/src/css/_panelchat.scss
@@ -91,11 +91,14 @@
         }
     }
 
-    .chats {
+    .chat-tabs {
         display: flex;
         flex-direction: column;
         gap: 10px;
         margin-top: 5px;
+        width: 100%;
+        --mdui-color-surface: $color-dark-surface-container;
+        --mdui-color-surface-variant: transparent;
 
         a {
             display: flex;
@@ -120,43 +123,4 @@
             }
         }
     }
-
-    .chat-tabs {
-        display: flex;
-        flex-direction: row;
-        font-size: 24px;
-        justify-content: center;
-        color: white;
-
-        ul {
-            display: flex;
-            flex-direction: row;
-            gap: 5px;
-        }
-
-        li {
-            display: flex;
-            flex-direction: row;
-        }
-
-        .ponel {
-            display: flex;
-            position: fixed;
-            top: 95%;
-            left: 0.5%;
-            gap: 10px;
-
-            a {
-                text-decoration: none;
-                color: $color-dark-on-surface-variant;
-                border: solid 2px $color-dark-on-surface-variant;
-                padding: 5px;
-                border-radius: 10px;
-
-                &:hover {
-                    background-color: rgba(255, 255, 255, 0.241);
-                }
-            }
-        }
-    }
 }
\ No newline at end of file
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index cff3909..c87cdbb 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,8 +1,10 @@
 import './css/style.scss';
+import "mdui/mdui.css";
 import { showLogin, getAuthHeaders, authToken, currentUser } from './auth';
 import { API_BASE_URL, API_FULL_BASE_URL, PRODUCT_NAME } from './config';
 import type { Message, Messages, WebSocketMessage } from './types';
 import "./links";
+import "./material";
 
 const websocket = new WebSocket(`ws://${API_FULL_BASE_URL}/chat/ws`);
 
diff --git a/frontend/src/material.ts b/frontend/src/material.ts
new file mode 100644
index 0000000..da37671
--- /dev/null
+++ b/frontend/src/material.ts
@@ -0,0 +1,6 @@
+import 'mdui/components/tabs.js';
+import 'mdui/components/tab.js';
+import 'mdui/components/tab-panel.js';
+import { setColorScheme } from 'mdui/functions/setColorScheme.js';
+
+setColorScheme("#91cef4");
\ No newline at end of file
diff --git a/package.json b/package.json
index 7f29944..6950cad 100644
--- a/package.json
+++ b/package.json
@@ -7,24 +7,25 @@
         "backend:run": "cd backend && ../.venv/bin/fastapi dev --port 8300 main.py",
         "backend:dependencies": "python3 -m venv .venv && ./.venv/bin/pip3 install -r backend/requirements.txt",
         "backend:reinstall": "rm -rf .venv && npm run backend:dependencies",
-
         "frontend:dev": "vite frontend",
         "frontend:build": "tsc --project frontend && vite build frontend",
         "frontend:preview": "vite preview frontend",
         "frontend:dependencies": "npm install",
-        
         "dev": "concurrently 'npm run frontend:dev' 'npm run backend:run'",
         "build": "npm run frontend:build",
         "install": "npm run backend:dependencies"
     },
     "devDependencies": {
+        "autoprefixer": "^10.4.21",
         "concurrently": "^9.2.0",
-        "sass-embedded": "^1.90.0",
         "postcss": "^8.5.6",
+        "sass-embedded": "^1.90.0",
+        "terser": "^5.43.1",
         "typescript": "~5.9.2",
         "vite": "^7.1.2",
-        "vite-plugin-html": "^3.2.2",
-        "terser": "^5.43.1",
-        "autoprefixer": "^10.4.21"
+        "vite-plugin-html": "^3.2.2"
+    },
+    "dependencies": {
+        "mdui": "^2.1.4"
     }
 }

From 5c868b2076978e26105088acf5cbb90bca510008 Mon Sep 17 00:00:00 2001
From: denis0001-dev <denis0001.dev@ya.ru>
Date: Wed, 20 Aug 2025 20:00:40 +0300
Subject: [PATCH 08/14] Replace with Material lists

---
 frontend/index.html              | 18 ++++++++----------
 frontend/src/css/_panelchat.scss | 30 ++++++------------------------
 frontend/src/material.ts         |  4 ++++
 3 files changed, 18 insertions(+), 34 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 0bf670a..adc261c 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -103,16 +103,14 @@
                             </mdui-tab>
 
                             <mdui-tab-panel slot="panel" value="chats">
-                                <div class="chats">
-                                    <a href="#" id="chat1but">
-                                        <img src="./src/images/default-avatar.png" alt=""> 
-                                        Общий чат
-                                    </a>
-                                    <a href="#" id="chat1but2">
-                                        <img src="./src/images/default-avatar.png" alt="">
-                                        Общий чат 2
-                                    </a>
-                                </div>
+                                <mdui-list>
+                                    <mdui-list-item headline="Общий чат" description="Вы: Последнее сообщение" id="chat1but">
+                                        <img src="./src/images/default-avatar.png" alt="" slot="icon" />
+                                    </mdui-list-item>
+                                    <mdui-list-item headline="Общий чат 2" description="Вы: Последнее сообщение" id="chat1but2">
+                                        <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">ertgergert</mdui-tab-panel>
                             <mdui-tab-panel slot="panel" value="contacts">erhnbftgynftdhge4w</mdui-tab-panel>
diff --git a/frontend/src/css/_panelchat.scss b/frontend/src/css/_panelchat.scss
index 40e850b..cab3e70 100644
--- a/frontend/src/css/_panelchat.scss
+++ b/frontend/src/css/_panelchat.scss
@@ -92,35 +92,17 @@
     }
 
     .chat-tabs {
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
         margin-top: 5px;
         width: 100%;
         --mdui-color-surface: $color-dark-surface-container;
         --mdui-color-surface-variant: transparent;
 
-        a {
-            display: flex;
-            text-decoration: none;
-            padding: 10px;
-            border:  solid 3px $color-dark-surface;
-            box-shadow: 0px 3px 0px black 0.9;
-            margin-left: 20px;
-            margin-right: 20px;
-            background-color: $color-dark-on-surface-variant;
-            color: $color-dark-shadow;
-            font-weight: 20px;
-            border-radius: 20px;
-            align-items: center;
-
-            img {
-                width: 45px;
-                height: 45px;
-                border-radius: 20%;
-                object-fit: cover;
-                margin-right: 1rem;
-            }
+        img {
+            width: 45px;
+            height: 45px;
+            border-radius: 20%;
+            object-fit: cover;
+            margin-right: 1rem;
         }
     }
 }
\ No newline at end of file
diff --git a/frontend/src/material.ts b/frontend/src/material.ts
index da37671..da8a561 100644
--- a/frontend/src/material.ts
+++ b/frontend/src/material.ts
@@ -1,6 +1,10 @@
 import 'mdui/components/tabs.js';
 import 'mdui/components/tab.js';
 import 'mdui/components/tab-panel.js';
+import 'mdui/components/list.js';
+import 'mdui/components/list-item.js';
+import 'mdui/components/list-subheader.js';
+
 import { setColorScheme } from 'mdui/functions/setColorScheme.js';
 
 setColorScheme("#91cef4");
\ No newline at end of file

From a0499386a7845af97c40e989146916343887e6e9 Mon Sep 17 00:00:00 2001
From: denis0001-dev <denis0001.dev@ya.ru>
Date: Wed, 20 Aug 2025 20:17:08 +0300
Subject: [PATCH 09/14] Turn panel into top bar

---
 frontend/index.html                           | 16 +++++++--------
 frontend/src/css/_panelchat.scss              |  9 +++++++++
 .../src/css/lib/fonts/material-symbols.scss   | 20 ++++++++++++++++---
 frontend/src/material.ts                      |  4 +++-
 4 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index adc261c..a11dd32 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -112,16 +112,16 @@
                                     </mdui-list-item>
                                 </mdui-list>
                             </mdui-tab-panel>
-                            <mdui-tab-panel slot="panel" value="channels">ertgergert</mdui-tab-panel>
-                            <mdui-tab-panel slot="panel" value="contacts">erhnbftgynftdhge4w</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>
-                    <div class="ponel">
-                        <a href="#">+чат</a> 
-                        <a href="#">+канал</a> 
-                        <a href="#">Выйти</a>
-                    </div>
-                    <footer></footer>
+                    <mdui-bottom-app-bar>
+                        <mdui-button-icon icon="settings--filled"></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="conteinerchat">
diff --git a/frontend/src/css/_panelchat.scss b/frontend/src/css/_panelchat.scss
index cab3e70..612dbf1 100644
--- a/frontend/src/css/_panelchat.scss
+++ b/frontend/src/css/_panelchat.scss
@@ -20,6 +20,7 @@
     height: 100vh;
     width: 27%;
     background-color: $color-dark-surface-container;
+    position: relative;
 
     .profileheader {
         display: flex;
@@ -105,4 +106,12 @@
             margin-right: 1rem;
         }
     }
+
+    mdui-bottom-app-bar {
+        position: relative;
+        width: 100%;
+        padding-left: 16px;
+        padding-right: 16px;
+        margin-top: auto;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/css/lib/fonts/material-symbols.scss b/frontend/src/css/lib/fonts/material-symbols.scss
index d68d7be..80fe37f 100644
--- a/frontend/src/css/lib/fonts/material-symbols.scss
+++ b/frontend/src/css/lib/fonts/material-symbols.scss
@@ -1,11 +1,25 @@
-/* fallback */
-@font-face {
-    font-family: 'Material Symbols Outlined';
+@mixin iconsFontStyle() {
     font-style: normal;
     font-weight: 400;
     src: url(material-symbols.woff2) format('woff2');
 }
 
+/* fallback */
+@font-face {
+    font-family: 'Material Symbols Outlined';
+    @include iconsFontStyle();
+}
+
+@font-face {
+    font-family: 'Material Icons Outlined';
+    @include iconsFontStyle();
+}
+
+@font-face {
+    font-family: 'Material Icons';
+    @include iconsFontStyle();
+}
+
 .material-symbols {
     font-family: 'Material Symbols Outlined';
     font-weight: normal;
diff --git a/frontend/src/material.ts b/frontend/src/material.ts
index da8a561..50ec98d 100644
--- a/frontend/src/material.ts
+++ b/frontend/src/material.ts
@@ -3,7 +3,9 @@ import 'mdui/components/tab.js';
 import 'mdui/components/tab-panel.js';
 import 'mdui/components/list.js';
 import 'mdui/components/list-item.js';
-import 'mdui/components/list-subheader.js';
+import 'mdui/components/bottom-app-bar.js';
+import 'mdui/components/button-icon.js';
+import 'mdui/components/fab.js';
 
 import { setColorScheme } from 'mdui/functions/setColorScheme.js';
 

From 70008a6aa71750324e0c183657abf84e3267aee0 Mon Sep 17 00:00:00 2001
From: denis0001-dev <denis0001.dev@ya.ru>
Date: Wed, 20 Aug 2025 21:33:46 +0300
Subject: [PATCH 10/14] Fix items position

---
 frontend/src/css/_panelchat.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/css/_panelchat.scss b/frontend/src/css/_panelchat.scss
index 612dbf1..d9811d2 100644
--- a/frontend/src/css/_panelchat.scss
+++ b/frontend/src/css/_panelchat.scss
@@ -63,11 +63,17 @@
         gap: 110px;
         align-items: center;
         padding: 16px;
+
+        #productname {
+            flex-grow: 1;
+        }
     
         .profile {
             font-size: 24px;
             display: flex;
             justify-content: start;
+            flex-shrink: 0;
+            flex-grow: 0;
 
             #closeprofile a {
                 text-decoration: none;

From ac4185ce82c55d48f02f7078657f9a0b27a9f996 Mon Sep 17 00:00:00 2001
From: denis0001-dev <denis0001.dev@ya.ru>
Date: Wed, 20 Aug 2025 21:57:52 +0300
Subject: [PATCH 11/14] Add profile dialog

---
 frontend/index.html         | 15 +++++++++------
 frontend/src/css/_chat.scss | 17 +++++++++++------
 frontend/src/css/style.scss | 13 +++++++++++--
 frontend/src/main.ts        | 30 ++++++++++++++++--------------
 frontend/src/material.ts    |  2 ++
 5 files changed, 49 insertions(+), 28 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index a11dd32..ced21ef 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -77,12 +77,6 @@
         <!-- Chat Interface -->
         <div id="chat-interface" style="display: none;">
             <div class="all-container">
-                <div class="profile" id="profile">
-                    <div class="profileheader">
-                        <p>Твой профиль</p>
-                        <a href="#" id="closeprofile">закрыть</a>
-                    </div>
-                </div>
                 <div class="chat-list" id="chat-list">
                     <header class="chat-header-left">
                         <div id="productname">Loading...</div> 
@@ -156,6 +150,15 @@
                 </div>
             </div>
         </div>
+        <mdui-dialog id="profile-dialog" close-on-overlay-click close-on-esc>
+            <p>
+            Скоро будет...
+            </p>
+            
+            <p>
+                <mdui-button id="profile-dialog-close">Закрыть</mdui-button>
+            </p>
+        </mdui-dialog>
         <script src="src/main.ts" type="module"></script>
     </body>
 </html> 
\ No newline at end of file
diff --git a/frontend/src/css/_chat.scss b/frontend/src/css/_chat.scss
index b45373a..fe4ecdf 100644
--- a/frontend/src/css/_chat.scss
+++ b/frontend/src/css/_chat.scss
@@ -2,7 +2,6 @@
 @use "common/material" as *;
 
 #chat-interface {
-    /* Header */
     .header {
         display: flex;
         background-color: $color-dark-surface-container;
@@ -16,7 +15,6 @@
         top: 0;
         right: 0;
 
-
         .header-content {
             display: flex;
             justify-content: space-between;
@@ -33,6 +31,7 @@
                 display: none;
                 list-style: none;
                 gap: 10px;
+
                 li {
                     a {
                         color: white;
@@ -83,19 +82,24 @@
 
                 .chat-header-info {
                     display: flex;
-                    .info-chat{
+
+                    .info-chat {
                         display: flex;
                         flex-direction: column;
+
                         h4 {
                             font-size: 1.1rem;
+                            margin: 0;
                             margin-bottom: 0.2rem;
                         }
 
                         p {
+                            margin: 0;
                             font-size: 0.8rem;
                             color: #718096;
                         }
                     }
+
                     .online-status {
                         display: inline-block;
                         width: 10px;
@@ -104,7 +108,8 @@
                         background-color: $success;
                         margin-right: 5px;
                     }
-                    a{
+
+                    a {
                         display: flex;
                         flex-direction: row;
                         text-decoration: none;
@@ -115,7 +120,8 @@
                         position: absolute;
                         right: 2%;
                         top: 2%;
-                        &:hover{
+
+                        &:hover {
                             border: none;
                         }
                     }
@@ -249,5 +255,4 @@
             }
         }
     }
-    
 }
\ No newline at end of file
diff --git a/frontend/src/css/style.scss b/frontend/src/css/style.scss
index 302081e..b5aeb78 100644
--- a/frontend/src/css/style.scss
+++ b/frontend/src/css/style.scss
@@ -9,9 +9,8 @@
 @use "lib/fonts/montserrat";
 @use "lib/fonts/material-symbols";
 
+
 * {
-    margin: 0;
-    padding: 0;
     box-sizing: border-box;
 }
 
@@ -22,5 +21,15 @@ body {
     line-height: 1.6;
     height: 100vh;
     position: relative;
+    margin: 0;
+}
 
+mdui-dialog {
+    > *:first-child {
+        margin-block-start: 0;
+    }
+
+    > *:last-child {
+        margin-block-end: 0;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index c87cdbb..06b5181 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -5,6 +5,7 @@ import { API_BASE_URL, API_FULL_BASE_URL, PRODUCT_NAME } from './config';
 import type { Message, Messages, WebSocketMessage } from './types';
 import "./links";
 import "./material";
+import type { Dialog } from 'mdui/components/dialog.js';
 
 const websocket = new WebSocket(`ws://${API_FULL_BASE_URL}/chat/ws`);
 
@@ -146,6 +147,8 @@ document.getElementById('message-form')!.addEventListener('submit', (e) => {
 
 document.getElementById("productname")!.textContent = PRODUCT_NAME;
 document.title = PRODUCT_NAME;
+
+
 // сварачивание и разворачивание чата
 const but = document.getElementById('chat-recrol')!;
 const but_list1 = document.getElementById('chat1but')!;
@@ -153,6 +156,7 @@ const but_list2 = document.getElementById('chat1but2')!;
 const cont1 = document.getElementById('conteinerchat')!;
 const logout = document.getElementById('logouts')!;
 const namechat = document.getElementById('namechat')!;
+
 but.addEventListener('click',() => {
     but.style.display = 'none';
     cont1.style.display = 'none';
@@ -168,18 +172,16 @@ but_list2.addEventListener('click',() => {
     cont1.style.display = 'flex';
     namechat.textContent = 'общий чат 2';
 });
-// открытие профиля
-const butprofile = document.getElementById('profbut')!
-const chatlist = document.getElementById('chat-list')!
-const profile = document.getElementById('profile')!
-const closeprofile = document.getElementById('closeprofile')!
-butprofile.addEventListener('click',()=>{
-    chatlist.style.display = 'none'
-    cont1.style.display = 'none'
-    profile.style.display = 'flex'
 
-})
-closeprofile.addEventListener('click',()=>{
-    chatlist.style.display = 'flex'
-    profile.style.display = 'none'
-})
\ No newline at end of file
+// открытие профиля
+const butprofile = document.getElementById('profbut')!;
+const dialog = document.getElementById("profile-dialog") as Dialog;
+const dialogClose = document.getElementById("profile-dialog-close")!;
+
+butprofile.addEventListener('click', () => {
+    dialog.open = true;
+});
+
+dialogClose.addEventListener("click", () => {
+    dialog.open = false;
+});
\ No newline at end of file
diff --git a/frontend/src/material.ts b/frontend/src/material.ts
index 50ec98d..3d4a75d 100644
--- a/frontend/src/material.ts
+++ b/frontend/src/material.ts
@@ -6,6 +6,8 @@ import 'mdui/components/list-item.js';
 import 'mdui/components/bottom-app-bar.js';
 import 'mdui/components/button-icon.js';
 import 'mdui/components/fab.js';
+import 'mdui/components/dialog.js';
+import 'mdui/components/button.js';
 
 import { setColorScheme } from 'mdui/functions/setColorScheme.js';
 

From 0db7d23e699457789403b67b31d1420a8bb17c28 Mon Sep 17 00:00:00 2001
From: denis0001-dev <denis0001.dev@ya.ru>
Date: Wed, 20 Aug 2025 22:25:27 +0300
Subject: [PATCH 12/14] Modularize and fix code

---
 frontend/index.html                           |  16 +-
 frontend/src/auth.ts                          |   2 +-
 frontend/src/chat.ts                          | 111 +++++++++++
 frontend/src/images/{logotip.png => logo.png} | Bin
 frontend/src/init.ts                          |   7 +
 frontend/src/leftpanel.ts                     |  36 ++++
 frontend/src/main.ts                          | 187 +-----------------
 frontend/src/material.ts                      |  20 +-
 frontend/src/utils.ts                         |   8 +
 frontend/src/websocket.ts                     |  22 +++
 10 files changed, 210 insertions(+), 199 deletions(-)
 create mode 100644 frontend/src/chat.ts
 rename frontend/src/images/{logotip.png => logo.png} (100%)
 create mode 100644 frontend/src/init.ts
 create mode 100644 frontend/src/leftpanel.ts
 create mode 100644 frontend/src/utils.ts
 create mode 100644 frontend/src/websocket.ts

diff --git a/frontend/index.html b/frontend/index.html
index ced21ef..73e7fe7 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,17 +1,20 @@
 <!DOCTYPE html>
 <html lang="ru" class="mdui-theme-dark">
     <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Loading...</title>
-        <link rel="icon" href="./src/images/logotip.png" viewBox='0 0 100% 100%'>
+        <link rel="icon" href="./src/images/logo.png" />
     </head>
     <body>
         <!-- 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>
+                    <h2>
+                        <span class="material-symbols filled large">login</span> 
+                        Добро пожаловать!
+                    </h2>
                     <p>Войдите в свой аккаунт</p>
                 </div>
                 <div class="auth-body">
@@ -40,7 +43,10 @@
         <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>
+                    <h2>
+                        <span class="material-symbols filled large">person_add</span> 
+                        Регистрация
+                    </h2>
                     <p>Создайте новый аккаунт</p>
                 </div>
                 <div class="auth-body">
diff --git a/frontend/src/auth.ts b/frontend/src/auth.ts
index d6c1bd6..d869a72 100644
--- a/frontend/src/auth.ts
+++ b/frontend/src/auth.ts
@@ -1,4 +1,4 @@
-import { loadMessages } from "./main";
+import { loadMessages } from "./chat";
 import type { Headers, ErrorResponse, User, LoginResponse, LoginRequest, RegisterRequest } from "./types";
 import { API_BASE_URL } from "./config";
 
diff --git a/frontend/src/chat.ts b/frontend/src/chat.ts
new file mode 100644
index 0000000..1c71fc8
--- /dev/null
+++ b/frontend/src/chat.ts
@@ -0,0 +1,111 @@
+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";
+
+
+export function addMessage(message: Message, isAuthor: boolean) {
+    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');
+
+    if (!isAuthor) {
+        const usernameDiv = document.createElement('div');
+        usernameDiv.classList.add('message-username');
+        usernameDiv.textContent = message.username;
+        messageInner.appendChild(usernameDiv);
+    }
+
+    const contentDiv = document.createElement('div');
+    contentDiv.textContent = message.content;
+    messageInner.appendChild(contentDiv);
+
+    const timeDiv = document.createElement('div');
+    timeDiv.classList.add('message-time');
+    timeDiv.textContent = formatTime(message.timestamp);
+
+    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);
+
+    // Прокрутка к новому сообщению
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+}
+
+export function loadMessages() {
+    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);
+                    }
+                });
+            }
+        });
+}
+
+export function sendMessage() {
+    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();
+});
\ No newline at end of file
diff --git a/frontend/src/images/logotip.png b/frontend/src/images/logo.png
similarity index 100%
rename from frontend/src/images/logotip.png
rename to frontend/src/images/logo.png
diff --git a/frontend/src/init.ts b/frontend/src/init.ts
new file mode 100644
index 0000000..87305c2
--- /dev/null
+++ b/frontend/src/init.ts
@@ -0,0 +1,7 @@
+import { showLogin } from "./auth";
+import { PRODUCT_NAME } from "./config";
+
+showLogin();
+
+document.getElementById("productname")!.textContent = PRODUCT_NAME;
+document.title = PRODUCT_NAME;
\ No newline at end of file
diff --git a/frontend/src/leftpanel.ts b/frontend/src/leftpanel.ts
new file mode 100644
index 0000000..9115422
--- /dev/null
+++ b/frontend/src/leftpanel.ts
@@ -0,0 +1,36 @@
+import type { Dialog } from "mdui/components/dialog";
+
+// сварачивание и разворачивание чата
+const but = document.getElementById('chat-recrol')!;
+const but_list1 = document.getElementById('chat1but')!;
+const but_list2 = document.getElementById('chat1but2')!;
+const cont1 = document.getElementById('conteinerchat')!;
+const namechat = document.getElementById('namechat')!;
+
+but.addEventListener('click', () => {
+    but.style.display = 'none';
+    cont1.style.display = 'none';
+});
+but_list1.addEventListener('click', () => {
+    but.style.display = 'flex';
+    cont1.style.display = 'flex';
+    namechat.textContent = 'общий чат';
+});
+but_list2.addEventListener('click', () => {
+    but.style.display = 'flex';
+    cont1.style.display = 'flex';
+    namechat.textContent = 'общий чат 2';
+});
+
+// открытие профиля
+const butprofile = document.getElementById('profbut')!;
+const dialog = document.getElementById("profile-dialog") as Dialog;
+const dialogClose = document.getElementById("profile-dialog-close")!;
+
+butprofile.addEventListener('click', () => {
+    dialog.open = true;
+});
+
+dialogClose.addEventListener("click", () => {
+    dialog.open = false;
+});
\ No newline at end of file
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 06b5181..ce8bbf8 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,187 +1,8 @@
 import './css/style.scss';
 import "mdui/mdui.css";
-import { showLogin, getAuthHeaders, authToken, currentUser } from './auth';
-import { API_BASE_URL, API_FULL_BASE_URL, PRODUCT_NAME } from './config';
-import type { Message, Messages, WebSocketMessage } from './types';
+
 import "./links";
 import "./material";
-import type { Dialog } from 'mdui/components/dialog.js';
-
-const websocket = new WebSocket(`ws://${API_FULL_BASE_URL}/chat/ws`);
-
-
-// Функция для форматирования времени
-function formatTime(dateString: string) {
-    const date = new Date(dateString);
-    let hours = date.getHours();
-    let minutes = date.getMinutes();
-    const hoursString = hours < 10 ? '0' + hours : hours;
-    const minutesString = minutes < 10 ? '0' + minutes : minutes;
-    return hoursString + ':' + minutesString;
-}
-
-// Добавление нового сообщения в чат
-export function addMessage(message: Message, isAuthor: boolean) {
-    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');
-
-    if (!isAuthor) {
-        const usernameDiv = document.createElement('div');
-        usernameDiv.classList.add('message-username');
-        usernameDiv.textContent = message.username;
-        messageInner.appendChild(usernameDiv);
-    }
-
-    const contentDiv = document.createElement('div');
-    contentDiv.textContent = message.content;
-    messageInner.appendChild(contentDiv);
-
-    const timeDiv = document.createElement('div');
-    timeDiv.classList.add('message-time');
-    timeDiv.textContent = formatTime(message.timestamp);
-
-    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);
-
-    // Прокрутка к новому сообщению
-    messagesContainer.scrollTop = messagesContainer.scrollHeight;
-}
-
-// Загрузка сообщений
-export function loadMessages() {
-    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);
-                    }
-                });
-            }
-        });
-}
-
-// Отправка сообщения
-export function sendMessage() {
-    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));
-    }
-}
-
-
-// --------------
-// Initialization
-// --------------
-
-websocket.addEventListener("message", (e) => {
-    const message: WebSocketMessage = JSON.parse(e.data);
-    switch (message.type) {
-        case "newMessage": {
-            const newMessage: Message = message.data;
-            addMessage(newMessage, newMessage.username == currentUser!.username);
-            break;
-        }
-    }
-});
-
-showLogin();
-
-document.getElementById('message-form')!.addEventListener('submit', (e) => {
-    e.preventDefault();
-    sendMessage();
-});
-
-document.getElementById("productname")!.textContent = PRODUCT_NAME;
-document.title = PRODUCT_NAME;
-
-
-// сварачивание и разворачивание чата
-const but = document.getElementById('chat-recrol')!;
-const but_list1 = document.getElementById('chat1but')!;
-const but_list2 = document.getElementById('chat1but2')!;
-const cont1 = document.getElementById('conteinerchat')!;
-const logout = document.getElementById('logouts')!;
-const namechat = document.getElementById('namechat')!;
-
-but.addEventListener('click',() => {
-    but.style.display = 'none';
-    cont1.style.display = 'none';
-    logout.style.display = 'flex';
-});
-but_list1.addEventListener('click',() => {
-    but.style.display = 'flex';
-    cont1.style.display = 'flex';
-    namechat.textContent = 'общий чат';
-});
-but_list2.addEventListener('click',() => {
-    but.style.display = 'flex';
-    cont1.style.display = 'flex';
-    namechat.textContent = 'общий чат 2';
-});
-
-// открытие профиля
-const butprofile = document.getElementById('profbut')!;
-const dialog = document.getElementById("profile-dialog") as Dialog;
-const dialogClose = document.getElementById("profile-dialog-close")!;
-
-butprofile.addEventListener('click', () => {
-    dialog.open = true;
-});
-
-dialogClose.addEventListener("click", () => {
-    dialog.open = false;
-});
\ No newline at end of file
+import "./chat";
+import "./leftpanel";
+import "./init";
\ No newline at end of file
diff --git a/frontend/src/material.ts b/frontend/src/material.ts
index 3d4a75d..e6d3398 100644
--- a/frontend/src/material.ts
+++ b/frontend/src/material.ts
@@ -1,13 +1,13 @@
-import 'mdui/components/tabs.js';
-import 'mdui/components/tab.js';
-import 'mdui/components/tab-panel.js';
-import 'mdui/components/list.js';
-import 'mdui/components/list-item.js';
-import 'mdui/components/bottom-app-bar.js';
-import 'mdui/components/button-icon.js';
-import 'mdui/components/fab.js';
-import 'mdui/components/dialog.js';
-import 'mdui/components/button.js';
+import 'mdui/components/tabs';
+import 'mdui/components/tab';
+import 'mdui/components/tab-panel';
+import 'mdui/components/list';
+import 'mdui/components/list-item';
+import 'mdui/components/bottom-app-bar';
+import 'mdui/components/button-icon';
+import 'mdui/components/fab';
+import 'mdui/components/dialog';
+import 'mdui/components/button';
 
 import { setColorScheme } from 'mdui/functions/setColorScheme.js';
 
diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
new file mode 100644
index 0000000..cbc4a7a
--- /dev/null
+++ b/frontend/src/utils.ts
@@ -0,0 +1,8 @@
+export function formatTime(dateString: string) {
+    const date = new Date(dateString);
+    let hours = date.getHours();
+    let minutes = date.getMinutes();
+    const hoursString = hours < 10 ? '0' + hours : hours;
+    const minutesString = minutes < 10 ? '0' + minutes : minutes;
+    return hoursString + ':' + minutesString;
+}
\ No newline at end of file
diff --git a/frontend/src/websocket.ts b/frontend/src/websocket.ts
new file mode 100644
index 0000000..1ce731f
--- /dev/null
+++ b/frontend/src/websocket.ts
@@ -0,0 +1,22 @@
+import { currentUser } from "./auth";
+import { addMessage } from "./chat";
+import { API_FULL_BASE_URL } from "./config";
+import type { WebSocketMessage, Message } from "./types";
+
+
+export const websocket = new WebSocket(`ws://${API_FULL_BASE_URL}/chat/ws`);
+
+// --------------
+// Initialization
+// --------------
+
+websocket.addEventListener("message", (e) => {
+    const message: WebSocketMessage = JSON.parse(e.data);
+    switch (message.type) {
+        case "newMessage": {
+            const newMessage: Message = message.data;
+            addMessage(newMessage, newMessage.username == currentUser!.username);
+            break;
+        }
+    }
+});
\ No newline at end of file

From 21bd6b1c880309525a665389021d5f676d38e76d Mon Sep 17 00:00:00 2001
From: denis0001-dev <denis0001.dev@ya.ru>
Date: Wed, 20 Aug 2025 23:15:15 +0300
Subject: [PATCH 13/14] Improve auth pages

---
 frontend/index.html                      | 81 +++++++++++++++++-------
 frontend/src/css/_auth.scss              | 27 ++++----
 frontend/src/css/common/_components.scss | 62 +-----------------
 frontend/src/material.ts                 |  1 +
 4 files changed, 76 insertions(+), 95 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 73e7fe7..46640e3 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -21,15 +21,28 @@
                     <div id="login-alerts"></div>
                     
                     <form id="login-form-element">
-                        <div class="form-group">
-                            <label for="login-username">Имя пользователя</label>
-                            <input type="text" class="form-control" id="login-username" name="username" required>
-                        </div>
-                        <div class="form-group">
-                            <label for="login-password">Пароль</label>
-                            <input type="password" class="form-control" id="login-password" name="password" required>
-                        </div>
-                        <button type="submit" class="btn btn-block">Войти</button>
+                        <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 mt-3">
@@ -53,21 +66,41 @@
                     <div id="register-alerts"></div>
                     
                     <form id="register-form-element">
-                        <div class="form-group">
-                            <label for="register-username">Имя пользователя</label>
-                            <input type="text" class="form-control" id="register-username" name="username" required>
-                            <small class="text-muted">От 3 до 20 символов, без пробелов</small>
-                        </div>
-                        <div class="form-group">
-                            <label for="register-password">Пароль</label>
-                            <input type="password" class="form-control" id="register-password" name="password" required>
-                            <small class="text-muted">Минимум 5 символов, без пробелов</small>
-                        </div>
-                        <div class="form-group">
-                            <label for="register-confirm-password">Подтвердите пароль</label>
-                            <input type="password" class="form-control" id="register-confirm-password" name="confirm_password" required>
-                        </div>
-                        <button type="submit" class="btn btn-block">Зарегистрироваться</button>
+                        <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 mt-3">
diff --git a/frontend/src/css/_auth.scss b/frontend/src/css/_auth.scss
index 01520f1..816f714 100644
--- a/frontend/src/css/_auth.scss
+++ b/frontend/src/css/_auth.scss
@@ -1,4 +1,5 @@
 @use "common/colors" as *;
+@use "common/material" as *;
 
 .auth-container {
     display: flex;
@@ -6,30 +7,27 @@
     align-items: center;
     min-height: 100vh;
     padding: 2rem;
-    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    background-color: $color-dark-surface;
 
     .auth-card {
-        background: white;
+        background-color: $color-dark-surface-container;
+        color: $color-dark-on-surface;
         border-radius: 12px;
         box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
         width: 100%;
         max-width: 450px;
         overflow: hidden;
-        transition: all 0.3s ease;
-
-        &:hover {
-            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
-        }
     }
       
     .auth-header {
-        background: linear-gradient(135deg, $primary, $primary-dark);
-        color: white;
-        padding: 1.5rem;
+        margin: 0;
+        padding: 16px;
+        padding-bottom: 0;
         text-align: center;
 
         h2 {
             font-size: 1.8rem;
+            margin: 0;
             margin-bottom: 0.5rem;
             align-items: center;
             display: flex;
@@ -40,6 +38,13 @@
     }
       
     .auth-body {
-        padding: 2rem;
+        padding: 25px;
+        padding-bottom: 16px;
+
+        form {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
     }
 }
\ No newline at end of file
diff --git a/frontend/src/css/common/_components.scss b/frontend/src/css/common/_components.scss
index 2b04ce9..0307fab 100644
--- a/frontend/src/css/common/_components.scss
+++ b/frontend/src/css/common/_components.scss
@@ -1,62 +1,4 @@
-@use "colors" as *;
-
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 15px;
-}
-
-.form-group {
-    margin-bottom: 1.5rem;
-
-    label {
-        display: block;
-        margin-bottom: 0.5rem;
-        font-weight: 500;
-        color: $dark;
-    }
-}
-
-.form-control {
-    width: 100%;
-    padding: 0.8rem 1rem;
-    border: 1px solid $gray;
-    border-radius: 6px;
-    font-size: 1rem;
-    transition: all 0.3s ease;
-
-    &:focus {
-        outline: none;
-        border-color: $primary;
-        box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2);
-    }
-}
-
-.btn {
-    display: inline-block;
-    background: linear-gradient(135deg, $primary, $primary-dark);
-    color: white;
-    border: none;
-    padding: 0.8rem 1.5rem;
-    font-size: 1rem;
-    font-weight: 600;
-    border-radius: 6px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    text-align: center;
-    text-decoration: none;
-
-    &:hover {
-        background: linear-gradient(135deg, $primary-dark, $primary);
-        transform: translateY(-2px);
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    }
-}
-
-.btn-block {
-    display: block;
-    width: 100%;
-}
+@use "material" as *;
 
 .text-center {
     text-align: center;
@@ -83,7 +25,7 @@
 }
 
 .link {
-    color: $primary; 
+    color: $color-dark-primary; 
     font-weight: 600;
 }
 
diff --git a/frontend/src/material.ts b/frontend/src/material.ts
index e6d3398..59d9a91 100644
--- a/frontend/src/material.ts
+++ b/frontend/src/material.ts
@@ -8,6 +8,7 @@ import 'mdui/components/button-icon';
 import 'mdui/components/fab';
 import 'mdui/components/dialog';
 import 'mdui/components/button';
+import 'mdui/components/text-field';
 
 import { setColorScheme } from 'mdui/functions/setColorScheme.js';
 

From 248465cb195f79abef555b87aae3c1c731e3f1dd Mon Sep 17 00:00:00 2001
From: denis0001-dev <denis0001.dev@ya.ru>
Date: Wed, 20 Aug 2025 23:16:30 +0300
Subject: [PATCH 14/14] Clean up

---
 frontend/index.html                  | 4 ++--
 frontend/src/css/common/_colors.scss | 6 ------
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 46640e3..d63394a 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -45,7 +45,7 @@
                         <mdui-button type="submit">Войти</mdui-button>
                     </form>
                     
-                    <div class="text-center mt-3">
+                    <div class="text-center">
                         <p>Ещё нет аккаунта? <a href="#" id="register-link" class="link">Зарегистрируйтесь</a></p>
                     </div>
                 </div>
@@ -103,7 +103,7 @@
                         <mdui-button type="submit">Зарегистрироваться</mdui-button>
                     </form>
                     
-                    <div class="text-center mt-3">
+                    <div class="text-center">
                         <p>
                             Уже есть аккаунт? 
                             <a href="#" id="login-link" class="link">Войдите</a>
diff --git a/frontend/src/css/common/_colors.scss b/frontend/src/css/common/_colors.scss
index 219aafa..352515f 100644
--- a/frontend/src/css/common/_colors.scss
+++ b/frontend/src/css/common/_colors.scss
@@ -1,8 +1,2 @@
-$primary: #6C63FF;
-$primary-dark: #564FD9;
-$secondary: #FF6584;
-$dark: #2D3748;
-$light: #F7FAFC;
-$gray: #E2E8F0;
 $success: #48BB78;
 $danger: #F56565;
\ No newline at end of file