refactor: update tooltip bindings to use translation function and improve dropdown actions

(cherry picked from commit c5a8df19aeafdac60b74cadcf178ee297e9fc9b8)

frontend/components.d.ts

@@ -171,9 +171,6 @@ declare module 'vue' {
     LostReasonModal: typeof import('./src/components/Modals/LostReasonModal.vue')['default']
     LucideCalendar: typeof import('~icons/lucide/calendar')['default']
     LucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
-    LucidePenLine: typeof import('~icons/lucide/pen-line')['default']
-    LucideRefreshCcw: typeof import('~icons/lucide/refresh-ccw')['default']
-    LucideX: typeof import('~icons/lucide/x')['default']
     MarkAsDoneIcon: typeof import('./src/components/Icons/MarkAsDoneIcon.vue')['default']
     MaximizeIcon: typeof import('./src/components/Icons/MaximizeIcon.vue')['default']
     MenuIcon: typeof import('./src/components/Icons/MenuIcon.vue')['default']
@@ -188,7 +185,6 @@ declare module 'vue' {
     MultiSelectEmailInput: typeof import('./src/components/Controls/MultiSelectEmailInput.vue')['default']
     MultiSelectUserInput: typeof import('./src/components/Controls/MultiSelectUserInput.vue')['default']
     MuteIcon: typeof import('./src/components/Icons/MuteIcon.vue')['default']
-    NestedPopover: typeof import('./src/components/NestedPopover.vue')['default']
     NewEmailTemplate: typeof import('./src/components/Settings/EmailTemplate/NewEmailTemplate.vue')['default']
     NoteArea: typeof import('./src/components/Activities/NoteArea.vue')['default']
     NoteIcon: typeof import('./src/components/Icons/NoteIcon.vue')['default']

frontend/src/components/AssignToBody.vue

@@ -72,7 +72,7 @@ import UserAvatar from '@/components/UserAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
 import { usersStore } from '@/stores/users'
 import { capture } from '@/telemetry'
-import { Tooltip, Switch, toast, createResource } from 'frappe-ui'
+import { Tooltip, Switch, createResource } from 'frappe-ui'
 import { ref, watch } from 'vue'
 
 const props = defineProps({

frontend/src/components/DropdownItem.vue

@@ -24,7 +24,7 @@
         />
         <Button
           v-if="!isNew && !option.selected"
-          tooltip="Set As Primary"
+          :tooltip="__('Set As Primary')"
           variant="ghost"
           :icon="SuccessIcon"
           class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
@@ -32,14 +32,14 @@
         />
         <Button
           v-if="!editMode"
-          tooltip="Edit"
+          :tooltip="__('Edit')"
           variant="ghost"
           :icon="EditIcon"
           class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
           @click="toggleEditMode"
         />
         <Button
-          tooltip="Delete"
+          :tooltip="__('Delete')"
           variant="ghost"
           icon="x"
           class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"

frontend/src/components/Modals/ViewModal.vue

@@ -7,17 +7,6 @@
         : duplicateMode
           ? __('Duplicate View')
           : __('Create View'),
-      actions: [
-        {
-          label: editMode
-            ? __('Save Changes')
-            : duplicateMode
-              ? __('Duplicate')
-              : __('Create'),
-          variant: 'solid',
-          onClick: () => (editMode ? update() : create()),
-        },
-      ],
     }"
   >
     <template #body-content>
@@ -42,6 +31,21 @@
         />
       </div>
     </template>
+    <template #actions>
+      <div class="flex justify-end">
+        <Button
+          variant="solid"
+          :label="
+            editMode
+              ? __('Save Changes')
+              : duplicateMode
+                ? __('Duplicate')
+                : __('Create')
+          "
+          @click="() => (editMode ? update() : create())"
+        />
+      </div>
+    </template>
   </Dialog>
 </template>
 

frontend/src/components/ViewBreadcrumbs.vue

@@ -18,7 +18,10 @@
     >
       /
     </span>
-    <Dropdown v-if="viewControls" :options="viewControls.viewsDropdownOptions">
+    <Dropdown
+      v-if="viewControls"
+      :options="viewControls.viewsDropdownOptions"
+    >
       <template #default="{ open }">
         <Button
           variant="ghost"
@@ -31,10 +34,9 @@
           </template>
         </Button>
       </template>
-      <template #item="{ item, active }">
+      <template #item="{ item, close }">
         <button
-          class="group flex text-ink-gray-6 gap-4 h-7 w-full justify-between items-center rounded px-2 text-base"
+          class="group flex text-ink-gray-6 gap-4 h-7 w-full justify-between items-center rounded px-2 text-base hover:bg-surface-gray-3"
-          :class="{ 'bg-surface-gray-3': active }"
           @click="item.onClick"
         >
           <div class="flex items-center">
@@ -58,16 +60,15 @@
             class="flex flex-row-reverse gap-2 items-center min-w-11"
           >
             <Dropdown
-              :class="active ? 'block' : 'hidden'"
               placement="right-start"
-              :options="viewControls.viewActions(item)"
+              :options="viewControls.viewActions(item, close)"
             >
-              <template #default="{ togglePopover }">
+              <template #default>
                 <Button
                   variant="ghost"
-                  class="!size-5"
+                  class="!size-5 hidden group-hover:block"
                   icon="more-horizontal"
-                  @click.stop="togglePopover()"
+                  @click.stop
                 />
               </template>
             </Dropdown>
@@ -84,7 +85,7 @@
 </template>
 <script setup>
 import Icon from '@/components/Icon.vue'
-import Dropdown from '@/components/frappe-ui/Dropdown.vue'
+import { Dropdown } from 'frappe-ui'
 
 const props = defineProps({
   routeName: {

frontend/src/components/ViewControls.vue

@@ -22,7 +22,12 @@
         </div>
 
         <div class="flex gap-2">
-          <Button :icon="RefreshIcon" :loading="isLoading" @click="reload()" />
+          <Button
+            :tooltip="__('Refresh')"
+            :icon="RefreshIcon"
+            :loading="isLoading"
+            @click="reload()"
+          />
           <SortBy
             v-if="route.params.viewType !== 'kanban'"
             v-model="list"
@@ -147,7 +152,7 @@
       </div>
       <div class="flex items-center gap-2">
         <Button
-          tooltip="Refresh"
+          :tooltip="__('Refresh')"
           :icon="RefreshIcon"
           :loading="isLoading"
           @click="reload()"
@@ -184,6 +189,7 @@
         />
         <Dropdown
           v-if="route.params.viewType !== 'kanban' || isManager()"
+          placement="right"
           :options="[
             {
               group: __('Options'),
@@ -208,7 +214,7 @@
           ]"
         >
           <template #default>
-            <Button tooltip="More Options" icon="more-horizontal" />
+            <Button :tooltip="__('More Options')" icon="more-horizontal" />
           </template>
         </Dropdown>
       </div>
@@ -1078,7 +1084,7 @@ function updatePageLength(value, loadMore = false) {
 }
 
 // View Actions
-const viewActions = (view) => {
+const viewActions = (view, close) => {
   let isStandard = typeof view.name === 'string'
   let _view = getView(view.name)
 
@@ -1102,7 +1108,7 @@ const viewActions = (view) => {
         {
           label: __('Duplicate'),
           icon: () => h(DuplicateIcon, { class: 'h-4 w-4' }),
-          onClick: () => duplicateView(_view),
+          onClick: () => duplicateView(_view, close),
         },
       ],
     },
@@ -1120,7 +1126,7 @@ const viewActions = (view) => {
     actions[0].items.push({
       label: __('Edit'),
       icon: () => h(EditIcon, { class: 'h-4 w-4' }),
-      onClick: () => editView(_view),
+      onClick: () => editView(_view, close),
     })
 
     if (!_view.public) {
@@ -1203,17 +1209,19 @@ function setAsDefault(v) {
   })
 }
 
-function duplicateView(v) {
+function duplicateView(v, close) {
   v.label = v.label + __(' (New)')
   viewModalObj.value = v
   viewModalObj.value.mode = 'duplicate'
   showViewModal.value = true
+  close()
 }
 
-function editView(v) {
+function editView(v, close) {
   viewModalObj.value = v
   viewModalObj.value.mode = 'edit'
   showViewModal.value = true
+  close()
 }
 
 function publicView(v) {