style(ui): improve code formatting and update page templates

- Apply consistent indentation, spacing, and line breaks in multiple components
- Enhance readability in analytics, documentation, index, and settings pages
- Adjust HTML element formatting for better alignment and visual clarity
- Remove unnecessary empty lines and trailing spaces
- Maintain existing functionality without behavior changes

Author: EndyKaufman

web/src/app/app.config.ts

@@ -69,4 +69,4 @@ export const appConfig: ApplicationConfig = {
       await firstValueFrom(authService.profile());
     }),
   ],
-};
+};

web/src/app/components/theme/color-scheme-switcher.component.ts

@@ -11,7 +11,11 @@ import { ThemeService } from '../../services/theme.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     @if (theme$ | async; as theme) {
-      <a [ariaLabel]="theme" (click)="switchTheme()" class="p-2 rounded-lg bg-gray-200 hover:bg-gray-300 transition-colors">
+      <a
+        [ariaLabel]="theme"
+        (click)="switchTheme()"
+        class="p-2 rounded-lg bg-gray-200 hover:bg-gray-300 transition-colors"
+      >
         @switch (theme) {
           @case ('light') {
             <svg
@@ -113,4 +117,4 @@ export class ColorSchemeSwitcherComponent {
   switchTheme(): void {
     this.themeService.switchTheme().then();
   }
-}
+}

web/src/app/directives/if-logged.directive.ts

@@ -89,4 +89,4 @@ export class IfNotLoggedDirective implements OnInit, OnDestroy {
   @Input() set ifNotLogged(condition: any) {
     // null
   }
-}
+}

web/src/app/formly/button-type.component.ts

@@ -9,7 +9,10 @@ import { LucideAngularModule } from 'lucide-angular';
     <button
       style="width: 100%;"
       [type]="props['buttonType'] || 'button'"
-      [class]="props['class'] || 'flex items-center justify-center text-lg font-bold py-3 px-6 rounded-xl text-white bg-pastel-blue transition-all duration-300 transform hover:scale-[1.02] flat-btn-shadow bg-gradient-to-tr from-[#8A89F0] to-[#A2C0F5] tracking-wide'"
+      [class]="
+        props['class'] ||
+        'flex items-center justify-center text-lg font-bold py-3 px-6 rounded-xl text-white bg-pastel-blue transition-all duration-300 transform hover:scale-[1.02] flat-btn-shadow bg-gradient-to-tr from-[#8A89F0] to-[#A2C0F5] tracking-wide'
+      "
       (click)="buttonClick()"
     >
       <span *ngIf="props.label">{{ props.label }}</span>

web/src/app/formly/color-select-type.component.ts

@@ -154,11 +154,11 @@ export class ColorSelectTypeComponent
   selectOption(option: ColorOption) {
     this.selectedValue = option.value;
     this.formControl.setValue(option.value);
-    
+
     // Trigger validation
     this.formControl.markAsDirty();
     this.formControl.updateValueAndValidity();
-        
+
     setTimeout(() => {
       this.isOpen$.next(false);
 
@@ -169,4 +169,4 @@ export class ColorSelectTypeComponent
       }
     });
   }
-}
+}

web/src/app/formly/flat-input-wrapper.component.ts

@@ -88,4 +88,4 @@ export class FlatInputWrapperComponent extends FieldWrapper<FormlyFieldConfig> {
     }
     return errors;
   }
-}
+}

web/src/app/formly/get-formly-type.ts

@@ -1,4 +1,3 @@
- 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { FormlyFieldConfig } from '@ngx-formly/core';
 

web/src/app/guards/theme.guard.ts

@@ -12,4 +12,4 @@ export class StoreThemeInClientGuard implements CanActivate {
     this.themeService.type = LocalStorageEnum.client;
     return true;
   }
-}
+}

web/src/app/pages/analytics.page.ts

@@ -14,86 +14,103 @@ export const routeMeta: RouteMeta = {
   imports: [LucideAngularModule],
   template: `
     <h1 class="text-4xl font-extrabold text-gray-800 mb-2">Analytics (Mock)</h1>
-    <p class="text-xl text-gray-500 mb-8">Track your dashboard usage and performance</p>
-    
+    <p class="text-xl text-gray-500 mb-8">
+      Track your dashboard usage and performance
+    </p>
+
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
       <!-- Usage Statistics Card -->
       <div class="bg-white p-6 rounded-2xl long-shadow">
         <div class="flex items-center mb-4">
-          <i-lucide 
-            name="chart-bar-big" 
-            class="w-10 h-10 text-pastel-blue bg-pastel-blue/10 rounded-lg">
+          <i-lucide
+            name="chart-bar-big"
+            class="w-10 h-10 text-pastel-blue bg-pastel-blue/10 rounded-lg"
+          >
           </i-lucide>
           <h2 class="text-2xl font-bold text-gray-800">Usage Statistics</h2>
         </div>
-        
+
         <div class="space-y-4">
-          <div class="flex justify-between items-center pb-2 border-b border-gray-100">
+          <div
+            class="flex justify-between items-center pb-2 border-b border-gray-100"
+          >
             <span class="text-gray-600">Total Dashboards</span>
             <span class="text-2xl font-bold text-pastel-blue">12</span>
           </div>
-          
-          <div class="flex justify-between items-center pb-2 border-b border-gray-100">
+
+          <div
+            class="flex justify-between items-center pb-2 border-b border-gray-100"
+          >
             <span class="text-gray-600">Active Devices</span>
             <span class="text-2xl font-bold text-pastel-blue">8</span>
           </div>
-          
-          <div class="flex justify-between items-center pb-2 border-b border-gray-100">
+
+          <div
+            class="flex justify-between items-center pb-2 border-b border-gray-100"
+          >
             <span class="text-gray-600">Widgets Deployed</span>
             <span class="text-2xl font-bold text-pastel-blue">42</span>
           </div>
-          
+
           <div class="flex justify-between items-center">
             <span class="text-gray-600">Avg. Updates/Day</span>
             <span class="text-2xl font-bold text-pastel-blue">127</span>
           </div>
         </div>
       </div>
-      
+
       <!-- Device Performance Card -->
       <div class="bg-white p-6 rounded-2xl long-shadow">
         <div class="flex items-center mb-4">
-          <i-lucide 
-            name="smartphone" 
-            class="w-10 h-10 text-pastel-blue bg-pastel-blue/10 rounded-lg">
+          <i-lucide
+            name="smartphone"
+            class="w-10 h-10 text-pastel-blue bg-pastel-blue/10 rounded-lg"
+          >
           </i-lucide>
           <h2 class="text-2xl font-bold text-gray-800">Device Performance</h2>
         </div>
-        
+
         <div class="space-y-4">
-          <div class="flex justify-between items-center pb-2 border-b border-gray-100">
+          <div
+            class="flex justify-between items-center pb-2 border-b border-gray-100"
+          >
             <span class="text-gray-600">Avg. Response Time</span>
             <span class="text-2xl font-bold text-pastel-blue">24ms</span>
           </div>
-          
-          <div class="flex justify-between items-center pb-2 border-b border-gray-100">
+
+          <div
+            class="flex justify-between items-center pb-2 border-b border-gray-100"
+          >
             <span class="text-gray-600">Uptime</span>
             <span class="text-2xl font-bold text-pastel-blue">99.8%</span>
           </div>
-          
-          <div class="flex justify-between items-center pb-2 border-b border-gray-100">
+
+          <div
+            class="flex justify-between items-center pb-2 border-b border-gray-100"
+          >
             <span class="text-gray-600">Offline Events</span>
             <span class="text-2xl font-bold text-pastel-blue">3</span>
           </div>
-          
+
           <div class="flex justify-between items-center">
             <span class="text-gray-600">Cache Hit Rate</span>
             <span class="text-2xl font-bold text-pastel-blue">87%</span>
           </div>
         </div>
       </div>
     </div>
-    
+
     <!-- Recent Activity Section -->
     <div class="bg-white p-6 rounded-2xl long-shadow mb-8">
       <div class="flex items-center mb-4">
-        <i-lucide 
-          name="activity" 
-          class="w-10 h-10 text-pastel-blue bg-pastel-blue/10 rounded-lg">
+        <i-lucide
+          name="activity"
+          class="w-10 h-10 text-pastel-blue bg-pastel-blue/10 rounded-lg"
+        >
         </i-lucide>
         <h2 class="text-2xl font-bold text-gray-800">Recent Activity</h2>
       </div>
-      
+
       <div class="overflow-x-auto">
         <table class="w-full">
           <thead>
@@ -110,64 +127,82 @@ export const routeMeta: RouteMeta = {
               <td class="py-3">Kitchen Display</td>
               <td class="py-3">Dashboard Update</td>
               <td class="py-3">
-                <span class="px-2 py-1 rounded-full text-xs bg-green-100 text-green-800">Success</span>
+                <span
+                  class="px-2 py-1 rounded-full text-xs bg-green-100 text-green-800"
+                  >Success</span
+                >
               </td>
             </tr>
             <tr class="border-b border-gray-100 hover:bg-gray-50">
               <td class="py-3 text-gray-600">5 hours ago</td>
               <td class="py-3">Living Room Tablet</td>
               <td class="py-3">Widget Added</td>
               <td class="py-3">
-                <span class="px-2 py-1 rounded-full text-xs bg-green-100 text-green-800">Success</span>
+                <span
+                  class="px-2 py-1 rounded-full text-xs bg-green-100 text-green-800"
+                  >Success</span
+                >
               </td>
             </tr>
             <tr class="border-b border-gray-100 hover:bg-gray-50">
               <td class="py-3 text-gray-600">1 day ago</td>
               <td class="py-3">Bedroom Phone</td>
               <td class="py-3">Settings Changed</td>
               <td class="py-3">
-                <span class="px-2 py-1 rounded-full text-xs bg-yellow-100 text-yellow-800">Warning</span>
+                <span
+                  class="px-2 py-1 rounded-full text-xs bg-yellow-100 text-yellow-800"
+                  >Warning</span
+                >
               </td>
             </tr>
             <tr class="border-b border-gray-100 hover:bg-gray-50">
               <td class="py-3 text-gray-600">2 days ago</td>
               <td class="py-3">Office Display</td>
               <td class="py-3">Connection Lost</td>
               <td class="py-3">
-                <span class="px-2 py-1 rounded-full text-xs bg-red-100 text-red-800">Error</span>
+                <span
+                  class="px-2 py-1 rounded-full text-xs bg-red-100 text-red-800"
+                  >Error</span
+                >
               </td>
             </tr>
           </tbody>
         </table>
       </div>
     </div>
-    
+
     <!-- Data Export Section -->
     <div class="bg-white p-6 rounded-2xl long-shadow">
       <div class="flex items-center mb-4">
-        <i-lucide 
-          name="download" 
-          class="w-10 h-10 text-pastel-blue bg-pastel-blue/10 rounded-lg">
+        <i-lucide
+          name="download"
+          class="w-10 h-10 text-pastel-blue bg-pastel-blue/10 rounded-lg"
+        >
         </i-lucide>
         <h2 class="text-2xl font-bold text-gray-800">Data Export</h2>
       </div>
-      
+
       <p class="text-gray-600 mb-4">
         Export your analytics data for further analysis or reporting.
       </p>
-      
+
       <div class="flex flex-wrap gap-4">
-        <button class="flex items-center text-lg font-bold py-3 px-6 rounded-xl text-white transition-all duration-300 transform hover:scale-[1.02] flat-btn-shadow bg-gradient-to-tr from-[#8A89F0] to-[#A2C0F5] tracking-wide">
+        <button
+          class="flex items-center text-lg font-bold py-3 px-6 rounded-xl text-white transition-all duration-300 transform hover:scale-[1.02] flat-btn-shadow bg-gradient-to-tr from-[#8A89F0] to-[#A2C0F5] tracking-wide"
+        >
           <i-lucide name="file-text" class="w-5 h-5 mr-2"></i-lucide>
           Export as CSV
         </button>
-        <button class="flex items-center text-lg font-bold py-3 px-6 rounded-xl text-white bg-gray-500 transition-all duration-300 transform hover:scale-[1.02] flat-btn-shadow bg-gradient-to-tr from-[#AAB1BF] to-[#8B92A0] tracking-wide">
+        <button
+          class="flex items-center text-lg font-bold py-3 px-6 rounded-xl text-white bg-gray-500 transition-all duration-300 transform hover:scale-[1.02] flat-btn-shadow bg-gradient-to-tr from-[#AAB1BF] to-[#8B92A0] tracking-wide"
+        >
           <i-lucide name="chart-bar-big" class="w-5 h-5 mr-2"></i-lucide>
           Export as JSON
         </button>
-        <a 
+        <a
           href="/analytics/delete"
-          class="flex items-center text-lg font-bold py-3 px-6 rounded-xl text-white transition-all duration-300 transform hover:scale-[1.02] flat-btn-shadow bg-gradient-to-tr from-[#FF988A] to-[#FFD5A2] text-gray-800">
+          class="flex items-center text-lg font-bold py-3 px-6 rounded-xl text-white transition-all duration-300 transform hover:scale-[1.02] flat-btn-shadow bg-gradient-to-tr from-[#FF988A] to-[#FFD5A2] text-gray-800"
+        >
           <i-lucide name="trash-2" class="w-5 h-5 mr-2"></i-lucide>
           Delete Data
         </a>
@@ -179,4 +214,4 @@ export default class AnalyticsPageComponent {
   showError() {
     alert('Feature coming soon!');
   }
-}
+}

web/src/app/pages/analytics/delete.page.ts

@@ -23,24 +23,23 @@ export const routeMeta: RouteMeta = {
         class="text-gray-500 hover:text-pastel-blue transition-colors mb-10 mt-2 flex items-center"
       >
         <i-lucide name="arrow-left" class="w-6 h-6 mr-0 lg:mr-2"></i-lucide>
-        <span class="mobile-hidden lg:inline text-lg font-medium">Back to Analytics</span>
+        <span class="mobile-hidden lg:inline text-lg font-medium"
+          >Back to Analytics</span
+        >
       </a>
       Permanently remove analytics data.
     </p>
 
     <!-- Analytics Data Deletion Panel -->
     <div class="bg-white p-6 rounded-2xl long-shadow mb-8 space-y-4">
-      <form
-        [formGroup]="form"
-        (ngSubmit)="onSubmit()"
-        class="w-full"
-      >
+      <form [formGroup]="form" (ngSubmit)="onSubmit()" class="w-full">
         <div class="mb-6">
           <p class="text-lg text-gray-700 mb-2">
             Are you sure you want to delete all analytics data?
           </p>
           <p class="text-gray-500">
-            This action cannot be undone. All collected analytics data will be permanently removed.
+            This action cannot be undone. All collected analytics data will be
+            permanently removed.
           </p>
         </div>
 
@@ -74,4 +73,4 @@ export default class AnalyticsDeletePageComponent {
     alert('Analytics data deleted successfully!');
     // In a real application, this would call a service to delete the data
   }
-}
+}