feat(systemtags): add systemtag manage keyboard shortcut

Signed-off-by: skjnldsv <[email protected]>

apps/files/src/views/FilesList.vue

@@ -222,16 +222,16 @@ export default defineComponent({
 	},
 
 	setup() {
+		const { currentView } = useNavigation()
+		const { directory, fileId } = useRouteParameters()
+		const fileListWidth = useFileListWidth()
 		const filesStore = useFilesStore()
 		const filtersStore = useFiltersStore()
 		const pathsStore = usePathsStore()
 		const selectionStore = useSelectionStore()
 		const uploaderStore = useUploaderStore()
 		const userConfigStore = useUserConfigStore()
 		const viewConfigStore = useViewConfigStore()
-		const { currentView } = useNavigation()
-		const fileListWidth = useFileListWidth()
-		const { directory, fileId } = useRouteParameters()
 
 		const enableGridView = (loadState('core', 'config', [])['enable_non-accessible_features'] ?? true)
 		const forbiddenCharacters = loadState<string[]>('files', 'forbiddenCharacters', [])

apps/files/src/views/Settings.vue

@@ -113,7 +113,7 @@
 						{{ t('files', 'Favorite or remove a file from favorites') }}
 					</dd>
 				</div>
-				<div>
+				<div v-if="isSystemtagsEnabled">
 					<dt class="shortcut-key"><kbd>t</kbd></dt>
 					<dd class="shortcut-description">
 						{{ t('files', 'Manage tags for a file') }}
@@ -209,20 +209,22 @@
 </template>
 
 <script>
+import { getCapabilities } from '@nextcloud/capabilities'
+import Clipboard from 'vue-material-design-icons/ContentCopy.vue'
 import NcAppSettingsDialog from '@nextcloud/vue/dist/Components/NcAppSettingsDialog.js'
 import NcAppSettingsSection from '@nextcloud/vue/dist/Components/NcAppSettingsSection.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
-import Clipboard from 'vue-material-design-icons/ContentCopy.vue'
 import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
-import Setting from '../components/Setting.vue'
 
 import { generateRemoteUrl, generateUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
 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'
+import Setting from '../components/Setting.vue'
 
 export default {
 	name: 'Settings',
@@ -244,7 +246,9 @@ export default {
 
 	setup() {
 		const userConfigStore = useUserConfigStore()
+		const isSystemtagsEnabled = getCapabilities()?.systemtags?.enabled === true
 		return {
+			isSystemtagsEnabled,
 			userConfigStore,
 			t,
 		}

apps/systemtags/src/components/SystemTagPicker.vue

@@ -151,7 +151,7 @@ import TagIcon from 'vue-material-design-icons/Tag.vue'
 import { createTag, fetchTag, fetchTags, getTagObjects, setTagObjects, updateTag } from '../services/api'
 import { getNodeSystemTags, setNodeSystemTags } from '../utils'
 import { elementColor, invertTextColor, isDarkModeEnabled } from '../utils/colorUtils'
-import logger from '../services/logger'
+import logger from '../logger.ts'
 
 const debounceUpdateTag = debounce(updateTag, 500)
 const mainBackgroundColor = getComputedStyle(document.body)

apps/systemtags/src/files_actions/inlineSystemTagsAction.ts

@@ -12,7 +12,7 @@ import '../css/fileEntryInlineSystemTags.scss'
 import { elementColor, isDarkModeEnabled } from '../utils/colorUtils'
 import { fetchTags } from '../services/api'
 import { getNodeSystemTags } from '../utils'
-import logger from '../services/logger'
+import logger from '../logger.ts'
 
 // Init tag cache
 const cache: TagWithId[] = []

apps/systemtags/src/init.ts

@@ -3,14 +3,20 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 import { registerDavProperty, registerFileAction } from '@nextcloud/files'
+import { registerHotkeys } from './services/HotKeysService'
+import { registerSystemTagsView } from './files_views/systemtagsView'
+
 import { action as bulkSystemTagsAction } from './files_actions/bulkSystemTagsAction'
 import { action as inlineSystemTagsAction } from './files_actions/inlineSystemTagsAction'
 import { action as openInFilesAction } from './files_actions/openInFilesAction'
-import { registerSystemTagsView } from './files_views/systemtagsView'
 
 registerDavProperty('nc:system-tags')
 registerFileAction(bulkSystemTagsAction)
 registerFileAction(inlineSystemTagsAction)
 registerFileAction(openInFilesAction)
 
 registerSystemTagsView()
+
+document.addEventListener('DOMContentLoaded', () => {
+	registerHotkeys()
+})

apps/systemtags/src/logger.ts

@@ -5,7 +5,7 @@
 
 import { getLoggerBuilder } from '@nextcloud/logger'
 
-export const logger = getLoggerBuilder()
+export default getLoggerBuilder()
 	.setApp('systemtags')
 	.detectUser()
 	.build()

apps/systemtags/src/services/HotKeysService.ts

@@ -0,0 +1,24 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { useHotKey } from '@nextcloud/vue/dist/Composables/useHotKey.js'
+
+import { action as manageTagAction } from '../files_actions/bulkSystemTagsAction.ts'
+import { executeAction } from '../../../files/src/utils/actionUtils.ts'
+import logger from '../logger.ts'
+
+/**
+ * This register the hotkeys for the Files app.
+ * As much as possible, we try to have all the hotkeys in one place.
+ * Please make sure to add tests for the hotkeys after adding a new one.
+ */
+export const registerHotkeys = function() {
+	// t opens the tag management dialog
+	useHotKey('t', () => executeAction(manageTagAction), {
+		stop: true,
+		prevent: true,
+	})
+
+	logger.debug('Hotkeys registered')
+}

apps/systemtags/src/services/api.ts

@@ -12,7 +12,7 @@ import { t } from '@nextcloud/l10n'
 
 import { davClient } from './davClient.js'
 import { formatTag, parseIdFromLocation, parseTags } from '../utils'
-import { logger } from '../logger.js'
+import logger from '../logger.ts'
 import { emit } from '@nextcloud/event-bus'
 
 export const fetchTagsPayload = `<?xml version="1.0"?>

apps/systemtags/src/services/files.ts

@@ -7,10 +7,11 @@ import type { FileStat, ResponseDataDetailed } from 'webdav'
 import type { ServerTagWithId, Tag, TagWithId } from '../types.js'
 
 import { t } from '@nextcloud/l10n'
-import { davClient } from './davClient.js'
+
 import { createTag, fetchTagsPayload } from './api.js'
+import { davClient } from './davClient.js'
 import { formatTag, parseTags } from '../utils.js'
-import { logger } from '../logger.js'
+import logger from '../logger.ts'
 
 export const fetchTagsForFile = async (fileId: number): Promise<TagWithId[]> => {
 	const path = '/systemtags-relations/files/' + fileId