refactor(files): move hotkeys in app settings to new NcAppSettingsShortcutsSection

apps/files/src/actions/deleteAction.ts

@@ -9,6 +9,7 @@ import NetworkOffSvg from '@mdi/svg/svg/network-off.svg?raw'
 import TrashCanSvg from '@mdi/svg/svg/trash-can-outline.svg?raw'
 import { FileAction, Permission } from '@nextcloud/files'
 import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
 import PQueue from 'p-queue'
 import { TRASHBIN_VIEW_ID } from '../../../files_trashbin/src/files_views/trashbinView.ts'
 import logger from '../logger.ts'
@@ -110,4 +111,9 @@ export const action = new FileAction({
 
 	destructive: true,
 	order: 100,
+
+	hotkey: {
+		description: t('files', 'Delete'),
+		key: 'Delete',
+	},
 })

apps/files/src/actions/favoriteAction.ts

@@ -21,10 +21,10 @@ export const ACTION_FAVORITE = 'favorite'
 
 const queue = new PQueue({ concurrency: 5 })
 
-// If any of the nodes is not favorited, we display the favorite action.
 /**
+ * If any of the nodes is not favorited, we display the favorite action.
  *
- * @param nodes
+ * @param nodes - The nodes to check
  */
 function shouldFavorite(nodes: Node[]): boolean {
 	return nodes.some((node) => node.attributes.favorite !== 1)
@@ -124,4 +124,9 @@ export const action = new FileAction({
 	},
 
 	order: -50,
+
+	hotkey: {
+		description: t('files', 'Add or remove favorite'),
+		key: 'S',
+	},
 })

apps/files/src/actions/renameAction.ts

@@ -51,4 +51,9 @@ export const action = new FileAction({
 	},
 
 	order: 10,
+
+	hotkey: {
+		description: t('files', 'Rename'),
+		key: 'F2',
+	},
 })

apps/files/src/components/FilesAppSettings/FilesAppSettingsShortcuts.vue

@@ -0,0 +1,78 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import type { IHotkeyConfig } from '@nextcloud/files'
+
+import { getFileActions } from '@nextcloud/files'
+import { t } from '@nextcloud/l10n'
+import NcAppSettingsShortcutsSection from '@nextcloud/vue/components/NcAppSettingsShortcutsSection'
+import NcHotkey from '@nextcloud/vue/components/NcHotkey'
+import NcHotkeyList from '@nextcloud/vue/components/NcHotkeyList'
+
+const actionHotkeys = getFileActions()
+	.filter((action) => !!action.hotkey)
+	.sort((a, b) => (a.order || 0) - (b.order || 0))
+	.map((action) => ({
+		id: action.id,
+		label: action.hotkey!.description,
+		hotkey: hotkeyToString(action.hotkey!),
+	}))
+
+/**
+ * Convert a hotkey configuration to a hotkey string.
+ *
+ * @param hotkey - The hotkey configuration
+ */
+function hotkeyToString(hotkey: IHotkeyConfig): string {
+	const parts: string[] = []
+	if (hotkey.ctrl) {
+		parts.push('Control')
+	}
+	if (hotkey.alt) {
+		parts.push('Alt')
+	}
+	if (hotkey.shift) {
+		parts.push('Shift')
+	}
+	parts.push(hotkey.key)
+	return parts.join(' ')
+}
+</script>
+
+<template>
+	<NcAppSettingsShortcutsSection>
+		<NcHotkeyList :label="t('files', 'Actions')">
+			<NcHotkey :label="t('files', 'File actions')" hotkey="A" />
+
+			<NcHotkey
+				v-for="hotkey of actionHotkeys"
+				:key="hotkey.id"
+				:label="hotkey.label"
+				:hotkey="hotkey.hotkey" />
+		</NcHotkeyList>
+
+		<NcHotkeyList :label="t('files', 'Selection')">
+			<NcHotkey :label="t('files', 'Select all files')" hotkey="Control A" />
+			<NcHotkey :label="t('files', 'Deselect all')" hotkey="Escape" />
+			<NcHotkey :label="t('files', 'Select or deselect')" hotkey="Control Space" />
+			<NcHotkey :label="t('files', 'Select a range')" hotkey="Control Shift Space" />
+		</NcHotkeyList>
+
+		<NcHotkeyList :label="t('files', 'Navigation')">
+			<NcHotkey :label="t('files', 'Go to parent folder')" hotkey="Alt ArrowUp" />
+			<NcHotkey :label="t('files', 'Go to file above')" hotkey="ArrowUp" />
+			<NcHotkey :label="t('files', 'Go to file below')" hotkey="ArrowDown" />
+			<NcHotkey :label="t('files', 'Go left in grid')" hotkey="ArrowLeft" />
+			<NcHotkey :label="t('files', 'Go right in grid')" hotkey="ArrowRight" />
+		</NcHotkeyList>
+
+		<NcHotkeyList :label="t('files', 'View')">
+			<NcHotkey :label="t('files', 'Toggle grid view')" hotkey="V" />
+			<NcHotkey :label="t('files', 'Open file sidebar')" hotkey="D" />
+			<NcHotkey :label="t('files', 'Show those shortcuts')" hotkey="?" />
+		</NcHotkeyList>
+	</NcAppSettingsShortcutsSection>
+</template>

apps/files/src/views/FilesAppSettings.vue

@@ -54,7 +54,7 @@
 		</NcAppSettingsSection>
 
 		<!-- Appearance -->
-		<NcAppSettingsSection id="settings" :name="t('files', 'Appearance')">
+		<NcAppSettingsSection id="appearance" :name="t('files', 'Appearance')">
 			<NcCheckboxRadioSwitch
 				data-cy-files-settings-setting="show_hidden"
 				:checked="userConfig.show_hidden"
@@ -139,161 +139,7 @@
 			</NcCheckboxRadioSwitch>
 		</NcAppSettingsSection>
 
-		<NcAppSettingsSection
-			id="shortcuts"
-			:name="t('files', 'Keyboard shortcuts')">
-			<h3>{{ t('files', 'Actions') }}</h3>
-			<dl>
-				<div>
-					<dt class="shortcut-key">
-						<kbd>a</kbd>
-					</dt>
-					<dd class="shortcut-description">
-						{{ t('files', 'File actions') }}
-					</dd>
-				</div>
-				<div>
-					<dt class="shortcut-key">
-						<kbd>F2</kbd>
-					</dt>
-					<dd class="shortcut-description">
-						{{ t('files', 'Rename') }}
-					</dd>
-				</div>
-				<div>
-					<dt class="shortcut-key">
-						<kbd>Del</kbd>
-					</dt>
-					<dd class="shortcut-description">
-						{{ t('files', 'Delete') }}
-					</dd>
-				</div>
-				<div>
-					<dt class="shortcut-key">
-						<kbd>s</kbd>
-					</dt>
-					<dd class="shortcut-description">
-						{{ t('files', 'Add or remove favorite') }}
-					</dd>
-				</div>
-				<div v-if="isSystemtagsEnabled">
-					<dt class="shortcut-key">
-						<kbd>t</kbd>
-					</dt>
-					<dd class="shortcut-description">
-						{{ t('files', 'Manage tags') }}
-					</dd>
-				</div>
-			</dl>
-
-			<h3>{{ t('files', 'Selection') }}</h3>
-			<dl>
-				<div>
-					<dt class="shortcut-key">
-						<kbd>Ctrl</kbd> + <kbd>A</kbd>
-					</dt>
-					<dd class="shortcut-description">
-						{{ t('files', 'Select all files') }}
-					</dd>
-				</div>
-				<div>
-					<dt class="shortcut-key">
-						<kbd>ESC</kbd>
-					</dt>
-					<dd class="shortcut-description">
-						{{ t('files', 'Deselect all') }}
-					</dd>
-				</div>
-				<div>
-					<dt class="shortcut-key">
-						<kbd>Ctrl</kbd> + <kbd>Space</kbd>
-					</dt>
-					<dd class="shortcut-description">
-						{{ t('files', 'Select or deselect') }}
-					</dd>
-				</div>
-				<div>
-					<dt class="shortcut-key">
-						<kbd>Ctrl</kbd> + <kbd>Shift</kbd> <span>+ <kbd>Space</kbd></span>
-					</dt>
-					<dd class="shortcut-description">
-						{{ t('files', 'Select a range') }}
-					</dd>
-				</div>
-			</dl>
-
-			<h3>{{ t('files', 'Navigation') }}</h3>
-			<dl>
-				<div>
-					<dt class="shortcut-key">
-						<kbd>Alt</kbd> + <kbd>↑</kbd>
-					</dt>
-					<dd class="shortcut-description">
-						{{ t('files', 'Go to parent folder') }}
-					</dd>
-				</div>
-				<div>
-					<dt class="shortcut-key">
-						<kbd>↑</kbd>
-					</dt>
-					<dd class="shortcut-description">
-						{{ t('files', 'Go to file above') }}
-					</dd>
-				</div>
-				<div>
-					<dt class="shortcut-key">
-						<kbd>↓</kbd>
-					</dt>
-					<dd class="shortcut-description">
-						{{ t('files', 'Go to file below') }}
-					</dd>
-				</div>
-				<div>
-					<dt class="shortcut-key">
-						<kbd>←</kbd>
-					</dt>
-					<dd class="shortcut-description">
-						{{ t('files', 'Go left in grid') }}
-					</dd>
-				</div>
-				<div>
-					<dt class="shortcut-key">
-						<kbd>→</kbd>
-					</dt>
-					<dd class="shortcut-description">
-						{{ t('files', 'Go right in grid') }}
-					</dd>
-				</div>
-			</dl>
-
-			<h3>{{ t('files', 'View') }}</h3>
-			<dl>
-				<div>
-					<dt class="shortcut-key">
-						<kbd>V</kbd>
-					</dt>
-					<dd class="shortcut-description">
-						{{ t('files', 'Toggle grid view') }}
-					</dd>
-				</div>
-				<div>
-					<dt class="shortcut-key">
-						<kbd>D</kbd>
-					</dt>
-					<dd class="shortcut-description">
-						{{ t('files', 'Open file sidebar') }}
-					</dd>
-				</div>
-				<div>
-					<dt class="shortcut-key">
-						<kbd>?</kbd>
-					</dt>
-					<dd class="shortcut-description">
-						{{ t('files', 'Show those shortcuts') }}
-					</dd>
-				</div>
-			</dl>
-		</NcAppSettingsSection>
+		<FilesAppSettingsShortcuts />
 	</NcAppSettingsDialog>
 </template>
 
@@ -310,14 +156,16 @@ import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcInputField from '@nextcloud/vue/components/NcInputField'
 import Clipboard from 'vue-material-design-icons/ContentCopy.vue'
-import FilesAppSettingsEntry from '../components/FilesAppSettingsEntry.vue'
+import FilesAppSettingsEntry from '../components/FilesAppSettings/FilesAppSettingsEntry.vue'
+import FilesAppSettingsShortcuts from '../components/FilesAppSettings/FilesAppSettingsShortcuts.vue'
 import { useUserConfigStore } from '../store/userconfig.ts'
 
 export default {
 	name: 'FilesAppSettings',
 	components: {
 		Clipboard,
 		FilesAppSettingsEntry,
+		FilesAppSettingsShortcuts,
 		NcAppSettingsDialog,
 		NcAppSettingsSection,
 		NcCheckboxRadioSwitch,
@@ -385,7 +233,7 @@ export default {
 		this.settings.forEach((setting) => setting.open())
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		// Update the settings API entries state
 		this.settings.forEach((setting) => setting.close())
 	},