From f87dde04f8f1ead21eba747c0bcb723e6f15625d Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Tue, 3 Feb 2026 21:27:48 +0900
Subject: [PATCH] improve Breadcrumb navigation with back button and tooltips

---
 .../dialogs/MainDialogContainer.vue           | 92 +++++++++++++------
 .../components/FriendsLocationsCard.vue       |  2 +-
 2 files changed, 66 insertions(+), 28 deletions(-)

diff --git a/src/components/dialogs/MainDialogContainer.vue b/src/components/dialogs/MainDialogContainer.vue
index 1951013c..cb9cc3ae 100644
--- a/src/components/dialogs/MainDialogContainer.vue
+++ b/src/components/dialogs/MainDialogContainer.vue
@@ -16,6 +16,9 @@
         DropdownMenuTrigger
     } from '@/components/ui/dropdown-menu';
     import { Dialog, DialogContent } from '@/components/ui/dialog';
+    import { ArrowLeft } from 'lucide-vue-next';
+    import { Button } from '@/components/ui/button';
+    import { TooltipWrapper } from '@/components/ui/tooltip';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
 
@@ -130,6 +133,13 @@
         }
         return dialogCrumbs.value.slice(1, -2);
     });
+    const backCrumbLabel = computed(() => {
+        if (dialogCrumbs.value.length < 2) {
+            return '';
+        }
+        const backCrumb = dialogCrumbs.value[dialogCrumbs.value.length - 2];
+        return backCrumb?.label || backCrumb?.id || '';
+    });
 
     function handleBreadcrumbClick(index) {
         uiStore.handleBreadcrumbClick(index);
@@ -141,16 +151,28 @@
         <DialogContent :class="dialogClass" style="top: 10vh" :show-close-button="false">
             <Breadcrumb v-if="shouldShowBreadcrumbs" class="mb-2">
                 <BreadcrumbList>
+                    <TooltipWrapper :content="backCrumbLabel" :disabled="!backCrumbLabel" :delayDuration="500">
+                        <Button variant="ghost" size="icon-sm" @click="handleBreadcrumbClick(dialogCrumbs.length - 2)">
+                            <ArrowLeft />
+                            <span class="sr-only">{{ backCrumbLabel }}</span>
+                        </Button>
+                    </TooltipWrapper>
                     <template v-if="shouldCollapseBreadcrumbs">
                         <BreadcrumbItem>
-                            <BreadcrumbLink as-child>
-                                <button
-                                    type="button"
-                                    class="max-w-40 truncate text-left"
-                                    @click="handleBreadcrumbClick(0)">
-                                    {{ dialogCrumbs[0]?.label || dialogCrumbs[0]?.id }}
-                                </button>
-                            </BreadcrumbLink>
+                            <TooltipWrapper
+                                :content="dialogCrumbs[0]?.label || dialogCrumbs[0]?.id"
+                                :delayDuration="500">
+                                <BreadcrumbLink as-child>
+                                    <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="sm"
+                                        class="max-w-40 justify-start truncate text-left"
+                                        @click="handleBreadcrumbClick(0)">
+                                        {{ dialogCrumbs[0]?.label || dialogCrumbs[0]?.id }}
+                                    </Button>
+                                </BreadcrumbLink>
+                            </TooltipWrapper>
                         </BreadcrumbItem>
                         <BreadcrumbSeparator />
                         <BreadcrumbItem>
@@ -170,17 +192,26 @@
                         </BreadcrumbItem>
                         <BreadcrumbSeparator />
                         <BreadcrumbItem>
-                            <BreadcrumbLink as-child>
-                                <button
-                                    type="button"
-                                    class="max-w-40 truncate text-left"
-                                    @click="handleBreadcrumbClick(dialogCrumbs.length - 2)">
-                                    {{
-                                        dialogCrumbs[dialogCrumbs.length - 2]?.label ||
-                                        dialogCrumbs[dialogCrumbs.length - 2]?.id
-                                    }}
-                                </button>
-                            </BreadcrumbLink>
+                            <TooltipWrapper
+                                :content="
+                                    dialogCrumbs[dialogCrumbs.length - 2]?.label ||
+                                    dialogCrumbs[dialogCrumbs.length - 2]?.id
+                                "
+                                :delayDuration="500">
+                                <BreadcrumbLink as-child>
+                                    <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="sm"
+                                        class="max-w-40 justify-start truncate text-left"
+                                        @click="handleBreadcrumbClick(dialogCrumbs.length - 2)">
+                                        {{
+                                            dialogCrumbs[dialogCrumbs.length - 2]?.label ||
+                                            dialogCrumbs[dialogCrumbs.length - 2]?.id
+                                        }}
+                                    </Button>
+                                </BreadcrumbLink>
+                            </TooltipWrapper>
                         </BreadcrumbItem>
                         <BreadcrumbSeparator />
                         <BreadcrumbItem>
@@ -195,14 +226,21 @@
                     <template v-else>
                         <template v-for="(crumb, index) in dialogCrumbs" :key="`${crumb.type}-${crumb.id}`">
                             <BreadcrumbItem>
-                                <BreadcrumbLink v-if="index < dialogCrumbs.length - 1" as-child>
-                                    <button
-                                        type="button"
-                                        class="max-w-40 truncate text-left"
-                                        @click="handleBreadcrumbClick(index)">
-                                        {{ crumb.label || crumb.id }}
-                                    </button>
-                                </BreadcrumbLink>
+                                <TooltipWrapper
+                                    v-if="index < dialogCrumbs.length - 1"
+                                    :content="crumb.label || crumb.id"
+                                    :delayDuration="500">
+                                    <BreadcrumbLink as-child>
+                                        <Button
+                                            type="button"
+                                            variant="ghost"
+                                            size="sm"
+                                            class="max-w-40 justify-start truncate text-left"
+                                            @click="handleBreadcrumbClick(index)">
+                                            {{ crumb.label || crumb.id }}
+                                        </Button>
+                                    </BreadcrumbLink>
+                                </TooltipWrapper>
                                 <BreadcrumbPage v-else class="max-w-40 truncate">
                                     {{ crumb.label || crumb.id }}
                                 </BreadcrumbPage>
diff --git a/src/views/FriendsLocations/components/FriendsLocationsCard.vue b/src/views/FriendsLocations/components/FriendsLocationsCard.vue
index 68f1cce3..5fea1e18 100644
--- a/src/views/FriendsLocations/components/FriendsLocationsCard.vue
+++ b/src/views/FriendsLocations/components/FriendsLocationsCard.vue
@@ -11,7 +11,7 @@
             <div class="friend-card__name ml-0.5" :title="friend.name">{{ friend.name }}</div>
         </div>
         <div class="friend-card__body">
-            <div class="friend-card__signature" :title="friend.ref?.statusDescription">
+            <div class="friend-card__signature ml-1" :title="friend.ref?.statusDescription">
                 <Pencil v-if="friend.ref?.statusDescription" class="h-3.5 w-3.5 mr-1" style="opacity: 0.7" />
                 {{ friend.ref?.statusDescription || '&nbsp;' }}
             </div>