Configurable list columns via header right-click

Native checkable menu on the column headers toggles Size, Modified,
Kind, Rights, Owner and Group (persisted, both panels). Owner/group
come from the ls-style SFTP longname remotely and cached uid/gid
lookups locally (POSIX; undefined on Windows). All columns sort.

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

ui/src/app/panels.service.ts

@@ -1,11 +1,21 @@
 import { Injectable, computed, inject, signal, type WritableSignal } from '@angular/core';
-import type { ConnectionConfig, FileEntry, SavedConnection } from '@shared/types';
+import type { ColumnKey, ConnectionConfig, FileEntry, SavedConnection } from '@shared/types';
+import { fileKind } from './file-icons';
 import { FocusService } from './focus.service';
+import { formatMode } from './format';
 import { RpcService } from './rpc.service';
 import { ToastService } from './toast.service';
 
 export type Side = 'left' | 'right';
-export type SortKey = 'name' | 'size' | 'mtime';
+/** Any visible column sorts; Name is always available. */
+export type SortKey = 'name' | ColumnKey;
+
+/** Display string the text-based columns sort by. */
+function sortText(entry: FileEntry, key: 'kind' | 'rights' | 'owner' | 'group'): string {
+  if (key === 'kind') return fileKind(entry);
+  if (key === 'rights') return formatMode(entry.mode);
+  return (key === 'owner' ? entry.owner : entry.group) ?? '';
+}
 
 interface PanelDeps {
   rpc: RpcService;
@@ -55,6 +65,7 @@ export class PanelState {
       let cmp = 0;
       if (key === 'size') cmp = a.size - b.size;
       else if (key === 'mtime') cmp = a.mtime - b.mtime;
+      else if (key !== 'name') cmp = sortText(a, key).localeCompare(sortText(b, key));
       if (cmp === 0) {
         cmp = a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' });
         if (key === 'name') return cmp * dir;