better wifi page

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

@@ -40,20 +40,21 @@ import { wifiSpec } from './wifi.const'
       </a>
       WiFi
     </ng-container>
-    @if (status()?.interface) {
+    <section class="g-card">
-      <section class="g-card">
+      <header>
-        <header>
+        Wi-Fi
-          Wi-Fi
+        <a
-          <a
+          tuiIconButton
-            tuiIconButton
+          size="xs"
-            size="xs"
+          docsLink
-            docsLink
+          path="/start-os/wifi.html"
-            path="/start-os/wifi.html"
+          appearance="icon"
-            appearance="icon"
+          iconStart="@tui.book-open-text"
-            iconStart="@tui.book-open-text"
+        >
-          >
+          {{ 'Documentation' | i18n }}
-            {{ 'Documentation' | i18n }}
+        </a>
-          </a>
+
+        @if (status()?.interface) {
           <input
             type="checkbox"
             tuiSwitch
@@ -62,7 +63,10 @@ import { wifiSpec } from './wifi.const'
             [ngModel]="status()?.enabled"
             (ngModelChange)="onToggle($event)"
           />
-        </header>
+        }
+      </header>
+
+      @if (status()?.interface) {
         @if (status()?.enabled) {
           @if (wifi(); as data) {
             @if (data.known.length) {
@@ -86,12 +90,12 @@ import { wifiSpec } from './wifi.const'
             {{ 'WiFi is disabled' | i18n }}
           </app-placeholder>
         }
-      </section>
+      } @else {
-    } @else {
+        <app-placeholder icon="@tui.wifi">
-      <app-placeholder icon="@tui.wifi">
+          {{ 'No wireless interface detected' | i18n }}
-        {{ 'No wireless interface detected' | i18n }}
+        </app-placeholder>
-      </app-placeholder>
+      }
-    }
+    </section>
   `,
   styles: `
     :host {