widgets: Highlight a mini-widget or it's edit-menu entry by hovering …

…one of them

src/assets/defaults.ts

@@ -15,6 +15,7 @@ const defaultWidgetManagerVars = {
 const defaultMiniWidgetManagerVars = {
   timesMounted: 0,
   configMenuOpen: false,
+  highlighted: false,
 }
 
 const hostname = window.location.hostname

src/components/EditMenu.vue

@@ -165,7 +165,10 @@
             <div
               v-for="widget in miniWidgetContainer.widgets"
               :key="widget.hash"
-              class="flex items-center justify-between w-full h-10 my-1"
+              class="flex items-center justify-between w-full h-10 px-2 py-1 my-1 rounded-md"
+              :class="{ 'bg-slate-400': widget.managerVars.highlighted }"
+              @mouseover="widget.managerVars.highlighted = true"
+              @mouseleave="widget.managerVars.highlighted = false"
             >
               <div class="flex items-center justify-start w-full overflow-auto">
                 <p class="overflow-hidden select-none text-ellipsis whitespace-nowrap">
@@ -313,6 +316,7 @@ const availableMiniWidgetTypes = computed(() =>
     managerVars: {
       timesMounted: 0,
       configMenuOpen: false,
+      highlighted: false,
     },
   }))
 )

src/components/MiniWidgetContainer.vue

@@ -17,7 +17,9 @@
         v-for="miniWidget in container.widgets"
         :key="miniWidget.hash"
         class="rounded-md"
-        :class="{ 'cursor-grab': allowEditing, 'hover:bg-slate-400': allowEditing && !mousePressed }"
+        :class="{ 'cursor-grab': allowEditing, 'bg-slate-400': miniWidget.managerVars.highlighted }"
+        @mouseover="miniWidget.managerVars.highlighted = true"
+        @mouseleave="miniWidget.managerVars.highlighted = false"
       >
         <div :class="{ 'select-none pointer-events-none': allowEditing }">
           <MiniWidgetInstantiator :mini-widget="miniWidget" />
@@ -57,7 +59,6 @@
 </template>
 
 <script setup lang="ts">
-import { useMousePressed } from '@vueuse/core'
 import { v4 as uuid } from 'uuid'
 import { ref, toRefs } from 'vue'
 import { computed } from 'vue'
@@ -114,6 +115,4 @@ const refreshWidgetsHashs = (): void => {
 const showWidgetTrashArea = ref(false)
 
 const trashList = ref<MiniWidget[]>([])
-
-const { pressed: mousePressed } = useMousePressed()
 </script>

src/types/miniWidgets.ts

@@ -47,6 +47,10 @@ export type MiniWidget = {
      * If the configuration menu is open or not
      */
     configMenuOpen: boolean
+    /**
+     * Wether the mini-widget should be highlited or not
+     */
+    highlighted: boolean
   }
 }