fix(comments): better comments navigation UX

* Header: "< Comment 3 of 4 >" instead of "Comments ^ 3 / 4 v"
* Allow to navigate comments with keyboard shortcuts

Signed-off-by: Jonas <jonas@freesources.org>
Assisted-by: OpenCode:claude-fable-5.1

Author: mejo-

playwright/e2e/comments.spec.ts

@@ -158,3 +158,29 @@ test.describe('toggles annotations', () => {
 		await expect(editor.commentReferences.first()).toBeVisible()
 	})
 })
+
+test.describe('navigates between comments', () => {
+	test.use({
+		fileContent: 'The quick[^comment-1] brown[^comment-2] fox.\n\n'
+			+ '[^comment-1]:\n'
+			+ '    - @[jane](mention://user/jane) *(2026-07-16T13:12Z)*\n'
+			+ '      First comment\n\n'
+			+ '[^comment-2]:\n'
+			+ '    - @[bob](mention://user/bob) *(2026-07-16T13:13Z)*\n'
+			+ '      Second comment\n',
+	})
+
+	test('shows the position and moves with buttons and shortcut', async ({ open, editor }) => {
+		await open()
+		await editor.getCommentReference('comment-1').click()
+		await expect(editor.commentBubble).toContainText('Comment 1 of 2')
+		await expect(editor.commentBubble).toContainText('First comment')
+
+		await editor.commentBubble.getByRole('button', { name: 'Next comment' }).click()
+		await expect(editor.commentBubble).toContainText('Comment 2 of 2')
+		await expect(editor.commentBubble).toContainText('Second comment')
+
+		await editor.commentBubble.press('ControlOrMeta+Alt+ArrowLeft')
+		await expect(editor.commentBubble).toContainText('Comment 1 of 2')
+	})
+})

src/components/Comment/CommentBubbleView.vue

@@ -7,27 +7,30 @@
 	<div
 		:id="`comment-bubble-${referenceId}`"
 		class="comment-bubble"
-		@keydown.escape.prevent.stop="closeAndRefocus">
+		@keydown="onKeyDown">
 		<div class="comment-bubble__header">
-			<span class="comment-bubble__title">{{ t('text', 'Comments') }}</span>
-			<div v-if="commentCount > 1" class="comment-bubble__nav">
+			<div class="comment-bubble__nav">
 				<NcButton
+					v-if="commentCount > 1"
 					variant="tertiary"
 					size="small"
-					:title="t('text', 'Previous comment')"
+					:aria-label="t('text', 'Previous comment')"
+					:title="previousTitle"
 					@click="navigate('prev')">
 					<template #icon>
-						<ChevronUpIcon :size="16" />
+						<ChevronLeftIcon :size="16" />
 					</template>
 				</NcButton>
-				<span class="comment-bubble__nav-position">{{ commentPosition }} / {{ commentCount }}</span>
+				<span class="comment-bubble__title">{{ title }}</span>
 				<NcButton
+					v-if="commentCount > 1"
 					variant="tertiary"
 					size="small"
-					:title="t('text', 'Next comment')"
+					:aria-label="t('text', 'Next comment')"
+					:title="nextTitle"
 					@click="navigate('next')">
 					<template #icon>
-						<ChevronDownIcon :size="16" />
+						<ChevronRightIcon :size="16" />
 					</template>
 				</NcButton>
 			</div>
@@ -169,14 +172,15 @@ import NcDateTime from '@nextcloud/vue/components/NcDateTime'
 import NcRichContenteditable from '@nextcloud/vue/components/NcRichContenteditable'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
-import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue'
-import ChevronUpIcon from 'vue-material-design-icons/ChevronUp.vue'
+import ChevronLeftIcon from 'vue-material-design-icons/ChevronLeft.vue'
+import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
 import PencilIcon from 'vue-material-design-icons/Pencil.vue'
 import { useGuestName } from '../../composables/useGuestName.ts'
 import { createMarkdownSerializer } from '../../extensions/Markdown.ts'
 import { commentDraftPrefix } from '../../plugins/referenceHelpers.ts'
+import { MODIFIERS, TRANSLATIONS } from '../Menu/keys.js'
 
 const props = defineProps<{
 	editor: Editor
@@ -200,6 +204,14 @@ const commentCount = computed(() => commentRefIds.value.length)
 const commentPosition = computed(() => commentRefIds.value.indexOf(props.referenceId) + 1)
 const commentNode = computed<Node | null>(() => commentNodesMap.value[props.referenceId] ?? null)
 
+const title = computed(() => (commentCount.value > 1
+	? t('text', 'Comment {position} of {count}', { position: commentPosition.value, count: commentCount.value })
+	: t('text', 'Comment')))
+
+const shortcutPrefix = `${TRANSLATIONS[MODIFIERS.Mod]} + ${TRANSLATIONS[MODIFIERS.Alt]} + `
+const previousTitle = t('text', 'Previous comment ({shortcut})', { shortcut: shortcutPrefix + '←' })
+const nextTitle = t('text', 'Next comment ({shortcut})', { shortcut: shortcutPrefix + '→' })
+
 const editingItemIndex = ref<number | null>(null)
 const editText = ref('')
 
@@ -397,6 +409,25 @@ async function submitGuestName() {
 function closeAndRefocus() {
 	props.editor.commands.hideCommentBubble({ refocus: true })
 }
+
+function onKeyDown(event: KeyboardEvent) {
+	if (event.key === 'Escape') {
+		event.preventDefault()
+		event.stopPropagation()
+		closeAndRefocus()
+		return
+	}
+	if (!(event.ctrlKey || event.metaKey) || !event.altKey) {
+		return
+	}
+	if (event.key === 'ArrowLeft') {
+		event.preventDefault()
+		navigate('prev')
+	} else if (event.key === 'ArrowRight') {
+		event.preventDefault()
+		navigate('next')
+	}
+}
 </script>
 
 <style scoped lang="scss">
@@ -425,19 +456,13 @@ function closeAndRefocus() {
 		font-weight: bold;
 		font-size: 0.9em;
 		color: var(--color-text-maxcontrast);
+		white-space: nowrap;
 	}
 
 	&__nav {
 		display: flex;
 		align-items: center;
 		gap: var(--default-grid-baseline);
-		margin-inline-start: auto;
-	}
-
-	&__nav-position {
-		font-size: 0.8em;
-		color: var(--color-text-maxcontrast);
-		white-space: nowrap;
 	}
 
 	&__items {

src/extensions/CommentBubble.ts

@@ -63,6 +63,13 @@ const CommentBubble = Extension.create({
 		}
 	},
 
+	addKeyboardShortcuts() {
+		return {
+			'Mod-Alt-ArrowLeft': () => this.editor.commands.navigateCommentBubble('prev'),
+			'Mod-Alt-ArrowRight': () => this.editor.commands.navigateCommentBubble('next'),
+		}
+	},
+
 	addProseMirrorPlugins() {
 		return [commentBubble({ editor: this.editor })]
 	},