From d3deca0d088addd6588939b6d13f5aaa316918c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Tue, 25 Aug 2026 17:10:47 +0000
Subject: [PATCH] theme overlay keeps its size across the favourites filter, f
 flips the filter

---
 .../Dashboard/Layout/Header/ThemeSwitcher.tsx  | 12 +++++++-----
 src/apps/officer-web/locales/de-DE.json        |  2 +-
 src/apps/officer-web/locales/en-GB.json        |  2 +-
 src/apps/officer-web/locales/es-ES.json        |  2 +-
 src/apps/officer-web/locales/fr-FR.json        |  2 +-
 src/apps/officer-web/locales/pt-PT.json        |  2 +-
 src/apps/officer-web/locales/sv-SE.json        |  2 +-
 src/workspaces/theme/src/useThemeKeys.ts       | 18 +++++++-----------
 8 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/apps/officer-web/Screens/Dashboard/Layout/Header/ThemeSwitcher.tsx b/src/apps/officer-web/Screens/Dashboard/Layout/Header/ThemeSwitcher.tsx
index 60d4905f..e94bba52 100644
--- a/src/apps/officer-web/Screens/Dashboard/Layout/Header/ThemeSwitcher.tsx
+++ b/src/apps/officer-web/Screens/Dashboard/Layout/Header/ThemeSwitcher.tsx
@@ -199,7 +199,7 @@ export const ThemeSwitcher = () => {
               onClick={(ev) => ev.stopPropagation()}
             >
               {/* The filter, mirrored from the dropdown — same state, so the two surfaces never disagree
-                  about what "the list" currently is. `tab` does the same thing from the keyboard. */}
+                  about what "the list" currently is. `f` does the same thing from the keyboard. */}
               <div className="mb-2 text-center">
                 <button
                   type="button"
@@ -217,7 +217,11 @@ export const ThemeSwitcher = () => {
               {overlayList.length === 0 && (
                 <p className="px-2 py-6 text-center text-xs opacity-60">{t('theme.noFavourites')}</p>
               )}
-              <ul className="flex max-h-[70vh] flex-col gap-1 overflow-y-auto">
+              {/* FIXED dimensions, not max/content: flipping the favourites filter must not resize the
+                  panel — the list is 200+ themes on one side of the flip and a handful on the other, and
+                  a modal that jumps between two sizes on every `f` reads as broken. Long names truncate;
+                  they already did when the widest name happened to be filtered out. */}
+              <ul className="flex h-[70vh] w-[26rem] max-w-[80vw] flex-col gap-1 overflow-y-auto">
                 {overlayList.map((entry) => {
                   const isFocused = entry.id === focused;
                   return (
@@ -250,9 +254,7 @@ export const ThemeSwitcher = () => {
                               ? t('theme.unstarNamed', { name: entry.name })
                               : t('theme.starNamed', { name: entry.name })
                           }
-                          title={
-                            isFavorite(entry.id) ? t('theme.removeFromFavouritesKey') : t('theme.addToFavouritesKey')
-                          }
+                          title={isFavorite(entry.id) ? t('theme.removeFromFavourites') : t('theme.addToFavourites')}
                           onClick={(ev) => {
                             // Or the row's own onClick applies the theme and closes the overlay, which is
                             // the opposite of what starring is for.
diff --git a/src/apps/officer-web/locales/de-DE.json b/src/apps/officer-web/locales/de-DE.json
index b4f7e992..b0a5d800 100644
--- a/src/apps/officer-web/locales/de-DE.json
+++ b/src/apps/officer-web/locales/de-DE.json
@@ -494,7 +494,7 @@
     "addToFavouritesKey": "Zu Favoriten hinzufügen (f)",
     "removeFromFavouritesKey": "Aus Favoriten entfernen (f)",
     "active": "aktiv",
-    "browseHint": "j/k oder ↑/↓ bewegen · l oder → Vorschau · f markieren · Tab Favoriten · h oder ← zurücksetzen · Eingabetaste behalten · Esc abbrechen"
+    "browseHint": "j/k oder ↑/↓ bewegen · l oder → Vorschau · f Favoriten · h oder ← zurücksetzen · Eingabetaste behalten · Esc abbrechen"
   },
   "spotlight": {
     "placeholder": "Gehe zu…",
diff --git a/src/apps/officer-web/locales/en-GB.json b/src/apps/officer-web/locales/en-GB.json
index 29cfa63d..f9f84934 100644
--- a/src/apps/officer-web/locales/en-GB.json
+++ b/src/apps/officer-web/locales/en-GB.json
@@ -494,7 +494,7 @@
     "addToFavouritesKey": "Add to favourites (f)",
     "removeFromFavouritesKey": "Remove from favourites (f)",
     "active": "active",
-    "browseHint": "j/k or ↑/↓ move · l or → preview · f star · tab favourites · h or ← reset · enter keep · esc cancel"
+    "browseHint": "j/k or ↑/↓ move · l or → preview · f favourites · h or ← reset · enter keep · esc cancel"
   },
   "spotlight": {
     "placeholder": "Go to…",
diff --git a/src/apps/officer-web/locales/es-ES.json b/src/apps/officer-web/locales/es-ES.json
index c72f79fe..eedfc4fb 100644
--- a/src/apps/officer-web/locales/es-ES.json
+++ b/src/apps/officer-web/locales/es-ES.json
@@ -494,7 +494,7 @@
     "addToFavouritesKey": "Añadir a favoritos (f)",
     "removeFromFavouritesKey": "Quitar de favoritos (f)",
     "active": "activo",
-    "browseHint": "j/k o ↑/↓ mover · l o → previsualizar · f marcar · tab favoritos · h o ← reiniciar · enter mantener · esc cancelar"
+    "browseHint": "j/k o ↑/↓ mover · l o → previsualizar · f favoritos · h o ← reiniciar · enter mantener · esc cancelar"
   },
   "spotlight": {
     "placeholder": "Ir a…",
diff --git a/src/apps/officer-web/locales/fr-FR.json b/src/apps/officer-web/locales/fr-FR.json
index afb0ee73..7989ae4c 100644
--- a/src/apps/officer-web/locales/fr-FR.json
+++ b/src/apps/officer-web/locales/fr-FR.json
@@ -494,7 +494,7 @@
     "addToFavouritesKey": "Ajouter aux favoris (f)",
     "removeFromFavouritesKey": "Retirer des favoris (f)",
     "active": "actif",
-    "browseHint": "j/k ou ↑/↓ déplacer · l ou → aperçu · f marquer · tab favoris · h ou ← réinitialiser · entrée garder · esc annuler"
+    "browseHint": "j/k ou ↑/↓ déplacer · l ou → aperçu · f favoris · h ou ← réinitialiser · entrée garder · esc annuler"
   },
   "spotlight": {
     "placeholder": "Aller à…",
diff --git a/src/apps/officer-web/locales/pt-PT.json b/src/apps/officer-web/locales/pt-PT.json
index 5c152a50..a354278e 100644
--- a/src/apps/officer-web/locales/pt-PT.json
+++ b/src/apps/officer-web/locales/pt-PT.json
@@ -494,7 +494,7 @@
     "addToFavouritesKey": "Adicionar aos favoritos (f)",
     "removeFromFavouritesKey": "Remover dos favoritos (f)",
     "active": "ativo",
-    "browseHint": "j/k ou ↑/↓ mover · l ou → pré-visualizar · f marcar · tab favoritos · h ou ← reiniciar · enter manter · esc cancelar"
+    "browseHint": "j/k ou ↑/↓ mover · l ou → pré-visualizar · f favoritos · h ou ← reiniciar · enter manter · esc cancelar"
   },
   "spotlight": {
     "placeholder": "Ir para…",
diff --git a/src/apps/officer-web/locales/sv-SE.json b/src/apps/officer-web/locales/sv-SE.json
index 08154979..25946f80 100644
--- a/src/apps/officer-web/locales/sv-SE.json
+++ b/src/apps/officer-web/locales/sv-SE.json
@@ -494,7 +494,7 @@
     "addToFavouritesKey": "Lägg till i favoriter (f)",
     "removeFromFavouritesKey": "Ta bort från favoriter (f)",
     "active": "aktiv",
-    "browseHint": "j/k eller ↑/↓ flytta · l eller → förhandsgranska · f stjärna · tab favoriter · h eller ← återställ · enter behåll · esc avbryt"
+    "browseHint": "j/k eller ↑/↓ flytta · l eller → förhandsgranska · f favoriter · h eller ← återställ · enter behåll · esc avbryt"
   },
   "spotlight": {
     "placeholder": "Gå till…",
diff --git a/src/workspaces/theme/src/useThemeKeys.ts b/src/workspaces/theme/src/useThemeKeys.ts
index 72908763..d011976c 100644
--- a/src/workspaces/theme/src/useThemeKeys.ts
+++ b/src/workspaces/theme/src/useThemeKeys.ts
@@ -21,7 +21,9 @@ import type { ThemeId } from './themes';
  * action invited the guess that `ctrl+shift+j` moved down — which opens the browser console instead. One
  * spelling, no guessing.
  *
- * Inside the list `f` stars or unstars what is FOCUSED, so a browse and a shortlist are one pass.
+ * Inside the list `f` flips the favourites-only filter. It used to star what was focused, but starring
+ * already has a chord (`ctrl+shift+f`, and `l` applies the focused theme first when it is not the one
+ * worn), so the single letter goes to the thing that had none.
  *
  * Inside the list the vim keys stay, UNMODIFIED — `j`/`k`/`l`/`h` alongside the arrows. No modifier means
  * no collision with anything the browser owns, and this is a vim person's application.
@@ -39,7 +41,7 @@ import type { ThemeId } from './themes';
  * Browsing walks `browseOrder` — the list as DISPLAYED — not the registry. The two orders must be the
  * same list or the focus visibly jumps, which is exactly what happened when the overlay lifted
  * favourites to a top block while stepping walked registry order. The overlay now shows one plain
- * rotation and `tab` flips a favourites-only filter (`onToggleFilter`); either way, what you see is
+ * rotation and `f` flips a favourites-only filter (`onToggleFilter`); either way, what you see is
  * what `j`/`k` walk.
  *
  * ── Not a UI ──
@@ -49,7 +51,7 @@ import type { ThemeId } from './themes';
  */
 type ThemeKeysOptions = {
   /**
-   * Star or unstar the focused theme — bound to `f` while the list is open.
+   * Star or unstar the CURRENT theme — bound to `ctrl+shift+f`, from anywhere.
    *
    * Passed in rather than owned here: favourites are per ACCOUNT and live behind an API, which is app
    * knowledge. This hook owns keys and selection and nothing else.
@@ -60,7 +62,7 @@ type ThemeKeysOptions = {
    * browse falls back to the full registry rotation.
    */
   browseOrder?: readonly ThemeId[];
-  /** Flip the favourites-only filter — bound to `tab` while the list is open. App state, like the stars. */
+  /** Flip the favourites-only filter — bound to `f` while the list is open. App state, like the stars. */
   onToggleFilter?: () => void;
 };
 
@@ -187,13 +189,7 @@ export function useThemeKeys(options: ThemeKeysOptions = {}) {
       switch (event.key) {
         case 'f':
         case 'F':
-          // Star or unstar what is focused, without moving or applying it.
-          event.preventDefault();
-          onToggleFavorite.current?.(focus);
-          return;
-        case 'Tab':
-          // Favourites only ↔ everything. preventDefault or the browser also moves focus, and the
-          // overlay has nothing focusable to move it to.
+          // Favourites only ↔ everything. Starring is `ctrl+shift+f`, handled above before this switch.
           event.preventDefault();
           onToggleFilter.current?.();
           return;