From ebca274e5a1773bc5ce994bf730f7ccd61e43de9 Mon Sep 17 00:00:00 2001
From: Astra <me@astrra.space>
Date: Sun, 20 Apr 2025 20:08:13 +0900
Subject: [PATCH] "Final-ish" design

---
 config.ts                    |  10 +-
 src/App.svelte               |   3 +
 src/app.css                  |   1 +
 src/lib/PostComponent.svelte | 219 ++++++++++++++++++++++++++++++-----
 src/lib/pdsfetch.ts          |   2 +
 5 files changed, 202 insertions(+), 33 deletions(-)

diff --git a/config.ts b/config.ts
index a507eb3..b8284a6 100644
--- a/config.ts
+++ b/config.ts
@@ -6,7 +6,7 @@ export class Config {
      * The base URL of the PDS (Personal Data Server)
      * @default "https://pds.witchcraft.systems"
      */
-    static readonly PDS_URL: string = "https://ap.brid.gy";
+    static readonly PDS_URL: string = "https://pds.witchcraft.systems";
 
     /**
      * The base URL of the frontend service for linking to replies
@@ -18,5 +18,11 @@ export class Config {
      * Maximum number of posts to fetch from the PDS per user
      * @default 10
      */
-    static readonly MAX_POSTS_PER_USER: number = 1;
+    static readonly MAX_POSTS_PER_USER: number = 22;
+
+    /**
+     * Footer text for the dashboard
+     * @default "Astrally projected from witchcraft.systems"
+     */
+    static readonly FOOTER_TEXT: string = "Astrally projected from <a href='https://witchcraft.systems' target='_blank'>witchcraft.systems</a>";
 }
\ No newline at end of file
diff --git a/src/App.svelte b/src/App.svelte
index c5a024c..fbf59f1 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -2,6 +2,7 @@
   import PostComponent from "./lib/PostComponent.svelte";
   import AccountComponent from "./lib/AccountComponent.svelte";
   import { fetchAllPosts, Post, getAllMetadataFromPds } from "./lib/pdsfetch";
+  import { Config } from "../config";
   const postsPromise = fetchAllPosts();
   const accountsPromise = getAllMetadataFromPds();
 </script>
@@ -19,6 +20,7 @@
         <AccountComponent account={accountObject} />
       {/each}
       </div>
+      <p>{@html Config.FOOTER_TEXT}</p>
     </div>
   {:catch error}
     <p>Error: {error.message}</p>    
@@ -74,6 +76,7 @@
     background-color: #0d0620;
     height: 80vh;
     padding: 20px;
+    margin-left: 20px;
   }
   #accountsList {
     display: flex;
diff --git a/src/app.css b/src/app.css
index 988c405..05a51fd 100644
--- a/src/app.css
+++ b/src/app.css
@@ -40,6 +40,7 @@ a {
 }
 a:hover {
   color: #535bf2;
+  text-decoration: underline;
 }
 
 body {
diff --git a/src/lib/PostComponent.svelte b/src/lib/PostComponent.svelte
index b240c95..fc24700 100644
--- a/src/lib/PostComponent.svelte
+++ b/src/lib/PostComponent.svelte
@@ -1,7 +1,58 @@
 <script lang="ts">
   import { Post } from "./pdsfetch";
   import { Config } from "../../config";
+  import { onMount } from "svelte";
+
   let { post }: { post: Post } = $props();
+
+  // State for image carousel
+  let currentImageIndex = $state(0);
+
+  // Functions to navigate carousel
+  function nextImage() {
+    if (post.imagesCid && currentImageIndex < post.imagesCid.length - 1) {
+      currentImageIndex++;
+    }
+  }
+
+  function prevImage() {
+    if (currentImageIndex > 0) {
+      currentImageIndex--;
+    }
+  }
+
+  // Function to preload an image
+  function preloadImage(index: number): void {
+    if (!post.imagesCid || index < 0 || index >= post.imagesCid.length) return;
+
+    const img = new Image();
+    img.src = `${Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did=${post.authorDid}&cid=${post.imagesCid[index]}`;
+  }
+
+  // Preload adjacent images when current index changes
+  $effect(() => {
+    if (post.imagesCid && post.imagesCid.length > 1) {
+      // Preload next image if available
+      if (currentImageIndex < post.imagesCid.length - 1) {
+        preloadImage(currentImageIndex + 1);
+      }
+
+      // Preload previous image if available
+      if (currentImageIndex > 0) {
+        preloadImage(currentImageIndex - 1);
+      }
+    }
+  });
+
+  // Initial preload of images
+  onMount(() => {
+    if (post.imagesCid && post.imagesCid.length > 1) {
+      // Preload the next image if it exists
+      if (post.imagesCid.length > 1) {
+        preloadImage(1);
+      }
+    }
+  });
 </script>
 
 <div id="postContainer">
@@ -14,24 +65,30 @@
       />
     {/if}
     <div id="headerText">
-      <a href="{Config.FRONTEND_URL}/profile/{post.authorDid}"
-        >{post.displayName} ( {post.authorHandle} )</a
-      >
-      |
-      <a href="{Config.FRONTEND_URL}/profile/{post.authorDid}/post/{post.cid}"
-        >{post.timenotstamp}</a
+      <a id="displayName" href="{Config.FRONTEND_URL}/profile/{post.authorDid}"
+        >{post.displayName}</a
       >
+      <p id="handle">
+        <a href="{Config.FRONTEND_URL}/profile/{post.authorHandle}"
+          >{post.authorHandle}</a
+        >
+
+        <a
+          id="postLink"
+          href="{Config.FRONTEND_URL}/profile/{post.authorDid}/post/{post.recordName}"
+          >{post.timenotstamp}</a
+        >
+      </p>
     </div>
   </div>
   <div id="postContent">
     {#if post.replyingUri}
-    <a
-      id="replyingText"
-      href="{Config.FRONTEND_URL}/profile/{post.replyingUri.repo}/post/{post
-        .replyingUri.rkey}">replying to {post.replyingUri.repo}</a
-    >
+      <a
+        id="replyingText"
+        href="{Config.FRONTEND_URL}/profile/{post.replyingUri.repo}/post/{post
+          .replyingUri.rkey}">replying to {post.replyingUri.repo}</a
+      >
     {/if}
-    <div id="postText">{post.text}</div>
     {#if post.quotingUri}
       <a
         id="quotingText"
@@ -39,27 +96,54 @@
           .quotingUri.rkey}">quoting {post.quotingUri.repo}</a
       >
     {/if}
-    {#if post.imagesCid}
-      <div id="imagesContainer">
-        {#each post.imagesCid as imageLink}
-          <img
-            id="embedImages"
-            alt="Post Image"
-            src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={post.authorDid}&cid={imageLink}"
-          />
-        {/each}
+    <div id="postText">{post.text}</div>
+    {#if post.imagesCid && post.imagesCid.length > 0}
+      <div id="carouselContainer">
+        <img
+          id="embedImages"
+          alt="Post Image {currentImageIndex + 1} of {post.imagesCid.length}"
+          src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={post.authorDid}&cid={post
+            .imagesCid[currentImageIndex]}"
+        />
+
+        {#if post.imagesCid.length > 1}
+          <div id="carouselControls">
+            <button
+              id="prevBtn"
+              on:click={prevImage}
+              disabled={currentImageIndex === 0}>←</button
+            >
+            <div id="carouselIndicators">
+              {#each post.imagesCid as _, i}
+                <div
+                  class="indicator {i === currentImageIndex ? 'active' : ''}"
+                ></div>
+              {/each}
+            </div>
+            <button
+              id="nextBtn"
+              on:click={nextImage}
+              disabled={currentImageIndex === post.imagesCid.length - 1}
+              >→</button
+            >
+          </div>
+        {/if}
       </div>
     {/if}
     {#if post.videosLinkCid}
       <video
         id="embedVideo"
         src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={post.authorDid}&cid={post.videosLinkCid}"
-      />
+        controls
+      ></video>
     {/if}
   </div>
 </div>
 
 <style>
+  a:hover {
+    text-decoration: underline;
+  }
   #postContainer {
     display: flex;
     flex-direction: column;
@@ -79,6 +163,26 @@
     border-bottom: 1px solid #8054f0;
     font-weight: bold;
     overflow-wrap: break-word;
+    height: 60px;
+  }
+  #displayName {
+    color: white;
+    font-size: 1.2em;
+    padding: 0;
+    margin: 0;
+  }
+  #handle {
+    color: #8054f0;
+    font-size: 0.8em;
+    padding: 0;
+    margin: 0;
+  }
+
+  #postLink {
+    color: #8054f0;
+    font-size: 0.8em;
+    padding: 0;
+    margin: 0;
   }
   #postContent {
     display: flex;
@@ -95,9 +199,14 @@
     padding: 0;
     padding-bottom: 5px;
   }
+  #quotingText {
+    font-size: 0.7em;
+    margin: 0;
+    padding: 0;
+    padding-bottom: 5px;
+  }
   #postText {
     margin: 0;
-    margin-bottom: 5px;
     padding: 0;
   }
   #headerText {
@@ -108,20 +217,68 @@
     overflow: hidden;
   }
   #avatar {
-    width: 50px;
-    height: 50px;
+    height: 100%;
     margin: 0px;
     margin-left: 0px;
     border-right: #8054f0 1px solid;
   }
   #embedImages {
-    width: 50%;
-    height: 50%;
-    margin-top: 0px;
-    margin-bottom: -5px;
+    min-width: 500px;
+    max-width: 500px;
+    max-height: 500px;
+    object-fit: contain;
+
+    margin: 0;
+  }
+  #carouselContainer {
+    position: relative;
+    width: 100%;
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  #carouselControls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    max-width: 500px;
+    margin-top: 5px;
+  }
+  #carouselIndicators {
+    display: flex;
+    gap: 5px;
+  }
+  .indicator {
+    width: 8px;
+    height: 8px;
+    background-color: #4a4a4a;
+  }
+  .indicator.active {
+    background-color: #8054f0;
+  }
+  #prevBtn,
+  #nextBtn {
+    background-color: rgba(31, 17, 69, 0.7);
+    color: white;
+    border: 1px solid #8054f0;
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  #prevBtn:disabled,
+  #nextBtn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
   }
   #embedVideo {
-    width: 50%;
-    height: 50%;
+    width: 100%;
+    max-width: 500px;
+    margin-top: 10px;
+    align-self: center;
   }
 </style>
diff --git a/src/lib/pdsfetch.ts b/src/lib/pdsfetch.ts
index 61be9bf..d48e1b9 100644
--- a/src/lib/pdsfetch.ts
+++ b/src/lib/pdsfetch.ts
@@ -32,6 +32,7 @@ class Post {
   authorDid: string;
   authorAvatarCid: string | null;
   postCid: string;
+  recordName: string;
   authorHandle: string;
   displayName: string;
   text: string;
@@ -47,6 +48,7 @@ class Post {
     account: AccountMetadata,
   ) {
     this.postCid = record.cid;
+    this.recordName = record.uri.split("/").slice(-1)[0];
     this.authorDid = account.did;
     this.authorAvatarCid = account.avatarCid;
     this.authorHandle = account.handle;