fontastic 1.1.0 → 1.3.0

package/app/types/index.ts

@@ -8,3 +8,6 @@ export * from './SystemStats';
 export * from './SystemConfig';
 export * from './ImportOptions';
 export * from './SmartCollection';
+export * from './NativeThemeState';
+export * from './SystemPreferencesState';
+export * from './ScanProgress';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontastic",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Fontastic is an Electron-based font management and cataloging application built for organizing, browsing, and inspecting font libraries.",
   "homepage": "https://github.com/tomshaw/fontastic",
   "private": false,
@@ -24,7 +24,7 @@
   ],
   "main": "app/main.js",
   "scripts": {
-    "postinstall": "electron-builder install-app-deps",
+    "postinstall": "electron-builder install-app-deps && node scripts/patch-electron-plist.js",
     "ng": "ng",
     "start": "npm-run-all -p electron:serve ng:serve",
     "ng:serve": "ng serve -c dev -o",

package/release-please-config.json

@@ -0,0 +1,20 @@
+{
+  "last-release-sha": "c7f3f9afba466a150f90e374f8a401daf1a56d11",
+  "packages": {
+    ".": {
+      "release-type": "node",
+      "extra-files": ["app/package.json"],
+      "changelog-sections": [
+        { "type": "feat", "section": "🎉 Features", "hidden": false },
+        { "type": "fix", "section": "🛠️ Fixes", "hidden": false },
+        { "type": "docs", "section": "📄 Documentation", "hidden": false },
+        { "type": "perf", "section": "⚡ Performance", "hidden": false },
+        { "type": "refactor", "section": "🏗️ Refactor", "hidden": false },
+        { "type": "chore", "section": "♻️ Chores", "hidden": true },
+        { "type": "test", "section": "♻️ Chores", "hidden": true },
+        { "type": "build", "section": "⚙️ Automation", "hidden": true },
+        { "type": "ci", "section": "⚙️ Automation", "hidden": true }
+      ]
+    }
+  }
+}

package/scripts/patch-electron-plist.js

@@ -0,0 +1,41 @@
+const { execSync } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+
+if (process.platform !== 'darwin') {
+  process.exit(0);
+}
+
+const electronAppDir = path.join(
+  __dirname,
+  '..',
+  'node_modules',
+  'electron',
+  'dist',
+  'Electron.app'
+);
+
+const plist = path.join(electronAppDir, 'Contents', 'Info.plist');
+
+if (!fs.existsSync(plist)) {
+  process.exit(0);
+}
+
+const pkg = require(path.join(__dirname, '..', 'package.json'));
+const appName = 'Fontastic';
+const appVersion = pkg.version;
+
+execSync(`/usr/libexec/PlistBuddy -c "Set :CFBundleName ${appName}" "${plist}"`);
+execSync(`/usr/libexec/PlistBuddy -c "Set :CFBundleDisplayName ${appName}" "${plist}"`);
+execSync(`/usr/libexec/PlistBuddy -c "Set :CFBundleShortVersionString ${appVersion}" "${plist}"`);
+
+// Copy app icon into the Electron.app bundle
+const srcIcon = path.join(__dirname, '..', 'src', 'assets', 'icons', 'favicon.icns');
+const destIcon = path.join(electronAppDir, 'Contents', 'Resources', 'electron.icns');
+
+if (fs.existsSync(srcIcon)) {
+  fs.copyFileSync(srcIcon, destIcon);
+  console.log('Copied app icon into Electron.app bundle');
+}
+
+console.log(`Patched Electron.app plist: name="${appName}", version="${appVersion}"`);

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

@@ -371,6 +371,12 @@ export class DatabaseService {
     );
   }
 
+  smartCollectionPreview(rules: any[], matchType: string): Promise<number> {
+    return this.message.smartCollectionPreview(rules, matchType).then((result) => {
+      return result[1] as number;
+    });
+  }
+
   // Store
 
   storeFind(args: any): Promise<Store[]> {

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

@@ -4,7 +4,7 @@ import type { Collection } from '@main/database/entity/Collection.schema';
 import type { Logger } from '@main/database/entity/Logger.schema';
 import type { Store, StoreManyAndCountType } from '@main/database/entity/Store.schema';
 import { ChannelType } from '@main/enums';
-import type { FontMetrics, SystemConfig, SystemStats } from '@main/types';
+import type { FontMetrics, NativeThemeState, SystemConfig, SystemPreferencesState, SystemStats } from '@main/types';
 import type { SmartCollection } from '@main/database/entity/SmartCollection.schema';
 
 @Injectable({
@@ -236,6 +236,10 @@ export class MessageService {
     return this.invoke<StoreManyAndCountType>(ChannelType.IPC_SMART_COLLECTION_EVALUATE, { id, ...options });
   }
 
+  smartCollectionPreview(rules: any[], matchType: string): Promise<StoreManyAndCountType> {
+    return this.invoke<StoreManyAndCountType>(ChannelType.IPC_SMART_COLLECTION_PREVIEW, { rules, match_type: matchType });
+  }
+
   // Store
 
   storeFind(args: any): Promise<Store[]> {
@@ -311,4 +315,32 @@ export class MessageService {
   loggerTruncate(): Promise<Logger[]> {
     return this.invoke<Logger[]>(ChannelType.IPC_LOGGER_TRUNCATE);
   }
+
+  // Native Theme
+
+  getNativeTheme(): Promise<NativeThemeState> {
+    return this.invoke<NativeThemeState>(ChannelType.IPC_GET_NATIVE_THEME);
+  }
+
+  // Safe Storage
+
+  safeStore(key: string, value: string): Promise<void> {
+    return this.invoke(ChannelType.IPC_SAFE_STORE, { key, value });
+  }
+
+  safeRetrieve(key: string): Promise<string | null> {
+    return this.invoke<string | null>(ChannelType.IPC_SAFE_RETRIEVE, key);
+  }
+
+  // Session
+
+  clearCache(): Promise<void> {
+    return this.invoke(ChannelType.IPC_CLEAR_CACHE);
+  }
+
+  // System Preferences
+
+  getSystemPreferences(): Promise<SystemPreferencesState> {
+    return this.invoke<SystemPreferencesState>(ChannelType.IPC_GET_SYSTEM_PREFERENCES);
+  }
 }

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

@@ -2,7 +2,7 @@ import { Injectable, inject, signal, computed, effect, untracked } from '@angula
 import { ElectronService } from '../electron/electron.service';
 import { MessageService } from '../message/message.service';
 import { ChannelType, StorageType } from '@main/enums';
-import type { LayoutPanelType, LayoutPreviewType } from '@main/types';
+import type { LayoutPanelType, LayoutPreviewType, NativeThemeState, ScanProgress } from '@main/types';
 
 @Injectable({ providedIn: 'root' })
 export class PresentationService {
@@ -21,6 +21,7 @@ export class PresentationService {
     this.loadingCount--;
     if (this.loadingCount === 0) {
       this.loading.set(false);
+      this.scanProgress.set(null);
     }
   }
 
@@ -28,6 +29,20 @@ export class PresentationService {
 
   readonly theme = signal<string>('light');
 
+  // Native Theme: auto-sync with OS dark mode
+  readonly autoTheme = signal(false);
+  readonly nativeThemeState = signal<NativeThemeState | null>(null);
+
+  // System Preferences
+  readonly systemAccentColor = signal('');
+  readonly reduceMotion = signal(false);
+
+  // Power Monitor
+  readonly suspended = signal(false);
+
+  // Scan Progress (MessageChannelMain)
+  readonly scanProgress = signal<ScanProgress | null>(null);
+
   constructor() {
     effect(() => {
       const current = this.theme();
@@ -37,12 +52,21 @@ export class PresentationService {
       }
     });
 
+    // Apply reduce-motion class based on OS preference
+    effect(() => {
+      document.documentElement.classList.toggle('reduce-motion', this.reduceMotion());
+    });
+
     if (this.electronService.isElectron) {
       this.loadThemeSettings();
       this.loadLayoutSettings();
       this.loadPreviewSettings();
       this.loadNavigationExpandedSettings();
       this.listenForMenuToggle();
+      this.initNativeTheme();
+      this.initSystemPreferences();
+      this.initPowerMonitor();
+      this.initScanProgress();
 
       let themeInitialized = false;
       effect(() => {
@@ -133,6 +157,13 @@ export class PresentationService {
 
   readonly selectedGlyph = signal<number | null>(null);
 
+  readonly createRootCollectionRequest = signal(0);
+
+  requestCreateRootCollection() {
+    this.navigationEnabled.set(true);
+    this.createRootCollectionRequest.update((v) => v + 1);
+  }
+
   readonly navigationExpandedIds = signal<number[]>([]);
 
   readonly gridEnabled = signal(true);
@@ -234,6 +265,74 @@ export class PresentationService {
     this.navigationExpandedIds.set([]);
   }
 
+  // --- Native Theme ---
+
+  private async initNativeTheme() {
+    const state = await this.messageService.getNativeTheme();
+    this.nativeThemeState.set(state);
+    this.applyAutoTheme(state);
+
+    this.messageService.on(ChannelType.IPC_NATIVE_THEME_CHANGED, (_event: any, state: NativeThemeState) => {
+      this.nativeThemeState.set(state);
+      this.applyAutoTheme(state);
+    });
+  }
+
+  private applyAutoTheme(state: NativeThemeState) {
+    if (this.autoTheme()) {
+      this.theme.set(state.shouldUseDarkColors ? 'midnight' : 'light');
+    }
+  }
+
+  setAutoTheme(enabled: boolean) {
+    this.autoTheme.set(enabled);
+    if (enabled) {
+      const state = this.nativeThemeState();
+      if (state) {
+        this.theme.set(state.shouldUseDarkColors ? 'midnight' : 'light');
+      }
+    }
+  }
+
+  // --- System Preferences ---
+
+  private async initSystemPreferences() {
+    const prefs = await this.messageService.getSystemPreferences();
+    this.systemAccentColor.set(prefs.accentColor);
+    this.reduceMotion.set(prefs.reduceMotion);
+  }
+
+  // --- Power Monitor ---
+
+  private initPowerMonitor() {
+    this.messageService.on(ChannelType.IPC_POWER_SUSPEND, () => {
+      this.suspended.set(true);
+    });
+
+    this.messageService.on(ChannelType.IPC_POWER_RESUME, () => {
+      this.suspended.set(false);
+    });
+  }
+
+  // --- Scan Progress (MessageChannelMain) ---
+
+  private initScanProgress() {
+    this.electronService.ipcRenderer.on(ChannelType.IPC_SCAN_PROGRESS_PORT, (event: any) => {
+      const port = event.ports[0];
+      if (!port) return;
+
+      port.onmessage = (msgEvent: MessageEvent<ScanProgress>) => {
+        this.scanProgress.set(msgEvent.data);
+      };
+
+      port.onclose = () => {
+        this.scanProgress.set(null);
+      };
+
+      port.start();
+    });
+  }
+
   private async loadNavigationExpandedSettings() {
     const ids = (await this.messageService.get(StorageType.NavigationExpanded, null)) as number[] | null;
     if (Array.isArray(ids)) {

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

@@ -1,5 +1,16 @@
-<div class="panel">
-  <div class="flex items-center px-2">
+<div class="panel h-full w-full flex items-center justify-between px-2">
+  <div class="flex items-center gap-2">
     <app-spinner [animating]="presentation.loading()" />
+    @if (presentation.scanProgress(); as progress) {
+      <span class="text-[10px] truncate" [style.color]="'var(--text-muted)'">
+        {{ progress.currentFile }} ({{ progress.processed }}/{{ progress.total }})
+      </span>
+    }
+  </div>
+  <div class="flex items-center gap-3">
+    <span class="text-[10px]" [style.color]="'var(--text-muted)'">Fontastic v{{ appVersion() }}</span>
+    <span class="text-[10px]" [style.color]="'var(--text-muted)'">Electron {{ electronVersion() }}</span>
+    <span class="text-[10px]" [style.color]="'var(--text-muted)'">Chrome {{ chromeVersion() }}</span>
+    <span class="text-[10px]" [style.color]="'var(--text-muted)'">Node {{ nodeVersion() }}</span>
   </div>
 </div>

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

@@ -1,6 +1,6 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 import { SpinnerComponent } from '../../shared/components';
-import { PresentationService } from '../../core/services';
+import { ElectronService, PresentationService } from '../../core/services';
 
 @Component({
   selector: 'app-footer',
@@ -10,4 +10,20 @@ import { PresentationService } from '../../core/services';
 })
 export class FooterComponent {
   readonly presentation = inject(PresentationService);
+  private readonly electron = inject(ElectronService);
+
+  readonly appVersion = signal('');
+  readonly electronVersion = signal('');
+  readonly chromeVersion = signal('');
+  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));
+    }
+  }
 }

package/src/app/layout/header/header.component.html

@@ -106,13 +106,3 @@
     </div>
   </div>
 </header>
-
-@if (showCollectionDialog) {
-  <app-prompt-dialog
-    title="New Collection"
-    placeholder="Collection name"
-    confirmText="Create"
-    (confirmed)="onCollectionConfirmed($event)"
-    (cancelled)="onCollectionCancelled()"
-  />
-}

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

@@ -1,42 +1,23 @@
-import { Component, inject, effect } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { Router } from '@angular/router';
-import { PromptDialogComponent } from '../../shared/components';
-import { DatabaseService, PresentationService } from '../../core/services';
+import { PresentationService } from '../../core/services';
 
 @Component({
   selector: 'app-header',
   standalone: true,
-  imports: [PromptDialogComponent],
+  imports: [],
   templateUrl: './header.component.html',
 })
 export class HeaderComponent {
-  readonly db = inject(DatabaseService);
   private router = inject(Router);
   readonly presentation = inject(PresentationService);
 
-  constructor() {
-    effect(() => {
-      console.log('Selected collection ID:', this.db.collectionId());
-    });
-  }
-
   currentUser: { name: string } | null = null;
   gravatarUrl = '';
 
-  showCollectionDialog = false;
-
   handleCreateCollection(event: Event) {
     event.stopPropagation();
-    this.showCollectionDialog = true;
-  }
-
-  onCollectionConfirmed(name: string) {
-    this.db.collectionCreate({ title: name });
-    this.showCollectionDialog = false;
-  }
-
-  onCollectionCancelled() {
-    this.showCollectionDialog = false;
+    this.presentation.requestCreateRootCollection();
   }
 
   handleToggleSearch(_event: Event) {

package/src/app/layout/navigation/navigation.component.html

@@ -16,6 +16,7 @@
             'wght' 300;
         "
         title="New Smart Collection"
+        appStopPropagation
         (click)="openCreateSmartCollection()"
         >add</span
       >
@@ -24,13 +25,12 @@
           <li>
             <a
               class="flex items-center px-3 py-1 text-xs font-normal cursor-pointer transition-colors"
-              [style.background-color]="isSmartSelected(sc) ? 'var(--selected-bg)' : 'transparent'"
-              [style.color]="isSmartSelected(sc) ? 'var(--text-primary)' : 'inherit'"
+              [appHoverHighlight]="isSmartSelected(sc)"
+              selectedColor="var(--text-primary)"
+              normalColor="inherit"
               (click)="selectSmartCollection(sc)"
               (dblclick)="editSmartCollection(sc)"
               (contextmenu)="onSmartContextMenu($event, sc)"
-              (mouseenter)="$any($event.target).style.backgroundColor = isSmartSelected(sc) ? 'var(--selected-bg)' : 'var(--hover-bg)'"
-              (mouseleave)="$any($event.target).style.backgroundColor = isSmartSelected(sc) ? 'var(--selected-bg)' : 'transparent'"
             >
               <span
                 class="material-symbols-outlined icon-sm mr-1"
@@ -64,10 +64,40 @@
             'wght' 300;
         "
         title="New Collection"
+        appStopPropagation
         (click)="openCreateRootCollection()"
         >add</span
       >
       <ul class="flex-1 overflow-auto flex flex-col py-0.5">
+        @if (isCreating && pendingParentId === 0) {
+          <li>
+            <a class="flex items-center pr-3 py-1 text-xs font-normal" style="padding-left: 14px">
+              <span
+                class="material-symbols-outlined icon-sm mr-1"
+                [style.color]="'var(--text-muted)'"
+                style="
+                  font-variation-settings:
+                    'opsz' 20,
+                    'wght' 300;
+                "
+                >chevron_right</span
+              >
+              <input
+                class="border rounded px-1 w-full outline-none text-xs"
+                [style.background-color]="'var(--input-bg)'"
+                [style.border-color]="'var(--input-border)'"
+                [style.color]="'var(--text-primary)'"
+                [(ngModel)]="creatingTitle"
+                (blur)="saveCreating()"
+                (keydown.enter)="saveCreating()"
+                (keydown.escape)="cancelCreating()"
+                appStopPropagation
+                placeholder="Collection name"
+                appAutofocus
+              />
+            </a>
+          </li>
+        }
         <ng-container *ngTemplateOutlet="subtree; context: { $implicit: tree(), level: 0 }" />
         <li
           class="flex-1 min-h-6"
@@ -135,15 +165,44 @@
                 (blur)="saveEditing(node.collection.id)"
                 (keydown.enter)="saveEditing(node.collection.id)"
                 (keydown.escape)="cancelEditing()"
-                (click)="$event.stopPropagation()"
+                appStopPropagation
                 appAutofocus
               />
             } @else {
               {{ node.collection.title }}
             }
           </a>
-          @if (node.children.length && isExpanded(node.collection.id)) {
+          @if ((node.children.length && isExpanded(node.collection.id)) || (isCreating && pendingParentId === node.collection.id)) {
             <ul>
+              @if (isCreating && pendingParentId === node.collection.id) {
+                <li>
+                  <a class="flex items-center pr-3 py-1 text-xs font-normal" [style.padding-left.px]="14 + (level + 1) * 14">
+                    <span
+                      class="material-symbols-outlined icon-sm mr-1"
+                      [style.color]="'var(--text-muted)'"
+                      style="
+                        font-variation-settings:
+                          'opsz' 20,
+                          'wght' 300;
+                      "
+                      >chevron_right</span
+                    >
+                    <input
+                      class="border rounded px-1 w-full outline-none text-xs"
+                      [style.background-color]="'var(--input-bg)'"
+                      [style.border-color]="'var(--input-border)'"
+                      [style.color]="'var(--text-primary)'"
+                      [(ngModel)]="creatingTitle"
+                      (blur)="saveCreating()"
+                      (keydown.enter)="saveCreating()"
+                      (keydown.escape)="cancelCreating()"
+                      appStopPropagation
+                      placeholder="Collection name"
+                      appAutofocus
+                    />
+                  </a>
+                </li>
+              }
               <ng-container *ngTemplateOutlet="subtree; context: { $implicit: node.children, level: level + 1 }" />
             </ul>
           }
@@ -161,16 +220,6 @@
       />
     }
 
-    @if (showCollectionDialog) {
-      <app-prompt-dialog
-        title="New Collection"
-        placeholder="Collection name"
-        confirmText="Create"
-        (confirmed)="onCollectionConfirmed($event)"
-        (cancelled)="onCollectionCancelled()"
-      />
-    }
-
     @if (smartContextMenu) {
       <app-context-menu
         [x]="smartContextMenu.x"
@@ -185,6 +234,7 @@
       <app-rule-builder
         [smartCollection]="editingSmartCollection"
         (saved)="onRuleBuilderSaved($event)"
+        (savedAndSync)="onRuleBuilderSavedAndSync($event)"
         (cancelled)="onRuleBuilderCancelled()"
       />
     }