feat(files): add keyboard shortcuts helper section

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>

2 files changed, 155 insertions, 4 deletions

diff --git a/apps/files/src/views/Navigation.vue b/apps/files/src/views/Navigation.vue
index 1420e8e1d9e..4fa4f72fe3c 100644
--- a/apps/files/src/views/Navigation.vue
+++ b/apps/files/src/views/Navigation.vue
@@ -16,7 +16,7 @@
 			</NcAppNavigationList>
 
 			<!-- Settings modal-->
-			<SettingsModal :open="settingsOpened"
+			<SettingsModal :open.sync="settingsOpened"
 				data-cy-files-navigation-settings
 				@close="onSettingsClose" />
 		</template>
diff --git a/apps/files/src/views/Settings.vue b/apps/files/src/views/Settings.vue
index c64f3b898b2..0ff7a56e37d 100644
--- a/apps/files/src/views/Settings.vue
+++ b/apps/files/src/views/Settings.vue
@@ -82,6 +82,129 @@
 				</a>
 			</em>
 		</NcAppSettingsSection>
+
+		<NcAppSettingsSection id="shortcuts"
+			:name="t('files', 'Keyboard shortcuts')">
+			<em>{{ t('files', 'Speed up your Files experience with these quick shortcuts.') }}</em>
+
+			<h3>{{ t('files', 'Actions') }}</h3>
+			<dl>
+				<div>
+					<dt class="shortcut-key"><kbd>a</kbd></dt>
+					<dd class="shortcut-description">
+						{{ t('files', 'Open the actions menu for a file') }}
+					</dd>
+				</div>
+				<div>
+					<dt class="shortcut-key"><kbd>F2</kbd></dt>
+					<dd class="shortcut-description">
+						{{ t('files', 'Rename a file') }}
+					</dd>
+				</div>
+				<div>
+					<dt class="shortcut-key"><kbd>Del</kbd></dt>
+					<dd class="shortcut-description">
+						{{ t('files', 'Delete a file') }}
+					</dd>
+				</div>
+				<div>
+					<dt class="shortcut-key"><kbd>s</kbd></dt>
+					<dd class="shortcut-description">
+						{{ t('files', 'Favorite or remove a file from favorites') }}
+					</dd>
+				</div>
+				<div>
+					<dt class="shortcut-key"><kbd>t</kbd></dt>
+					<dd class="shortcut-description">
+						{{ t('files', 'Manage tags for a file') }}
+					</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 files') }}
+					</dd>
+				</div>
+				<div>
+					<dt class="shortcut-key"><kbd>Ctrl</kbd> + <kbd>Space</kbd></dt>
+					<dd class="shortcut-description">
+						{{ t('files', 'Select or deselect a file') }}
+					</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 of files') }}
+					</dd>
+				</div>
+			</dl>
+
+			<h3>{{ t('files', 'Navigation') }}</h3>
+			<dl>
+				<div>
+					<dt class="shortcut-key"><kbd>↑</kbd></dt>
+					<dd class="shortcut-description">
+						{{ t('files', 'Navigate to the file above') }}
+					</dd>
+				</div>
+				<div>
+					<dt class="shortcut-key"><kbd>Alt</kbd> + <kbd>↑</kbd></dt>
+					<dd class="shortcut-description">
+						{{ t('files', 'Navigate to the parent folder') }}
+					</dd>
+				</div>
+				<div>
+					<dt class="shortcut-key"><kbd>↓</kbd></dt>
+					<dd class="shortcut-description">
+						{{ t('files', 'Navigate to the file below') }}
+					</dd>
+				</div>
+				<div>
+					<dt class="shortcut-key"><kbd>←</kbd></dt>
+					<dd class="shortcut-description">
+						{{ t('files', 'Navigate to the file on the left (in grid mode)') }}
+					</dd>
+				</div>
+				<div>
+					<dt class="shortcut-key"><kbd>→</kbd></dt>
+					<dd class="shortcut-description">
+						{{ t('files', 'Navigate to the file on the right (in grid mode)') }}
+					</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 the grid view') }}
+					</dd>
+				</div>
+				<div>
+					<dt class="shortcut-key"><kbd>D</kbd></dt>
+					<dd class="shortcut-description">
+						{{ t('files', 'Open the sidebar for a file') }}
+					</dd>
+				</div>
+				<div>
+					<dt class="shortcut-key"><kbd>?</kbd></dt>
+					<dd class="shortcut-description">
+						{{ t('files', 'Show those shortcuts') }}
+					</dd>
+				</div>
+			</dl>
+		</NcAppSettingsSection>
 	</NcAppSettingsDialog>
 </template>
 
@@ -95,9 +218,10 @@ import Setting from '../components/Setting.vue'
 
 import { generateRemoteUrl, generateUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
-import { showError, showSuccess } from '@nextcloud/dialogs'
-import { translate } from '@nextcloud/l10n'
 import { loadState } from '@nextcloud/initial-state'
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import { t } from '@nextcloud/l10n'
+import { useHotKey } from '@nextcloud/vue/dist/Composables/useHotKey.js'
 import { useUserConfigStore } from '../store/userconfig.ts'
 
 export default {
@@ -122,6 +246,7 @@ export default {
 		const userConfigStore = useUserConfigStore()
 		return {
 			userConfigStore,
+			t,
 		}
 	},
 
@@ -145,6 +270,14 @@ export default {
 		},
 	},
 
+	created() {
+		// ? opens the settings dialog on the keyboard shortcuts section
+		useHotKey('?', this.showKeyboardShortcuts, {
+			stop: true,
+			prevent: true,
+		})
+	},
+
 	beforeMount() {
 		// Update the settings API entries state
 		this.settings.forEach(setting => setting.open())
@@ -181,7 +314,15 @@ export default {
 			}, 5000)
 		},
 
-		t: translate,
+		async showKeyboardShortcuts() {
+			this.$emit('update:open', true)
+
+			await this.$nextTick()
+			document.getElementById('settings-section_shortcuts').scrollIntoView({
+				behavior: 'smooth',
+				inline: 'nearest',
+			})
+		},
 	},
 }
 </script>
@@ -190,4 +331,14 @@ export default {
 .setting-link:hover {
 	text-decoration: underline;
 }
+
+.shortcut-key {
+	width: 160px;
+	// some shortcuts are too long to fit in one line
+	white-space: normal;
+	span {
+		// force portion of a shortcut on a new line for nicer display
+		white-space: nowrap;
+	}
+}
 </style>