Accounts component

src/App.svelte

···
 <script lang="ts">
   import PostComponent from "./lib/PostComponent.svelte";
-  import { fetchAllPosts, Post } from "./lib/pdsfetch";
+  import AccountComponent from "./lib/AccountComponent.svelte";
+  import { fetchAllPosts, Post, getAllMetadataFromPds } from "./lib/pdsfetch";
   const postsPromise = fetchAllPosts();
+  const accountsPromise = getAllMetadataFromPds();
 </script>
 
 <main>
+  <h1>Welcome to the Feed</h1>
+  {#await accountsPromise}
+    <p>Loading...</p>
+  {:then accountsData}
+    <div id="Account">
+      {#each accountsData as accountObject}
+        <AccountComponent account={accountObject} />
+      {/each}
+    </div>
+  {:catch error}
+    <p>Error: {error.message}</p>    
+  {/await}
+
   {#await postsPromise}
     <p>Loading...</p>
   {:then postsData}
-    {#each postsData as postObject}
-      <PostComponent post={postObject as Post} />
-    {/each}
+    <div id="Feed">
+      {#each postsData as postObject}
+        <PostComponent post={postObject as Post} />
+      {/each}
+    </div>
   {/await}
 </main>
 
 <style>
-
 </style>

src/lib/AccountComponent.svelte

···
+<script lang="ts">
+    import type { AccountMetadata } from "./pdsfetch";
+    const { account }: { account: AccountMetadata } = $props();
+</script>
+<div id="accountContainer">
+        {#if account.avatarCid}
+            <img
+                id="avatar"
+                alt="avatar of {account.displayName}"
+                src="https://pds.witchcraft.systems/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.avatarCid}"
+            />
+        {/if}
+        <p>{account.displayName}</p>
+</div>
+<style>
+    #accountContainer {
+        display: column;
+        text-align: start;
+        border: 2px solid black;
+        padding: 4%;
+    }
+    #avatar {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+    }
+</style>

src/lib/PostComponent.svelte

···
     {#if post.authorAvatarCid}
       <img
         id="avatar"
+        alt="avatar of {post.displayName}"
         src="https://pds.witchcraft.systems/xrpc/com.atproto.sync.getBlob?did={post.authorDid}&cid={post.authorAvatarCid}"
       />
     {/if}
···
     {#if post.replyingDid}
       <p>Replying to: {post.replyingDid}</p>
     {/if}
-    {#if post.imagesLinksCid}
-      {#each post.imagesLinksCid as imageLink}
-        <img
-          id="embedImages"
-          src="https://pds.witchcraft.systems/xrpc/com.atproto.sync.getBlob?did={post.authorDid}&cid={imageLink}"
-        />
-      {/each}
+    {#if post.imagesCid}
+      <div id="imagesContainer">
+        {#each post.imagesCid as imageLink}
+          <img
+            id="embedImages"
+            alt="Post Image"
+            src="https://pds.witchcraft.systems/xrpc/com.atproto.sync.getBlob?did={post.authorDid}&cid={imageLink}"
+          />
+        {/each}
+      </div>
     {/if}
     {#if post.videosLinkCid}
       <video

src/lib/pdsfetch.ts

···
 import { simpleFetchHandler, XRPC } from "@atcute/client";
 import "@atcute/bluesky/lexicons";
+import type {
+  AppBskyActorDefs,
+  AppBskyFeedPost,
+  ComAtprotoRepoListRecords,
+} from "@atcute/client/lexicons";
 // import { ComAtprotoRepoListRecords.Record } from "@atcute/client/lexicons";
 // import { AppBskyFeedPost } from "@atcute/client/lexicons";
 // import { AppBskyActorDefs } from "@atcute/client/lexicons";
···
 class Post {
   authorDid: string;
   authorAvatarCid: string | null;
-  displayName : string;
+  displayName: string;
   text: string;
   timestamp: number;
   timenotstamp: string;
   quotingDid: string | null;
   replyingDid: string | null;
-  imagesLinksCid: string[] | null;
+  imagesCid: string[] | null;
   videosLinkCid: string | null;
 
-  constructor(record: ComAtprotoRepoListRecords.Record, account : AccountMetadata) {
+  constructor(
+    record: ComAtprotoRepoListRecords.Record,
+    account: AccountMetadata,
+  ) {
     this.authorDid = account.did;
     this.authorAvatarCid = account.avatarCid;
     this.displayName = account.displayName;
···
       this.replyingDid = null;
     }
     this.quotingDid = null;
-    this.imagesLinksCid = null;
+    this.imagesCid = null;
     this.videosLinkCid = null;
     switch (post.embed?.$type) {
       case "app.bsky.embed.images":
-        this.imagesLinksCid = post.embed.images.map((imageRecord) =>
+        this.imagesCid = post.embed.images.map((imageRecord: any) =>
           imageRecord.image.ref.$link
         );
         break;
···
         this.quotingDid = didFromATuri(post.embed.record.record.uri).repo;
         switch (post.embed.media.$type) {
           case "app.bsky.embed.images":
-            this.imagesLinksCid = post.embed.media.images.map((imageRecord) =>
+            this.imagesCid = post.embed.media.images.map((imageRecord) =>
               imageRecord.image.ref.$link
             );
 
···
       await fetchPosts(metadata.did)
     ),
   );
-  const posts : Post[] = postRecords.flatMap((userFetch) =>
-    userFetch.records.map((record) => new Post(record, users.find((user : AccountMetadata) => user.did == userFetch.did)))
+  const posts: Post[] = postRecords.flatMap((userFetch) =>
+    userFetch.records.map((record) => {
+      const user = users.find((user: AccountMetadata) =>
+        user.did == userFetch.did
+      );
+      if (!user) {
+        throw new Error(`User with DID ${userFetch.did} not found`);
+      }
+      return new Post(record, user);
+    })
   );
   posts.sort((a, b) => b.timestamp - a.timestamp);
   return posts;
 };
 
-export { fetchAllPosts, Post };
+export { fetchAllPosts, getAllMetadataFromPds, Post };
+export type { AccountMetadata };