feat: tooltips to icon side

refactor: remove unncessary extra i18n keys instead use reusable 'globals.terms.*' keys.
This commit is contained in:
Abhinav Raut
2025-05-31 20:11:47 +05:30
parent d9bc4d1c0d
commit 5c8481af97
5 changed files with 108 additions and 101 deletions

View File

@@ -8,38 +8,64 @@
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton asChild :isActive="route.path.startsWith('/inboxes')">
<router-link :to="{ name: 'inboxes' }">
<Inbox />
</router-link>
</SidebarMenuButton>
<Tooltip>
<TooltipTrigger as-child>
<SidebarMenuButton asChild :isActive="route.path.startsWith('/inboxes')">
<router-link :to="{ name: 'inboxes' }">
<Inbox />
</router-link>
</SidebarMenuButton>
</TooltipTrigger>
<TooltipContent side="right">
<p>{{ t('globals.terms.inbox', 2) }}</p>
</TooltipContent>
</Tooltip>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton
asChild
:isActive="route.path.startsWith('/contacts')"
v-if="userStore.can('contacts:read_all')"
>
<router-link :to="{ name: 'contacts' }">
<BookUser />
</router-link>
</SidebarMenuButton>
<SidebarMenuItem v-if="userStore.can('contacts:read_all')">
<Tooltip>
<TooltipTrigger as-child>
<SidebarMenuButton asChild :isActive="route.path.startsWith('/contacts')">
<router-link :to="{ name: 'contacts' }">
<BookUser />
</router-link>
</SidebarMenuButton>
</TooltipTrigger>
<TooltipContent side="right">
<p>{{ t('globals.terms.contact', 2) }}</p>
</TooltipContent>
</Tooltip>
</SidebarMenuItem>
<SidebarMenuItem v-if="userStore.hasReportTabPermissions">
<SidebarMenuButton asChild :isActive="route.path.startsWith('/reports')">
<router-link :to="{ name: 'reports' }">
<FileLineChart />
</router-link>
</SidebarMenuButton>
<Tooltip>
<TooltipTrigger as-child>
<SidebarMenuButton asChild :isActive="route.path.startsWith('/reports')">
<router-link :to="{ name: 'reports' }">
<FileLineChart />
</router-link>
</SidebarMenuButton>
</TooltipTrigger>
<TooltipContent side="right">
<p>{{ t('globals.terms.report', 2) }}</p>
</TooltipContent>
</Tooltip>
</SidebarMenuItem>
<SidebarMenuItem v-if="userStore.hasAdminTabPermissions">
<SidebarMenuButton asChild :isActive="route.path.startsWith('/admin')">
<router-link
:to="{ name: userStore.can('general_settings:manage') ? 'general' : 'admin' }"
>
<Shield />
</router-link>
</SidebarMenuButton>
<Tooltip>
<TooltipTrigger as-child>
<SidebarMenuButton asChild :isActive="route.path.startsWith('/admin')">
<router-link
:to="{
name: userStore.can('general_settings:manage') ? 'general' : 'admin'
}"
>
<Shield />
</router-link>
</SidebarMenuButton>
</TooltipTrigger>
<TooltipContent side="right">
<p>{{ t('globals.terms.admin') }}</p>
</TooltipContent>
</Tooltip>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
@@ -122,6 +148,7 @@ import {
SidebarMenuItem,
SidebarProvider
} from '@/components/ui/sidebar'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import SidebarNavUser from '@/components/sidebar/SidebarNavUser.vue'
const route = useRoute()

View File

@@ -30,7 +30,7 @@ import {
Search,
Plus,
CircleDashed,
List,
List
} from 'lucide-vue-next'
import {
DropdownMenu,
@@ -111,7 +111,11 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
<SidebarMenuItem v-for="item in filteredContactsNavItems" :key="item.titleKey">
<SidebarMenuButton :isActive="isActiveParent(item.href)" asChild>
<router-link :to="item.href">
<span>{{ t(item.titleKey) }}</span>
<span>{{
t('globals.messages.all', {
name: t(item.titleKey, 2).toLowerCase()
})
}}</span>
</router-link>
</SidebarMenuButton>
</SidebarMenuItem>
@@ -135,7 +139,7 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
<SidebarMenuItem>
<div class="px-1">
<span class="font-semibold text-xl">
{{ t('navigation.reports') }}
{{ t('globals.terms.report', 2) }}
</span>
</div>
</SidebarMenuItem>
@@ -166,7 +170,7 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
<SidebarMenuItem>
<div class="flex flex-col items-start justify-between w-full px-1">
<span class="font-semibold text-xl">
{{ t('navigation.admin') }}
{{ t('globals.terms.admin') }}
</span>
<!-- App version -->
<div class="text-xs text-muted-foreground">
@@ -231,7 +235,7 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
<SidebarMenuItem>
<div class="px-1">
<span class="font-semibold text-xl">
{{ t('navigation.account') }}
{{ t('globals.terms.account') }}
</span>
</div>
</SidebarMenuItem>
@@ -265,7 +269,7 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
<SidebarMenuItem>
<div class="flex items-center justify-between w-full px-1">
<div class="font-semibold text-xl">
<span>{{ t('navigation.inbox') }}</span>
<span>{{ t('globals.terms.inbox') }}</span>
</div>
<div class="mr-1 mt-1 hover:scale-110 transition-transform">
<router-link :to="{ name: 'search' }">
@@ -298,7 +302,7 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
<SidebarMenuButton asChild :isActive="isActiveParent('/inboxes/assigned')">
<router-link :to="{ name: 'inbox', params: { type: 'assigned' } }">
<User />
<span>{{ t('navigation.myInbox') }}</span>
<span>{{ t('globals.terms.myInbox') }}</span>
</router-link>
</SidebarMenuButton>
</SidebarMenuItem>
@@ -308,7 +312,7 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
<router-link :to="{ name: 'inbox', params: { type: 'unassigned' } }">
<CircleDashed />
<span>
{{ t('navigation.unassigned') }}
{{ t('globals.terms.unassigned') }}
</span>
</router-link>
</SidebarMenuButton>
@@ -338,7 +342,7 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
<router-link to="#">
<!-- <Users /> -->
<span>
{{ t('navigation.teamInboxes') }}
{{ t('globals.terms.teamInbox', 2) }}
</span>
<ChevronRight
class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
@@ -372,7 +376,7 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
<router-link to="#" class="group/item !p-2">
<!-- <SlidersHorizontal /> -->
<span>
{{ t('navigation.views') }}
{{ t('globals.terms.view', 2) }}
</span>
<div>
<Plus

View File

@@ -96,7 +96,7 @@
<DropdownMenuGroup>
<DropdownMenuItem @click.prevent="router.push({ name: 'account' })">
<CircleUserRound size="18" class="mr-2" />
{{ t('navigation.account') }}
{{ t('globals.terms.account') }}
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />

View File

@@ -1,6 +1,6 @@
export const reportsNavItems = [
{
titleKey: 'navigation.overview',
titleKey: 'globals.terms.overview',
href: '/reports/overview',
permission: 'reports:manage'
}
@@ -8,125 +8,125 @@ export const reportsNavItems = [
export const adminNavItems = [
{
titleKey: 'navigation.workspace',
titleKey: 'globals.terms.workspace',
children: [
{
titleKey: 'navigation.generalSettings',
titleKey: 'globals.terms.general',
href: '/admin/general',
permission: 'general_settings:manage'
},
{
titleKey: 'navigation.businessHours',
titleKey: 'globals.terms.businessHour',
href: '/admin/business-hours',
permission: 'business_hours:manage'
},
{
titleKey: 'navigation.slaPolicies',
titleKey: 'globals.terms.slaPolicy',
href: '/admin/sla',
permission: 'sla:manage'
}
]
},
{
titleKey: 'navigation.conversations',
titleKey: 'globals.terms.conversation',
children: [
{
titleKey: 'navigation.tags',
titleKey: 'globals.terms.tag',
href: '/admin/conversations/tags',
permission: 'tags:manage'
},
{
titleKey: 'navigation.macros',
titleKey: 'globals.terms.macro',
href: '/admin/conversations/macros',
permission: 'macros:manage'
},
{
titleKey: 'navigation.statuses',
titleKey: 'globals.terms.status',
href: '/admin/conversations/statuses',
permission: 'status:manage'
}
]
},
{
titleKey: 'navigation.inboxes',
titleKey: 'globals.terms.inbox',
children: [
{
titleKey: 'navigation.inboxes',
titleKey: 'globals.terms.inbox',
href: '/admin/inboxes',
permission: 'inboxes:manage'
}
]
},
{
titleKey: 'navigation.teammates',
titleKey: 'globals.terms.teammate',
children: [
{
titleKey: 'navigation.agents',
titleKey: 'globals.terms.agent',
href: '/admin/teams/agents',
permission: 'users:manage'
},
{
titleKey: 'navigation.teams',
titleKey: 'globals.terms.team',
href: '/admin/teams/teams',
permission: 'teams:manage'
},
{
titleKey: 'navigation.roles',
titleKey: 'globals.terms.role',
href: '/admin/teams/roles',
permission: 'roles:manage'
},
{
titleKey: 'navigation.activityLog',
titleKey: 'globals.terms.activityLog',
href: '/admin/teams/activity-log',
permission: 'activity_logs:manage'
}
]
},
{
titleKey: 'navigation.automations',
titleKey: 'globals.terms.automation',
children: [
{
titleKey: 'navigation.automations',
titleKey: 'globals.terms.automation',
href: '/admin/automations',
permission: 'automations:manage'
}
]
},
{
titleKey: 'navigation.customAttributes',
titleKey: 'globals.terms.customAttribute',
children: [
{
titleKey: 'navigation.customAttributes',
titleKey: 'globals.terms.customAttribute',
href: '/admin/custom-attributes',
permission: 'custom_attributes:manage'
}
]
},
{
titleKey: 'navigation.notifications',
titleKey: 'globals.terms.notification',
children: [
{
titleKey: 'navigation.email',
titleKey: 'globals.terms.email',
href: '/admin/notification',
permission: 'notification_settings:manage'
}
]
},
{
titleKey: 'navigation.templates',
titleKey: 'globals.terms.template',
children: [
{
titleKey: 'navigation.templates',
titleKey: 'globals.terms.template',
href: '/admin/templates',
permission: 'templates:manage'
}
]
},
{
titleKey: 'navigation.security',
titleKey: 'globals.terms.security',
children: [
{
titleKey: 'navigation.sso',
titleKey: 'globals.terms.sso',
href: '/admin/sso',
permission: 'oidc:manage'
}
@@ -136,7 +136,7 @@ export const adminNavItems = [
export const accountNavItems = [
{
titleKey: 'navigation.profile',
titleKey: 'globals.terms.profile',
href: '/account/profile',
description: 'Update your profile'
}
@@ -144,7 +144,7 @@ export const accountNavItems = [
export const contactNavItems = [
{
titleKey: 'navigation.allContacts',
titleKey: 'globals.terms.contact',
href: '/contacts',
}
]

View File

@@ -84,6 +84,15 @@
"globals.terms.alert": "Alert | Alerts",
"globals.terms.duration": "Duration | Durations",
"globals.terms.slaMetric": "SLA Metric | SLA Metrics",
"globals.terms.report": "Report | Reports",
"globals.terms.overview": "Overview | Overviews",
"globals.terms.workspace": "Workspace | Workspaces",
"globals.terms.general": "General",
"globals.terms.teammate": "Teammate | Teammates",
"globals.terms.notification": "Notification | Notifications",
"globals.terms.security": "Security | Security",
"globals.terms.myInbox": "My Inbox | My Inboxes",
"globals.terms.teamInbox": "Team Inbox | Team Inboxes",
"globals.messages.golangDurationHoursMinutes": "Duration in hours or minutes. Example: 1h, 30m, 1h30m",
"globals.messages.badRequest": "Bad request",
"globals.messages.adjustFilters": "Try adjusting filters",
@@ -223,43 +232,10 @@
"auth.passwordRequired": "Password is required.",
"auth.passwordsDoNotMatch": "Passwords do not match.",
"auth.passwordSetSuccess": "You can now login with your new password.",
"navigation.overview": "Overview",
"navigation.workspace": "Workspace",
"navigation.generalSettings": "General",
"navigation.businessHours": "Business Hours",
"navigation.slaPolicies": "SLA Policies",
"navigation.conversations": "Conversations",
"navigation.tags": "Tags",
"navigation.macros": "Macros",
"navigation.statuses": "Statuses",
"navigation.inboxes": "Inboxes",
"navigation.teammates": "Teammates",
"navigation.users": "Users",
"navigation.agents": "Agents",
"navigation.teams": "Teams",
"navigation.roles": "Roles",
"navigation.automations": "Automations",
"navigation.notifications": "Notifications",
"navigation.email": "Email",
"navigation.templates": "Templates",
"navigation.security": "Security",
"navigation.sso": "SSO",
"navigation.profile": "Profile",
"navigation.account": "Account",
"navigation.reassignReplies": "Reassign replies",
"navigation.darkMode": "Dark Mode",
"navigation.away": "Away",
"navigation.logout": "Logout",
"navigation.reports": "Reports",
"navigation.admin": "Admin",
"navigation.inbox": "Inbox",
"navigation.myInbox": "My Inbox",
"navigation.unassigned": "Unassigned",
"navigation.teamInboxes": "Team Inboxes",
"navigation.views": "Views",
"navigation.reassignReplies": "Reassign replies",
"navigation.allContacts": "All Contacts",
"navigation.customAttributes": "Custom Attributes",
"navigation.activityLog": "Activity Log",
"navigation.darkMode": "Dark Mode",
"form.field.name": "Name",
"form.field.regex": "Regex",
"form.field.regexHint": "Regex hint",