fontastic 0.1.3 → 0.2.0

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

@@ -0,0 +1,56 @@
+import { Component, inject } from '@angular/core';
+import { NewsService } from '../../../core/services';
+import { CollapsiblePanelComponent } from '../../../shared/components/collapsible-panel/collapsible-panel.component';
+
+@Component({
+  selector: 'app-news-stats',
+  standalone: true,
+  imports: [CollapsiblePanelComponent],
+  template: `
+    @if (news.hasArticles()) {
+      <app-collapsible-panel title="News">
+        <ul class="flex flex-col py-0.5">
+          <li class="flex items-center px-3.5 py-1 text-xs font-normal">
+            <span
+              class="material-symbols-outlined icon-sm mr-2"
+              style="font-variation-settings: 'opsz' 20, 'wght' 300; color: var(--text-muted)"
+              >article</span
+            >
+            <span class="flex-1">Total Articles</span>
+            <span class="text-[11px]" style="color: var(--text-muted)">{{ news.articleCount() }}</span>
+          </li>
+          <li class="flex items-center px-3.5 py-1 text-xs font-normal">
+            <span
+              class="material-symbols-outlined icon-sm mr-2"
+              style="font-variation-settings: 'opsz' 20, 'wght' 300; color: var(--text-muted)"
+              >source</span
+            >
+            <span class="flex-1">Sources</span>
+            <span class="text-[11px]" style="color: var(--text-muted)">{{ news.sourceCount() }}</span>
+          </li>
+          <li class="flex items-center px-3.5 py-1 text-xs font-normal">
+            <span
+              class="material-symbols-outlined icon-sm mr-2"
+              style="font-variation-settings: 'opsz' 20, 'wght' 300; color: var(--text-muted)"
+              >person</span
+            >
+            <span class="flex-1">Authors</span>
+            <span class="text-[11px]" style="color: var(--text-muted)">{{ news.authorCount() }}</span>
+          </li>
+          <li class="flex items-center px-3.5 py-1 text-xs font-normal">
+            <span
+              class="material-symbols-outlined icon-sm mr-2"
+              style="font-variation-settings: 'opsz' 20, 'wght' 300; color: var(--text-muted)"
+              >schedule</span
+            >
+            <span class="flex-1">Last Fetched</span>
+            <span class="text-[11px]" style="color: var(--text-muted)">{{ news.lastFetched() }}</span>
+          </li>
+        </ul>
+      </app-collapsible-panel>
+    }
+  `,
+})
+export class NewsStatsComponent {
+  readonly news = inject(NewsService);
+}

package/src/app/settings/ai-keys/ai-keys.component.html

@@ -0,0 +1,56 @@
+<div class="card">
+  <div class="card-header">
+    <div class="card-title"><h3>AI API Keys</h3></div>
+  </div>
+  <div class="card-body space-y-4">
+    <div>
+      <label class="form-label" for="anthropicKey">Anthropic</label>
+      <input
+        type="password"
+        id="anthropicKey"
+        class="form-input w-full"
+        [ngModel]="anthropicKey()"
+        (ngModelChange)="anthropicKey.set($event)"
+        name="anthropicKey"
+        placeholder="sk-ant-..."
+        autocomplete="off"
+      />
+    </div>
+    <div>
+      <label class="form-label" for="googleKey">Google Gemini</label>
+      <input
+        type="password"
+        id="googleKey"
+        class="form-input w-full"
+        [ngModel]="googleKey()"
+        (ngModelChange)="googleKey.set($event)"
+        name="googleKey"
+        placeholder="AIza..."
+        autocomplete="off"
+      />
+    </div>
+    <div>
+      <label class="form-label" for="openaiKey">OpenAI</label>
+      <input
+        type="password"
+        id="openaiKey"
+        class="form-input w-full"
+        [ngModel]="openaiKey()"
+        (ngModelChange)="openaiKey.set($event)"
+        name="openaiKey"
+        placeholder="sk-..."
+        autocomplete="off"
+      />
+    </div>
+  </div>
+  <div class="card-footer">
+    <div>
+      @if (saveStatus() === 'saved') {
+        <span class="text-xs" [style.color]="'var(--text-muted)'">Keys saved.</span>
+      }
+    </div>
+    <div class="card-tools">
+      <button class="btn btn-sm btn-theme" (click)="onSave()">Save</button>
+    </div>
+  </div>
+</div>

package/src/app/settings/ai-keys/ai-keys.component.ts

@@ -0,0 +1,44 @@
+import { Component, inject, signal, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MessageService } from '../../core/services';
+import { StorageType } from '@main/enums';
+
+interface AiKeys {
+  anthropic: string;
+  google: string;
+  openai: string;
+}
+
+@Component({
+  selector: 'app-settings-ai-keys',
+  standalone: true,
+  imports: [FormsModule],
+  templateUrl: './ai-keys.component.html',
+})
+export class SettingsAiKeysComponent implements OnInit {
+  private readonly message = inject(MessageService);
+
+  readonly anthropicKey = signal('');
+  readonly googleKey = signal('');
+  readonly openaiKey = signal('');
+  readonly saveStatus = signal<'idle' | 'saved'>('idle');
+
+  async ngOnInit() {
+    const keys = (await this.message.get(StorageType.AiKeys, null)) as AiKeys | null;
+    if (keys) {
+      this.anthropicKey.set(keys.anthropic ?? '');
+      this.googleKey.set(keys.google ?? '');
+      this.openaiKey.set(keys.openai ?? '');
+    }
+  }
+
+  async onSave() {
+    await this.message.set(StorageType.AiKeys, {
+      anthropic: this.anthropicKey(),
+      google: this.googleKey(),
+      openai: this.openaiKey(),
+    });
+    this.saveStatus.set('saved');
+    setTimeout(() => this.saveStatus.set('idle'), 2000);
+  }
+}

package/src/app/settings/danger-zone/danger-zone.component.html

@@ -0,0 +1,22 @@
+<div class="card" style="border-color: #dc2626">
+  <div class="card-header" style="border-color: #dc2626">
+    <div class="card-title"><h3 style="color: #dc2626">Danger Zone</h3></div>
+  </div>
+  <div class="card-body space-y-4">
+    <div class="flex items-center justify-between">
+      <div>
+        <p class="text-xs font-semibold" [style.color]="'var(--text-primary)'">Drop active database</p>
+        <p class="text-xs" [style.color]="'var(--text-muted)'">Drops the database and all its data.</p>
+      </div>
+      <button class="btn btn-sm btn-danger" (click)="onDropDatabase()">Drop</button>
+    </div>
+
+    <div class="flex items-center justify-between">
+      <div>
+        <p class="text-xs font-semibold" [style.color]="'var(--text-primary)'">Clear system storage</p>
+        <p class="text-xs" [style.color]="'var(--text-muted)'">Removes all settings from system store.</p>
+      </div>
+      <button class="btn btn-sm btn-danger" (click)="onClearStore()">Clear</button>
+    </div>
+  </div>
+</div>

package/src/app/settings/danger-zone/danger-zone.component.ts

@@ -0,0 +1,37 @@
+import { Component, inject } from '@angular/core';
+import { MessageService } from '../../core/services';
+
+@Component({
+  selector: 'app-settings-danger-zone',
+  standalone: true,
+  templateUrl: './danger-zone.component.html',
+})
+export class SettingsDangerZoneComponent {
+  private readonly message = inject(MessageService);
+
+  async onDropDatabase() {
+    const response = await this.message.showMessageBox({
+      type: 'question',
+      buttons: ['Yes', 'No'],
+      title: 'Confirm',
+      message: 'Are you sure you want to drop the database?',
+    });
+    if (response?.response === 0) {
+      await this.message.dropDatabase();
+      this.message.reloadWindow();
+    }
+  }
+
+  async onClearStore() {
+    const response = await this.message.showMessageBox({
+      type: 'question',
+      buttons: ['Yes', 'No'],
+      title: 'Confirm',
+      message: 'Are you sure you want to delete the application store?',
+    });
+    if (response?.response === 0) {
+      await this.message.clearStore();
+      this.message.reloadWindow();
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+<div class="card">
+  <div class="card-header">
+    <div class="card-title"><h3>System Logs</h3></div>
+    <div class="card-tools">
+      <button class="btn btn-sm btn-default" (click)="onTruncateLogs()">Clear All</button>
+    </div>
+  </div>
+  <div class="card-body p-0">
+    @if (logs().length) {
+      <table class="w-full text-xs" [style.color]="'var(--text-primary)'">
+        <thead>
+          <tr [style.border-bottom]="'1px solid var(--border-subtle)'">
+            <th class="text-left px-4 py-2 font-semibold" [style.color]="'var(--text-secondary)'">Message</th>
+            <th class="text-center px-4 py-2 font-semibold w-24" [style.color]="'var(--text-secondary)'">Status</th>
+            <th class="text-center px-4 py-2 font-semibold w-40" [style.color]="'var(--text-secondary)'">Created</th>
+            <th class="text-center px-4 py-2 font-semibold w-16" [style.color]="'var(--text-secondary)'"></th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (item of logs(); track item.id) {
+            <tr [style.border-bottom]="'1px solid var(--border-subtle)'">
+              <td class="px-4 py-2">
+                <span class="font-semibold">{{ filterMessageType(item.type) }}</span>
+                <span class="ml-2" [style.color]="'var(--text-muted)'">{{ item.message.substring(0, 80) }}</span>
+              </td>
+              <td class="text-center px-4 py-2">{{ filterMessageStatus(item.status) }}</td>
+              <td class="text-center px-4 py-2" [style.color]="'var(--text-muted)'">{{ item.created | date: 'medium' }}</td>
+              <td class="text-center px-4 py-2">
+                <button class="btn btn-xs btn-ghost" (click)="onDeleteLog(item.id)" title="Delete">
+                  <span class="material-symbols-outlined icon-xs">delete</span>
+                </button>
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    } @else {
+      <div class="px-4 py-6 text-center text-xs" [style.color]="'var(--text-muted)'">No log entries.</div>
+    }
+  </div>
+</div>

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

@@ -0,0 +1,43 @@
+import { Component, inject, signal, OnInit } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { MessageService } from '../../core/services';
+import type { Logger } from '@main/database/entity/Logger.schema';
+
+@Component({
+  selector: 'app-settings-logs',
+  standalone: true,
+  imports: [DatePipe],
+  templateUrl: './logs.component.html',
+})
+export class SettingsLogsComponent implements OnInit {
+  private readonly message = inject(MessageService);
+
+  readonly logs = signal<Logger[]>([]);
+
+  async ngOnInit() {
+    await this.loadLogs();
+  }
+
+  async loadLogs() {
+    const result = await this.message.loggerFind({ order: { id: 'DESC' } });
+    this.logs.set(result);
+  }
+
+  filterMessageType(type: number): string {
+    return type === 1 ? 'System Action' : 'User Action';
+  }
+
+  filterMessageStatus(status: number): string {
+    return status === 1 ? 'Error' : 'Success';
+  }
+
+  async onDeleteLog(id: number) {
+    await this.message.loggerDelete(id);
+    await this.loadLogs();
+  }
+
+  async onTruncateLogs() {
+    await this.message.loggerTruncate();
+    await this.loadLogs();
+  }
+}

package/src/app/settings/news-api/news-api.component.html

@@ -0,0 +1,40 @@
+<div class="card">
+  <div class="card-header">
+    <div class="card-title"><h3>News API</h3></div>
+    <div class="card-tools">
+      @if (newsApiKey()) {
+        <button class="btn btn-sm btn-default" (click)="onFetchNews()" [disabled]="fetchStatus() === 'fetching'">
+          {{ fetchStatus() === 'fetching' ? 'Fetching...' : 'Fetch Articles' }}
+        </button>
+      }
+    </div>
+  </div>
+  <div class="card-body">
+    <div>
+      <label class="form-label" for="apiKey">API Key</label>
+      <input
+        type="text"
+        id="apiKey"
+        class="form-input w-full"
+        [ngModel]="newsApiKey()"
+        (ngModelChange)="newsApiKey.set($event)"
+        name="apiKey"
+        placeholder="Enter your newsapi.org key"
+      />
+      <p class="text-xs mt-1" [style.color]="'var(--text-muted)'">Visit newsapi.org to obtain your free key.</p>
+    </div>
+  </div>
+  <div class="card-footer">
+    <div>
+      @if (saveStatus() === 'saved') {
+        <span class="text-xs" [style.color]="'var(--text-muted)'">API key saved.</span>
+      }
+      @if (fetchMessage()) {
+        <span class="text-xs" [style.color]="fetchStatus() === 'error' ? '#dc2626' : 'var(--text-muted)'">{{ fetchMessage() }}</span>
+      }
+    </div>
+    <div class="card-tools">
+      <button class="btn btn-sm btn-theme" (click)="onSaveNewsApiKey()">Save</button>
+    </div>
+  </div>
+</div>

package/src/app/settings/news-api/news-api.component.ts

@@ -0,0 +1,57 @@
+import { Component, inject, signal, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MessageService, NewsService } from '../../core/services';
+import { StorageType } from '@main/enums';
+import type { NewsType } from '@main/types';
+
+@Component({
+  selector: 'app-settings-news-api',
+  standalone: true,
+  imports: [FormsModule],
+  templateUrl: './news-api.component.html',
+})
+export class SettingsNewsApiComponent implements OnInit {
+  private readonly message = inject(MessageService);
+  private readonly news = inject(NewsService);
+
+  readonly newsApiKey = signal('');
+  readonly saveStatus = signal<'idle' | 'saved'>('idle');
+  readonly fetchStatus = signal<'idle' | 'fetching' | 'done' | 'error'>('idle');
+  readonly fetchMessage = signal('');
+
+  async ngOnInit() {
+    const config = (await this.message.get(StorageType.News, null)) as NewsType | null;
+    if (config?.apiKey) {
+      this.newsApiKey.set(config.apiKey);
+    }
+  }
+
+  async onSaveNewsApiKey() {
+    const apiKey = this.newsApiKey();
+    if (!apiKey) return;
+    await this.message.set(StorageType.News, { apiKey });
+    this.saveStatus.set('saved');
+    await this.news.refresh();
+    setTimeout(() => this.saveStatus.set('idle'), 2000);
+  }
+
+  async onFetchNews() {
+    this.fetchStatus.set('fetching');
+    this.fetchMessage.set('');
+    try {
+      const endpoint = `https://newsapi.org/v2/top-headlines?country=us&apiKey=${this.newsApiKey()}`;
+      const result = await this.message.fetchLatestNews({ endpoint });
+      const count = result?.articles?.length ?? 0;
+      this.fetchMessage.set(`Fetched ${count} article${count !== 1 ? 's' : ''}.`);
+      this.fetchStatus.set('done');
+      await this.news.refresh();
+    } catch {
+      this.fetchMessage.set('Failed to fetch articles.');
+      this.fetchStatus.set('error');
+    }
+    setTimeout(() => {
+      this.fetchStatus.set('idle');
+      this.fetchMessage.set('');
+    }, 3000);
+  }
+}

package/src/app/settings/pages/general/general.component.html

@@ -0,0 +1,7 @@
+<div class="mx-auto max-w-2xl space-y-6">
+  <app-settings-theme />
+  <app-settings-ai-keys />
+  <app-settings-news-api />
+  <app-settings-quick-actions />
+  <app-settings-danger-zone />
+</div>

package/src/app/settings/pages/general/general.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { SettingsThemeComponent } from '../../theme/theme.component';
+import { SettingsAiKeysComponent } from '../../ai-keys/ai-keys.component';
+import { SettingsNewsApiComponent } from '../../news-api/news-api.component';
+import { SettingsQuickActionsComponent } from '../../quick-actions/quick-actions.component';
+import { SettingsDangerZoneComponent } from '../../danger-zone/danger-zone.component';
+
+@Component({
+  selector: 'app-settings-general-page',
+  standalone: true,
+  imports: [
+    SettingsThemeComponent,
+    SettingsAiKeysComponent,
+    SettingsNewsApiComponent,
+    SettingsQuickActionsComponent,
+    SettingsDangerZoneComponent,
+  ],
+  templateUrl: './general.component.html',
+})
+export class SettingsGeneralPageComponent {}

package/src/app/settings/pages/logs/logs.component.html

@@ -0,0 +1 @@
+<app-settings-logs />

package/src/app/settings/pages/logs/logs.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { SettingsLogsComponent } from '../../logs/logs.component';
+
+@Component({
+  selector: 'app-settings-logs-page',
+  standalone: true,
+  imports: [SettingsLogsComponent],
+  templateUrl: './logs.component.html',
+})
+export class SettingsLogsPageComponent {}

package/src/app/settings/pages/system/system.component.html

@@ -0,0 +1 @@
+<app-settings-system-info />

package/src/app/settings/pages/system/system.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { SettingsSystemInfoComponent } from '../../system-info/system-info.component';
+
+@Component({
+  selector: 'app-settings-system-page',
+  standalone: true,
+  imports: [SettingsSystemInfoComponent],
+  templateUrl: './system.component.html',
+})
+export class SettingsSystemPageComponent {}

package/src/app/settings/quick-actions/quick-actions.component.html

@@ -0,0 +1,49 @@
+<div class="card">
+  <div class="card-header">
+    <div class="card-title"><h3>Quick Actions</h3></div>
+    <div class="card-tools">
+      @if (syncing()) {
+        <span class="text-xs font-medium" [style.color]="'var(--text-muted)'">Syncing...</span>
+      }
+    </div>
+  </div>
+  <div class="card-body space-y-4">
+    <div class="flex items-center justify-between">
+      <div>
+        <p class="text-xs font-semibold" [style.color]="'var(--text-primary)'">Reset favorited fonts</p>
+        <p class="text-xs" [style.color]="'var(--text-muted)'">Resets fonts that have been favorited.</p>
+      </div>
+      <button class="btn btn-sm btn-default" (click)="onResetFavorites()">Run</button>
+    </div>
+
+    <div class="flex items-center justify-between">
+      <div>
+        <p class="text-xs font-semibold" [style.color]="'var(--text-primary)'">Synchronize system fonts</p>
+        <p class="text-xs" [style.color]="'var(--text-muted)'">Imports fonts from system fonts folder.</p>
+      </div>
+      <button class="btn btn-sm btn-default" (click)="onSyncSystemFonts()" [disabled]="syncing()">
+        @if (syncing()) {
+          <app-spinner [animating]="true" />
+        } @else {
+          Run
+        }
+      </button>
+    </div>
+
+    <div class="flex items-center justify-between">
+      <div>
+        <p class="text-xs font-semibold" [style.color]="'var(--text-primary)'">Restart application</p>
+        <p class="text-xs" [style.color]="'var(--text-muted)'">Restarts the application.</p>
+      </div>
+      <button class="btn btn-sm btn-default" (click)="onRestartApp()">Run</button>
+    </div>
+
+    <div class="flex items-center justify-between">
+      <div>
+        <p class="text-xs font-semibold" [style.color]="'var(--text-primary)'">Exit application</p>
+        <p class="text-xs" [style.color]="'var(--text-muted)'">Exits the application.</p>
+      </div>
+      <button class="btn btn-sm btn-default" (click)="onExitApp()">Run</button>
+    </div>
+  </div>
+</div>

package/src/app/settings/quick-actions/quick-actions.component.ts

@@ -0,0 +1,40 @@
+import { Component, inject, signal } from '@angular/core';
+import { SpinnerComponent } from '../../shared/components/spinner/spinner.component';
+import { DatabaseService, MessageService } from '../../core/services';
+
+@Component({
+  selector: 'app-settings-quick-actions',
+  standalone: true,
+  imports: [SpinnerComponent],
+  templateUrl: './quick-actions.component.html',
+})
+export class SettingsQuickActionsComponent {
+  private readonly database = inject(DatabaseService);
+  private readonly message = inject(MessageService);
+
+  readonly syncing = signal(false);
+
+  async onResetFavorites() {
+    await this.database.resetFavorites();
+    await this.database.fetchSystemStats();
+  }
+
+  async onSyncSystemFonts() {
+    this.syncing.set(true);
+    try {
+      await this.database.syncSystemFonts();
+    } finally {
+      this.syncing.set(false);
+    }
+  }
+
+  onRestartApp() {
+    this.message.beep();
+    this.message.reloadWindow();
+  }
+
+  onExitApp() {
+    this.message.beep();
+    this.message.quitApplication();
+  }
+}

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

@@ -0,0 +1,47 @@
+<div class="grid h-screen grid-rows-[56px_1fr_32px]" [style.background-color]="'var(--surface-0)'">
+  <!-- Header -->
+  <div
+    class="flex items-center justify-between px-4"
+    [style.background-color]="'var(--surface-2)'"
+    [style.border-bottom]="'1px solid var(--border-subtle)'"
+  >
+    <h1 class="text-sm font-bold" [style.color]="'var(--text-primary)'">Settings</h1>
+    <a routerLink="/home" class="btn btn-sm btn-default">Back</a>
+  </div>
+
+  <!-- Body -->
+  <div class="grid overflow-hidden" style="grid-template-columns: 200px 1fr">
+    <!-- Sidebar -->
+    <nav
+      class="overflow-auto py-4 px-3"
+      [style.background-color]="'var(--surface-2)'"
+      [style.border-right]="'1px solid var(--border-subtle)'"
+    >
+      <ul class="space-y-1">
+        <li>
+          <a routerLink="general" routerLinkActive="active" class="settings-nav-link">General</a>
+        </li>
+        <li>
+          <a routerLink="logs" routerLinkActive="active" class="settings-nav-link">Logs</a>
+        </li>
+        <li>
+          <a routerLink="system" routerLinkActive="active" class="settings-nav-link">System</a>
+        </li>
+      </ul>
+    </nav>
+
+    <!-- Content -->
+    <div class="overflow-auto" [style.background-color]="'var(--surface-1)'">
+      <div class="p-6">
+        <router-outlet />
+      </div>
+    </div>
+  </div>
+
+  <!-- Footer -->
+  <div
+    class="flex items-center px-4"
+    [style.background-color]="'var(--surface-2)'"
+    [style.border-top]="'1px solid var(--border-subtle)'"
+  ></div>
+</div>

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  standalone: true,
+  imports: [RouterOutlet, RouterLink, RouterLinkActive],
+})
+export class SettingsComponent {}

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

@@ -0,0 +1,21 @@
+<div class="card">
+  <div class="card-header">
+    <div class="card-title"><h3>System Information</h3></div>
+  </div>
+  <div class="card-body p-0">
+    @if (systemSettings().length) {
+      <table class="w-full text-xs" [style.color]="'var(--text-primary)'">
+        <tbody>
+          @for (item of systemSettings(); track item.key) {
+            <tr [style.border-bottom]="'1px solid var(--border-subtle)'">
+              <td class="px-4 py-2 font-semibold w-1/3" [style.color]="'var(--text-secondary)'">{{ item.key }}</td>
+              <td class="px-4 py-2" [style.color]="'var(--text-muted)'">{{ item.value }}</td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    } @else {
+      <div class="px-4 py-6 text-center text-xs" [style.color]="'var(--text-muted)'">Loading system information...</div>
+    }
+  </div>
+</div>