fontastic 1.0.2 → 1.1.0

package/README.md

@@ -1,18 +1,19 @@
 # Fontastic
 
-![Maintained][maintained-badge]
-[![Make a pull request][prs-badge]][prs]
-[![License][license-badge]](LICENSE.md)
+[![Angular](https://img.shields.io/badge/Angular-21-dd0031?style=plastic&logo=angular&logoColor=white)](https://angular.dev)
+[![Electron](https://img.shields.io/badge/Electron-40-47848f?style=plastic&logo=electron&logoColor=white)](https://electronjs.org)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-3178c6?style=plastic&logo=typescript&logoColor=white)](https://www.typescriptlang.org)
+[![License](https://img.shields.io/badge/License-MIT-f59e0b?style=plastic)](LICENSE.md)
+[![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-22c55e?style=plastic)](http://makeapullrequest.com)
 
 [![Linux Build][linux-build-badge]][linux-build]
 [![MacOS Build][macos-build-badge]][macos-build]
 [![Windows Build][windows-build-badge]][windows-build]
 
-[![Watch on GitHub][github-watch-badge]][github-watch]
-[![Star on GitHub][github-star-badge]][github-star]
-[![Tweet][twitter-badge]][twitter]
+[![GitHub Stars](https://img.shields.io/github/stars/tomshaw/fontastic?style=plastic&logo=github&label=Stars)](https://github.com/tomshaw/fontastic/stargazers)
+[![GitHub Watchers](https://img.shields.io/github/watchers/tomshaw/fontastic?style=plastic&logo=github&label=Watchers)](https://github.com/tomshaw/fontastic/watchers)
 
-Fontastic is a cross-platform font management and cataloging application built with Angular and Electron.
+Fontastic is an Electron-based font management and cataloging application built for organizing, browsing, and inspecting font libraries.
 
 ## Features
 
@@ -83,12 +84,6 @@ Fontastic is open-sourced software licensed under the [MIT license](https://open
 
 [repo]: https://github.com/tomshaw/fontastic
 
-[maintained-badge]: https://img.shields.io/badge/maintained-yes-brightgreen
-[license-badge]: https://img.shields.io/badge/license-MIT-blue.svg
-[license]: https://github.com/tomshaw/fontastic/blob/main/LICENSE.md
-[prs-badge]: https://img.shields.io/badge/PRs-welcome-red.svg
-[prs]: http://makeapullrequest.com
-
 [linux-build-badge]: https://github.com/tomshaw/fontastic/workflows/Linux%20Build/badge.svg
 [linux-build]: https://github.com/tomshaw/fontastic/actions?query=workflow%3A%22Linux+Build%22
 [macos-build-badge]: https://github.com/tomshaw/fontastic/workflows/MacOS%20Build/badge.svg
@@ -96,9 +91,3 @@ Fontastic is open-sourced software licensed under the [MIT license](https://open
 [windows-build-badge]: https://github.com/tomshaw/fontastic/workflows/Windows%20Build/badge.svg
 [windows-build]: https://github.com/tomshaw/fontastic/actions?query=workflow%3A%22Windows+Build%22
 
-[github-watch-badge]: https://img.shields.io/github/watchers/tomshaw/fontastic.svg?style=social
-[github-watch]: https://github.com/tomshaw/fontastic/watchers
-[github-star-badge]: https://img.shields.io/github/stars/tomshaw/fontastic.svg?style=social
-[github-star]: https://github.com/tomshaw/fontastic/stargazers
-[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20fontastic!%20https://github.com/tomshaw/fontastic%20%F0%9F%91%8D
-[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/tomshaw/fontastic.svg?style=social

package/app/enums/StorageType.js

@@ -17,5 +17,7 @@ var StorageType;
     StorageType["LayoutTheme"] = "layout.theme";
     StorageType["AiKeys"] = "ai.keys";
     StorageType["NavigationExpanded"] = "navigation.expanded";
+    StorageType["SortColumn"] = "datagrid.sort.column";
+    StorageType["SortDirection"] = "datagrid.sort.direction";
 })(StorageType || (exports.StorageType = StorageType = {}));
 //# sourceMappingURL=StorageType.js.map

package/app/enums/StorageType.ts

@@ -13,4 +13,6 @@ export enum StorageType {
   LayoutTheme = 'layout.theme',
   AiKeys = 'ai.keys',
   NavigationExpanded = 'navigation.expanded',
+  SortColumn = 'datagrid.sort.column',
+  SortDirection = 'datagrid.sort.direction',
 }

package/app/package.json

@@ -5,7 +5,7 @@
     "name": "Tom Shaw",
     "email": ""
   },
-  "version": "1.0.2",
+  "version": "1.1.0",
   "main": "main.js",
   "private": true,
   "dependencies": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fontastic",
-  "version": "1.0.2",
-  "description": "A gorgeous multi-platform font management application.",
+  "version": "1.1.0",
+  "description": "Fontastic is an Electron-based font management and cataloging application built for organizing, browsing, and inspecting font libraries.",
   "homepage": "https://github.com/tomshaw/fontastic",
   "private": false,
   "author": {

package/src/app/core/services/database/database.service.ts

@@ -137,24 +137,26 @@ export class DatabaseService {
   private fetchCurrentPage(extraOptions: any = {}) {
     const skip = (this.currentPage() - 1) * this.pageSize();
     const take = this.pageSize();
+    const sortOrder = this.getSortOrder();
 
     const smartCollectionId = this.activeSmartCollectionId();
     if (smartCollectionId) {
-      this.smartCollectionEvaluate(smartCollectionId, { skip, take });
+      this.smartCollectionEvaluate(smartCollectionId, { skip, take, ...(sortOrder ? { order: sortOrder } : {}) });
       return;
     }
 
     const searchWhere = this.activeSearchWhere();
     if (searchWhere) {
       const searchOrder = this.activeSearchOrder();
-      this.storeSearch({ where: searchWhere, skip, take, ...(searchOrder ? { order: searchOrder } : {}) });
+      const order = sortOrder ?? searchOrder;
+      this.storeSearch({ where: searchWhere, skip, take, ...(order ? { order } : {}) });
       return;
     }
 
     const collectionId = this.collectionId();
     const filter = this.activeFilter();
 
-    const options: any = { skip, take, ...extraOptions };
+    const options: any = { skip, take, ...extraOptions, ...(sortOrder ? { order: sortOrder } : {}) };
 
     if (collectionId) {
       options.collectionId = collectionId;
@@ -172,17 +174,24 @@ export class DatabaseService {
 
   constructor() {
     this.electron.ready.then(async () => {
-      const [collections, smartCollections, savedCollectionId, savedStoreId] = await Promise.all([
+      const [collections, smartCollections, savedCollectionId, savedStoreId, savedSortColumn, savedSortDirection] = await Promise.all([
         this.message.collectionFetch({}),
         this.message.smartCollectionFind(),
         this.message.get(StorageType.CollectionId, null),
         this.message.get(StorageType.StoreId, null),
+        this.message.get(StorageType.SortColumn, null),
+        this.message.get(StorageType.SortDirection, null),
       ]);
 
       this.collections.set(collections);
       this.smartCollections.set(smartCollections);
       console.log('System Boot:', collections);
 
+      if (savedSortColumn) {
+        this.sortColumn.set(savedSortColumn);
+        this.sortDirection.set(savedSortDirection === 'DESC' ? 'DESC' : 'ASC');
+      }
+
       if (savedCollectionId) {
         this.collectionId.set(savedCollectionId);
       }
@@ -398,6 +407,44 @@ export class DatabaseService {
 
   readonly activeSearchOrder = signal<{ column: string; direction: string } | null>(null);
 
+  // Datagrid sort (persisted)
+  readonly sortColumn = signal<string | null>(null);
+  readonly sortDirection = signal<'ASC' | 'DESC'>('ASC');
+
+  toggleSort(column: string) {
+    const current = this.sortColumn();
+    if (current === column) {
+      if (this.sortDirection() === 'ASC') {
+        this.sortDirection.set('DESC');
+      } else {
+        // Clear sort
+        this.sortColumn.set(null);
+        this.sortDirection.set('ASC');
+      }
+    } else {
+      this.sortColumn.set(column);
+      this.sortDirection.set('ASC');
+    }
+
+    // Persist
+    const col = this.sortColumn();
+    if (col) {
+      this.message.set(StorageType.SortColumn, col);
+      this.message.set(StorageType.SortDirection, this.sortDirection());
+    } else {
+      this.message.set(StorageType.SortColumn, null);
+      this.message.set(StorageType.SortDirection, null);
+    }
+
+    this.currentPage.set(1);
+    this.fetchCurrentPage();
+  }
+
+  private getSortOrder(): { column: string; direction: string } | null {
+    const col = this.sortColumn();
+    return col ? { column: col, direction: this.sortDirection() } : null;
+  }
+
   selectSearch(where: { key: string; value: any }[], order?: { column: string; direction: string }) {
     this.parentId.set(null);
     this.collectionId.set(null);

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

@@ -8,13 +8,31 @@
       >
         <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>
+          @for (col of sortableColumns; track col.field) {
+            <th
+              class="px-4 py-2 font-medium cursor-pointer select-none transition-colors hover:brightness-125"
+              [class.max-w-48]="col.field === 'designer'"
+              (click)="db.toggleSort(col.field)"
+            >
+              <div class="flex items-center justify-between gap-1">
+                <span>{{ col.label }}</span>
+                @if (db.sortColumn() === col.field) {
+                  <span
+                    class="material-symbols-outlined"
+                    style="
+                      font-size: 14px;
+                      font-variation-settings:
+                        'opsz' 20,
+                        'wght' 300;
+                    "
+                    [style.color]="'var(--accent)'"
+                  >
+                    {{ db.sortDirection() === 'ASC' ? 'arrow_upward' : 'arrow_downward' }}
+                  </span>
+                }
+              </div>
+            </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>

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

@@ -11,6 +11,16 @@ export class DatagridComponent {
   private messageService = inject(MessageService);
   private el = inject(ElementRef);
 
+  readonly sortableColumns = [
+    { field: 'full_name', label: 'Name' },
+    { field: 'font_family', label: 'Family' },
+    { field: 'font_subfamily', label: 'Style' },
+    { field: 'file_type', label: 'Type' },
+    { field: 'file_size', label: 'Size' },
+    { field: 'version', label: 'Version' },
+    { field: 'designer', label: 'Designer' },
+  ];
+
   constructor() {
     effect(() => {
       this.db.currentPage();