fontastic 1.0.0 → 1.0.1

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 {
@@ -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' },
+    ];
+
+    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/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/index.ts

@@ -4,6 +4,7 @@ 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 './search/search.component';

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

@@ -0,0 +1,94 @@
+<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="card-header">
+      <div class="card-title">
+        <h3>{{ smartCollection ? 'Edit Smart Collection' : 'New Smart Collection' }}</h3>
+      </div>
+      <div class="card-tools"></div>
+    </div>
+    <div class="card-body">
+      <div class="mb-4">
+        <label class="form-label" for="scTitle">Name</label>
+        <input
+          type="text"
+          class="form-input w-full"
+          id="scTitle"
+          placeholder="Smart Collection name"
+          [(ngModel)]="title"
+          (keyup.escape)="cancel()"
+        />
+      </div>
+
+      <div class="mb-4">
+        <label class="form-label">Match</label>
+        <select class="form-input" [(ngModel)]="matchType">
+          <option value="AND">All rules (AND)</option>
+          <option value="OR">Any rule (OR)</option>
+        </select>
+      </div>
+
+      <div class="mb-2">
+        <label class="form-label">Rules</label>
+      </div>
+
+      <div class="space-y-2 mb-4 max-h-[300px] overflow-y-auto">
+        @for (rule of rules; track $index; let i = $index) {
+          <div class="flex items-center gap-2">
+            <select class="form-input flex-1" [(ngModel)]="rule.field" (ngModelChange)="onFieldChange(rule)">
+              @for (f of fieldOptions; track f.value) {
+                <option [value]="f.value">{{ f.label }}</option>
+              }
+            </select>
+
+            <select class="form-input w-[120px]" [(ngModel)]="rule.operator">
+              @for (op of getOperators(rule.field); track op.value) {
+                <option [value]="op.value">{{ op.label }}</option>
+              }
+            </select>
+
+            @switch (getFieldType(rule.field)) {
+              @case ('enum') {
+                <select class="form-input flex-1" [(ngModel)]="rule.value">
+                  @for (opt of getEnumOptions(rule.field); track opt.value) {
+                    <option [value]="opt.value">{{ opt.label }}</option>
+                  }
+                </select>
+              }
+              @case ('boolean') {
+                <select class="form-input flex-1" [(ngModel)]="rule.value">
+                  <option [ngValue]="1">Yes</option>
+                  <option [ngValue]="0">No</option>
+                </select>
+              }
+              @case ('numeric') {
+                <input type="number" class="form-input flex-1" [(ngModel)]="rule.value" placeholder="Value" />
+              }
+              @case ('date') {
+                <input type="date" class="form-input flex-1" [(ngModel)]="rule.value" />
+              }
+              @default {
+                <input type="text" class="form-input flex-1" [(ngModel)]="rule.value" placeholder="Value" />
+              }
+            }
+
+            <button class="btn btn-sm btn-default px-2" (click)="removeRule(i)" [disabled]="rules.length <= 1" title="Remove rule">
+              <span class="material-symbols-outlined" style="font-size: 16px">remove</span>
+            </button>
+          </div>
+        }
+      </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>
+    <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-theme" (click)="save()">Save</button>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,136 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import type { SmartCollection } from '@main/database/entity/SmartCollection.schema';
+import type { SmartCollectionRule } from '@main/types';
+
+interface FieldOption {
+  value: string;
+  label: string;
+  type: 'text' | 'boolean' | 'numeric' | 'enum' | 'date';
+  options?: { value: string; label: string }[];
+}
+
+const FIELD_OPTIONS: FieldOption[] = [
+  { value: 'font_family', label: 'Font Family', type: 'text' },
+  { value: 'font_subfamily', label: 'Font Subfamily', type: 'text' },
+  { value: 'full_name', label: 'Full Name', type: 'text' },
+  { value: 'designer', label: 'Designer', type: 'text' },
+  { value: 'manufacturer', label: 'Manufacturer', type: 'text' },
+  { value: 'copyright', label: 'Copyright', type: 'text' },
+  { value: 'license', label: 'License', type: 'text' },
+  { value: 'version', label: 'Version', type: 'text' },
+  { value: 'post_script_name', label: 'PostScript Name', type: 'text' },
+  { value: 'file_name', label: 'File Name', type: 'text' },
+  {
+    value: 'file_type',
+    label: 'File Type',
+    type: 'enum',
+    options: [
+      { value: 'font/ttf', label: 'TrueType (TTF)' },
+      { value: 'font/otf', label: 'OpenType (OTF)' },
+      { value: 'font/woff', label: 'WOFF' },
+      { value: 'font/woff2', label: 'WOFF2' },
+    ],
+  },
+  { value: 'favorite', label: 'Favorite', type: 'boolean' },
+  { value: 'system', label: 'System Font', type: 'boolean' },
+  { value: 'installable', label: 'Installable', type: 'boolean' },
+  { value: 'file_size', label: 'File Size (bytes)', type: 'numeric' },
+  { value: 'created', label: 'Date Added', type: 'date' },
+];
+
+const OPERATORS_BY_TYPE: Record<string, { value: string; label: string }[]> = {
+  text: [
+    { value: 'contains', label: 'contains' },
+    { value: 'equals', label: 'equals' },
+    { value: 'starts_with', label: 'starts with' },
+    { value: 'ends_with', label: 'ends with' },
+  ],
+  boolean: [
+    { value: 'is', label: 'is' },
+    { value: 'is_not', label: 'is not' },
+  ],
+  numeric: [
+    { value: 'greater_than', label: 'greater than' },
+    { value: 'less_than', label: 'less than' },
+    { value: 'equals', label: 'equals' },
+  ],
+  enum: [{ value: 'equals', label: 'equals' }],
+  date: [
+    { value: 'greater_than', label: 'after' },
+    { value: 'less_than', label: 'before' },
+  ],
+};
+
+@Component({
+  selector: 'app-rule-builder',
+  standalone: true,
+  imports: [FormsModule],
+  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() cancelled = new EventEmitter<void>();
+
+  title = '';
+  matchType: string = 'AND';
+  rules: SmartCollectionRule[] = [];
+
+  readonly fieldOptions = FIELD_OPTIONS;
+
+  ngOnInit(): void {
+    if (this.smartCollection) {
+      this.title = this.smartCollection.title;
+      this.matchType = this.smartCollection.match_type;
+      this.rules = JSON.parse(this.smartCollection.rules);
+    } else {
+      this.rules = [{ field: 'font_family', operator: 'contains', value: '' }];
+    }
+  }
+
+  getOperators(fieldValue: string): { value: string; label: string }[] {
+    const field = FIELD_OPTIONS.find((f) => f.value === fieldValue);
+    return OPERATORS_BY_TYPE[field?.type ?? 'text'] ?? OPERATORS_BY_TYPE['text'];
+  }
+
+  getFieldType(fieldValue: string): string {
+    return FIELD_OPTIONS.find((f) => f.value === fieldValue)?.type ?? 'text';
+  }
+
+  getEnumOptions(fieldValue: string): { value: string; label: string }[] {
+    return FIELD_OPTIONS.find((f) => f.value === fieldValue)?.options ?? [];
+  }
+
+  onFieldChange(rule: SmartCollectionRule): void {
+    const operators = this.getOperators(rule.field);
+    rule.operator = operators[0]?.value ?? 'contains';
+    const type = this.getFieldType(rule.field);
+    if (type === 'boolean') {
+      rule.value = 1;
+    } else if (type === 'enum') {
+      const options = this.getEnumOptions(rule.field);
+      rule.value = options[0]?.value ?? '';
+    } else {
+      rule.value = '';
+    }
+  }
+
+  addRule(): void {
+    this.rules.push({ field: 'font_family', operator: 'contains', value: '' });
+  }
+
+  removeRule(index: number): void {
+    this.rules.splice(index, 1);
+  }
+
+  save(): void {
+    const trimmedTitle = this.title.trim();
+    if (!trimmedTitle || this.rules.length === 0) return;
+    this.saved.emit({ title: trimmedTitle, rules: this.rules, match_type: this.matchType });
+  }
+
+  cancel(): void {
+    this.cancelled.emit();
+  }
+}

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

@@ -1,86 +1,5 @@
 <div class="panel">
   <div class="h-full flex items-center justify-around px-3">
-    <div class="flex-1 flex items-center gap-3">
-      @if (db.totalPages() > 1) {
-        <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)'">
-        @if (db.storeCount()) {
-          {{ db.storeCount() }} fonts
-        }
-      </span>
-    </div>
-
     <div class="flex-1 flex items-center justify-center gap-3">
       <input
         type="text"

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

@@ -1,5 +1,5 @@
 import { Component, inject, computed, ElementRef } from '@angular/core';
-import { DatabaseService, NewsService, PresentationService } from '../../../core/services';
+import { NewsService, PresentationService } from '../../../core/services';
 
 @Component({
   selector: 'app-toolbar',
@@ -7,7 +7,6 @@ import { DatabaseService, NewsService, PresentationService } from '../../../core
   templateUrl: './toolbar.component.html',
 })
 export class ToolbarComponent {
-  readonly db = inject(DatabaseService);
   readonly presentation = inject(PresentationService);
   readonly news = inject(NewsService);
   private el = inject(ElementRef);

package/src/styles/base/variables.css

@@ -3,6 +3,22 @@
   --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
 }
 
+:root {
+  --panel-width: 200px;
+}
+
+@media (min-width: 1440px) {
+  :root {
+    --panel-width: 250px;
+  }
+}
+
+@media (min-width: 1920px) {
+  :root {
+    --panel-width: 300px;
+  }
+}
+
 /* ---------------------------------------------------------------------------
    Light mode — warm stone neutrals
    --------------------------------------------------------------------------- */