Refactor code structure for improved readability and maintainability

ui/src/app/core/interceptors/auth.interceptor.ts

@@ -5,7 +5,7 @@ import {
   HttpHandlerFn,
   HttpErrorResponse,
 } from '@angular/common/http';
-import { catchError, switchMap, throwError } from 'rxjs';
+import { catchError, switchMap, throwError, from, Observable } from 'rxjs';
 import { AuthService } from '../services/auth.service';
 import { Router } from '@angular/router';
 
@@ -33,9 +33,9 @@ export const authInterceptor: HttpInterceptorFn = (
   return next(req).pipe(
     catchError((error: HttpErrorResponse) => {
       if (error.status === 401) {
-        // Try to refresh the token
-        return new Promise((resolve) => {
-          authService.refreshAccessToken().then((success) => {
+        // Try to refresh the token using from() to convert Promise to Observable
+        return from(authService.refreshAccessToken()).pipe(
+          switchMap((success) => {
             if (success) {
               // Retry the request with new token
               const newToken = authService.accessToken;
@@ -44,14 +44,14 @@ export const authInterceptor: HttpInterceptorFn = (
                   Authorization: `Bearer ${newToken}`,
                 },
               });
-              resolve(next(retryReq));
+              return next(retryReq);
             } else {
               // Redirect to login
               router.navigate(['/login']);
-              resolve(throwError(() => error));
+              return throwError(() => error);
             }
-          });
-        }).then((result) => result as ReturnType<HttpHandlerFn>);
+          })
+        );
       }
       return throwError(() => error);
     })

ui/src/app/features/tokens/tokens.component.ts

@@ -1,4 +1,5 @@
 import { Component, inject, signal, OnInit } from '@angular/core';
+import { NgClass } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ApiService, type IToken } from '../../core/services/api.service';
 import { ToastService } from '../../core/services/toast.service';
@@ -6,7 +7,7 @@ import { ToastService } from '../../core/services/toast.service';
 @Component({
   selector: 'app-tokens',
   standalone: true,
-  imports: [FormsModule],
+  imports: [NgClass, FormsModule],
   template: `
     <div class="p-6 max-w-4xl mx-auto">
       <div class="flex items-center justify-between mb-6">
@@ -105,10 +106,12 @@ import { ToastService } from '../../core/services/toast.service';
                 <label class="label block mb-1.5">Protocols</label>
                 <div class="flex flex-wrap gap-2">
                   @for (protocol of availableProtocols; track protocol) {
-                    <label class="flex items-center gap-2 px-3 py-1.5 rounded-md border border-gray-300 dark:border-gray-600 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
-                           [class.bg-primary-50]="newToken.protocols.includes(protocol)"
-                           [class.border-primary-300]="newToken.protocols.includes(protocol)"
-                           [class.dark:bg-primary-900/20]="newToken.protocols.includes(protocol)">
+                    <label
+                      class="flex items-center gap-2 px-3 py-1.5 rounded-md border cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
+                      [ngClass]="{
+                        'bg-primary-50 border-primary-300 dark:bg-primary-900/20': newToken.protocols.includes(protocol),
+                        'border-gray-300 dark:border-gray-600': !newToken.protocols.includes(protocol)
+                      }">
                       <input
                         type="checkbox"
                         [checked]="newToken.protocols.includes(protocol)"