✨ Shows icon on hover for items with hotkey bound

src/components/LinkItems/Item.vue

@@ -20,8 +20,9 @@
       <Icon :icon="icon" :url="url" :size="itemSize" :color="color"
         v-bind:style="customStyles" class="bounce" />
       <!-- Small icon, showing opening method on hover -->
-      <ItemOpenMethodIcon class="opening-method-icon" :isSmall="!icon" :openingMethod="target"
-        :position="itemSize === 'medium'? 'bottom right' : 'top right'"/>
+      <ItemOpenMethodIcon class="opening-method-icon" :isSmall="!icon || itemSize === 'small'"
+        :openingMethod="target"  :position="itemSize === 'medium'? 'bottom right' : 'top right'"
+        :hotkey="hotkey" />
       <!-- Status indicator dot (if enabled) showing weather srevice is availible -->
       <StatusIndicator
         class="status-indicator"
@@ -60,6 +61,7 @@ export default {
     color: String, // Optional text and icon color, specified in hex code
     backgroundColor: String, // Optional item background color
     url: String, // URL to the resource, optional but recommended
+    hotkey: Number, // Shortcut for quickly launching app
     target: { // Where resource will open, either 'newtab', 'sametab' or 'modal'
       type: String,
       default: 'newtab',
@@ -119,9 +121,10 @@ export default {
     },
     /* Returns configuration object for the tooltip */
     getTooltipOptions() {
+      const hotkeyText = this.hotkey ? `\nPress '${this.hotkey}' to launch` : '';
       return {
         disabled: !this.description,
-        content: this.description,
+        content: this.description + hotkeyText,
         trigger: 'hover focus',
         hideOnTargetClick: true,
         html: false,

src/components/LinkItems/ItemOpenMethodIcon.vue

@@ -1,9 +1,14 @@
 <template>
-  <div :class="makeClass(position, isSmall, isTransparent)">
-    <NewTabOpenIcon v-if="openingMethod === 'newtab'" />
-    <SameTabOpenIcon v-else-if="openingMethod === 'sametab'" />
-    <IframeOpenIcon v-else-if="openingMethod === 'modal'" />
-    <WorkspaceOpenIcon v-else-if="openingMethod === 'workspace'" />
+  <div>
+    <div :class="makeClass(position, isSmall, isTransparent)">
+      <NewTabOpenIcon v-if="openingMethod === 'newtab'" />
+      <SameTabOpenIcon v-else-if="openingMethod === 'sametab'" />
+      <IframeOpenIcon v-else-if="openingMethod === 'modal'" />
+      <WorkspaceOpenIcon v-else-if="openingMethod === 'workspace'" />
+    </div>
+    <div v-if="hotkey" :class="`hotkey-denominator ${makeClass(position, isSmall, isTransparent)}`">
+      {{ hotkey }}
+    </div>
   </div>
 </template>
 
@@ -23,6 +28,7 @@ export default {
     isSmall: Boolean, // If true, will apply small class
     position: String, // Position classes: top, bottom, left, right
     isTransparent: Boolean, // If true, will apply opacity
+    hotkey: Number, // Optional hotkey to also display
   },
   methods: {
     /* Returns custom class string, from optional props */
@@ -49,7 +55,6 @@ export default {
     width: 1rem;
     margin: 2px;
     path {
-      // fill: var(--primary);
       fill: currentColor;
     }
   }
@@ -68,4 +73,17 @@ export default {
   }
 }
 
+div.hotkey-denominator {
+  position: absolute;
+  font-size: 0.8rem;
+  margin: 2px;
+  bottom: 2px;
+  color: currentColor;
+  border-radius: 18px;
+  border: 1px solid currentColor;
+  padding: 0.1rem 0.4rem 0.2rem 0.4rem;
+  &.top { right: 0; } // Position opposite of opening method icon
+  &.bottom { left: 0; }
+}
+
 </style>