feat: Implement auto-refresh interval settings in the settings panel

Author: stephanebouget

src-tauri/src/main.rs

@@ -41,7 +41,6 @@ fn main() {
             alert_count: Mutex::new(0),
             last_shown: Mutex::new(None),
             config: Mutex::new(config),
-            dev_tools_open: Mutex::new(false),
         })
         .setup(|app| {
             let quit = MenuItem::with_id(app, "quit", "Quit", true, None::<&str>)?;

src-tauri/src/state.rs

@@ -6,5 +6,4 @@ pub struct AppState {
     pub alert_count: Mutex<usize>,
     pub last_shown: Mutex<Option<Instant>>,
     pub config: Mutex<AppConfig>,
-    pub dev_tools_open: Mutex<bool>,
 }

src/app/app.component.html

@@ -21,7 +21,9 @@
   <app-settings-panel
     *ngIf="authenticated && currentView === 'settings'"
     [username]="username"
+    [refreshInterval]="refreshIntervalMinutes"
     (logout)="logout()"
+    (refreshIntervalChange)="onRefreshIntervalChange($event)"
   ></app-settings-panel>
 
   <!-- Repos Selection View -->

src/app/app.component.ts

@@ -44,13 +44,26 @@ export class AppComponent implements OnInit, OnDestroy {
   currentView: ViewMode = 'alerts';
   error = '';
   refreshInterval: any;
+  refreshIntervalMinutes: number = 60; // Default to 1 hour
 
   constructor(
     private tauriService: TauriService,
     private translate: TranslateService
   ) {
     translate.setFallbackLang('en');
     console.log('APP_CONFIG', APP_CONFIG);
+    this.loadRefreshIntervalFromStorage();
+  }
+
+  private loadRefreshIntervalFromStorage(): void {
+    const stored = localStorage.getItem('refreshInterval');
+    if (stored) {
+      this.refreshIntervalMinutes = parseInt(stored, 10);
+    }
+  }
+
+  private saveRefreshIntervalToStorage(): void {
+    localStorage.setItem('refreshInterval', this.refreshIntervalMinutes.toString());
   }
 
   async ngOnInit() {
@@ -241,9 +254,22 @@ export class AppComponent implements OnInit, OnDestroy {
 
   startAutoRefresh() {
     this.stopAutoRefresh();
+    
+    // If interval is 0, don't start auto-refresh
+    if (this.refreshIntervalMinutes === 0) {
+      return;
+    }
+    
+    const intervalMs = this.refreshIntervalMinutes * 60 * 1000;
     this.refreshInterval = setInterval(() => {
       this.fetchAlerts();
-    }, 5 * 60 * 1000);
+    }, intervalMs);
+  }
+
+  onRefreshIntervalChange(minutes: number): void {
+    this.refreshIntervalMinutes = minutes;
+    this.saveRefreshIntervalToStorage();
+    this.startAutoRefresh();
   }
 
   stopAutoRefresh() {

src/app/shared/components/settings-panel/settings-panel.component.html

@@ -4,8 +4,27 @@
       <i class="ti ti-user user-icon"></i>
       <span class="username">{{ username }}</span>
     </div>
+
+    <div class="settings-group">
+      <label class="settings-label">
+        <span class="label-text">Auto-refresh interval</span>
+        <select
+          class="refresh-select"
+          [value]="refreshInterval"
+          (change)="onRefreshIntervalChange($event)"
+        >
+          <option value="30">30 minutes</option>
+          <option value="60">1 hour</option>
+          <option value="120">2 hours</option>
+          <option value="240">4 hours</option>
+        </select>
+      </label>
+    </div>
+
     <div class="settings-actions">
-      <button class="danger-btn" (click)="onLogout()"><i class="ti ti-logout"></i> Sign Out</button>
+      <button class="danger-btn" (click)="onLogout()">
+        <i class="ti ti-logout"></i> Sign Out
+      </button>
     </div>
   </div>
 </div>

src/app/shared/components/settings-panel/settings-panel.component.scss

@@ -46,6 +46,54 @@ $border-color: #2a2a4a;
       flex-direction: column;
       gap: 8px;
     }
+
+    .settings-group {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 12px;
+      background: $bg-primary;
+      border-radius: 8px;
+
+      .settings-label {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        font-size: 13px;
+        font-weight: 500;
+        cursor: pointer;
+
+        .label-text {
+          color: #ffffff;
+        }
+
+        .refresh-select {
+          padding: 8px 10px;
+          background: $bg-secondary;
+          border: 1px solid $border-color;
+          border-radius: 4px;
+          color: #ffffff;
+          font-size: 13px;
+          cursor: pointer;
+          transition: all 0.2s;
+
+          &:hover {
+            border-color: #4a90d9;
+          }
+
+          &:focus {
+            outline: none;
+            border-color: #4a90d9;
+            box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.2);
+          }
+
+          option {
+            background: $bg-secondary;
+            color: #ffffff;
+          }
+        }
+      }
+    }
   }
 }
 

src/app/shared/components/settings-panel/settings-panel.component.ts

@@ -8,10 +8,18 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 })
 export class SettingsPanelComponent {
   @Input() username: string | null = null;
+  @Input() refreshInterval: number = 60; // in minutes
 
   @Output() logout = new EventEmitter<void>();
+  @Output() refreshIntervalChange = new EventEmitter<number>();
 
   onLogout(): void {
     this.logout.emit();
   }
+
+  onRefreshIntervalChange(event: Event): void {
+    const value = parseInt((event.target as HTMLSelectElement).value, 10);
+    this.refreshInterval = value;
+    this.refreshIntervalChange.emit(value);
+  }
 }