Refactor code and update dependencies

Rearranged imports for better organization and readability across multiple files. Updated the `react-i18next` dependency to version 15.0.1 in various `package.json` files. Adjusted formatting in multiple TypeScript files to ensure code style consistency.

packages/ui/src/makerkit/app-breadcrumbs.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { Fragment } from 'react';
+
 import { usePathname } from 'next/navigation';
 
 import {
@@ -12,7 +14,6 @@ import {
 } from '../shadcn/breadcrumb';
 import { If } from './if';
 import { Trans } from './trans';
-import { Fragment } from 'react';
 
 const unslugify = (slug: string) => slug.replace(/-/g, ' ');
 

packages/ui/src/makerkit/page.tsx

@@ -59,7 +59,12 @@ export function PageMobileNavigation(
   }>,
 ) {
   return (
-    <div className={cn('w-full py-2 lg:hidden flex items-center border-b', props.className)}>
+    <div
+      className={cn(
+        'flex w-full items-center border-b py-2 lg:hidden',
+        props.className,
+      )}
+    >
       {props.children}
     </div>
   );
@@ -77,7 +82,7 @@ function PageWithHeader(props: PageProps) {
       >
         <div
           className={cn(
-            'flex h-14 items-center justify-between bg-muted/40 px-4 lg:shadow-sm dark:border-border dark:shadow-primary/10 lg:justify-start',
+            'flex h-14 items-center justify-between bg-muted/40 px-4 dark:border-border dark:shadow-primary/10 lg:justify-start lg:shadow-sm',
             {
               'sticky top-0 z-10 backdrop-blur-md': props.sticky ?? true,
             },
@@ -151,7 +156,7 @@ export function PageHeader({
   return (
     <div
       className={cn(
-        'flex items-center justify-between lg:px-4 py-4',
+        'flex items-center justify-between py-4 lg:px-4',
         className,
       )}
     >

packages/ui/src/makerkit/profile-avatar.tsx

@@ -1,5 +1,5 @@
 import { Avatar, AvatarFallback, AvatarImage } from '../shadcn/avatar';
-import {cn} from "../utils";
+import { cn } from '../utils';
 
 type SessionProps = {
   displayName: string | null;
@@ -15,7 +15,10 @@ type ProfileAvatarProps = (SessionProps | TextProps) & {
 };
 
 export function ProfileAvatar(props: ProfileAvatarProps) {
-  const avatarClassName = cn(props.className, 'mx-auto w-9 h-9 group-focus:ring-2');
+  const avatarClassName = cn(
+    props.className,
+    'mx-auto w-9 h-9 group-focus:ring-2',
+  );
 
   if ('text' in props) {
     return (

packages/ui/src/makerkit/sidebar.tsx

@@ -60,7 +60,9 @@ export function SidebarContent({
   className?: string;
 }>) {
   return (
-    <div className={cn('flex w-full flex-col space-y-1.5 px-4 py-1', className)}>
+    <div
+      className={cn('flex w-full flex-col space-y-1.5 px-4 py-1', className)}
+    >
       {children}
     </div>
   );
@@ -194,22 +196,14 @@ export function SidebarItem({
 }
 
 function getClassNameBuilder(className: string) {
-  return cva(
-    [
-      cn(
-        'flex box-content h-screen flex-col relative',
-        className,
-      ),
-    ],
-    {
-      variants: {
-        collapsed: {
-          true: `w-[6rem]`,
-          false: `w-2/12 lg:w-[17rem]`,
-        },
+  return cva([cn('flex box-content h-screen flex-col relative', className)], {
+    variants: {
+      collapsed: {
+        true: `w-[6rem]`,
+        false: `w-2/12 lg:w-[17rem]`,
       },
     },
-  );
+  });
 }
 
 export function SidebarNavigation({

packages/ui/src/makerkit/spinner.tsx

@@ -27,4 +27,4 @@ export function Spinner(
       </svg>
     </div>
   );
-}
+}