Fix arrow key navigation glitch (#28)

Fix:
- When going down/up on in a second connection with identical topics as another previous one would scroll up to the first topic with that name

Author: ChxGuillaume

src/renderer/src/components/tap-topics/TopicItem.vue

@@ -148,7 +148,7 @@ watch(
 <template>
   <div v-if="!isLastTopicPart" :id="`topic-item-${topicPath}`">
     <div class="tw-flex">
-      <q-intersection :id="`topic-item-${topicPath}-intersection`" class="tw-h-[29px]">
+      <q-intersection :id="`topic-item-${clientKey}:${topicPath}-intersection`" class="tw-h-[29px]">
         <topic-card
           ref="topicGroupTopicCardRef"
           expandable
@@ -196,7 +196,7 @@ watch(
     </template>
   </div>
   <div v-else class="tw-flex" :id="`topic-item-${topicPath}`">
-    <q-intersection :id="`topic-item-${topicPath}-intersection`" class="tw-h-[29px]">
+    <q-intersection :id="`topic-item-${clientKey}:${topicPath}-intersection`" class="tw-h-[29px]">
       <topic-card
         ref="topicCardRef"
         :has-actions="hasActions"

src/renderer/src/tabs/TabTopics.vue

@@ -181,12 +181,13 @@ const handleKeyDown = (event: KeyboardEvent) => {
 }
 
 const handleUpKeyDown = () => {
+  const clientKey = mqttTopicsStore.selectedConnection
   const selectedTopicIndex = allTopics.value.indexOf(mqttTopicsStore.selectedTopic)
   const previousTopic = topicToSelect(selectedTopicIndex, 'up')
 
   if (previousTopic) {
     handleSelectTopic(mqttTopicsStore.selectedConnection, previousTopic)
-    handleScrollPreviousTopic(previousTopic)
+    handleScrollPreviousTopic(clientKey, previousTopic)
   }
 
   scrubbingTimeout.value = setTimeout(() => {
@@ -201,12 +202,13 @@ const handleUpKeyUp = () => {
 }
 
 const handleDownKeyDown = () => {
+  const clientKey = mqttTopicsStore.selectedConnection
   const selectedTopicIndex = allTopics.value.indexOf(mqttTopicsStore.selectedTopic)
   const nextTopic = topicToSelect(selectedTopicIndex, 'down')
 
   if (nextTopic) {
     handleSelectTopic(mqttTopicsStore.selectedConnection, nextTopic)
-    handleScrollNextTopic(nextTopic)
+    handleScrollNextTopic(clientKey, nextTopic)
   }
 
   scrubbingTimeout.value = setTimeout(() => {
@@ -233,7 +235,7 @@ const handleLeftKey = () => {
 
     if (previousTopic) {
       handleSelectTopic(clientKey, previousTopic)
-      handleScrollPreviousTopic(previousTopic)
+      handleScrollPreviousTopic(clientKey, previousTopic)
     }
   }
 }
@@ -251,14 +253,14 @@ const handleRightKey = () => {
 
     if (nextTopic) {
       handleSelectTopic(clientKey, nextTopic)
-      handleScrollNextTopic(nextTopic)
+      handleScrollNextTopic(clientKey, nextTopic)
     }
   }
 }
 
-const handleScrollPreviousTopic = (previousTopic: string) => {
+const handleScrollPreviousTopic = (clientKey: string, previousTopic: string) => {
   const virtualScroll = document.getElementById('topicsVirtualScroll')
-  const element = document.getElementById(`topic-item-${previousTopic}-intersection`)
+  const element = document.getElementById(`topic-item-${clientKey}:${previousTopic}-intersection`)
 
   if (virtualScroll && element) {
     if (element.offsetTop < virtualScroll.scrollTop) {
@@ -272,9 +274,9 @@ const handleScrollPreviousTopic = (previousTopic: string) => {
   }
 }
 
-const handleScrollNextTopic = (nextTopic: string) => {
+const handleScrollNextTopic = (clientKey: string, nextTopic: string) => {
   const virtualScroll = document.getElementById('topicsVirtualScroll')
-  const element = document.getElementById(`topic-item-${nextTopic}-intersection`)
+  const element = document.getElementById(`topic-item-${clientKey}:${nextTopic}-intersection`)
 
   if (virtualScroll && element) {
     if (