fontastic 1.3.1 → 1.4.0

package/src/app/core/services/presentation/presentation.service.ts

@@ -317,7 +317,12 @@ export class PresentationService {
   // --- Scan Progress (MessageChannelMain) ---
 
   private initScanProgress() {
-    this.electronService.ipcRenderer.on(ChannelType.IPC_SCAN_PROGRESS_PORT, (event: any) => {
+    // The preload script forwards the MessagePort from the main process into
+    // the isolated world via window.postMessage (ports cannot cross the
+    // context bridge directly).
+    window.addEventListener('message', (event: MessageEvent) => {
+      if (event.source !== window || event.data?.type !== ChannelType.IPC_SCAN_PROGRESS_PORT) return;
+
       const port = event.ports[0];
       if (!port) return;
 
@@ -325,7 +330,9 @@ export class PresentationService {
         this.scanProgress.set(msgEvent.data);
       };
 
-      port.onclose = () => {
+      // `close` fires when the main process closes its end of the channel.
+      // (Not yet in the TS DOM lib, but supported since Chromium 126.)
+      (port as MessagePort & { onclose: (() => void) | null }).onclose = () => {
         this.scanProgress.set(null);
       };
 

package/src/app/home/home.component.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { HomeComponent } from './home.component';
-import { TranslateModule } from '@ngx-translate/core';
+import { provideTranslateService } from '@ngx-translate/core';
 import { provideRouter } from '@angular/router';
 
 describe('HomeComponent', () => {
@@ -11,8 +11,8 @@ describe('HomeComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [],
-      imports: [HomeComponent, TranslateModule.forRoot()],
-      providers: [provideRouter([])],
+      imports: [HomeComponent],
+      providers: [provideRouter([]), provideTranslateService()],
     }).compileComponents();
 
     fixture = TestBed.createComponent(HomeComponent);

package/src/app/home/home.component.ts

@@ -1,15 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   standalone: true,
-  imports: [RouterLink, TranslateModule],
+  imports: [RouterLink, TranslatePipe],
 })
-export class HomeComponent implements OnInit {
-  ngOnInit(): void {
-    console.log('HomeComponent INIT');
-  }
-}
+export class HomeComponent {}

package/src/app/layout/footer/footer.component.ts

@@ -18,12 +18,12 @@ export class FooterComponent {
   readonly nodeVersion = signal('');
 
   constructor() {
-    if (this.electron.isElectron) {
-      const versions = (window as any).process.versions;
-      this.electronVersion.set(versions.electron ?? '');
-      this.chromeVersion.set(versions.chrome ?? '');
-      this.nodeVersion.set(versions.node ?? '');
-      this.electron.ipcRenderer.invoke('app:get-version').then((v: string) => this.appVersion.set(v));
+    const bridge = this.electron.bridge;
+    if (bridge) {
+      this.electronVersion.set(bridge.versions.electron);
+      this.chromeVersion.set(bridge.versions.chrome);
+      this.nodeVersion.set(bridge.versions.node);
+      bridge.invoke<string>('app:get-version').then((v) => this.appVersion.set(v));
     }
   }
 }

package/src/app/shared/components/index.ts

@@ -3,7 +3,6 @@ export * from './context-menu/context-menu.component';
 export * from './page-not-found/page-not-found.component';
 export * from './panel/panel.component';
 export * from './datagrid/datagrid.component';
-export * from './prompt-dialog/prompt-dialog.component';
 export * from './rule-builder/rule-builder.component';
 export * from './toolbar/toolbar.component';
 export * from './glyphs/glyphs.component';

package/src/app/shared/components/page-not-found/page-not-found.component.ts

@@ -1,14 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-page-not-found',
   templateUrl: './page-not-found.component.html',
   standalone: true,
 })
-export class PageNotFoundComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit(): void {
-    console.log('PageNotFoundComponent INIT');
-  }
-}
+export class PageNotFoundComponent {}

package/src/app/shared/components/preview/preview.component.html

@@ -6,6 +6,7 @@
         class="pb-3 cursor-pointer transition-colors rounded-sm"
         [style.border-color]="'var(--border-subtle)'"
         [id]="'preview-store-' + store.id"
+        [appLazyFont]="store"
         [style.background-color]="db.storeId() === store.id ? 'var(--selected-bg)' : 'transparent'"
         (click)="selectStore(store.id)"
       >

package/src/app/shared/components/preview/preview.component.ts

@@ -1,11 +1,12 @@
-import { Component, inject, effect } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { DatabaseService, MessageService, PresentationService } from '../../../core/services';
 import { ScrollResetDirective } from '../../directives/scroll-reset/scroll-reset.directive';
+import { LazyFontDirective } from '../../directives/lazy-font/lazy-font.directive';
 
 @Component({
   selector: 'app-preview',
   standalone: true,
-  imports: [ScrollResetDirective],
+  imports: [ScrollResetDirective, LazyFontDirective],
   templateUrl: './preview.component.html',
 })
 export class PreviewComponent {
@@ -13,17 +14,6 @@ export class PreviewComponent {
   readonly presentation = inject(PresentationService);
   private messageService = inject(MessageService);
 
-  private registeredFonts = new Set<string>();
-
-  constructor() {
-    effect(() => {
-      const stores = this.db.stores();
-      if (stores) {
-        stores.forEach((store) => this.registerFont(store));
-      }
-    });
-  }
-
   selectStore(id: number) {
     this.db.storeId.set(id);
     document.getElementById('grid-store-' + id)?.scrollIntoView({ behavior: 'smooth', block: 'center' });
@@ -42,22 +32,4 @@ export class PreviewComponent {
       this.messageService.openPath(store.file_path);
     }
   }
-
-  private registerFont(store: any) {
-    const key = `${store.id}-${store.file_path}`;
-    if (this.registeredFonts.has(key)) return;
-
-    const url = `font://${store.file_path}`;
-    const fontFace = new FontFace(store.full_name || store.font_family, `url('${url}')`);
-
-    fontFace
-      .load()
-      .then((loaded) => {
-        (document as any).fonts.add(loaded);
-        this.registeredFonts.add(key);
-      })
-      .catch((err) => {
-        console.warn(`Failed to load font: ${store.file_name}`, err);
-      });
-  }
 }

package/src/app/shared/components/rule-builder/rule-builder.component.html

@@ -84,12 +84,12 @@
           Add Rule
         </button>
         <div class="flex items-center gap-2">
-          @if (previewCount !== null) {
-            <span class="text-xs opacity-70">{{ previewCount }} {{ previewCount === 1 ? 'font' : 'fonts' }} matched</span>
+          @if (previewCount() !== null) {
+            <span class="text-xs opacity-70">{{ previewCount() }} {{ previewCount() === 1 ? 'font' : 'fonts' }} matched</span>
           }
-          <button class="btn btn-sm btn-default" (click)="preview()" [disabled]="previewing">
+          <button class="btn btn-sm btn-default" (click)="preview()" [disabled]="previewing()">
             <span class="material-symbols-outlined" style="font-size: 16px; vertical-align: middle">search</span>
-            {{ previewing ? 'Checking...' : 'Preview' }}
+            {{ previewing() ? 'Checking...' : 'Preview' }}
           </button>
         </div>
       </div>

package/src/app/shared/components/rule-builder/rule-builder.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, OnInit, inject } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnInit, inject, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ModalBackdropDirective } from '../../directives/modal-backdrop/modal-backdrop.directive';
 import { DatabaseService } from '../../../core/services/database/database.service';
@@ -81,8 +81,8 @@ export class RuleBuilderComponent implements OnInit {
   title = '';
   matchType: string = 'AND';
   rules: SmartCollectionRule[] = [];
-  previewCount: number | null = null;
-  previewing = false;
+  readonly previewCount = signal<number | null>(null);
+  readonly previewing = signal(false);
 
   readonly fieldOptions = FIELD_OPTIONS;
 
@@ -121,32 +121,32 @@ export class RuleBuilderComponent implements OnInit {
     } else {
       rule.value = '';
     }
-    this.previewCount = null;
+    this.previewCount.set(null);
   }
 
   addRule(): void {
     this.rules.push({ field: 'font_family', operator: 'contains', value: '' });
-    this.previewCount = null;
+    this.previewCount.set(null);
   }
 
   removeRule(index: number): void {
     this.rules.splice(index, 1);
-    this.previewCount = null;
+    this.previewCount.set(null);
   }
 
   preview(): void {
-    if (this.rules.length === 0 || this.previewing) return;
-    this.previewing = true;
-    this.previewCount = null;
+    if (this.rules.length === 0 || this.previewing()) return;
+    this.previewing.set(true);
+    this.previewCount.set(null);
     this.db
       .smartCollectionPreview(this.rules, this.matchType)
       .then((count) => {
-        this.previewCount = count;
-        this.previewing = false;
+        this.previewCount.set(count);
+        this.previewing.set(false);
       })
       .catch(() => {
-        this.previewCount = null;
-        this.previewing = false;
+        this.previewCount.set(null);
+        this.previewing.set(false);
       });
   }
 

package/src/app/shared/components/waterfall/waterfall.component.ts

@@ -72,7 +72,7 @@ export class WaterfallComponent {
 
   private buildLowScale(ratio: number, baseMultiplier: number, length: number): ScaleItem[] {
     let baseSize = 1;
-    let result = 1;
+    let result: number;
     const items: ScaleItem[] = [];
 
     for (let i = 0; i < length; i++) {

package/src/app/shared/directives/index.ts

@@ -1,7 +1,7 @@
 export * from './autofocus/autofocus.directive';
 export * from './disabled-opacity/disabled-opacity.directive';
 export * from './hover-highlight/hover-highlight.directive';
+export * from './lazy-font/lazy-font.directive';
 export * from './modal-backdrop/modal-backdrop.directive';
 export * from './scroll-reset/scroll-reset.directive';
 export * from './stop-propagation/stop-propagation.directive';
-export * from './webview/webview.directive';

package/src/app/shared/directives/lazy-font/lazy-font.directive.ts

@@ -0,0 +1,23 @@
+import { Directive, ElementRef, OnDestroy, OnInit, inject, input } from '@angular/core';
+import { FontLoaderService } from '../../../core/services/font-loader/font-loader.service';
+import type { Store } from '@main/database/entity/Store.schema';
+
+/** Loads the given store's font file when the host element nears the viewport. */
+@Directive({
+  selector: '[appLazyFont]',
+  standalone: true,
+})
+export class LazyFontDirective implements OnInit, OnDestroy {
+  private el = inject<ElementRef<HTMLElement>>(ElementRef);
+  private fontLoader = inject(FontLoaderService);
+
+  readonly appLazyFont = input.required<Store>();
+
+  ngOnInit() {
+    this.fontLoader.observe(this.el.nativeElement, this.appLazyFont());
+  }
+
+  ngOnDestroy() {
+    this.fontLoader.unobserve(this.el.nativeElement);
+  }
+}

package/src/app/shared/shared.module.ts

@@ -1,13 +1,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 
 import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [],
-  imports: [CommonModule, TranslateModule, FormsModule],
-  exports: [TranslateModule, FormsModule],
+  imports: [CommonModule, TranslatePipe, FormsModule],
+  exports: [TranslatePipe, FormsModule],
 })
 export class SharedModule {}

package/src/main.ts

@@ -1,4 +1,4 @@
-import { enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { enableProdMode, provideZonelessChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { importProvidersFrom } from '@angular/core';
@@ -24,7 +24,7 @@ if (APP_CONFIG.production) {
 
 bootstrapApplication(AppComponent, {
   providers: [
-    provideZoneChangeDetection(),
+    provideZonelessChangeDetection(),
     provideHttpClient(withInterceptorsFromDi()),
     provideTranslateService({
       loader: provideTranslateHttpLoader({

package/tsconfig.serve.json

@@ -7,21 +7,9 @@
     "experimentalDecorators": true,
     "module": "commonjs",
     "target": "es2015",
-    "types": [
-      "node"
-    ],
-    "lib": [
-      "es2017",
-      "es2016",
-      "es2015",
-      "dom"
-    ]
+    "types": ["node"],
+    "lib": ["es2017", "es2016", "es2015", "dom"]
   },
-  "files": [
-    "app/main.ts"
-  ],
-  "exclude": [
-    "node_modules",
-    "**/*.spec.ts"
-  ]
+  "files": ["app/main.ts", "app/preload.ts"],
+  "exclude": ["node_modules", "**/*.spec.ts"]
 }

package/app/helpers/command.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.prompt = exports.execute = void 0;
-const child_process_1 = require("child_process");
-const sudo = require('sudo-prompt');
-const execute = (cmd, options = {}) => {
-    return new Promise((resolve, reject) => {
-        (0, child_process_1.exec)(cmd, options, (err, stdout, stderr) => {
-            if (err) {
-                return reject(err);
-            }
-            return resolve({ stdout, stderr });
-        });
-    });
-};
-exports.execute = execute;
-const prompt = (cmd, options = {}) => {
-    return new Promise((resolve, reject) => {
-        sudo.exec(cmd, options, (err, stdout, stderr) => {
-            if (err) {
-                return reject(err);
-            }
-            return resolve({ stdout, stderr });
-        });
-    });
-};
-exports.prompt = prompt;
-//# sourceMappingURL=command.js.map

package/app/helpers/command.ts

@@ -1,20 +0,0 @@
-import { exec } from 'child_process';
-const sudo = require('sudo-prompt');
-
-export const execute = (cmd: string, options = {}) => {
-  return new Promise((resolve, reject) => {
-    exec(cmd, options, (err: any, stdout: any, stderr: any) => {
-      if (err) { return reject(err); }
-      return resolve({ stdout, stderr });
-    });
-  });
-}
-
-export const prompt = (cmd: string, options = {}) => {
-  return new Promise((resolve, reject) => {
-    sudo.exec(cmd, options, (err: any, stdout: any, stderr: any) => {
-      if (err) { return reject(err); }
-      return resolve({ stdout, stderr });
-    });
-  });
-}

package/app/helpers/random.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.randNumber = void 0;
-exports.randString = randString;
-function randString(len = 7) {
-    const list = "ABCDEFGHIJKLMNPQRSTUVWXYZ123456789";
-    let res = "";
-    for (let i = 0; i < len; i++) {
-        let rnd = Math.floor(Math.random() * list.length);
-        res = res + list.charAt(rnd);
-    }
-    return res;
-}
-const randNumber = (n) => [...Array(n)].map(_ => Math.random() * 10 | 0).join('');
-exports.randNumber = randNumber;
-//# sourceMappingURL=random.js.map

package/app/helpers/random.ts

@@ -1,12 +0,0 @@
-
-export function randString(len: number = 7) {
-  const list = "ABCDEFGHIJKLMNPQRSTUVWXYZ123456789";
-  let res = "";
-  for (let i = 0; i < len; i++) {
-    let rnd = Math.floor(Math.random() * list.length);
-    res = res + list.charAt(rnd);
-  }
-  return res;
-}
-
-export const randNumber = (n: number) => [...Array(n)].map(_ => Math.random() * 10 | 0).join('');

package/src/app/shared/components/prompt-dialog/prompt-dialog.component.html

@@ -1,36 +0,0 @@
-<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" appModalBackdrop (backdropClick)="cancel()">
-  <div class="card mb-0 w-[480px]" style="box-shadow: var(--context-shadow)">
-    <div class="card-header">
-      <div class="card-title">
-        <h3>{{ title }}</h3>
-      </div>
-      <div class="card-tools"></div>
-    </div>
-    <div class="card-body">
-      <div class="mb-4">
-        <label class="form-label" for="promptInput">Name</label>
-        <input
-          #promptInput
-          type="text"
-          class="form-input w-full"
-          id="promptInput"
-          [placeholder]="placeholder"
-          [(ngModel)]="value"
-          (keyup.enter)="confirm()"
-          (keyup.escape)="cancel()"
-        />
-      </div>
-    </div>
-    <div class="card-footer">
-      <div></div>
-      <div class="card-tools">
-        <button class="btn btn-sm btn-default" (click)="cancel()">
-          {{ cancelText }}
-        </button>
-        <button class="btn btn-sm btn-theme" (click)="confirm()">
-          {{ confirmText }}
-        </button>
-      </div>
-    </div>
-  </div>
-</div>

package/src/app/shared/components/prompt-dialog/prompt-dialog.component.ts

@@ -1,40 +0,0 @@
-import { Component, Input, Output, EventEmitter, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { ModalBackdropDirective } from '../../directives/modal-backdrop/modal-backdrop.directive';
-
-@Component({
-  selector: 'app-prompt-dialog',
-  standalone: true,
-  imports: [FormsModule, ModalBackdropDirective],
-  templateUrl: './prompt-dialog.component.html',
-})
-export class PromptDialogComponent implements AfterViewInit {
-  @Input() title = 'Prompt';
-  @Input() placeholder = '';
-  @Input() confirmText = 'Confirm';
-  @Input() cancelText = 'Cancel';
-
-  @Output() confirmed = new EventEmitter<string>();
-  @Output() cancelled = new EventEmitter<void>();
-
-  @ViewChild('promptInput') promptInput!: ElementRef<HTMLInputElement>;
-
-  value = '';
-
-  ngAfterViewInit(): void {
-    this.promptInput.nativeElement.focus();
-  }
-
-  confirm(): void {
-    const trimmed = this.value.trim();
-    if (trimmed) {
-      this.confirmed.emit(trimmed);
-      this.value = '';
-    }
-  }
-
-  cancel(): void {
-    this.value = '';
-    this.cancelled.emit();
-  }
-}

package/src/app/shared/directives/webview/webview.directive.spec.ts

@@ -1,8 +0,0 @@
-import { WebviewDirective } from './webview.directive';
-
-describe('WebviewDirective', () => {
-  it('should create an instance', () => {
-    const directive = new WebviewDirective();
-    expect(directive).toBeTruthy();
-  });
-});

package/src/app/shared/directives/webview/webview.directive.ts

@@ -1,9 +0,0 @@
-import { Directive } from '@angular/core';
-
-@Directive({
-  selector: 'webview',
-  standalone: true,
-})
-export class WebviewDirective {
-  constructor() {}
-}