Let users hide the bottom function key bar

A beta user found the F-key command-button row at the bottom of the window wasted space and asked to hide it. Add an `appearance.showFunctionKeyBar` boolean setting (Appearance > Listing, default `true` so current behavior is preserved) that toggles the bar live, no restart.

- New registry entry + `SettingsValues` type, modeled on `appearance.useAppIconsForDocuments`.
- `reactive-settings.svelte.ts` gains the reactive slot, init read, change-apply case, and a `getShowFunctionKeyBar()` getter (pure-FE setting, so no Tauri command or applier case is needed).
- `+page.svelte` feeds `FunctionKeyBar`'s `visible` prop from the reactive getter via `$derived` instead of a hardcoded `true`.
- New `SettingSwitch` row in `ListingSection.svelte` ("Show function key bar").
- Tests: registry default/section/keywords/validation, plus the a11y mock for the new row.

Author: vdavid

apps/desktop/src/lib/settings/reactive-settings.svelte.ts

@@ -30,6 +30,7 @@ let dateTimeFormat = $state<DateTimeFormat>('iso')
 let customDateTimeFormat = $state<string>('YYYY-MM-DD HH:mm')
 let fileSizeFormat = $state<FileSizeFormat>('binary')
 let useAppIconsForDocuments = $state<boolean>(true)
+let showFunctionKeyBar = $state<boolean>(true)
 let directorySortMode = $state<DirectorySortMode>('likeFiles')
 let appColor = $state<AppColor>('cmdr-gold')
 let sizeDisplay = $state<SizeDisplayMode>('smart')
@@ -61,6 +62,7 @@ export async function initReactiveSettings(): Promise<void> {
     customDateTimeFormat = getSetting('appearance.customDateTimeFormat')
     fileSizeFormat = getSetting('appearance.fileSizeFormat')
     useAppIconsForDocuments = getSetting('appearance.useAppIconsForDocuments')
+    showFunctionKeyBar = getSetting('appearance.showFunctionKeyBar')
     directorySortMode = getSetting('listing.directorySortMode')
     appColor = getSetting('appearance.appColor')
     sizeDisplay = getSetting('listing.sizeDisplay')
@@ -113,6 +115,9 @@ function applySettingChange(id: string, value: unknown): void {
       // Clear the icon cache so icons are re-fetched with the new setting
       void clearExtensionIconCache()
       break
+    case 'appearance.showFunctionKeyBar':
+      showFunctionKeyBar = value as boolean
+      break
     case 'listing.directorySortMode':
       directorySortMode = value as DirectorySortMode
       break
@@ -195,6 +200,11 @@ export function getUseAppIconsForDocuments(): boolean {
   return useAppIconsForDocuments
 }
 
+/** Get whether the bottom function key bar (F-key command buttons) is shown. */
+export function getShowFunctionKeyBar(): boolean {
+  return showFunctionKeyBar
+}
+
 /** Get current directory sort mode */
 export function getDirectorySortMode(): DirectorySortMode {
   return directorySortMode

apps/desktop/src/lib/settings/sections/ListingSection.a11y.test.ts

@@ -10,6 +10,7 @@ import { expectNoA11yViolations } from '$lib/test-a11y'
 vi.mock('$lib/settings/settings-store', () => ({
   getSetting: vi.fn((key: string) => {
     if (key === 'appearance.useAppIconsForDocuments') return true
+    if (key === 'appearance.showFunctionKeyBar') return true
     if (key === 'listing.directorySortMode') return 'likeFiles'
     if (key === 'listing.briefColumnWidthMode') return 'paneWidth'
     if (key === 'listing.briefColumnWidthMaxPx') return 400

apps/desktop/src/lib/settings/sections/ListingSection.svelte

@@ -18,6 +18,7 @@
     const shouldShow = $derived(createShouldShow(searchQuery))
 
     const appIconsDef = getSettingDefinition('appearance.useAppIconsForDocuments') ?? { label: '', description: '' }
+    const fnKeyBarDef = getSettingDefinition('appearance.showFunctionKeyBar') ?? { label: '', description: '' }
     const dirSortDef = getSettingDefinition('listing.directorySortMode') ?? { label: '', description: '' }
     const briefWidthModeDef = getSettingDefinition('listing.briefColumnWidthMode') ?? { label: '', description: '' }
 
@@ -44,6 +45,16 @@
             <SettingSwitch id="appearance.useAppIconsForDocuments" />
         </SettingRow>
     {/if}
+    {#if shouldShow('appearance.showFunctionKeyBar')}
+        <SettingRow
+            id="appearance.showFunctionKeyBar"
+            label={fnKeyBarDef.label}
+            description={fnKeyBarDef.description}
+            {searchQuery}
+        >
+            <SettingSwitch id="appearance.showFunctionKeyBar" />
+        </SettingRow>
+    {/if}
     {#if shouldShow('listing.directorySortMode')}
         <SettingRow
             id="listing.directorySortMode"

apps/desktop/src/lib/settings/settings-registry.test.ts

@@ -224,6 +224,33 @@ describe('search.recentSearches.maxCount', () => {
   })
 })
 
+describe('appearance.showFunctionKeyBar', () => {
+  it('registers a boolean switch in Appearance > Listing, defaulting to on (current behavior)', () => {
+    const def = getSettingDefinition('appearance.showFunctionKeyBar')
+    expect(def).toBeDefined()
+    expect(def?.type).toBe('boolean')
+    expect(def?.component).toBe('switch')
+    expect(getDefaultValue('appearance.showFunctionKeyBar')).toBe(true)
+    expect(def?.section).toEqual(['Appearance', 'Listing'])
+  })
+
+  it('is reachable via natural lookup keywords', () => {
+    const keywords = getSettingDefinition('appearance.showFunctionKeyBar')?.keywords ?? []
+    for (const term of ['function', 'key', 'bar', 'f-key', 'shortcut']) {
+      expect(keywords).toContain(term)
+    }
+  })
+
+  it('validates booleans only', () => {
+    expect(() => {
+      validateSettingValue('appearance.showFunctionKeyBar', false)
+    }).not.toThrow()
+    expect(() => {
+      validateSettingValue('appearance.showFunctionKeyBar', 'yes')
+    }).toThrow()
+  })
+})
+
 describe('buildSectionTree', () => {
   it('should build a tree from settings', () => {
     const tree = buildSectionTree()

apps/desktop/src/lib/settings/settings-registry.ts

@@ -291,6 +291,16 @@ export const settingsRegistry: SettingDefinition[] = [
     default: true,
     component: 'switch',
   },
+  {
+    id: 'appearance.showFunctionKeyBar',
+    section: ['Appearance', 'Listing'],
+    label: 'Show function key bar',
+    description: 'Show the row of F-key command buttons (Rename, View, Copy, and so on) at the bottom of the window.',
+    keywords: ['function', 'key', 'bar', 'f-key', 'fkey', 'shortcut', 'buttons', 'bottom', 'toolbar'],
+    type: 'boolean',
+    default: true,
+    component: 'switch',
+  },
   {
     id: 'listing.directorySortMode',
     section: ['Appearance', 'Listing'],

apps/desktop/src/lib/settings/types.ts

@@ -131,6 +131,7 @@ export interface SettingsValues {
   'appearance.textSize': number
   'appearance.uiDensity': UiDensity
   'appearance.useAppIconsForDocuments': boolean
+  'appearance.showFunctionKeyBar': boolean
   'appearance.fileSizeFormat': FileSizeFormat
   'appearance.sizeColors': SizeColorsPalette
   'appearance.dateColors': DateColorsPalette

apps/desktop/src/routes/(main)/+page.svelte

@@ -50,6 +50,7 @@
     import { initSystemStrings } from '$lib/system-strings.svelte'
     import { openSettingsWindow } from '$lib/settings/settings-window'
     import { getSetting, setSetting } from '$lib/settings'
+    import { getShowFunctionKeyBar } from '$lib/settings/reactive-settings.svelte'
     import { addToast } from '$lib/ui/toast'
     import { openFileViewer } from '$lib/file-viewer/open-viewer'
     import { startDownloadsEventBridge } from '$lib/downloads/event-bridge.svelte'
@@ -107,7 +108,7 @@
     let explorerRef: ExplorerAPI | undefined = $state()
     let windowTitle = $state('Cmdr')
     let appMode = $state<AppMode>(getAppMode())
-    const showFunctionKeyBar = $state(true)
+    const showFunctionKeyBar = $derived(getShowFunctionKeyBar())
 
     // Event handlers stored for cleanup
     let handleKeyDown: ((e: KeyboardEvent) => void) | undefined