feat: refactor settings literally just so I can have the select be disabled when it shouldn't be active

packages/frontend/src/app/components/post-action-buttons/post-action-buttons.component.ts

···
   }
 
   ngOnInit(): void {
-    this.buttonList = this.settingsService.values[this.settingKey()] as SettingListItem[]
+    this.buttonList = this.settingsService.values()[this.settingKey()] as SettingListItem[]
     this.bookmarked.set(this.fragment().bookmarkers.includes(this.myId))
   }
 

packages/frontend/src/app/components/post-actions/post-actions.component.ts

···
-import { Component, computed, input, OnChanges, Signal } from '@angular/core'
+import { Component, computed, input, OnChanges } from '@angular/core'
 import { ProcessedPost } from '../../interfaces/processed-post'
 import { MessageService } from '../../services/message.service'
 
···
 import { LoginService } from '../../services/login.service'
 
 import { ReportService } from '../../services/report.service'
-import { DeletePostService } from '../../services/delete-post.service'
 import { PostsService } from '../../services/posts.service'
 import { UtilsService } from '../../services/utils.service'
 import { EnvironmentService } from '../../services/environment.service'
-import { firstValueFrom } from 'rxjs'
 import { faBluesky } from '@fortawesome/free-brands-svg-icons'
 import { TranslateModule } from '@ngx-translate/core'
 import { SettingsService } from 'src/app/services/settings.service'
···
     if (!bskyUri) return ''
     const parts = bskyUri.split('/app.bsky.feed.post/')
     const userDid = parts[0].split('at://')[1]
-    return `https://${this.settingsService.values.atprotoLinkDestination || 'bsky.app'}/profile/${userDid}/post/${parts[1]}`
+    return `https://${this.settingsService.values().atprotoLinkDestination || 'bsky.app'}/profile/${userDid}/post/${parts[1]}`
   })
   externalUrl = computed<string>(() => (this.post().bskyUri ? this.bskyUrl() : this.post().remotePostId))
 

packages/frontend/src/app/components/post-fragment/post-fragment.component.ts

···
 
   async cwClick() {
     // Confirmation dialog when opening
-    if (!this.showSensitiveContent() && this.settingsService.values.confirmOpenCw) {
-      const annoyance = this.settingsService.values.confirmOpenCwAnnoyance
+    if (!this.showSensitiveContent() && this.settingsService.values().confirmOpenCw) {
+      const annoyance = this.settingsService.values().confirmOpenCwAnnoyance
       if (typeof annoyance !== 'string' && annoyance !== undefined) return
 
       const confirm = await this.simpleDialog.createConfirmDialog({

packages/frontend/src/app/components/setting-confetti/setting-confetti.component.html

···
         placeholder="1"
         type="number"
         min="0"
-        [value]="values.confettiMultiplier"
-        (input)="updateMultiplider($event)"
+        [value]="values().confettiMultiplier"
+        (input)="updateMultiplier($event)"
         spellcheck="false"
       />
     </mat-form-field>

packages/frontend/src/app/components/setting-confetti/setting-confetti.component.ts

···
 import { TranslateModule } from '@ngx-translate/core'
 import { KeyValueTypedPipe } from 'src/app/pipes/keyvaluetyped.pipe'
 import { ParticleService } from 'src/app/services/particle.service'
-import { SettingData, SettingsService, SettingValues } from 'src/app/services/settings.service'
+import { SettingData, SettingsService } from 'src/app/services/settings.service'
 import { SettingEntryComponent } from '../setting-entry/setting-entry.component'
 
 const confettiTypeVariants = ['like', 'rewoot', 'edit', 'bookmark'] as const
···
 })
 export class SettingConfettiComponent {
   data: SettingData
-  values: SettingValues
+  values
 
   confettiType: ConfettiType = 'like'
   confettiTypeData: Record<ConfettiType, string> = {
···
     this.values = settingsService.values
   }
 
-  updateMultiplider(event: Event) {
+  updateMultiplier(event: Event) {
     const target = event.target
     if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
-      this.values.confettiMultiplier = target.value
+      this.values().confettiMultiplier = target.value
       this.settingsService.settingsModified.set(true)
     }
   }

packages/frontend/src/app/components/setting-drop-list/setting-drop-list.component.ts

···
     this.dropListDataEntry = this.data[this.settingKey].dropListData
 
     this.defaultOrder = this.data[this.settingKey].default as SettingListItem[]
-    this.itemList = settingsService.values[this.settingKey] as SettingListItem[]
+    this.itemList = settingsService.values()[this.settingKey] as SettingListItem[]
 
     // Reset if no value or new values
     if (this.itemList.length === 0 || this.itemList.length !== this.defaultOrder.length) {
···
 
   syncList() {
     this.itemList = [...this.itemList] // update DOM hack
-    this.settingsService.values[this.settingKey] = this.itemList
+    this.settingsService.values()[this.settingKey] = this.itemList
+    this.settingsService.values.update((v) => v)
     this.settingsService.settingsModified.set(true)
   }
 

packages/frontend/src/app/components/setting-entry/setting-entry.component.html

···
 @let settingTranslationDescription = setting().translationDescriptionKey;
 @switch (settingData.type) {
   @case ('checkbox') {
-    @let settingValues = values[setting().key];
-    <div class="mb-2">
+    @let settingValues = values()[setting().key];
+    <div [class.has-dependency]="hasDependency()" [class.has-description]="settingTranslationDescription">
       <mat-checkbox
         [class.mat-checkbox-top]="settingTranslationDescription !== undefined"
         (change)="updateCheckbox(setting().key, $event)"
         [checked]="(settingValues ?? setting().default) === true"
+        [disabled]="isDisabled()"
         >{{ settingTranslation | translate }}
         @if (settingTranslationDescription) {
           <div class="setting-description">{{ settingTranslationDescription | translate }}</div>
···
   }
   @case ('select') {
     @if (settingData.variants) {
-      <mat-form-field class="block mb-3 w-full mat-form-field-no-padding">
+      <mat-form-field class="block mb-3 w-full mat-form-field-no-padding" [class.has-dependency]="hasDependency()">
         <mat-label>{{ settingTranslation | translate }}</mat-label>
-        <mat-select [(value)]="values[setting().key]" (selectionChange)="updateSelect(setting().key, $event)">
+        <mat-select
+          [(value)]="values()[setting().key]"
+          (selectionChange)="updateSelect(setting().key, $event)"
+          [disabled]="isDisabled()"
+        >
           @for (variant of settingData.variants | KeyValue; track $index) {
             <mat-option [value]="variant.key">{{ variant.value | translate }}</mat-option>
           }
···
     }
   }
   @case ('input') {
-    <div class="mb-3">
+    <div class="mb-3" [class.has-dependency]="hasDependency()">
       <mat-form-field class="w-full mat-form-field-no-padding">
         <mat-label>{{ settingTranslation | translate }}</mat-label>
         <input
           matNativeControl
-          [value]="values[setting().key]"
+          [value]="values()[setting().key]"
           (input)="updateInput(setting().key, $event)"
+          [disabled]="isDisabled()"
           spellcheck="false"
         />
       </mat-form-field>
···
     </div>
   }
   @case ('textarea') {
-    <div class="mb-3">
+    <div class="mb-3" [class.has-dependency]="hasDependency()">
       <mat-form-field class="w-full mat-form-field-no-padding">
         <mat-label>{{ settingTranslation | translate }}</mat-label>
         <textarea
           matNativeControl
-          [value]="values[setting().key]"
+          [value]="values()[setting().key]"
           (input)="updateInput(setting().key, $event)"
+          [disabled]="isDisabled()"
           spellcheck="false"
           cdkTextareaAutosize
           cdkAutosizeMinRows="5"

packages/frontend/src/app/components/setting-entry/setting-entry.component.scss

···
+.has-dependency {
+  margin-left: 0.75rem;
+  padding-left: 0.75rem;
+  border-left: 2px solid var(--mat-sys-outline-variant);
+}
+
+.has-description ::ng-deep label {
+  margin-block: 0.375rem;
+}

packages/frontend/src/app/components/setting-entry/setting-entry.component.ts

···
-import { Component, input, viewChildren } from '@angular/core'
+import { Component, computed, input, viewChildren } from '@angular/core'
 import { MatCheckboxChange, MatCheckboxModule } from '@angular/material/checkbox'
 import { MatInputModule } from '@angular/material/input'
 import { MatSelectChange, MatSelectModule } from '@angular/material/select'
 import { TranslateModule } from '@ngx-translate/core'
 import { KeyValueTypedPipe } from 'src/app/pipes/keyvaluetyped.pipe'
-import {
-  SettingData,
-  SettingDataEntry,
-  SettingKey,
-  SettingsService,
-  SettingValues
-} from 'src/app/services/settings.service'
+import { SettingData, SettingDataEntry, SettingKey, SettingsService } from 'src/app/services/settings.service'
 import { UserSelectorComponent } from '../user-selector/user-selector.component'
 
 @Component({
···
     KeyValueTypedPipe,
     UserSelectorComponent
   ],
-  templateUrl: './setting-entry.component.html'
+  templateUrl: './setting-entry.component.html',
+  styleUrl: './setting-entry.component.scss'
 })
 export class SettingEntryComponent {
   data: SettingData
-  values: SettingValues
+  values
   setting = input.required<SettingDataEntry>()
 
   matFormFieldElements = viewChildren('formSelect')
 
+  hasDependency = computed(() => this.setting().enableIfSetting !== undefined)
+  isDisabled = computed(() => {
+    this.settingsService.settingsModified()
+    const enablefunc = this.setting().enableIfSetting
+    if (enablefunc) {
+      return !enablefunc(this.values())
+    } else {
+      return false
+    }
+  })
+
   constructor(private settingsService: SettingsService) {
     this.data = settingsService.data
     this.values = settingsService.values
   }
 
   updateCheckbox(key: SettingKey, event: MatCheckboxChange) {
-    this.values[key] = event.checked
+    this.values()[key] = event.checked
+    this.values.update((v) => v)
     this.settingsService.settingsModified.set(true)
   }
 
   updateSelect(key: SettingKey, event: MatSelectChange) {
-    this.values[key] = event.value
+    this.values()[key] = event.value
+    this.values.update((v) => v)
     this.settingsService.settingsModified.set(true)
   }
 
   updateInput(key: SettingKey, event: Event) {
     const target = event.target
     if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
-      this.values[key] = target.value
+      this.values()[key] = target.value
+      this.values.update((v) => v)
       this.settingsService.settingsModified.set(true)
     }
   }
 
   updateUserInput(event: { remoteId: string; url: string }) {
-    this.values[this.setting().key] = event.remoteId
+    this.values()[this.setting().key] = event.remoteId
+    this.values.update((v) => v)
     this.settingsService.settingsModified.set(true)
   }
 }

packages/frontend/src/app/pages/settings/settings-loader/settings-loader.component.ts

···
 import { Component, Inject } from '@angular/core'
 import { TranslateModule } from '@ngx-translate/core'
 import { SettingEntryComponent } from 'src/app/components/setting-entry/setting-entry.component'
-import { GroupedSettingData, SettingData, SettingsService, SettingValues } from 'src/app/services/settings.service'
+import { GroupedSettingData, SettingData, SettingsService } from 'src/app/services/settings.service'
 import { SETTINGS_TOKEN } from '../settings.component'
 import { RouterModule } from '@angular/router'
 import { CdkPortalOutlet, Portal } from '@angular/cdk/portal'
···
 })
 export class SettingsLoaderComponent {
   data: SettingData
-  values: SettingValues
+  values
   group: GroupedSettingData | undefined
   portal: Portal<any> | undefined
 

packages/frontend/src/app/pages/settings/settings-profile/settings-profile.component.ts

···
 import { Component, computed, signal, Signal } from '@angular/core'
 import { TranslateModule } from '@ngx-translate/core'
 import { SettingEntryComponent } from 'src/app/components/setting-entry/setting-entry.component'
-import { FediAttachment, SettingData, SettingsService, SettingValues } from 'src/app/services/settings.service'
+import { FediAttachment, SettingData, SettingsService } from 'src/app/services/settings.service'
 import { MatCardModule } from '@angular/material/card'
 import { BlogDetails } from 'src/app/interfaces/blogDetails'
 import { LoginService } from 'src/app/services/login.service'
···
 })
 export class SettingsProfileComponent {
   data: SettingData
-  values: SettingValues
+  values
   fediAttachments: FediAttachment[]
 
   newHeaderImage = signal<string | null>(null)
···
 
   blog: Signal<BlogDetails | undefined>
   avatarUrl = computed<string>(() => {
-      if (this.newAvatarImage() != null) return this.newAvatarImage()!
-      return this.blog()
-        ? EnvironmentService.environment.externalCacheurl +
+    if (this.newAvatarImage() != null) return this.newAvatarImage()!
+    return this.blog()
+      ? EnvironmentService.environment.externalCacheurl +
           encodeURIComponent(EnvironmentService.environment.baseMediaUrl + this.blog()?.avatar)
-        : ''
-    }
-  )
+      : ''
+  })
   headerUrl = computed<string>(() => {
-      if (this.newHeaderImage() != null) return this.newHeaderImage()!
-      return this.blog()
-        ? EnvironmentService.environment.externalCacheurl +
+    if (this.newHeaderImage() != null) return this.newHeaderImage()!
+    return this.blog()
+      ? EnvironmentService.environment.externalCacheurl +
           encodeURIComponent(EnvironmentService.environment.baseMediaUrl + this.blog()?.headerImage)
-        : ''
-    }
-  )
+      : ''
+  })
 
   imageIcon = faImage
   addIcon = faPlus

packages/frontend/src/app/pages/settings/settings.component.ts

···
 import { TranslateModule } from '@ngx-translate/core'
 import { GroupedSettingData, SettingData, SettingsService, SettingValues } from 'src/app/services/settings.service'
 import { SettingsLoaderComponent } from './settings-loader/settings-loader.component'
-import { Title } from '@angular/platform-browser'
-import { GlobalData } from 'src/app/services/global-data.service'
 import { SimpleTitleService } from 'src/app/services/simple-title.service'
 
 export const SETTINGS_TOKEN = new InjectionToken('settings token')
···
 })
 export class SettingsComponent {
   data: SettingData
-  values: SettingValues = {}
+  values
   groups: GroupedSettingData[]
 
   // Portal related

packages/frontend/src/app/pages/view-blog/view-blog.component.ts

···
-import { Component, computed, OnDestroy, OnInit, signal, WritableSignal } from '@angular/core'
+import { Component, OnDestroy, OnInit, signal, WritableSignal } from '@angular/core'
 import { Meta } from '@angular/platform-browser'
-import { ActivatedRoute, Router } from '@angular/router'
+import { ActivatedRoute } from '@angular/router'
 import {
   faArrowUpRightFromSquare,
   faClockRotateLeft,
···
 import { LoginService } from 'src/app/services/login.service'
 import { ThemeService } from 'src/app/services/theme.service'
 
-import { MatDialog } from '@angular/material/dialog'
 import { BlogDetails } from 'src/app/interfaces/blogDetails'
 import { EnvironmentService } from 'src/app/services/environment.service'
 import { SimplifiedUser } from 'src/app/interfaces/simplified-user'
···
     if (!userHasCustomTheme || userIsSelf) return
 
     // Easiest case, they want custom CSS
-    if (this.settingService.values.useOtherUserCustomThemes) {
+    if (this.settingService.values().useOtherUserCustomThemes) {
       this.themeService.customCSS.set(blogDetails.id)
       return
     }
 
     // Check if we should ask
-    if (!this.settingService.values.askToUseOtherUserCustomThemes) return
+    if (!this.settingService.values().askToUseOtherUserCustomThemes) return
 
     const res = await this.simpleDialog.createCustomOptionDialog({
       title: 'dialog.blog.customThemeTitle',
···
     })
 
     if (res === 'confirm') {
-      this.settingService.values.useOtherUserCustomThemes = true
+      this.settingService.values().useOtherUserCustomThemes = true
       this.settingService.forceUpdateValue('useOtherUserCustomThemes')
       this.themeService.customCSS.set(blogDetails.id)
     }
     if (res === 'cancelRemember') {
-      this.settingService.values.askToUseOtherUserCustomThemes = false
+      this.settingService.values().askToUseOtherUserCustomThemes = false
       this.settingService.forceUpdateValue('askToUseOtherUserCustomThemes')
     }
   }

packages/frontend/src/app/services/notifications.service.ts

···
     this.asks.set(res.asks)
 
     // Check for any notification changes to play the audio
-    if (previousCount < this.totalNotifications() && this.settings.values.disableSounds !== true) {
+    if (previousCount < this.totalNotifications() && this.settings.values().disableSounds !== true) {
       this.audioService.playSound('notification')
     }
   }
···
         }
         const emoji = notification.emojiReactionId
           ? this.emojiMap.get(
-            petition.emojiRelations.postEmojiReactions.find((elem) => elem.id == notification.emojiReactionId)
-              ?.emojiId as string
-          )
+              petition.emojiRelations.postEmojiReactions.find((elem) => elem.id == notification.emojiReactionId)
+                ?.emojiId as string
+            )
           : undefined
         let notificationProcessed: UserNotifications = {
           type: notification.notificationType,
-          url: notification.notificationType === 'FOLLOW' || 'USERBITE' ? `/blog/${usr.url}` : `/post/${notification.postId}`,
+          url:
+            notification.notificationType === 'FOLLOW' || 'USERBITE'
+              ? `/blog/${usr.url}`
+              : `/post/${notification.postId}`,
           avatar: usr.avatar,
           userUrl: usr.url,
           userName: usr.name,
···
             ? emoji.name
             : notification.notificationType === 'EMOJIREACT'
               ? petition.emojiRelations.postEmojiReactions.find((elem) => elem.id == notification.emojiReactionId)
-                ?.content
+                  ?.content
               : undefined
         }
         return notificationProcessed

packages/frontend/src/app/services/particle.service.ts

···
     location?: { event?: MouseEvent; scroll?: { x: number; y: number } }
     config?: RecursivePartial<ConfettiOptions>
   }) {
-    if (this.settings.values.disableConfetti === true) return
+    if (this.settings.values().disableConfetti === true) return
 
     const defaultConfig: ConfettiOptions = {
       zIndex: 1000,
       scalar: 8,
-      flat: (this.settings.values.flatConfetti as boolean | undefined) ?? false
+      flat: (this.settings.values().flatConfetti as boolean | undefined) ?? false
     }
 
     // Attempt to place the confetti on the clicked location
···
         const confettiConfig = Object.assign(
           defaultConfig,
           {
-            particleCount: Math.floor(10 * Number(this.settings.values.confettiMultiplier ?? 1)),
+            particleCount: Math.floor(10 * Number(this.settings.values().confettiMultiplier ?? 1)),
             spread: 360,
             startVelocity: 20,
             origin: {
···
     const conf = Object.assign(
       defaultConfig,
       {
-        particleCount: Math.floor(10 * Number(this.settings.values.confettiMultiplier ?? 1)),
+        particleCount: Math.floor(10 * Number(this.settings.values().confettiMultiplier ?? 1)),
         spread: 60,
         startVelocity: 60
       },

packages/frontend/src/app/services/settings.service.ts

···
-import { computed, Injectable, Injector, signal } from '@angular/core'
+import { computed, Injectable, Injector, signal, WritableSignal } from '@angular/core'
 import { DashboardService } from './dashboard.service'
 import { JwtService } from './jwt.service'
 import {
···
   dropListData?: DropListData // For type 'list'
   convertFromStorage?: (stored: string) => SettingValueType
   convertToStorage?: (value: SettingValueType) => string
+  enableIfSetting?: (s: SettingValues) => boolean
 }
 
 // Data on each setting to generate form controls
···
       type: 'checkbox',
       default: false,
       convertFromStorage: (val) => val === '1',
-      convertToStorage: () => this.convertAsksTo()
+      convertToStorage: () => this.convertAsksTo(),
+      enableIfSetting: (s) => s.enableAsks === true
     },
     displayMentionsOfBlockedUsersFromOtherUsers: {
       key: 'displayMentionsOfBlockedUsersFromOtherUsers',
···
         [Annoyance.none]: 'settings.confirmOpenCwAnnoyanceOptions.none',
         [Annoyance.timeout]: 'settings.confirmOpenCwAnnoyanceOptions.timeout',
         [Annoyance.fifteen]: 'settings.confirmOpenCwAnnoyanceOptions.fifteen'
-      }
+      },
+      enableIfSetting: (s) => s.confirmOpenCw === true
     }
   }
   // Generates settings sidebar links and gives the settings-loader pages their data through values
···
         { type: 'header', value: 'settings.header.cwBehavior' },
         { type: 'key', value: 'disableCW' },
         { type: 'key', value: 'confirmOpenCw' },
-        { type: 'key', value: 'confirmOpenCwAnnoyance' },
+        {
+          type: 'key',
+          value: 'confirmOpenCwAnnoyance'
+        },
         { type: 'key', value: 'disableNSFWFilter' },
         { type: 'key', value: 'hideNoDescriptionMedia' },
         { type: 'key', value: 'disableForceAltText' }
···
       ]
     }
   ]
-  public values: SettingValues
+  public values: WritableSignal<SettingValues>
 
   public fediAttachments: FediAttachment[] = [{ name: '', value: '' }] // Only shown before load completes
   public avatar: File | undefined // Only set when updating
···
     private jwtService: JwtService
   ) {
     // Set defaults from local storage over global defaults
-    this.values = Object.assign(this.getDefaultSettings(), this.getLocalStorageValues())
+    // Uses an evil hack on the equal property to allow for "deep" checks (manually calling update) to notify dependents
+    // Svelte has this by default :(
+    this.values = signal(Object.assign(this.getDefaultSettings(), this.getLocalStorageValues()), { equal: () => false })
 
     // Load blog details
     const userBlog = this.jwtService.getTokenData()
     if (userBlog) {
       this.dashboardService.getBlogDetails(userBlog.url, true).then((blogDetails) => {
-        this.values.name = blogDetails.name
-        this.values.description = blogDetails.descriptionMarkdown
-        this.values.manuallyAcceptsFollows = blogDetails.manuallyAcceptsFollows
-        this.values.hideFollows = blogDetails.hideFollows
-        this.values.hideProfileNotLoggedIn = blogDetails.hideProfileNotLoggedIn
-        this.values.disableEmailNotifications = blogDetails.disableEmailNotifications
+        this.values().name = blogDetails.name
+        this.values().description = blogDetails.descriptionMarkdown
+        this.values().manuallyAcceptsFollows = blogDetails.manuallyAcceptsFollows
+        this.values().hideFollows = blogDetails.hideFollows
+        this.values().hideProfileNotLoggedIn = blogDetails.hideProfileNotLoggedIn
+        this.values().disableEmailNotifications = blogDetails.disableEmailNotifications
 
         const rawAttachments = blogDetails.publicOptions?.find(
           (elem) => elem.optionName === 'fediverse.public.attachment'
···
 
     // Update settings when logging in (and notify everyone)
     loginService.loggedIn.pipe(filter((logged) => logged)).subscribe(() => {
-      this.values = Object.assign(this.getDefaultSettings(), this.getLocalStorageValues())
+      this.values.set(Object.assign(this.getDefaultSettings(), this.getLocalStorageValues()))
       this.settingsLoadedFromLogin.next()
     })
 
···
     fromEvent(window, 'storage')
       .pipe(debounceTime(500))
       .subscribe(() => {
-        this.values = Object.assign(this.getDefaultSettings(), this.getLocalStorageValues())
+        this.values.set(Object.assign(this.getDefaultSettings(), this.getLocalStorageValues()))
       })
   }
 
···
     const payload = {
       avatar: this.avatar,
       headerImage: this.headerImage,
-      name: this.values.name,
-      description: this.values.description,
-      manuallyAcceptsFollows: this.values.manuallyAcceptsFollows,
-      hideFollows: this.values.hideFollows,
-      hideProfileNotLoggedIn: this.values.hideProfileNotLoggedIn,
-      disableEmailNotifications: this.values.disableEmailNotifications,
+      name: this.values().name,
+      description: this.values().description,
+      manuallyAcceptsFollows: this.values().manuallyAcceptsFollows,
+      hideFollows: this.values().hideFollows,
+      hideProfileNotLoggedIn: this.values().hideProfileNotLoggedIn,
+      disableEmailNotifications: this.values().disableEmailNotifications,
       options: JSON.stringify(options)
     }
 
···
   }
 
   private getSettingValueAsString(key: SettingKey): string {
-    const value = this.values[key]
+    const value = this.values()[key]
     if (value === undefined) return ''
     if (this.data[key].convertToStorage) {
       return this.data[key].convertToStorage(value)
···
     if (updateLocalStorage) {
       keyList.forEach((key) => {
         const localStorageKey = this.data[key].localStorageKey
-        const newValue = this.values[key]
+        const newValue = this.values()[key]
         if (localStorageKey && newValue !== undefined) {
           localStorage.setItem(localStorageKey, this.getSettingValueAsString(key))
         }
···
   }
 
   convertAsksTo(): string {
-    if (this.values.enableAsks && this.values.enableAnonymousAsks) {
+    if (this.values().enableAsks && this.values().enableAnonymousAsks) {
       return '1'
-    } else if (this.values.enableAsks) {
+    } else if (this.values().enableAsks) {
       return '2'
     } else {
       return '3'

packages/frontend/src/app/services/theme.service.ts

···
   }
 
   setup() {
-    const theme = this.settingService.values.theme
+    const theme = this.settingService.values().theme
     if (typeof theme === 'string' && isTheme(theme)) {
       this.setTheme(theme)
     }
 
-    const darkLightMode = this.settingService.values.lightDarkMode
+    const darkLightMode = this.settingService.values().lightDarkMode
     if (typeof darkLightMode === 'string' && isLightDarkMode(darkLightMode)) {
       this.setLightDarkMode(darkLightMode)
     }
 
-    const settingAdditionalStyleModes = this.settingService.values.additionalStyleModes
+    const settingAdditionalStyleModes = this.settingService.values().additionalStyleModes
     if (Array.isArray(settingAdditionalStyleModes) && isAdditionalStyleMode(settingAdditionalStyleModes)) {
       additionalStyleModeVariants.forEach((mode) => {
         const enabled = settingAdditionalStyleModes.includes(mode)
···
 
   public setTheme = async (theme: Theme, doNotSavePreference = false) => {
     this.theme.set(theme)
-    this.settingService.values.theme = theme
+    this.settingService.values().theme = theme
+    this.settingService.values.update((v) => v)
 
     // Forced lightDarkMode
     if (themeData[theme]?.compatibility === 'light') await this.setLightDarkMode('light')
···
 
   public setLightDarkMode = async (lightDarkMode: LightDarkMode, doNotSavePreference = false) => {
     this.lightDarkMode.set(lightDarkMode)
-    this.settingService.values.lightDarkMode = lightDarkMode
+    this.settingService.values().lightDarkMode = lightDarkMode
+    this.settingService.values.update((v) => v)
 
     document.documentElement.setAttribute('data-theme', lightDarkMode)
     this.settingService.forceUpdateValue('lightDarkMode', !doNotSavePreference)
···
       .filter(([_, enabled]) => enabled())
       .map(([val, _]) => val)
 
-    this.settingService.values.additionalStyleModes = modes
+    this.settingService.values().additionalStyleModes = modes
+    this.settingService.values.update((v) => v)
   }
 
   public async toggleAdditionalStyleMode(mode: AdditionalStyleMode, doNotSavePreference = false) {
···
     }
 
     // Someone else's CSS, check if we want to use it and if it exists
-    if (this.settingService.values.useOtherUserCustomThemes !== true) return
+    if (this.settingService.values().useOtherUserCustomThemes !== true) return
 
     const themeExists = await this.themeExists(this.customCSS())
     if (!themeExists) return