fontastic 0.1.3 → 0.2.0

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

@@ -1,9 +1,35 @@
-<ng-container [ngSwitch]="componentName">
-  <aside class="component border-left">
-    <div class="component__panel">
-      <app-tables *ngSwitchCase="'tables'"></app-tables>
-      <app-search *ngSwitchCase="'search'"></app-search>
-      <app-store *ngSwitchCase="'store'"></app-store>
-    </div>
-  </aside>
-</ng-container>
+<div class="panel">
+  <div class="h-full scrollbox-y text-xs">
+    <app-collapsible-panel title="Font Details">
+      @if (db.store(); as store) {
+        <div class="flex flex-col p-3.5 gap-2.5">
+          @for (field of fields; track field.label; let last = $last) {
+            @if (field.value(store); as value) {
+              <div [class.border-b]="!last" class="border-dashed pb-2" [style.border-color]="'var(--border-subtle)'">
+                <p class="font-semibold text-[11px]" [style.color]="'var(--text-primary)'">{{ field.label }}</p>
+                <p class="break-all" [style.color]="'var(--text-secondary)'">{{ value }}</p>
+              </div>
+            }
+          }
+        </div>
+      } @else {
+        <p class="px-3.5 py-3" [style.color]="'var(--text-muted)'">Select a font to view details</p>
+      }
+    </app-collapsible-panel>
+
+    <app-collapsible-panel title="Metrics">
+      @if (db.fontMetrics(); as metrics) {
+        <div class="flex flex-col p-3.5 gap-2.5">
+          @for (field of metricFields; track field.label; let last = $last) {
+            <div [class.border-b]="!last" class="border-dashed pb-2" [style.border-color]="'var(--border-subtle)'">
+              <p class="font-semibold text-[11px]" [style.color]="'var(--text-primary)'">{{ field.label }}</p>
+              <p [style.color]="'var(--text-secondary)'">{{ field.value(metrics) }}</p>
+            </div>
+          }
+        </div>
+      } @else {
+        <p class="px-3.5 py-3" [style.color]="'var(--text-muted)'">No metrics available</p>
+      }
+    </app-collapsible-panel>
+  </div>
+</div>

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

@@ -1,26 +1,60 @@
-import { Component, OnInit } from '@angular/core';
-import { PresentationService } from '@app/core/services';
-
-@Component({
-  selector: 'app-aside',
-  templateUrl: './aside.component.html',
-  styleUrls: ['./aside.component.scss']
-})
-export class AsideComponent implements OnInit {
-
-  componentName = 'tables';
-  componentList = ['tables', 'search', 'store'];
-
-  constructor(
-    private presentationService: PresentationService,
-  ) { }
-
-  ngOnInit() {
-    this.presentationService._asideComponent.subscribe((value: string) => this.componentName = this.componentList.includes(value) ? value : this.componentName);
-  }
-
-  onComponentSwitch(): void {
-    this.componentName = (this.componentName === 'tables') ? 'store' : 'tables';
-    this.presentationService.setAsideComponent(this.componentName);
-  }
-}
+import { Component, inject } from '@angular/core';
+import { DatabaseService } from '../../core/services';
+import { CollapsiblePanelComponent } from '../../shared/components/collapsible-panel/collapsible-panel.component';
+import type { Store } from '@main/database/entity/Store.schema';
+import type { FontMetrics } from '@main/types';
+
+interface DetailField {
+  label: string;
+  icon: string;
+  value: (store: Store) => string;
+}
+
+interface MetricField {
+  label: string;
+  icon: string;
+  value: (metrics: FontMetrics) => string | number;
+}
+
+@Component({
+  selector: 'app-aside',
+  standalone: true,
+  imports: [CollapsiblePanelComponent],
+  templateUrl: './aside.component.html',
+})
+export class AsideComponent {
+  readonly db = inject(DatabaseService);
+
+  readonly fields: DetailField[] = [
+    { label: 'Name', icon: 'badge', value: (s) => s.full_name || s.file_name },
+    { label: 'Family', icon: 'group', value: (s) => s.font_family },
+    { label: 'Pref. Family', icon: 'group', value: (s) => s.preferred_family },
+    { label: 'Style', icon: 'format_italic', value: (s) => s.font_subfamily },
+    { label: 'Pref. Style', icon: 'format_italic', value: (s) => s.preferred_sub_family },
+    { label: 'Full Name', icon: 'label', value: (s) => s.compatible_full_name },
+    { label: 'PostScript', icon: 'code', value: (s) => s.post_script_name },
+    { label: 'Unique ID', icon: 'fingerprint', value: (s) => s.unique_id },
+    { label: 'Version', icon: 'history', value: (s) => s.version },
+    { label: 'Format', icon: 'description', value: (s) => s.file_type },
+    { label: 'Description', icon: 'info', value: (s) => s.description },
+    { label: 'Sample Text', icon: 'text_snippet', value: (s) => s.sample_text },
+    { label: 'Designer', icon: 'brush', value: (s) => s.designer },
+    { label: 'Designer URL', icon: 'link', value: (s) => s.designer_url },
+    { label: 'Manufacturer', icon: 'factory', value: (s) => s.manufacturer },
+    { label: 'Manufacturer URL', icon: 'link', value: (s) => s.manufacturer_url },
+    { label: 'Copyright', icon: 'copyright', value: (s) => s.copyright },
+    { label: 'Trademark', icon: 'verified', value: (s) => s.trademark },
+    { label: 'License', icon: 'gavel', value: (s) => s.license },
+    { label: 'License URL', icon: 'link', value: (s) => s.license_url },
+    { label: 'File Size', icon: 'straighten', value: (s) => s.file_size_pretty },
+    { label: 'File', icon: 'folder_open', value: (s) => s.file_path },
+  ];
+
+  readonly metricFields: MetricField[] = [
+    { label: 'Glyphs', icon: 'text_fields', value: (m) => m.numGlyphs },
+    { label: 'Units Per Em', icon: 'grid_4x4', value: (m) => m.unitsPerEm },
+    { label: 'Ascent', icon: 'arrow_upward', value: (m) => m.ascent },
+    { label: 'Descent', icon: 'arrow_downward', value: (m) => m.descent },
+    { label: 'Line Gap', icon: 'format_line_spacing', value: (m) => m.lineGap },
+  ];
+}

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

@@ -1,11 +1,5 @@
-<footer class="component">
-  <div class="left border-top">
-    <app-spinner></app-spinner>
-  </div>
-  <div class="middle border-top"></div>
-  <div class="right border-top">
-    <div class="flex items-center justify-end w-full px-4">
-      <span class="font-medium text-sm uppercase">Angular &mdash; {{ngVersion}} Electron &mdash; {{version.electron}}</span>
-    </div>
-  </div>
-</footer>
+<div class="panel">
+  <div class="flex items-center px-2">
+    <app-spinner [animating]="presentation.loading()" />
+  </div>
+</div>

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

@@ -1,32 +1,13 @@
-import { Component, OnInit } from '@angular/core';
-import { ConfigService } from '@app/core/services';
-
-export interface AppVersion {
-  system: string;
-  electron: string;
-}
-
-@Component({
-  selector: 'app-footer',
-  templateUrl: './footer.component.html',
-  styleUrls: ['./footer.component.scss']
-})
-export class FooterComponent implements OnInit {
-
-  version: AppVersion;
-  ngVersion: string;
-  
-  constructor(
-    private configService: ConfigService,
-  ) { }
-
-  ngOnInit() {
-    if (this.configService.has('system.version')) {
-      this.version = this.configService.get('system.version') as AppVersion;
-    }
-    if (this.configService.has('ng-version')) {
-      this.ngVersion = this.configService.get('ng-version');
-    }
-  }
-
-}
+import { Component, inject } from '@angular/core';
+import { SpinnerComponent } from '../../shared/components';
+import { PresentationService } from '../../core/services';
+
+@Component({
+  selector: 'app-footer',
+  standalone: true,
+  imports: [SpinnerComponent],
+  templateUrl: './footer.component.html',
+})
+export class FooterComponent {
+  readonly presentation = inject(PresentationService);
+}

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

@@ -1,35 +1,118 @@
-<header class="component">
-  <div class="left border-top border-bottom">
-    <div class="header-block flex justify-items-start items-center">
-      <a class="enabled" title="New Collection"><i class="material-icons" (click)="handleCreateCollection($event)">widgets</i> New Collection</a>
-      <ng-container *ngIf="collectionId>0; else elseAddFontsDisabled">
-        <a class="enabled" title="New Collection"><i class="material-icons" (click)="handleAddFonts($event, collectionId)">list_alt</i> Add Fonts</a>
-      </ng-container>
-      <ng-template #elseAddFontsDisabled>
-        <a class="disabled" title="New Collection"><i class="material-icons">list_alt</i> Add Fonts</a>
-      </ng-template>
-    </div>
-  </div>
-  <div class="middle border-top border-bottom">
-    <div class="header-block flex justify-start items-center">
-      <a href="javascript:;" (click)="handleToggleNavigation($event)" [className]="navigationEnabled ? 'enabled' : 'disabled'" title="Toggle Navigation"><i class="material-icons">border_all</i> Navigation</a>
-      <a href="javascript:;" (click)="handleToggleAside($event)" [className]="asideEnabled ? 'enabled' : 'disabled'" title="Toggle Aside"><i class="material-icons">border_all</i> Aside</a>
-      <a href="javascript:;" (click)="handleTogglePreview($event)" [className]="previewEnabled ? 'enabled' : 'disabled'" title="Toggle Preview"><i class="material-icons">border_all</i> Preview</a>
-      <a href="javascript:;" (click)="handleToggleInspect($event)" [className]="inspectEnabled ? 'enabled' : 'disabled'" title="Toggle Inspect"><i class="material-icons">border_all</i> Inspect</a>
-      <a href="javascript:;" (click)="handleToggleToolbar($event)" [className]="toolbarEnabled ? 'enabled' : 'disabled'" title="Toggle Toolbar"><i class="material-icons">border_all</i> Toolbar</a>
-      <a href="javascript:;" (click)="handleToggleGrid($event)" [className]="gridEnabled ? 'enabled' : 'disabled'" title="Toggle Grid"><i class="material-icons">border_all</i> Grid</a>
-    </div>
-  </div>
-  <div class="right border-top border-bottom">
-    <div class="header-block flex justify-end items-center">
-      <a class="enabled" title="Theme" (click)="handleToggleSearch($event)"><i class="material-icons">search</i> Search</a>
-      <a class="enabled" title="Theme" (click)="handleSwitchTheme($event)"><i class="material-icons">burst_mode</i> Theme</a>
-      <ng-container *ngIf="currentUser; else elseif1">
-        <a (click)="handleLoadSettings()" class="gravatar" title="Settings"><img src="{{gravatarUrl}}" alt="{{currentUser.name}}" /></a>
-      </ng-container>
-      <ng-template #elseif1>
-        <a (click)="handleLoadSettings()" title="Settings"><i class="material-icons">exit_to_app</i> Settings</a>
-      </ng-template>
-    </div>
-  </div>
-</header>
+<header class="grid grid-cols-[220px_1fr_220px] min-[1440px]:grid-cols-[280px_1fr_280px] w-full h-full">
+  <div class="relative">
+    <div class="p-0 h-full flex justify-items-start items-center">
+      <a
+        class="enabled cursor-pointer text-[10px] font-medium tracking-wide text-center no-underline py-1 px-2.5 inline-flex flex-col items-center outline-none whitespace-nowrap transition-colors"
+        [style.color]="'var(--text-secondary)'"
+        title="New Collection"
+      >
+        <i class="material-symbols-outlined block text-xl leading-none p-0 mb-0.5" (click)="handleCreateCollection($event)">widgets</i> New
+        Collection
+      </a>
+    </div>
+  </div>
+  <div class="relative m-0">
+    <div class="p-0 h-full flex justify-start items-center">
+      <a
+        href="javascript:;"
+        (click)="presentation.toggleNavigation()"
+        class="cursor-pointer text-[10px] font-medium tracking-wide text-center no-underline py-1 px-2 inline-flex flex-col items-center outline-none whitespace-nowrap transition-colors"
+        [style.color]="presentation.navigationEnabled() ? 'var(--text-primary)' : 'var(--text-muted)'"
+        title="Toggle Navigation"
+        ><i class="material-symbols-outlined block text-xl leading-none p-0 mb-0.5">menu</i> Navigation</a
+      >
+      <a
+        href="javascript:;"
+        (click)="presentation.toggleAside()"
+        class="cursor-pointer text-[10px] font-medium tracking-wide text-center no-underline py-1 px-2 inline-flex flex-col items-center outline-none whitespace-nowrap transition-colors"
+        [style.color]="presentation.asideEnabled() ? 'var(--text-primary)' : 'var(--text-muted)'"
+        title="Toggle Aside"
+        ><i class="material-symbols-outlined block text-xl leading-none p-0 mb-0.5">side_navigation</i> Aside</a
+      >
+      <a
+        href="javascript:;"
+        (click)="presentation.togglePreview()"
+        class="cursor-pointer text-[10px] font-medium tracking-wide text-center no-underline py-1 px-2 inline-flex flex-col items-center outline-none whitespace-nowrap transition-colors"
+        [style.color]="presentation.previewEnabled() ? 'var(--text-primary)' : 'var(--text-muted)'"
+        title="Toggle Preview"
+        ><i class="material-symbols-outlined block text-xl leading-none p-0 mb-0.5">visibility</i> Preview</a
+      >
+      <a
+        href="javascript:;"
+        (click)="presentation.toggleInspect()"
+        class="cursor-pointer text-[10px] font-medium tracking-wide text-center no-underline py-1 px-2 inline-flex flex-col items-center outline-none whitespace-nowrap transition-colors"
+        [style.color]="presentation.inspectEnabled() ? 'var(--text-primary)' : 'var(--text-muted)'"
+        title="Toggle Inspect"
+        ><i class="material-symbols-outlined block text-xl leading-none p-0 mb-0.5">info</i> Inspect</a
+      >
+      <a
+        href="javascript:;"
+        (click)="presentation.toggleToolbar()"
+        class="cursor-pointer text-[10px] font-medium tracking-wide text-center no-underline py-1 px-2 inline-flex flex-col items-center outline-none whitespace-nowrap transition-colors"
+        [style.color]="presentation.toolbarEnabled() ? 'var(--text-primary)' : 'var(--text-muted)'"
+        title="Toggle Toolbar"
+        ><i class="material-symbols-outlined block text-xl leading-none p-0 mb-0.5">toolbar</i> Toolbar</a
+      >
+      <a
+        href="javascript:;"
+        (click)="presentation.toggleGrid()"
+        class="cursor-pointer text-[10px] font-medium tracking-wide text-center no-underline py-1 px-2 inline-flex flex-col items-center outline-none whitespace-nowrap transition-colors"
+        [style.color]="presentation.gridEnabled() ? 'var(--text-primary)' : 'var(--text-muted)'"
+        title="Toggle Grid"
+        ><i class="material-symbols-outlined block text-xl leading-none p-0 mb-0.5">grid_view</i> Grid</a
+      >
+      <a
+        href="javascript:;"
+        (click)="presentation.toggleWaterfall()"
+        class="cursor-pointer text-[10px] font-medium tracking-wide text-center no-underline py-1 px-2 inline-flex flex-col items-center outline-none whitespace-nowrap transition-colors"
+        [style.color]="presentation.waterfallEnabled() ? 'var(--text-primary)' : 'var(--text-muted)'"
+        title="Toggle Waterfall"
+        ><i class="material-symbols-outlined block text-xl leading-none p-0 mb-0.5">format_size</i> Waterfall</a
+      >
+    </div>
+  </div>
+  <div class="relative">
+    <div class="p-0 h-full flex justify-end items-center">
+      <a
+        class="enabled cursor-pointer text-[10px] font-medium tracking-wide text-center no-underline py-1 px-2 inline-flex flex-col items-center outline-none whitespace-nowrap transition-colors"
+        [style.color]="presentation.searchEnabled() ? 'var(--text-primary)' : 'var(--text-muted)'"
+        title="Toggle Search"
+        (click)="handleToggleSearch($event)"
+        ><i class="material-symbols-outlined block text-xl leading-none p-0 mb-0.5">search</i> Search</a
+      >
+      <a
+        class="enabled cursor-pointer text-[10px] font-medium tracking-wide text-center no-underline py-1 px-2 inline-flex flex-col items-center outline-none whitespace-nowrap transition-colors"
+        [style.color]="'var(--text-secondary)'"
+        title="Theme"
+        (click)="handleSwitchTheme($event)"
+        ><i class="material-symbols-outlined block text-xl leading-none p-0 mb-0.5">burst_mode</i> Theme</a
+      >
+      @if (currentUser) {
+        <a
+          (click)="handleLoadSettings()"
+          class="mt-px cursor-pointer text-[10px] font-medium tracking-wide text-center no-underline py-1 px-2 inline-flex flex-col items-center outline-none whitespace-nowrap transition-colors"
+          title="Settings"
+          ><img src="{{ gravatarUrl }}" alt="{{ currentUser.name }}" class="w-8 rounded-full"
+        /></a>
+      } @else {
+        <a
+          (click)="handleLoadSettings()"
+          class="cursor-pointer text-[10px] font-medium tracking-wide text-center no-underline py-1 px-2 inline-flex flex-col items-center outline-none whitespace-nowrap transition-colors"
+          [style.color]="'var(--text-secondary)'"
+          title="Settings"
+          ><i class="material-symbols-outlined block text-xl leading-none p-0 mb-0.5">exit_to_app</i> Settings</a
+        >
+      }
+    </div>
+  </div>
+</header>
+
+@if (showCollectionDialog) {
+  <app-prompt-dialog
+    title="New Collection"
+    placeholder="Collection name"
+    confirmText="Create"
+    (confirmed)="onCollectionConfirmed($event)"
+    (cancelled)="onCollectionCancelled()"
+  />
+}

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

@@ -1,229 +1,52 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { AlertService, AuthService, ConfigService, DatabaseService, GravatarService, MessageService, ModalService, PresentationService, UtilsService } from '@app/core/services';
-import { AuthUser } from '@main/types';
-import { StorageType } from '@main/enums';
-import { Collection } from '@main/database/entity';
-
-@Component({
-  selector: 'app-header',
-  templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss']
-})
-export class HeaderComponent implements OnInit {
-
-  collectionId: number;
-  currentUser: AuthUser;
-  gravatarUrl: string;
-
-  gridEnabled = true;
-  toolbarEnabled = true;
-  previewEnabled = true;
-  inspectEnabled = true;
-  navigationEnabled = true;
-  asideEnabled = true;
-
-  constructor(
-    private router: Router,
-    private utils: UtilsService,
-    private alertService: AlertService,
-    private authService: AuthService,
-    private configService: ConfigService,
-    private messageService: MessageService,
-    private modalService: ModalService,
-    private databaseService: DatabaseService,
-    private presentationService: PresentationService,
-    private gravatar: GravatarService
-  ) { }
-
-  ngOnInit() {
-    this.databaseService.watchCollectionResultSet$.subscribe((results: Collection[]) => {
-      if (results) {
-        const collectionId = this.databaseService.getCollectionId();
-        if (collectionId) {
-          const hasChildren = results.some(x => x.parent_id === collectionId);
-          this.collectionId = (hasChildren) ? 0 : collectionId;
-        }
-      }
-    });
-    this.authService.watchAuthUser$.subscribe((result: AuthUser) => {
-      if (result?.email) {
-        this.currentUser = result;
-        this.gravatarUrl = this.gravatar.url(result.email, 128, 'mm');
-      }
-    });
-    this.presentationService._asideEnabled.subscribe((result) => {
-      this.asideEnabled = result;
-    });
-    this.presentationService._navigationEnabled.subscribe((result) => {
-      this.navigationEnabled = result;
-    });
-    this.presentationService._gridEnabled.subscribe((result) => {
-      this.gridEnabled = result;
-    });
-    this.presentationService._toolbarEnabled.subscribe((result) => {
-      this.toolbarEnabled = result;
-    });
-    this.presentationService._previewEnabled.subscribe((result) => {
-      this.previewEnabled = result;
-    });
-    this.presentationService._inspectEnabled.subscribe((result) => {
-      this.inspectEnabled = result;
-    });
-    this.presentationService._defaultTheme.subscribe((result) => this.enableTheme(result));
-  }
-
-  handleAddFonts(event: Event, collectionId: number): void {
-    event.stopPropagation();
-
-    const config = this.configService.get(StorageType.Options);
-    const importType = (config?.import?.type) ? config.import.type : 'ask';
-
-    let settings = {
-      type: 'question',
-      buttons: ['Cancel', 'Select files', 'Select folders'],
-      defaultId: 2,
-      title: 'Select Fonts',
-      message: 'Do you want to select files or folders?'
-    };
-
-    if (importType === 'ask') {
-      settings = {
-        ...settings,
-        ...{
-          checkboxLabel: 'Add fonts to catalog.',
-          checkboxChecked: true
-        }
-      };
-    }
-
-    this.messageService.showMessageBox(settings).then((response: object | any) => {
-      if (response?.response > 0) {
-        const isFiles = (response.response === 1) ? true : false;
-        const options = (isFiles) ? { properties: ['openFile', 'multiSelections'] } : { properties: ['openDirectory', 'multiSelections'] };
-        this.messageService.showOpenDialog(options).then((dialog: object | any) => {
-          if (dialog.filePaths.length) {
-            const addToCatalog = (importType === 'ask') ? response.checkboxChecked : (importType === 'catalog') ? true : false;
-            if (isFiles) {
-              this.openFiles(collectionId, { files: dialog.filePaths, addToCatalog });
-            } else {
-              this.openFolders(collectionId, { folders: dialog.filePaths, addToCatalog });
-            }
-          }
-        });
-      }
-    });
-  }
-
-  openFiles(collectionId: number, options: any): void {
-    this.presentationService.setLoadingSpinner(true);
-    this.alertService.info('Adding fonts please wait..', 1e3, true);
-    this.messageService.scanFiles({ ...options, collectionId }).then(this.utils.delay(1e3)).then(() => {
-      this.messageService.collectionUpdateCount(collectionId).then((result: Collection[]) => this.databaseService.setCollectionResultSet(result));
-      this.presentationService.setLoadingSpinner(false);
-      this.alertService.dismiss();
-      this.messageService.log(`Added fonts to collection id #${collectionId}.`, 1);
-
-      this.messageService.collectionEnable(collectionId, { enabled: true }).then((results: Collection[]) => {
-        this.databaseService.resetPage(1);
-        this.databaseService.setCollectionId(collectionId);
-        this.databaseService.setCollectionResultSet(results);
-      });
-
-    });
-  }
-
-  openFolders(collectionId: number, options: any): void {
-    this.presentationService.setLoadingSpinner(true);
-    this.alertService.info('Adding fonts please wait..', 1e3, true);
-    this.messageService.scanFolders({ ...options, collectionId }).then(this.utils.delay(1e3)).then(() => {
-      this.messageService.collectionUpdateCount(collectionId).then((result: Collection[]) => this.databaseService.setCollectionResultSet(result));
-      this.presentationService.setLoadingSpinner(false);
-      this.alertService.dismiss();
-      this.messageService.log(`Added folders to collection id #${collectionId}.`, 1);
-
-      this.messageService.collectionEnable(collectionId, { enabled: true }).then((results: Collection[]) => {
-        this.databaseService.resetPage(1);
-        this.databaseService.setCollectionId(collectionId);
-        this.databaseService.setCollectionResultSet(results);
-      });
-
-    });
-  }
-
-  handleCreateCollection(_event: Event): void {
-    this.modalService.open('collection-create');
-  }
-
-  handleLogout(_event: Event): void {
-    this.authService.logout();
-    this.router.navigate(['/settings']);
-  }
-
-  handleToggleAside(_event: Event): void {
-    this.presentationService.setAsideEnabled(!this.asideEnabled);
-    this.presentationService.saveLayoutSettings();
-  }
-
-  handleToggleNavigation(_event: Event): void {
-    this.presentationService.setNavigationEnabled(!this.navigationEnabled);
-    this.presentationService.saveLayoutSettings();
-  }
-
-  handleTogglePreview(_event: Event): void {
-    this.presentationService.setPreviewEnabled(!this.previewEnabled);
-    this.presentationService.saveLayoutSettings();
-  }
-
-  handleToggleInspect(_event: Event): void {
-    this.presentationService.setInspectEnabled(!this.inspectEnabled);
-    this.presentationService.saveLayoutSettings();
-  }
-
-  handleToggleToolbar(_event: Event): void {
-    this.presentationService.setToolbarEnabled(!this.toolbarEnabled);
-    this.presentationService.saveLayoutSettings();
-  }
-
-  handleToggleGrid(_event: Event): void {
-    this.presentationService.setGridEnabled(!this.gridEnabled);
-    this.presentationService.saveLayoutSettings();
-  }
-
-  enableTheme(theme: string): void {
-    const body = document.querySelector('body');
-    const themes = this.presentationService.getThemes();
-    if (themes.map(item => item.key).includes(theme)) {
-      body.setAttribute('data-theme', theme);
-    }
-  }
-
-  handleSwitchTheme(_event: Event): void {
-    const body = document.querySelector('body') as HTMLBodyElement;
-    const attr = body.getAttribute('data-theme');
-    const themes = this.presentationService.getThemes();
-
-    let idx = themes.map(item => item.key).indexOf(attr);
-
-    if (idx < themes.length - 1) {
-      idx++;
-    } else {
-      idx = 0;
-    }
-
-    if (themes[idx]) {
-      const theme: string = themes[idx].key;
-      body.setAttribute('data-theme', theme);
-      this.presentationService.setTheme(theme);
-      this.presentationService.setThemeVars(theme);
-    }
-  }
-
-  handleToggleSearch(_event: Event): void {
-    this.presentationService._asideComponent.next('search');
-  }
-
-  handleLoadSettings(): void {
-    this.modalService.open('system-settings');
-  }
-}
+import { Component, inject, effect } from '@angular/core';
+import { Router } from '@angular/router';
+import { PromptDialogComponent } from '../../shared/components';
+import { DatabaseService, PresentationService } from '../../core/services';
+
+@Component({
+  selector: 'app-header',
+  standalone: true,
+  imports: [PromptDialogComponent],
+  templateUrl: './header.component.html',
+})
+export class HeaderComponent {
+  readonly db = inject(DatabaseService);
+  private router = inject(Router);
+  readonly presentation = inject(PresentationService);
+
+  constructor() {
+    effect(() => {
+      console.log('Selected collection ID:', this.db.collectionId());
+    });
+  }
+
+  currentUser: { name: string } | null = null;
+  gravatarUrl = '';
+
+  showCollectionDialog = false;
+
+  handleCreateCollection(event: Event) {
+    event.stopPropagation();
+    this.showCollectionDialog = true;
+  }
+
+  onCollectionConfirmed(name: string) {
+    this.db.collectionCreate({ title: name });
+    this.showCollectionDialog = false;
+  }
+
+  onCollectionCancelled() {
+    this.showCollectionDialog = false;
+  }
+
+  handleToggleSearch(_event: Event) {
+    this.presentation.toggleSearch();
+  }
+
+  handleSwitchTheme(_event: Event) {
+    this.presentation.toggleTheme();
+  }
+  handleLoadSettings() {
+    void this.router.navigate(['/settings']);
+  }
+}