fontastic 1.0.0 → 1.0.2

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
    --------------------------------------------------------------------------- */

package/src/styles/components/spinner.css

@@ -1,7 +1,8 @@
 .app-spinner {
   @apply relative block rounded-full w-[19px] h-[19px] m-0 p-0 opacity-0 overflow-hidden border-4 border-[#00a0be];
   border-left: 4px solid #fff;
-  &.is-animating {
-    @apply opacity-100 animate-spin;
-  }
+}
+
+.app-spinner.is-animating {
+  @apply opacity-100 animate-spin;
 }

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

@@ -1,41 +0,0 @@
-import { Component, inject, signal, computed, effect } from '@angular/core';
-import { DatabaseService } from '../../../core/services';
-
-const PAGE_SIZE = 200;
-
-@Component({
-  selector: 'app-inspector',
-  standalone: true,
-  templateUrl: './inspector.component.html',
-})
-export class InspectorComponent {
-  readonly db = inject(DatabaseService);
-
-  readonly currentPage = signal(1);
-  readonly selectedGlyph = signal<number | null>(null);
-
-  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() {
-    effect(() => {
-      this.db.glyphs();
-      this.currentPage.set(1);
-      this.selectedGlyph.set(null);
-    });
-  }
-
-  toChar(codePoint: number): string {
-    return String.fromCodePoint(codePoint);
-  }
-}