Replace with Material lists

frontend/index.html

@@ -103,16 +103,14 @@
                             </mdui-tab>
 
                             <mdui-tab-panel slot="panel" value="chats">
-                                <div class="chats">
+                                <mdui-list>
-                                    <a href="#" id="chat1but">
+                                    <mdui-list-item headline="Общий чат" description="Вы: Последнее сообщение" id="chat1but">
-                                        <img src="./src/images/default-avatar.png" alt=""> 
+                                        <img src="./src/images/default-avatar.png" alt="" slot="icon" />
-                                        Общий чат
+                                    </mdui-list-item>
-                                    </a>
+                                    <mdui-list-item headline="Общий чат 2" description="Вы: Последнее сообщение" id="chat1but2">
-                                    <a href="#" id="chat1but2">
+                                        <img src="./src/images/default-avatar.png" alt="" slot="icon" />
-                                        <img src="./src/images/default-avatar.png" alt="">
+                                    </mdui-list-item>
-                                        Общий чат 2
+                                </mdui-list>
-                                    </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>

frontend/src/css/_panelchat.scss

@@ -92,28 +92,11 @@
     }
 
     .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;
@@ -123,4 +106,3 @@
         }
     }
 }
-}

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