refactor(Layouts): optimize imports and enhance UserInfo component

- Moved the useIsMobile hook import to the correct position in conditional-layout.tsx.
- Added type="button" to the ThemeToggleSwitch button for better accessibility.
- Introduced truncateString utility in UserInfo component to limit email display length.
- Set Image component in UserInfo to unoptimized for performance improvement.

src/components/Layouts/conditional-layout.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { AuthGuard, LoginGuard } from "@/contexts";
+import { useIsMobile } from "@/hooks/use-mobile";
 import { usePathname } from "next/navigation";
 import type { PropsWithChildren } from "react";
 import { Header } from "./header";
 import Notification from "./notification";
 import { Sidebar } from "./sidebar";
-import { useIsMobile } from "@/hooks/use-mobile";
 
 function MainLayout({ children }: PropsWithChildren) {
   const isMobile = useIsMobile();

src/components/Layouts/header/theme-toggle/index.tsx

@@ -30,6 +30,7 @@ export function ThemeToggleSwitch() {
     <button
       onClick={() => setTheme(theme === "light" ? "dark" : "light")}
       className="group rounded-full bg-gray-3 p-[5px] text-[#111928] outline-1 outline-primary focus-visible:outline dark:bg-[#020D1A] dark:text-current"
+      type="button"
     >
       <span className="sr-only">
         Switch to {theme === "light" ? "dark" : "light"} mode

src/components/Layouts/header/user-info/index.tsx

@@ -8,6 +8,7 @@ import {
 } from "@/components/ui/dropdown";
 import { useUser } from "@/contexts";
 import { cn } from "@/lib/utils";
+import { truncateString } from "@/utils/shared";
 import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
@@ -26,7 +27,7 @@ export function UserInfo() {
           <div className="rounded-full bg-gray-3 p-3.5 dark:bg-dark-3">
             <UserIcon />
           </div>
-     
+
           <figcaption className="flex items-center gap-1 font-medium text-dark dark:text-dark-6 max-[1024px]:sr-only">
             <span>{user?.full_name}</span>
 
@@ -53,6 +54,7 @@ export function UserInfo() {
             <Image
               src={user.profile_image}
               className="size-12"
+              unoptimized
               alt={`Avatar for ${user.full_name}`}
               role="presentation"
               width={200}
@@ -69,7 +71,9 @@ export function UserInfo() {
               {user?.full_name}
             </div>
 
-            <div className="leading-none text-gray-6">{user?.email}</div>
+            <div className="leading-none text-gray-6">
+              {truncateString(user?.email ?? "")}
+            </div>
           </figcaption>
         </figure>
 
@@ -107,7 +111,6 @@ export function UserInfo() {
             onClick={() => {
               setIsOpen(false);
               logout();
-              
             }}
           >
             <LogOutIcon />