Add access control rework

toju-app/src/app/domains/theme/feature/settings/theme-grid-editor.component.ts

@@ -132,4 +132,4 @@ export class ThemeGridEditorComponent {
   private clamp(value: number, minimum: number, maximum: number): number {
     return Math.min(Math.max(value, minimum), maximum);
   }
-}
+}

toju-app/src/app/domains/theme/feature/settings/theme-json-code-editor.component.ts

@@ -169,6 +169,7 @@ export class ThemeJsonCodeEditorComponent implements OnDestroy {
           insert: nextValue
         }
       });
+
       this.isApplyingExternalValue = false;
     });
 
@@ -203,6 +204,7 @@ export class ThemeJsonCodeEditorComponent implements OnDestroy {
       selection: EditorSelection.range(selectionStart, selectionEnd),
       effects: EditorView.scrollIntoView(selectionStart, { y: 'center' })
     });
+
     this.editorView.focus();
   }
 
@@ -242,4 +244,4 @@ export class ThemeJsonCodeEditorComponent implements OnDestroy {
       });
     });
   }
-}
+}

toju-app/src/app/domains/theme/feature/settings/theme-settings.component.ts

@@ -64,7 +64,7 @@ export class ThemeSettingsComponent {
   readonly animationKeys = this.theme.knownAnimationClasses;
   readonly layoutContainers = this.layoutSync.containers();
   readonly themeEntries = this.registry.entries();
-  readonly workspaceTabs: ReadonlyArray<{ key: ThemeStudioWorkspace; label: string; description: string }> = [
+  readonly workspaceTabs: readonly { key: ThemeStudioWorkspace; label: string; description: string }[] = [
     {
       key: 'editor',
       label: 'JSON Editor',
@@ -129,7 +129,8 @@ export class ThemeSettingsComponent {
     return this.themeEntries.filter((entry) => entry.pickerVisible || entry.layoutEditable);
   });
   readonly filteredEntries = computed(() => {
-    const query = this.explorerQuery().trim().toLowerCase();
+    const query = this.explorerQuery().trim()
+      .toLowerCase();
 
     if (!query) {
       return this.mountedEntries();
@@ -470,4 +471,4 @@ export class ThemeSettingsComponent {
 
     return text.indexOf(`"${key}"`, sectionIndex);
   }
-}
+}

toju-app/src/app/domains/theme/feature/theme-node.directive.ts

@@ -4,7 +4,8 @@ import {
   HostListener,
   effect,
   inject,
-  input
+  input,
+  OnDestroy
 } from '@angular/core';
 
 import { ExternalLinkService } from '../../../core/platform';
@@ -24,7 +25,7 @@ function looksLikeImageReference(value: string): boolean {
   selector: '[appThemeNode]',
   standalone: true
 })
-export class ThemeNodeDirective {
+export class ThemeNodeDirective implements OnDestroy {
   readonly themeKey = input.required<string>({ alias: 'appThemeNode' });
 
   private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
@@ -245,4 +246,4 @@ export class ThemeNodeDirective {
     iconTarget.style.backgroundImage = 'none';
     iconTarget.textContent = '';
   }
-}
+}

toju-app/src/app/domains/theme/feature/theme-picker-overlay.component.ts

@@ -55,4 +55,4 @@ export class ThemePickerOverlayComponent {
   cancel(): void {
     this.picker.cancel();
   }
-}
+}