From d088f57f60101782d77b098be616bbe869a70417 Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Fri, 23 May 2025 21:37:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E4=BA=A4=E4=BA=92?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/FavoritePathsModal.vue     | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/components/FavoritePathsModal.vue b/packages/frontend/src/components/FavoritePathsModal.vue
index ed762db..a652feb 100644
--- a/packages/frontend/src/components/FavoritePathsModal.vue
+++ b/packages/frontend/src/components/FavoritePathsModal.vue
@@ -150,8 +150,12 @@ const updatePosition = () => {
 
 // --- Click Outside Logic ---
 const handleClickOutside = (event: MouseEvent) => {
+  if (props.triggerElement && props.triggerElement.contains(event.target as Node)) {
+    return;
+  }
+
   if (modalContentRef.value && !modalContentRef.value.contains(event.target as Node)) {
-    if (!showAddEditModal.value) { // Do not close if add/edit modal is open
+    if (!showAddEditModal.value) { 
       closeModal();
     }
   }
@@ -223,7 +227,15 @@ onBeforeUnmount(() => {
 
       <!-- Path List -->
       <div class="overflow-y-auto flex-grow p-1 text-sm">
-        <ul v-if="!favoritePathsStore.isLoading && filteredPaths.length" class="list-none m-0 p-0">
+        <div v-if="favoritePathsStore.isLoading && filteredPaths.length === 0" class="p-3 text-center text-text-secondary">
+          <i class="fas fa-spinner fa-spin mr-1"></i>
+          {{ t('favoritePaths.loading', 'Loading favorites...') }}
+        </div>
+        <div v-else-if="!favoritePathsStore.isLoading && filteredPaths.length === 0" class="p-3 text-center text-text-secondary">
+          <i class="fas fa-star-half-alt mr-1"></i>
+          {{ searchTerm ? t('favoritePaths.noResults', 'No matching favorites found.') : t('favoritePaths.noFavorites', 'No favorite paths yet. Add one!') }}
+        </div>
+        <ul v-else-if="filteredPaths.length > 0" class="list-none m-0 p-0">
           <li
             v-for="favPath in filteredPaths"
             :key="favPath.id"
@@ -255,16 +267,8 @@ onBeforeUnmount(() => {
             </div>
           </li>
         </ul>
-        <div v-else-if="favoritePathsStore.isLoading" class="p-3 text-center text-text-secondary">
-          <i class="fas fa-spinner fa-spin mr-1"></i>
-          {{ t('favoritePaths.loading', 'Loading favorites...') }}
-        </div>
-        <div v-else class="p-3 text-center text-text-secondary">
-          <i class="fas fa-star-half-alt mr-1"></i>
-          {{ searchTerm ? t('favoritePaths.noResults', 'No matching favorites found.') : t('favoritePaths.noFavorites', 'No favorite paths yet. Add one!') }}
-        </div>
       </div>
-    </div> <!-- End of Favorite Paths Dropdown div -->
+    </div>
 
     <!-- Add/Edit Modal -->
     <AddEditFavoritePathForm
@@ -274,10 +278,7 @@ onBeforeUnmount(() => {
       @close="showAddEditModal = false"
       @save-success="() => { favoritePathsStore.fetchFavoritePaths(t); showAddEditModal = false; }"
     />
-  </div> <!-- End of new single root element -->
+  </div> 
 </template>
 
-<style scoped>
-/* Styles are mostly Tailwind. max-h-80 is applied to the main div */
-/* Styling for the add/edit form if it's part of this component's template directly and needs specific scoping */
-</style>
+