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] 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"
     }
 }
