From 628ccebd9ae723a5c784b24b0427e6abaf07abb2 Mon Sep 17 00:00:00 2001
From: Jokin <jgamboa@teknes.es>
Date: Mon, 13 Jul 2026 14:26:25 +0200
Subject: [PATCH] Rename Text size to Interface; scale panel header with it

Action buttons, server picker, and its dropdown now follow the size
setting via new --action-h/--action-font/--action-icon variables.
Default tier matches the old fixed sizes; tab bar stays fixed.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/shared/types.ts                   |  2 +-
 ui/src/app/file-panel/file-panel.html | 72 ++++++++++++++-------------
 ui/src/app/tab-bar/tab-bar.ts         |  2 +-
 ui/src/styles.css                     | 16 ++++--
 4 files changed, 53 insertions(+), 39 deletions(-)

diff --git a/src/shared/types.ts b/src/shared/types.ts
index a970546..42286f7 100644
--- a/src/shared/types.ts
+++ b/src/shared/types.ts
@@ -69,7 +69,7 @@ export interface AppSettings {
 	/** File-list icons: plain neutral glyphs, or per-category glyphs and colors. */
 	iconColors: "plain" | "multi";
 	speedUnit: "MBps" | "Mbps";
-	/** Font size of the path bar and file list. */
+	/** Size of the panel interface: file list, path bar, header controls. */
 	textSize: "compact" | "default" | "large";
 	/** Run transfer jobs one at a time, or several in parallel. */
 	transferMode: "single" | "multi";
diff --git a/ui/src/app/file-panel/file-panel.html b/ui/src/app/file-panel/file-panel.html
index ba18ec5..61a5c2a 100644
--- a/ui/src/app/file-panel/file-panel.html
+++ b/ui/src/app/file-panel/file-panel.html
@@ -2,28 +2,32 @@
 <div class="relative flex items-center gap-1.5 border-b border-border px-2 py-1">
   <button
     (click)="toggleMenu()"
-    class="flex min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium hover:bg-accent"
+    class="flex min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-(length:--path-font) font-medium hover:bg-accent"
     title="Choose what this panel shows"
   >
     @if (panel().connecting()) {
-      <ng-icon name="mynaSpinner" class="shrink-0 animate-spin text-primary" size="0.9rem" />
+      <ng-icon name="mynaSpinner" class="shrink-0 animate-spin text-primary" size="var(--action-icon)" />
     } @else {
       <ng-icon
         [name]="isRemote() ? 'mynaServers' : 'mynaHardDrive'"
         [class]="isRemote() ? 'shrink-0 text-primary' : 'shrink-0 text-muted-foreground'"
-        size="0.9rem"
+        size="var(--action-icon)"
       />
     }
     <span class="truncate">{{ panel().title() }}</span>
-    <ng-icon name="mynaChevronDown" class="shrink-0 text-muted-foreground" size="0.8rem" />
+    <ng-icon
+      name="mynaChevronDown"
+      class="shrink-0 text-muted-foreground"
+      size="calc(var(--action-icon) - 0.1rem)"
+    />
   </button>
   @if (isRemote()) {
     <button
       (click)="disconnect()"
       title="Disconnect (back to local)"
-      class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
+      class="grid size-(--action-h) shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
     >
-      <ng-icon name="mynaLogout" size="0.85rem" />
+      <ng-icon name="mynaLogout" size="var(--action-icon)" />
     </button>
   }
 
@@ -34,55 +38,55 @@
   <button
     (click)="copyToOther()"
     [title]="side() === 'left' ? 'Copy to right panel (F5)' : 'Copy to left panel (F5)'"
-    class="flex h-6 shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-primary"
+    class="flex h-(--action-h) shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-primary"
   >
-    <ng-icon [name]="copyIcon()" size="0.95rem" />
-    <span class="ml-1 hidden text-[11px] @[30rem]:inline">Copy</span>
+    <ng-icon [name]="copyIcon()" size="var(--action-icon)" />
+    <span class="ml-1 hidden text-(length:--action-font) @[30rem]:inline">Copy</span>
   </button>
   <button
     (click)="run('edit')"
     title="Edit file (F4)"
-    class="flex h-6 shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+    class="flex h-(--action-h) shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-foreground"
   >
-    <ng-icon name="mynaFileText" size="0.9rem" />
-    <span class="ml-1 hidden text-[11px] @[30rem]:inline">Edit</span>
+    <ng-icon name="mynaFileText" size="var(--action-icon)" />
+    <span class="ml-1 hidden text-(length:--action-font) @[30rem]:inline">Edit</span>
   </button>
   <button
     (click)="run('rename')"
     title="Rename (F2)"
-    class="flex h-6 shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+    class="flex h-(--action-h) shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-foreground"
   >
-    <ng-icon name="mynaEdit" size="0.9rem" />
-    <span class="ml-1 hidden text-[11px] @[30rem]:inline">Rename</span>
+    <ng-icon name="mynaEdit" size="var(--action-icon)" />
+    <span class="ml-1 hidden text-(length:--action-font) @[30rem]:inline">Rename</span>
   </button>
   <button
     (click)="run('mkdir')"
     title="New folder (F7)"
-    class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
+    class="grid size-(--action-h) shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
   >
-    <ng-icon name="mynaFolderPlus" size="0.9rem" />
+    <ng-icon name="mynaFolderPlus" size="var(--action-icon)" />
   </button>
   <button
     (click)="run('createFile')"
     title="New file"
-    class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
+    class="grid size-(--action-h) shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
   >
-    <ng-icon name="mynaFilePlus" size="0.9rem" />
+    <ng-icon name="mynaFilePlus" size="var(--action-icon)" />
   </button>
   <button
     (click)="run('chmod')"
     title="Permissions"
-    class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
+    class="grid size-(--action-h) shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
   >
-    <ng-icon name="mynaLock" size="0.9rem" />
+    <ng-icon name="mynaLock" size="var(--action-icon)" />
   </button>
   <button
     (click)="run('delete')"
     title="Delete (F8 / Del)"
-    class="flex h-6 shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-destructive"
+    class="flex h-(--action-h) shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-destructive"
   >
-    <ng-icon name="mynaTrash" size="0.9rem" />
-    <span class="ml-1 hidden text-[11px] @[30rem]:inline">Delete</span>
+    <ng-icon name="mynaTrash" size="var(--action-icon)" />
+    <span class="ml-1 hidden text-(length:--action-font) @[30rem]:inline">Delete</span>
   </button>
 
   @if (menuOpen()) {
@@ -92,9 +96,9 @@
     >
       <button
         (click)="pickLocal()"
-        class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs hover:bg-accent"
+        class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-(length:--path-font) hover:bg-accent"
       >
-        <ng-icon name="mynaHardDrive" size="0.9rem" class="shrink-0 text-muted-foreground" />
+        <ng-icon name="mynaHardDrive" size="var(--action-icon)" class="shrink-0 text-muted-foreground" />
         <span class="flex-1">Local</span>
         @if (!isRemote()) {
           <ng-icon name="mynaCheck" size="0.85rem" class="shrink-0 text-primary" />
@@ -107,9 +111,9 @@
       @for (connection of connections.grouped().root; track connection.id) {
         <button
           (click)="pickConnection(connection)"
-          class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs hover:bg-accent"
+          class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-(length:--path-font) hover:bg-accent"
         >
-          <ng-icon name="mynaServers" size="0.9rem" class="shrink-0 text-muted-foreground" />
+          <ng-icon name="mynaServers" size="var(--action-icon)" class="shrink-0 text-muted-foreground" />
           <span class="flex-1 truncate">{{ connection.name }}</span>
         </button>
       }
@@ -120,9 +124,9 @@
         @for (connection of group.connections; track connection.id) {
           <button
             (click)="pickConnection(connection)"
-            class="flex w-full items-center gap-2 py-1.5 pr-3 pl-5 text-left text-xs hover:bg-accent"
+            class="flex w-full items-center gap-2 py-1.5 pr-3 pl-5 text-left text-(length:--path-font) hover:bg-accent"
           >
-            <ng-icon name="mynaServers" size="0.9rem" class="shrink-0 text-muted-foreground" />
+            <ng-icon name="mynaServers" size="var(--action-icon)" class="shrink-0 text-muted-foreground" />
             <span class="flex-1 truncate">{{ connection.name }}</span>
           </button>
         }
@@ -138,9 +142,9 @@
             (click)="pickSshHost(host)"
             [disabled]="host.unsupported"
             [title]="sshHostTitle(host)"
-            class="flex w-full items-center gap-2 py-1.5 pr-3 pl-5 text-left text-xs hover:bg-accent disabled:opacity-60 disabled:hover:bg-transparent"
+            class="flex w-full items-center gap-2 py-1.5 pr-3 pl-5 text-left text-(length:--path-font) hover:bg-accent disabled:opacity-60 disabled:hover:bg-transparent"
           >
-            <ng-icon name="mynaServers" size="0.9rem" class="shrink-0 text-muted-foreground" />
+            <ng-icon name="mynaServers" size="var(--action-icon)" class="shrink-0 text-muted-foreground" />
             <span class="flex-1 truncate">{{ host.name }}</span>
           </button>
         }
@@ -149,9 +153,9 @@
       <div class="my-1 border-t border-border"></div>
       <button
         (click)="openManager()"
-        class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs hover:bg-accent"
+        class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-(length:--path-font) hover:bg-accent"
       >
-        <ng-icon name="mynaCog" size="0.9rem" class="shrink-0 text-muted-foreground" />
+        <ng-icon name="mynaCog" size="var(--action-icon)" class="shrink-0 text-muted-foreground" />
         Manage connections…
       </button>
     </div>
diff --git a/ui/src/app/tab-bar/tab-bar.ts b/ui/src/app/tab-bar/tab-bar.ts
index 386f3f1..01f6cf6 100644
--- a/ui/src/app/tab-bar/tab-bar.ts
+++ b/ui/src/app/tab-bar/tab-bar.ts
@@ -169,7 +169,7 @@ const CONCURRENCY_CHOICES = [2, 3, 4, 6, 8] as const;
           </div>
 
           <div class="mt-2.5 flex items-center justify-between gap-2">
-            <span class="text-xs text-muted-foreground">Text size</span>
+            <span class="text-xs text-muted-foreground">Interface</span>
             <div class="flex rounded-md border border-border p-0.5">
               @for (size of textSizes; track size) {
                 <button
diff --git a/ui/src/styles.css b/ui/src/styles.css
index 15fe33c..541eb66 100644
--- a/ui/src/styles.css
+++ b/ui/src/styles.css
@@ -127,15 +127,19 @@
   --radius-lg: var(--radius);
 }
 
-/* Text-size setting for the path bar + file list (data-text set by SettingsService).
-   Also scales row height and the path-bar controls — compact matches the 24px
-   panel action buttons. */
+/* Interface-size setting (data-text set by SettingsService). Scales the whole
+   panel chrome: file list, path bar, action buttons, and the source picker
+   with its dropdown. The tab bar (including the options button) stays fixed.
+   Default-tier values match the old hardcoded classes exactly. */
 :root {
   --list-font: 13px;
   --list-meta-font: 12px;
   --path-font: 12px;
   --row-h: 28px;
   --path-ctl-h: 28px;
+  --action-h: 24px;
+  --action-font: 11px;
+  --action-icon: 0.9rem;
 }
 :root[data-text='compact'] {
   --list-font: 12px;
@@ -143,6 +147,9 @@
   --path-font: 11px;
   --row-h: 24px;
   --path-ctl-h: 24px;
+  --action-h: 22px;
+  --action-font: 10px;
+  --action-icon: 0.85rem;
 }
 :root[data-text='large'] {
   --list-font: 14px;
@@ -150,6 +157,9 @@
   --path-font: 13px;
   --row-h: 32px;
   --path-ctl-h: 32px;
+  --action-h: 28px;
+  --action-font: 12px;
+  --action-icon: 1.05rem;
 }
 
 /* Accent tone (data-accent set by SettingsService; absent = graphite/zinc).