cleanup snapcast service and ad scroll down refresh to dashboard

src/app/pages/dashboard/dashboard.page.html

@@ -1,15 +1,25 @@
 <ion-header class="ion-no-border">
-  <ion-toolbar >
+  <ion-toolbar>
     <ion-title>Dashboard</ion-title>
     <!-- <ion-title *ngIf="(userProfile) as user">{{user.displayName}}s Home </ion-title> -->
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true" >
+<ion-content [fullscreen]="true">
+  <ion-refresher [pullFactor]="0.5" [pullMin]="100" [pullMax]="300" slot="fixed" (ionRefresh)="handleRefresh($event)">
+
+    <ion-refresher-content class="refresher" pullingIcon="chevron-down-outline" pullingText="Pull to refresh"
+      [refreshingText]="refreshingText">
+    </ion-refresher-content>
+  </ion-refresher>
+
   <div class="container">
     <ion-header collapse="condense">
-      <span class="header-note">{{today | date:"EEEE, d.MMMM"}}</span>
-      <ion-toolbar  class="ion-margin-top">
+      <div class="header-note">
+        <span>{{today | date:"EEEE, d.MMMM"}}</span>
+
+      </div>
+      <ion-toolbar class="ion-margin-top">
         <ion-title size="large"><span *ngIf="userPreeferenceUsername as name">{{name ? name+"s": 'Your'}}</span>
           Home</ion-title>
 

src/app/pages/dashboard/dashboard.page.scss

@@ -13,12 +13,14 @@
     text-transform: uppercase;
     font-weight: 400;
     font-size: 12px;
-    position: absolute;
-    top: -10px;
+    // position: ;
+    // top: -10px;
+    // left:0;
     z-index: 1000;
     margin: 0;
     margin-left: 18px;
-    margin-bottom: 16px;
+    margin-bottom: -12px;
+    line-height: 0;
   }
 
 
@@ -65,4 +67,5 @@
     color: var(--ion-color-medium);
     z-index: 2000;
 
-  }
+  }
+

src/app/pages/dashboard/dashboard.page.ts

@@ -1,5 +1,5 @@
 import { Component, HostListener, OnInit } from '@angular/core';
-import { ModalController } from '@ionic/angular';
+import { ModalController, RefresherCustomEvent } from '@ionic/angular';
 import { first, firstValueFrom, interval, Observable } from 'rxjs';
 import { Client, Group, ServerDetail, SnapCastServerStatusResponse, Stream } from 'src/app/model/snapcast.model';
 import { SnapcastService } from 'src/app/services/snapcast.service';
@@ -71,6 +71,8 @@ export class DashboardPage implements OnInit {
 
   speakerData: Speaker[] = [];
 
+  refreshingText: string = 'Refreshing... ';
+
 
 
   constructor(
@@ -242,6 +244,36 @@ export class DashboardPage implements OnInit {
     });
   }
 
+  handleRefresh(event: RefresherCustomEvent) {
+    this.refreshSeverState(event);
+
+  }
+
+  refreshSeverState(event: RefresherCustomEvent): void {
+    console.log('Refreshing server state...');
+    this.snapcastService.refreshState().subscribe({
+      next: () => {
+        console.log('Server state refreshed successfully');
+        const now = new Date();
+        setTimeout(() => {          this.refreshingText = 'Server state refreshed successfully at ' + now.toLocaleTimeString();
+        }, 500);
+        // this.refreshingText = 'Server state refreshed successfully at ' + now.toLocaleTimeString();
+        // event.target.complete();
+        setTimeout(() => {
+          event.target.complete();
+          this.refreshingText = 'Refreshing... ';
+        }, 1500);
+      },
+      error: (error) => {
+        console.error('Error refreshing server state:', error);
+        this.refreshingText = 'Error refreshing server state';
+        setTimeout(() => {
+          event.target.complete();
+        }, 1500);
+      }
+    });
+  }
+