refactor: tweak profile loader

packages/app/src/Components/User/Debug.tsx

@@ -0,0 +1,40 @@
+import { useUserProfile } from "@snort/system-react";
+
+import { UserRelays } from "@/Cache";
+import { getRelayName } from "@/Utils";
+
+export function UserDebug({ pubkey }: { pubkey: string }) {
+  const profile = useUserProfile(pubkey);
+  const relays = UserRelays.getFromCache(pubkey);
+
+  return (
+    <div className="text-xs">
+      <div className="flex flex-col overflow-wrap">
+        {Object.entries(profile ?? {}).map(([k, v]) => {
+          let vv = <div>{v}</div>;
+
+          if (k === "loaded") vv = <div>{new Date(Number(v)).toISOString()}</div>;
+          if (k === "created") vv = <div>{new Date(Number(v) * 1000).toISOString()}</div>;
+          if (k === "npub" || k === "pubkey") return;
+          return (
+            <div key={`${pubkey}-${k}`} className="flex justify-between gap-1">
+              <div>{k}</div>
+              {vv}
+            </div>
+          );
+        })}
+      </div>
+      <br />
+      <div className="flex flex-col">
+        <div>Relays Updated: {new Date(1000 * (relays?.created ?? 0)).toISOString()}</div>
+        {relays?.relays.map(a => (
+          <div className="flex hover:bg-[--gray-ultradark]" key={a.url}>
+            <div className="grow">{getRelayName(a.url)}</div>
+            <div>{a.settings.read && <>R</>}</div>
+            <div>{a.settings.write && <>W</>}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

packages/app/src/Components/User/ProfileCard.tsx

@@ -8,6 +8,7 @@ import Text from "@/Components/Text/Text";
 import FollowedBy from "@/Components/User/FollowedBy";
 
 import useLogin from "../../Hooks/useLogin";
+import { UserDebug } from "./Debug";
 import FollowButton from "./FollowButton";
 import ProfileImage from "./ProfileImage";
 import { UserWebsiteLink } from "./UserWebsiteLink";
@@ -26,6 +27,7 @@ export function ProfileCard({
   const [showProfileMenu, setShowProfileMenu] = useState(false);
   const [t, setT] = useState<ReturnType<typeof setTimeout>>();
   const { publicKey: myPublicKey } = useLogin(s => ({ publicKey: s.publicKey }));
+  const debug = Boolean(localStorage.getItem("debug"));
 
   useEffect(() => {
     if (show) {
@@ -71,6 +73,7 @@ export function ProfileCard({
         />
         <UserWebsiteLink user={user} />
         {myPublicKey && <FollowedBy pubkey={pubkey} />}
+        {debug && <UserDebug pubkey={pubkey} />}
       </div>
     </ControlledMenu>
   );