File-type icon colors with Plain/Multi setting (multi default)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

ui/src/app/file-panel/file-panel.ts

@@ -13,8 +13,10 @@ import type { FileEntry, SavedConnection } from '@shared/types';
 import { ConnectionsService } from '../connections.service';
 import { DialogsService } from '../dialogs.service';
 import { FileActionsService } from '../file-actions.service';
+import { fileGlyph, fileIconClass } from '../file-icons';
 import { formatDate, formatSize } from '../format';
 import { PanelsService, type Side, type SortKey } from '../panels.service';
+import { SettingsService } from '../settings.service';
 import { TransfersService } from '../transfers.service';
 
 @Component({
@@ -31,6 +33,7 @@ export class FilePanel {
   readonly transfers = inject(TransfersService);
   readonly connections = inject(ConnectionsService);
   readonly dialogs = inject(DialogsService);
+  private readonly settings = inject(SettingsService);
   readonly panel = computed(() => this.panels.get(this.side()));
   readonly isActive = computed(() => this.panels.activeSide() === this.side());
   readonly isRemote = computed(() => this.panel().sessionId() !== 'local');
@@ -92,8 +95,11 @@ export class FilePanel {
   }
 
   iconFor(entry: FileEntry): string {
-    if (entry.name === '..') return 'mynaArrowUp';
-    return entry.type === 'dir' ? 'mynaFolder' : 'mynaFile';
+    return fileGlyph(entry, this.settings.iconColors() === 'multi');
+  }
+
+  iconClass(entry: FileEntry): string {
+    return fileIconClass(entry, this.settings.iconColors() === 'multi');
   }
 
   isSelected(entry: FileEntry): boolean {