Refactor ProfileComponent and AuthService: remove unused imports, simplify isLoggedIn logic, and implement signal-based state management in NotificationsComponent

src/app/components/profile/profile.component.ts

@@ -1,6 +1,5 @@
 import { AngorCardComponent } from '@angor/components/card';
 import { AngorConfigService } from '@angor/services/config';
-import { AngorConfirmationService } from '@angor/services/confirmation';
 import { Clipboard } from '@angular/cdk/clipboard';
 import { TextFieldModule } from '@angular/cdk/text-field';
 import { CommonModule, NgClass } from '@angular/common';
@@ -149,7 +148,6 @@ export class ProfileComponent implements OnInit, OnDestroy {
         private _snackBar: MatSnackBar,
         private _dialog: MatDialog,
         private _angorConfigService: AngorConfigService,
-        private _angorConfirmationService: AngorConfirmationService,
         private _eventService: EventService,
         private _subscriptionService: SubscriptionService,
         private _clipboard: Clipboard,

src/app/core/auth/auth.guard.ts

@@ -1,15 +1,9 @@
 import { inject } from '@angular/core';
-import { Router } from '@angular/router';
 import { SignerService } from 'app/services/signer.service';
 
 export const authGuard = () => {
     const signerService = inject(SignerService);
-    const router = inject(Router);
 
-    if (signerService.getPublicKey() !== '') {
-        return true;
-    }
-
-    // Redirect to the login page
-    return router.parseUrl('/login');
+    // Allow access to the page
+    return true;
 };

src/app/layout/common/notifications/notifications.component.html

@@ -1,13 +1,13 @@
 <!-- Notifications toggle -->
 <button mat-icon-button (click)="openPanel()" #notificationsOrigin>
-    @if (unreadCount > 0) {
+    @if (unreadCount() > 0) {
         <span
             class="absolute left-0 right-0 top-0 flex h-3 items-center justify-center"
         >
             <span
                 class="ml-4 mt-2.5 flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full bg-teal-600 px-1 text-xs font-medium text-indigo-50"
             >
-                {{ unreadCount }}
+                {{ unreadCount() }}
             </span>
         </span>
     }
@@ -37,7 +37,7 @@
                     class="dark:text-white"
                     mat-icon-button
                     [matTooltip]="'Mark all as read'"
-                    [disabled]="unreadCount === 0"
+                    [disabled]="unreadCount() === 0"
                     (click)="markAllAsRead()"
                 >
                     <mat-icon
@@ -54,7 +54,7 @@
         >
             <!-- Notifications -->
             @for (
-                notification of notifications;
+                notification of notifications();
                 track trackByFn($index, notification)
             ) {
                 <div
@@ -96,41 +96,6 @@
                         </div>
                     }
 
-                    <!-- Actions -->
-                    <div class="relative my-5 ml-2 mr-6 flex flex-col">
-                        <!-- Indicator -->
-                        <button
-                            class="h-6 min-h-6 w-6"
-                            mat-icon-button
-                            (click)="toggleRead(notification)"
-                            [matTooltip]="
-                                notification.read
-                                    ? 'Mark as unread'
-                                    : 'Mark as read'
-                            "
-                        >
-                            <span
-                                class="h-2 w-2 rounded-full"
-                                [ngClass]="{
-                                    'bg-gray-400 dark:bg-gray-500 sm:opacity-0 sm:group-hover:opacity-100':
-                                        notification.read,
-                                    'bg-primary': !notification.read,
-                                }"
-                            ></span>
-                        </button>
-                        <!-- Remove -->
-                        <button
-                            class="h-6 min-h-6 w-6 sm:opacity-0 sm:group-hover:opacity-100"
-                            mat-icon-button
-                            (click)="deleteNotification(notification)"
-                            [matTooltip]="'Remove'"
-                        >
-                            <mat-icon
-                                class="icon-size-4"
-                                [svgIcon]="'heroicons_solid:x-mark'"
-                            ></mat-icon>
-                        </button>
-                    </div>
                 </div>
 
                 <!-- Notification content template -->
@@ -177,7 +142,7 @@
             }
 
             <!-- No notifications -->
-            @if (!notifications || !notifications.length) {
+            @if (!notifications() || !notifications().length) {
                 <div
                     class="flex flex-auto flex-col items-center justify-center px-8 py-12 sm:justify-start"
                 >

src/app/layout/common/notifications/notifications.component.ts

@@ -11,6 +11,8 @@ import {
     ViewChild,
     ViewContainerRef,
     ViewEncapsulation,
+    inject,
+    signal,
 } from '@angular/core';
 import { MatButton, MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
@@ -45,18 +47,16 @@ export class NotificationsComponent implements OnInit, OnDestroy {
     @ViewChild('notificationsPanel')
     private _notificationsPanel: TemplateRef<any>;
 
-    notifications: NostrNotification[] = [];
-    unreadCount: number = 0;
+    notifications = signal<NostrNotification[]>([]);
+    unreadCount = signal<number>(0);
     private _overlayRef: OverlayRef;
-    private _unsubscribeAll: Subject<any> = new Subject<any>();
+    private _unsubscribeAll = new Subject<any>();
 
-    constructor(
-        private _notificationService: NotificationService,
-        private _changeDetectorRef: ChangeDetectorRef,
-        private _overlay: Overlay,
-        private _viewContainerRef: ViewContainerRef,
-        private _signerService: SignerService
-    ) {}
+    private _notificationService = inject(NotificationService);
+    private _changeDetectorRef = inject(ChangeDetectorRef);
+    private _overlay = inject(Overlay);
+    private _viewContainerRef = inject(ViewContainerRef);
+    private _signerService = inject(SignerService);
 
     ngOnInit(): void {
         const pubkey = this._signerService.getPublicKey();
@@ -66,7 +66,7 @@ export class NotificationsComponent implements OnInit, OnDestroy {
                 .getNotificationObservable()
                 .pipe(takeUntil(this._unsubscribeAll))
                 .subscribe((notifications: NostrNotification[]) => {
-                    this.notifications = notifications;
+                    this.notifications.set(notifications);
                     this._changeDetectorRef.markForCheck();
                 });
 
@@ -74,7 +74,7 @@ export class NotificationsComponent implements OnInit, OnDestroy {
                 .getNotificationCount()
                 .pipe(takeUntil(this._unsubscribeAll))
                 .subscribe((count: number) => {
-                    this.unreadCount = count;
+                    this.unreadCount.set(count);
                     this._changeDetectorRef.markForCheck();
                 });
         });
@@ -111,11 +111,10 @@ export class NotificationsComponent implements OnInit, OnDestroy {
 
     markAllAsRead(): void {
         this._notificationService.markAllAsRead();
+        this.notifications.set([]); // Clear all notifications
+        this._changeDetectorRef.markForCheck(); // Trigger change detection
     }
 
-    toggleRead(notification: NostrNotification): void {
-        notification.read = !notification.read;
-    }
 
     trackByFn(index: number, item: NostrNotification): string {
         return item.id;

src/app/services/auth.service.ts

@@ -1,21 +1,47 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { SignerService } from './signer.service';
+import { AngorConfirmationService } from '@angor/services/confirmation';
 
 @Injectable({
     providedIn: 'root',
 })
 export class AuthService {
-    constructor(
-        private signerService: SignerService,
-        private router: Router
-    ) {}
+    private signerService = inject(SignerService);
+    private router = inject(Router);
 
-    isLoggedIn() {
-        if (this.signerService.getPublicKey()) {
-            return true;
-        }
-        this.router.navigate(['/login']);
-        return false;
+    isLoggedIn(): boolean {
+        return !!this.signerService.getPublicKey();
+    }
+
+    promptLogin(): void {
+        const angorConfirmationService = inject(AngorConfirmationService);
+        const dialogRef = angorConfirmationService.open({
+            title: 'Login Required',
+            message: 'You need to be logged in to perform this action. Would you like to login now?',
+            icon: {
+                show: true,
+                name: 'heroicons_solid:login',
+                color: 'primary',
+            },
+            actions: {
+                confirm: {
+                    show: true,
+                    label: 'Login',
+                    color: 'primary',
+                },
+                cancel: {
+                    show: true,
+                    label: 'Cancel',
+                },
+            },
+            dismissible: true,
+        });
+
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result === 'confirmed') {
+                this.router.navigate(['/login']);
+            }
+        });
     }
 }

src/app/services/notification.service.ts

@@ -173,7 +173,7 @@ export class NotificationService {
                 read: true,
             })
         );
-        this.notificationSubject.next(updatedNotifications);
+        this.notificationSubject.next([]); // Clear all notifications
         this.notificationCount.next(0);
         const currentTimestamp = Math.floor(Date.now() / 1000);
         this.saveNotificationData(0, currentTimestamp);