fix: extracted out view breadcrumb which contain view selector

frontend/src/components/ViewBreadcrumbs.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="flex items-center">
+    <router-link
+      :to="{ name: routeName }"
+      class="px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-600 hover:text-gray-700"
+    >
+      {{ __(routeName) }}
+    </router-link>
+    <span class="mx-0.5 text-base text-gray-500" aria-hidden="true"> / </span>
+    <Dropdown v-if="viewControls" :options="viewControls.viewsDropdownOptions">
+      <template #default="{ open }">
+        <Button
+          variant="ghost"
+          class="text-lg font-medium"
+          :label="__(viewControls.currentView.label)"
+        >
+          <template #prefix>
+            <Icon :icon="viewControls.currentView.icon" class="h-4" />
+          </template>
+          <template #suffix>
+            <FeatherIcon
+              :name="open ? 'chevron-up' : 'chevron-down'"
+              class="h-4 text-gray-800"
+            />
+          </template>
+        </Button>
+      </template>
+    </Dropdown>
+    <Dropdown :options="viewControls.viewActions">
+      <template #default>
+        <Button variant="ghost" icon="more-horizontal" />
+      </template>
+    </Dropdown>
+  </div>
+</template>
+<script setup>
+import Icon from '@/components/Icon.vue'
+import { Dropdown } from 'frappe-ui'
+
+const props = defineProps({
+  routeName: {
+    type: String,
+    required: true,
+  },
+})
+
+const viewControls = defineModel()
+</script>

frontend/src/components/ViewControls.vue

@@ -59,11 +59,6 @@
     </div>
   </div>
   <div v-else class="flex items-center justify-between gap-2 px-5 py-4">
-    <!-- <Dropdown :options="viewActions">
-        <template #default>
-          <Button icon="more-horizontal" />
-        </template>
-      </Dropdown> -->
     <FadedScrollableDiv
       class="flex flex-1 items-center overflow-x-auto -ml-1"
       orientation="horizontal"
@@ -1085,6 +1080,7 @@ defineExpose({
   likeDoc,
   updateKanbanSettings,
   loadMoreKanban,
+  viewActions,
   viewsDropdownOptions,
   currentView,
 })

frontend/src/pages/Leads.vue

@@ -1,39 +1,7 @@
 <template>
   <LayoutHeader>
     <template #left-header>
-      <div class="flex items-center">
+      <ViewBreadcrumbs v-model="viewControls" routeName="Leads" />
-        <router-link
-          :to="{ name: 'Leads' }"
-          class="px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-600 hover:text-gray-700"
-        >
-          {{ __('Leads') }}
-        </router-link>
-        <span class="mx-0.5 text-base text-gray-500" aria-hidden="true">
-          /
-        </span>
-        <Dropdown
-          v-if="viewControls"
-          :options="viewControls.viewsDropdownOptions"
-        >
-          <template #default="{ open }">
-            <Button
-              variant="ghost"
-              class="text-lg font-medium"
-              :label="__(viewControls.currentView.label)"
-            >
-              <template #prefix>
-                <Icon :icon="viewControls.currentView.icon" class="h-4" />
-              </template>
-              <template #suffix>
-                <FeatherIcon
-                  :name="open ? 'chevron-up' : 'chevron-down'"
-                  class="h-4 text-gray-800"
-                />
-              </template>
-            </Button>
-          </template>
-        </Dropdown>
-      </div>
     </template>
     <template #right-header>
       <CustomActions
@@ -317,7 +285,7 @@
 </template>
 
 <script setup>
-import Icon from '@/components/Icon.vue'
+import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
 import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import CustomActions from '@/components/CustomActions.vue'
 import EmailAtIcon from '@/components/Icons/EmailAtIcon.vue'