Chorehancement: update to Angular v22, 'zoneless' / 'reactive' (#13114)

src-ui/src/app/components/app-frame/app-frame.component.ts

@@ -6,7 +6,7 @@ import {
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
 import { NgClass } from '@angular/common'
-import { Component, HostListener, inject, OnInit } from '@angular/core'
+import { Component, HostListener, inject, OnInit, signal } from '@angular/core'
 import { ActivatedRoute, Router, RouterModule } from '@angular/router'
 import {
   NgbCollapseModule,
@@ -90,14 +90,10 @@ export class AppFrameComponent
   permissionsService = inject(PermissionsService)
   private djangoMessagesService = inject(DjangoMessagesService)
 
-  appRemoteVersion: AppRemoteVersion
-
-  isMenuCollapsed: boolean = true
-
-  slimSidebarAnimating: boolean = false
-
-  public mobileSearchHidden: boolean = false
-
+  readonly appRemoteVersion = signal<AppRemoteVersion>(null)
+  readonly isMenuCollapsed = signal(true)
+  readonly slimSidebarAnimating = signal(false)
+  readonly mobileSearchHidden = signal(false)
   private lastScrollY: number = 0
 
   constructor() {
@@ -147,7 +143,7 @@ export class AppFrameComponent
   }
 
   toggleSlimSidebar(): void {
-    this.slimSidebarAnimating = true
+    this.slimSidebarAnimating.set(true)
     const slimSidebarEnabled = !this.slimSidebarEnabled
     this.settingsService.set(SETTINGS_KEYS.SLIM_SIDEBAR, slimSidebarEnabled)
     if (slimSidebarEnabled) {
@@ -167,7 +163,7 @@ export class AppFrameComponent
         },
       })
     setTimeout(() => {
-      this.slimSidebarAnimating = false
+      this.slimSidebarAnimating.set(false)
     }, 200) // slightly longer than css animation for slim sidebar
   }
 
@@ -177,11 +173,25 @@ export class AppFrameComponent
     this.attributesSectionsCollapsed = !this.attributesSectionsCollapsed
   }
 
+  toggleMenuCollapsed(): void {
+    this.isMenuCollapsed.set(!this.isMenuCollapsed())
+  }
+
+  closeMobileSearch(): void {
+    this.mobileSearchHidden.set(false)
+  }
+
+  setMobileSearchHidden(hidden: boolean): void {
+    this.mobileSearchHidden.set(hidden)
+  }
+
   get versionString(): string {
+    this.settingsService.trackChanges()
     return `${environment.appTitle} v${this.settingsService.get(SETTINGS_KEYS.VERSION)}${environment.tag === 'prod' ? '' : ` #${environment.tag}`}`
   }
 
   get customAppTitle(): string {
+    this.settingsService.trackChanges()
     return this.settingsService.get(SETTINGS_KEYS.APP_TITLE)
   }
 
@@ -224,6 +234,7 @@ export class AppFrameComponent
   }
 
   get slimSidebarEnabled(): boolean {
+    this.settingsService.trackChanges()
     return this.settingsService.get(SETTINGS_KEYS.SLIM_SIDEBAR)
   }
 
@@ -243,6 +254,7 @@ export class AppFrameComponent
   }
 
   get attributesSectionsCollapsed(): boolean {
+    this.settingsService.trackChanges()
     return this.settingsService
       .get(SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED)
       ?.includes(CollapsibleSection.ATTRIBUTES)
@@ -268,13 +280,14 @@ export class AppFrameComponent
   }
 
   get aiEnabled(): boolean {
+    this.settingsService.trackChanges()
     return this.settingsService.get(SETTINGS_KEYS.AI_ENABLED)
   }
 
   @HostListener('window:resize')
   onWindowResize(): void {
     if (!this.isMobileViewport()) {
-      this.mobileSearchHidden = false
+      this.mobileSearchHidden.set(false)
     }
   }
 
@@ -282,8 +295,8 @@ export class AppFrameComponent
   onWindowScroll(): void {
     const currentScrollY = window.scrollY
 
-    if (!this.isMobileViewport() || this.isMenuCollapsed === false) {
-      this.mobileSearchHidden = false
+    if (!this.isMobileViewport() || this.isMenuCollapsed() === false) {
+      this.mobileSearchHidden.set(false)
       this.lastScrollY = currentScrollY
       return
     }
@@ -291,9 +304,9 @@ export class AppFrameComponent
     const delta = currentScrollY - this.lastScrollY
 
     if (currentScrollY <= 0 || delta < -SCROLL_THRESHOLD) {
-      this.mobileSearchHidden = false
+      this.mobileSearchHidden.set(false)
     } else if (currentScrollY > SCROLL_THRESHOLD && delta > SCROLL_THRESHOLD) {
-      this.mobileSearchHidden = true
+      this.mobileSearchHidden.set(true)
     }
 
     this.lastScrollY = currentScrollY
@@ -304,7 +317,7 @@ export class AppFrameComponent
   }
 
   closeMenu() {
-    this.isMenuCollapsed = true
+    this.isMenuCollapsed.set(true)
   }
 
   editProfile() {
@@ -367,11 +380,11 @@ export class AppFrameComponent
   }
 
   onDragStart(event: CdkDragStart) {
-    this.settingsService.globalDropzoneEnabled = false
+    this.settingsService.globalDropzoneEnabled.set(false)
   }
 
   onDragEnd(event: CdkDragEnd) {
-    this.settingsService.globalDropzoneEnabled = true
+    this.settingsService.globalDropzoneEnabled.set(true)
   }
 
   onDrop(event: CdkDragDrop<SavedView[]>) {
@@ -392,7 +405,7 @@ export class AppFrameComponent
     this.remoteVersionService
       .checkForUpdates()
       .subscribe((appRemoteVersion: AppRemoteVersion) => {
-        this.appRemoteVersion = appRemoteVersion
+        this.appRemoteVersion.set(appRemoteVersion)
       })
   }
 
@@ -419,9 +432,10 @@ export class AppFrameComponent
   }
 
   get showSidebarCounts(): boolean {
+    this.settingsService.trackChanges()
     return (
       this.settingsService.get(SETTINGS_KEYS.SIDEBAR_VIEWS_SHOW_COUNT) &&
-      !this.settingsService.organizingSidebarSavedViews
+      !this.settingsService.organizingSidebarSavedViews()
     )
   }
 }