fontastic 1.1.0 → 1.3.0

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

@@ -1,11 +1,13 @@
-import { Component, inject, computed, OnInit, OnDestroy } from '@angular/core';
+import { Component, inject, computed, effect, OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { DatabaseService, MessageService, PresentationService } from '../../core/services';
 import { CollapsiblePanelComponent } from '../../shared/components/collapsible-panel/collapsible-panel.component';
 import { ContextMenuComponent, ContextMenuItem } from '../../shared/components/context-menu/context-menu.component';
-import { PromptDialogComponent, RuleBuilderComponent } from '../../shared/components';
+import { RuleBuilderComponent } from '../../shared/components';
 import { AutofocusDirective } from '../../shared/directives/autofocus/autofocus.directive';
+import { HoverHighlightDirective } from '../../shared/directives/hover-highlight/hover-highlight.directive';
+import { StopPropagationDirective } from '../../shared/directives/stop-propagation/stop-propagation.directive';
 import { LibraryComponent } from './library/library.component';
 import { NewsStatsComponent } from './stats/stats.component';
 import type { Collection } from '@main/database/entity/Collection.schema';
@@ -26,9 +28,10 @@ export interface TreeNode {
     FormsModule,
     CollapsiblePanelComponent,
     ContextMenuComponent,
-    PromptDialogComponent,
     RuleBuilderComponent,
     AutofocusDirective,
+    HoverHighlightDirective,
+    StopPropagationDirective,
     LibraryComponent,
     NewsStatsComponent,
   ],
@@ -39,6 +42,15 @@ export class NavigationComponent implements OnInit, OnDestroy {
   private message = inject(MessageService);
   private presentation = inject(PresentationService);
 
+  constructor() {
+    effect(() => {
+      const req = this.presentation.createRootCollectionRequest();
+      if (req > 0) {
+        this.openCreateRootCollection();
+      }
+    });
+  }
+
   private menuToggleListener = (_event: any, panel: string) => {
     if (panel === 'expand-collections') {
       this.expandAll();
@@ -72,7 +84,8 @@ export class NavigationComponent implements OnInit, OnDestroy {
   editingTitle = '';
   allExpanded = false;
 
-  showCollectionDialog = false;
+  isCreating = false;
+  creatingTitle = '';
   pendingParentId: number | null = null;
 
   // Smart Collection state
@@ -256,7 +269,9 @@ export class NavigationComponent implements OnInit, OnDestroy {
     switch (action) {
       case 'add-collection':
         this.pendingParentId = collection.id;
-        this.showCollectionDialog = true;
+        this.isCreating = true;
+        this.creatingTitle = '';
+        this.presentation.expandNavigationId(collection.id);
         break;
       case 'add-fonts':
         this.handleAddFonts(collection);
@@ -273,17 +288,24 @@ export class NavigationComponent implements OnInit, OnDestroy {
 
   openCreateRootCollection() {
     this.pendingParentId = 0;
-    this.showCollectionDialog = true;
+    this.isCreating = true;
+    this.creatingTitle = '';
   }
 
-  onCollectionConfirmed(name: string) {
-    this.db.collectionCreate({ title: name, parentId: this.pendingParentId });
-    this.showCollectionDialog = false;
-    this.pendingParentId = null;
+  saveCreating() {
+    const title = this.creatingTitle.trim();
+    if (title) {
+      this.db.collectionCreate({ title, parentId: this.pendingParentId });
+      if (this.pendingParentId) {
+        this.presentation.expandNavigationId(this.pendingParentId);
+      }
+    }
+    this.cancelCreating();
   }
 
-  onCollectionCancelled() {
-    this.showCollectionDialog = false;
+  cancelCreating() {
+    this.isCreating = false;
+    this.creatingTitle = '';
     this.pendingParentId = null;
   }
 
@@ -458,6 +480,37 @@ export class NavigationComponent implements OnInit, OnDestroy {
     this.editingSmartCollection = null;
   }
 
+  onRuleBuilderSavedAndSync(data: { title: string; rules: SmartCollectionRule[]; match_type: string }) {
+    const rulesJson = JSON.stringify(data.rules);
+    if (this.editingSmartCollection) {
+      const id = this.editingSmartCollection.id;
+      this.db
+        .smartCollectionUpdate(id, {
+          title: data.title,
+          rules: rulesJson,
+          match_type: data.match_type,
+        })
+        .then(() => {
+          this.db.selectSmartCollection(id);
+        });
+    } else {
+      this.db
+        .smartCollectionCreate({
+          title: data.title,
+          rules: rulesJson,
+          match_type: data.match_type,
+        })
+        .then((collections) => {
+          const created = collections.find((c) => c.title === data.title);
+          if (created) {
+            this.db.selectSmartCollection(created.id);
+          }
+        });
+    }
+    this.showRuleBuilder = false;
+    this.editingSmartCollection = null;
+  }
+
   onRuleBuilderCancelled() {
     this.showRuleBuilder = false;
     this.editingSmartCollection = null;

package/src/app/settings/ai-keys/ai-keys.component.ts

@@ -1,13 +1,6 @@
 import { Component, inject, signal, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MessageService } from '../../core/services';
-import { StorageType } from '@main/enums';
-
-interface AiKeys {
-  anthropic: string;
-  google: string;
-  openai: string;
-}
 
 @Component({
   selector: 'app-settings-ai-keys',
@@ -24,20 +17,22 @@ export class SettingsAiKeysComponent implements OnInit {
   readonly saveStatus = signal<'idle' | 'saved'>('idle');
 
   async ngOnInit() {
-    const keys = (await this.message.get(StorageType.AiKeys, null)) as AiKeys | null;
-    if (keys) {
-      this.anthropicKey.set(keys.anthropic ?? '');
-      this.googleKey.set(keys.google ?? '');
-      this.openaiKey.set(keys.openai ?? '');
-    }
+    const [anthropic, google, openai] = await Promise.all([
+      this.message.safeRetrieve('secure.ai.anthropic'),
+      this.message.safeRetrieve('secure.ai.google'),
+      this.message.safeRetrieve('secure.ai.openai'),
+    ]);
+    if (anthropic) this.anthropicKey.set(anthropic);
+    if (google) this.googleKey.set(google);
+    if (openai) this.openaiKey.set(openai);
   }
 
   async onSave() {
-    await this.message.set(StorageType.AiKeys, {
-      anthropic: this.anthropicKey(),
-      google: this.googleKey(),
-      openai: this.openaiKey(),
-    });
+    await Promise.all([
+      this.message.safeStore('secure.ai.anthropic', this.anthropicKey()),
+      this.message.safeStore('secure.ai.google', this.googleKey()),
+      this.message.safeStore('secure.ai.openai', this.openaiKey()),
+    ]);
     this.saveStatus.set('saved');
     setTimeout(() => this.saveStatus.set('idle'), 2000);
   }

package/src/app/settings/danger-zone/danger-zone.component.html

@@ -18,5 +18,13 @@
       </div>
       <button class="btn btn-sm btn-danger" (click)="onClearStore()">Clear</button>
     </div>
+
+    <div class="flex items-center justify-between">
+      <div>
+        <p class="text-xs font-semibold" [style.color]="'var(--text-primary)'">Clear application cache</p>
+        <p class="text-xs" [style.color]="'var(--text-muted)'">Clears the Chromium session cache.</p>
+      </div>
+      <button class="btn btn-sm btn-danger" (click)="onClearCache()">Clear Cache</button>
+    </div>
   </div>
 </div>

package/src/app/settings/danger-zone/danger-zone.component.ts

@@ -34,4 +34,16 @@ export class SettingsDangerZoneComponent {
       this.message.reloadWindow();
     }
   }
+
+  async onClearCache() {
+    const response = await this.message.showMessageBox({
+      type: 'question',
+      buttons: ['Yes', 'No'],
+      title: 'Confirm',
+      message: 'Are you sure you want to clear the application cache?',
+    });
+    if (response?.response === 0) {
+      await this.message.clearCache();
+    }
+  }
 }

package/src/app/settings/news-api/news-api.component.ts

@@ -1,8 +1,6 @@
 import { Component, inject, signal, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MessageService, NewsService } from '../../core/services';
-import { StorageType } from '@main/enums';
-import type { NewsType } from '@main/types';
 
 @Component({
   selector: 'app-settings-news-api',
@@ -20,16 +18,16 @@ export class SettingsNewsApiComponent implements OnInit {
   readonly fetchMessage = signal('');
 
   async ngOnInit() {
-    const config = (await this.message.get(StorageType.News, null)) as NewsType | null;
-    if (config?.apiKey) {
-      this.newsApiKey.set(config.apiKey);
+    const apiKey = await this.message.safeRetrieve('secure.news.apiKey');
+    if (apiKey) {
+      this.newsApiKey.set(apiKey);
     }
   }
 
   async onSaveNewsApiKey() {
     const apiKey = this.newsApiKey();
     if (!apiKey) return;
-    await this.message.set(StorageType.News, { apiKey });
+    await this.message.safeStore('secure.news.apiKey', apiKey);
     this.saveStatus.set('saved');
     await this.news.refresh();
     setTimeout(() => this.saveStatus.set('idle'), 2000);
@@ -39,8 +37,8 @@ export class SettingsNewsApiComponent implements OnInit {
     this.fetchStatus.set('fetching');
     this.fetchMessage.set('');
     try {
-      const endpoint = `https://newsapi.org/v2/top-headlines?country=us&apiKey=${this.newsApiKey()}`;
-      const result = await this.message.fetchLatestNews({ endpoint });
+      // API key is retrieved securely on the main process side
+      const result = await this.message.fetchLatestNews({ country: 'us' });
       const count = result?.articles?.length ?? 0;
       this.fetchMessage.set(`Fetched ${count} article${count !== 1 ? 's' : ''}.`);
       this.fetchStatus.set('done');

package/src/app/settings/theme/theme.component.html

@@ -2,10 +2,23 @@
   <div class="card-header">
     <div class="card-title"><h3>Theme</h3></div>
   </div>
-  <div class="card-body">
+  <div class="card-body space-y-4">
+    <div>
+      <label class="flex items-center gap-2 cursor-pointer">
+        <input type="checkbox" class="accent-current" [ngModel]="presentation.autoTheme()" (ngModelChange)="onAutoThemeChange($event)" />
+        <span class="text-xs" [style.color]="'var(--text-secondary)'">Match system appearance</span>
+      </label>
+    </div>
     <div>
       <label class="form-label" for="theme">Selected theme</label>
-      <select id="theme" class="form-select w-full" [ngModel]="presentation.theme()" (ngModelChange)="onThemeChange($event)" name="theme">
+      <select
+        id="theme"
+        class="form-select w-full"
+        [ngModel]="presentation.theme()"
+        (ngModelChange)="onThemeChange($event)"
+        [disabled]="presentation.autoTheme()"
+        name="theme"
+      >
         @for (t of themes; track t.key) {
           <option [value]="t.key">{{ t.label }}</option>
         }

package/src/app/settings/theme/theme.component.ts

@@ -19,4 +19,8 @@ export class SettingsThemeComponent {
   onThemeChange(value: string) {
     this.presentation.theme.set(value);
   }
+
+  onAutoThemeChange(enabled: boolean) {
+    this.presentation.setAutoTheme(enabled);
+  }
 }

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

@@ -1,5 +1,5 @@
 <div class="panel grid" [style.grid-template-rows]="db.totalPages() > 1 ? '1fr 32px' : '1fr'">
-  <div class="overflow-hidden scrollbox-y">
+  <div class="overflow-hidden scrollbox-y" [appScrollReset]="db.currentPage()">
     <table class="w-full border-separate border-spacing-0">
       <thead
         class="sticky top-0 z-10"
@@ -44,14 +44,8 @@
             class="cursor-pointer transition-colors"
             [style.border-bottom]="'1px solid var(--border-subtle)'"
             [id]="'grid-store-' + store.id"
-            [style.background-color]="db.storeId() === store.id ? 'var(--selected-bg)' : 'transparent'"
+            [appHoverHighlight]="db.storeId() === store.id"
             (click)="selectStore(store.id)"
-            (mouseenter)="
-              $any($event.currentTarget).style.backgroundColor = db.storeId() === store.id ? 'var(--selected-bg)' : 'var(--hover-bg)'
-            "
-            (mouseleave)="
-              $any($event.currentTarget).style.backgroundColor = db.storeId() === store.id ? 'var(--selected-bg)' : 'transparent'
-            "
           >
             <td class="w-10 px-2 py-1.5 text-center">
               <span
@@ -60,7 +54,8 @@
                 [style.background]="
                   db.storeId() === store.id ? 'radial-gradient(circle, var(--accent) 40%, transparent 41%)' : 'transparent'
                 "
-                (click)="$event.stopPropagation(); selectStore(store.id)"
+                appStopPropagation
+                (click)="selectStore(store.id)"
               ></span>
             </td>
             <td class="px-4 py-1.5" [style.color]="'var(--text-primary)'">{{ store.full_name || store.file_name }}</td>
@@ -121,8 +116,7 @@
         <button
           class="px-1 py-0.5 rounded cursor-pointer disabled:cursor-default transition-colors"
           [style.color]="'var(--text-secondary)'"
-          [disabled]="db.currentPage() === 1"
-          [class.opacity-30]="db.currentPage() === 1"
+          [appDisabledOpacity]="db.currentPage() === 1"
           (click)="db.firstPage()"
         >
           <span
@@ -138,8 +132,7 @@
         <button
           class="px-1 py-0.5 rounded cursor-pointer disabled:cursor-default transition-colors"
           [style.color]="'var(--text-secondary)'"
-          [disabled]="db.currentPage() === 1"
-          [class.opacity-30]="db.currentPage() === 1"
+          [appDisabledOpacity]="db.currentPage() === 1"
           (click)="db.prevPage()"
         >
           <span
@@ -156,8 +149,7 @@
         <button
           class="px-1 py-0.5 rounded cursor-pointer disabled:cursor-default transition-colors"
           [style.color]="'var(--text-secondary)'"
-          [disabled]="db.currentPage() === db.totalPages()"
-          [class.opacity-30]="db.currentPage() === db.totalPages()"
+          [appDisabledOpacity]="db.currentPage() === db.totalPages()"
           (click)="db.nextPage()"
         >
           <span
@@ -173,8 +165,7 @@
         <button
           class="px-1 py-0.5 rounded cursor-pointer disabled:cursor-default transition-colors"
           [style.color]="'var(--text-secondary)'"
-          [disabled]="db.currentPage() === db.totalPages()"
-          [class.opacity-30]="db.currentPage() === db.totalPages()"
+          [appDisabledOpacity]="db.currentPage() === db.totalPages()"
           (click)="db.lastPage()"
         >
           <span

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

@@ -1,15 +1,19 @@
-import { Component, inject, effect, ElementRef } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { DatabaseService, MessageService } from '../../../core/services';
+import { DisabledOpacityDirective } from '../../directives/disabled-opacity/disabled-opacity.directive';
+import { HoverHighlightDirective } from '../../directives/hover-highlight/hover-highlight.directive';
+import { ScrollResetDirective } from '../../directives/scroll-reset/scroll-reset.directive';
+import { StopPropagationDirective } from '../../directives/stop-propagation/stop-propagation.directive';
 
 @Component({
   selector: 'app-datagrid',
   standalone: true,
+  imports: [HoverHighlightDirective, StopPropagationDirective, DisabledOpacityDirective, ScrollResetDirective],
   templateUrl: './datagrid.component.html',
 })
 export class DatagridComponent {
   readonly db = inject(DatabaseService);
   private messageService = inject(MessageService);
-  private el = inject(ElementRef);
 
   readonly sortableColumns = [
     { field: 'full_name', label: 'Name' },
@@ -21,14 +25,6 @@ export class DatagridComponent {
     { field: 'designer', label: 'Designer' },
   ];
 
-  constructor() {
-    effect(() => {
-      this.db.currentPage();
-      const scrollable = this.el.nativeElement.querySelector('.scrollbox-y');
-      scrollable?.scrollTo(0, 0);
-    });
-  }
-
   selectStore(id: number) {
     this.db.storeId.set(id);
     document.getElementById('preview-store-' + id)?.scrollIntoView({ behavior: 'smooth', block: 'center' });

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

@@ -17,8 +17,7 @@
           <button
             class="px-1 py-0.5 rounded cursor-pointer disabled:cursor-default transition-colors"
             [style.color]="'var(--text-secondary)'"
-            [disabled]="currentPage() === 1"
-            [class.opacity-30]="currentPage() === 1"
+            [appDisabledOpacity]="currentPage() === 1"
             (click)="currentPage.set(1)"
           >
             <span
@@ -34,8 +33,7 @@
           <button
             class="px-1 py-0.5 rounded cursor-pointer disabled:cursor-default transition-colors"
             [style.color]="'var(--text-secondary)'"
-            [disabled]="currentPage() === 1"
-            [class.opacity-30]="currentPage() === 1"
+            [appDisabledOpacity]="currentPage() === 1"
             (click)="currentPage.set(currentPage() - 1)"
           >
             <span
@@ -52,8 +50,7 @@
           <button
             class="px-1 py-0.5 rounded cursor-pointer disabled:cursor-default transition-colors"
             [style.color]="'var(--text-secondary)'"
-            [disabled]="currentPage() === totalPages()"
-            [class.opacity-30]="currentPage() === totalPages()"
+            [appDisabledOpacity]="currentPage() === totalPages()"
             (click)="currentPage.set(currentPage() + 1)"
           >
             <span
@@ -69,8 +66,7 @@
           <button
             class="px-1 py-0.5 rounded cursor-pointer disabled:cursor-default transition-colors"
             [style.color]="'var(--text-secondary)'"
-            [disabled]="currentPage() === totalPages()"
-            [class.opacity-30]="currentPage() === totalPages()"
+            [appDisabledOpacity]="currentPage() === totalPages()"
             (click)="currentPage.set(totalPages())"
           >
             <span
@@ -117,16 +113,10 @@
             <div
               class="flex flex-col items-center justify-center rounded aspect-square cursor-pointer transition-colors"
               [style.border]="selectedGlyph() === codePoint ? '1px solid var(--selected-border)' : '1px solid var(--border-subtle)'"
-              [style.background-color]="selectedGlyph() === codePoint ? 'var(--selected-bg)' : 'transparent'"
+              [appHoverHighlight]="selectedGlyph() === codePoint"
               [title]="'U+' + codePoint.toString(16).toUpperCase().padStart(4, '0')"
               [style.font-family]="fontFamily()"
               (click)="selectedGlyph.set(codePoint)"
-              (mouseenter)="
-                $any($event.currentTarget).style.backgroundColor = selectedGlyph() === codePoint ? 'var(--selected-bg)' : 'var(--hover-bg)'
-              "
-              (mouseleave)="
-                $any($event.currentTarget).style.backgroundColor = selectedGlyph() === codePoint ? 'var(--selected-bg)' : 'transparent'
-              "
             >
               <span class="text-lg leading-none" [style.color]="'var(--text-primary)'">{{ toChar(codePoint) }}</span>
             </div>

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

@@ -1,11 +1,14 @@
 import { Component, inject, signal, computed, effect } from '@angular/core';
 import { DatabaseService, PresentationService } from '../../../core/services';
+import { DisabledOpacityDirective } from '../../directives/disabled-opacity/disabled-opacity.directive';
+import { HoverHighlightDirective } from '../../directives/hover-highlight/hover-highlight.directive';
 
 const PAGE_SIZE = 200;
 
 @Component({
   selector: 'app-glyphs',
   standalone: true,
+  imports: [HoverHighlightDirective, DisabledOpacityDirective],
   templateUrl: './glyphs.component.html',
 })
 export class GlyphsComponent {

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

@@ -1,5 +1,5 @@
 <div class="panel">
-  <div class="h-full scrollbox-y flex flex-col gap-3 p-4">
+  <div class="h-full scrollbox-y flex flex-col gap-3 p-4" [appScrollReset]="db.currentPage()">
     @for (store of db.stores(); track store.id; let last = $last) {
       <div
         [class.border-b]="!last"

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

@@ -1,15 +1,16 @@
-import { Component, inject, effect, ElementRef } from '@angular/core';
+import { Component, inject, effect } from '@angular/core';
 import { DatabaseService, MessageService, PresentationService } from '../../../core/services';
+import { ScrollResetDirective } from '../../directives/scroll-reset/scroll-reset.directive';
 
 @Component({
   selector: 'app-preview',
   standalone: true,
+  imports: [ScrollResetDirective],
   templateUrl: './preview.component.html',
 })
 export class PreviewComponent {
   readonly db = inject(DatabaseService);
   readonly presentation = inject(PresentationService);
-  private el = inject(ElementRef);
   private messageService = inject(MessageService);
 
   private registeredFonts = new Set<string>();
@@ -21,12 +22,6 @@ export class PreviewComponent {
         stores.forEach((store) => this.registerFont(store));
       }
     });
-
-    effect(() => {
-      this.db.currentPage();
-      const scrollable = this.el.nativeElement.querySelector('.scrollbox-y');
-      scrollable?.scrollTo(0, 0);
-    });
   }
 
   selectStore(id: number) {

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

@@ -1,5 +1,5 @@
-<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" (click)="cancel()">
-  <div class="card mb-0 w-[480px]" style="box-shadow: var(--context-shadow)" (click)="$event.stopPropagation()">
+<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>

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

@@ -1,10 +1,11 @@
 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],
+  imports: [FormsModule, ModalBackdropDirective],
   templateUrl: './prompt-dialog.component.html',
 })
 export class PromptDialogComponent implements AfterViewInit {

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

@@ -1,5 +1,5 @@
-<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" (click)="cancel()">
-  <div class="card mb-0 w-[560px]" style="box-shadow: var(--context-shadow)" (click)="$event.stopPropagation()">
+<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-[560px]" style="box-shadow: var(--context-shadow)">
     <div class="card-header">
       <div class="card-title">
         <h3>{{ smartCollection ? 'Edit Smart Collection' : 'New Smart Collection' }}</h3>
@@ -78,15 +78,27 @@
         }
       </div>
 
-      <button class="btn btn-sm btn-default" (click)="addRule()">
-        <span class="material-symbols-outlined" style="font-size: 16px; vertical-align: middle">add</span>
-        Add Rule
-      </button>
+      <div class="flex items-center justify-between">
+        <button class="btn btn-sm btn-default" (click)="addRule()">
+          <span class="material-symbols-outlined" style="font-size: 16px; vertical-align: middle">add</span>
+          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>
+          }
+          <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' }}
+          </button>
+        </div>
+      </div>
     </div>
     <div class="card-footer">
       <div></div>
       <div class="card-tools">
         <button class="btn btn-sm btn-default" (click)="cancel()">Cancel</button>
+        <button class="btn btn-sm btn-default" (click)="saveAndSync()">Save & Sync</button>
         <button class="btn btn-sm btn-theme" (click)="save()">Save</button>
       </div>
     </div>

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

@@ -1,5 +1,7 @@
-import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnInit, inject } 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';
 import type { SmartCollection } from '@main/database/entity/SmartCollection.schema';
 import type { SmartCollectionRule } from '@main/types';
 
@@ -65,17 +67,22 @@ const OPERATORS_BY_TYPE: Record<string, { value: string; label: string }[]> = {
 @Component({
   selector: 'app-rule-builder',
   standalone: true,
-  imports: [FormsModule],
+  imports: [FormsModule, ModalBackdropDirective],
   templateUrl: './rule-builder.component.html',
 })
 export class RuleBuilderComponent implements OnInit {
   @Input() smartCollection: SmartCollection | null = null;
   @Output() saved = new EventEmitter<{ title: string; rules: SmartCollectionRule[]; match_type: string }>();
+  @Output() savedAndSync = new EventEmitter<{ title: string; rules: SmartCollectionRule[]; match_type: string }>();
   @Output() cancelled = new EventEmitter<void>();
 
+  private db = inject(DatabaseService);
+
   title = '';
   matchType: string = 'AND';
   rules: SmartCollectionRule[] = [];
+  previewCount: number | null = null;
+  previewing = false;
 
   readonly fieldOptions = FIELD_OPTIONS;
 
@@ -114,14 +121,33 @@ export class RuleBuilderComponent implements OnInit {
     } else {
       rule.value = '';
     }
+    this.previewCount = null;
   }
 
   addRule(): void {
     this.rules.push({ field: 'font_family', operator: 'contains', value: '' });
+    this.previewCount = null;
   }
 
   removeRule(index: number): void {
     this.rules.splice(index, 1);
+    this.previewCount = null;
+  }
+
+  preview(): void {
+    if (this.rules.length === 0 || this.previewing) return;
+    this.previewing = true;
+    this.previewCount = null;
+    this.db
+      .smartCollectionPreview(this.rules, this.matchType)
+      .then((count) => {
+        this.previewCount = count;
+        this.previewing = false;
+      })
+      .catch(() => {
+        this.previewCount = null;
+        this.previewing = false;
+      });
   }
 
   save(): void {
@@ -130,6 +156,12 @@ export class RuleBuilderComponent implements OnInit {
     this.saved.emit({ title: trimmedTitle, rules: this.rules, match_type: this.matchType });
   }
 
+  saveAndSync(): void {
+    const trimmedTitle = this.title.trim();
+    if (!trimmedTitle || this.rules.length === 0) return;
+    this.savedAndSync.emit({ title: trimmedTitle, rules: this.rules, match_type: this.matchType });
+  }
+
   cancel(): void {
     this.cancelled.emit();
   }