fontastic 1.0.1 → 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/core/menu/templates/DarwinTemplate.js

@@ -122,7 +122,7 @@ class DarwinTemplate {
             { label: 'Toggle Navigation', panel: 'navigation', accelerator: 'Alt+Command+1' },
             { label: 'Toggle Aside', panel: 'aside', accelerator: 'Alt+Command+2' },
             { label: 'Toggle Preview', panel: 'preview', accelerator: 'Alt+Command+3' },
-            { label: 'Toggle Inspect', panel: 'inspect', accelerator: 'Alt+Command+4' },
+            { label: 'Toggle Glyphs', panel: 'glyphs', accelerator: 'Alt+Command+4' },
             { label: 'Toggle Toolbar', panel: 'toolbar', accelerator: 'Alt+Command+5' },
             { label: 'Toggle Grid', panel: 'grid', accelerator: 'Alt+Command+6' },
             { label: 'Toggle Waterfall', panel: 'waterfall', accelerator: 'Alt+Command+7' },

package/app/core/menu/templates/DarwinTemplate.ts

@@ -142,7 +142,7 @@ export default class DarwinTemplate {
       { label: 'Toggle Navigation', panel: 'navigation', accelerator: 'Alt+Command+1' },
       { label: 'Toggle Aside', panel: 'aside', accelerator: 'Alt+Command+2' },
       { label: 'Toggle Preview', panel: 'preview', accelerator: 'Alt+Command+3' },
-      { label: 'Toggle Inspect', panel: 'inspect', accelerator: 'Alt+Command+4' },
+      { label: 'Toggle Glyphs', panel: 'glyphs', accelerator: 'Alt+Command+4' },
       { label: 'Toggle Toolbar', panel: 'toolbar', accelerator: 'Alt+Command+5' },
       { label: 'Toggle Grid', panel: 'grid', accelerator: 'Alt+Command+6' },
       { label: 'Toggle Waterfall', panel: 'waterfall', accelerator: 'Alt+Command+7' },

package/app/core/menu/templates/SystemTemplate.js

@@ -119,7 +119,7 @@ class SystemTemplate {
             { label: 'Toggle Navigation', panel: 'navigation', accelerator: 'Alt+Ctrl+1' },
             { label: 'Toggle Aside', panel: 'aside', accelerator: 'Alt+Ctrl+2' },
             { label: 'Toggle Preview', panel: 'preview', accelerator: 'Alt+Ctrl+3' },
-            { label: 'Toggle Inspect', panel: 'inspect', accelerator: 'Alt+Ctrl+4' },
+            { label: 'Toggle Glyphs', panel: 'glyphs', accelerator: 'Alt+Ctrl+4' },
             { label: 'Toggle Toolbar', panel: 'toolbar', accelerator: 'Alt+Ctrl+5' },
             { label: 'Toggle Grid', panel: 'grid', accelerator: 'Alt+Ctrl+6' },
             { label: 'Toggle Waterfall', panel: 'waterfall', accelerator: 'Alt+Ctrl+7' },

package/app/core/menu/templates/SystemTemplate.ts

@@ -134,7 +134,7 @@ export default class SystemTemplate {
       { label: 'Toggle Navigation', panel: 'navigation', accelerator: 'Alt+Ctrl+1' },
       { label: 'Toggle Aside', panel: 'aside', accelerator: 'Alt+Ctrl+2' },
       { label: 'Toggle Preview', panel: 'preview', accelerator: 'Alt+Ctrl+3' },
-      { label: 'Toggle Inspect', panel: 'inspect', accelerator: 'Alt+Ctrl+4' },
+      { label: 'Toggle Glyphs', panel: 'glyphs', accelerator: 'Alt+Ctrl+4' },
       { label: 'Toggle Toolbar', panel: 'toolbar', accelerator: 'Alt+Ctrl+5' },
       { label: 'Toggle Grid', panel: 'grid', accelerator: 'Alt+Ctrl+6' },
       { label: 'Toggle Waterfall', panel: 'waterfall', accelerator: 'Alt+Ctrl+7' },

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.1",
+  "version": "1.1.0",
   "main": "main.js",
   "private": true,
   "dependencies": {

package/app/types/SystemConfig.ts

@@ -30,7 +30,7 @@ export interface LayoutPanelType {
   navigationEnabled: boolean;
   toolbarEnabled: boolean;
   previewEnabled: boolean;
-  inspectEnabled: boolean;
+  glyphsEnabled: boolean;
   searchEnabled: boolean;
   waterfallEnabled: boolean;
 }
@@ -46,6 +46,7 @@ export interface LayoutPreviewType {
   displayText: string | null;
   wordSpacing: number;
   letterSpacing: number;
+  selectedGlyph: number | null;
 }
 
 export interface LayoutType {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fontastic",
-  "version": "1.0.1",
-  "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/core/services/presentation/presentation.service.ts

@@ -61,7 +61,7 @@ export class PresentationService {
           navigationEnabled: this.navigationEnabled(),
           toolbarEnabled: this.toolbarEnabled(),
           previewEnabled: this.previewEnabled(),
-          inspectEnabled: this.inspectEnabled(),
+          glyphsEnabled: this.glyphsEnabled(),
           searchEnabled: this.searchEnabled(),
           waterfallEnabled: this.waterfallEnabled(),
         };
@@ -89,6 +89,7 @@ export class PresentationService {
           displayText: this.customText(),
           wordSpacing: this.wordSpacing(),
           letterSpacing: this.letterSpacing(),
+          selectedGlyph: this.selectedGlyph(),
         };
         if (previewInitialized) {
           untracked(() => this.messageService.set(StorageType.LayoutPreview, settings));
@@ -130,12 +131,14 @@ export class PresentationService {
   readonly letterSpacing = signal(0);
   readonly wordSpacing = signal(0);
 
+  readonly selectedGlyph = signal<number | null>(null);
+
   readonly navigationExpandedIds = signal<number[]>([]);
 
   readonly gridEnabled = signal(true);
   readonly toolbarEnabled = signal(true);
   readonly previewEnabled = signal(true);
-  readonly inspectEnabled = signal(false);
+  readonly glyphsEnabled = signal(false);
   readonly asideEnabled = signal(true);
   readonly navigationEnabled = signal(true);
   readonly searchEnabled = signal(false);
@@ -147,7 +150,7 @@ export class PresentationService {
         this.gridEnabled(),
         this.toolbarEnabled(),
         this.previewEnabled(),
-        this.inspectEnabled(),
+        this.glyphsEnabled(),
         this.asideEnabled(),
         this.navigationEnabled(),
       ].filter(Boolean).length,
@@ -162,8 +165,8 @@ export class PresentationService {
   togglePreview() {
     this.previewEnabled.update((v) => !v);
   }
-  toggleInspect() {
-    this.inspectEnabled.update((v) => !v);
+  toggleGlyphs() {
+    this.glyphsEnabled.update((v) => !v);
   }
   toggleAside() {
     this.asideEnabled.update((v) => !v);
@@ -176,7 +179,7 @@ export class PresentationService {
     this.searchEnabled.set(enabling);
     if (enabling) {
       this.waterfallEnabled.set(false);
-      this.inspectEnabled.set(false);
+      this.glyphsEnabled.set(false);
       this.previewEnabled.set(false);
     }
   }
@@ -188,7 +191,7 @@ export class PresentationService {
     navigation: () => this.toggleNavigation(),
     aside: () => this.toggleAside(),
     preview: () => this.togglePreview(),
-    inspect: () => this.toggleInspect(),
+    glyphs: () => this.toggleGlyphs(),
     toolbar: () => this.toggleToolbar(),
     grid: () => this.toggleGrid(),
     waterfall: () => this.toggleWaterfall(),
@@ -253,7 +256,7 @@ export class PresentationService {
       this.navigationEnabled.set(settings.navigationEnabled);
       this.toolbarEnabled.set(settings.toolbarEnabled);
       this.previewEnabled.set(settings.previewEnabled);
-      this.inspectEnabled.set(settings.inspectEnabled);
+      this.glyphsEnabled.set(settings.glyphsEnabled);
       if (settings.searchEnabled !== undefined) {
         this.searchEnabled.set(settings.searchEnabled);
       }
@@ -274,6 +277,9 @@ export class PresentationService {
       if (settings.displayText) {
         this.customText.set(settings.displayText);
       }
+      if (settings.selectedGlyph !== undefined) {
+        this.selectedGlyph.set(settings.selectedGlyph);
+      }
     }
   }
 
@@ -281,7 +287,7 @@ export class PresentationService {
     this.gridEnabled.set(true);
     this.toolbarEnabled.set(true);
     this.previewEnabled.set(true);
-    this.inspectEnabled.set(false);
+    this.glyphsEnabled.set(false);
     this.asideEnabled.set(true);
     this.navigationEnabled.set(true);
     this.searchEnabled.set(false);

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

@@ -39,11 +39,11 @@
       >
       <a
         href="javascript:;"
-        (click)="presentation.toggleInspect()"
+        (click)="presentation.toggleGlyphs()"
         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
+        [style.color]="presentation.glyphsEnabled() ? 'var(--text-primary)' : 'var(--text-muted)'"
+        title="Toggle Glyphs"
+        ><i class="material-symbols-outlined block text-xl leading-none p-0 mb-0.5">info</i> Glyphs</a
       >
       <a
         href="javascript:;"

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

@@ -3,7 +3,7 @@
   [style.grid-template-rows]="
     (presentation.searchEnabled() ? '1fr ' : '') +
     (presentation.previewEnabled() ? '1fr ' : '') +
-    (presentation.inspectEnabled() ? '1fr ' : '') +
+    (presentation.glyphsEnabled() ? '1fr ' : '') +
     (presentation.waterfallEnabled() ? '1fr ' : '') +
     (presentation.toolbarEnabled() ? '42px ' : '') +
     (presentation.gridEnabled() ? '1fr' : '')
@@ -19,9 +19,9 @@
       <app-preview />
     </app-panel>
   }
-  @if (presentation.inspectEnabled()) {
+  @if (presentation.glyphsEnabled()) {
     <app-panel class="overflow-auto" [style.border-bottom]="'1px solid var(--border-subtle)'">
-      <app-inspector />
+      <app-glyphs />
     </app-panel>
   }
   @if (presentation.waterfallEnabled()) {

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

@@ -4,7 +4,7 @@ import { PanelComponent } from '../../shared/components/panel/panel.component';
 import { PreviewComponent } from '../../shared/components/preview/preview.component';
 import { DatagridComponent } from '../../shared/components/datagrid/datagrid.component';
 import { ToolbarComponent } from '../../shared/components/toolbar/toolbar.component';
-import { InspectorComponent } from '../../shared/components/inspector/inspector.component';
+import { GlyphsComponent } from '../../shared/components/glyphs/glyphs.component';
 import { SearchComponent } from '../../shared/components/search/search.component';
 import { WaterfallComponent } from '../../shared/components/waterfall/waterfall.component';
 import { PresentationService } from '../../core/services';
@@ -12,7 +12,7 @@ import { PresentationService } from '../../core/services';
 @Component({
   selector: 'app-main',
   standalone: true,
-  imports: [PanelComponent, PreviewComponent, DatagridComponent, ToolbarComponent, InspectorComponent, SearchComponent, WaterfallComponent],
+  imports: [PanelComponent, PreviewComponent, DatagridComponent, ToolbarComponent, GlyphsComponent, SearchComponent, WaterfallComponent],
   templateUrl: './main.component.html',
 })
 export class MainComponent {

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

@@ -241,8 +241,8 @@ export class NavigationComponent implements OnInit, OnDestroy {
     this.contextMenuItems = [
       { label: 'Add Collection', action: 'add-collection', icon: 'create_new_folder' },
       { label: 'Add Fonts', action: 'add-fonts', icon: 'list_alt' },
-      { label: 'Rename', action: 'rename' },
-      { label: 'Delete', action: 'delete' },
+      { label: 'Rename', action: 'rename', icon: 'edit', separator: true },
+      { label: 'Delete', action: 'delete', icon: 'delete', separator: true },
     ];
 
     this.contextMenu = { x: event.clientX, y: event.clientY, collection };
@@ -413,7 +413,7 @@ export class NavigationComponent implements OnInit, OnDestroy {
 
     this.smartContextMenuItems = [
       { label: 'Edit Rules', action: 'edit-rules', icon: 'tune' },
-      { label: 'Delete', action: 'delete' },
+      { label: 'Delete', action: 'delete', icon: 'delete', separator: true },
     ];
 
     this.smartContextMenu = { x: event.clientX, y: event.clientY, smartCollection: sc };

package/src/app/shared/components/context-menu/context-menu.component.ts

@@ -4,38 +4,87 @@ export interface ContextMenuItem {
   label: string;
   action: string;
   icon?: string;
+  separator?: boolean;
 }
 
 @Component({
   selector: 'app-context-menu',
   standalone: true,
   template: `
-    <div
-      class="fixed z-50 min-w-[160px] rounded-lg py-1"
-      [style.left.px]="x()"
-      [style.top.px]="y()"
-      [style.background-color]="'var(--context-bg)'"
-      [style.border]="'1px solid var(--context-border)'"
-      [style.box-shadow]="'var(--context-shadow)'"
-      [style.color]="'var(--text-primary)'"
-    >
+    <div class="context-menu fixed z-50" [style.left.px]="x()" [style.top.px]="y()">
       @for (item of items(); track item.action) {
-        <button
-          class="w-full text-left px-4 py-1.5 text-xs cursor-pointer transition-colors"
-          [style.color]="'var(--text-secondary)'"
-          (mouseenter)="
-            $any($event.target).style.backgroundColor = 'var(--hover-bg)'; $any($event.target).style.color = 'var(--text-primary)'
-          "
-          (mouseleave)="
-            $any($event.target).style.backgroundColor = 'transparent'; $any($event.target).style.color = 'var(--text-secondary)'
-          "
-          (click)="menuSelect.emit(item.action)"
-        >
-          {{ item.label }}
+        @if (item.separator) {
+          <div class="context-menu-separator"></div>
+        }
+        <button class="context-menu-item" (click)="menuSelect.emit(item.action)">
+          <span class="context-menu-icon">
+            @if (item.icon) {
+              <span class="material-symbols-outlined" style="font-size: 16px; font-variation-settings: 'opsz' 20, 'wght' 300;">{{
+                item.icon
+              }}</span>
+            }
+          </span>
+          <span class="context-menu-label">{{ item.label }}</span>
         </button>
       }
     </div>
   `,
+  styles: `
+    .context-menu {
+      min-width: 180px;
+      padding: 4px 0;
+      border-radius: 6px;
+      background-color: var(--context-bg);
+      border: 1px solid var(--context-border);
+      box-shadow: var(--context-shadow);
+      color: var(--text-primary);
+    }
+
+    .context-menu-item {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 4px 12px 4px 4px;
+      margin: 0;
+      border: none;
+      background: transparent;
+      color: var(--text-secondary);
+      font-size: 12px;
+      line-height: 1.4;
+      cursor: pointer;
+      border-radius: 0;
+      text-align: left;
+      gap: 0;
+    }
+
+    .context-menu-item:hover {
+      background-color: var(--hover-bg);
+      color: var(--text-primary);
+    }
+
+    .context-menu-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      flex-shrink: 0;
+      color: var(--text-muted);
+    }
+
+    .context-menu-item:hover .context-menu-icon {
+      color: var(--text-primary);
+    }
+
+    .context-menu-label {
+      flex: 1;
+    }
+
+    .context-menu-separator {
+      height: 1px;
+      margin: 4px 0;
+      background-color: var(--context-border);
+    }
+  `,
 })
 export class ContextMenuComponent {
   readonly x = input.required<number>();

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();

package/src/app/shared/components/{inspector/inspector.component.html → glyphs/glyphs.component.html}

@@ -133,7 +133,7 @@
           }
         </div>
       } @else {
-        <p class="text-center py-8 text-xs" [style.color]="'var(--text-muted)'">Select a font to inspect glyphs</p>
+        <p class="text-center py-8 text-xs" [style.color]="'var(--text-muted)'">Select a font to view glyphs</p>
       }
     </div>
   </div>

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

@@ -0,0 +1,60 @@
+import { Component, inject, signal, computed, effect } from '@angular/core';
+import { DatabaseService, PresentationService } from '../../../core/services';
+
+const PAGE_SIZE = 200;
+
+@Component({
+  selector: 'app-glyphs',
+  standalone: true,
+  templateUrl: './glyphs.component.html',
+})
+export class GlyphsComponent {
+  readonly db = inject(DatabaseService);
+  private readonly presentation = inject(PresentationService);
+
+  readonly currentPage = signal(1);
+  readonly selectedGlyph = this.presentation.selectedGlyph;
+
+  readonly totalPages = computed(() => Math.max(1, Math.ceil(this.db.glyphs().length / PAGE_SIZE)));
+
+  readonly pageGlyphs = computed(() => {
+    const glyphs = this.db.glyphs();
+    const start = (this.currentPage() - 1) * PAGE_SIZE;
+    return glyphs.slice(start, start + PAGE_SIZE);
+  });
+
+  readonly fontFamily = computed(() => {
+    const store = this.db.store();
+    return store ? store.full_name || store.font_family || '' : '';
+  });
+
+  constructor() {
+    // Reset selection when user switches to a different font.
+    // Skip the null → savedId transition on startup (restore, not a switch).
+    let lastStoreId: number | null = null;
+    effect(() => {
+      const storeId = this.db.storeId();
+      if (lastStoreId !== null && storeId !== lastStoreId) {
+        this.currentPage.set(1);
+        this.presentation.selectedGlyph.set(null);
+      }
+      lastStoreId = storeId;
+    });
+
+    // Navigate to the correct page for the restored/selected glyph.
+    effect(() => {
+      const glyphs = this.db.glyphs();
+      const selected = this.presentation.selectedGlyph();
+      if (selected !== null && glyphs.length) {
+        const index = glyphs.indexOf(selected);
+        if (index >= 0) {
+          this.currentPage.set(Math.floor(index / PAGE_SIZE) + 1);
+        }
+      }
+    });
+  }
+
+  toChar(codePoint: number): string {
+    return String.fromCodePoint(codePoint);
+  }
+}

package/src/app/shared/components/index.ts

@@ -6,7 +6,7 @@ export * from './datagrid/datagrid.component';
 export * from './prompt-dialog/prompt-dialog.component';
 export * from './rule-builder/rule-builder.component';
 export * from './toolbar/toolbar.component';
-export * from './inspector/inspector.component';
+export * from './glyphs/glyphs.component';
 export * from './search/search.component';
 export * from './spinner/spinner.component';
 export * from './waterfall/waterfall.component';

package/src/styles/components/spinner.css

@@ -1,7 +1,8 @@
 .app-spinner {
   @apply relative block rounded-full w-[19px] h-[19px] m-0 p-0 opacity-0 overflow-hidden border-4 border-[#00a0be];
   border-left: 4px solid #fff;
-  &.is-animating {
-    @apply opacity-100 animate-spin;
-  }
+}
+
+.app-spinner.is-animating {
+  @apply opacity-100 animate-spin;
 }

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

@@ -1,41 +0,0 @@
-import { Component, inject, signal, computed, effect } from '@angular/core';
-import { DatabaseService } from '../../../core/services';
-
-const PAGE_SIZE = 200;
-
-@Component({
-  selector: 'app-inspector',
-  standalone: true,
-  templateUrl: './inspector.component.html',
-})
-export class InspectorComponent {
-  readonly db = inject(DatabaseService);
-
-  readonly currentPage = signal(1);
-  readonly selectedGlyph = signal<number | null>(null);
-
-  readonly totalPages = computed(() => Math.max(1, Math.ceil(this.db.glyphs().length / PAGE_SIZE)));
-
-  readonly pageGlyphs = computed(() => {
-    const glyphs = this.db.glyphs();
-    const start = (this.currentPage() - 1) * PAGE_SIZE;
-    return glyphs.slice(start, start + PAGE_SIZE);
-  });
-
-  readonly fontFamily = computed(() => {
-    const store = this.db.store();
-    return store ? store.full_name || store.font_family || '' : '';
-  });
-
-  constructor() {
-    effect(() => {
-      this.db.glyphs();
-      this.currentPage.set(1);
-      this.selectedGlyph.set(null);
-    });
-  }
-
-  toChar(codePoint: number): string {
-    return String.fromCodePoint(codePoint);
-  }
-}