chore: add icons to theme selector

Update the Theme select button to render an icon next to the label via an ng-template.

Signed-off-by: Alex Piatakov <alex.piatakov@swirldslabs.com>

Author: Pyatakov

frontend/src/app/services/app-theme.service.ts

@@ -5,6 +5,7 @@ export type AppTheme = 'light' | 'dark' | 'system';
 export interface AppThemeOption {
     label: string;
     value: AppTheme;
+    icon: string;
 }
 
 const APP_THEME_STORAGE_KEY = 'GUARDIAN_APP_THEME';
@@ -16,9 +17,9 @@ const DARK_CLASS = 'guardian-theme-dark';
 })
 export class AppThemeService implements OnDestroy {
     public readonly themes: AppThemeOption[] = [
-        { label: 'Light', value: 'light' },
-        { label: 'Dark', value: 'dark' },
-        { label: 'System', value: 'system' }
+        { label: 'Light', value: 'light', icon: 'pi pi-sun' },
+        { label: 'Dark', value: 'dark', icon: 'pi pi-moon' },
+        { label: 'System', value: 'system', icon: 'pi pi-desktop' }
     ];
 
     private currentTheme: AppTheme = 'light';

frontend/src/app/views/root-profile/root-profile.component.html

@@ -219,6 +219,10 @@
                 optionLabel="label"
                 optionValue="value"
                 styleClass="profile-theme-select">
+                <ng-template let-item pTemplate="item">
+                  <i [class]="item.icon"></i>
+                  <span>{{ item.label }}</span>
+                </ng-template>
               </p-selectbutton>
             </div>
 

frontend/src/app/views/root-profile/root-profile.component.scss

@@ -615,10 +615,20 @@ button[disabled] {
     color: var(--color-grey-5, #848fa9);
 }
 
-:host ::ng-deep .profile-theme-select {
-    .p-togglebutton {
+:host ::ng-deep p-selectbutton {
+    p-togglebutton {
         padding: 4px 10px;
-        font-size: 12px;
+    }
+
+    p-togglebutton > span {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    p-togglebutton i,
+    p-togglebutton span {
+        font-size: 14px !important;
     }
 }