first commit

frontend/src/app/app.component.html

@@ -0,0 +1,68 @@
+<p-toast position="top-right"></p-toast>
+<p-confirmDialog [style]="{ width: '28rem' }"></p-confirmDialog>
+
+<div class="api-connection-banner" *ngIf="apiSnapshot().state === 'offline'">
+  <div class="api-connection-banner__content">
+    <strong>{{ 'footer.apiOfflineTitle' | translate }}</strong>
+    <span>{{ 'footer.apiOfflineMessage' | translate }}</span>
+  </div>
+  <button type="button" class="api-connection-banner__action" (click)="refreshApiStatus()">{{ 'footer.retry' | translate }}</button>
+</div>
+
+<ng-container *ngIf="auth.isLoggedIn(); else authView">
+  <div class="layout-shell" [class.layout-shell--collapsed]="layout.collapsed()">
+    <div class="layout-overlay" [class.is-visible]="layout.mobileOpen()" (click)="layout.closeMobileSidebar()"></div>
+
+    <aside class="layout-sidebar" [class.is-open]="layout.mobileOpen()">
+      <app-sidebar [collapsed]="layout.collapsed()" [items]="menuItems" (navigate)="layout.closeMobileSidebar()"></app-sidebar>
+    </aside>
+
+    <div class="layout-main">
+      <app-topbar
+        [pageTitle]="currentPageTitle"
+        [username]="auth.user()?.username || 'admin'"
+        [lang]="language.current()"
+        [languages]="languageOptions"
+        [themeMode]="theme.mode()"
+        (menuClick)="layout.toggleSidebar()"
+        (themeClick)="toggleTheme()"
+        (languageChange)="changeLanguage($event)"
+        (logoutClick)="logout()"
+      ></app-topbar>
+
+      <main class="layout-content">
+        <router-outlet />
+      </main>
+
+      <footer class="layout-footer">
+        <div class="layout-footer__author">
+          <span class="layout-footer__author-label">{{ 'footer.authorLabel' | translate }}</span>
+          <strong>{{ author }}</strong>
+          <a [href]="authorUrl" target="_blank" rel="noreferrer">{{ authorHandle }}</a>
+        </div>
+        <span class="layout-footer__status" [ngClass]="apiStatusClass">{{ 'footer.apiLabel' | translate }}: {{ apiStateLabelKey() | translate }}</span>
+        <span>{{ 'footer.apiLatencyLabel' | translate }}: {{ apiLatencyLabel() }}</span>
+        <a href="/docs" target="_blank" rel="noreferrer">{{ 'footer.apiDocs' | translate }}</a>
+      </footer>
+    </div>
+  </div>
+</ng-container>
+
+<ng-template #authView>
+  <div class="app-auth-view">
+    <main class="app-auth-view__content">
+      <router-outlet />
+    </main>
+
+    <footer class="layout-footer layout-footer--auth">
+      <div class="layout-footer__author">
+        <span class="layout-footer__author-label">{{ 'footer.authorLabel' | translate }}</span>
+        <strong>{{ author }}</strong>
+        <a [href]="authorUrl" target="_blank" rel="noreferrer">{{ authorHandle }}</a>
+      </div>
+      <span class="layout-footer__status" [ngClass]="apiStatusClass">{{ 'footer.apiLabel' | translate }}: {{ apiStateLabelKey() | translate }}</span>
+      <span>{{ 'footer.apiLatencyLabel' | translate }}: {{ apiLatencyLabel() }}</span>
+      <a href="/docs" target="_blank" rel="noreferrer">{{ 'footer.apiDocs' | translate }}</a>
+    </footer>
+  </div>
+</ng-template>