Fix users with no profile record not being shown (#7)

Co-authored-by: Casey <hatkidchan@gmail.com>
Co-authored-by: Ari <ariadna@hey.com>
Reviewed-on: https://git.witchcraft.systems/scientific-witchery/pds-dash/pulls/7
Reviewed-by: Ariadna <ariadna@hey.com>

src/lib/AccountComponent.svelte

@@ -12,10 +12,14 @@
         alt="avatar of {account.displayName}"
         src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.avatarCid}"
       />
+      <div id="accountName">
+        {account.displayName || account.handle || account.did}
+      </div>
+    {:else}
+      <div id="accountName" class="no-avatar">
+        {account.displayName || account.handle || account.did}
+      </div>
     {/if}
-    <div id="accountName">
-      {account.displayName || account.handle || account.did}
-    </div>
   </div>
 </a>
 

src/lib/pdsfetch.ts

@@ -132,7 +132,13 @@ const getDidsFromPDS = async (): Promise<At.Did[]> => {
 const getAccountMetadata = async (
   did: `did:${string}:${string}`,
 ) => {
-  // gonna assume self exists in the app.bsky.actor.profile
+  const account: AccountMetadata = {
+    did: did,
+    handle: "", // Guaranteed to be filled out later
+    displayName: "",
+    avatarCid: null,
+  };
+
   try {
     const { data } = await rpc.get("com.atproto.repo.getRecord", {
       params: {
@@ -142,21 +148,22 @@ const getAccountMetadata = async (
       },
     });
     const value = data.value as AppBskyActorProfile.Record;
-    const handle = await blueskyHandleFromDid(did);
-    const account: AccountMetadata = {
-      did: did,
-      handle: handle,
-      displayName: value.displayName || "",
-      avatarCid: null,
-    };
+    account.displayName = value.displayName || "";
     if (value.avatar) {
       account.avatarCid = value.avatar.ref["$link"];
     }
-    return account;
   } catch (e) {
-    console.error(`Error fetching metadata for ${did}:`, e);
+    console.warn(`Error fetching profile for ${did}:`, e);
+  }
+
+  try {
+    account.handle = await blueskyHandleFromDid(did);
+  } catch (e) {
+    console.error(`Error fetching handle for ${did}:`, e);
     return null;
   }
+
+  return account;
 };
 
 const getAllMetadataFromPds = async (): Promise<AccountMetadata[]> => {

themes/express/theme.css

@@ -237,6 +237,7 @@ a:hover {
   margin-right: 4px;
   border: 4px solid var(--border-color);
   box-shadow: var(--border-color) 10px 10px;
+  min-height: 30px;
 }
 #accountName {
   margin-left: 10px;
@@ -249,6 +250,10 @@ a:hover {
   white-space: nowrap;
 }
 
+.no-avatar {
+    margin-left: 40px !important;
+}
+
 /* App.Svelte */
 /* desktop style */
 

themes/witchcraft/theme.css

@@ -235,6 +235,7 @@ a:hover {
   padding: 0px;
   margin-bottom: 15px;
   border: 1px solid var(--border-color);
+  min-height: 30px;
 }
 #accountName {
   margin-left: 10px;
@@ -247,6 +248,11 @@ a:hover {
   white-space: nowrap;
 }
 
+
+.no-avatar {
+    margin-left: 70px !important;
+}
+
 /* App.Svelte */
 /* desktop style */