instead of entire tool/section being draggable, add permanent handle

client/src/components/Panels/Common/Tool.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { faGripLines } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
 
@@ -43,15 +45,12 @@ function onClick(evt: MouseEvent) {
 
 <template>
     <div class="toolTitle">
+        <div v-if="props.showDragHandle" class="favorite-top-level-drag-target">
+            <FontAwesomeIcon :icon="faGripLines" />
+        </div>
         <a
             v-if="props.tool.disabled"
-            :class="[
-                'title-link',
-                'name',
-                'text-muted',
-                'tool-link',
-                { 'favorite-top-level-drag-target': props.showDragHandle },
-            ]"
+            class="title-link name text-muted tool-link"
             :data-tool-id="props.tool.id"
             :data-description="props.showDragHandle ? 'favorite-top-level-drag-target' : null">
             <span v-if="!props.hideName">{{ props.tool.name }}</span>
@@ -59,12 +58,7 @@ function onClick(evt: MouseEvent) {
         </a>
         <a
             v-else
-            :class="[
-                'title-link',
-                'cursor-pointer',
-                'tool-link',
-                { 'favorite-top-level-drag-target': props.showDragHandle },
-            ]"
+            class="title-link cursor-pointer tool-link"
             :data-tool-id="props.tool.id"
             :data-description="props.showDragHandle ? 'favorite-top-level-drag-target' : null"
             :href="toolLink"
@@ -93,7 +87,7 @@ function onClick(evt: MouseEvent) {
     </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .toolTitle {
     display: flex;
     align-items: center;
@@ -136,8 +130,14 @@ function onClick(evt: MouseEvent) {
 .favorite-top-level-drag-target {
     cursor: grab;
     user-select: none;
-}
-.favorite-top-level-drag-target:active {
-    cursor: grabbing;
+    margin-left: var(--spacing-2);
+    opacity: 0.5;
+
+    &:active {
+        cursor: grabbing;
+    }
+    &:hover {
+        opacity: 1;
+    }
 }
 </style>

client/src/components/Panels/Common/ToolSection.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { faFilter, faSitemap, faStar, faTags } from "@fortawesome/free-solid-svg-icons";
+import { faFilter, faGripLines, faSitemap, faStar, faTags } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useEventBus } from "@vueuse/core";
 import { storeToRefs } from "pinia";
@@ -310,12 +310,11 @@ async function onFavoriteSectionToggle() {
             v-g-tooltip.topright.hover
             class="toolSectionTitle tool-panel-divider"
             :title="props.category.description || undefined">
+            <div v-if="props.showDragHandle" class="favorite-top-level-drag-target">
+                <FontAwesomeIcon :icon="faGripLines" />
+            </div>
             <a
-                :class="[
-                    'title-link',
-                    'tool-panel-divider-link',
-                    { 'favorite-top-level-drag-target': props.showDragHandle },
-                ]"
+                class="title-link tool-panel-divider-link"
                 href="javascript:void(0)"
                 role="button"
                 :aria-expanded="opened"
@@ -475,10 +474,15 @@ async function onFavoriteSectionToggle() {
 .favorite-top-level-drag-target {
     cursor: grab;
     user-select: none;
-}
+    margin-left: var(--spacing-2);
+    opacity: 0.5;
 
-.favorite-top-level-drag-target:active {
-    cursor: grabbing;
+    &:active {
+        cursor: grabbing;
+    }
+    &:hover {
+        opacity: 1;
+    }
 }
 
 .favorite-tag-section .toolSectionTitle:hover .favorite-tag-section-star,