fontastic 1.0.2 → 1.2.0

package/.github/workflows/claude-code-review.yml

@@ -12,12 +12,6 @@ on:
 
 jobs:
   claude-review:
-    # Optional: Filter by PR author
-    # if: |
-    #   github.event.pull_request.user.login == 'external-contributor' ||
-    #   github.event.pull_request.user.login == 'new-developer' ||
-    #   github.event.pull_request.author_association == 'FIRST_TIME_CONTRIBUTOR'
-
     runs-on: ubuntu-latest
     permissions:
       contents: read

package/.github/workflows/release-please.yml

@@ -0,0 +1,25 @@
+on:
+  push:
+    branches:
+      - master
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: write
+  pull-requests: write
+
+name: release-please
+
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: googleapis/release-please-action@v4.4.0
+        with:
+          token: ${{ secrets.RELEASE_PLEASE_TOKEN }}
+          config-file: release-please-config.json
+          manifest-file: .release-please-manifest.json

package/.github/workflows/release.yml

@@ -1,117 +1,14 @@
-name: Release
+name: Release Build
 
 on:
-  workflow_dispatch:
-    inputs:
-      bump:
-        description: 'Version bump type'
-        required: true
-        type: choice
-        options: [patch, minor, major]
+  release:
+    types: [published]
 
 permissions:
   contents: write
 
 jobs:
-  version:
-    runs-on: ubuntu-22.04
-    outputs:
-      version: ${{ steps.version.outputs.version }}
-    steps:
-      - name: Guard — owner only
-        if: github.actor != github.repository_owner
-        run: |
-          echo "Only the repository owner can trigger releases."
-          exit 1
-
-      - name: Checkout
-        uses: actions/checkout@v6
-        with:
-          fetch-depth: 0
-
-      - name: Setup Node 24
-        uses: actions/setup-node@v6
-        with:
-          node-version: '24'
-
-      - name: Configure git
-        run: |
-          git config user.name "github-actions[bot]"
-          git config user.email "github-actions[bot]@users.noreply.github.com"
-
-      - name: Bump version
-        env:
-          BUMP: ${{ github.event.inputs.bump }}
-        run: |
-          npm version "$BUMP" --no-git-tag-version
-          node -e "const fs=require('fs');const app=JSON.parse(fs.readFileSync('./app/package.json'));app.version=require('./package.json').version;fs.writeFileSync('./app/package.json',JSON.stringify(app,null,2)+'\n');"
-
-      - name: Capture new version
-        id: version
-        run: echo "version=$(jq -r .version package.json)" >> "$GITHUB_OUTPUT"
-
-      - name: Generate changelog
-        run: |
-          node -e "
-          const { execSync } = require('child_process');
-          const fs = require('fs');
-
-          const lastTag = execSync('git describe --tags --abbrev=0').toString().trim();
-          const log = execSync('git log ' + lastTag + '..HEAD --format=%s').toString().trim();
-
-          const types = [
-            ['feat',     '### Features'],
-            ['fix',      '### Bug Fixes'],
-            ['refactor', '### Refactoring'],
-            ['revert',   '### Reverts'],
-            ['perf',     '### Performance'],
-          ];
-          const typeMap = Object.fromEntries(types.map(([k, v]) => [k, v]));
-
-          const pattern = /^(\w+)(\(.+?\))?(!)?: (.+)$/;
-          const groups = {};
-
-          for (const line of log.split('\n')) {
-            const m = line.match(pattern);
-            if (!m) continue;
-            const type = m[1];
-            const scope = m[2] ? m[2].slice(1, -1) : null;
-            const msg = m[4];
-            const label = typeMap[type];
-            if (!label) continue;
-            if (!groups[type]) groups[type] = [];
-            groups[type].push(scope ? '- **' + scope + '**: ' + msg : '- ' + msg);
-          }
-
-          const sections = types
-            .filter(([k]) => groups[k])
-            .map(([k, header]) => header + '\n' + groups[k].join('\n'))
-            .join('\n\n');
-
-          const body = sections || '_No conventional commits found since last release._';
-          fs.writeFileSync('CHANGELOG_BODY.md', body);
-          console.log('Changelog written.');
-          "
-
-      - name: Commit, tag, and push
-        env:
-          VERSION: ${{ steps.version.outputs.version }}
-        run: |
-          git add package.json app/package.json
-          git commit -m "[Bumped Version] ${VERSION}"
-          git push origin master
-          git tag "${VERSION}"
-          git push origin "${VERSION}"
-
-      - name: Create GitHub Release
-        env:
-          GH_TOKEN: ${{ github.token }}
-          VERSION: ${{ steps.version.outputs.version }}
-        run: gh release create "${VERSION}" --notes-file CHANGELOG_BODY.md --title "${VERSION}"
-
-
   build:
-    needs: version
     strategy:
       matrix:
         include:
@@ -126,7 +23,7 @@ jobs:
       - name: Checkout tag
         uses: actions/checkout@v6
         with:
-          ref: ${{ needs.version.outputs.version }}
+          ref: ${{ github.event.release.tag_name }}
 
       - name: Setup Node 24
         uses: actions/setup-node@v6
@@ -152,13 +49,12 @@ jobs:
       - name: Upload artifacts to release
         env:
           GH_TOKEN: ${{ github.token }}
-          VERSION: ${{ needs.version.outputs.version }}
         shell: bash
         run: |
           shopt -s nullglob
           files=(release/*.dmg release/*.AppImage release/*.exe release/*.zip release/*.deb release/*.rpm)
           if [ ${#files[@]} -gt 0 ]; then
-            gh release upload "${VERSION}" "${files[@]}" --clobber
+            gh release upload "${{ github.event.release.tag_name }}" "${files[@]}" --clobber
           else
             echo "No release artifacts found"
             exit 1

package/.release-please-manifest.json

@@ -0,0 +1,3 @@
+{
+  ".": "1.2.0"
+}

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# Changelog
+
+## [1.2.0](https://github.com/tomshaw/fontastic/compare/fontastic-v1.1.0...fontastic-v1.2.0) (2026-03-14)
+
+
+### 🎉 Features
+
+* **app:** enhance application plist patching and update icon handling ([297c052](https://github.com/tomshaw/fontastic/commit/297c052a2561962d8d6d1dd2f28f31bf5dcb66ba))
+* **app:** set application name to 'Fontastic' and add plist patching script ([af31cf6](https://github.com/tomshaw/fontastic/commit/af31cf61153b82c8a625755f5fc460b6d8205291))
+* **collection:** implement root collection creation request handling ([cba01d0](https://github.com/tomshaw/fontastic/commit/cba01d098998797d914c75f6cd32f814b3703fb0))
+* **navigation:** implement smart collection creation with input handling ([5cb72ae](https://github.com/tomshaw/fontastic/commit/5cb72ae9f576e0fb8dc1372ab411ea4e2d764191))
+* **release:** add release-please configuration and manifest files ([5cb72ae](https://github.com/tomshaw/fontastic/commit/5cb72ae9f576e0fb8dc1372ab411ea4e2d764191))
+
+
+### 🛠️ Fixes
+
+* **release:** update release configuration and manifest version ([759486b](https://github.com/tomshaw/fontastic/commit/759486b556982d90c5e3eaef38cfa0c214e7ac38))

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/main.js

@@ -5,10 +5,19 @@ const path = require("path");
 const fs = require("fs");
 const node_machine_id_1 = require("node-machine-id");
 const Application_1 = require("./Application");
+electron_1.app.name = 'Fontastic';
+const iconPath = path.join(__dirname, '..', 'src', 'assets', 'icons', 'favicon.512x512.png');
+electron_1.app.setAboutPanelOptions({
+    applicationName: 'Fontastic',
+    applicationVersion: electron_1.app.getVersion(),
+    iconPath,
+});
 let win = null;
 let resolveAppReady;
-const appReadyPromise = new Promise(resolve => { resolveAppReady = resolve; });
-const args = process.argv.slice(1), serve = args.some(val => val === '--serve');
+const appReadyPromise = new Promise((resolve) => {
+    resolveAppReady = resolve;
+});
+const args = process.argv.slice(1), serve = args.some((val) => val === '--serve');
 function createWindow() {
     const size = electron_1.screen.getPrimaryDisplay().workAreaSize;
     // Create the browser window.
@@ -21,15 +30,15 @@ function createWindow() {
             nodeIntegration: true,
             allowRunningInsecureContent: serve,
             contextIsolation: false,
-            webSecurity: !serve
+            webSecurity: !serve,
         },
     });
     (0, node_machine_id_1.machineId)(true).then((machineId) => new Application_1.default(machineId, !serve, win).initialize().then(() => resolveAppReady()));
     if (serve) {
-        Promise.resolve().then(() => require('electron-debug')).then(debug => {
+        Promise.resolve().then(() => require('electron-debug')).then((debug) => {
             debug.default({ isEnabled: true, showDevTools: true });
         });
-        Promise.resolve().then(() => require('electron-reloader')).then(reloader => {
+        Promise.resolve().then(() => require('electron-reloader')).then((reloader) => {
             const reloaderFn = reloader.default || reloader;
             // watchRenderer: false — Angular dev server handles HMR for the renderer.
             // Without this, reloader triggers spurious reloads on macOS (issue #840).
@@ -58,10 +67,12 @@ function createWindow() {
     return win;
 }
 try {
-    electron_1.protocol.registerSchemesAsPrivileged([{
+    electron_1.protocol.registerSchemesAsPrivileged([
+        {
             scheme: 'font',
-            privileges: { bypassCSP: true, supportFetchAPI: true }
-        }]);
+            privileges: { bypassCSP: true, supportFetchAPI: true },
+        },
+    ]);
     electron_1.ipcMain.handle('app:get-version', () => electron_1.app.getVersion());
     electron_1.ipcMain.handle('app:ready', () => appReadyPromise);
     // This method will be called when Electron has finished

package/app/main.ts

@@ -1,18 +1,29 @@
-import {app, BrowserWindow, ipcMain, net, protocol, screen} from 'electron';
+import { app, BrowserWindow, ipcMain, nativeImage, net, protocol, screen } from 'electron';
 import * as path from 'path';
 import * as fs from 'fs';
 import { machineId } from 'node-machine-id';
 import Application from './Application';
 
+app.name = 'Fontastic';
+
+const iconPath = path.join(__dirname, '..', 'src', 'assets', 'icons', 'favicon.512x512.png');
+
+app.setAboutPanelOptions({
+  applicationName: 'Fontastic',
+  applicationVersion: app.getVersion(),
+  iconPath,
+});
+
 let win: BrowserWindow | null = null;
 let resolveAppReady: () => void;
-const appReadyPromise = new Promise<void>(resolve => { resolveAppReady = resolve; });
+const appReadyPromise = new Promise<void>((resolve) => {
+  resolveAppReady = resolve;
+});
 
 const args = process.argv.slice(1),
-  serve = args.some(val => val === '--serve');
+  serve = args.some((val) => val === '--serve');
 
 function createWindow(): BrowserWindow {
-
   const size = screen.getPrimaryDisplay().workAreaSize;
 
   // Create the browser window.
@@ -25,20 +36,18 @@ function createWindow(): BrowserWindow {
       nodeIntegration: true,
       allowRunningInsecureContent: serve,
       contextIsolation: false,
-      webSecurity: !serve
+      webSecurity: !serve,
     },
   });
 
-  machineId(true).then((machineId: string) =>
-    new Application(machineId, !serve, win!).initialize().then(() => resolveAppReady())
-  );
+  machineId(true).then((machineId: string) => new Application(machineId, !serve, win!).initialize().then(() => resolveAppReady()));
 
   if (serve) {
-    import('electron-debug').then(debug => {
-      debug.default({isEnabled: true, showDevTools: true});
+    import('electron-debug').then((debug) => {
+      debug.default({ isEnabled: true, showDevTools: true });
     });
 
-    import('electron-reloader').then(reloader => {
+    import('electron-reloader').then((reloader) => {
       const reloaderFn = (reloader as any).default || reloader;
       // watchRenderer: false — Angular dev server handles HMR for the renderer.
       // Without this, reloader triggers spurious reloads on macOS (issue #840).
@@ -50,7 +59,7 @@ function createWindow(): BrowserWindow {
     let pathIndex = './browser/index.html';
 
     if (fs.existsSync(path.join(__dirname, '../dist/browser/index.html'))) {
-       // Path when running electron in local folder
+      // Path when running electron in local folder
       pathIndex = '../dist/browser/index.html';
     }
 
@@ -71,10 +80,12 @@ function createWindow(): BrowserWindow {
 }
 
 try {
-  protocol.registerSchemesAsPrivileged([{
-    scheme: 'font',
-    privileges: { bypassCSP: true, supportFetchAPI: true }
-  }]);
+  protocol.registerSchemesAsPrivileged([
+    {
+      scheme: 'font',
+      privileges: { bypassCSP: true, supportFetchAPI: true },
+    },
+  ]);
 
   ipcMain.handle('app:get-version', () => app.getVersion());
   ipcMain.handle('app:ready', () => appReadyPromise);
@@ -107,7 +118,6 @@ try {
       createWindow();
     }
   });
-
 } catch (e) {
   // Catch Error
   // throw e;

package/app/package.json

@@ -5,7 +5,7 @@
     "name": "Tom Shaw",
     "email": ""
   },
-  "version": "1.0.2",
+  "version": "1.2.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.2.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": {
@@ -24,7 +24,7 @@
   ],
   "main": "app/main.js",
   "scripts": {
-    "postinstall": "electron-builder install-app-deps",
+    "postinstall": "electron-builder install-app-deps && node scripts/patch-electron-plist.js",
     "ng": "ng",
     "start": "npm-run-all -p electron:serve ng:serve",
     "ng:serve": "ng serve -c dev -o",

package/release-please-config.json

@@ -0,0 +1,20 @@
+{
+  "last-release-sha": "c7f3f9afba466a150f90e374f8a401daf1a56d11",
+  "packages": {
+    ".": {
+      "release-type": "node",
+      "extra-files": ["app/package.json"],
+      "changelog-sections": [
+        { "type": "feat", "section": "🎉 Features", "hidden": false },
+        { "type": "fix", "section": "🛠️ Fixes", "hidden": false },
+        { "type": "docs", "section": "📄 Documentation", "hidden": false },
+        { "type": "perf", "section": "⚡ Performance", "hidden": false },
+        { "type": "refactor", "section": "🏗️ Refactor", "hidden": false },
+        { "type": "chore", "section": "♻️ Chores", "hidden": true },
+        { "type": "test", "section": "♻️ Chores", "hidden": true },
+        { "type": "build", "section": "⚙️ Automation", "hidden": true },
+        { "type": "ci", "section": "⚙️ Automation", "hidden": true }
+      ]
+    }
+  }
+}

package/scripts/patch-electron-plist.js

@@ -0,0 +1,41 @@
+const { execSync } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+
+if (process.platform !== 'darwin') {
+  process.exit(0);
+}
+
+const electronAppDir = path.join(
+  __dirname,
+  '..',
+  'node_modules',
+  'electron',
+  'dist',
+  'Electron.app'
+);
+
+const plist = path.join(electronAppDir, 'Contents', 'Info.plist');
+
+if (!fs.existsSync(plist)) {
+  process.exit(0);
+}
+
+const pkg = require(path.join(__dirname, '..', 'package.json'));
+const appName = 'Fontastic';
+const appVersion = pkg.version;
+
+execSync(`/usr/libexec/PlistBuddy -c "Set :CFBundleName ${appName}" "${plist}"`);
+execSync(`/usr/libexec/PlistBuddy -c "Set :CFBundleDisplayName ${appName}" "${plist}"`);
+execSync(`/usr/libexec/PlistBuddy -c "Set :CFBundleShortVersionString ${appVersion}" "${plist}"`);
+
+// Copy app icon into the Electron.app bundle
+const srcIcon = path.join(__dirname, '..', 'src', 'assets', 'icons', 'favicon.icns');
+const destIcon = path.join(electronAppDir, 'Contents', 'Resources', 'electron.icns');
+
+if (fs.existsSync(srcIcon)) {
+  fs.copyFileSync(srcIcon, destIcon);
+  console.log('Copied app icon into Electron.app bundle');
+}
+
+console.log(`Patched Electron.app plist: name="${appName}", version="${appVersion}"`);

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/core/services/presentation/presentation.service.ts

@@ -133,6 +133,13 @@ export class PresentationService {
 
   readonly selectedGlyph = signal<number | null>(null);
 
+  readonly createRootCollectionRequest = signal(0);
+
+  requestCreateRootCollection() {
+    this.navigationEnabled.set(true);
+    this.createRootCollectionRequest.update((v) => v + 1);
+  }
+
   readonly navigationExpandedIds = signal<number[]>([]);
 
   readonly gridEnabled = signal(true);

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

@@ -106,13 +106,3 @@
     </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,42 +1,23 @@
-import { Component, inject, effect } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { Router } from '@angular/router';
-import { PromptDialogComponent } from '../../shared/components';
-import { DatabaseService, PresentationService } from '../../core/services';
+import { PresentationService } from '../../core/services';
 
 @Component({
   selector: 'app-header',
   standalone: true,
-  imports: [PromptDialogComponent],
+  imports: [],
   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;
+    this.presentation.requestCreateRootCollection();
   }
 
   handleToggleSearch(_event: Event) {

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

@@ -16,7 +16,7 @@
             'wght' 300;
         "
         title="New Smart Collection"
-        (click)="openCreateSmartCollection()"
+        (click)="$event.stopPropagation(); openCreateSmartCollection()"
         >add</span
       >
       <ul class="flex flex-col py-0.5">
@@ -64,10 +64,39 @@
             'wght' 300;
         "
         title="New Collection"
-        (click)="openCreateRootCollection()"
+        (click)="$event.stopPropagation(); openCreateRootCollection()"
         >add</span
       >
       <ul class="flex-1 overflow-auto flex flex-col py-0.5">
+        @if (isCreating && pendingParentId === 0) {
+          <li>
+            <a class="flex items-center pr-3 py-1 text-xs font-normal" style="padding-left: 14px">
+              <span
+                class="material-symbols-outlined icon-sm mr-1"
+                [style.color]="'var(--text-muted)'"
+                style="
+                  font-variation-settings:
+                    'opsz' 20,
+                    'wght' 300;
+                "
+                >chevron_right</span
+              >
+              <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)]="creatingTitle"
+                (blur)="saveCreating()"
+                (keydown.enter)="saveCreating()"
+                (keydown.escape)="cancelCreating()"
+                (click)="$event.stopPropagation()"
+                placeholder="Collection name"
+                appAutofocus
+              />
+            </a>
+          </li>
+        }
         <ng-container *ngTemplateOutlet="subtree; context: { $implicit: tree(), level: 0 }" />
         <li
           class="flex-1 min-h-6"
@@ -142,8 +171,37 @@
               {{ node.collection.title }}
             }
           </a>
-          @if (node.children.length && isExpanded(node.collection.id)) {
+          @if ((node.children.length && isExpanded(node.collection.id)) || (isCreating && pendingParentId === node.collection.id)) {
             <ul>
+              @if (isCreating && pendingParentId === node.collection.id) {
+                <li>
+                  <a class="flex items-center pr-3 py-1 text-xs font-normal" [style.padding-left.px]="14 + (level + 1) * 14">
+                    <span
+                      class="material-symbols-outlined icon-sm mr-1"
+                      [style.color]="'var(--text-muted)'"
+                      style="
+                        font-variation-settings:
+                          'opsz' 20,
+                          'wght' 300;
+                      "
+                      >chevron_right</span
+                    >
+                    <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)]="creatingTitle"
+                      (blur)="saveCreating()"
+                      (keydown.enter)="saveCreating()"
+                      (keydown.escape)="cancelCreating()"
+                      (click)="$event.stopPropagation()"
+                      placeholder="Collection name"
+                      appAutofocus
+                    />
+                  </a>
+                </li>
+              }
               <ng-container *ngTemplateOutlet="subtree; context: { $implicit: node.children, level: level + 1 }" />
             </ul>
           }
@@ -161,16 +219,6 @@
       />
     }
 
-    @if (showCollectionDialog) {
-      <app-prompt-dialog
-        title="New Collection"
-        placeholder="Collection name"
-        confirmText="Create"
-        (confirmed)="onCollectionConfirmed($event)"
-        (cancelled)="onCollectionCancelled()"
-      />
-    }
-
     @if (smartContextMenu) {
       <app-context-menu
         [x]="smartContextMenu.x"

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

@@ -1,10 +1,10 @@
-import { Component, inject, computed, OnInit, OnDestroy } from '@angular/core';
+import { Component, inject, computed, effect, OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { DatabaseService, MessageService, PresentationService } from '../../core/services';
 import { CollapsiblePanelComponent } from '../../shared/components/collapsible-panel/collapsible-panel.component';
 import { ContextMenuComponent, ContextMenuItem } from '../../shared/components/context-menu/context-menu.component';
-import { PromptDialogComponent, RuleBuilderComponent } from '../../shared/components';
+import { RuleBuilderComponent } from '../../shared/components';
 import { AutofocusDirective } from '../../shared/directives/autofocus/autofocus.directive';
 import { LibraryComponent } from './library/library.component';
 import { NewsStatsComponent } from './stats/stats.component';
@@ -26,7 +26,6 @@ export interface TreeNode {
     FormsModule,
     CollapsiblePanelComponent,
     ContextMenuComponent,
-    PromptDialogComponent,
     RuleBuilderComponent,
     AutofocusDirective,
     LibraryComponent,
@@ -39,6 +38,15 @@ export class NavigationComponent implements OnInit, OnDestroy {
   private message = inject(MessageService);
   private presentation = inject(PresentationService);
 
+  constructor() {
+    effect(() => {
+      const req = this.presentation.createRootCollectionRequest();
+      if (req > 0) {
+        this.openCreateRootCollection();
+      }
+    });
+  }
+
   private menuToggleListener = (_event: any, panel: string) => {
     if (panel === 'expand-collections') {
       this.expandAll();
@@ -72,7 +80,8 @@ export class NavigationComponent implements OnInit, OnDestroy {
   editingTitle = '';
   allExpanded = false;
 
-  showCollectionDialog = false;
+  isCreating = false;
+  creatingTitle = '';
   pendingParentId: number | null = null;
 
   // Smart Collection state
@@ -256,7 +265,9 @@ export class NavigationComponent implements OnInit, OnDestroy {
     switch (action) {
       case 'add-collection':
         this.pendingParentId = collection.id;
-        this.showCollectionDialog = true;
+        this.isCreating = true;
+        this.creatingTitle = '';
+        this.presentation.expandNavigationId(collection.id);
         break;
       case 'add-fonts':
         this.handleAddFonts(collection);
@@ -273,17 +284,24 @@ export class NavigationComponent implements OnInit, OnDestroy {
 
   openCreateRootCollection() {
     this.pendingParentId = 0;
-    this.showCollectionDialog = true;
+    this.isCreating = true;
+    this.creatingTitle = '';
   }
 
-  onCollectionConfirmed(name: string) {
-    this.db.collectionCreate({ title: name, parentId: this.pendingParentId });
-    this.showCollectionDialog = false;
-    this.pendingParentId = null;
+  saveCreating() {
+    const title = this.creatingTitle.trim();
+    if (title) {
+      this.db.collectionCreate({ title, parentId: this.pendingParentId });
+      if (this.pendingParentId) {
+        this.presentation.expandNavigationId(this.pendingParentId);
+      }
+    }
+    this.cancelCreating();
   }
 
-  onCollectionCancelled() {
-    this.showCollectionDialog = false;
+  cancelCreating() {
+    this.isCreating = false;
+    this.creatingTitle = '';
     this.pendingParentId = 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();