fontastic 1.0.0 → 1.0.2

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

@@ -4,10 +4,58 @@
       <app-library />
     </app-collapsible-panel>
 
+    <app-collapsible-panel title="Smart Collections">
+      <span
+        panelActions
+        class="material-symbols-outlined cursor-pointer"
+        [style.color]="'var(--text-muted)'"
+        style="
+          font-size: 18px;
+          font-variation-settings:
+            'opsz' 20,
+            'wght' 300;
+        "
+        title="New Smart Collection"
+        (click)="openCreateSmartCollection()"
+        >add</span
+      >
+      <ul class="flex flex-col py-0.5">
+        @for (sc of db.smartCollections(); track sc.id) {
+          <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'"
+              (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"
+                [style.color]="'var(--text-muted)'"
+                style="
+                  font-size: 16px;
+                  font-variation-settings:
+                    'opsz' 20,
+                    'wght' 300;
+                "
+                >auto_awesome</span
+              >
+              {{ sc.title }}
+            </a>
+          </li>
+        } @empty {
+          <li class="px-3 py-1 text-xs" [style.color]="'var(--text-muted)'">No smart collections</li>
+        }
+      </ul>
+    </app-collapsible-panel>
+
     <app-collapsible-panel title="Explorer" class="flex-1 min-h-0">
       <span
         panelActions
-        class="material-symbols-outlined cursor-pointer transition-transform duration-200"
+        class="material-symbols-outlined cursor-pointer"
         [style.color]="'var(--text-muted)'"
         style="
           font-size: 18px;
@@ -15,9 +63,9 @@
             'opsz' 20,
             'wght' 300;
         "
-        [title]="allExpanded ? 'Collapse All' : 'Expand All'"
-        (click)="toggleExpandAll($event)"
-        >{{ allExpanded ? 'unfold_less' : 'unfold_more' }}</span
+        title="New Collection"
+        (click)="openCreateRootCollection()"
+        >add</span
       >
       <ul class="flex-1 overflow-auto flex flex-col py-0.5">
         <ng-container *ngTemplateOutlet="subtree; context: { $implicit: tree(), level: 0 }" />
@@ -122,5 +170,23 @@
         (cancelled)="onCollectionCancelled()"
       />
     }
+
+    @if (smartContextMenu) {
+      <app-context-menu
+        [x]="smartContextMenu.x"
+        [y]="smartContextMenu.y"
+        [items]="smartContextMenuItems"
+        (menuSelect)="onSmartContextMenuSelect($event)"
+        (menuClose)="closeSmartContextMenu()"
+      />
+    }
+
+    @if (showRuleBuilder) {
+      <app-rule-builder
+        [smartCollection]="editingSmartCollection"
+        (saved)="onRuleBuilderSaved($event)"
+        (cancelled)="onRuleBuilderCancelled()"
+      />
+    }
   </div>
 </nav>

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

@@ -1,14 +1,17 @@
-import { Component, inject, computed } from '@angular/core';
+import { Component, inject, computed, 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 } from '../../shared/components';
+import { PromptDialogComponent, RuleBuilderComponent } from '../../shared/components';
 import { AutofocusDirective } from '../../shared/directives/autofocus/autofocus.directive';
 import { LibraryComponent } from './library/library.component';
 import { NewsStatsComponent } from './stats/stats.component';
 import type { Collection } from '@main/database/entity/Collection.schema';
+import type { SmartCollection } from '@main/database/entity/SmartCollection.schema';
+import type { SmartCollectionRule } from '@main/types';
+import { ChannelType } from '@main/enums';
 
 export interface TreeNode {
   collection: Collection;
@@ -24,17 +27,34 @@ export interface TreeNode {
     CollapsiblePanelComponent,
     ContextMenuComponent,
     PromptDialogComponent,
+    RuleBuilderComponent,
     AutofocusDirective,
     LibraryComponent,
     NewsStatsComponent,
   ],
   templateUrl: './navigation.component.html',
 })
-export class NavigationComponent {
+export class NavigationComponent implements OnInit, OnDestroy {
   readonly db = inject(DatabaseService);
   private message = inject(MessageService);
   private presentation = inject(PresentationService);
 
+  private menuToggleListener = (_event: any, panel: string) => {
+    if (panel === 'expand-collections') {
+      this.expandAll();
+    } else if (panel === 'collapse-collections') {
+      this.collapseAll();
+    }
+  };
+
+  ngOnInit() {
+    this.message.on(ChannelType.IPC_TOGGLE_PANEL, this.menuToggleListener);
+  }
+
+  ngOnDestroy() {
+    this.message.removeListener(ChannelType.IPC_TOGGLE_PANEL, this.menuToggleListener);
+  }
+
   readonly tree = computed<TreeNode[]>(() => {
     const all = this.db.collections();
     const buildChildren = (parentId: number): TreeNode[] =>
@@ -50,12 +70,17 @@ export class NavigationComponent {
   contextMenu: { x: number; y: number; collection: Collection } | null = null;
   editingId: number | null = null;
   editingTitle = '';
-  expandedIds = new Set<number>();
   allExpanded = false;
 
   showCollectionDialog = false;
   pendingParentId: number | null = null;
 
+  // Smart Collection state
+  showRuleBuilder = false;
+  editingSmartCollection: SmartCollection | null = null;
+  smartContextMenu: { x: number; y: number; smartCollection: SmartCollection } | null = null;
+  smartContextMenuItems: ContextMenuItem[] = [];
+
   // Drag state
   draggedNode: TreeNode | null = null;
   dropTargetId: number | null = null;
@@ -187,7 +212,7 @@ export class NavigationComponent {
     this.db.collections.set(updated);
 
     if (newParentId !== 0) {
-      this.expandedIds.add(newParentId);
+      this.presentation.expandNavigationId(newParentId);
     }
 
     try {
@@ -216,8 +241,8 @@ export class NavigationComponent {
     this.contextMenuItems = [
       { label: 'Add Collection', action: 'add-collection', icon: 'create_new_folder' },
       { label: 'Add Fonts', action: 'add-fonts', icon: 'list_alt' },
-      { label: 'Rename', action: 'rename' },
-      { label: 'Delete', action: 'delete' },
+      { label: 'Rename', action: 'rename', icon: 'edit', separator: true },
+      { label: 'Delete', action: 'delete', icon: 'delete', separator: true },
     ];
 
     this.contextMenu = { x: event.clientX, y: event.clientY, collection };
@@ -246,6 +271,11 @@ export class NavigationComponent {
     }
   }
 
+  openCreateRootCollection() {
+    this.pendingParentId = 0;
+    this.showCollectionDialog = true;
+  }
+
   onCollectionConfirmed(name: string) {
     this.db.collectionCreate({ title: name, parentId: this.pendingParentId });
     this.showCollectionDialog = false;
@@ -302,32 +332,30 @@ export class NavigationComponent {
   }
 
   isExpanded(id: number): boolean {
-    return this.expandedIds.has(id);
+    return this.presentation.isNavigationExpanded(id);
   }
 
   toggleExpand(event: Event, id: number) {
     event.stopPropagation();
-    if (this.expandedIds.has(id)) {
-      this.expandedIds.delete(id);
-    } else {
-      this.expandedIds.add(id);
-    }
+    this.presentation.toggleNavigationExpanded(id);
   }
 
-  toggleExpandAll(event: Event) {
-    event.stopPropagation();
-    if (this.allExpanded) {
-      this.expandedIds.clear();
-    } else {
-      const collectIds = (nodes: TreeNode[]) => {
-        for (const node of nodes) {
-          this.expandedIds.add(node.collection.id);
-          collectIds(node.children);
-        }
-      };
-      collectIds(this.tree());
-    }
-    this.allExpanded = !this.allExpanded;
+  expandAll() {
+    const allIds: number[] = [];
+    const collectIds = (nodes: TreeNode[]) => {
+      for (const node of nodes) {
+        allIds.push(node.collection.id);
+        collectIds(node.children);
+      }
+    };
+    collectIds(this.tree());
+    this.presentation.setAllNavigationExpanded(allIds);
+    this.allExpanded = true;
+  }
+
+  collapseAll() {
+    this.presentation.clearAllNavigationExpanded();
+    this.allExpanded = false;
   }
 
   isSelected(collection: Collection): boolean {
@@ -359,6 +387,82 @@ export class NavigationComponent {
     this.editingTitle = '';
   }
 
+  // Smart Collection methods
+
+  selectSmartCollection(sc: SmartCollection) {
+    this.db.selectSmartCollection(sc.id);
+  }
+
+  isSmartSelected(sc: SmartCollection): boolean {
+    return this.db.activeSmartCollectionId() === sc.id;
+  }
+
+  openCreateSmartCollection() {
+    this.editingSmartCollection = null;
+    this.showRuleBuilder = true;
+  }
+
+  editSmartCollection(sc: SmartCollection) {
+    this.editingSmartCollection = sc;
+    this.showRuleBuilder = true;
+  }
+
+  onSmartContextMenu(event: MouseEvent, sc: SmartCollection) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.smartContextMenuItems = [
+      { label: 'Edit Rules', action: 'edit-rules', icon: 'tune' },
+      { label: 'Delete', action: 'delete', icon: 'delete', separator: true },
+    ];
+
+    this.smartContextMenu = { x: event.clientX, y: event.clientY, smartCollection: sc };
+  }
+
+  onSmartContextMenuSelect(action: string) {
+    if (!this.smartContextMenu) return;
+    const sc = this.smartContextMenu.smartCollection;
+    this.smartContextMenu = null;
+
+    switch (action) {
+      case 'edit-rules':
+        this.editingSmartCollection = sc;
+        this.showRuleBuilder = true;
+        break;
+      case 'delete':
+        this.db.smartCollectionDelete(sc.id);
+        break;
+    }
+  }
+
+  closeSmartContextMenu() {
+    this.smartContextMenu = null;
+  }
+
+  onRuleBuilderSaved(data: { title: string; rules: SmartCollectionRule[]; match_type: string }) {
+    const rulesJson = JSON.stringify(data.rules);
+    if (this.editingSmartCollection) {
+      this.db.smartCollectionUpdate(this.editingSmartCollection.id, {
+        title: data.title,
+        rules: rulesJson,
+        match_type: data.match_type,
+      });
+    } else {
+      this.db.smartCollectionCreate({
+        title: data.title,
+        rules: rulesJson,
+        match_type: data.match_type,
+      });
+    }
+    this.showRuleBuilder = false;
+    this.editingSmartCollection = null;
+  }
+
+  onRuleBuilderCancelled() {
+    this.showRuleBuilder = false;
+    this.editingSmartCollection = null;
+  }
+
   findRootParentId(collection: Collection): number {
     const all = this.db.collections();
     let current = collection;

package/src/app/shared/components/context-menu/context-menu.component.ts

@@ -4,38 +4,87 @@ export interface ContextMenuItem {
   label: string;
   action: string;
   icon?: string;
+  separator?: boolean;
 }
 
 @Component({
   selector: 'app-context-menu',
   standalone: true,
   template: `
-    <div
-      class="fixed z-50 min-w-[160px] rounded-lg py-1"
-      [style.left.px]="x()"
-      [style.top.px]="y()"
-      [style.background-color]="'var(--context-bg)'"
-      [style.border]="'1px solid var(--context-border)'"
-      [style.box-shadow]="'var(--context-shadow)'"
-      [style.color]="'var(--text-primary)'"
-    >
+    <div class="context-menu fixed z-50" [style.left.px]="x()" [style.top.px]="y()">
       @for (item of items(); track item.action) {
-        <button
-          class="w-full text-left px-4 py-1.5 text-xs cursor-pointer transition-colors"
-          [style.color]="'var(--text-secondary)'"
-          (mouseenter)="
-            $any($event.target).style.backgroundColor = 'var(--hover-bg)'; $any($event.target).style.color = 'var(--text-primary)'
-          "
-          (mouseleave)="
-            $any($event.target).style.backgroundColor = 'transparent'; $any($event.target).style.color = 'var(--text-secondary)'
-          "
-          (click)="menuSelect.emit(item.action)"
-        >
-          {{ item.label }}
+        @if (item.separator) {
+          <div class="context-menu-separator"></div>
+        }
+        <button class="context-menu-item" (click)="menuSelect.emit(item.action)">
+          <span class="context-menu-icon">
+            @if (item.icon) {
+              <span class="material-symbols-outlined" style="font-size: 16px; font-variation-settings: 'opsz' 20, 'wght' 300;">{{
+                item.icon
+              }}</span>
+            }
+          </span>
+          <span class="context-menu-label">{{ item.label }}</span>
         </button>
       }
     </div>
   `,
+  styles: `
+    .context-menu {
+      min-width: 180px;
+      padding: 4px 0;
+      border-radius: 6px;
+      background-color: var(--context-bg);
+      border: 1px solid var(--context-border);
+      box-shadow: var(--context-shadow);
+      color: var(--text-primary);
+    }
+
+    .context-menu-item {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 4px 12px 4px 4px;
+      margin: 0;
+      border: none;
+      background: transparent;
+      color: var(--text-secondary);
+      font-size: 12px;
+      line-height: 1.4;
+      cursor: pointer;
+      border-radius: 0;
+      text-align: left;
+      gap: 0;
+    }
+
+    .context-menu-item:hover {
+      background-color: var(--hover-bg);
+      color: var(--text-primary);
+    }
+
+    .context-menu-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      flex-shrink: 0;
+      color: var(--text-muted);
+    }
+
+    .context-menu-item:hover .context-menu-icon {
+      color: var(--text-primary);
+    }
+
+    .context-menu-label {
+      flex: 1;
+    }
+
+    .context-menu-separator {
+      height: 1px;
+      margin: 4px 0;
+      background-color: var(--context-border);
+    }
+  `,
 })
 export class ContextMenuComponent {
   readonly x = input.required<number>();

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

@@ -1,5 +1,5 @@
-<div class="panel">
-  <div class="h-full scrollbox-y">
+<div class="panel grid" [style.grid-template-rows]="db.totalPages() > 1 ? '1fr 32px' : '1fr'">
+  <div class="overflow-hidden scrollbox-y">
     <table class="w-full border-separate border-spacing-0">
       <thead
         class="sticky top-0 z-10"
@@ -93,4 +93,84 @@
       </tbody>
     </table>
   </div>
+  @if (db.totalPages() > 1) {
+    <div
+      class="flex items-center gap-2 px-3"
+      [style.background-color]="'var(--surface-2)'"
+      [style.border-top]="'1px solid var(--border-subtle)'"
+    >
+      <div class="flex items-center gap-0.5 text-[11px]">
+        <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"
+          (click)="db.firstPage()"
+        >
+          <span
+            class="material-symbols-outlined text-sm"
+            style="
+              font-variation-settings:
+                'opsz' 20,
+                'wght' 300;
+            "
+            >first_page</span
+          >
+        </button>
+        <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"
+          (click)="db.prevPage()"
+        >
+          <span
+            class="material-symbols-outlined text-sm"
+            style="
+              font-variation-settings:
+                'opsz' 20,
+                'wght' 300;
+            "
+            >chevron_left</span
+          >
+        </button>
+        <span class="px-1.5 select-none" [style.color]="'var(--text-muted)'">{{ db.currentPage() }} / {{ db.totalPages() }}</span>
+        <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()"
+          (click)="db.nextPage()"
+        >
+          <span
+            class="material-symbols-outlined text-sm"
+            style="
+              font-variation-settings:
+                'opsz' 20,
+                'wght' 300;
+            "
+            >chevron_right</span
+          >
+        </button>
+        <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()"
+          (click)="db.lastPage()"
+        >
+          <span
+            class="material-symbols-outlined text-sm"
+            style="
+              font-variation-settings:
+                'opsz' 20,
+                'wght' 300;
+            "
+            >last_page</span
+          >
+        </button>
+      </div>
+      <span class="text-[11px]" [style.color]="'var(--text-muted)'"> {{ db.storeCount() }} fonts </span>
+    </div>
+  }
 </div>

package/src/app/shared/components/{inspector/inspector.component.html → glyphs/glyphs.component.html}

@@ -133,7 +133,7 @@
           }
         </div>
       } @else {
-        <p class="text-center py-8 text-xs" [style.color]="'var(--text-muted)'">Select a font to inspect glyphs</p>
+        <p class="text-center py-8 text-xs" [style.color]="'var(--text-muted)'">Select a font to view glyphs</p>
       }
     </div>
   </div>

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

@@ -0,0 +1,60 @@
+import { Component, inject, signal, computed, effect } from '@angular/core';
+import { DatabaseService, PresentationService } from '../../../core/services';
+
+const PAGE_SIZE = 200;
+
+@Component({
+  selector: 'app-glyphs',
+  standalone: true,
+  templateUrl: './glyphs.component.html',
+})
+export class GlyphsComponent {
+  readonly db = inject(DatabaseService);
+  private readonly presentation = inject(PresentationService);
+
+  readonly currentPage = signal(1);
+  readonly selectedGlyph = this.presentation.selectedGlyph;
+
+  readonly totalPages = computed(() => Math.max(1, Math.ceil(this.db.glyphs().length / PAGE_SIZE)));
+
+  readonly pageGlyphs = computed(() => {
+    const glyphs = this.db.glyphs();
+    const start = (this.currentPage() - 1) * PAGE_SIZE;
+    return glyphs.slice(start, start + PAGE_SIZE);
+  });
+
+  readonly fontFamily = computed(() => {
+    const store = this.db.store();
+    return store ? store.full_name || store.font_family || '' : '';
+  });
+
+  constructor() {
+    // Reset selection when user switches to a different font.
+    // Skip the null → savedId transition on startup (restore, not a switch).
+    let lastStoreId: number | null = null;
+    effect(() => {
+      const storeId = this.db.storeId();
+      if (lastStoreId !== null && storeId !== lastStoreId) {
+        this.currentPage.set(1);
+        this.presentation.selectedGlyph.set(null);
+      }
+      lastStoreId = storeId;
+    });
+
+    // Navigate to the correct page for the restored/selected glyph.
+    effect(() => {
+      const glyphs = this.db.glyphs();
+      const selected = this.presentation.selectedGlyph();
+      if (selected !== null && glyphs.length) {
+        const index = glyphs.indexOf(selected);
+        if (index >= 0) {
+          this.currentPage.set(Math.floor(index / PAGE_SIZE) + 1);
+        }
+      }
+    });
+  }
+
+  toChar(codePoint: number): string {
+    return String.fromCodePoint(codePoint);
+  }
+}

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

@@ -4,8 +4,9 @@ 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 './inspector/inspector.component';
+export * from './glyphs/glyphs.component';
 export * from './search/search.component';
 export * from './spinner/spinner.component';
 export * from './waterfall/waterfall.component';