paulmataruso/libredesk
1
0
Fork 0
mirror of https://github.com/abhinavxd/libredesk.git synced 2025-11-05 06:23:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: dark mode

Browse Source
This commit is contained in:
Abhinav Raut
2025-05-28 01:50:35 +05:30
parent 1f8fdf2ef6
commit 210e0de1ae
96 changed files with 937 additions and 880 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/index.html
View File

@@ -6,8 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
rel="stylesheet">
</head>

6
frontend/package.json
View File

@@ -33,7 +33,7 @@
"@tiptap/vue-3": "^2.4.0",
"@unovis/ts": "^1.4.4",
"@unovis/vue": "^1.4.4",
"@vee-validate/zod": "^4.13.2",
"@vee-validate/zod": "^4.15.0",
"@vueuse/core": "^12.4.0",
"axios": "^1.8.2",
"class-variance-authority": "^0.7.0",
@@ -47,7 +47,7 @@
"radix-vue": "^1.9.17",
"reka-ui": "^2.2.0",
"tailwind-merge": "^2.3.0",
"vee-validate": "^4.13.2",
"vee-validate": "^4.15.0",
"vue": "^3.4.37",
"vue-dompurify-html": "^5.2.0",
"vue-i18n": "9",
@@ -57,7 +57,7 @@
"vue-sonner": "^1.3.0",
"vue3-emoji-picker": "^1.1.8",
"vuedraggable": "^4.1.0",
"zod": "^3.23.8"
"zod": "^3.24.1"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.3.3",

6
frontend/pnpm-lock.yaml generated
View File

@@ -60,7 +60,7 @@ importers:
specifier: ^1.4.4
version: 1.5.0(@unovis/ts@1.5.0)(vue@3.5.13(typescript@5.7.3))
'@vee-validate/zod':
specifier: ^4.13.2
specifier: ^4.15.0
version: 4.15.0(vue@3.5.13(typescript@5.7.3))(zod@3.24.1)
'@vueuse/core':
specifier: ^12.4.0
@@ -102,7 +102,7 @@ importers:
specifier: ^2.3.0
version: 2.6.0
vee-validate:
specifier: ^4.13.2
specifier: ^4.15.0
version: 4.15.0(vue@3.5.13(typescript@5.7.3))
vue:
specifier: ^3.4.37
@@ -132,7 +132,7 @@ importers:
specifier: ^4.1.0
version: 4.1.0(vue@3.5.13(typescript@5.7.3))
zod:
specifier: ^3.23.8
specifier: ^3.24.1
version: 3.24.1
devDependencies:
'@rushstack/eslint-patch':

2
frontend/src/App.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex w-full h-screen">
<div class="flex w-full h-screen text-foreground">
<!-- Icon sidebar always visible -->
<SidebarProvider style="--sidebar-width: 3rem" class="w-auto z-50">
<ShadcnSidebar collapsible="none" class="border-r">

6
frontend/src/Root.vue
View File

@@ -1,9 +1,7 @@
<template>
<TooltipProvider :delay-duration="150">
<div class="!font-jakarta">
<Toaster class="pointer-events-auto" position="top-center" richColors />
<RouterView />
</div>
<Toaster class="pointer-events-auto" position="top-center" richColors />
<RouterView />
</TooltipProvider>
</template>

181
frontend/src/assets/styles/main.scss
View File

@@ -61,10 +61,39 @@
}
}
}
}
:root {
--sidebar-background: 0 0% 99%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
.dark {
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
:root {
--vis-tooltip-background-color: none !important;
--vis-tooltip-border-color: none !important;
--vis-tooltip-text-color: none !important;
--vis-tooltip-shadow-color: none !important;
--vis-tooltip-backdrop-filter: none !important;
--vis-tooltip-padding: none !important;
--vis-primary-color: var(--primary);
--vis-secondary-color: 160 81% 40%;
--vis-text-color: var(--muted-foreground);
}
// Theme.
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
@@ -127,64 +156,8 @@
}
}
@layer base {
:root {
--vis-tooltip-background-color: none !important;
--vis-tooltip-border-color: none !important;
--vis-tooltip-text-color: none !important;
--vis-tooltip-shadow-color: none !important;
--vis-tooltip-backdrop-filter: none !important;
--vis-tooltip-padding: none !important;
--vis-primary-color: var(--primary);
--vis-secondary-color: 160 81% 40%;
--vis-text-color: var(--muted-foreground);
}
}
// Shake animation
@keyframes shake {
0% {
transform: translateX(0);
}
15% {
transform: translateX(-5px);
}
25% {
transform: translateX(5px);
}
35% {
transform: translateX(-5px);
}
45% {
transform: translateX(5px);
}
55% {
transform: translateX(-5px);
}
65% {
transform: translateX(5px);
}
75% {
transform: translateX(-5px);
}
85% {
transform: translateX(5px);
}
95% {
transform: translateX(-5px);
}
100% {
transform: translateX(0);
}
}
.animate-shake {
animation: shake 0.5s infinite;
}
.message-bubble {
@apply flex flex-col px-4 pt-2 pb-3 w-fit min-w-[30%] max-w-full border overflow-x-auto rounded-xl;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
@apply flex flex-col px-4 pt-2 pb-3 w-fit min-w-[30%] max-w-full border overflow-x-auto rounded shadow-sm;
table {
width: 100% !important;
table-layout: fixed !important;
@@ -200,7 +173,7 @@
}
.box {
@apply border shadow rounded-lg;
@apply border shadow rounded;
}
// Scrollbar start
@@ -227,84 +200,9 @@
// End Scrollbar
.code-editor {
@apply rounded-md border shadow h-[65vh] min-h-[250px] w-full relative;
@apply rounded border shadow h-[65vh] min-h-[250px] w-full relative;
}
.ql-container {
margin: 0 !important;
}
.ql-container .ql-editor {
height: 300px !important;
border-radius: var(--radius) !important;
@apply rounded-lg rounded-t-none;
}
.ql-toolbar {
@apply rounded-t-lg;
}
.blinking-dot {
display: inline-block;
width: 8px;
height: 8px;
background-color: red;
border-radius: 50%;
animation: blink 2s infinite;
}
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
// Sidebar start
@layer base {
:root {
--sidebar-background: 0 0% 96%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
.dark {
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
}
a[data-active='true'] {
background-color: hsl(var(--sidebar-background)) !important;
color: hsl(var(--sidebar-accent-foreground)) !important;
font-weight: 500;
transition:
background-color 0.2s,
color 0.2s;
}
a[data-active='false']:hover {
background-color: hsl(var(--sidebar-accent)) !important;
color: hsl(var(--sidebar-accent-foreground)) !important;
font-weight: 500;
transition:
background-color 0.2s,
color 0.2s;
}
// Sidebar end
.show-quoted-text {
blockquote {
@apply block;
@@ -358,3 +256,12 @@ a[data-active='false']:hover {
@apply text-blue-500 hover:underline;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}

2
frontend/src/components/datatable/DataTable.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="w-full">
<div class="rounded-md border shadow">
<div class="rounded border shadow">
<Table>
<TableHeader>
<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">

2
frontend/src/components/layout/MenuCard.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="flex flex-col p-4 border rounded-lg shadow-sm hover:shadow transition-colors cursor-pointer max-w-xs"
class="flex flex-col p-4 border rounded shadow-sm hover:shadow transition-colors cursor-pointer max-w-xs"
@click="handleClick">
<div class="flex items-center mb-2">
<component :is="icon" size="24" class="mr-2 text-primary" />

4
frontend/src/components/layout/PageHeader.vue
View File

@@ -1,8 +1,8 @@
<template>
<div v-if="!isHidden">
<div class="flex items-center space-x-4 h-12 px-2">
<SidebarTrigger class="cursor-pointer w-4 h-4" />
<span class="text-xl font-semibold text-gray-800">
<SidebarTrigger class="cursor-pointer" />
<span class="text-xl font-semibold">
{{ title }}
</span>
</div>

88
frontend/src/components/sidebar/Sidebar.vue
View File

@@ -98,13 +98,11 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton :isActive="isActiveParent('/contacts')" asChild>
<div>
<span class="font-semibold text-xl">
{{ t('globals.terms.contact', 2) }}
</span>
</div>
</SidebarMenuButton>
<div>
<span class="font-semibold text-xl">
{{ t('globals.terms.contact', 2) }}
</span>
</div>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
@@ -137,13 +135,11 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton :isActive="isActiveParent('/reports/overview')" asChild>
<div>
<span class="font-semibold text-xl">
{{ t('navigation.reports') }}
</span>
</div>
</SidebarMenuButton>
<div>
<span class="font-semibold text-xl">
{{ t('navigation.reports') }}
</span>
</div>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
@@ -171,17 +167,15 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton :isActive="isActiveParent('/admin')" asChild>
<div class="flex items-center justify-between w-full">
<span class="font-semibold text-xl">
{{ t('navigation.admin') }}
</span>
</div>
<!-- App version -->
<div class="text-xs text-muted-foreground ml-2">
({{ settingsStore.settings['app.version'] }})
</div>
</SidebarMenuButton>
<div class="flex items-center justify-between w-full">
<span class="font-semibold text-xl">
{{ t('navigation.admin') }}
</span>
</div>
<!-- App version -->
<div class="text-xs text-muted-foreground">
({{ settingsStore.settings['app.version'] }})
</div>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
@@ -239,13 +233,11 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton :isActive="isActiveParent('/account/profile')" asChild>
<div>
<span class="font-semibold text-xl">
{{ t('navigation.account') }}
</span>
</div>
</SidebarMenuButton>
<div>
<span class="font-semibold text-xl">
{{ t('navigation.account') }}
</span>
</div>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
@@ -276,24 +268,22 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton asChild>
<div class="flex items-center justify-between w-full">
<div class="font-semibold text-xl">
<span>{{ t('navigation.inbox') }}</span>
</div>
<div class="ml-auto">
<div class="flex items-center space-x-2">
<router-link :to="{ name: 'search' }">
<button
class="flex items-center bg-accent p-2 rounded-full hover:scale-110 transition-transform duration-100"
>
<Search size="15" stroke-width="2.5" />
</button>
</router-link>
</div>
<div class="flex items-center justify-between w-full">
<div class="font-semibold text-xl">
<span>{{ t('navigation.inbox') }}</span>
</div>
<div class="ml-auto">
<div class="flex items-center space-x-2">
<router-link :to="{ name: 'search' }">
<button
class="flex items-center bg-accent p-2 rounded-full hover:scale-110 transition-transform duration-100"
>
<Search size="15" stroke-width="2.5" />
</button>
</router-link>
</div>
</div>
</SidebarMenuButton>
</div>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
@@ -399,7 +389,7 @@ const viewInboxOpen = useStorage('viewInboxOpen', true)
<Plus
size="18"
@click.stop="openCreateViewDialog"
class="rounded-lg cursor-pointer opacity-0 transition-all duration-200 group-hover/item:opacity-100 hover:bg-gray-200 hover:shadow-sm text-gray-600 hover:text-gray-800 transform hover:scale-105 active:scale-100 p-1"
class="rounded cursor-pointer opacity-0 transition-all duration-200 group-hover/item:opacity-100 hover:bg-gray-200 hover:shadow-sm text-gray-600 hover:text-gray-800 transform hover:scale-105 active:scale-100 p-1"
/>
</div>
<ChevronRight

91
frontend/src/components/sidebar/SidebarNavUser.vue
View File

@@ -2,12 +2,12 @@
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuButton
size="lg"
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground p-0"
size="md"
class="p-0"
>
<Avatar class="h-8 w-8 rounded-lg relative overflow-visible">
<AvatarImage :src="userStore.avatar" alt="" class="rounded-lg" />
<AvatarFallback class="rounded-lg">
<Avatar class="h-8 w-8 rounded relative overflow-visible">
<AvatarImage :src="userStore.avatar" alt="U" class="rounded" />
<AvatarFallback class="rounded">
{{ userStore.getInitials }}
</AvatarFallback>
<div
@@ -30,51 +30,65 @@
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
class="w-[--radix-dropdown-menu-trigger-width] min-w-56"
side="bottom"
:side-offset="4"
>
<DropdownMenuLabel class="p-0 font-normal space-y-1">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar class="h-8 w-8 rounded-lg">
<DropdownMenuLabel class="font-normal space-y-2 px-2">
<!-- User header -->
<div class="flex items-center gap-2 py-1.5 text-left text-sm">
<Avatar class="h-8 w-8 rounded">
<AvatarImage :src="userStore.avatar" alt="U" />
<AvatarFallback class="rounded-lg">
<AvatarFallback class="rounded">
{{ userStore.getInitials }}
</AvatarFallback>
</Avatar>
<div class="grid flex-1 text-left text-sm leading-tight">
<div class="flex-1 flex flex-col leading-tight">
<span class="truncate font-semibold">{{ userStore.getFullName }}</span>
<span class="truncate text-xs">{{ userStore.email }}</span>
<span class="truncate text-xs text-muted-foreground">{{ userStore.email }}</span>
</div>
</div>
<div class="space-y-2">
<!-- Away switch is checked with 'away_manual' or 'away_and_reassigning' -->
<div class="flex items-center gap-2 px-1 text-left text-sm justify-between">
<span class="text-muted-foreground">{{ t('navigation.away') }}</span>
<!-- Dark-mode toggle -->
<div class="flex items-center justify-between text-sm">
<div class="flex items-center gap-2">
<Moon v-if="mode === 'dark'" size="16" class="text-muted-foreground" />
<Sun v-else size="16" class="text-muted-foreground" />
<span class="text-muted-foreground">{{ t('navigation.darkMode') }}</span>
</div>
<Switch
:checked="
['away_manual', 'away_and_reassigning'].includes(userStore.user.availability_status)
"
@update:checked="
(val) => {
const newStatus = val ? 'away_manual' : 'online'
userStore.updateUserAvailability(newStatus)
}
"
:checked="mode === 'dark'"
@update:checked="(val) => (mode = val ? 'dark' : 'light')"
/>
</div>
<!-- Reassign Replies Switch is checked with 'away_and_reassigning' -->
<div class="flex items-center gap-2 px-1 text-left text-sm justify-between">
<span class="text-muted-foreground">{{ t('navigation.reassignReplies') }}</span>
<Switch
:checked="userStore.user.availability_status === 'away_and_reassigning'"
@update:checked="
(val) => {
const newStatus = val ? 'away_and_reassigning' : 'away_manual'
userStore.updateUserAvailability(newStatus)
}
"
/>
<div class="border-t border-gray-200 dark:border-gray-700 pt-3 space-y-3">
<!-- Away toggle -->
<div class="flex items-center justify-between text-sm">
<span class="text-muted-foreground">{{ t('navigation.away') }}</span>
<Switch
:checked="
['away_manual', 'away_and_reassigning'].includes(
userStore.user.availability_status
)
"
@update:checked="
(val) => userStore.updateUserAvailability(val ? 'away_manual' : 'online')
"
/>
</div>
<!-- Reassign toggle -->
<div class="flex items-center justify-between text-sm">
<span class="text-muted-foreground">{{ t('navigation.reassignReplies') }}</span>
<Switch
:checked="userStore.user.availability_status === 'away_and_reassigning'"
@update:checked="
(val) =>
userStore.updateUserAvailability(val ? 'away_and_reassigning' : 'away_manual')
"
/>
</div>
</div>
</div>
</DropdownMenuLabel>
@@ -108,10 +122,13 @@ import {
import { SidebarMenuButton } from '@/components/ui/sidebar'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Switch } from '@/components/ui/switch'
import { ChevronsUpDown, CircleUserRound, LogOut } from 'lucide-vue-next'
import { ChevronsUpDown, CircleUserRound, LogOut, Moon, Sun } from 'lucide-vue-next'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import { useColorMode } from '@vueuse/core'
const mode = useColorMode()
const userStore = useUserStore()
const router = useRouter()
const { t } = useI18n()

16
frontend/src/components/table/SimpleTable.vue
View File

@@ -1,24 +1,24 @@
<template>
<table class="min-w-full table-fixed divide-y divide-gray-200">
<thead class="bg-gray-50">
<table class="min-w-full table-fixed divide-y divide-border">
<thead class="bg-muted">
<tr>
<th
v-for="(header, index) in headers"
:key="index"
scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
class="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider"
>
{{ header }}
</th>
<th scope="col" class="relative px-6 py-3"></th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tbody class="bg-background divide-y divide-border">
<template v-if="data.length === 0">
<tr>
<td :colspan="headers.length + 1" class="px-6 py-12 text-center">
<div class="flex flex-col items-center space-y-4">
<span class="text-md text-gray-500">
<span class="text-md text-muted-foreground">
{{
$t('globals.messages.noResults', {
name: $t('globals.terms.result', 2).toLowerCase()
@@ -30,15 +30,15 @@
</tr>
</template>
<template v-else>
<tr v-for="(item, index) in data" :key="index">
<tr v-for="(item, index) in data" :key="index" class="hover:bg-accent">
<td
v-for="key in keys"
:key="key"
class="px-6 py-4 text-sm font-medium text-gray-900 whitespace-normal break-words"
class="px-6 py-4 text-sm font-medium text-foreground whitespace-normal break-words"
>
{{ item[key] }}
</td>
<td class="px-6 py-4 text-sm text-gray-500" v-if="showDelete">
<td v-if="showDelete" class="px-6 py-4 text-sm text-muted-foreground">
<Button size="xs" variant="ghost" @click.prevent="deleteItem(item)">
<Trash2 class="h-4 w-4" />
</Button>

2
frontend/src/components/ui/avatar/AvatarUpload.vue
View File

@@ -14,7 +14,7 @@
<!-- Delete Icon -->
<X
class="absolute top-1 right-1 bg-white rounded-full p-1 shadow-md z-10 opacity-0 group-hover:opacity-100 transition-opacity"
class="absolute top-1 right-1 rounded-full p-1 shadow-md z-10 opacity-0 group-hover:opacity-100 transition-opacity"
size="20"
@click.stop="emit('remove')"
v-if="src"

25
frontend/src/components/ui/button/Button.vue
View File

@@ -1,9 +1,7 @@
<script setup>
import { Primitive } from 'radix-vue'
import { buttonVariants } from '.'
import { cn } from '@/lib/utils'
import { ref, computed } from 'vue'
import { DotLoader } from '@/components/ui/loader'
import { Primitive } from 'reka-ui';
import { cn } from '@/lib/utils';
import { buttonVariants } from '.';
const props = defineProps({
variant: { type: null, required: false },
@@ -11,26 +9,15 @@ const props = defineProps({
class: { type: null, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false, default: 'button' },
isLoading: { type: Boolean, required: false, default: false }
})
const isDisabled = ref(false)
const computedClass = computed(() => {
return cn(buttonVariants({ variant: props.variant, size: props.size }), props.class, {
'cursor-not-allowed opacity-50': props.isLoading || isDisabled.value
})
})
});
</script>
<template>
<Primitive
:as="as"
:as-child="asChild"
:class="computedClass"
:disabled="isLoading || isDisabled"
:class="cn(buttonVariants({ variant, size }), props.class)"
>
<DotLoader v-if="isLoading" />
<slot v-else />
<slot />
</Primitive>
</template>

29
frontend/src/components/ui/button/index.js
View File

@@ -1,31 +1,34 @@
import { cva } from 'class-variance-authority'
import { cva } from 'class-variance-authority';
export { default as Button } from './Button.vue'
export { default as Button } from './Button.vue';
export const buttonVariants = cva(
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
{
variants: {
variant: {
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
default:
'bg-primary text-primary-foreground shadow hover:bg-primary/90',
destructive:
'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
outline:
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
secondary:
'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline'
link: 'text-primary underline-offset-4 hover:underline',
},
size: {
default: 'h-9 px-4 py-2',
xs: 'h-7 rounded px-2',
sm: 'h-8 rounded-md px-3 text-xs',
lg: 'h-10 rounded-md px-8',
icon: 'h-9 w-9'
}
icon: 'h-9 w-9',
},
},
defaultVariants: {
variant: 'default',
size: 'default'
}
}
)
size: 'default',
},
},
);

16
frontend/src/components/ui/input/Input.vue
View File

@@ -1,19 +1,19 @@
<script setup>
import { useVModel } from '@vueuse/core'
import { cn } from '@/lib/utils'
import { useVModel } from '@vueuse/core';
import { cn } from '@/lib/utils';
const props = defineProps({
defaultValue: { type: [String, Number], required: false },
modelValue: { type: [String, Number], required: false },
class: { type: null, required: false }
})
class: { type: null, required: false },
});
const emits = defineEmits(['update:modelValue'])
const emits = defineEmits(['update:modelValue']);
const modelValue = useVModel(props, 'modelValue', emits, {
passive: true,
defaultValue: props.defaultValue
})
defaultValue: props.defaultValue,
});
</script>
<template>
@@ -22,7 +22,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
:class="
cn(
'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
props.class
props.class,
)
"
/>

2
frontend/src/components/ui/input/index.js
View File

@@ -1 +1 @@
export { default as Input } from './Input.vue'
export { default as Input } from './Input.vue';

24
frontend/src/components/ui/separator/Separator.vue
View File

@@ -1,21 +1,17 @@
<script setup>
import { computed } from 'vue'
import { Separator } from 'radix-vue'
import { cn } from '@/lib/utils'
import { reactiveOmit } from '@vueuse/core';
import { Separator } from 'reka-ui';
import { cn } from '@/lib/utils';
const props = defineProps({
orientation: { type: String, required: false },
decorative: { type: Boolean, required: false },
orientation: { type: String, required: false, default: 'horizontal' },
decorative: { type: Boolean, required: false, default: true },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: null, required: false }
})
class: { type: null, required: false },
});
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const delegatedProps = reactiveOmit(props, 'class');
</script>
<template>
@@ -24,8 +20,8 @@ const delegatedProps = computed(() => {
:class="
cn(
'shrink-0 bg-border',
props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
props.class
props.orientation === 'horizontal' ? 'h-px w-full' : 'w-px h-full',
props.class,
)
"
/>

2
frontend/src/components/ui/separator/index.js
View File

@@ -1 +1 @@
export { default as Separator } from './Separator.vue'
export { default as Separator } from './Separator.vue';

10
frontend/src/components/ui/sheet/Sheet.vue
View File

@@ -1,14 +1,14 @@
<script setup>
import { DialogRoot, useForwardPropsEmits } from 'radix-vue'
import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
const props = defineProps({
open: { type: Boolean, required: false },
defaultOpen: { type: Boolean, required: false },
modal: { type: Boolean, required: false }
})
const emits = defineEmits(['update:open'])
modal: { type: Boolean, required: false },
});
const emits = defineEmits(['update:open']);
const forwarded = useForwardPropsEmits(props, emits)
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>

6
frontend/src/components/ui/sheet/SheetClose.vue
View File

@@ -1,10 +1,10 @@
<script setup>
import { DialogClose } from 'radix-vue'
import { DialogClose } from 'reka-ui';
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false }
})
as: { type: null, required: false },
});
</script>
<template>

32
frontend/src/components/ui/sheet/SheetContent.vue
View File

@@ -1,19 +1,19 @@
<script setup>
import { computed } from 'vue'
import { reactiveOmit } from '@vueuse/core';
import { Cross2Icon } from '@radix-icons/vue';
import {
DialogClose,
DialogContent,
DialogOverlay,
DialogPortal,
useForwardPropsEmits
} from 'radix-vue'
import { Cross2Icon } from '@radix-icons/vue'
import { sheetVariants } from '.'
import { cn } from '@/lib/utils'
useForwardPropsEmits,
} from 'reka-ui';
import { cn } from '@/lib/utils';
import { sheetVariants } from '.';
defineOptions({
inheritAttrs: false
})
inheritAttrs: false,
});
const props = defineProps({
class: { type: null, required: false },
@@ -22,8 +22,8 @@ const props = defineProps({
trapFocus: { type: Boolean, required: false },
disableOutsidePointerEvents: { type: Boolean, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false }
})
as: { type: null, required: false },
});
const emits = defineEmits([
'escapeKeyDown',
@@ -31,16 +31,12 @@ const emits = defineEmits([
'focusOutside',
'interactOutside',
'openAutoFocus',
'closeAutoFocus'
])
'closeAutoFocus',
]);
const delegatedProps = computed(() => {
const { class: _, side, ...delegated } = props
const delegatedProps = reactiveOmit(props, 'class', 'side');
return delegated
})
const forwarded = useForwardPropsEmits(delegatedProps, emits)
const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>

16
frontend/src/components/ui/sheet/SheetDescription.vue
View File

@@ -1,19 +1,15 @@
<script setup>
import { computed } from 'vue'
import { DialogDescription } from 'radix-vue'
import { cn } from '@/lib/utils'
import { reactiveOmit } from '@vueuse/core';
import { DialogDescription } from 'reka-ui';
import { cn } from '@/lib/utils';
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: null, required: false }
})
class: { type: null, required: false },
});
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const delegatedProps = reactiveOmit(props, 'class');
</script>
<template>

15
frontend/src/components/ui/sheet/SheetFooter.vue
View File

@@ -1,13 +1,20 @@
<script setup>
import { cn } from '@/lib/utils'
import { cn } from '@/lib/utils';
const props = defineProps({
class: { type: null, required: false }
})
class: { type: null, required: false },
});
</script>
<template>
<div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', props.class)">
<div
:class="
cn(
'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
props.class,
)
"
>
<slot />
</div>
</template>

10
frontend/src/components/ui/sheet/SheetHeader.vue
View File

@@ -1,13 +1,15 @@
<script setup>
import { cn } from '@/lib/utils'
import { cn } from '@/lib/utils';
const props = defineProps({
class: { type: null, required: false }
})
class: { type: null, required: false },
});
</script>
<template>
<div :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)">
<div
:class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
>
<slot />
</div>
</template>

16
frontend/src/components/ui/sheet/SheetTitle.vue
View File

@@ -1,19 +1,15 @@
<script setup>
import { computed } from 'vue'
import { DialogTitle } from 'radix-vue'
import { cn } from '@/lib/utils'
import { reactiveOmit } from '@vueuse/core';
import { DialogTitle } from 'reka-ui';
import { cn } from '@/lib/utils';
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: null, required: false }
})
class: { type: null, required: false },
});
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const delegatedProps = reactiveOmit(props, 'class');
</script>
<template>

6
frontend/src/components/ui/sheet/SheetTrigger.vue
View File

@@ -1,10 +1,10 @@
<script setup>
import { DialogTrigger } from 'radix-vue'
import { DialogTrigger } from 'reka-ui';
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false }
})
as: { type: null, required: false },
});
</script>
<template>

30
frontend/src/components/ui/sheet/index.js
View File

@@ -1,13 +1,13 @@
import { cva } from 'class-variance-authority'
import { cva } from 'class-variance-authority';
export { default as Sheet } from './Sheet.vue'
export { default as SheetTrigger } from './SheetTrigger.vue'
export { default as SheetClose } from './SheetClose.vue'
export { default as SheetContent } from './SheetContent.vue'
export { default as SheetHeader } from './SheetHeader.vue'
export { default as SheetTitle } from './SheetTitle.vue'
export { default as SheetDescription } from './SheetDescription.vue'
export { default as SheetFooter } from './SheetFooter.vue'
export { default as Sheet } from './Sheet.vue';
export { default as SheetClose } from './SheetClose.vue';
export { default as SheetContent } from './SheetContent.vue';
export { default as SheetDescription } from './SheetDescription.vue';
export { default as SheetFooter } from './SheetFooter.vue';
export { default as SheetHeader } from './SheetHeader.vue';
export { default as SheetTitle } from './SheetTitle.vue';
export { default as SheetTrigger } from './SheetTrigger.vue';
export const sheetVariants = cva(
'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
@@ -19,11 +19,11 @@ export const sheetVariants = cva(
'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
right:
'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm'
}
'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
},
},
defaultVariants: {
side: 'right'
}
}
)
side: 'right',
},
},
);

10
frontend/src/components/ui/sidebar/Sidebar.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { Sheet, SheetContent } from '@/components/ui/sheet';
import { cn } from '@/lib/utils';
import { Sheet, SheetContent } from '@/components/ui/sheet';
import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils';
defineOptions({
@@ -12,7 +12,6 @@ const props = defineProps({
variant: { type: String, required: false, default: 'sidebar' },
collapsible: { type: String, required: false, default: 'offcanvas' },
class: { type: null, required: false },
collapseOnMobile: { type: Boolean, required: false, default: true },
});
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
@@ -33,7 +32,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
</div>
<Sheet
v-else-if="isMobile && collapseOnMobile"
v-else-if="isMobile"
:open="openMobile"
v-bind="$attrs"
@update:open="setOpenMobile"
@@ -55,7 +54,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
<div
v-else
:class="cn('group peer', collapseOnMobile ? 'hidden md:block' : 'block')"
class="group peer hidden md:block"
:data-state="state"
:data-collapsible="state === 'collapsed' ? collapsible : ''"
:data-variant="variant"
@@ -77,8 +76,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
<div
:class="
cn(
'duration-200 fixed inset-y-0 z-10 h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
collapseOnMobile ? 'hidden' : '',
'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
side === 'left'
? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
: 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',

30
frontend/src/components/ui/sidebar/SidebarGroupAction.vue
View File

@@ -1,12 +1,12 @@
<script setup lang="ts">
import type { PrimitiveProps } from 'radix-vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Primitive } from 'radix-vue'
<script setup>
import { Primitive } from 'reka-ui';
import { cn } from '@/lib/utils';
const props = defineProps<PrimitiveProps & {
class?: HTMLAttributes['class']
}>()
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: null, required: false },
});
</script>
<template>
@@ -14,12 +14,14 @@ const props = defineProps<PrimitiveProps & {
data-sidebar="group-action"
:as="as"
:as-child="asChild"
:class="cn(
'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
'after:absolute after:-inset-2 after:md:hidden',
'group-data-[collapsible=icon]:hidden',
props.class,
)"
:class="
cn(
'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
'after:absolute after:-inset-2 after:md:hidden',
'group-data-[collapsible=icon]:hidden',
props.class,
)
"
>
<slot />
</Primitive>

16
frontend/src/components/ui/sidebar/SidebarGroupContent.vue
View File

@@ -1,17 +1,13 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
<script setup>
import { cn } from '@/lib/utils';
const props = defineProps<{
class?: HTMLAttributes['class']
}>()
const props = defineProps({
class: { type: null, required: false },
});
</script>
<template>
<div
data-sidebar="group-content"
:class="cn('w-full text-sm', props.class)"
>
<div data-sidebar="group-content" :class="cn('w-full text-sm', props.class)">
<slot />
</div>
</template>

27
frontend/src/components/ui/sidebar/SidebarGroupLabel.vue
View File

@@ -1,12 +1,12 @@
<script setup lang="ts">
import type { PrimitiveProps } from 'radix-vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Primitive } from 'radix-vue'
<script setup>
import { Primitive } from 'reka-ui';
import { cn } from '@/lib/utils';
const props = defineProps<PrimitiveProps & {
class?: HTMLAttributes['class']
}>()
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: null, required: false },
});
</script>
<template>
@@ -14,10 +14,13 @@ const props = defineProps<PrimitiveProps & {
data-sidebar="group-label"
:as="as"
:as-child="asChild"
:class="cn(
'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
props.class)"
:class="
cn(
'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
props.class,
)
"
>
<slot />
</Primitive>

11
frontend/src/components/ui/sidebar/SidebarHeader.vue
View File

@@ -1,10 +1,9 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
<script setup>
import { cn } from '@/lib/utils';
const props = defineProps<{
class?: HTMLAttributes['class']
}>()
const props = defineProps({
class: { type: null, required: false },
});
</script>
<template>

23
frontend/src/components/ui/sidebar/SidebarInput.vue
View File

@@ -1,20 +1,21 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { Input } from '@/components/ui/input'
import { cn } from '@/lib/utils'
<script setup>
import { cn } from '@/lib/utils';
import { Input } from '@/components/ui/input';
const props = defineProps<{
class?: HTMLAttributes['class']
}>()
const props = defineProps({
class: { type: null, required: false },
});
</script>
<template>
<Input
data-sidebar="input"
:class="cn(
'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
props.class,
)"
:class="
cn(
'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
props.class,
)
"
>
<slot />
</Input>

23
frontend/src/components/ui/sidebar/SidebarInset.vue
View File

@@ -1,19 +1,20 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
<script setup>
import { cn } from '@/lib/utils';
const props = defineProps<{
class?: HTMLAttributes['class']
}>()
const props = defineProps({
class: { type: null, required: false },
});
</script>
<template>
<main
:class="cn(
'relative flex min-h-svh flex-1 flex-col bg-background',
'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
props.class,
)"
:class="
cn(
'relative flex min-h-svh flex-1 flex-col bg-background',
'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
props.class,
)
"
>
<slot />
</main>

11
frontend/src/components/ui/sidebar/SidebarMenu.vue
View File

@@ -1,10 +1,9 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
<script setup>
import { cn } from '@/lib/utils';
const props = defineProps<{
class?: HTMLAttributes['class']
}>()
const props = defineProps({
class: { type: null, required: false },
});
</script>
<template>

43
frontend/src/components/ui/sidebar/SidebarMenuAction.vue
View File

@@ -1,30 +1,31 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Primitive, type PrimitiveProps } from 'radix-vue'
<script setup>
import { Primitive } from 'reka-ui';
import { cn } from '@/lib/utils';
const props = withDefaults(defineProps<PrimitiveProps & {
showOnHover?: boolean
class?: HTMLAttributes['class']
}>(), {
as: 'button',
})
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false, default: 'button' },
showOnHover: { type: Boolean, required: false },
class: { type: null, required: false },
});
</script>
<template>
<Primitive
data-sidebar="menu-action"
:class="cn(
'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
'after:absolute after:-inset-2 after:md:hidden',
'peer-data-[size=sm]/menu-button:top-1',
'peer-data-[size=default]/menu-button:top-1.5',
'peer-data-[size=lg]/menu-button:top-2.5',
'group-data-[collapsible=icon]:hidden',
showOnHover
&& 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
props.class,
)"
:class="
cn(
'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
'after:absolute after:-inset-2 after:md:hidden',
'peer-data-[size=sm]/menu-button:top-1',
'peer-data-[size=default]/menu-button:top-1.5',
'peer-data-[size=lg]/menu-button:top-2.5',
'group-data-[collapsible=icon]:hidden',
showOnHover &&
'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
props.class,
)
"
:as="as"
:as-child="asChild"
>

31
frontend/src/components/ui/sidebar/SidebarMenuBadge.vue
View File

@@ -1,24 +1,25 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
<script setup>
import { cn } from '@/lib/utils';
const props = defineProps<{
class?: HTMLAttributes['class']
}>()
const props = defineProps({
class: { type: null, required: false },
});
</script>
<template>
<div
data-sidebar="menu-badge"
:class="cn(
'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
'peer-data-[size=sm]/menu-button:top-1',
'peer-data-[size=default]/menu-button:top-1.5',
'peer-data-[size=lg]/menu-button:top-2.5',
'group-data-[collapsible=icon]:hidden',
props.class,
)"
:class="
cn(
'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
'peer-data-[size=sm]/menu-button:top-1',
'peer-data-[size=default]/menu-button:top-1.5',
'peer-data-[size=lg]/menu-button:top-2.5',
'group-data-[collapsible=icon]:hidden',
props.class,
)
"
>
<slot />
</div>

45
frontend/src/components/ui/sidebar/SidebarMenuButton.vue
View File

@@ -1,31 +1,40 @@
<script setup lang="ts">
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { type Component, computed } from 'vue'
import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
import { useSidebar } from './utils'
<script setup>
import { computed } from 'vue';
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/ui/tooltip';
import SidebarMenuButtonChild from './SidebarMenuButtonChild.vue';
import { useSidebar } from './utils';
defineOptions({
inheritAttrs: false,
})
});
const props = withDefaults(defineProps<SidebarMenuButtonProps & {
tooltip?: string | Component
}>(), {
as: 'button',
variant: 'default',
size: 'default',
})
const props = defineProps({
variant: { type: null, required: false, default: 'default' },
size: { type: null, required: false, default: 'default' },
isActive: { type: Boolean, required: false },
class: { type: null, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false, default: 'button' },
tooltip: { type: null, required: false },
});
const { isMobile, state } = useSidebar()
const { isMobile, state } = useSidebar();
const delegatedProps = computed(() => {
const { tooltip, ...delegated } = props
return delegated
})
const { tooltip, ...delegated } = props;
return delegated;
});
</script>
<template>
<SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
<SidebarMenuButtonChild
v-if="!tooltip"
v-bind="{ ...delegatedProps, ...$attrs }"
>
<slot />
</SidebarMenuButtonChild>

29
frontend/src/components/ui/sidebar/SidebarMenuButtonChild.vue
View File

@@ -1,21 +1,16 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Primitive, type PrimitiveProps } from 'radix-vue'
import { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'
<script setup>
import { Primitive } from 'reka-ui';
import { cn } from '@/lib/utils';
import { sidebarMenuButtonVariants } from '.';
export interface SidebarMenuButtonProps extends PrimitiveProps {
variant?: SidebarMenuButtonVariants['variant']
size?: SidebarMenuButtonVariants['size']
isActive?: boolean
class?: HTMLAttributes['class']
}
const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
as: 'button',
variant: 'default',
size: 'default',
})
const props = defineProps({
variant: { type: null, required: false, default: 'default' },
size: { type: null, required: false, default: 'default' },
isActive: { type: Boolean, required: false },
class: { type: null, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false, default: 'button' },
});
</script>
<template>

11
frontend/src/components/ui/sidebar/SidebarMenuItem.vue
View File

@@ -1,10 +1,9 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
<script setup>
import { cn } from '@/lib/utils';
const props = defineProps<{
class?: HTMLAttributes['class']
}>()
const props = defineProps({
class: { type: null, required: false },
});
</script>
<template>

20
frontend/src/components/ui/sidebar/SidebarMenuSkeleton.vue
View File

@@ -1,16 +1,16 @@
<script setup lang="ts">
import { Skeleton } from '@/components/ui/skeleton'
import { cn } from '@/lib/utils'
import { computed, type HTMLAttributes } from 'vue'
<script setup>
import { computed } from 'vue';
import { cn } from '@/lib/utils';
import { Skeleton } from '@/components/ui/skeleton';
const props = defineProps<{
showIcon?: boolean
class?: HTMLAttributes['class']
}>()
const props = defineProps({
showIcon: { type: Boolean, required: false },
class: { type: null, required: false },
});
const width = computed(() => {
return `${Math.floor(Math.random() * 40) + 50}%`
})
return `${Math.floor(Math.random() * 40) + 50}%`;
});
</script>
<template>

23
frontend/src/components/ui/sidebar/SidebarMenuSub.vue
View File

@@ -1,20 +1,21 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
<script setup>
import { cn } from '@/lib/utils';
const props = defineProps<{
class?: HTMLAttributes['class']
}>()
const props = defineProps({
class: { type: null, required: false },
});
</script>
<template>
<ul
data-sidebar="menu-badge"
:class="cn(
'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
'group-data-[collapsible=icon]:hidden',
props.class,
)"
:class="
cn(
'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
'group-data-[collapsible=icon]:hidden',
props.class,
)
"
>
<slot />
</ul>

41
frontend/src/components/ui/sidebar/SidebarMenuSubButton.vue
View File

@@ -1,17 +1,14 @@
<script setup lang="ts">
import type { PrimitiveProps } from 'radix-vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Primitive } from 'radix-vue'
<script setup>
import { Primitive } from 'reka-ui';
import { cn } from '@/lib/utils';
const props = withDefaults(defineProps<PrimitiveProps & {
size?: 'sm' | 'md'
isActive?: boolean
class?: HTMLAttributes['class']
}>(), {
as: 'a',
size: 'md',
})
const props = defineProps({
asChild: { type: Boolean, required: false },
as: { type: null, required: false, default: 'a' },
size: { type: String, required: false, default: 'md' },
isActive: { type: Boolean, required: false },
class: { type: null, required: false },
});
</script>
<template>
@@ -21,14 +18,16 @@ const props = withDefaults(defineProps<PrimitiveProps & {
:as-child="asChild"
:data-size="size"
:data-active="isActive"
:class="cn(
'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
size === 'sm' && 'text-xs',
size === 'md' && 'text-sm',
'group-data-[collapsible=icon]:hidden',
props.class,
)"
:class="
cn(
'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
size === 'sm' && 'text-xs',
size === 'md' && 'text-sm',
'group-data-[collapsible=icon]:hidden',
props.class,
)
"
>
<slot />
</Primitive>

3
frontend/src/components/ui/sidebar/SidebarMenuSubItem.vue
View File

@@ -1,5 +1,4 @@
<script setup lang="ts">
</script>
<script setup lang="ts"></script>
<template>
<li>

82
frontend/src/components/ui/sidebar/SidebarProvider.vue
View File

@@ -1,57 +1,64 @@
<script setup lang="ts">
import { cn } from '@/lib/utils'
import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'
import { TooltipProvider } from 'radix-vue'
import { computed, type HTMLAttributes, type Ref, ref } from 'vue'
import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'
<script setup>
import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core';
import { TooltipProvider } from 'reka-ui';
import { computed, ref } from 'vue';
import { cn } from '@/lib/utils';
import {
provideSidebarContext,
SIDEBAR_COOKIE_MAX_AGE,
SIDEBAR_COOKIE_NAME,
SIDEBAR_KEYBOARD_SHORTCUT,
SIDEBAR_WIDTH,
SIDEBAR_WIDTH_ICON,
} from './utils';
const props = withDefaults(defineProps<{
defaultOpen?: boolean
open?: boolean
class?: HTMLAttributes['class']
}>(), {
defaultOpen: true,
open: undefined,
})
const props = defineProps({
defaultOpen: { type: Boolean, required: false, default: true },
open: { type: Boolean, required: false, default: undefined },
class: { type: null, required: false },
});
const emits = defineEmits<{
'update:open': [open: boolean]
}>()
const emits = defineEmits(['update:open']);
const isMobile = useMediaQuery('(max-width: 768px)')
const openMobile = ref(false)
const isMobile = useMediaQuery('(max-width: 768px)');
const openMobile = ref(false);
const open = useVModel(props, 'open', emits, {
defaultValue: props.defaultOpen ?? false,
passive: (props.open === undefined) as false,
}) as Ref<boolean>
passive: props.open === undefined,
});
function setOpen(value: boolean) {
open.value = value // emits('update:open', value)
function setOpen(value) {
open.value = value; // emits('update:open', value)
// This sets the cookie to keep the sidebar state.
document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
}
function setOpenMobile(value: boolean) {
openMobile.value = value
function setOpenMobile(value) {
openMobile.value = value;
}
// Helper to toggle the sidebar.
function toggleSidebar() {
return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
return isMobile.value
? setOpenMobile(!openMobile.value)
: setOpen(!open.value);
}
useEventListener('keydown', (event: KeyboardEvent) => {
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
event.preventDefault()
toggleSidebar()
useEventListener('keydown', (event) => {
if (
event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
(event.metaKey || event.ctrlKey)
) {
event.preventDefault();
toggleSidebar();
}
})
});
// We add a state so that we can do data-state="expanded" or "collapsed".
// This makes it easier to style the sidebar with Tailwind classes.
const state = computed(() => open.value ? 'expanded' : 'collapsed')
const state = computed(() => (open.value ? 'expanded' : 'collapsed'));
provideSidebarContext({
state,
@@ -61,7 +68,7 @@ provideSidebarContext({
openMobile,
setOpenMobile,
toggleSidebar,
})
});
</script>
<template>
@@ -71,7 +78,12 @@ provideSidebarContext({
'--sidebar-width': SIDEBAR_WIDTH,
'--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
}"
:class="cn('group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar', props.class)"
:class="
cn(
'group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar',
props.class,
)
"
v-bind="$attrs"
>
<slot />

35
frontend/src/components/ui/sidebar/SidebarRail.vue
View File

@@ -1,13 +1,12 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { useSidebar } from './utils'
<script setup>
import { cn } from '@/lib/utils';
import { useSidebar } from './utils';
const props = defineProps<{
class?: HTMLAttributes['class']
}>()
const props = defineProps({
class: { type: null, required: false },
});
const { toggleSidebar } = useSidebar()
const { toggleSidebar } = useSidebar();
</script>
<template>
@@ -16,15 +15,17 @@ const { toggleSidebar } = useSidebar()
aria-label="Toggle Sidebar"
:tabindex="-1"
title="Toggle Sidebar"
:class="cn(
'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
'[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
'[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
'[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
props.class,
)"
:class="
cn(
'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
'[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
'[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
'[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
props.class,
)
"
@click="toggleSidebar"
>
<slot />

13
frontend/src/components/ui/sidebar/SidebarSeparator.vue
View File

@@ -1,11 +1,10 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { Separator } from '@/components/ui/separator'
import { cn } from '@/lib/utils'
<script setup>
import { cn } from '@/lib/utils';
import { Separator } from '@/components/ui/separator';
const props = defineProps<{
class?: HTMLAttributes['class']
}>()
const props = defineProps({
class: { type: null, required: false },
});
</script>
<template>

21
frontend/src/components/ui/sidebar/SidebarTrigger.vue
View File

@@ -1,15 +1,14 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import { PanelLeft } from 'lucide-vue-next'
import { useSidebar } from './utils'
<script setup>
import { ViewVerticalIcon } from '@radix-icons/vue';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { useSidebar } from './utils';
const props = defineProps<{
class?: HTMLAttributes['class']
}>()
const props = defineProps({
class: { type: null, required: false },
});
const { toggleSidebar } = useSidebar()
const { toggleSidebar } = useSidebar();
</script>
<template>
@@ -20,7 +19,7 @@ const { toggleSidebar } = useSidebar()
:class="cn('h-7 w-7', props.class)"
@click="toggleSidebar"
>
<PanelLeft />
<ViewVerticalIcon />
<span class="sr-only">Toggle Sidebar</span>
</Button>
</template>

49
frontend/src/components/ui/sidebar/index.js Normal file
View File

@@ -0,0 +1,49 @@
import { cva } from 'class-variance-authority';
export { default as Sidebar } from './Sidebar.vue';
export { default as SidebarContent } from './SidebarContent.vue';
export { default as SidebarFooter } from './SidebarFooter.vue';
export { default as SidebarGroup } from './SidebarGroup.vue';
export { default as SidebarGroupAction } from './SidebarGroupAction.vue';
export { default as SidebarGroupContent } from './SidebarGroupContent.vue';
export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue';
export { default as SidebarHeader } from './SidebarHeader.vue';
export { default as SidebarInput } from './SidebarInput.vue';
export { default as SidebarInset } from './SidebarInset.vue';
export { default as SidebarMenu } from './SidebarMenu.vue';
export { default as SidebarMenuAction } from './SidebarMenuAction.vue';
export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue';
export { default as SidebarMenuButton } from './SidebarMenuButton.vue';
export { default as SidebarMenuItem } from './SidebarMenuItem.vue';
export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue';
export { default as SidebarMenuSub } from './SidebarMenuSub.vue';
export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue';
export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue';
export { default as SidebarProvider } from './SidebarProvider.vue';
export { default as SidebarRail } from './SidebarRail.vue';
export { default as SidebarSeparator } from './SidebarSeparator.vue';
export { default as SidebarTrigger } from './SidebarTrigger.vue';
export { useSidebar } from './utils';
export const sidebarMenuButtonVariants = cva(
'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
{
variants: {
variant: {
default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
outline:
'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
},
size: {
default: 'h-8 text-sm',
sm: 'h-7 text-xs',
lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
},
},
defaultVariants: {
variant: 'default',
size: 'default',
},
},
);

10
frontend/src/components/ui/sidebar/utils.js Normal file
View File

@@ -0,0 +1,10 @@
import { createContext } from 'reka-ui';
export const SIDEBAR_COOKIE_NAME = 'sidebar:state';
export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
export const SIDEBAR_WIDTH = '16rem';
export const SIDEBAR_WIDTH_MOBILE = '18rem';
export const SIDEBAR_WIDTH_ICON = '3rem';
export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
export const [useSidebar, provideSidebarContext] = createContext('Sidebar');

6
frontend/src/components/ui/skeleton/Skeleton.vue
View File

@@ -1,9 +1,9 @@
<script setup>
import { cn } from '@/lib/utils'
import { cn } from '@/lib/utils';
const props = defineProps({
class: { type: null, required: false }
})
class: { type: null, required: false },
});
</script>
<template>

2
frontend/src/components/ui/skeleton/index.js
View File

@@ -1 +1 @@
export { default as Skeleton } from './Skeleton.vue'
export { default as Skeleton } from './Skeleton.vue';

10
frontend/src/components/ui/tooltip/Tooltip.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { TooltipRoot, useForwardPropsEmits } from 'radix-vue'
import { TooltipRoot, useForwardPropsEmits } from 'reka-ui';
const props = defineProps({
defaultOpen: { type: Boolean, required: false },
@@ -8,11 +8,11 @@ const props = defineProps({
disableHoverableContent: { type: Boolean, required: false },
disableClosingTrigger: { type: Boolean, required: false },
disabled: { type: Boolean, required: false },
ignoreNonKeyboardFocus: { type: Boolean, required: false }
})
const emits = defineEmits(['update:open'])
ignoreNonKeyboardFocus: { type: Boolean, required: false },
});
const emits = defineEmits(['update:open']);
const forwarded = useForwardPropsEmits(props, emits)
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>

29
frontend/src/components/ui/tooltip/TooltipContent.vue
View File

@@ -1,13 +1,14 @@
<script setup>
import { computed } from 'vue'
import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
import { cn } from '@/lib/utils'
import { reactiveOmit } from '@vueuse/core';
import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui';
import { cn } from '@/lib/utils';
defineOptions({
inheritAttrs: false
})
inheritAttrs: false,
});
const props = defineProps({
forceMount: { type: Boolean, required: false },
ariaLabel: { type: String, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
@@ -21,18 +22,16 @@ const props = defineProps({
arrowPadding: { type: Number, required: false },
sticky: { type: String, required: false },
hideWhenDetached: { type: Boolean, required: false },
class: { type: null, required: false }
})
positionStrategy: { type: String, required: false },
updatePositionStrategy: { type: String, required: false },
class: { type: null, required: false },
});
const emits = defineEmits(['escapeKeyDown', 'pointerDownOutside'])
const emits = defineEmits(['escapeKeyDown', 'pointerDownOutside']);
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
const delegatedProps = reactiveOmit(props, 'class');
return delegated
})
const forwarded = useForwardPropsEmits(delegatedProps, emits)
const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
@@ -42,7 +41,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
:class="
cn(
'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
props.class
props.class,
)
"
>

6
frontend/src/components/ui/tooltip/TooltipProvider.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { TooltipProvider } from 'radix-vue'
import { TooltipProvider } from 'reka-ui';
const props = defineProps({
delayDuration: { type: Number, required: false },
@@ -7,8 +7,8 @@ const props = defineProps({
disableHoverableContent: { type: Boolean, required: false },
disableClosingTrigger: { type: Boolean, required: false },
disabled: { type: Boolean, required: false },
ignoreNonKeyboardFocus: { type: Boolean, required: false }
})
ignoreNonKeyboardFocus: { type: Boolean, required: false },
});
</script>
<template>

7
frontend/src/components/ui/tooltip/TooltipTrigger.vue
View File

@@ -1,10 +1,11 @@
<script setup>
import { TooltipTrigger } from 'radix-vue'
import { TooltipTrigger } from 'reka-ui';
const props = defineProps({
reference: { type: null, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false }
})
as: { type: null, required: false },
});
</script>
<template>

8
frontend/src/components/ui/tooltip/index.js
View File

@@ -1,4 +1,4 @@
export { default as Tooltip } from './Tooltip.vue'
export { default as TooltipContent } from './TooltipContent.vue'
export { default as TooltipTrigger } from './TooltipTrigger.vue'
export { default as TooltipProvider } from './TooltipProvider.vue'
export { default as Tooltip } from './Tooltip.vue';
export { default as TooltipContent } from './TooltipContent.vue';
export { default as TooltipProvider } from './TooltipProvider.vue';
export { default as TooltipTrigger } from './TooltipTrigger.vue';

6
frontend/src/features/admin/agents/AgentForm.vue
View File

@@ -12,7 +12,7 @@
<div class="space-y-4 flex-2">
<div class="flex items-center gap-3">
<h3 class="text-lg font-semibold text-gray-900">
<h3 class="text-lg font-semibold text-gray-900 dark:text-foreground">
{{ props.initialValues.first_name }} {{ props.initialValues.last_name }}
</h3>
<Badge :class="['px-2 rounded-full text-xs font-medium', availabilityStatus.color]">
@@ -25,7 +25,7 @@
<Clock class="w-5 h-5 text-gray-400" />
<div>
<p class="text-sm text-gray-500">{{ $t('form.field.lastActive') }}</p>
<p class="text-sm font-medium text-gray-700">
<p class="text-sm font-medium text-gray-700 dark:text-foreground">
{{
props.initialValues.last_active_at
? format(new Date(props.initialValues.last_active_at), 'PPpp')
@@ -38,7 +38,7 @@
<LogIn class="w-5 h-5 text-gray-400" />
<div>
<p class="text-sm text-gray-500">{{ $t('form.field.lastLogin') }}</p>
<p class="text-sm font-medium text-gray-700">
<p class="text-sm font-medium text-gray-700 dark:text-foreground">
{{
props.initialValues.last_login_at
? format(new Date(props.initialValues.last_login_at), 'PPpp')

2
frontend/src/features/admin/automation/ActionBox.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="space-y-5 rounded-lg" :class="{ 'box p-5': actions.length > 0 }">
<div class="space-y-5 rounded" :class="{ 'box p-5': actions.length > 0 }">
<div class="space-y-5">
<div v-for="(action, index) in actions" :key="index" class="space-y-5">
<div v-if="index > 0">

2
frontend/src/features/admin/automation/RuleBox.vue
View File

@@ -23,7 +23,7 @@
</RadioGroup>
</div>
<div class="space-y-5 rounded-lg" :class="{ 'box p-5': ruleGroup.rules?.length > 0 }">
<div class="space-y-5 rounded" :class="{ 'box p-5': ruleGroup.rules?.length > 0 }">
<div class="space-y-5">
<div v-for="(rule, index) in ruleGroup.rules" :key="rule" class="space-y-5">
<div v-if="index > 0">

2
frontend/src/features/admin/macros/ActionBuilder.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="space-y-5 rounded-lg">
<div class="space-y-5 rounded">
<div class="space-y-5">
<div v-for="(action, index) in model" :key="index" class="space-y-5">
<hr v-if="index" class="border-t-2 border-dotted border-gray-300" />

2
frontend/src/features/admin/roles/RoleForm.vue
View File

@@ -30,7 +30,7 @@
<div
v-for="entity in permissions"
:key="entity.name"
class="rounded-lg border border-border bg-card"
class="rounded border border-border bg-card"
>
<div class="border-b border-border bg-muted/30 px-5 py-3">
<h4 class="font-medium text-card-foreground">{{ entity.name }}</h4>

4
frontend/src/features/admin/sla/SLAForm.vue
View File

@@ -95,7 +95,7 @@
<div class="flex items-center justify-between mb-5">
<div class="flex items-center gap-3">
<span
class="flex items-center justify-center w-8 h-8 rounded-lg"
class="flex items-center justify-center w-8 h-8 rounded"
:class="{
'bg-red-100/80 text-red-600': notification.type === 'breach',
'bg-amber-100/80 text-amber-600': notification.type === 'warning'
@@ -264,7 +264,7 @@
<!-- Empty State -->
<div
v-else
class="flex flex-col items-center justify-center p-8 space-y-3 rounded-xl bg-muted/30 border border-dashed"
class="flex flex-col items-center justify-center p-8 space-y-3 rounded bg-muted/30 border border-dashed"
>
<Bell class="w-8 h-8 text-muted-foreground" />
<p class="text-sm text-muted-foreground">{{ t('admin.sla.noAlertsConfigured') }}</p>

6
frontend/src/features/command/CommandBox.vue
View File

@@ -64,7 +64,7 @@
:value="macro.label"
:data-index="index"
@select="handleApplyMacro(macro)"
class="px-3 py-2 rounded-md cursor-pointer transition-all duration-200 hover:bg-primary/10 hover:text-primary"
class="px-3 py-2 rounded cursor-pointer transition-all duration-200 hover:bg-primary/10 hover:text-primary"
>
<div class="flex items-center gap-2">
<Zap size="14" class="text-primary shrink-0" />
@@ -84,7 +84,7 @@
{{ $t('command.replyPreview') }}
</p>
<div
class="w-full min-h-200 p-2 bg-muted/50 rounded-md overflow-auto shadow-sm native-html"
class="w-full min-h-200 p-2 bg-muted/50 rounded overflow-auto shadow-sm native-html"
v-dompurify-html="replyContent"
/>
</div>
@@ -98,7 +98,7 @@
<div
v-for="action in otherActions"
:key="action.type"
class="flex items-center gap-2 px-2 py-1.5 bg-muted/30 hover:bg-accent hover:text-accent-foreground rounded-md text-xs transition-all duration-200 group"
class="flex items-center gap-2 px-2 py-1.5 bg-muted/30 hover:bg-accent hover:text-accent-foreground rounded text-xs transition-all duration-200 group"
>
<div
class="p-1 bg-primary/10 rounded-full group-hover:bg-primary/20 transition-colors duration-200"

14
frontend/src/features/contact/ContactNotes.vue
View File

@@ -2,7 +2,7 @@
<div class="w-full space-y-6 pb-8 relative">
<!-- Header -->
<div class="flex items-center justify-between mb-4">
<span class="text-xl font-semibold text-gray-900">{{ $t('globals.terms.note', 2) }}</span>
<span class="text-xl font-semibold text-gray-900 dark:text-foreground">{{ $t('globals.terms.note', 2) }}</span>
<Button
variant="outline"
size="sm"
@@ -54,7 +54,7 @@
class="overflow-hidden border-gray-2 hover:border-gray-300 transition-all duration-200 box hover:shadow"
>
<!-- Header -->
<CardHeader class="bg-gray-50/50 border-b p-2">
<CardHeader class="bg-gray-50/50 dark:bg-secondary border-b p-2">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<Avatar class="border border-gray-200 shadow-sm">
@@ -64,7 +64,7 @@
</AvatarFallback>
</Avatar>
<div>
<p class="text-sm font-medium text-gray-900">{{ note.first_name }} {{ note.last_name }}</p>
<p class="text-sm font-medium text-gray-900 dark:text-foreground">{{ note.first_name }} {{ note.last_name }}</p>
<p class="text-xs text-muted-foreground flex items-center">
<ClockIcon class="h-3 w-3 mr-1 inline-block opacity-70" />
{{ formatDate(note.created_at) }}
@@ -109,13 +109,13 @@
<!-- No notes message -->
<div
v-if="notes.length === 0 && !isAddingNote && !isLoading"
class="box border-dashed p-10 text-center bg-gray-50/50 mt-6"
class="box border-dashed p-10 text-center bg-gray-50/50 mt-6 dark:bg-background"
>
<div class="flex flex-col items-center">
<div class="rounded-full bg-gray-100 p-4 mb-2">
<MessageSquareIcon class="text-gray-400" size="25" />
<div class="rounded-full bg-gray-100 dark:bg-foreground p-4 mb-2">
<MessageSquareIcon class="text-gray-400 dark:text-background" size="25" />
</div>
<h3 class="mt-2 text-base font-medium text-gray-900">{{ $t('contact.notes.empty') }}</h3>
<h3 class="mt-2 text-base font-medium text-gray-900 dark:text-foreground">{{ $t('contact.notes.empty') }}</h3>
<p class="mt-1 text-sm text-muted-foreground max-w-sm mx-auto">
{{ $t('contact.notes.help') }}
</p>

2
frontend/src/features/conversation/Conversation.vue
View File

@@ -12,7 +12,7 @@
<DropdownMenu>
<DropdownMenuTrigger>
<div
class="flex items-center space-x-1 cursor-pointer bg-primary px-2 py-1 rounded-md text-sm"
class="flex items-center space-x-1 cursor-pointer bg-primary px-2 py-1 rounded text-sm"
v-if="!conversationStore.conversation.loading"
>
<span class="text-secondary font-medium inline-block">

19
frontend/src/features/conversation/ConversationTextEditor.vue
View File

@@ -4,7 +4,7 @@
:editor="editor"
:tippy-options="{ duration: 100 }"
v-if="editor"
class="bg-white p-1 box will-change-transform"
class="bg-background p-1 box will-change-transform"
>
<div class="flex space-x-1 items-center">
<DropdownMenu v-if="aiPrompts.length > 0">
@@ -32,7 +32,7 @@
variant="ghost"
@click.prevent="isBold = !isBold"
:active="isBold"
:class="{ 'bg-gray-200': isBold }"
:class="{ 'bg-gray-200 dark:bg-secondary': isBold }"
>
<Bold size="14" />
</Button>
@@ -41,7 +41,7 @@
variant="ghost"
@click.prevent="isItalic = !isItalic"
:active="isItalic"
:class="{ 'bg-gray-200': isItalic }"
:class="{ 'bg-gray-200 dark:bg-secondary': isItalic }"
>
<Italic size="14" />
</Button>
@@ -49,7 +49,7 @@
size="sm"
variant="ghost"
@click.prevent="toggleBulletList"
:class="{ 'bg-gray-200': editor?.isActive('bulletList') }"
:class="{ 'bg-gray-200 dark:bg-secondary': editor?.isActive('bulletList') }"
>
<List size="14" />
</Button>
@@ -58,7 +58,7 @@
size="sm"
variant="ghost"
@click.prevent="toggleOrderedList"
:class="{ 'bg-gray-200': editor?.isActive('orderedList') }"
:class="{ 'bg-gray-200 dark:bg-secondary': editor?.isActive('orderedList') }"
>
<ListOrdered size="14" />
</Button>
@@ -66,16 +66,16 @@
size="sm"
variant="ghost"
@click.prevent="openLinkModal"
:class="{ 'bg-gray-200': editor?.isActive('link') }"
:class="{ 'bg-gray-200 dark:bg-secondary': editor?.isActive('link') }"
>
<LinkIcon size="14" />
</Button>
<div v-if="showLinkInput" class="flex space-x-2 p-2 bg-white border rounded-lg">
<input
<div v-if="showLinkInput" class="flex space-x-2 p-2 bg-background border rounded">
<Input
v-model="linkUrl"
type="text"
placeholder="Enter link URL"
class="border p-1 text-sm"
class="border p-1 text-sm w-[200px]"
/>
<Button size="sm" @click="setLink">
<Check size="14" />
@@ -111,6 +111,7 @@ import {
DropdownMenuItem,
DropdownMenuTrigger
} from '@/components/ui/dropdown-menu'
import { Input } from '@/components/ui/input'
import Placeholder from '@tiptap/extension-placeholder'
import Image from '@tiptap/extension-image'
import StarterKit from '@tiptap/starter-kit'

26
frontend/src/features/conversation/CreateConversation.vue
View File

@@ -5,7 +5,7 @@
<DialogTitle>
{{
$t('globals.messages.new', {
name: $t('globals.terms.conversation')
name: $t('globals.terms.conversation').toLowerCase()
})
}}
</DialogTitle>
@@ -28,13 +28,13 @@
<ul
v-if="searchResults.length"
class="border rounded p-2 max-h-60 overflow-y-auto absolute bg-white w-full z-50 shadow-lg"
class="border rounded p-2 max-h-60 overflow-y-auto absolute w-full z-50 shadow-lg bg-background"
>
<li
v-for="contact in searchResults"
:key="contact.email"
@click="selectContact(contact)"
class="cursor-pointer p-2 hover:bg-gray-100 rounded"
class="cursor-pointer p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
>
{{ contact.first_name }} {{ contact.last_name }} ({{ contact.email }})
</li>
@@ -125,11 +125,17 @@
<template #selected="{ selected }">
<div class="flex items-center gap-3">
<div class="w-7 h-7 flex items-center justify-center" v-if="selected">
{{ selected?.emoji }}
<span v-if="selected?.emoji">{{ selected?.emoji }}</span>
<div
v-else
class="text-primary bg-muted rounded-full w-7 h-7 flex items-center justify-center"
>
<Users size="14" />
</div>
</div>
<span class="text-sm">{{
selected?.label || t('form.field.selectTeam')
}}</span>
<span class="text-sm">
{{ selected?.label || t('form.field.selectTeam') }}
</span>
</div>
</template>
</ComboBox>
@@ -167,11 +173,7 @@
<div class="flex items-center gap-3">
<Avatar class="w-7 h-7" v-if="selected">
<AvatarImage
:src="
selected?.value === 'none'
? ''
: selected?.avatar_url || ''
"
:src="selected?.value === 'none' ? '' : selected?.avatar_url || ''"
:alt="selected?.value === 'none' ? 'N' : selected?.label?.slice(0, 2)"
/>
<AvatarFallback>

9
frontend/src/features/conversation/MacroActionsPreview.vue
View File

@@ -4,19 +4,18 @@
<div
v-for="action in actions"
:key="action.type"
class="flex items-center bg-white border border-gray-200 rounded shadow-sm transition-all duration-300 ease-in-out hover:shadow-md group gap-2 py-1"
class="flex items-center border border-gray-200 rounded shadow-sm transition-all duration-300 ease-in-out hover:shadow-md group gap-2"
>
<div class="flex items-center space-x-2 px-2">
<component
:is="getIcon(action.type)"
size="16"
class="text-gray-500 text-primary group-hover:text-primary"
class="text-gray-500 text-primary"
/>
<Tooltip>
<TooltipTrigger as-child>
<div
class="max-w-[12rem] overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-primary group-hover:text-gray-900"
>
class="max-w-[12rem] overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-primary group-hover:text-gray-900 dark:group-hover:text-gray-100">
{{ getDisplayValue(action) }}
</div>
</TooltipTrigger>
@@ -27,7 +26,7 @@
</div>
<button
@click.stop="onRemove(action)"
class="pr-2 text-gray-400 hover:text-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 rounded transition-colors duration-300 ease-in-out"
class="p-2 text-gray-400 hover:text-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 rounded transition-colors duration-300 ease-in-out"
title="Remove action"
>
<X size="14" />

4
frontend/src/features/conversation/ReplyBox.vue
View File

@@ -42,7 +42,7 @@
<Dialog :open="isEditorFullscreen" @update:open="isEditorFullscreen = false">
<DialogContent
class="max-w-[60%] max-h-[75%] h-[70%] bg-card text-card-foreground p-4 flex flex-col"
:class="{ '!bg-[#FEF1E1]': messageType === 'private_note' }"
:class="{ '!bg-[#FEF1E1] dark:!bg-[#4C3A24]': messageType === 'private_note' }"
@escapeKeyDown="isEditorFullscreen = false"
:hide-close-button="true"
>
@@ -80,7 +80,7 @@
<!-- Main Editor non-fullscreen -->
<div
class="bg-card text-card-foreground box m-2 px-2 pt-2 flex flex-col"
:class="{ '!bg-[#FEF1E1]': messageType === 'private_note' }"
:class="{ '!bg-[#FEF1E1] dark:!bg-[#4C3A24]': messageType === 'private_note' }"
v-if="!isEditorFullscreen"
>
<ReplyBoxContent

14
frontend/src/features/conversation/ReplyBoxContent.vue
View File

@@ -6,18 +6,18 @@
class="flex justify-between items-center"
:class="{ 'mb-4': !isFullscreen, 'border-b border-border pb-4': isFullscreen }"
>
<Tabs v-model="messageType" class="rounded-lg border">
<TabsList class="bg-muted p-1 rounded-lg">
<Tabs v-model="messageType" class="rounded border">
<TabsList class="bg-muted p-1 rounded">
<TabsTrigger
value="reply"
class="px-3 py-1 rounded-lg transition-colors duration-200"
class="px-3 py-1 rounded transition-colors duration-200"
:class="{ 'bg-background text-foreground': messageType === 'reply' }"
>
{{ $t('replyBox.reply') }}
</TabsTrigger>
<TabsTrigger
value="private_note"
class="px-3 py-1 rounded-lg transition-colors duration-200"
class="px-3 py-1 rounded transition-colors duration-200"
:class="{ 'bg-background text-foreground': messageType === 'private_note' }"
>
{{ $t('replyBox.privateNote') }}
@@ -48,7 +48,7 @@
type="text"
:placeholder="t('replyBox.emailAddresess')"
v-model="to"
class="flex-grow px-3 py-2 text-sm border rounded-md focus:ring-2 focus:ring-ring"
class="flex-grow px-3 py-2 text-sm border rounded focus:ring-2 focus:ring-ring"
@blur="validateEmails('to')"
/>
</div>
@@ -58,7 +58,7 @@
type="text"
:placeholder="t('replyBox.emailAddresess')"
v-model="cc"
class="flex-grow px-3 py-2 text-sm border rounded-md focus:ring-2 focus:ring-ring"
class="flex-grow px-3 py-2 text-sm border rounded focus:ring-2 focus:ring-ring"
@blur="validateEmails('cc')"
/>
<Button
@@ -75,7 +75,7 @@
type="text"
:placeholder="t('replyBox.emailAddresess')"
v-model="bcc"
class="flex-grow px-3 py-2 text-sm border rounded-md focus:ring-2 focus:ring-ring"
class="flex-grow px-3 py-2 text-sm border rounded focus:ring-2 focus:ring-ring"
@blur="validateEmails('bcc')"
/>
</div>

4
frontend/src/features/conversation/list/ConversationEmptyList.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="flex flex-col items-center justify-center h-64 space-y-2">
<component :is="icon" :stroke-width="1" :size="50" />
<h1 class="text-md font-semibold text-gray-800">
<h1 class="text-md font-semibold text-gray-800 dark:text-foreground">
{{ title }}
</h1>
<p class="text-gray-600 text-center text-sm">
<p class="text-gray-600 dark:text-gray-300 text-center text-sm">
{{ message }}
</p>
</div>

8
frontend/src/features/conversation/list/ConversationList.vue
View File

@@ -2,12 +2,12 @@
<div class="h-screen flex flex-col">
<!-- Header -->
<div class="flex items-center space-x-4 px-2 h-12 border-b shrink-0">
<SidebarTrigger class="h-4 w-4" />
<span class="text-xl font-semibold text-gray-800">{{ title }}</span>
<SidebarTrigger class="cursor-pointer" />
<span class="text-xl font-semibold">{{ title }}</span>
</div>
<!-- Filters -->
<div class="bg-white p-2 flex justify-between items-center">
<div class="p-2 flex justify-between items-center">
<!-- Status dropdown-menu, hidden when a view is selected as views are pre-filtered -->
<DropdownMenu v-if="!route.params.viewID">
<DropdownMenuTrigger asChild>
@@ -107,7 +107,7 @@
:conversation="conversation"
:currentConversation="conversationStore.current"
:contactFullName="conversationStore.getContactFullName(conversation.uuid)"
class="transition-colors duration-200 hover:bg-gray-50"
class="transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-gray-600"
/>
</div>

9
frontend/src/features/conversation/list/ConversationListItem.vue
View File

@@ -1,8 +1,9 @@
<template>
<div
class="group relative p-4 transition-all duration-200 ease-in-out cursor-pointer hover:bg-accent/20 border-gray-200 last:border-b-0 hover:shadow-sm"
class="group relative p-4 transition-all duration-200 ease-in-out cursor-pointer border-b last:border-b-0 hover:shadow-sm border-gray-200 dark:border-gray-700 hover:bg-accent/20 dark:hover:bg-accent/30"
:class="{
'bg-accent/30 border-l-4': conversation.uuid === currentConversation?.uuid
'bg-accent/30 dark:bg-accent border-l-4 border-accent-500 dark:border-accent-400':
conversation.uuid === currentConversation?.uuid
}"
@click="navigateToConversation(conversation.uuid)"
>
@@ -23,7 +24,7 @@
<div class="flex-1 min-w-0 space-y-2">
<!-- Contact name and last message time -->
<div class="flex items-center justify-between gap-2">
<h3 class="text-sm font-semibold text-gray-900 truncate">
<h3 class="text-sm font-semibold truncate">
{{ contactFullName }}
</h3>
<span class="text-xs text-gray-400 whitespace-nowrap" v-if="conversation.last_message_at">
@@ -39,7 +40,7 @@
<!-- Message preview and unread count -->
<div class="flex items-start justify-between gap-2">
<div class="text-sm text-gray-600 flex items-center gap-1.5 flex-1 break-all">
<div class="text-sm flex items-center gap-1.5 flex-1 break-all">
<Reply
class="text-green-600 flex-shrink-0"
size="15"

6
frontend/src/features/conversation/message/AgentMessageBubble.vue
View File

@@ -14,10 +14,10 @@
<div
class="flex flex-col justify-end message-bubble relative"
:class="{
'!bg-[#FEF1E1]': message.private,
'bg-white border border-border': !message.private,
'bg-[#FEF1E1] dark:bg-[#4C3A24]': message.private,
'border border-border': !message.private,
'opacity-50 animate-pulse': message.status === 'pending',
'bg-red-50 border-red-200': message.status === 'failed'
'border-red-200': message.status === 'failed'
}"
>
<!-- Message Envelope -->

2
frontend/src/features/conversation/message/ContactMessageBubble.vue
View File

@@ -42,7 +42,7 @@
<div
v-if="hasQuotedContent"
@click="toggleQuote"
class="text-xs cursor-pointer text-muted-foreground px-2 py-1 w-max hover:bg-muted hover:text-primary rounded-md transition-all"
class="text-xs cursor-pointer text-muted-foreground px-2 py-1 w-max hover:bg-muted hover:text-primary rounded transition-all"
>
{{
showQuotedText ? t('conversation.hideQuotedText') : t('conversation.showQuotedText')

2
frontend/src/features/conversation/message/MessageList.vue
View File

@@ -58,7 +58,7 @@
<div v-show="!isAtBottom" class="absolute bottom-5 right-6 z-10">
<button
@click="handleScrollToBottom"
class="w-10 h-10 rounded-full flex items-center justify-center shadow-lg border bg-white text-primary transition-colors duration-200 hover:bg-gray-100"
class="w-10 h-10 rounded-full flex items-center justify-center shadow-lg border bg-background text-primary transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
<ChevronDown size="18" />
</button>

6
frontend/src/features/conversation/message/attachment/AttachmentsPreview.vue
View File

@@ -4,16 +4,16 @@
<div
v-for="attachment in allAttachments"
:key="attachment.uuid || attachment.tempId"
class="flex items-center bg-white border border-gray-200 rounded shadow-sm transition-all duration-300 ease-in-out hover:shadow-md group px-2 gap-2"
class="flex items-center bg-background border border-gray-200 rounded shadow-sm transition-all duration-300 ease-in-out hover:shadow-md group px-2 gap-2"
>
<div class="flex items-center space-x-1 py-1">
<DotLoader v-if="attachment.loading"/>
<PaperclipIcon v-else size="16" class="text-gray-500 group-hover:text-primary" />
<PaperclipIcon v-else size="16" />
<Tooltip>
<TooltipTrigger as-child>
<div
class="max-w-[12rem] overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-primary group-hover:text-gray-900"
class="max-w-[12rem] overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-primary group-hover:text-gray-900 dark:group-hover:text-foreground"
>
{{ getAttachmentName(attachment.filename) }}
<span class="text-xs text-gray-500 ml-1">

10
frontend/src/features/conversation/sidebar/ConversationSideBar.vue
View File

@@ -1,9 +1,9 @@
<template>
<div>
<div class="text-foreground">
<ConversationSideBarContact class="p-4" />
<Accordion type="multiple" collapsible v-model="accordionState">
<AccordionItem value="actions" class="border-0 mb-2">
<AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded-lg mx-2">
<AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded mx-2">
{{ $t('conversation.sidebar.action', 2) }}
</AccordionTrigger>
@@ -124,7 +124,7 @@
<!-- Information -->
<AccordionItem value="information" class="border-0 mb-2">
<AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded-lg mx-2">
<AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded mx-2">
{{ $t('conversation.sidebar.information') }}
</AccordionTrigger>
<AccordionContent class="p-4">
@@ -138,7 +138,7 @@
class="border-0 mb-2"
v-if="customAttributeStore.contactAttributeOptions.length > 0"
>
<AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded-lg mx-2">
<AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded mx-2">
{{ $t('conversation.sidebar.contactAttributes') }}
</AccordionTrigger>
<AccordionContent class="p-4">
@@ -153,7 +153,7 @@
<!-- Previous conversations -->
<AccordionItem value="previous_conversations" class="border-0 mb-2">
<AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded-lg mx-2">
<AccordionTrigger class="bg-muted px-4 py-3 text-sm font-medium rounded mx-2">
{{ $t('conversation.sidebar.previousConvo') }}
</AccordionTrigger>
<AccordionContent class="p-4">

14
frontend/src/features/conversation/sidebar/ConversationSideBarContact.vue
View File

@@ -7,11 +7,14 @@
{{ conversation?.contact?.first_name?.toUpperCase().substring(0, 2) }}
</AvatarFallback>
</Avatar>
<PanelLeft
class="cursor-pointer"
<Button
variant="ghost"
size="icon"
class="h-7 w-7"
@click="emitter.emit(EMITTER_EVENTS.CONVERSATION_SIDEBAR_TOGGLE)"
size="20"
/>
>
<ViewVerticalIcon />
</Button>
</div>
<div class="h-6 flex items-center gap-2">
@@ -51,7 +54,8 @@
<script setup>
import { computed } from 'vue'
import { PanelLeft } from 'lucide-vue-next'
import { ViewVerticalIcon } from '@radix-icons/vue'
import { Button } from '@/components/ui/button'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Mail, Phone, ExternalLink } from 'lucide-vue-next'
import { useEmitter } from '@/composables/useEmitter'

2
frontend/src/features/conversation/sidebar/ConversationSideBarWrapper.vue
View File

@@ -14,7 +14,7 @@
<button
v-if="!conversationSidebarOpen"
@click="toggleSidebar"
class="absolute right-full top-16 p-2 rounded-l-full bg-white text-primary hover:bg-opacity-90 transition-all duration-200 shadow-lg group"
class="absolute right-full top-16 p-2 rounded-l-full bg-background text-primary hover:bg-opacity-90 transition-all duration-200 shadow-lg group dark:border"
>
<ChevronLeft size="16" class="group-hover:scale-110 transition-transform" />
</button>

2
frontend/src/features/conversation/sidebar/PreviousConversations.vue
View File

@@ -19,7 +19,7 @@
type: 'assigned'
}
}"
class="block p-2 rounded-md hover:bg-muted"
class="block p-2 rounded hover:bg-muted"
>
<div class="flex items-center justify-between">
<div class="flex flex-col">

6
frontend/src/features/reports/DashboardCard.vue
View File

@@ -1,11 +1,7 @@
<template>
<div class="flex flex-1 flex-col gap-x-5 box p-5 space-y-5 bg-white">
<div class="flex flex-1 flex-col gap-x-5 box p-5 space-y-5">
<div class="flex items-center space-x-2">
<p class="text-2xl flex items-center">{{ title }}</p>
<div class="bg-green-100/70 flex items-center space-x-2 px-1 rounded">
<span class="blinking-dot"></span>
<p class="uppercase text-xs">{{ $t('globals.terms.live') }}</p>
</div>
</div>
<div class="flex justify-between pr-32">
<div

2
frontend/src/features/search/SearchHeader.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div class="flex items-center space-x-4 px-2 h-12">
<SidebarTrigger class="cursor-pointer w-4 h-4 text-black" />
<SidebarTrigger class="cursor-pointer" />
<div class="flex-1 flex items-center">
<Search class="w-5 h-5" />
<Separator orientation="vertical" />

43
frontend/src/features/search/SearchResults.vue
View File

@@ -1,26 +1,33 @@
<template>
<div class="max-w-5xl mx-auto p-6 bg-background min-h-screen">
<div class="max-w-5xl mx-auto p-6 min-h-screen">
<div class="space-y-8">
<div
v-for="(items, type) in results"
:key="type"
class="bg-card rounded-lg shadow-md overflow-hidden"
class="bg-card rounded shadow overflow-hidden"
>
<h2 class="bg-primary text-lg font-bold text-secondary py-2 px-6 capitalize">
<!-- Header for each section -->
<h2
class="bg-primary dark:bg-primary text-lg font-bold text-white dark:text-primary-foreground py-2 px-6 capitalize"
>
{{ type }}
</h2>
<div v-if="items.length === 0" class="p-6 text-muted-foreground">
{{ $t('globals.messages.noResults', {
name: type
}) }}
<!-- No results message -->
<div v-if="items.length === 0" class="p-6 text-gray-500 dark:text-muted-foreground">
{{
$t('globals.messages.noResults', {
name: type
})
}}
</div>
<div class="divide-y divide-border">
<!-- Results list -->
<div class="divide-y divide-gray-200 dark:divide-border">
<div
v-for="item in items"
:key="item.id || item.uuid"
class="p-6 hover:bg-accent transition duration-300 ease-in-out group"
class="p-6 hover:bg-gray-100 dark:hover:bg-accent transition duration-300 ease-in-out group"
>
<router-link
:to="{
@@ -34,8 +41,9 @@
>
<div class="flex justify-between items-start">
<div class="flex-grow">
<!-- Reference number -->
<div
class="text-sm font-semibold text-primary mb-2 group-hover:text-primary transition duration-300"
class="text-sm font-semibold mb-2 group-hover:text-primary dark:group-hover:text-primary transition duration-300"
>
#{{
type === 'conversations'
@@ -43,14 +51,18 @@
: item.conversation_reference_number
}}
</div>
<!-- Content -->
<div
class="text-card-foreground font-medium mb-2 text-lg group-hover:text-foreground transition duration-300"
class="text-gray-900 dark:text-card-foreground font-medium mb-2 text-lg group-hover:text-gray-950 dark:group-hover:text-foreground transition duration-300"
>
{{
truncateText(type === 'conversations' ? item.subject : item.text_content, 100)
}}
</div>
<div class="text-sm text-muted-foreground flex items-center">
<!-- Timestamp -->
<div class="text-sm text-gray-500 dark:text-muted-foreground flex items-center">
<ClockIcon class="h-4 w-4 mr-1" />
{{
formatDate(
@@ -59,11 +71,13 @@
}}
</div>
</div>
<!-- Right arrow icon -->
<div
class="bg-secondary rounded-full p-2 group-hover:bg-primary transition duration-300"
class="bg-gray-200 dark:bg-secondary rounded-full p-2 group-hover:bg-primary dark:group-hover:bg-primary transition duration-300"
>
<ChevronRightIcon
class="h-5 w-5 text-secondary-foreground group-hover:text-primary-foreground"
class="h-5 w-5 text-gray-700 dark:text-secondary-foreground group-hover:text-white dark:group-hover:text-primary-foreground"
aria-hidden="true"
/>
</div>
@@ -75,7 +89,6 @@
</div>
</div>
</template>
<script setup>
import { ChevronRightIcon, ClockIcon } from 'lucide-vue-next'
import { format, parseISO } from 'date-fns'

29
frontend/src/features/sla/SlaBadge.vue
View File

@@ -1,9 +1,9 @@
<template>
<div v-if="dueAt" class="flex justify-start items-center space-x-2">
<!-- Overdue-->
<span v-if="sla?.status === 'overdue'" key="overdue" class="sla-badge box sla-overdue">
<AlertCircle size="12" class="text-red-800" />
<span class="sla-text text-red-800">
<span v-if="sla?.status === 'overdue'" key="overdue" class="sla-badge sla-overdue">
<AlertCircle size="14" class="shrink-0 text-red-600 dark:text-red-300" stroke-width="2" />
<span class="sla-text">
<span v-if="!showExtra">{{ label }} {{ $t('sla.overdue') }}</span>
<span v-else>{{ label }} {{ $t('sla.overdueBy') }} {{ sla.value }} </span>
</span>
@@ -13,9 +13,9 @@
<span
v-else-if="sla?.status === 'hit' && showExtra"
key="sla-hit"
class="sla-badge box sla-hit"
class="sla-badge sla-hit"
>
<CheckCircle size="12" />
<CheckCircle size="14" class="shrink-0 text-green-600 dark:text-green-300" stroke-width="2" />
<span class="sla-text">{{ label }} {{ $t('sla.met') }}</span>
</span>
@@ -23,9 +23,9 @@
<span
v-else-if="sla?.status === 'remaining'"
key="remaining"
class="sla-badge box sla-remaining"
class="sla-badge sla-remaining"
>
<Clock size="12" />
<Clock size="14" class="shrink-0 text-amber-600 dark:text-amber-300" stroke-width="2" />
<span class="sla-text">{{ label }} {{ sla.value }}</span>
</span>
</div>
@@ -60,22 +60,27 @@ watch(
<style scoped>
.sla-badge {
@apply inline-flex items-center justify-center p-1 text-xs space-x-1 w-full rounded-lg;
@apply inline-flex items-center px-2 py-1 rounded-md border transition-all
text-xs font-medium tracking-tight space-x-1.5
hover:scale-[98%] hover:shadow-sm;
}
.sla-overdue {
@apply bg-red-100 text-red-800;
@apply bg-red-50/80 border-red-100 text-red-600
dark:bg-red-900/40 dark:border-red-800/20 dark:text-red-300;
}
.sla-hit {
@apply bg-green-100 text-green-800;
@apply bg-green-50/80 border-green-100 text-green-600
dark:bg-green-900/40 dark:border-green-800/20 dark:text-green-300;
}
.sla-remaining {
@apply bg-yellow-100 text-yellow-800;
@apply bg-amber-50/80 border-amber-100 text-amber-600
dark:bg-amber-900/40 dark:border-amber-800/20 dark:text-amber-300;
}
.sla-text {
@apply text-[0.65rem];
@apply whitespace-nowrap;
}
</style>

2
frontend/src/layouts/admin/AdminPageWithHelp.vue
View File

@@ -3,7 +3,7 @@
<div class="w-8/12">
<slot name="content" />
</div>
<div class="rounded-lg w-3/12 p-2 space-y-2 self-start">
<div class="rounded w-3/12 p-2 space-y-2 self-start">
<slot name="help" />
</div>
</div>

12
frontend/src/views/admin/automations/CreateOrEditRule.vue
View File

@@ -122,13 +122,21 @@
<div class="flex justify-center">
<div class="flex items-center space-x-2">
<Button
:class="[groupOperator === 'AND' ? 'bg-black' : 'bg-gray-100 text-black']"
:class="[
groupOperator === 'AND'
? 'bg-black text-white dark:bg-white dark:text-black'
: 'bg-gray-100 text-black dark:bg-secondary dark:text-white'
]"
@click.prevent="toggleGroupOperator('AND')"
>
{{ $t('admin.automation.and') }}
</Button>
<Button
:class="[groupOperator === 'OR' ? 'bg-black' : 'bg-gray-100 text-black']"
:class="[
groupOperator === 'OR'
? 'bg-black text-white dark:bg-white dark:text-black'
: 'bg-gray-100 text-black dark:bg-secondary dark:text-white'
]"
@click.prevent="toggleGroupOperator('OR')"
>
{{ $t('admin.automation.or') }}

6
frontend/src/views/auth/ResetPasswordView.vue
View File

@@ -20,12 +20,12 @@
:placeholder="t('auth.enterEmail')"
v-model.trim="resetForm.email"
:class="{ 'border-destructive': emailHasError }"
class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded-lg py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
/>
</div>
<Button
class="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded-lg py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
class="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
:disabled="isLoading"
type="submit"
>
@@ -60,7 +60,7 @@
v-if="errorMessage"
:errorMessage="errorMessage"
:border="true"
class="w-full bg-destructive/10 text-destructive border-destructive/20 p-3 rounded-lg text-sm"
class="w-full bg-destructive/10 text-destructive border-destructive/20 p-3 rounded text-sm"
/>
<div class="text-center">

8
frontend/src/views/auth/SetPasswordView.vue
View File

@@ -25,7 +25,7 @@
:placeholder="t('auth.enterNewPassword')"
v-model="passwordForm.password"
:class="{ 'border-destructive': passwordHasError }"
class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded-lg py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
/>
</div>
@@ -40,12 +40,12 @@
:placeholder="t('auth.confirmNewPassword')"
v-model="passwordForm.confirmPassword"
:class="{ 'border-destructive': confirmPasswordHasError }"
class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded-lg py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
/>
</div>
<Button
class="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded-lg py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
class="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
:disabled="isLoading"
type="submit"
>
@@ -80,7 +80,7 @@
v-if="errorMessage"
:errorMessage="errorMessage"
:border="true"
class="w-full bg-destructive/10 text-destructive border-destructive/20 p-3 rounded-lg text-sm"
class="w-full bg-destructive/10 text-destructive border-destructive/20 p-3 rounded text-sm"
/>
</CardContent>
</Card>

10
frontend/src/views/auth/UserLoginView.vue
View File

@@ -21,7 +21,7 @@
variant="outline"
type="button"
@click="redirectToOIDC(oidcProvider)"
class="w-full bg-card hover:bg-secondary text-foreground border-border rounded-lg py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
class="w-full bg-card hover:bg-secondary text-foreground border-border rounded py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
>
<img
:src="oidcProvider.logo_url"
@@ -55,7 +55,7 @@
:placeholder="t('auth.enterEmail')"
v-model.trim="loginForm.email"
:class="{ 'border-destructive': emailHasError }"
class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded-lg py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
/>
</div>
@@ -70,7 +70,7 @@
:placeholder="t('auth.enterPassword')"
v-model="loginForm.password"
:class="{ 'border-destructive': passwordHasError }"
class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded-lg py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
class="w-full bg-card border-border text-foreground placeholder:text-muted-foreground rounded py-2 px-3 focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-200 ease-in-out"
/>
</div>
@@ -84,7 +84,7 @@
</div>
<Button
class="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded-lg py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
class="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded py-2 transition-all duration-200 ease-in-out transform hover:scale-105"
:disabled="isLoading"
type="submit"
>
@@ -119,7 +119,7 @@
v-if="errorMessage"
:errorMessage="errorMessage"
:border="true"
class="w-full bg-destructive/10 text-destructive border-destructive/20 p-3 rounded-lg text-sm"
class="w-full bg-destructive/10 text-destructive border-destructive/20 p-3 rounded text-sm"
/>
</CardContent>
</Card>

2
frontend/src/views/contact/ContactDetailView.vue
View File

@@ -17,7 +17,7 @@
/>
<div>
<h2 class="text-2xl font-bold text-gray-900">
<h2 class="text-2xl font-bold text-gray-900 dark:text-foreground">
{{ contact.first_name }} {{ contact.last_name }}
</h2>
</div>

4
frontend/src/views/reports/DashboardView.vue
View File

@@ -18,10 +18,10 @@
:labels="agentStatusLabels"
/>
</div>
<div class="rounded-lg box w-full p-5 bg-white">
<div class="rounded box w-full p-5">
<LineChart :data="chartData.processedData" />
</div>
<div class="rounded-lg box w-full p-5 bg-white">
<div class="rounded box w-full p-5">
<BarChart :data="chartData.status_summary" />
</div>
</div>

192
frontend/tailwind.config.js
View File

@@ -4,7 +4,7 @@ const typography = require("@tailwindcss/typography")
/** @type {import('tailwindcss').Config} */
module.exports = {
mode: 'jit',
darkMode: ["class"],
darkMode: "class",
safelist: ["dark"],
prefix: "",
@@ -18,81 +18,114 @@ module.exports = {
theme: {
container: {
center: true,
padding: "2rem",
padding: '2rem',
screens: {
"2xl": "1400px",
},
'2xl': '1400px'
}
},
extend: {
height: {
screen: '100dvh',
screen: '100dvh'
},
minHeight: {
screen: '100dvh',
},
fontFamily: {
jakarta: ['Plus Jakarta Sans', 'Helvetica Neue', 'sans-serif'],
inter: ['Inter', 'Helvetica Neue', 'sans-serif'],
poppins: ['Poppins', 'Helvetica Neue', 'sans-serif'],
screen: '100dvh'
},
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
sidebar: "white",
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',
primary: 'hsl(var(--sidebar-primary))',
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))'
},
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
}
},
borderRadius: {
xl: "calc(var(--radius) + 4px)",
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
xl: 'calc(var(--radius) + 4px)',
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
},
keyframes: {
"accordion-down": {
from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" },
'accordion-down': {
from: {
height: 0
},
to: {
height: 'var(--radix-accordion-content-height)'
}
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: 0 },
shake: {
'0%': { transform: 'translateX(0)' },
'15%': { transform: 'translateX(-5px)' },
'25%': { transform: 'translateX(5px)' },
'35%': { transform: 'translateX(-5px)' },
'45%': { transform: 'translateX(5px)' },
'55%': { transform: 'translateX(-5px)' },
'65%': { transform: 'translateX(5px)' },
'75%': { transform: 'translateX(-5px)' },
'85%': { transform: 'translateX(5px)' },
'95%': { transform: 'translateX(-5px)' },
'100%': { transform: 'translateX(0)' },
},
"collapsible-down": {
from: { height: 0 },
to: { height: 'var(--radix-collapsible-content-height)' },
'accordion-up': {
from: {
height: 'var(--radix-accordion-content-height)'
},
to: {
height: 0
}
},
"collapsible-up": {
from: { height: 'var(--radix-collapsible-content-height)' },
to: { height: 0 },
'collapsible-down': {
from: {
height: 0
},
to: {
height: 'var(--radix-collapsible-content-height)'
}
},
'collapsible-up': {
from: {
height: 'var(--radix-collapsible-content-height)'
},
to: {
height: 0
}
},
'fade-in-down': {
'0%': {
@@ -102,33 +135,59 @@ module.exports = {
'100%': {
opacity: '1',
transform: 'translateY(0)'
},
}
},
'bounce-in': {
'0%': { transform: 'scale(0)' },
'50%': { transform: 'scale(1.2)' },
'100%': { transform: 'scale(1)' },
'0%': {
transform: 'scale(0)'
},
'50%': {
transform: 'scale(1.2)'
},
'100%': {
transform: 'scale(1)'
}
},
'fade-in': {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
'0%': {
opacity: '0'
},
'100%': {
opacity: '1'
}
},
'fade-out': {
'0%': { opacity: '1' },
'100%': { opacity: '0' },
'0%': {
opacity: '1'
},
'100%': {
opacity: '0'
}
},
'slide-in': {
'0%': { transform: 'translateY(10px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' }
'0%': {
transform: 'translateY(10px)',
opacity: '0'
},
'100%': {
transform: 'translateY(0)',
opacity: '1'
}
},
'slide-out': {
'0%': { transform: 'translateY(0)', opacity: '1' },
'100%': { transform: 'translateY(10px)', opacity: '0' }
},
'0%': {
transform: 'translateY(0)',
opacity: '1'
},
'100%': {
transform: 'translateY(10px)',
opacity: '0'
}
}
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out',
'collapsible-down': 'collapsible-down 0.2s ease-in-out',
'collapsible-up': 'collapsible-up 0.2s ease-in-out',
'fade-in-down': 'fade-in-down 0.3s ease-out',
@@ -137,9 +196,10 @@ module.exports = {
'fade-in': 'fade-in 0.3s ease-out',
'fade-out': 'fade-out 0.3s ease-in',
'slide-in': 'slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
'slide-out': 'slide-out 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
},
},
'slide-out': 'slide-out 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
'shake': 'shake 0.5s infinite',
}
}
},
plugins: [animate, typography],
}

1
i18n/en.json
View File

@@ -259,6 +259,7 @@
"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",