From ef71b896e401bb0421a4f0bf2925e646fdf84186 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 18 May 2026 20:18:05 -0500
Subject: [PATCH] instead of entire tool/section being draggable, add permanent
 handle

---
 client/src/components/Panels/Common/Tool.vue  | 34 +++++++++----------
 .../components/Panels/Common/ToolSection.vue  | 22 +++++++-----
 2 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/client/src/components/Panels/Common/Tool.vue b/client/src/components/Panels/Common/Tool.vue
index 114cae80fbb..59f725585eb 100644
--- a/client/src/components/Panels/Common/Tool.vue
+++ b/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>
diff --git a/client/src/components/Panels/Common/ToolSection.vue b/client/src/components/Panels/Common/ToolSection.vue
index f1c310376e0..1accdc87cc0 100644
--- a/client/src/components/Panels/Common/ToolSection.vue
+++ b/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,