fontastic 0.1.7 → 1.0.0

package/src/app/settings/system-info/system-info.component.ts

@@ -0,0 +1,42 @@
+import { Component, inject, signal, OnInit } from '@angular/core';
+import { MessageService } from '../../core/services';
+import { ChannelType } from '@main/enums';
+import type { SystemType } from '@main/types';
+
+@Component({
+  selector: 'app-settings-system-info',
+  standalone: true,
+  templateUrl: './system-info.component.html',
+})
+export class SettingsSystemInfoComponent implements OnInit {
+  private readonly message = inject(MessageService);
+
+  readonly systemSettings = signal<{ key: string; value: string }[]>([]);
+
+  ngOnInit() {
+    this.message.once(ChannelType.IPC_RESPONSE_SYSTEM_BOOT, (_event: any, config: any) => {
+      if (!config?.system) return;
+
+      const entries = Object.entries(config.system).map(([key, value]) => {
+        let display: string;
+        if (key === 'uptime') {
+          const u = value as SystemType['uptime'];
+          display = `${u.hours}h ${u.minutes}m ${u.seconds}s`;
+        } else if (typeof value === 'boolean') {
+          display = value ? 'Yes' : 'No';
+        } else if (typeof value === 'object' && value !== null) {
+          display = Object.entries(value as Record<string, unknown>)
+            .map(([k, v]) => `${k}: ${v}`)
+            .join(', ');
+        } else {
+          display = String(value);
+        }
+        return { key: key.replace(/_/g, ' ').toUpperCase(), value: display };
+      });
+
+      this.systemSettings.set(entries);
+    });
+
+    this.message.send(ChannelType.IPC_REQUEST_SYSTEM_BOOT);
+  }
+}

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

@@ -0,0 +1,15 @@
+<div class="card">
+  <div class="card-header">
+    <div class="card-title"><h3>Theme</h3></div>
+  </div>
+  <div class="card-body">
+    <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">
+        @for (t of themes; track t.key) {
+          <option [value]="t.key">{{ t.label }}</option>
+        }
+      </select>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,22 @@
+import { Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { PresentationService } from '../../core/services';
+
+@Component({
+  selector: 'app-settings-theme',
+  standalone: true,
+  imports: [FormsModule],
+  templateUrl: './theme.component.html',
+})
+export class SettingsThemeComponent {
+  readonly presentation = inject(PresentationService);
+
+  readonly themes = PresentationService.themes.map((key) => ({
+    key,
+    label: key.charAt(0).toUpperCase() + key.slice(1),
+  }));
+
+  onThemeChange(value: string) {
+    this.presentation.theme.set(value);
+  }
+}

package/src/app/shared/components/collapsible-panel/collapsible-panel.component.ts

@@ -0,0 +1,43 @@
+import { Component, input, model } from '@angular/core';
+
+@Component({
+  selector: 'app-collapsible-panel',
+  standalone: true,
+  template: `
+    <div class="flex flex-col min-h-0">
+      <button
+        class="flex items-center px-2.5 py-1.5 text-[10px] font-semibold uppercase tracking-widest cursor-pointer select-none w-full text-left transition-colors"
+        [style.background-color]="'var(--surface-2)'"
+        [style.border-top]="'1px solid var(--border-subtle)'"
+        [style.border-bottom]="'1px solid var(--border-subtle)'"
+        [style.color]="'var(--text-muted)'"
+        (click)="expanded.set(!expanded())"
+      >
+        <span
+          class="material-symbols-outlined icon-sm mr-1 transition-transform duration-200"
+          [class.rotate-90]="expanded()"
+          style="font-variation-settings: 'opsz' 20, 'wght' 500"
+        >
+          chevron_right
+        </span>
+        {{ title() }}
+        <span class="ml-auto flex items-center">
+          <ng-content select="[panelActions]" />
+        </span>
+      </button>
+      <div
+        class="grid transition-[grid-template-rows] duration-200 ease-in-out"
+        [class.grid-rows-[1fr]]="expanded()"
+        [class.grid-rows-[0fr]]="!expanded()"
+      >
+        <div class="overflow-hidden">
+          <ng-content />
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class CollapsiblePanelComponent {
+  readonly title = input.required<string>();
+  readonly expanded = model(true);
+}

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

@@ -0,0 +1,67 @@
+import { Component, input, output, ElementRef, HostListener, inject } from '@angular/core';
+
+export interface ContextMenuItem {
+  label: string;
+  action: string;
+  icon?: string;
+}
+
+@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)'"
+    >
+      @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 }}
+        </button>
+      }
+    </div>
+  `,
+})
+export class ContextMenuComponent {
+  readonly x = input.required<number>();
+  readonly y = input.required<number>();
+  readonly items = input.required<ContextMenuItem[]>();
+  readonly menuSelect = output<string>();
+  readonly menuClose = output<void>();
+
+  private el = inject(ElementRef);
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent) {
+    if (!this.el.nativeElement.contains(event.target)) {
+      this.menuClose.emit();
+    }
+  }
+
+  @HostListener('document:contextmenu', ['$event'])
+  onDocumentContextMenu(event: MouseEvent) {
+    if (!this.el.nativeElement.contains(event.target)) {
+      this.menuClose.emit();
+    }
+  }
+
+  @HostListener('document:keydown.escape')
+  onEscape() {
+    this.menuClose.emit();
+  }
+}

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

@@ -0,0 +1,96 @@
+<div class="panel">
+  <div class="h-full scrollbox-y">
+    <table class="w-full border-separate border-spacing-0">
+      <thead
+        class="sticky top-0 z-10"
+        [style.background-color]="'var(--surface-2)'"
+        [style.box-shadow]="'inset 0 -1px 0 0 var(--border-subtle)'"
+      >
+        <tr class="text-left text-[11px] uppercase tracking-wide" [style.color]="'var(--text-muted)'">
+          <th class="w-10 px-2 py-2 text-center font-medium"></th>
+          <th class="px-4 py-2 font-medium">Name</th>
+          <th class="px-4 py-2 font-medium">Family</th>
+          <th class="px-4 py-2 font-medium">Style</th>
+          <th class="px-4 py-2 font-medium">Type</th>
+          <th class="px-4 py-2 font-medium">Size</th>
+          <th class="px-4 py-2 font-medium">Version</th>
+          <th class="px-4 py-2 font-medium">Designer</th>
+          <th class="w-10 px-2 py-2 text-center font-medium"></th>
+          <th class="w-10 px-2 py-2 text-center font-medium"></th>
+          <th class="w-10 px-2 py-2 text-center font-medium"></th>
+        </tr>
+      </thead>
+      <tbody class="text-xs">
+        @for (store of db.stores(); track store.id) {
+          <tr
+            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'"
+            (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
+                class="inline-block h-3.5 w-3.5 rounded-full border-2 cursor-pointer"
+                [style.border-color]="db.storeId() === store.id ? 'var(--accent)' : 'var(--text-muted)'"
+                [style.background]="
+                  db.storeId() === store.id ? 'radial-gradient(circle, var(--accent) 40%, transparent 41%)' : 'transparent'
+                "
+                (click)="$event.stopPropagation(); selectStore(store.id)"
+              ></span>
+            </td>
+            <td class="px-4 py-1.5" [style.color]="'var(--text-primary)'">{{ store.full_name || store.file_name }}</td>
+            <td class="px-4 py-1.5" [style.color]="'var(--text-secondary)'">{{ store.font_family }}</td>
+            <td class="px-4 py-1.5" [style.color]="'var(--text-secondary)'">{{ store.font_subfamily }}</td>
+            <td class="px-4 py-1.5" [style.color]="'var(--text-secondary)'">{{ store.file_type }}</td>
+            <td class="px-4 py-1.5" [style.color]="'var(--text-secondary)'">{{ store.file_size_pretty }}</td>
+            <td class="px-4 py-1.5" [style.color]="'var(--text-secondary)'">{{ store.version }}</td>
+            <td class="px-4 py-1.5 max-w-48 truncate" [style.color]="'var(--text-secondary)'">{{ store.designer }}</td>
+            <td class="w-10 px-2 py-1.5 text-center">
+              <span
+                class="cursor-pointer select-none text-lg transition-colors"
+                [style.color]="store.favorite ? '#ef4444' : 'var(--text-muted)'"
+                (click)="toggleFavorite($event, store)"
+                title="Toggle favorite"
+              >
+                {{ store.favorite ? '&#9829;' : '&#9825;' }}
+              </span>
+            </td>
+            <td class="w-10 px-2 py-1.5 text-center">
+              <span
+                class="material-symbols-outlined cursor-pointer select-none transition-colors hover:opacity-80"
+                style="font-size: 18px"
+                [style.color]="'var(--text-muted)'"
+                (click)="openFileLocation($event, store)"
+                title="Reveal in Finder"
+              >
+                folder_open
+              </span>
+            </td>
+            <td class="w-10 px-2 py-1.5 text-center">
+              <span
+                class="material-symbols-outlined cursor-pointer select-none transition-colors hover:opacity-80"
+                style="font-size: 18px"
+                [style.color]="'var(--text-muted)'"
+                (click)="openFileViewer($event, store)"
+                title="Open with default app"
+              >
+                open_in_new
+              </span>
+            </td>
+          </tr>
+        } @empty {
+          <tr>
+            <td colspan="11" class="px-4 py-8 text-center" [style.color]="'var(--text-muted)'">Select a collection to view fonts</td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  </div>
+</div>

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

@@ -0,0 +1,49 @@
+import { Component, inject, effect, ElementRef } from '@angular/core';
+import { DatabaseService, MessageService } from '../../../core/services';
+
+@Component({
+  selector: 'app-datagrid',
+  standalone: true,
+  templateUrl: './datagrid.component.html',
+})
+export class DatagridComponent {
+  readonly db = inject(DatabaseService);
+  private messageService = inject(MessageService);
+  private el = inject(ElementRef);
+
+  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' });
+  }
+
+  toggleFavorite(event: Event, store: any) {
+    event.stopPropagation();
+    const newValue = store.favorite ? 0 : 1;
+    this.db.storeUpdate(store.id, { favorite: newValue }).then(() => {
+      this.db.stores.update((stores) => stores.map((s) => (s.id === store.id ? { ...s, favorite: newValue } : s)));
+      this.db.fetchSystemStats();
+    });
+  }
+
+  openFileLocation(event: Event, store: any) {
+    event.stopPropagation();
+    if (store?.file_path) {
+      this.messageService.showItemInFolder(store.file_path);
+    }
+  }
+
+  openFileViewer(event: Event, store: any) {
+    event.stopPropagation();
+    if (store?.file_path) {
+      this.messageService.openPath(store.file_path);
+    }
+  }
+}

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

@@ -1,17 +1,11 @@
-export * from './alert/alert.component';
-export * from './breadcrumbs/breadcrumbs.component';
-export * from './button/button.component';
-export * from './glyph-list/glyph-list.component';
-export * from './glyph-view/glyph-view.component';
-export * from './loading/loading.component';
-export * from './modal/modal.component';
-export * from './tables/tables.component';
-export * from './page-not-found/page-not-found.component';
-export * from './paginator/paginator.component';
-export * from './pairing/pairing.component';
-export * from './search/search.component';
-export * from './settings/settings.component';
-export * from './store/store.component';
-export * from './spinner/spinner.component';
-export * from './splash-screen/splash-screen.component';
-export * from './typescale/typescale.component';
+export * from './collapsible-panel/collapsible-panel.component';
+export * from './context-menu/context-menu.component';
+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 './toolbar/toolbar.component';
+export * from './inspector/inspector.component';
+export * from './search/search.component';
+export * from './spinner/spinner.component';
+export * from './waterfall/waterfall.component';

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

@@ -0,0 +1,140 @@
+<div class="panel">
+  <div class="h-full scrollbox-y flex flex-col">
+    <div
+      class="flex items-center justify-between px-4 py-1.5 shrink-0"
+      [style.border-bottom]="'1px solid var(--border-subtle)'"
+      [style.background-color]="'var(--surface-2)'"
+    >
+      <div class="text-[11px]" [style.color]="'var(--text-muted)'">
+        @if (db.store(); as store) {
+          {{ store.full_name || store.file_name }} — {{ db.glyphs().length }} glyphs
+        } @else {
+          No font selected
+        }
+      </div>
+      @if (totalPages() > 1) {
+        <div class="flex items-center gap-1 text-[11px]">
+          <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"
+            (click)="currentPage.set(1)"
+          >
+            <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]="currentPage() === 1"
+            [class.opacity-30]="currentPage() === 1"
+            (click)="currentPage.set(currentPage() - 1)"
+          >
+            <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)'">{{ currentPage() }} / {{ totalPages() }}</span>
+          <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()"
+            (click)="currentPage.set(currentPage() + 1)"
+          >
+            <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]="currentPage() === totalPages()"
+            [class.opacity-30]="currentPage() === totalPages()"
+            (click)="currentPage.set(totalPages())"
+          >
+            <span
+              class="material-symbols-outlined text-sm"
+              style="
+                font-variation-settings:
+                  'opsz' 20,
+                  'wght' 300;
+              "
+              >last_page</span
+            >
+          </button>
+        </div>
+      }
+    </div>
+
+    @if (selectedGlyph() !== null) {
+      <div class="flex items-center gap-5 px-4 py-3 shrink-0" [style.border-bottom]="'1px solid var(--border-subtle)'">
+        <div
+          class="flex items-center justify-center w-24 h-24 rounded-lg"
+          [style.border]="'1px solid var(--border-default)'"
+          [style.background-color]="'var(--surface-2)'"
+          [style.font-family]="fontFamily()"
+        >
+          <span class="text-6xl leading-none" [style.color]="'var(--text-primary)'">{{ toChar(selectedGlyph()!) }}</span>
+        </div>
+        <div class="flex flex-col gap-0.5 text-[11px]" [style.color]="'var(--text-secondary)'">
+          <p>
+            <span class="font-semibold" [style.color]="'var(--text-primary)'">Unicode</span> U+{{
+              selectedGlyph()!.toString(16).toUpperCase().padStart(4, '0')
+            }}
+          </p>
+          <p><span class="font-semibold" [style.color]="'var(--text-primary)'">Decimal</span> {{ selectedGlyph() }}</p>
+          <p><span class="font-semibold" [style.color]="'var(--text-primary)'">Character</span> {{ toChar(selectedGlyph()!) }}</p>
+          <p><span class="font-semibold" [style.color]="'var(--text-primary)'">HTML Entity</span> &amp;#{{ selectedGlyph() }};</p>
+        </div>
+      </div>
+    }
+
+    <div class="flex-1 overflow-auto p-3">
+      @if (pageGlyphs().length) {
+        <div class="grid grid-cols-[repeat(auto-fill,minmax(44px,1fr))] gap-1">
+          @for (codePoint of pageGlyphs(); track codePoint) {
+            <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'"
+              [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>
+          }
+        </div>
+      } @else {
+        <p class="text-center py-8 text-xs" [style.color]="'var(--text-muted)'">Select a font to inspect glyphs</p>
+      }
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,41 @@
+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);
+  }
+}

package/src/app/shared/components/page-not-found/page-not-found.component.html

@@ -1,3 +1 @@
-<p>
-  page-not-found works!
-</p>
+<p>page-not-found works!</p>

package/src/app/shared/components/page-not-found/page-not-found.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageNotFoundComponent } from './page-not-found.component';
+
+describe('PageNotFoundComponent', () => {
+  let component: PageNotFoundComponent;
+  let fixture: ComponentFixture<PageNotFoundComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PageNotFoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/shared/components/page-not-found/page-not-found.component.ts

@@ -1,12 +1,14 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-page-not-found',
-  templateUrl: './page-not-found.component.html',
-  styleUrls: ['./page-not-found.component.scss']
-})
-export class PageNotFoundComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit(): void {}
-}
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-not-found',
+  templateUrl: './page-not-found.component.html',
+  standalone: true,
+})
+export class PageNotFoundComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {
+    console.log('PageNotFoundComponent INIT');
+  }
+}

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

@@ -0,0 +1,5 @@
+<div class="panel">
+  <div class="h-full scrollbox-y">
+    <ng-content />
+  </div>
+</div>

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-panel',
+  standalone: true,
+  templateUrl: './panel.component.html',
+})
+export class PanelComponent {}

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

@@ -0,0 +1,36 @@
+<div class="panel">
+  <div class="h-full scrollbox-y flex flex-col gap-3 p-4">
+    @for (store of db.stores(); track store.id; let last = $last) {
+      <div
+        [class.border-b]="!last"
+        class="pb-3 cursor-pointer transition-colors rounded-sm"
+        [style.border-color]="'var(--border-subtle)'"
+        [id]="'preview-store-' + store.id"
+        [style.background-color]="db.storeId() === store.id ? 'var(--selected-bg)' : 'transparent'"
+        (click)="selectStore(store.id)"
+      >
+        <p class="text-[11px] mb-1 flex items-center" [style.color]="'var(--text-muted)'">
+          <span class="cursor-pointer hover:underline mr-1" [title]="store.file_path" (click)="openFileLocation($event, store)"
+            >{{ store.font_family }} {{ store.font_subfamily }}</span
+          >
+          <span>—</span>
+          <span class="cursor-pointer hover:underline ml-1" [title]="store.file_size" (click)="openFileViewer($event, store)"
+            >({{ store.file_size_pretty }})</span
+          >
+        </p>
+        <p
+          [style.font-size.px]="presentation.fontSize()"
+          [style.color]="presentation.fontColor()"
+          [style.background-color]="presentation.backgroundColor()"
+          [style.letter-spacing.px]="presentation.letterSpacing()"
+          [style.word-spacing.px]="presentation.wordSpacing()"
+          [style.font-family]="store.full_name || store.font_family"
+        >
+          {{ presentation.displayText() }}
+        </p>
+      </div>
+    } @empty {
+      <p class="text-center py-8 text-xs" [style.color]="'var(--text-muted)'">Select a collection to preview fonts</p>
+    }
+  </div>
+</div>