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();