sam/fullstack-fuware
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change i18n package to paraglideJs

Browse Source 
also refactor auth provider
This commit is contained in:
Sam Liu
2026-01-07 22:26:48 +07:00
parent 391acd282b
commit d49c37848f
47 changed files with 887 additions and 1060 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Header.tsx
View File

@@ -1,7 +1,7 @@
import { useSession } from '@/lib/auth-client';
import { m } from '@/paraglide/messages';
import { Separator } from '@base-ui/react/separator';
import { BellIcon } from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';
import { useAuth } from './auth/auth-provider';
import RouterBreadcrumb from './sidebar/RouterBreadcrumb';
import { Badge } from './ui/badge';
import { Button } from './ui/button';
@@ -17,8 +17,7 @@ import {
import { SidebarTrigger } from './ui/sidebar';
export default function Header() {
const { t } = useTranslation();
const { data: session } = useSession();
const { data: session } = useAuth();
return (
<>
@@ -50,7 +49,7 @@ export default function Header() {
</DropdownMenuTrigger>
<DropdownMenuContent className="w-sm min-w-56 rounded-lg">
<DropdownMenuLabel className="font-bold text-black">
{t('ui.label_notifications')}
{m.ui_label_notifications()}
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
@@ -66,7 +65,7 @@ export default function Header() {
<DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>
{t('ui.view_all_notifications')}
{m.ui_view_all_notifications()}
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>

40
src/components/auth/auth-provider.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { ClientSession, useSession } from '@/lib/auth-client';
import { BetterFetchError } from 'better-auth/client';
import { createContext, useContext, useMemo } from 'react';
export type UserContext = {
data: ClientSession;
isAuth: boolean;
isAdmin: boolean;
isPending: boolean;
error: BetterFetchError | null;
};
const AuthContext = createContext<UserContext | null>(null);
export function AuthProvider({ children }: { children: React.ReactNode }) {
const { data: session, isPending, error } = useSession();
const contextSession: UserContext = useMemo(
() => ({
data: session as ClientSession,
isPending,
error,
isAuth: !!session,
isAdmin: session?.user?.role ? session.user.role === 'admin' : false,
}),
[session],
);
return (
<AuthContext.Provider value={contextSession}>
{children}
</AuthContext.Provider>
);
}
export function useAuth() {
const ctx = useContext(AuthContext);
if (!ctx) {
throw new Error('useAuth must be used within an AuthProvider');
}
return ctx;
}

8
src/components/avatar/AvatarUser.tsx
View File

@@ -1,5 +1,5 @@
import { useSession } from '@/lib/auth-client';
import { cn } from '@/lib/utils';
import { useAuth } from '../auth/auth-provider';
import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
import RoleRing from './RoleRing';
@@ -9,10 +9,12 @@ interface AvatarUserProps {
}
const AvatarUser = ({ className, textSize = 'md' }: AvatarUserProps) => {
const { data: session } = useSession();
const { data: session } = useAuth();
const imagePath = session?.user?.image
? `./data/avatar/${session?.user?.image}`
? new URL(`../../../data/avatar/${session?.user?.image}`, import.meta.url)
.href
: undefined;
const shortName = session?.user?.name
?.split(' ')
.slice(0, 2)

12
src/components/avatar/RoleBadge.tsx
View File

@@ -1,5 +1,5 @@
import { m } from '@/paraglide/messages';
import { VariantProps } from 'class-variance-authority';
import { useTranslation } from 'react-i18next';
import { Badge, badgeVariants } from '../ui/badge';
type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
@@ -10,8 +10,6 @@ type RoleProps = {
};
const RoleBadge = ({ type, className }: RoleProps) => {
const { t } = useTranslation();
// List all valid badge variant keys
const validBadgeVariants: BadgeVariant[] = [
'default',
@@ -27,10 +25,10 @@ const RoleBadge = ({ type, className }: RoleProps) => {
];
const LABEL_VALUE = {
admin: t('roleTags.admin'),
user: t('roleTags.user'),
member: t('roleTags.member'),
owner: t('roleTags.owner'),
admin: m.role_tags_admin(),
user: m.role_tags_user(),
member: m.role_tags_member(),
owner: m.role_tags_owner(),
};
// Determine the actual variant to apply.

99
src/components/form/change-password-form.tsx
View File

@@ -1,30 +1,30 @@
import { authClient } from '@/lib/auth-client'
import i18n from '@/lib/i18n'
import { KeyIcon } from '@phosphor-icons/react'
import { useForm } from '@tanstack/react-form'
import { useTranslation } from 'react-i18next'
import { toast } from 'sonner'
import z from 'zod'
import { Button } from '../ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'
import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field'
import { Input } from '../ui/input'
import { authClient } from '@/lib/auth-client';
import { m } from '@/paraglide/messages';
import { KeyIcon } from '@phosphor-icons/react';
import { useForm } from '@tanstack/react-form';
import i18next from 'i18next';
import { toast } from 'sonner';
import z from 'zod';
import { Button } from '../ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
import { Input } from '../ui/input';
const ChangePasswordFormSchema = z
.object({
currentPassword: z.string().nonempty(
i18n.t('changePassword.messages.is_required', {
field: i18n.t('changePassword.form.current_password'),
m.common_is_required({
field: m.change_password_form_current_password(),
}),
),
newPassword: z.string().nonempty(
i18n.t('changePassword.messages.is_required', {
field: i18n.t('changePassword.form.new_password'),
m.common_is_required({
field: m.change_password_form_new_password(),
}),
),
confirmPassword: z.string().nonempty(
i18n.t('changePassword.messages.is_required', {
field: i18n.t('changePassword.form.confirm_password'),
m.common_is_required({
field: m.change_password_form_confirm_password(),
}),
),
})
@@ -33,22 +33,20 @@ const ChangePasswordFormSchema = z
ctx.addIssue({
path: ['confirmPassword'],
code: z.ZodIssueCode.custom,
message: i18n.t('changePassword.messages.password_not_match'),
})
message: m.change_password_messages_password_not_match(),
});
}
})
});
type ChangePassword = z.infer<typeof ChangePasswordFormSchema>
type ChangePassword = z.infer<typeof ChangePasswordFormSchema>;
const defaultValues: ChangePassword = {
currentPassword: '',
newPassword: '',
confirmPassword: '',
}
};
const ChangePasswordForm = () => {
const { t } = useTranslation()
const form = useForm({
defaultValues,
validators: {
@@ -64,33 +62,40 @@ const ChangePasswordForm = () => {
},
{
onSuccess: () => {
form.reset()
toast.success(t('changePassword.messages.change_password_success'))
form.reset();
toast.success(
m.change_password_messages_change_password_success(),
{
richColors: true,
},
);
},
onError: (ctx) => {
console.log(ctx.error.code)
toast.error(t(`backend.${ctx.error.code}` as any))
console.log(ctx.error.code);
toast.error(i18next.t(`backend_${ctx.error.code}` as any), {
richColors: true,
});
},
},
)
);
},
})
});
return (
<Card className="@container/card">
<CardHeader>
<CardTitle className="text-xl flex items-center gap-2">
<KeyIcon size={20} />
{t('changePassword.ui.title')}
{m.change_password_ui_title()}
</CardTitle>
</CardHeader>
<CardContent>
<form
id="change-password-form"
onSubmit={(e) => {
e.preventDefault()
e.stopPropagation()
form.handleSubmit()
e.preventDefault();
e.stopPropagation();
form.handleSubmit();
}}
>
<FieldGroup>
@@ -98,11 +103,11 @@ const ChangePasswordForm = () => {
name="currentPassword"
children={(field) => {
const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid
field.state.meta.isTouched && !field.state.meta.isValid;
return (
<Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}>
{t('changePassword.form.current_password')}:
{m.change_password_form_current_password()}:
</FieldLabel>
<Input
id={field.name}
@@ -117,18 +122,18 @@ const ChangePasswordForm = () => {
<FieldError errors={field.state.meta.errors} />
)}
</Field>
)
);
}}
/>
<form.Field
name="newPassword"
children={(field) => {
const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid
field.state.meta.isTouched && !field.state.meta.isValid;
return (
<Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}>
{t('changePassword.form.new_password')}:
{m.change_password_form_new_password()}:
</FieldLabel>
<Input
id={field.name}
@@ -143,18 +148,18 @@ const ChangePasswordForm = () => {
<FieldError errors={field.state.meta.errors} />
)}
</Field>
)
);
}}
/>
<form.Field
name="confirmPassword"
children={(field) => {
const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid
field.state.meta.isTouched && !field.state.meta.isValid;
return (
<Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}>
{t('changePassword.form.confirm_password')}:
{m.change_password_form_confirm_password()}:
</FieldLabel>
<Input
id={field.name}
@@ -169,17 +174,17 @@ const ChangePasswordForm = () => {
<FieldError errors={field.state.meta.errors} />
)}
</Field>
)
);
}}
/>
<Field>
<Button type="submit">{t('ui.change_password_btn')}</Button>
<Button type="submit">{m.ui_change_password_btn()}</Button>
</Field>
</FieldGroup>
</form>
</CardContent>
</Card>
)
}
);
};
export default ChangePasswordForm
export default ChangePasswordForm;

27
src/components/form/profile-form.tsx
View File

@@ -1,12 +1,14 @@
import { authClient, useSession } from '@/lib/auth-client';
import { authClient } from '@/lib/auth-client';
import { m } from '@/paraglide/messages';
import { uploadProfileImage } from '@/service/profile.api';
import { ProfileInput, profileUpdateSchema } from '@/service/profile.schema';
import { UserCircleIcon } from '@phosphor-icons/react';
import { useForm } from '@tanstack/react-form';
import { useQueryClient } from '@tanstack/react-query';
import i18next from 'i18next';
import { useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';
import { useAuth } from '../auth/auth-provider';
import AvatarUser from '../avatar/AvatarUser';
import RoleBadge from '../avatar/RoleBadge';
import { Button } from '../ui/button';
@@ -20,9 +22,8 @@ const defaultValues: ProfileInput = {
};
const ProfileForm = () => {
const { t } = useTranslation();
const fileInputRef = useRef<HTMLInputElement>(null);
const { data: session, isPending } = useSession();
const { data: session, isPending } = useAuth();
const queryClient = useQueryClient();
const form = useForm({
@@ -61,10 +62,14 @@ const ProfileForm = () => {
queryClient.refetchQueries({
queryKey: ['auth', 'session'],
});
toast.success(t('profile.messages.update_success'));
toast.success(m.profile_messages_update_success(), {
richColors: true,
});
},
onError: (ctx) => {
toast.error(t(`backend.${ctx.error.code}` as any));
toast.error(i18next.t(`backend.${ctx.error.code}` as any), {
richColors: true,
});
},
},
);
@@ -80,7 +85,7 @@ const ProfileForm = () => {
<CardHeader>
<CardTitle className="text-xl flex items-center gap-2">
<UserCircleIcon size={20} />
{t('profile.ui.title')}
{m.profile_ui_title()}
</CardTitle>
</CardHeader>
<CardContent>
@@ -130,7 +135,7 @@ const ProfileForm = () => {
return (
<Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}>
{t('profile.form.name')}
{m.profile_form_name()}
</FieldLabel>
<Input
id={field.name}
@@ -148,7 +153,7 @@ const ProfileForm = () => {
}}
/>
<Field>
<FieldLabel htmlFor="name">{t('profile.form.email')}</FieldLabel>
<FieldLabel htmlFor="name">{m.profile_form_email()}</FieldLabel>
<Input
id="email"
name="email"
@@ -158,13 +163,13 @@ const ProfileForm = () => {
/>
</Field>
<Field>
<FieldLabel htmlFor="name">{t('profile.form.role')}</FieldLabel>
<FieldLabel htmlFor="name">{m.profile_form_role()}</FieldLabel>
<div className="flex gap-2">
<RoleBadge type={session?.user?.role} />
</div>
</Field>
<Field>
<Button type="submit">{t('ui.update_btn')}</Button>
<Button type="submit">{m.ui_update_btn()}</Button>
</Field>
</FieldGroup>
</form>

33
src/components/form/settings-form.tsx
View File

@@ -1,33 +1,24 @@
import { m } from '@/paraglide/messages';
import { settingQueries } from '@/service/queries';
import { updateSettings } from '@/service/setting.api';
import { settingSchema, SettingsInput } from '@/service/setting.schema';
import { GearIcon } from '@phosphor-icons/react';
import { useForm } from '@tanstack/react-form';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';
import { Button } from '../ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
import { Input } from '../ui/input';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '../ui/select';
import { Textarea } from '../ui/textarea';
const defaultValues: SettingsInput = {
site_language: '',
site_name: '',
site_description: '',
site_keywords: '',
};
const SettingsForm = () => {
const { t } = useTranslation();
const queryClient = useQueryClient();
const { data: settings } = useQuery(settingQueries.list());
@@ -35,8 +26,11 @@ const SettingsForm = () => {
const updateMutation = useMutation({
mutationFn: updateSettings,
onSuccess: () => {
// setLocale(variables.data.site_language as Locale);
queryClient.invalidateQueries({ queryKey: settingQueries.all });
toast.success(t('settings.messages.update_success'));
toast.success(m.settings_messages_update_success(), {
richColors: true,
});
},
});
@@ -46,7 +40,6 @@ const SettingsForm = () => {
site_name: settings?.site_name?.value || '',
site_description: settings?.site_description?.value || '',
site_keywords: settings?.site_keywords?.value || '',
site_language: settings?.site_language?.value || '',
},
validators: {
onSubmit: settingSchema,
@@ -62,7 +55,7 @@ const SettingsForm = () => {
<CardHeader>
<CardTitle className="text-xl flex items-center gap-2">
<GearIcon size={20} />
{t('settings.ui.title')}
{m.settings_ui_title()}
</CardTitle>
</CardHeader>
<CardContent>
@@ -83,7 +76,7 @@ const SettingsForm = () => {
return (
<Field data-invalid={isInvalid} className="col-span-2">
<FieldLabel htmlFor={field.name}>
{t('settings.form.name')}
{m.settings_form_name()}
</FieldLabel>
<Input
id={field.name}
@@ -108,7 +101,7 @@ const SettingsForm = () => {
return (
<Field data-invalid={isInvalid} className="col-span-2">
<FieldLabel htmlFor={field.name}>
{t('settings.form.description')}
{m.settings_form_description()}
</FieldLabel>
<Textarea
id={field.name}
@@ -134,7 +127,7 @@ const SettingsForm = () => {
return (
<Field data-invalid={isInvalid} className="col-span-2">
<FieldLabel htmlFor={field.name}>
{t('settings.form.keywords')}
{m.settings_form_keywords()}
</FieldLabel>
<Textarea
id={field.name}
@@ -152,7 +145,7 @@ const SettingsForm = () => {
);
}}
/>
<form.Field
{/* <form.Field
name="site_language"
children={(field) => {
const isInvalid =
@@ -160,7 +153,7 @@ const SettingsForm = () => {
return (
<Field data-invalid={isInvalid} className="col-span-2">
<FieldLabel htmlFor={field.name}>
{t('settings.form.language')}
{m.settings_form_language()}
</FieldLabel>
<Select
name={field.name}
@@ -182,9 +175,9 @@ const SettingsForm = () => {
</Field>
);
}}
/>
/> */}
<Field>
<Button type="submit">{t('ui.update_btn')}</Button>
<Button type="submit">{m.ui_update_btn()}</Button>
</Field>
</FieldGroup>
</form>

87
src/components/form/signin-form.tsx
View File

@@ -1,38 +1,33 @@
import { authClient } from '@/lib/auth-client'
import i18n from '@/lib/i18n'
import { useForm } from '@tanstack/react-form'
import { useQueryClient } from '@tanstack/react-query'
import { createLink, useNavigate } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'
import { toast } from 'sonner'
import z from 'zod'
import { Button } from '../ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'
import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field'
import { Input } from '../ui/input'
import { authClient } from '@/lib/auth-client';
import { m } from '@/paraglide/messages';
import { useForm } from '@tanstack/react-form';
import { useQueryClient } from '@tanstack/react-query';
import { createLink, useNavigate } from '@tanstack/react-router';
import i18next from 'i18next';
import { toast } from 'sonner';
import z from 'zod';
import { Button } from '../ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
import { Input } from '../ui/input';
const SignInFormSchema = z.object({
email: z
.string()
.nonempty(
i18n.t('loginPage.messages.is_required', {
field: i18n.t('loginPage.form.email'),
}),
)
.email(i18n.t('loginPage.messages.email_invalid')),
.nonempty(m.common_is_required({ field: m.login_page_form_email }))
.email(m.login_page_messages_email_invalid()),
password: z.string().nonempty(
i18n.t('loginPage.messages.is_required', {
field: i18n.t('loginPage.form.password'),
m.common_is_required({
field: m.login_page_form_password(),
}),
),
})
});
const ButtonLink = createLink(Button)
const ButtonLink = createLink(Button);
const SignInForm = () => {
const { t } = useTranslation()
const navigate = useNavigate()
const queryClient = useQueryClient()
const navigate = useNavigate();
const queryClient = useQueryClient();
const form = useForm({
defaultValues: {
email: '',
@@ -50,24 +45,28 @@ const SignInForm = () => {
},
{
onSuccess: () => {
navigate({ to: '/' })
navigate({ to: '/' });
queryClient.invalidateQueries({ queryKey: ['auth', 'session'] });
toast.success(t('loginPage.messages.login_success'))
toast.success(m.login_page_messages_login_success(), {
richColors: true,
});
},
onError: (ctx) => {
toast.error(t(`backend.${ctx.error.code}` as any))
toast.error(i18next.t(`backend.${ctx.error.code}` as any), {
richColors: true,
});
},
},
)
);
},
})
});
return (
<div className="flex flex-col gap-6">
<Card>
<CardHeader className="text-center">
<CardTitle className="text-xl">
{t('loginPage.ui.welcome_back')}
{m.login_page_ui_welcome_back()}
</CardTitle>
{/* <CardDescription>Login with your Google account</CardDescription> */}
</CardHeader>
@@ -75,8 +74,8 @@ const SignInForm = () => {
<form
id="sign-in-form"
onSubmit={(e) => {
e.preventDefault()
form.handleSubmit()
e.preventDefault();
form.handleSubmit();
}}
>
<FieldGroup>
@@ -96,11 +95,11 @@ const SignInForm = () => {
name="email"
children={(field) => {
const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid
field.state.meta.isTouched && !field.state.meta.isValid;
return (
<Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}>
{t('loginPage.form.email')}
{m.login_page_form_email()}
</FieldLabel>
<Input
id={field.name}
@@ -117,18 +116,18 @@ const SignInForm = () => {
<FieldError errors={field.state.meta.errors} />
)}
</Field>
)
);
}}
/>
<form.Field
name="password"
children={(field) => {
const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid
field.state.meta.isTouched && !field.state.meta.isValid;
return (
<Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}>
{t('loginPage.form.password')}
{m.login_page_form_password()}
</FieldLabel>
<Input
id={field.name}
@@ -143,13 +142,13 @@ const SignInForm = () => {
<FieldError errors={field.state.meta.errors} />
)}
</Field>
)
);
}}
/>
<Field>
<Button type="submit">{t('ui.login_btn')}</Button>
<Button type="submit">{m.ui_login_btn()}</Button>
<ButtonLink to="/" variant="outline">
{t('ui.cancel_btn')}
{m.ui_cancel_btn()}
</ButtonLink>
{/* <FieldDescription className="text-center">
{t('loginPage.ui.not_have_account')}{' '}
@@ -165,7 +164,7 @@ const SignInForm = () => {
and <a href="#">Privacy Policy</a>.
</FieldDescription> */}
</div>
)
}
);
};
export default SignInForm
export default SignInForm;

25
src/components/form/signup-form.tsx
View File

@@ -1,20 +1,19 @@
import { createLink, Link } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'
import { Button } from '../ui/button'
import { m } from '@/paraglide/messages';
import { createLink, Link } from '@tanstack/react-router';
import { Button } from '../ui/button';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '../ui/card'
import { Field, FieldDescription, FieldGroup, FieldLabel } from '../ui/field'
import { Input } from '../ui/input'
} from '../ui/card';
import { Field, FieldDescription, FieldGroup, FieldLabel } from '../ui/field';
import { Input } from '../ui/input';
const ButtonLink = createLink(Button)
const ButtonLink = createLink(Button);
const SignupForm = () => {
const { t } = useTranslation()
return (
<div className="flex flex-col gap-6">
<Card>
@@ -59,11 +58,11 @@ const SignupForm = () => {
<Field>
<Button type="submit">Create Account</Button>
<ButtonLink to="/" variant="outline">
{t('ui.cancel_btn')}
{m.ui_cancel_btn()}
</ButtonLink>
<FieldDescription className="text-center">
Already have an account?{' '}
<Link to="/sign-in">{t('ui.login_btn')}</Link>
<Link to="/sign-in">{m.ui_login_btn()}</Link>
</FieldDescription>
</Field>
</FieldGroup>
@@ -75,7 +74,7 @@ const SignupForm = () => {
and <a href="#">Privacy Policy</a>.
</FieldDescription> */}
</div>
)
}
);
};
export default SignupForm
export default SignupForm;

15
src/components/sidebar/RouterBreadcrumb.tsx
View File

@@ -17,24 +17,27 @@ export type BreadcrumbValue =
const RouterBreadcrumb = () => {
const matches = useMatches()
console.log(matches);
const breadcrumbs = matches.flatMap((match) => {
const staticData = match.staticData
if (!staticData?.breadcrumb) return []
const staticData = match.staticData;
console.log(staticData);
if (!staticData?.breadcrumb) return [];
const breadcrumbValue =
typeof staticData.breadcrumb === 'function'
? staticData.breadcrumb(match)
: staticData.breadcrumb
: staticData.breadcrumb;
const items = Array.isArray(breadcrumbValue)
? breadcrumbValue
: [breadcrumbValue]
: [breadcrumbValue];
return items.map((item) => ({
label: item,
path: match.pathname,
}))
})
}));
});
return (
<Breadcrumb>

16
src/components/sidebar/nav-main.tsx
View File

@@ -1,6 +1,6 @@
import { m } from '@/paraglide/messages';
import { GaugeIcon, GearIcon, HouseIcon } from '@phosphor-icons/react';
import { createLink } from '@tanstack/react-router';
import { useTranslation } from 'react-i18next';
import AdminShow from '../auth/AdminShow';
import AuthShow from '../auth/AuthShow';
import {
@@ -13,8 +13,6 @@ import {
const SidebarMenuButtonLink = createLink(SidebarMenuButton);
const NavMain = () => {
const { t } = useTranslation();
return (
<SidebarGroup>
<SidebarMenu>
@@ -22,28 +20,28 @@ const NavMain = () => {
<SidebarMenuButtonLink
to="/"
className="cursor-pointer"
tooltip={t('nav.home')}
tooltip={m.nav_home()}
>
<HouseIcon size={24} />
{t('nav.home')}
{m.nav_home()}
</SidebarMenuButtonLink>
<AuthShow>
<SidebarMenuButtonLink
to="/dashboard"
className="cursor-pointer"
tooltip={t('nav.dashboard')}
tooltip={m.nav_dashboard()}
>
<GaugeIcon size={24} />
{t('nav.dashboard')}
{m.nav_dashboard()}
</SidebarMenuButtonLink>
<AdminShow>
<SidebarMenuButtonLink
to="/settings"
className="cursor-pointer"
tooltip={t('nav.settings')}
tooltip={m.nav_settings()}
>
<GearIcon size={24} />
{t('nav.settings')}
{m.nav_settings()}
</SidebarMenuButtonLink>
</AdminShow>
</AuthShow>

52
src/components/sidebar/nav-user.tsx
View File

@@ -1,4 +1,5 @@
import { authClient, useSession } from '@/lib/auth-client';
import { authClient } from '@/lib/auth-client';
import { m } from '@/paraglide/messages';
import {
DotsThreeVerticalIcon,
KeyIcon,
@@ -8,8 +9,9 @@ import {
} from '@phosphor-icons/react';
import { useQueryClient } from '@tanstack/react-query';
import { createLink, Link, useNavigate } from '@tanstack/react-router';
import { useTranslation } from 'react-i18next';
import i18next from 'i18next';
import { toast } from 'sonner';
import { useAuth } from '../auth/auth-provider';
import AvatarUser from '../avatar/AvatarUser';
import RoleBadge from '../avatar/RoleBadge';
import {
@@ -31,11 +33,10 @@ import {
const SidebarMenuButtonLink = createLink(SidebarMenuButton);
const NavUser = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const { isMobile } = useSidebar();
const queryClient = useQueryClient();
const { data: session } = useSession();
const { data: session } = useAuth();
const signout = async () => {
await authClient.signOut({
@@ -43,10 +44,14 @@ const NavUser = () => {
onSuccess: () => {
navigate({ to: '/' });
queryClient.invalidateQueries({ queryKey: ['auth', 'session'] });
toast.success(t('loginPage.messages.logout_success'));
toast.success(m.login_page_messages_login_success(), {
richColors: true,
});
},
onError: (ctx) => {
toast.error(t(`backend.${ctx.error.code}` as any));
toast.error(i18next.t(`backend_${ctx.error.code}` as any), {
richColors: true,
});
},
},
});
@@ -62,7 +67,7 @@ const NavUser = () => {
tooltip="Sign In"
>
<SignInIcon size={28} />
{t('ui.login_btn')}
{m.ui_login_btn()}
</SidebarMenuButtonLink>
</SidebarMenuItem>
</SidebarMenu>
@@ -76,14 +81,14 @@ const NavUser = () => {
<SidebarMenuButton
size="lg"
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground cursor-pointer"
tooltip={session?.user?.name}
tooltip={session.user.name}
>
<AvatarUser className="h-8 w-8" />
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-medium">
{session?.user?.name}
{session.user.name}
</span>
<span className="truncate text-xs">{session?.user?.email}</span>
<span className="truncate text-xs">{session.user.email}</span>
</div>
<DotsThreeVerticalIcon size={28} />
</SidebarMenuButton>
@@ -101,31 +106,38 @@ const NavUser = () => {
<div className="grid flex-1 text-left text-sm leading-tight">
<div className="flex gap-2 items-center">
<span className="truncate font-medium">
{session?.user?.name}
{session.user.name}
</span>
<RoleBadge
type={session?.user?.role}
type={session.user.role}
className="text-[10px] px-2 py-0 leading-0.5 h-4"
/>
</div>
<span className="truncate text-xs">
{session?.user?.email}
</span>
<span className="truncate text-xs">{session.user.email}</span>
</div>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem className="cursor-pointer" asChild>
<Link to="/profile">
<Link to="/account/profile">
<UserCircleIcon size={28} />
{t('nav.account')}
{m.nav_account()}
</Link>
</DropdownMenuItem>
<DropdownMenuItem className="cursor-pointer" asChild>
<Link to="/change-password">
<Link to="/account/change-password">
<KeyIcon size={28} />
{t('nav.change_password')}
{m.nav_change_password()}
</Link>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem className="cursor-pointer" asChild>
<Link to="/account/settings">
<UserCircleIcon size={28} />
{m.nav_settings()}
</Link>
</DropdownMenuItem>
</DropdownMenuGroup>
@@ -133,7 +145,7 @@ const NavUser = () => {
<DropdownMenuGroup>
<DropdownMenuItem onSelect={signout} className="cursor-pointer">
<SignOutIcon size={28} />
{t('ui.logout_btn')}
{m.ui_logout_btn()}
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>

70
src/components/ui/breadcrumb.tsx
View File

@@ -1,10 +1,10 @@
import * as React from "react"
import { Slot } from "radix-ui"
import { Slot } from 'radix-ui';
import * as React from 'react';
import { cn } from "@/lib/utils"
import { CaretRightIcon, DotsThreeIcon } from "@phosphor-icons/react"
import { cn } from '@/lib/utils';
import { CaretRightIcon, DotsThreeIcon } from '@phosphor-icons/react';
function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
function Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>) {
return (
<nav
aria-label="breadcrumb"
@@ -12,112 +12,108 @@ function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
className={cn(className)}
{...props}
/>
)
);
}
function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
return (
<ol
data-slot="breadcrumb-list"
className={cn(
"text-muted-foreground gap-1.5 text-xs/relaxed flex flex-wrap items-center break-words",
className
'text-muted-foreground gap-1.5 text-xs/relaxed flex flex-wrap items-center wrap-break-word',
className,
)}
{...props}
/>
)
);
}
function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
return (
<li
data-slot="breadcrumb-item"
className={cn("gap-1 inline-flex items-center", className)}
className={cn('gap-1 inline-flex items-center', className)}
{...props}
/>
)
);
}
function BreadcrumbLink({
asChild,
className,
...props
}: React.ComponentProps<"a"> & {
asChild?: boolean
}: React.ComponentProps<'a'> & {
asChild?: boolean;
}) {
const Comp = asChild ? Slot.Root : "a"
const Comp = asChild ? Slot.Root : 'a';
return (
<Comp
data-slot="breadcrumb-link"
className={cn("hover:text-foreground transition-colors", className)}
className={cn('hover:text-foreground transition-colors', className)}
{...props}
/>
)
);
}
function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
return (
<span
data-slot="breadcrumb-page"
role="link"
aria-disabled="true"
aria-current="page"
className={cn("text-foreground font-normal", className)}
className={cn('text-foreground font-normal', className)}
{...props}
/>
)
);
}
function BreadcrumbSeparator({
children,
className,
...props
}: React.ComponentProps<"li">) {
}: React.ComponentProps<'li'>) {
return (
<li
data-slot="breadcrumb-separator"
role="presentation"
aria-hidden="true"
className={cn("[&>svg]:size-3.5", className)}
className={cn('[&>svg]:size-3.5', className)}
{...props}
>
{children ?? (
<CaretRightIcon
/>
)}
{children ?? <CaretRightIcon />}
</li>
)
);
}
function BreadcrumbEllipsis({
className,
...props
}: React.ComponentProps<"span">) {
}: React.ComponentProps<'span'>) {
return (
<span
data-slot="breadcrumb-ellipsis"
role="presentation"
aria-hidden="true"
className={cn(
"size-4 [&>svg]:size-3.5 flex items-center justify-center",
className
'size-4 [&>svg]:size-3.5 flex items-center justify-center',
className,
)}
{...props}
>
<DotsThreeIcon
/>
<DotsThreeIcon />
<span className="sr-only">More</span>
</span>
)
);
}
export {
Breadcrumb,
BreadcrumbList,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
BreadcrumbEllipsis,
}
};

10
src/components/ui/dropdown-menu.tsx
View File

@@ -74,7 +74,7 @@ function DropdownMenuItem({
data-inset={inset}
data-variant={variant}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
className,
)}
{...props}
@@ -92,7 +92,7 @@ function DropdownMenuCheckboxItem({
<DropdownMenuPrimitive.CheckboxItem
data-slot="dropdown-menu-checkbox-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
className,
)}
checked={checked}
@@ -131,7 +131,7 @@ function DropdownMenuRadioItem({
<DropdownMenuPrimitive.RadioItem
data-slot="dropdown-menu-radio-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
className,
)}
{...props}
@@ -161,7 +161,7 @@ function DropdownMenuLabel({
data-slot="dropdown-menu-label"
data-inset={inset}
className={cn(
'text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8',
'text-muted-foreground px-2 py-1.5 text-xs data-inset:pl-8',
className,
)}
{...props}
@@ -217,7 +217,7 @@ function DropdownMenuSubTrigger({
data-slot="dropdown-menu-sub-trigger"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
className,
)}
{...props}

149
src/components/ui/field.tsx
View File

@@ -1,69 +1,77 @@
import { useMemo } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cva, type VariantProps } from 'class-variance-authority';
import { useMemo } from 'react';
import { cn } from "@/lib/utils"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { Label } from '@/components/ui/label';
import { Separator } from '@/components/ui/separator';
import { cn } from '@/lib/utils';
function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
return (
<fieldset
data-slot="field-set"
className={cn("gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col", className)}
className={cn(
'gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col',
className,
)}
{...props}
/>
)
);
}
function FieldLegend({
className,
variant = "legend",
variant = 'legend',
...props
}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
return (
<legend
data-slot="field-legend"
data-variant={variant}
className={cn("mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm", className)}
className={cn(
'mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm',
className,
)}
{...props}
/>
)
);
}
function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="field-group"
className={cn(
"gap-4 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col",
className
'gap-4 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col',
className,
)}
{...props}
/>
)
);
}
const fieldVariants = cva("data-[invalid=true]:text-destructive gap-2 group/field flex w-full", {
variants: {
orientation: {
vertical:
"flex-col [&>*]:w-full [&>.sr-only]:w-auto",
horizontal:
"flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
responsive:
"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
const fieldVariants = cva(
'data-[invalid=true]:text-destructive gap-2 group/field flex w-full',
{
variants: {
orientation: {
vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto',
horizontal:
'flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
responsive:
'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
},
},
defaultVariants: {
orientation: 'vertical',
},
},
defaultVariants: {
orientation: "vertical",
},
})
);
function Field({
className,
orientation = "vertical",
orientation = 'vertical',
...props
}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
return (
<div
role="group"
@@ -72,20 +80,20 @@ function Field({
className={cn(fieldVariants({ orientation }), className)}
{...props}
/>
)
);
}
function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="field-content"
className={cn(
"gap-0.5 group/field-content flex flex-1 flex-col leading-snug",
className
'gap-0.5 group/field-content flex flex-1 flex-col leading-snug',
className,
)}
{...props}
/>
)
);
}
function FieldLabel({
@@ -96,55 +104,58 @@ function FieldLabel({
<Label
data-slot="field-label"
className={cn(
"has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2 group/field-label peer/field-label flex w-fit leading-snug",
"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
className
'has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 group/field-label peer/field-label flex w-fit leading-snug',
'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
className,
)}
{...props}
/>
)
);
}
function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="field-label"
className={cn(
"gap-2 text-xs/relaxed font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug",
className
'gap-2 text-xs/relaxed font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug',
className,
)}
{...props}
/>
)
);
}
function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
return (
<p
data-slot="field-description"
className={cn(
"text-muted-foreground text-left text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
"last:mt-0 nth-last-2:-mt-1",
"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
className
'text-muted-foreground text-left text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-[orientation=horizontal]/field:text-balance',
'last:mt-0 nth-last-2:-mt-1',
'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
className,
)}
{...props}
/>
)
);
}
function FieldSeparator({
children,
className,
...props
}: React.ComponentProps<"div"> & {
children?: React.ReactNode
}: React.ComponentProps<'div'> & {
children?: React.ReactNode;
}) {
return (
<div
data-slot="field-separator"
data-content={!!children}
className={cn("-my-2 h-5 text-xs/relaxed group-data-[variant=outline]/field-group:-mb-2 relative", className)}
className={cn(
'-my-2 h-5 text-xs/relaxed group-data-[variant=outline]/field-group:-mb-2 relative',
className,
)}
{...props}
>
<Separator className="absolute inset-0 top-1/2" />
@@ -157,7 +168,7 @@ function FieldSeparator({
</span>
)}
</div>
)
);
}
function FieldError({
@@ -165,61 +176,61 @@ function FieldError({
children,
errors,
...props
}: React.ComponentProps<"div"> & {
errors?: Array<{ message?: string } | undefined>
}: React.ComponentProps<'div'> & {
errors?: Array<{ message?: string } | undefined>;
}) {
const content = useMemo(() => {
if (children) {
return children
return children;
}
if (!errors?.length) {
return null
return null;
}
const uniqueErrors = [
...new Map(errors.map((error) => [error?.message, error])).values(),
]
];
if (uniqueErrors?.length == 1) {
return uniqueErrors[0]?.message
return uniqueErrors[0]?.message;
}
return (
<ul className="ml-4 flex list-disc flex-col gap-1">
{uniqueErrors.map(
(error, index) =>
error?.message && <li key={index}>{error.message}</li>
error?.message && <li key={index}>{error.message}</li>,
)}
</ul>
)
}, [children, errors])
);
}, [children, errors]);
if (!content) {
return null
return null;
}
return (
<div
role="alert"
data-slot="field-error"
className={cn("text-destructive text-xs/relaxed font-normal", className)}
className={cn('text-destructive text-xs/relaxed font-normal', className)}
{...props}
>
{content}
</div>
)
);
}
export {
Field,
FieldLabel,
FieldContent,
FieldDescription,
FieldError,
FieldGroup,
FieldLabel,
FieldLegend,
FieldSeparator,
FieldSet,
FieldContent,
FieldTitle,
}
};

2
src/components/ui/sidebar.tsx
View File

@@ -288,7 +288,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
onClick={toggleSidebar}
title="Toggle Sidebar"
className={cn(
'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 sm:flex',
'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
'hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full',