chore: add sections

Signed-off-by: waterplea <alexander@inkin.ru>

web/projects/ui/src/app/routes/portal/components/header/connection.component.ts

@@ -18,7 +18,7 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
         [style.color]="connection.color"
         [style.font-size.em]="1.5"
         [attr.data-connection]="connection.status"
-      ></tui-icon>
+      />
       {{ connection.message }}
     }
   `,

web/projects/ui/src/app/routes/portal/components/header/menu.component.ts

@@ -17,7 +17,6 @@ import { TuiDataListDropdownManagerModule } from '@taiga-ui/kit'
 import { RESOURCES } from 'src/app/utils/resources'
 import { getMenu } from 'src/app/utils/system-utilities'
 import { ABOUT } from './about.component'
-import { HeaderConnectionComponent } from './connection.component'
 
 @Component({
   selector: 'header-menu',
@@ -31,10 +30,11 @@ import { HeaderConnectionComponent } from './connection.component'
         <img [style.max-width.%]="50" src="assets/img/icon.png" alt="StartOS" />
       </button>
       <ng-template #content let-zone>
-        <tui-data-list tuiDataListDropdownManager [tuiActiveZoneParent]="zone">
-          <header-connection class="status">
-            <h3 class="title">StartOS</h3>
-          </header-connection>
+        <tui-data-list
+          tuiDataListDropdownManager
+          [tuiActiveZoneParent]="zone"
+          [style.width.rem]="13"
+        >
           @for (link of utils; track $index) {
             <a
               tuiOption
@@ -48,7 +48,11 @@ import { HeaderConnectionComponent } from './connection.component'
                 <tui-badge-notification>{{ badge }}</tui-badge-notification>
               }
             </a>
+            @if (!$index || $index === 3 || $index === 5) {
+              <hr />
+            }
           }
+          <hr />
           <button
             tuiOption
             class="item"
@@ -65,6 +69,7 @@ import { HeaderConnectionComponent } from './connection.component'
                   <tui-icon icon="tuiIconInfo" />
                   About this server
                 </button>
+                <hr />
                 @for (link of links; track $index) {
                   <a
                     tuiOption
@@ -95,7 +100,7 @@ import { HeaderConnectionComponent } from './connection.component'
         margin: 0 -0.5rem;
 
         [tuiIconButton] {
-          height: calc(var(--tui-height-m) + 0.375rem);
+          height: calc(var(--tui-height-m) + 0.25rem);
           width: calc(var(--tui-height-m) + 0.625rem);
         }
       }
@@ -109,20 +114,6 @@ import { HeaderConnectionComponent } from './connection.component'
         }
       }
 
-      .status {
-        display: flex !important;
-        font-size: 0;
-        padding: 0 0.5rem;
-        height: 2rem;
-        width: 13rem;
-      }
-
-      .title {
-        margin: 0 auto 0 0;
-        font: var(--tui-font-text-l);
-        font-weight: bold;
-      }
-
       .external {
         margin-left: auto;
         padding-left: 0.5rem;
@@ -137,7 +128,6 @@ import { HeaderConnectionComponent } from './connection.component'
     TuiSvgModule,
     TuiButtonModule,
     TuiIconModule,
-    HeaderConnectionComponent,
     RouterLink,
     TuiBadgeNotificationModule,
     TuiDropdownModule,

web/projects/ui/src/app/routes/portal/portal.component.ts

@@ -34,7 +34,7 @@ import { HeaderComponent } from './components/header/header.component'
       main {
         flex: 1;
         overflow: hidden;
-        margin-bottom: var(--bumper);
+        margin: 0 var(--bumper) var(--bumper);
       }
     `,
   ],

web/projects/ui/src/app/routes/portal/routes/dashboard/dashboard.component.ts

@@ -105,7 +105,6 @@ import { DepErrorService } from 'src/app/services/dep-error.service'
 
     :host-context(tui-root._mobile) {
       height: calc(100vh - 7.375rem);
-      margin: 0 0.375rem;
       --clip-path: none !important;
 
       table {

web/projects/ui/src/app/utils/system-utilities.ts

@@ -16,21 +16,21 @@ export const SYSTEM_UTILITIES: Record<string, { icon: string; title: string }> =
       icon: 'tuiIconGlobe',
       title: 'Updates',
     },
-    '/portal/system/backups': {
-      icon: 'tuiIconSave',
-      title: 'Backups',
-    },
-    '/portal/system/metrics': {
-      icon: 'tuiIconActivity',
-      title: 'Metrics',
+    '/portal/system/sideload': {
+      icon: 'tuiIconUpload',
+      title: 'Sideload',
     },
     '/portal/system/logs': {
       icon: 'tuiIconFileText',
       title: 'Logs',
     },
-    '/portal/system/sideload': {
-      icon: 'tuiIconUpload',
-      title: 'Sideload',
+    '/portal/system/metrics': {
+      icon: 'tuiIconActivity',
+      title: 'Metrics',
+    },
+    '/portal/system/backups': {
+      icon: 'tuiIconSave',
+      title: 'Backups',
     },
     '/portal/system/settings': {
       icon: 'tuiIconTool',

web/projects/ui/src/styles.scss

@@ -13,6 +13,12 @@ ul {
   list-style-type: disc;
 }
 
+hr {
+  height: 0;
+  background: transparent;
+  border-bottom: 1px solid var(--tui-clear);
+}
+
 :root {
   --bumper: 0.375rem;
 }
@@ -27,7 +33,6 @@ ul {
   overflow: auto;
   isolation: isolate;
   backdrop-filter: blur(2rem);
-  margin: 0 var(--bumper);
   border-radius: 0.375rem;
 
   // TODO: Theme