perf(vite): add dynamic imports

apps/web/src/components/callPopout.tsx

@@ -0,0 +1,15 @@
+import { lazy, Suspense } from "react";
+
+import { useCall } from "@tensamin/call/state";
+
+const Popout = lazy(() => import("@tensamin/call/popout"));
+
+export default function CallPopout() {
+  const active = useCall((state) => state.state !== "closed");
+
+  return active ? (
+    <Suspense fallback={null}>
+      <Popout />
+    </Suspense>
+  ) : null;
+}

apps/web/src/components/callRuntimeInit.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useState } from "react";
+
+import { useTheme } from "@methanium/ui";
+import { useIsSpeaking } from "@tensamin/call/speakingState";
+import { useCall, useInitializeCall } from "@tensamin/call/store";
+import { useStorage } from "@tensamin/storage/context";
+
+function createCallTrayIcon(color: string, speaking: boolean) {
+  const canvas = document.createElement("canvas");
+  canvas.width = 32;
+  canvas.height = 32;
+
+  const context = canvas.getContext("2d");
+  if (!context) return undefined;
+
+  context.globalAlpha = speaking ? 1 : 0.55;
+  context.fillStyle = color;
+  context.beginPath();
+  context.arc(16, 16, 13, 0, Math.PI * 2);
+  context.fill();
+
+  if (speaking) {
+    context.globalAlpha = 0.3;
+    context.fillStyle = "#ffffff";
+    context.fill();
+  }
+
+  return canvas.toDataURL("image/png");
+}
+
+export default function CallRuntimeInit() {
+  const callInvitePopup = useInitializeCall();
+  const { load } = useStorage();
+  const {
+    themeColor,
+    themePalette,
+    themePrimaryColor,
+    themePolarity,
+    themeTint,
+    themeCustomCss,
+  } = useTheme();
+  const [localUserId, setLocalUserId] = useState(-1);
+  const [primaryColor, setPrimaryColor] = useState("");
+  const inCall = useCall((state) => state.state === "open");
+  const speaking = useIsSpeaking(localUserId);
+
+  useEffect(() => {
+    let active = true;
+
+    load("user_id").then((userId) => {
+      if (active) setLocalUserId(userId);
+    });
+
+    return () => {
+      active = false;
+    };
+  }, [load]);
+
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      setPrimaryColor(
+        getComputedStyle(document.documentElement)
+          .getPropertyValue("--primary")
+          .trim(),
+      );
+    });
+
+    return () => cancelAnimationFrame(frame);
+  }, [
+    themeColor,
+    themeCustomCss,
+    themePalette,
+    themePolarity,
+    themePrimaryColor,
+    themeTint,
+  ]);
+
+  useEffect(() => {
+    const iconDataUrl = primaryColor
+      ? createCallTrayIcon(primaryColor, speaking)
+      : undefined;
+
+    void window.tensaminDesktop?.call
+      ?.setStatus?.({
+        inCall,
+        speaking: inCall && speaking,
+        iconDataUrl: inCall ? iconDataUrl : undefined,
+      })
+      .catch((error: unknown) => {
+        console.error("Failed to update desktop call status", error);
+      });
+  }, [inCall, primaryColor, speaking]);
+
+  return callInvitePopup;
+}

apps/web/src/components/callSidebarBox.tsx

@@ -0,0 +1,15 @@
+import { lazy, Suspense } from "react";
+
+import { useCall } from "@tensamin/call/state";
+
+const SidebarBox = lazy(() => import("@tensamin/call/sidebarBox"));
+
+export default function CallSidebarBox() {
+  const active = useCall((state) => state.state !== "closed");
+
+  return active ? (
+    <Suspense fallback={null}>
+      <SidebarBox />
+    </Suspense>
+  ) : null;
+}

apps/web/src/components/modals/profile.tsx

@@ -1,6 +1,6 @@
 import type { User } from "@tensamin/identity/context";
 import { Avatar, AvatarFallback, AvatarImage, Button } from "@methanium/ui";
-import { Text } from "@methanium/ui/markdown";
+import Text from "@tensamin/markdown/text";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { useState } from "react";
 

apps/web/src/components/navbar.tsx

@@ -14,7 +14,7 @@ import {
   User,
 } from "lucide-react";
 import { useLocation, useNavigate, useSearch } from "@tanstack/react-router";
-import { joinCall, useCall } from "@tensamin/call/store";
+import { useCall } from "@tensamin/call/state";
 import Wrapper from "@tensamin/identity/wrapper";
 import { Skeleton } from "@methanium/ui";
 import {
@@ -140,7 +140,9 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
               <Button
                 disabled={callState !== "closed"}
                 onClick={() => {
-                  void joinCall(id);
+                  void import("@tensamin/call/store").then(({ joinCall }) =>
+                    joinCall(id),
+                  );
                 }}
                 className="w-9 h-9! aspect-square rounded-lg"
                 variant="outline"
@@ -151,10 +153,12 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
               <Button
                 disabled={callState !== "closed"}
                 onClick={() => {
-                  void joinCall(
-                    id,
-                    currentCalls[0].CallSecret,
-                    currentCalls[0].CallId,
+                  void import("@tensamin/call/store").then(({ joinCall }) =>
+                    joinCall(
+                      id,
+                      currentCalls[0].CallSecret,
+                      currentCalls[0].CallId,
+                    ),
                   );
                 }}
                 className="w-9 h-9! aspect-square rounded-lg"
@@ -182,7 +186,10 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
                         value={call.CallId}
                         key={call.CallId}
                         onSelect={() => {
-                          void joinCall(id, call.CallSecret, call.CallId);
+                          void import("@tensamin/call/store").then(
+                            ({ joinCall }) =>
+                              joinCall(id, call.CallSecret, call.CallId),
+                          );
                         }}
                       >
                         {displayCallId(call.CallId)}

apps/web/src/components/routeLoader.tsx

@@ -0,0 +1,15 @@
+import { Loader2 } from "lucide-react";
+
+export default function RouteLoader() {
+  return (
+    <div
+      className="flex h-full min-h-40 w-full items-center justify-center bg-background"
+      role="status"
+    >
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <Loader2 className="size-5 animate-spin" />
+        <span>Loading...</span>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/sidebar.tsx

@@ -1,5 +1,6 @@
 import Wrapper from "@tensamin/identity/wrapper";
 import { Basic, Loading } from "./modals/basic";
+import CallSidebarBox from "./callSidebarBox";
 import List from "@/features/conversation/list/body";
 
 import {
@@ -30,7 +31,6 @@ import {
 import { useIsMobile } from "@methanium/ui";
 import { MobileNavbar } from "./navbar";
 
-import SidebarBox from "@tensamin/call/sidebarBox";
 import { useShowMobileNavbar } from "@/routes/app/useShowMobileNavbar";
 import { Ellipsis, Check } from "lucide-react";
 import { useState } from "react";
@@ -285,7 +285,7 @@ export default function Sidebar() {
       )}
       {!isMobile && (
         <SidebarFooter>
-          <SidebarBox />
+          <CallSidebarBox />
         </SidebarFooter>
       )}
     </>