(feat): improve profile popup in the navbar, add shared code to that popup

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

@@ -1,8 +1,62 @@
 import type { User } from "@tensamin/user/context";
-import { Avatar, AvatarFallback, AvatarImage } from "@tensamin/ui";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@tensamin/ui";
+import { toLossySixDigitCode } from "@tensamin/shared/code";
 import Text from "@tensamin/markdown/text";
+import { ChevronDown, ChevronUp, Info } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useCrypto } from "@tensamin/crypto/context";
+import { useStorage } from "@tensamin/storage/context";
+import { useUser } from "@tensamin/user/context";
 
 export default function Profile({ user }: { user: User }) {
+  const [showAdvancedInformation, setShowAdvancedInformation] = useState(false);
+  const [sharedSecret, setSharedSecret] = useState("");
+
+  const { getSharedSecret } = useCrypto();
+  const { load } = useStorage();
+  const { get } = useUser();
+
+  useEffect(() => {
+    let active = true;
+
+    void (async () => {
+      try {
+        const ownId = await load("user_id");
+        const privateKey = await load("private_key");
+        const ownData = await get(ownId);
+        const secret = await getSharedSecret(
+          privateKey,
+          ownData.public_key,
+          user.public_key,
+        );
+
+        if (active) {
+          setSharedSecret(secret);
+        }
+      } catch {
+        if (active) {
+          setSharedSecret("");
+        }
+      }
+    })();
+
+    return () => {
+      active = false;
+    };
+  }, [get, getSharedSecret, load, user.public_key]);
+
+  const sharedSecretCode = sharedSecret
+    ? toLossySixDigitCode(sharedSecret)
+    : "------";
+
   return (
     <div className="flex flex-col gap-2">
       <div className="flex gap-2  items-center">
@@ -18,17 +72,42 @@ export default function Profile({ user }: { user: User }) {
         </div>
       </div>
       <Text value={user.about || ""} />
-      <div className="flex flex-col">
-        <p className="text-muted-foreground text-xs overflow-hidden text-ellipsis whitespace-nowrap">
-          iota: {user.iota_id}
-        </p>
-        <p className="text-muted-foreground text-xs overflow-hidden text-ellipsis whitespace-nowrap">
-          user: {user.user_id}
-        </p>
-        <p className="text-muted-foreground text-xs overflow-hidden text-ellipsis whitespace-nowrap">
-          pub key: {user.public_key}
-        </p>
-      </div>
+      <Button
+        className="h-auto justify-start gap-1.5 px-0 py-1 text-base font-medium text-white no-underline hover:no-underline"
+        variant="link"
+        aria-expanded={showAdvancedInformation}
+        onClick={() => setShowAdvancedInformation((show) => !show)}
+      >
+        {showAdvancedInformation ? (
+          <ChevronUp className="size-4" />
+        ) : (
+          <ChevronDown className="size-4" />
+        )}
+        <span>Show advanced information</span>
+      </Button>
+      {showAdvancedInformation && (
+        <div className="flex flex-col">
+          <p className="text-white flex gap-1 overflow-hidden text-ellipsis whitespace-nowrap">
+            Shared Code: <code>{sharedSecretCode}</code>{" "}
+            <Tooltip>
+              <TooltipTrigger render={<Info className="size-3.5" />} />
+              <TooltipContent>
+                You can compare this code with the conversation partner to
+                validate that this chat is E2EE
+              </TooltipContent>
+            </Tooltip>
+          </p>
+          <p className="text-muted-foreground text-xs overflow-hidden text-ellipsis whitespace-nowrap">
+            Iota ID: <code>{user.iota_id}</code>
+          </p>
+          <p className="text-muted-foreground text-xs overflow-hidden text-ellipsis whitespace-nowrap">
+            User ID: <code>{user.user_id}</code>
+          </p>
+          <p className="text-muted-foreground text-xs overflow-hidden text-ellipsis whitespace-nowrap">
+            Public Key: <code>{user.public_key}</code>
+          </p>
+        </div>
+      )}
     </div>
   );
 }