Replace tabs with Material Design tabs

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);
-                }
-            }
-        }
-    }
 }

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`);
 

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");