Make a settings template

frontend/src/css/_panelchat.scss

@@ -89,7 +89,6 @@
 
             img {
                 $size: 45px;
-
                 display: flex;
                 border-radius: 50%;
                 width: $size;

frontend/src/css/_settings.scss

@@ -0,0 +1,99 @@
+@use "common/colors" as *;
+@use "common/material" as *;
+
+#settings-dialog {
+    .fullscreen-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: calc(100vh - (1.5rem * 2));
+        width: 100%;
+        position: relative;
+
+        #settings-dialog-inner {
+            max-width: 1200px;
+            max-height: 1000px;
+            width: 100%;
+            height: 100%;
+
+            .header {
+                display: flex;
+                flex-direction: row;
+                gap: 10px;
+                margin-bottom: 16px;
+            }
+
+            #settings-menu {
+                display: flex;
+                flex-direction: row;
+                gap: 16px;
+
+                mdui-list {
+                    max-width: 280px;
+                    padding-right: 16px;
+                    overflow-y: auto;
+                }
+
+                .screen {
+                    flex: 1;
+                    overflow-y: auto;
+                    position: relative;
+                    
+                    .settings-panel {
+                        display: flex;
+                        flex-direction: column;
+                        gap: 16px;
+                        opacity: 0;
+                        visibility: hidden;
+                        transform: translateY(20px);
+                        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        
+                        &.active {
+                            opacity: 1;
+                            visibility: visible;
+                            transform: translateY(0);
+                            position: relative;
+                        }
+                        
+                        h3 {
+                            margin: 0 0 16px 0;
+                            color: $color-dark-on-surface;
+                        }
+                        
+                        mdui-text-field,
+                        mdui-select,
+                        mdui-switch,
+                        mdui-button {
+                            margin-bottom: 8px;
+                        }
+                        
+                        mdui-switch {
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            padding: 12px 0;
+                            border-bottom: 1px solid $color-dark-outline;
+                            
+                            &:last-child {
+                                border-bottom: none;
+                            }
+                        }
+                        
+                        p {
+                            margin: 8px 0;
+                            color: $color-dark-on-surface-variant;
+                        }
+                        
+                        mdui-linear-progress {
+                            margin: 16px 0;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

frontend/src/css/style.scss

@@ -1,6 +1,7 @@
 @use "auth";
 @use "chat";
 @use "profile";
+@use "settings";
 @use "panelchat";
 @use "common/animations";
 @use "common/components";