fontastic 0.1.7 → 1.0.0

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

@@ -1,14 +1,32 @@
-<div class="application main" [class.navigation]="navigationEnabled" [class.aside]="asideEnabled">
-  <app-header></app-header>
-  <app-navigation></app-navigation>
-  <main>
-    <router-outlet></router-outlet>
-  </main>
-  <app-aside></app-aside>
-  <app-footer></app-footer>
-</div>
-
-<app-glyph></app-glyph>
-<app-settings></app-settings>
-<app-update-collection></app-update-collection>
-<app-create-collection></app-create-collection>
+<div class="grid h-screen grid-rows-[56px_1fr_32px]" [style.background-color]="'var(--surface-0)'">
+  <app-header
+    class="col-span-full"
+    [style.background-color]="'var(--surface-2)'"
+    [style.border-bottom]="'1px solid var(--border-subtle)'"
+  />
+  <div
+    class="grid overflow-hidden"
+    [style.grid-template-columns]="
+      (presentation.navigationEnabled() ? '280px ' : '') + '1fr' + (presentation.asideEnabled() ? ' 280px' : '')
+    "
+  >
+    @if (presentation.navigationEnabled()) {
+      <app-navigation
+        class="overflow-auto"
+        [style.background-color]="'var(--surface-1)'"
+        [style.border-right]="'1px solid var(--border-subtle)'"
+      />
+    }
+    <div class="overflow-auto" [style.background-color]="'var(--surface-1)'">
+      <router-outlet />
+    </div>
+    @if (presentation.asideEnabled()) {
+      <app-aside
+        class="overflow-auto"
+        [style.background-color]="'var(--surface-1)'"
+        [style.border-left]="'1px solid var(--border-subtle)'"
+      />
+    }
+  </div>
+  <app-footer class="col-span-full" [style.background-color]="'var(--surface-2)'" [style.border-top]="'1px solid var(--border-subtle)'" />
+</div>

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

@@ -1,23 +1,19 @@
-import { Component, OnInit } from '@angular/core';
-import { PresentationService } from '@app/core/services';
-
-@Component({
-  selector: 'app-layout',
-  templateUrl: './layout.component.html',
-  styleUrls: ['./layout.component.scss']
-})
-export class LayoutComponent implements OnInit {
-
-  navigationEnabled = true;
-  asideEnabled = true;
-
-  constructor(
-    private presentationService: PresentationService
-  ) { }
-
-  ngOnInit() {
-    this.presentationService._navigationEnabled.subscribe((result) => this.navigationEnabled = result);
-    this.presentationService._asideEnabled.subscribe((result) => this.asideEnabled = result);
-  }
-
-}
+import { Component, inject } from '@angular/core';
+
+import { RouterOutlet } from '@angular/router';
+import { HeaderComponent } from './header/header.component';
+import { NavigationComponent } from './navigation/navigation.component';
+import { AsideComponent } from './aside/aside.component';
+import { FooterComponent } from './footer/footer.component';
+import { DatabaseService, PresentationService } from '../core/services';
+
+@Component({
+  selector: 'app-layout',
+  standalone: true,
+  imports: [RouterOutlet, HeaderComponent, NavigationComponent, AsideComponent, FooterComponent],
+  templateUrl: './layout.component.html',
+})
+export class LayoutComponent {
+  readonly db = inject(DatabaseService);
+  readonly presentation = inject(PresentationService);
+}

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

@@ -0,0 +1,46 @@
+<div
+  class="grid h-full overflow-hidden"
+  [style.grid-template-rows]="
+    (presentation.searchEnabled() ? '1fr ' : '') +
+    (presentation.previewEnabled() ? '1fr ' : '') +
+    (presentation.inspectEnabled() ? '1fr ' : '') +
+    (presentation.waterfallEnabled() ? '1fr ' : '') +
+    (presentation.toolbarEnabled() ? '42px ' : '') +
+    (presentation.gridEnabled() ? '1fr' : '')
+  "
+>
+  @if (presentation.searchEnabled()) {
+    <app-panel class="overflow-auto" [style.border-bottom]="'1px solid var(--border-subtle)'">
+      <app-search />
+    </app-panel>
+  }
+  @if (presentation.previewEnabled()) {
+    <app-panel class="overflow-auto" [style.border-bottom]="'1px solid var(--border-subtle)'">
+      <app-preview />
+    </app-panel>
+  }
+  @if (presentation.inspectEnabled()) {
+    <app-panel class="overflow-auto" [style.border-bottom]="'1px solid var(--border-subtle)'">
+      <app-inspector />
+    </app-panel>
+  }
+  @if (presentation.waterfallEnabled()) {
+    <app-panel class="overflow-auto" [style.border-bottom]="'1px solid var(--border-subtle)'">
+      <app-waterfall />
+    </app-panel>
+  }
+  @if (presentation.toolbarEnabled()) {
+    <app-panel
+      class="overflow-hidden"
+      [style.border-bottom]="'1px solid var(--border-subtle)'"
+      [style.background-color]="'var(--surface-2)'"
+    >
+      <app-toolbar />
+    </app-panel>
+  }
+  @if (presentation.gridEnabled()) {
+    <app-panel class="overflow-hidden">
+      <app-datagrid />
+    </app-panel>
+  }
+</div>

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

@@ -0,0 +1,20 @@
+import { Component, inject } from '@angular/core';
+
+import { PanelComponent } from '../../shared/components/panel/panel.component';
+import { PreviewComponent } from '../../shared/components/preview/preview.component';
+import { DatagridComponent } from '../../shared/components/datagrid/datagrid.component';
+import { ToolbarComponent } from '../../shared/components/toolbar/toolbar.component';
+import { InspectorComponent } from '../../shared/components/inspector/inspector.component';
+import { SearchComponent } from '../../shared/components/search/search.component';
+import { WaterfallComponent } from '../../shared/components/waterfall/waterfall.component';
+import { PresentationService } from '../../core/services';
+
+@Component({
+  selector: 'app-main',
+  standalone: true,
+  imports: [PanelComponent, PreviewComponent, DatagridComponent, ToolbarComponent, InspectorComponent, SearchComponent, WaterfallComponent],
+  templateUrl: './main.component.html',
+})
+export class MainComponent {
+  readonly presentation = inject(PresentationService);
+}

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

@@ -0,0 +1,51 @@
+import { Component, inject, computed, Signal } from '@angular/core';
+import { DatabaseService } from '../../../core/services';
+
+interface LibraryItem {
+  label: string;
+  icon: string;
+  filter: string;
+  count: Signal<number>;
+}
+
+@Component({
+  selector: 'app-library',
+  standalone: true,
+  template: `
+    <ul class="flex flex-col py-0.5">
+      @for (item of items; track item.filter) {
+        <li>
+          <a
+            class="flex items-center px-3.5 py-1 text-xs font-normal cursor-pointer transition-colors"
+            [style.background-color]="db.activeFilter() === item.filter ? 'var(--selected-bg)' : 'transparent'"
+            [style.color]="db.activeFilter() === item.filter ? 'var(--text-primary)' : 'inherit'"
+            (click)="db.selectFilter(item.filter)"
+            (mouseenter)="
+              $any($event.target).style.backgroundColor = db.activeFilter() === item.filter ? 'var(--selected-bg)' : 'var(--hover-bg)'
+            "
+            (mouseleave)="
+              $any($event.target).style.backgroundColor = db.activeFilter() === item.filter ? 'var(--selected-bg)' : 'transparent'
+            "
+          >
+            <span
+              class="material-symbols-outlined icon-sm mr-2"
+              style="font-variation-settings: 'opsz' 20, 'wght' 300; color: var(--text-muted)"
+              >{{ item.icon }}</span
+            >
+            <span class="flex-1" [title]="item.label">{{ item.label }}</span>
+            <span class="text-[11px]" [style.color]="'var(--text-muted)'">{{ item.count() }}</span>
+          </a>
+        </li>
+      }
+    </ul>
+  `,
+})
+export class LibraryComponent {
+  readonly db = inject(DatabaseService);
+
+  readonly items: LibraryItem[] = [
+    { label: 'All Fonts', icon: 'folder', filter: 'all', count: computed(() => this.db.systemStats()?.rowCount ?? 0) },
+    { label: 'My Favorites', icon: 'favorite', filter: 'favorites', count: computed(() => this.db.systemStats()?.favoriteCount ?? 0) },
+    { label: 'System Fonts', icon: 'computer', filter: 'system', count: computed(() => this.db.systemStats()?.systemCount ?? 0) },
+  ];
+}

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

@@ -1,142 +1,126 @@
-<nav class="component border-right">
-  <div class="component__panel">
-
-    <figure class="figure-stats border-bottom" [class.collapsed]="statsCollapsed === true">
-
-      <figcaption class="border-bottom">
-        <span class="material-icons" (click)="toggleCollapse($event)" data-figure-stats>
-          <ng-container *ngIf="statsCollapsed === true; else elseStatsCollapsed">
-            arrow_drop_down
-          </ng-container>
-          <ng-template #elseStatsCollapsed>
-            arrow_right
-          </ng-template>
-        </span>
-        <span class="grow">System Statistics</span>
-        <span class="flex items-center justify-end mr-1 material-icons-rounded">
-          <span class="material-icons cursor-pointer" (click)="toggleFigureCollapse()" title="Collapse">more_horiz</span>
-        </span>
-      </figcaption>
-
-      <ul class="statistics">
-        <li>
-          <a href="#" (click)="handleClickAll($event)">
-            <span class="material-icons">playlist_add</span>
-            <span class="statistics__title ml-[5px] w-full" title="All Collections">Font Count</span>
-            <span class="statistics__count">{{ rowCount }}</span>
-          </a>
-        </li>
-        <li>
-          <a href="#" (click)="handleClickFavorites($event)">
-            <span class="material-icons">playlist_add</span>
-            <span class="statistics__title ml-[5px] w-full" title="My Favorites">My Favorites</span>
-            <span class="statistics__count">{{ favoriteCount }}</span>
-          </a>
-        </li>
-        <li>
-          <a href="#" (click)="handleClickSystem($event)">
-            <span class="material-icons">playlist_add</span>
-            <span class="statistics__title ml-[5px] w-full" title="System Fonts">System Fonts</span>
-            <span class="statistics__count">{{ systemCount }}</span>
-          </a>
-        </li>
-        <li>
-          <a href="#" (click)="handleClickActivated($event)">
-            <span class="material-icons">playlist_add</span>
-            <span class="statistics__title ml-[5px] w-full" title="Activated Fonts">Activated Fonts</span>
-            <span class="statistics__count">{{ activatedCount }}</span>
-          </a>
-        </li>
-      </ul>
-
-    </figure>
-
-    <figure class="figure-folders" [class.collapsed]="foldersCollapsed === true">
-      <figcaption class="border-bottom">
-        <span class="material-icons" (click)="toggleCollapse($event)" data-figure-folders>
-          <ng-container *ngIf="foldersCollapsed === true; else elseFoldersCollapsed">
-            arrow_drop_down
-          </ng-container>
-          <ng-template #elseFoldersCollapsed>
-            arrow_right
-          </ng-template>
-        </span>
-        <span class="grow">Font Collections</span>
-        <span class="flex items-center justify-end mr-1 material-icons-rounded">
-          <span class="material-icons cursor-pointer" (click)="toggleDetailsOpen()" title="Collapse">more_horiz</span>
-        </span>
-      </figcaption>
-
-      <div *ngIf="resultSet.length" class="flex flex-col w-full h-full overflow-hidden">
-
-        <div class="hover-scrollbox-x hover-scrollbox-y p-0">
-          <ng-template #recursiveList let-items>
-            <ng-container *ngFor="let item of items">
-              <details [attr.open]="item.collapsed ? '1' : null" [attr.data-id]="item.id">
-
-                <summary [class.selected]="item.enabled">
-                  <span class="flex items-center justify-center">
-                    <span class="material-icons collapsed-icon cursor-pointer" (click)="handleCollapse($event, item.id)"></span>
-                  </span>
-                  <span class="flex grow w-full cursor-pointer" [attr.title]="item.title" (click)="handleNavigate($event, item.id)">{{item.title}}</span>
-                  <span class="flex items-center justify-center mr-1.5" *ngIf="item.enabled" >
-                    <span class="material-icons cursor-pointer" (click)="handleUpdate($event)" [attr.data-id]="item.id" title="Update Collection">more_horiz</span>
-                  </span>
-                </summary>
-
-                <ng-container *ngIf="item.children.length; else elseif1">
-                  <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
-                </ng-container>
-                <ng-template #elseif1>
-                  <ul>
-                    <li class="flex items-center justify-start"><span>Font count:</span>
-                      <span>{{item.storeCount}}</span>
-                    </li>
-                    <li class="flex items-center justify-start"><span>Installable:</span>
-                      <span>{{item.installableCount}}</span>
-                    </li>
-                    <li class="flex items-center justify-start"><span>Activated:</span>
-                      <span>{{item.activatedCount}}</span>
-                    </li>
-                    <li class="flex items-center justify-start"><span>Favorited:</span>
-                      <span>{{item.favoriteCount}}</span>
-                    </li>
-                    <li class="flex items-center justify-start"><span>Temporary :</span>
-                      <span>{{item.temporaryCount}}</span>
-                    </li>
-                  </ul>
-                </ng-template>
-
-              </details>
-            </ng-container>
-          </ng-template>
-
-          <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: resultSet }"></ng-container>
-
-        </div>
-
-      </div>
-    </figure>
-
-    <figure class="figure-options hidden" [class.collapsed]="optionsCollapsed === true">
-      <figcaption class="border-bottom">
-        <span class="material-icons" (click)="toggleCollapse($event)" data-figure-options>
-          <ng-container *ngIf="optionsCollapsed === true; else elseOptionsCollapsed">
-            arrow_drop_down
-          </ng-container>
-          <ng-template #elseOptionsCollapsed>
-            arrow_right
-          </ng-template>
-        </span>
-        <span class="grow">Folder Options</span>
-        <span class="flex items-center justify-end mr-3">{{resultSet.length}}</span>
-      </figcaption>
-      <ul class="w-full py-2 hidden">
-        <li class="py-1 px-4">Sort collection</li>
-        <li class="py-1 px-4">Sort collection</li>
-        <li class="py-1 px-4">Sort collection</li>
-      </ul>
-    </figure>
-
-  </div>
-</nav>
+<nav class="panel">
+  <div class="h-full scrollbox-y flex flex-col text-xs" [style.color]="'var(--text-secondary)'">
+    <app-collapsible-panel title="Library">
+      <app-library />
+    </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"
+        [style.color]="'var(--text-muted)'"
+        style="
+          font-size: 18px;
+          font-variation-settings:
+            'opsz' 20,
+            'wght' 300;
+        "
+        [title]="allExpanded ? 'Collapse All' : 'Expand All'"
+        (click)="toggleExpandAll($event)"
+        >{{ allExpanded ? 'unfold_less' : 'unfold_more' }}</span
+      >
+      <ul class="flex-1 overflow-auto flex flex-col py-0.5">
+        <ng-container *ngTemplateOutlet="subtree; context: { $implicit: tree(), level: 0 }" />
+        <li
+          class="flex-1 min-h-6"
+          [style.background-color]="dropTargetId === 0 ? 'var(--hover-bg)' : 'transparent'"
+          [style.outline]="dropTargetId === 0 ? '1px dashed var(--text-muted)' : 'none'"
+          (dragover)="onDragOver($event, 0)"
+          (dragleave)="onDragLeave($event, 0)"
+          (drop)="onDrop($event, 0)"
+        ></li>
+      </ul>
+    </app-collapsible-panel>
+
+    <app-news-stats />
+
+    <ng-template #subtree let-nodes let-level="level">
+      @for (node of nodes; track node.collection.id) {
+        <li
+          draggable="true"
+          (dragstart)="onDragStart($event, node)"
+          (dragend)="onDragEnd()"
+          (dragover)="onDragOver($event, node.collection.id)"
+          (dragleave)="onDragLeave($event, node.collection.id)"
+          (drop)="onDrop($event, node.collection.id)"
+        >
+          <a
+            class="flex items-center pr-3 py-1 text-xs font-normal cursor-pointer transition-colors"
+            [style.padding-left.px]="14 + level * 14"
+            [style.background-color]="
+              dropTargetId === node.collection.id && dropPosition === 'into'
+                ? 'var(--hover-bg)'
+                : isSelected(node.collection)
+                  ? 'var(--selected-bg)'
+                  : 'transparent'
+            "
+            [style.color]="isSelected(node.collection) ? 'var(--text-primary)' : 'inherit'"
+            [style.outline]="dropTargetId === node.collection.id && dropPosition === 'into' ? '1px dashed var(--text-muted)' : 'none'"
+            [style.border-top]="dropTargetId === node.collection.id && dropPosition === 'before' ? '2px solid var(--text-muted)' : 'none'"
+            [style.border-bottom]="dropTargetId === node.collection.id && dropPosition === 'after' ? '2px solid var(--text-muted)' : 'none'"
+            (click)="selectCollection(node.collection)"
+            (contextmenu)="onContextMenu($event, node.collection)"
+            (mouseenter)="
+              $any($event.target).style.backgroundColor = isSelected(node.collection) ? 'var(--selected-bg)' : 'var(--hover-bg)'
+            "
+            (mouseleave)="$any($event.target).style.backgroundColor = isSelected(node.collection) ? 'var(--selected-bg)' : 'transparent'"
+          >
+            <span
+              class="material-symbols-outlined icon-sm mr-1 cursor-pointer transition-transform duration-200"
+              [style.color]="'var(--text-muted)'"
+              [class.rotate-90]="isExpanded(node.collection.id)"
+              style="
+                font-variation-settings:
+                  'opsz' 20,
+                  'wght' 300;
+              "
+              (click)="toggleExpand($event, node.collection.id)"
+              >chevron_right</span
+            >
+            @if (editingId === node.collection.id) {
+              <input
+                class="border rounded px-1 w-full outline-none text-xs"
+                [style.background-color]="'var(--input-bg)'"
+                [style.border-color]="'var(--input-border)'"
+                [style.color]="'var(--text-primary)'"
+                [(ngModel)]="editingTitle"
+                (blur)="saveEditing(node.collection.id)"
+                (keydown.enter)="saveEditing(node.collection.id)"
+                (keydown.escape)="cancelEditing()"
+                (click)="$event.stopPropagation()"
+                appAutofocus
+              />
+            } @else {
+              {{ node.collection.title }}
+            }
+          </a>
+          @if (node.children.length && isExpanded(node.collection.id)) {
+            <ul>
+              <ng-container *ngTemplateOutlet="subtree; context: { $implicit: node.children, level: level + 1 }" />
+            </ul>
+          }
+        </li>
+      }
+    </ng-template>
+
+    @if (contextMenu) {
+      <app-context-menu
+        [x]="contextMenu.x"
+        [y]="contextMenu.y"
+        [items]="contextMenuItems"
+        (menuSelect)="onContextMenuSelect($event)"
+        (menuClose)="closeContextMenu()"
+      />
+    }
+
+    @if (showCollectionDialog) {
+      <app-prompt-dialog
+        title="New Collection"
+        placeholder="Collection name"
+        confirmText="Create"
+        (confirmed)="onCollectionConfirmed($event)"
+        (cancelled)="onCollectionCancelled()"
+      />
+    }
+  </div>
+</nav>