fontastic 1.0.0 → 1.0.2

package/app/database/repository/Store.repository.ts

@@ -1,6 +1,7 @@
 import { Brackets, Equal } from 'typeorm';
 import { Store } from '../entity';
 import { searchDbColumns } from '../../config';
+import type { SmartCollectionRule } from '../../types';
 
 export const StoreRepository = {
   async search(options: any) {
@@ -330,6 +331,111 @@ export const StoreRepository = {
       .catch((err: any) => console.log('insert-error', err));
   },
 
+  async evaluateSmartRules(rules: SmartCollectionRule[], matchType: string, options: any = {}) {
+    const db = this.createQueryBuilder();
+
+    const textFields = [
+      'file_name',
+      'file_path',
+      'compatible_full_name',
+      'copyright',
+      'description',
+      'designer',
+      'designer_url',
+      'font_family',
+      'font_subfamily',
+      'full_name',
+      'license',
+      'license_url',
+      'manufacturer',
+      'manufacturer_url',
+      'post_script_name',
+      'preferred_family',
+      'preferred_sub_family',
+      'sample_text',
+      'trademark',
+      'unique_id',
+      'version',
+    ];
+    const booleanFields = ['favorite', 'system', 'installable', 'temporary'];
+    const numericFields = ['file_size'];
+    const dateFields = ['created'];
+
+    if (rules.length > 0) {
+      const conditions: ((qb: any) => void)[] = rules.map((rule, idx) => {
+        const field = `store.${rule.field}`;
+        const paramName = `p${idx}`;
+
+        return (qb: any) => {
+          if (textFields.includes(rule.field)) {
+            const val = String(rule.value).toLowerCase();
+            switch (rule.operator) {
+              case 'contains':
+                qb.where(`LOWER(${field}) LIKE :${paramName}`, { [paramName]: `%${val}%` });
+                break;
+              case 'equals':
+                qb.where(`LOWER(${field}) = :${paramName}`, { [paramName]: val });
+                break;
+              case 'starts_with':
+                qb.where(`LOWER(${field}) LIKE :${paramName}`, { [paramName]: `${val}%` });
+                break;
+              case 'ends_with':
+                qb.where(`LOWER(${field}) LIKE :${paramName}`, { [paramName]: `%${val}` });
+                break;
+              default:
+                qb.where(`LOWER(${field}) LIKE :${paramName}`, { [paramName]: `%${val}%` });
+            }
+          } else if (rule.field === 'file_type') {
+            qb.where(`${field} = :${paramName}`, { [paramName]: rule.value });
+          } else if (booleanFields.includes(rule.field)) {
+            const boolVal = rule.operator === 'is_not' ? 0 : 1;
+            qb.where(`${field} = :${paramName}`, { [paramName]: boolVal });
+          } else if (numericFields.includes(rule.field)) {
+            if (rule.operator === 'greater_than') {
+              qb.where(`${field} > :${paramName}`, { [paramName]: rule.value });
+            } else if (rule.operator === 'less_than') {
+              qb.where(`${field} < :${paramName}`, { [paramName]: rule.value });
+            } else {
+              qb.where(`${field} = :${paramName}`, { [paramName]: rule.value });
+            }
+          } else if (dateFields.includes(rule.field)) {
+            if (rule.operator === 'greater_than') {
+              qb.where(`${field} >= :${paramName}`, { [paramName]: rule.value });
+            } else if (rule.operator === 'less_than') {
+              qb.where(`${field} <= :${paramName}`, { [paramName]: rule.value });
+            } else {
+              qb.where(`${field} = :${paramName}`, { [paramName]: rule.value });
+            }
+          }
+        };
+      });
+
+      const joiner = matchType === 'OR' ? 'orWhere' : 'andWhere';
+      conditions.forEach((condition, i) => {
+        if (i === 0) {
+          db.where(new Brackets(condition));
+        } else {
+          db[joiner](new Brackets(condition));
+        }
+      });
+    }
+
+    if (options.take) {
+      db.limit(options.take);
+    }
+
+    if (options.skip) {
+      db.offset(options.skip);
+    }
+
+    if (options.order && options.order.column) {
+      const direction = options.order.direction === 'DESC' ? 'DESC' : 'ASC';
+      db.orderBy(`store.${options.order.column}`, direction);
+    }
+
+    return await db.getManyAndCount();
+  },
+
   async fetchSystemStats() {
     const rowCount = await this.createQueryBuilder().select('COUNT(*)', 'total').getRawOne();
 

package/app/database/repository/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Collection.repository"), exports);
+__exportStar(require("./SmartCollection.repository"), exports);
 __exportStar(require("./Store.repository"), exports);
 __exportStar(require("./Logger.repository"), exports);
 //# sourceMappingURL=index.js.map

package/app/database/repository/index.ts

@@ -1,3 +1,4 @@
 export * from './Collection.repository';
+export * from './SmartCollection.repository';
 export * from './Store.repository';
-export * from './Logger.repository';
+export * from './Logger.repository';

package/app/enums/ChannelType.js

@@ -58,6 +58,11 @@ var ChannelType;
     ChannelType["IPC_LOGGER_DELETE"] = "IPC_LOGGER_DELETE";
     ChannelType["IPC_LOGGER_QUERY"] = "IPC_LOGGER_QUERY";
     ChannelType["IPC_LOGGER_TRUNCATE"] = "IPC_LOGGER_TRUNCATE";
+    ChannelType["IPC_SMART_COLLECTION_FIND"] = "IPC_SMART_COLLECTION_FIND";
+    ChannelType["IPC_SMART_COLLECTION_CREATE"] = "IPC_SMART_COLLECTION_CREATE";
+    ChannelType["IPC_SMART_COLLECTION_UPDATE"] = "IPC_SMART_COLLECTION_UPDATE";
+    ChannelType["IPC_SMART_COLLECTION_DELETE"] = "IPC_SMART_COLLECTION_DELETE";
+    ChannelType["IPC_SMART_COLLECTION_EVALUATE"] = "IPC_SMART_COLLECTION_EVALUATE";
     ChannelType["IPC_TOGGLE_PANEL"] = "IPC_TOGGLE_PANEL";
 })(ChannelType || (exports.ChannelType = ChannelType = {}));
 //# sourceMappingURL=ChannelType.js.map

package/app/enums/ChannelType.ts

@@ -63,5 +63,11 @@ export enum ChannelType {
   IPC_LOGGER_QUERY = 'IPC_LOGGER_QUERY',
   IPC_LOGGER_TRUNCATE = 'IPC_LOGGER_TRUNCATE',
 
+  IPC_SMART_COLLECTION_FIND = 'IPC_SMART_COLLECTION_FIND',
+  IPC_SMART_COLLECTION_CREATE = 'IPC_SMART_COLLECTION_CREATE',
+  IPC_SMART_COLLECTION_UPDATE = 'IPC_SMART_COLLECTION_UPDATE',
+  IPC_SMART_COLLECTION_DELETE = 'IPC_SMART_COLLECTION_DELETE',
+  IPC_SMART_COLLECTION_EVALUATE = 'IPC_SMART_COLLECTION_EVALUATE',
+
   IPC_TOGGLE_PANEL = 'IPC_TOGGLE_PANEL',
 }

package/app/enums/StorageType.js

@@ -16,5 +16,6 @@ var StorageType;
     StorageType["LayoutPreview"] = "layout.preview";
     StorageType["LayoutTheme"] = "layout.theme";
     StorageType["AiKeys"] = "ai.keys";
+    StorageType["NavigationExpanded"] = "navigation.expanded";
 })(StorageType || (exports.StorageType = StorageType = {}));
 //# sourceMappingURL=StorageType.js.map

package/app/enums/StorageType.ts

@@ -12,4 +12,5 @@ export enum StorageType {
   LayoutPreview = 'layout.preview',
   LayoutTheme = 'layout.theme',
   AiKeys = 'ai.keys',
+  NavigationExpanded = 'navigation.expanded',
 }

package/app/package.json

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

package/app/types/FontMetrics.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=FontMetrics.js.map

package/app/types/SmartCollection.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=SmartCollection.js.map

package/app/types/SmartCollection.ts

@@ -0,0 +1,5 @@
+export interface SmartCollectionRule {
+  field: string;
+  operator: string;
+  value: string | number;
+}

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/app/types/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./AppAlert"), exports);
+__exportStar(require("./FontMetrics"), exports);
 __exportStar(require("./AuthUser"), exports);
 __exportStar(require("./Breadcrumb"), exports);
 __exportStar(require("./QueryOptions"), exports);
@@ -22,4 +23,5 @@ __exportStar(require("./SystemTheme"), exports);
 __exportStar(require("./SystemStats"), exports);
 __exportStar(require("./SystemConfig"), exports);
 __exportStar(require("./ImportOptions"), exports);
+__exportStar(require("./SmartCollection"), exports);
 //# sourceMappingURL=index.js.map

package/app/types/index.ts

@@ -7,3 +7,4 @@ export * from './SystemTheme';
 export * from './SystemStats';
 export * from './SystemConfig';
 export * from './ImportOptions';
+export * from './SmartCollection';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontastic",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A gorgeous multi-platform font management application.",
   "homepage": "https://github.com/tomshaw/fontastic",
   "private": false,

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

@@ -7,6 +7,7 @@ import type { Collection } from '@main/database/entity/Collection.schema';
 import type { Logger } from '@main/database/entity/Logger.schema';
 import type { Store, StoreManyAndCountType } from '@main/database/entity/Store.schema';
 import type { FontMetrics, SystemStats } from '@main/types';
+import type { SmartCollection } from '@main/database/entity/SmartCollection.schema';
 
 @Injectable({
   providedIn: 'root',
@@ -18,6 +19,8 @@ export class DatabaseService {
 
   // Reactive state
   readonly collections = signal<Collection[]>([]);
+  readonly smartCollections = signal<SmartCollection[]>([]);
+  readonly activeSmartCollectionId = signal<number | null>(null);
   readonly parentId = signal<number | null>(null);
   readonly collectionId = signal<number | null>(null);
   readonly stores = signal<Store[]>([]);
@@ -56,6 +59,7 @@ export class DatabaseService {
     this.collectionId.set(parentId);
     this.activeFilter.set(null);
     this.activeSearchWhere.set(null);
+    this.activeSmartCollectionId.set(null);
     this.currentPage.set(1);
   }
 
@@ -64,6 +68,7 @@ export class DatabaseService {
     this.collectionId.set(child.id);
     this.activeFilter.set(null);
     this.activeSearchWhere.set(null);
+    this.activeSmartCollectionId.set(null);
     this.currentPage.set(1);
   }
 
@@ -78,11 +83,22 @@ export class DatabaseService {
     return current.id;
   }
 
+  selectSmartCollection(id: number) {
+    this.parentId.set(null);
+    this.collectionId.set(null);
+    this.activeFilter.set(null);
+    this.activeSearchWhere.set(null);
+    this.activeSmartCollectionId.set(id);
+    this.currentPage.set(1);
+    this.fetchCurrentPage();
+  }
+
   selectFilter(filter: string) {
     this.parentId.set(null);
     this.collectionId.set(null);
     this.activeFilter.set(filter);
     this.activeSearchWhere.set(null);
+    this.activeSmartCollectionId.set(null);
     this.currentPage.set(1);
 
     const whereMap: Record<string, { key: string; value: number }[]> = {
@@ -122,6 +138,12 @@ export class DatabaseService {
     const skip = (this.currentPage() - 1) * this.pageSize();
     const take = this.pageSize();
 
+    const smartCollectionId = this.activeSmartCollectionId();
+    if (smartCollectionId) {
+      this.smartCollectionEvaluate(smartCollectionId, { skip, take });
+      return;
+    }
+
     const searchWhere = this.activeSearchWhere();
     if (searchWhere) {
       const searchOrder = this.activeSearchOrder();
@@ -150,13 +172,15 @@ export class DatabaseService {
 
   constructor() {
     this.electron.ready.then(async () => {
-      const [collections, savedCollectionId, savedStoreId] = await Promise.all([
+      const [collections, smartCollections, savedCollectionId, savedStoreId] = await Promise.all([
         this.message.collectionFetch({}),
+        this.message.smartCollectionFind(),
         this.message.get(StorageType.CollectionId, null),
         this.message.get(StorageType.StoreId, null),
       ]);
 
       this.collections.set(collections);
+      this.smartCollections.set(smartCollections);
       console.log('System Boot:', collections);
 
       if (savedCollectionId) {
@@ -294,6 +318,50 @@ export class DatabaseService {
     );
   }
 
+  // Smart Collection
+
+  smartCollectionCreate(args: any): Promise<SmartCollection[]> {
+    return this.track(
+      this.message.smartCollectionCreate(args).then((result) => {
+        this.smartCollections.set(result);
+        return result;
+      }),
+    );
+  }
+
+  smartCollectionUpdate(id: number, data: any): Promise<SmartCollection[]> {
+    return this.track(
+      this.message.smartCollectionUpdate(id, data).then((result) => {
+        this.smartCollections.set(result);
+        return result;
+      }),
+    );
+  }
+
+  smartCollectionDelete(id: number): Promise<SmartCollection[]> {
+    return this.track(
+      this.message.smartCollectionDelete(id).then((result) => {
+        this.smartCollections.set(result);
+        if (this.activeSmartCollectionId() === id) {
+          this.activeSmartCollectionId.set(null);
+          this.stores.set([]);
+          this.storeCount.set(0);
+        }
+        return result;
+      }),
+    );
+  }
+
+  smartCollectionEvaluate(id: number, options: any): Promise<StoreManyAndCountType> {
+    return this.track(
+      this.message.smartCollectionEvaluate(id, options).then((result) => {
+        this.stores.set(result[0] as Store[]);
+        this.storeCount.set(result[1] as number);
+        return result;
+      }),
+    );
+  }
+
   // Store
 
   storeFind(args: any): Promise<Store[]> {
@@ -336,6 +404,7 @@ export class DatabaseService {
     this.activeFilter.set(null);
     this.activeSearchWhere.set(where);
     this.activeSearchOrder.set(order ?? null);
+    this.activeSmartCollectionId.set(null);
     this.currentPage.set(1);
     this.fetchCurrentPage();
   }

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

@@ -5,6 +5,7 @@ import type { Logger } from '@main/database/entity/Logger.schema';
 import type { Store, StoreManyAndCountType } from '@main/database/entity/Store.schema';
 import { ChannelType } from '@main/enums';
 import type { FontMetrics, SystemConfig, SystemStats } from '@main/types';
+import type { SmartCollection } from '@main/database/entity/SmartCollection.schema';
 
 @Injectable({
   providedIn: 'root',
@@ -213,6 +214,28 @@ export class MessageService {
     return this.invoke<Collection[]>(ChannelType.IPC_COLLECTION_MOVE, { collectionId, newParentId, newIndex });
   }
 
+  // Smart Collection
+
+  smartCollectionFind(): Promise<SmartCollection[]> {
+    return this.invoke<SmartCollection[]>(ChannelType.IPC_SMART_COLLECTION_FIND);
+  }
+
+  smartCollectionCreate(args: any): Promise<SmartCollection[]> {
+    return this.invoke<SmartCollection[]>(ChannelType.IPC_SMART_COLLECTION_CREATE, args);
+  }
+
+  smartCollectionUpdate(id: number, data: any): Promise<SmartCollection[]> {
+    return this.invoke<SmartCollection[]>(ChannelType.IPC_SMART_COLLECTION_UPDATE, { id, data });
+  }
+
+  smartCollectionDelete(id: number): Promise<SmartCollection[]> {
+    return this.invoke<SmartCollection[]>(ChannelType.IPC_SMART_COLLECTION_DELETE, { id });
+  }
+
+  smartCollectionEvaluate(id: number, options: any): Promise<StoreManyAndCountType> {
+    return this.invoke<StoreManyAndCountType>(ChannelType.IPC_SMART_COLLECTION_EVALUATE, { id, ...options });
+  }
+
   // Store
 
   storeFind(args: any): Promise<Store[]> {

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

@@ -41,6 +41,7 @@ export class PresentationService {
       this.loadThemeSettings();
       this.loadLayoutSettings();
       this.loadPreviewSettings();
+      this.loadNavigationExpandedSettings();
       this.listenForMenuToggle();
 
       let themeInitialized = false;
@@ -60,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(),
         };
@@ -70,6 +71,15 @@ export class PresentationService {
         panelInitialized = true;
       });
 
+      let navExpandedInitialized = false;
+      effect(() => {
+        const ids = this.navigationExpandedIds();
+        if (navExpandedInitialized) {
+          untracked(() => this.messageService.set(StorageType.NavigationExpanded, ids));
+        }
+        navExpandedInitialized = true;
+      });
+
       let previewInitialized = false;
       effect(() => {
         const settings: LayoutPreviewType = {
@@ -79,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));
@@ -120,10 +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);
@@ -135,7 +150,7 @@ export class PresentationService {
         this.gridEnabled(),
         this.toolbarEnabled(),
         this.previewEnabled(),
-        this.inspectEnabled(),
+        this.glyphsEnabled(),
         this.asideEnabled(),
         this.navigationEnabled(),
       ].filter(Boolean).length,
@@ -150,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);
@@ -164,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);
     }
   }
@@ -176,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(),
@@ -191,6 +206,41 @@ export class PresentationService {
     });
   }
 
+  isNavigationExpanded(id: number): boolean {
+    return this.navigationExpandedIds().includes(id);
+  }
+
+  toggleNavigationExpanded(id: number) {
+    const ids = this.navigationExpandedIds();
+    if (ids.includes(id)) {
+      this.navigationExpandedIds.set(ids.filter((i) => i !== id));
+    } else {
+      this.navigationExpandedIds.set([...ids, id]);
+    }
+  }
+
+  expandNavigationId(id: number) {
+    const ids = this.navigationExpandedIds();
+    if (!ids.includes(id)) {
+      this.navigationExpandedIds.set([...ids, id]);
+    }
+  }
+
+  setAllNavigationExpanded(allIds: number[]) {
+    this.navigationExpandedIds.set(allIds);
+  }
+
+  clearAllNavigationExpanded() {
+    this.navigationExpandedIds.set([]);
+  }
+
+  private async loadNavigationExpandedSettings() {
+    const ids = (await this.messageService.get(StorageType.NavigationExpanded, null)) as number[] | null;
+    if (Array.isArray(ids)) {
+      this.navigationExpandedIds.set(ids);
+    }
+  }
+
   private async loadThemeSettings() {
     const settings = (await this.messageService.get(StorageType.LayoutTheme, null)) as { theme: string } | null;
     if (settings?.theme && PresentationService.themes.includes(settings.theme as (typeof PresentationService.themes)[number])) {
@@ -206,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);
       }
@@ -227,6 +277,9 @@ export class PresentationService {
       if (settings.displayText) {
         this.customText.set(settings.displayText);
       }
+      if (settings.selectedGlyph !== undefined) {
+        this.selectedGlyph.set(settings.selectedGlyph);
+      }
     }
   }
 
@@ -234,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

@@ -1,4 +1,4 @@
-<header class="grid grid-cols-[220px_1fr_220px] min-[1440px]:grid-cols-[280px_1fr_280px] w-full h-full">
+<header class="grid w-full h-full" [style.grid-template-columns]="'var(--panel-width) 1fr var(--panel-width)'">
   <div class="relative">
     <div class="p-0 h-full flex justify-items-start items-center">
       <a
@@ -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/layout.component.html

@@ -7,7 +7,7 @@
   <div
     class="grid overflow-hidden"
     [style.grid-template-columns]="
-      (presentation.navigationEnabled() ? '280px ' : '') + '1fr' + (presentation.asideEnabled() ? ' 280px' : '')
+      (presentation.navigationEnabled() ? 'var(--panel-width) ' : '') + '1fr' + (presentation.asideEnabled() ? ' var(--panel-width)' : '')
     "
   >
     @if (presentation.navigationEnabled()) {

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 {