feat(patch-detail): show revision info on id click in major-events

Signed-off-by: Konstantinos Maninakis <maninak@protonmail.com>

CHANGELOG.md

@@ -35,7 +35,8 @@
   - the aforementioned coupled with the pre-existing feature of optimally auto-aligning the form as it resizes should seamlessly provide a smooth authoring experience
   - adjust the hover text of all form buttons to advertise their respective keyboard shortcut (if any)
   - **patch-detail:** preselect the merged revision, if any, in the revision selector instead of always the latest
-  - **patch-detail:** don't mention the related commit in the patch major events section (~~"Last updated by W with revision X at commit Y Z time ago"~~). This information is still available in the Revision section.
+  - **patch-detail:** align the UX for every revision identifier shown in the patch-major-events section (top of the view) with the behaviour of those in the Activity section, i.e. showing the revision description on hover, and when clicked scrolling to the Revision section wherin more info about it is shown
+  - **patch-detail:** don't mention the related commit in the patch-major-events section (~~"Last updated by W with revision X at commit Y Z time ago"~~). This information is still available in the Revision section.
   - **patch-detail:** keep the labels of the main buttons (top-right of the view) as a single line of text, even if the viewport is narrow enough to compress them
   - **patch-detail:** add themed styling to `<summary>` elements when tabbed into
 

src/webviews/src/components/PatchDetail.vue

@@ -62,7 +62,7 @@ function showCreateCommentForm(targetRevision: Revision) {
     <header class="flex gap-4 justify-between" style="grid-area: header">
       <div class="flex flex-wrap gap-4 items-center">
         <PatchStatusBadge class="text-sm" />
-        <PatchMajorEvents />
+        <PatchMajorEvents @show-revision="showRevision" />
       </div>
       <aside class="flex flex-col gap-2 shrink-0 *:w-full">
         <PatchDetailButtons />

src/webviews/src/components/PatchDetailActivity.vue

@@ -13,14 +13,15 @@ import {
   truncateMarkdown,
   maxCharsForUntruncatedMdText,
 } from 'extensionUtils/string'
+import { notifyExtension } from 'extensionUtils/webview-messaging'
 import type { Comment, Revision } from '../../../types'
 import { usePatchDetailStore } from '@/stores/patchDetailStore'
 import { scrollToTemplateRef } from '@/utils/scrollToTemplateRef'
 import Markdown from '@/components/Markdown.vue'
 import EventList from '@/components/EventList.vue'
 import EventItem from '@/components/EventItem.vue'
 import Reactions from '@/components/Reactions.vue'
-import { notifyExtension } from 'extensionUtils/webview-messaging'
+import { getRevisionHoverTitle } from '@/helpers/patchDetail'
 
 provideVSCodeDesignSystem().register(vsCodeButton(), vsCodeTextArea())
 
@@ -32,10 +33,6 @@ const { selectedRevision } = defineProps<{
 
 const { patch, firstRevision, patchCommentForm } = storeToRefs(usePatchDetailStore())
 
-function getRevisionHoverTitle(text: string) {
-  return `Click to See Revision Details\n⸻\nRevision Description:\n"${text}"`
-}
-
 const commentRefs = useTemplateRef<InstanceType<typeof EventItem>[]>('commentRefs')
 function scrollToComment(commentId: Comment['id']) {
   const foundCommentRef = commentRefs.value?.find(

src/webviews/src/components/PatchDetailRevision.vue

@@ -14,11 +14,11 @@ import {
   getTimeAgo,
 } from 'extensionUtils/time'
 import { notifyExtension } from 'extensionUtils/webview-messaging'
+import type { Revision } from '../../../types'
 import { usePatchDetailStore } from '@/stores/patchDetailStore'
 import Markdown from '@/components/Markdown.vue'
 import Metadatum from '@/components/Metadatum.vue'
 import Reactions from './Reactions.vue'
-import type { Revision } from '../../../types'
 
 provideVSCodeDesignSystem().register(vsCodeButton(), vsCodeDropdown(), vsCodeOption())
 

src/webviews/src/components/PatchDetailTitleDescription.vue

@@ -7,10 +7,10 @@ import {
 import { watchEffect, computed, useTemplateRef } from 'vue'
 import { useEventListener } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
+import { notifyExtension } from 'extensionUtils/webview-messaging'
 import { usePatchDetailStore } from '@/stores/patchDetailStore'
 import PatchMetadata from '@/components/PatchMetadata.vue'
 import Markdown from '@/components/Markdown.vue'
-import { notifyExtension } from 'extensionUtils/webview-messaging'
 
 provideVSCodeDesignSystem().register(vsCodeButton(), vsCodeTextArea())
 

src/webviews/src/components/PatchMajorEvents.vue

@@ -2,9 +2,13 @@
 import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { computedWithControl } from '@vueuse/core'
+import type { Revision } from '../../../types'
 import { usePatchDetailStore } from '@/stores/patchDetailStore'
 import { getTimeAgo, getFormattedDate } from 'extensionUtils/time'
 import { getIdentityAliasOrId, shortenHash } from 'extensionUtils/string'
+import { getRevisionHoverTitle } from '@/helpers/patchDetail'
+
+defineEmits<{ showRevision: [revision: Revision] }>()
 
 const { patch, firstRevision, latestRevision, timeLocale } = storeToRefs(usePatchDetailStore())
 
@@ -13,6 +17,9 @@ const { patch, firstRevision, latestRevision, timeLocale } = storeToRefs(usePatc
 const latestMerge = computed(() =>
   [...patch.value.merges].sort((m1, m2) => m1.timestamp - m2.timestamp).at(-1),
 )
+const latestMergeRevision = patch.value.revisions.find(
+  (revision) => revision.id === latestMerge.value?.revision,
+)
 const shouldShowRevisionEvent = computed(() => patch.value.revisions.length >= 2)
 
 const mergedTimeAgo = computedWithControl(
@@ -36,10 +43,18 @@ setInterval(() => {
   <div class="flex flex-col gap-[0.5em]">
     <div v-if="latestMerge" class="leading-tight">
       Merged by
-      <!--  TODO: maninak include all revisions and mergers? -->
       <pre :title="latestMerge.author.id">{{ getIdentityAliasOrId(latestMerge.author) }}</pre>
       using revision
-      <pre :title="latestMerge.revision">{{ shortenHash(latestMerge.revision) }}</pre>
+      <pre
+        @click="latestMergeRevision && $emit('showRevision', latestMergeRevision)"
+        :title="
+          latestMergeRevision
+            ? getRevisionHoverTitle(latestMergeRevision?.description)
+            : latestMerge.revision
+        "
+        class="hover:cursor-pointer"
+        >{{ shortenHash(latestMerge.revision) }}</pre
+      >
       &ensp;<wbr /><pre :title="getFormattedDate(latestMerge.timestamp, timeLocale)">{{
         mergedTimeAgo
       }}</pre>
@@ -50,7 +65,11 @@ setInterval(() => {
         getIdentityAliasOrId(latestRevision.author)
       }}</pre>
       with revision
-      <pre :title="latestRevision.id">{{ shortenHash(latestRevision.id) }}</pre
+      <pre
+        @click="$emit('showRevision', latestRevision)"
+        :title="getRevisionHoverTitle(latestRevision.description)"
+        class="hover:cursor-pointer"
+        >{{ shortenHash(latestRevision.id) }}</pre
       >&ensp;<wbr /><pre :title="getFormattedDate(latestRevision.timestamp, timeLocale)">{{
         updatedTimeAgo
       }}</pre>

src/webviews/src/helpers/patchDetail.ts

@@ -0,0 +1,3 @@
+export function getRevisionHoverTitle(revisionDescription: string) {
+  return `Click to See Revision Details\n⸻\nRevision Description:\n"${revisionDescription}"`
+}