Allow comparing any pair of commits by dragging the compare icon.

src/views/Title.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-  import { toTimeAgo } from '@/common/common';
   import { ref, } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { toTimeAgo } from '@/common/common';
   import { retrieveCommits, DataSourceCommit } from '@/common/datasource'
   import useSettings from '@/common/settings';
 
   const [settings, _sessionSettings] = useSettings()
+  const router = useRouter()
 
   const commitEntries = ref<DataSourceCommit[]>(await retrieveCommits());
   if (settings.useCustomRepo && commitEntries.value.length == 0)
@@ -18,6 +20,33 @@
     settings.useCustomRepo = settings.customRepo.length > 0 && !settings.useCustomRepo
     location.reload()
   }
+
+  function handleDrag(event:DragEventInit, startCommitId:string, startRank:number)
+  {
+    if (!event.dataTransfer)
+      return
+
+    event.dataTransfer.dropEffect = 'move'
+    event.dataTransfer.effectAllowed = 'move'
+    event.dataTransfer.setData('commitId', startCommitId)
+    event.dataTransfer.setData('rank', startRank.toString())
+  }
+
+  function handleDrop(event:DragEventInit, endCommitId:string, endRank:number)
+  {
+    if (!event.dataTransfer)
+      return
+
+    let startCommitId = event.dataTransfer.getData('commitId')
+    const startRank = Number.parseInt(event.dataTransfer.getData('rank'))
+    if (!startCommitId || endCommitId == startCommitId)
+      return
+
+    if (startRank < endRank)
+      [startCommitId, endCommitId] = [endCommitId, startCommitId]
+
+    router.push({ name:'changes', params:{ fromCommitId: startCommitId, commitId: endCommitId }})
+  }
 </script>
 
 <template>
@@ -26,10 +55,13 @@
     <template v-if="commitEntries">
       <p>Pick a version:</p>
       <ul>
-        <li class="commit" v-for="(commitEntry, index) in commitEntries">
-          <RouterLink class="commitChanges" v-if=" commitEntry.parents?.[0]" :to="{ name:'changes', params:{ fromCommitId: commitEntry.parents[0].sha, commitId: commitEntry.sha }}" title="See changes">
-            ⮃
-          </RouterLink>
+        <li class="commit" v-for="(commitEntry, index) in commitEntries"
+          @drop="handleDrop($event, commitEntry.sha, index)" @dragover.prevent @dragenter.prevent>
+          <RouterLink class="commitChanges" title="Click to compare with previous;
+Drag to a specific commit to compare with it instead"
+            v-if="commitEntry.parents?.[0]"
+            :to="{ name:'changes', params:{ fromCommitId: commitEntry.parents[0].sha, commitId: commitEntry.sha }}"
+            draggable="true" @dragstart="handleDrag($event, commitEntry.sha, index)">⮃</RouterLink>
           <RouterLink class="commitInfo" :to="{ name:'commit', params:{ commitId: commitEntry.sha }}">
             <div class="identity">
               <span class="minor">
@@ -85,6 +117,7 @@
   .commitChanges
   {
     text-align:center;
+    cursor:grab;
   }
 
   .identity