(feat): add sonner call invite, to be replaced with dedicated popup

(feat): add fallback screen to preview page
(feat): show users call page

packages/call/src/views/main/layout.tsx

@@ -3,7 +3,7 @@ import TopBar from "../../components/top";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="w-full h-full flex flex-col bg-green-500">
+    <div className="w-full h-full flex flex-col">
       <TopBar />
       <div className="w-full h-full">{children}</div>
       <Actions />

packages/call/src/views/preview.tsx

@@ -1,7 +1,59 @@
+import { useEffect, useState } from "react";
 import { useCall } from "../store";
+import { useUser, type User } from "@tensamin/user/context";
 
 export default function Preview() {
+  const { get } = useUser();
   const currentCallData = useCall((state) => state.currentCallData);
 
-  return <div>Preview View {JSON.stringify(currentCallData?.users)}</div>;
+  const [data, setData] = useState<User[]>([]);
+
+  useEffect(() => {
+    let active = true;
+
+    if (!currentCallData?.exists) {
+      setData([]);
+      return () => {
+        active = false;
+      };
+    }
+
+    void Promise.all(currentCallData.user_ids.map((id) => get(id)))
+      .then((users) => {
+        if (!active) {
+          return;
+        }
+
+        setData(users);
+      })
+      .catch(() => {
+        if (!active) {
+          return;
+        }
+
+        setData([]);
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [currentCallData, get]);
+
+  return (
+    <div className="w-full h-full flex items-center justify-center">
+      {currentCallData?.exists ? (
+        <div className="flex flex-col gap-2">
+          {data.map((user) => {
+            return (
+              <p key={user.user_id} className="text-2xl">
+                User: {user.display}
+              </p>
+            );
+          })}
+        </div>
+      ) : (
+        <p className="text-2xl">Invalid call</p>
+      )}
+    </div>
+  );
 }