Fix bookmark search result styling and keyboard interactions

src/renderer/components/ft-input/ft-input.css

@@ -205,9 +205,15 @@
   line-height: 2rem;
 }
 
-/* .list .li.bookmarked {
-  color: green;
-} */
+.list .bookmarked {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.bookmarkStarIcon {
+  color: var(--favorite-icon-color);
+}
 
 .hover {
   background-color: var(--scrollbar-color-hover);

src/renderer/components/ft-input/ft-input.js

@@ -116,8 +116,7 @@ export default defineComponent({
 
     searchStateKeyboardSelectedOptionValue() {
       if (this.searchState.keyboardSelectedOptionIndex === -1) { return null }
-
-      return this.visibleDataList[this.searchState.keyboardSelectedOptionIndex]
+      return this.getTextForArrayAtIndex(this.visibleDataList, this.searchState.keyboardSelectedOptionIndex)
     },
   },
   watch: {
@@ -143,6 +142,9 @@ export default defineComponent({
     this.updateVisibleDataList()
   },
   methods: {
+    getTextForArrayAtIndex: function (array, index) {
+      return array[index].bookmarkName ?? array[index]
+    },
     handleClick: function (e) {
       // No action if no input text
       if (!this.inputDataPresent) {
@@ -231,9 +233,9 @@ export default defineComponent({
       }
     },
 
-    handleOptionClick: function (index, isBookmark) {
+    handleOptionClick: function (index) {
       this.searchState.showOptions = false
-      if (isBookmark) {
+      if (this.visibleDataList[index].route) {
         this.inputData = `ft:${this.visibleDataList[index].route}`
       } else {
         this.inputData = this.visibleDataList[index]
@@ -251,9 +253,11 @@ export default defineComponent({
         if (this.searchState.selectedOption !== -1) {
           this.searchState.showOptions = false
           event.preventDefault()
-          this.inputData = this.visibleDataList[this.searchState.selectedOption]
+          this.inputData = this.getTextForArrayAtIndex(this.visibleDataList, this.searchState.selectedOption)
+          this.handleOptionClick(this.searchState.selectedOption)
+        } else {
+          this.handleClick(event)
         }
-        this.handleClick(event)
         // Early return
         return
       }

src/renderer/components/ft-input/ft-input.vue

@@ -79,15 +79,16 @@
           v-for="(entry, index) in visibleDataList"
           :key="index"
           :class="{ hover: searchState.selectedOption === index , bookmarked: entry.bookmarkName }"
-          @click="handleOptionClick(index, entry.bookmarkName)"
+          @click="handleOptionClick(index)"
           @mouseenter="searchState.selectedOption = index"
           @mouseleave="searchState.selectedOption = -1"
         >
-          <!-- <font-awesome-icon
-            v-if="!!entry.bookmarkName"
-            :icon="['fas', 'star']"
-          /> -->
           {{ entry.bookmarkName ?? entry }}
+          <font-awesome-icon
+            v-if="entry.bookmarkName"
+            :icon="['fas', 'star']"
+            class="bookmarkStarIcon"
+          />
         </li>
         <!-- skipped -->
       </ul>