From d9e6aa0523f11fda814b3752445adf7285a92ffc Mon Sep 17 00:00:00 2001
From: Zeu Capua <coding@zeu.dev>
Date: Sat, 4 Jan 2025 23:23:56 -0800
Subject: [PATCH 1/4] implement settings dropdown & delete confirm dialog

---
 src/lib/components/PostItem.svelte           | 67 ++++++++++++++++++--
 src/lib/server/client.ts                     |  2 +-
 src/routes/+page.server.ts                   |  3 +
 src/routes/p/[handle]/[record]/+page@.svelte |  2 +-
 4 files changed, 65 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/PostItem.svelte b/src/lib/components/PostItem.svelte
index 1859dff..7eef505 100644
--- a/src/lib/components/PostItem.svelte
+++ b/src/lib/components/PostItem.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
-  import { Tooltip } from "bits-ui";
-  import Icon from "@iconify/svelte";
   import { page } from "$app/state";
-  import Avatar from "svelte-boring-avatars";
+  import Icon from "@iconify/svelte";
   import { fade } from "svelte/transition";
+  import Avatar from "svelte-boring-avatars";
   import PostEmbed from "./PostEmbed.svelte";
+  import { Tooltip, DropdownMenu, AlertDialog } from "bits-ui";
   import { applyAction, enhance } from "$app/forms";
   import { formatDistanceToNowStrict } from "date-fns";
   import { toastComingSoon, toastError } from "$lib/utils";
   import type { FeedViewPost } from "@atproto/api/dist/client/types/app/bsky/feed/defs";
+  import type { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
 
   let { data, isBordered = false }: { data: FeedViewPost, isBordered?: boolean } = $props();
-  const user = page.data.user;
+  const user = page.data.user as ProfileViewDetailed;
   const bookmarks = page.data.bookmarks as Set<string>; 
   let isBookmarked = $state(bookmarks.has(data.post.uri) ?? false);
 
@@ -22,8 +23,41 @@
   let repostUri = $state(data.post.viewer?.repost ?? "");
 
   const record_id = data.post.uri.split("/").at(data.post.uri.split("/").length - 1);
+
+  let isDeleteDialogOpen = $state(false);
 </script>
 
+<AlertDialog.Root bind:open={isDeleteDialogOpen}>
+  <AlertDialog.Portal>
+    <AlertDialog.Overlay 
+      transition={fade} 
+      transitionConfig={{ duration: 100 }}
+      class="fixed inset-0 z-50 bg-black/80" 
+    />
+    <AlertDialog.Content 
+      transition={fade}
+      transitionConfig={{ duration: 100 }}
+      class="fixed text-white z-50 left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] rounded-xl w-full max-w-[70%] h-fit p-8 bg-slate-800 shadow-lg"
+    >
+      <AlertDialog.Title class="text-xl text-white font-bold mb-4">
+        Delete this post?
+      </AlertDialog.Title>
+      <AlertDialog.Description class="text-slate-300">
+        If you remove this post, you won't be able to recover it.
+      </AlertDialog.Description>
+
+      <menu class="flex gap-4 w-full h-fit mt-8">
+        <AlertDialog.Cancel class="basis-1/2 bg-slate-600 px-4 py-2 rounded hover:bg-slate-700 cursor-pointer">
+          Cancel
+        </AlertDialog.Cancel>
+        <AlertDialog.Action class="basis-1/2 bg-red-500 px-4 py-2 rounded hover:bg-red-600 cursor-pointer">
+          Delete
+        </AlertDialog.Action>
+      </menu>
+    </AlertDialog.Content>
+  </AlertDialog.Portal>
+</AlertDialog.Root>
+
 <article class={`flex flex-col gap-4 p-4 hover:bg-white/[0.025] transition-all duration-150 ${isBordered && "border"} ${data.reason && "border-dashed"}`} data-sveltekit-reload>
   <section class="flex items-center justify-between w-full">
     <div class="text-sm flex gap-2 items-center">
@@ -120,10 +154,10 @@
 
   <menu class="grid grid-cols-4 justify-items-end">
     <div class="flex gap-2 justify-self-start">
-      <button onclick={toastComingSoon} class="flex gap-1 justify-self-start">
-        <Icon icon="ph:wrench" class="size-6" />
-      </button>
       {#if !user}
+        <button onclick={toastComingSoon} class="flex gap-1 justify-self-start">
+          <Icon icon="ph:wrench" class="size-6" />
+        </button>
         <button onclick={() => toastError("Log in to bookmark")} class="flex gap-1 justify-self-start">
           <Icon 
             icon={isBookmarked ? "mingcute:bookmark-fill" : "mingcute:bookmark-line"}
@@ -131,6 +165,25 @@
           />
         </button>
       {:else}
+        <DropdownMenu.Root> 
+          <DropdownMenu.Trigger class="flex gap-1 justify-self-start">
+            <Icon icon="ph:wrench" class="size-6" />
+          </DropdownMenu.Trigger>
+
+          <DropdownMenu.Content 
+            class="flex flex-col gap-2 bg-slate-800 min-w-12 h-fit p-2 rounded-lg shadow-lg border border-slate-600 text-sm text-white"
+          >
+            {#if data.post.author.did === user.did}
+              <DropdownMenu.Item 
+                onclick={() => isDeleteDialogOpen = true}
+                class="text-red-400 cursor-pointer flex items-center px-2 py-1 gap-2 hover:bg-white/5 transition-all duration-150 rounded"
+              >
+                <Icon icon="ph:trash" class="size-4" />
+                <p>Delete post</p> 
+              </DropdownMenu.Item>
+            {/if}
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
         <form
           method="POST" 
           action="/?/bookmarkPost"
diff --git a/src/lib/server/client.ts b/src/lib/server/client.ts
index 3e4becf..1b758df 100644
--- a/src/lib/server/client.ts
+++ b/src/lib/server/client.ts
@@ -4,7 +4,7 @@ import { SessionStore, StateStore } from "./storage";
 import { dev } from "$app/environment";
 
 const publicUrl = "https://myb.zeu.dev";
-const url = dev ? "http://[::1]:5173" : publicUrl; // since I'm using ipv6, use ::1 instead 127.0.0.1
+const url = dev ? "http://127.0.0.1:5173" : publicUrl; // since I'm using ipv6, use ::1 instead 127.0.0.1
 const enc = encodeURIComponent;
 
 export const atclient = new NodeOAuthClient({
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index b52af09..915eb34 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -89,6 +89,9 @@ export const actions: Actions = {
 
       return { newReply: JSON.stringify(newReply.data.thread) };
     }
+  },
+  "deletePost": async ({ request, locals }) => {
+
   },
   "saveDraft": async ({ url, request, locals }) => {
     const formData = await request.formData();
diff --git a/src/routes/p/[handle]/[record]/+page@.svelte b/src/routes/p/[handle]/[record]/+page@.svelte
index 131cf6e..74b1948 100644
--- a/src/routes/p/[handle]/[record]/+page@.svelte
+++ b/src/routes/p/[handle]/[record]/+page@.svelte
@@ -22,7 +22,7 @@
   }
   let { data }: Props = $props();
   let author = data.author;
-  const user = page.data.user;
+  const user = page.data.user as ProfileViewDetailed | undefined;
   const bookmarks = page.data.bookmarks as Set<string>; 
   let isBookmarked = $state(bookmarks.has(data.recordUri) ?? false);
 

From 5e693fdb60189d157a78555517dff3dbb3181aff Mon Sep 17 00:00:00 2001
From: Zeu Capua <coding@zeu.dev>
Date: Mon, 6 Jan 2025 00:34:13 -0800
Subject: [PATCH 2/4] working deletePost form action on confirm

---
 src/lib/components/PostItem.svelte |  9 ++++++---
 src/routes/+page.server.ts         | 18 ++++++++++++++++++
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/PostItem.svelte b/src/lib/components/PostItem.svelte
index 7eef505..54568c5 100644
--- a/src/lib/components/PostItem.svelte
+++ b/src/lib/components/PostItem.svelte
@@ -50,9 +50,12 @@
         <AlertDialog.Cancel class="basis-1/2 bg-slate-600 px-4 py-2 rounded hover:bg-slate-700 cursor-pointer">
           Cancel
         </AlertDialog.Cancel>
-        <AlertDialog.Action class="basis-1/2 bg-red-500 px-4 py-2 rounded hover:bg-red-600 cursor-pointer">
-          Delete
-        </AlertDialog.Action>
+        <form method="POST" action="/?/deletePost" class="basis-1/2">
+          <input name="post_uri" type="hidden" value={data.post.uri} />
+          <AlertDialog.Action type="submit" class="w-full bg-red-500 px-4 py-2 rounded hover:bg-red-600 cursor-pointer">
+            Delete
+          </AlertDialog.Action>
+        </form>
       </menu>
     </AlertDialog.Content>
   </AlertDialog.Portal>
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 915eb34..3aa98f3 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -6,6 +6,7 @@ import { Agent, RichText } from "@atproto/api";
 import { isValidHandle } from "@atproto/syntax";
 import { renderTextToMarkdownToHTML } from "$lib/utils";
 import { error, fail, redirect, type Actions } from "@sveltejs/kit";
+import { useQueryClient } from "@tanstack/svelte-query";
 
 export const actions: Actions = {
   "login": async ({ cookies, request }) => {
@@ -91,7 +92,24 @@ export const actions: Actions = {
     }
   },
   "deletePost": async ({ request, locals }) => {
+    const formData = await request.formData();
+    const post_uri = formData.get("post_uri") as string | undefined;
+
+    try {
+      if (!(locals.agent instanceof Agent)) {
+        throw Error("Not logged in");
+      }
+
+      if (!post_uri) {
+        throw Error("Post URI not given");
+      }
 
+      await locals.agent.deletePost(post_uri);
+      return { message: "deleted post", post_uri }
+    }
+    catch (e) {
+      return fail(500);
+    }
   },
   "saveDraft": async ({ url, request, locals }) => {
     const formData = await request.formData();

From 417f7c101121a4d283ca3c4c58c587ef7fba0434 Mon Sep 17 00:00:00 2001
From: Zeu Capua <coding@zeu.dev>
Date: Mon, 13 Jan 2025 04:17:04 -0800
Subject: [PATCH 3/4] make delete form progressively enhance

---
 src/lib/components/PostItem.svelte | 428 +++++++++++++++--------------
 1 file changed, 224 insertions(+), 204 deletions(-)

diff --git a/src/lib/components/PostItem.svelte b/src/lib/components/PostItem.svelte
index 54568c5..6373f77 100644
--- a/src/lib/components/PostItem.svelte
+++ b/src/lib/components/PostItem.svelte
@@ -25,6 +25,7 @@
   const record_id = data.post.uri.split("/").at(data.post.uri.split("/").length - 1);
 
   let isDeleteDialogOpen = $state(false);
+  let isDeleted = $state(false);
 </script>
 
 <AlertDialog.Root bind:open={isDeleteDialogOpen}>
@@ -50,7 +51,20 @@
         <AlertDialog.Cancel class="basis-1/2 bg-slate-600 px-4 py-2 rounded hover:bg-slate-700 cursor-pointer">
           Cancel
         </AlertDialog.Cancel>
-        <form method="POST" action="/?/deletePost" class="basis-1/2">
+        <form 
+          use:enhance={() => {
+            return async ({ result }) => {
+              // @ts-ignore
+              if (result.data.uri === data.post.uri) {
+                isDeleted = true;
+              }
+              await applyAction(result);
+            }
+          }}
+          method="POST" 
+          action="/?/deletePost" 
+          class="basis-1/2"
+        >
           <input name="post_uri" type="hidden" value={data.post.uri} />
           <AlertDialog.Action type="submit" class="w-full bg-red-500 px-4 py-2 rounded hover:bg-red-600 cursor-pointer">
             Delete
@@ -61,230 +75,236 @@
   </AlertDialog.Portal>
 </AlertDialog.Root>
 
-<article class={`flex flex-col gap-4 p-4 hover:bg-white/[0.025] transition-all duration-150 ${isBordered && "border"} ${data.reason && "border-dashed"}`} data-sveltekit-reload>
-  <section class="flex items-center justify-between w-full">
-    <div class="text-sm flex gap-2 items-center">
-      <a href={`/p/${data.post.author.handle}`} >
-        {#if data.post.author.avatar}
-          <img 
-            src={data.post.author.avatar} 
-            alt={`${data.post.author.handle} profile picture`} 
-            class="size-8 rounded"
-          />
-        {:else}
-          <Avatar name={data.post.author.displayName} variant="bauhaus" />
-        {/if}
-      </a>
-      <div class="flex flex-col hover:underline ">
+{#if isDeleted}
+  <article class={`flex flex-col gap-4 p-4 hover:bg-white/[0.025] transition-all duration-150 ${isBordered && "border"} ${data.reason && "border-dashed"}`} data-sveltekit-reload>
+    <p>This post has been deleted</p>
+  </article>
+{:else}
+  <article class={`flex flex-col gap-4 p-4 hover:bg-white/[0.025] transition-all duration-150 ${isBordered && "border"} ${data.reason && "border-dashed"}`} data-sveltekit-reload>
+    <section class="flex items-center justify-between w-full">
+      <div class="text-sm flex gap-2 items-center">
         <a href={`/p/${data.post.author.handle}`} >
-          <p class="flex gap-1 items-center">
-            {data.post.author.displayName} 
-            <span class="text-xs">@{data.post.author.handle}</span>
-          </p>
+          {#if data.post.author.avatar}
+            <img 
+              src={data.post.author.avatar} 
+              alt={`${data.post.author.handle} profile picture`} 
+              class="size-8 rounded"
+            />
+          {:else}
+            <Avatar name={data.post.author.displayName} variant="bauhaus" />
+          {/if}
+        </a>
+        <div class="flex flex-col hover:underline ">
+          <a href={`/p/${data.post.author.handle}`} >
+            <p class="flex gap-1 items-center">
+              {data.post.author.displayName} 
+              <span class="text-xs">@{data.post.author.handle}</span>
+            </p>
+          </a>
+          <time class="text-xs font-light">
+            {formatDistanceToNowStrict(new Date(data.post.indexedAt))} ago
+          </time>
+        </div>
+        <a href={`/p/${data.post.author.handle}/${record_id}#selected_post`}>
+          <Icon icon="ep:right" />
         </a>
-        <time class="text-xs font-light">
-          {formatDistanceToNowStrict(new Date(data.post.indexedAt))} ago
-        </time>
       </div>
-      <a href={`/p/${data.post.author.handle}/${record_id}#selected_post`}>
-        <Icon icon="ep:right" />
-      </a>
-    </div>
 
-    <div class="flex gap-2 items-center">
-      {#if data.reason}
-        <Icon icon="bx:repost" />
-        <Tooltip.Root>
-          <Tooltip.Trigger>
-            <a href={`/p/${data.reason.by!.handle || "unknown"}`}>
-              <img 
-                src={data.reason.by!.avatar} 
-                alt={`${data.reason.by!.handle || "unknown"} profile picture`} 
-                class="size-8 rounded"
-              />
-            </a>
-          </Tooltip.Trigger>
-          <Tooltip.Content
-            transition={fade}
-            transitionConfig={{ duration: 150 }}
-            sideOffset={8}
-            side="bottom"
-          >
-            <div class="bg-white">
-              <Tooltip.Arrow class="rounded-[2px] border-l border-t border-dark-10" />
-            </div>
-            <div
-              class="rounded flex flex-col justify-center rounded-input border border-dark-10 bg-white px-2 py-1 text-xs font-medium shadow-popover outline-none"
+      <div class="flex gap-2 items-center">
+        {#if data.reason}
+          <Icon icon="bx:repost" />
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              <a href={`/p/${data.reason.by!.handle || "unknown"}`}>
+                <img 
+                  src={data.reason.by!.avatar} 
+                  alt={`${data.reason.by!.handle || "unknown"} profile picture`} 
+                  class="size-8 rounded"
+                />
+              </a>
+            </Tooltip.Trigger>
+            <Tooltip.Content
+              transition={fade}
+              transitionConfig={{ duration: 150 }}
+              sideOffset={8}
+              side="bottom"
             >
-              <p class="text-xs font-bold">{data.reason.by!.displayName || "unknown"}</p>
-              <p class="text-xs">@{data.reason.by!.handle || "unknown"}</p>
-            </div>
-          </Tooltip.Content>
-        </Tooltip.Root>
-      {/if}
-    </div>
-  </section>
-    
-  {#if data.reply}
-    <div class="flex gap-2 items-center text-sm font-light">
-      <Icon icon="ic:baseline-reply" />
-      <a 
-        href={`/p/${
-          // @ts-ignore
-          data.reply.parent.author?.handle ?? "/"
-        }`}
-      >
-        <p class="hover:underline">Reply to
-        {
-          // @ts-ignore 
-          data.reply.parent.author?.handle ?? "unknown"
-        }
-        </p>
-      </a>
-    </div>
-  {/if}
+              <div class="bg-white">
+                <Tooltip.Arrow class="rounded-[2px] border-l border-t border-dark-10" />
+              </div>
+              <div
+                class="rounded flex flex-col justify-center rounded-input border border-dark-10 bg-white px-2 py-1 text-xs font-medium shadow-popover outline-none"
+              >
+                <p class="text-xs font-bold">{data.reason.by!.displayName || "unknown"}</p>
+                <p class="text-xs">@{data.reason.by!.handle || "unknown"}</p>
+              </div>
+            </Tooltip.Content>
+          </Tooltip.Root>
+        {/if}
+      </div>
+    </section>
+      
+    {#if data.reply}
+      <div class="flex gap-2 items-center text-sm font-light">
+        <Icon icon="ic:baseline-reply" />
+        <a 
+          href={`/p/${
+            // @ts-ignore
+            data.reply.parent.author?.handle ?? "/"
+          }`}
+        >
+          <p class="hover:underline">Reply to
+          {
+            // @ts-ignore 
+            data.reply.parent.author?.handle ?? "unknown"
+          }
+          </p>
+        </a>
+      </div>
+    {/if}
 
-  <p class="text-sm prose prose-invert prose-p:text-white prose-sm prose-pink">
-    {@html 
-      // @ts-ignore
-      data.html 
-    }
-  </p>
+    <p class="text-sm prose prose-invert prose-p:text-white prose-sm prose-pink">
+      {@html 
+        // @ts-ignore
+        data.html 
+      }
+    </p>
 
-  {#if data.post.embed}
-    <PostEmbed embed={data.post.embed} />
-  {/if}
+    {#if data.post.embed}
+      <PostEmbed embed={data.post.embed} />
+    {/if}
+
+    <menu class="grid grid-cols-4 justify-items-end">
+      <div class="flex gap-2 justify-self-start">
+        {#if !user}
+          <button onclick={toastComingSoon} class="flex gap-1 justify-self-start">
+            <Icon icon="ph:wrench" class="size-6" />
+          </button>
+          <button onclick={() => toastError("Log in to bookmark")} class="flex gap-1 justify-self-start">
+            <Icon 
+              icon={isBookmarked ? "mingcute:bookmark-fill" : "mingcute:bookmark-line"}
+              class="size-6" 
+            />
+          </button>
+        {:else}
+          <DropdownMenu.Root> 
+            <DropdownMenu.Trigger class="flex gap-1 justify-self-start">
+              <Icon icon="ph:wrench" class="size-6" />
+            </DropdownMenu.Trigger>
+
+            <DropdownMenu.Content 
+              class="flex flex-col gap-2 bg-slate-800 min-w-12 h-fit p-2 rounded-lg shadow-lg border border-slate-600 text-sm text-white"
+            >
+              {#if data.post.author.did === user.did}
+                <DropdownMenu.Item 
+                  onclick={() => isDeleteDialogOpen = true}
+                  class="text-red-400 cursor-pointer flex items-center px-2 py-1 gap-2 hover:bg-white/5 transition-all duration-150 rounded"
+                >
+                  <Icon icon="ph:trash" class="size-4" />
+                  <p>Delete post</p> 
+                </DropdownMenu.Item>
+              {/if}
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+          <form
+            method="POST" 
+            action="/?/bookmarkPost"
+            use:enhance={() => {
+              return async ({ result }) => {
+                // @ts-ignore
+                if (result.data.uri === data.post.uri) {
+                  // @ts-ignore
+                  isBookmarked = result.data.message === "bookmarked";
+                }
+                await applyAction(result);
+              }
+            }} 
+          >
+            <input name="post_uri" type="hidden" value={data.post.uri} />
+            <input name="is_bookmarked" type="hidden" value={isBookmarked} />
+            <button type="submit" class="flex gap-1 justify-self-start">
+              <Icon 
+                icon={isBookmarked ? "mingcute:bookmark-fill" : "mingcute:bookmark-line"}
+                class="size-6" 
+              />
+            </button>
+          </form>
+        {/if}
+      </div>
 
-  <menu class="grid grid-cols-4 justify-items-end">
-    <div class="flex gap-2 justify-self-start">
       {#if !user}
-        <button onclick={toastComingSoon} class="flex gap-1 justify-self-start">
-          <Icon icon="ph:wrench" class="size-6" />
+        <a href={`/p/${data.post.author.handle}/${record_id}#selected_post`} class="flex gap-1">
+          <Icon icon="iconamoon:comment" class="size-6" />
+          {data.post.replyCount}
+        </a>
+        <button onclick={() => toastError("Must be logged in to repost")} class="flex gap-1">
+          <Icon icon="bx:repost" class="size-6" />
+          {reposts}
         </button>
-        <button onclick={() => toastError("Log in to bookmark")} class="flex gap-1 justify-self-start">
-          <Icon 
-            icon={isBookmarked ? "mingcute:bookmark-fill" : "mingcute:bookmark-line"}
-            class="size-6" 
-          />
+        <button onclick={() => toastError("Must be logged in to like")} class="flex gap-1">
+          <Icon icon="prime:heart" class="size-6" />
+          {likes}
         </button>
       {:else}
-        <DropdownMenu.Root> 
-          <DropdownMenu.Trigger class="flex gap-1 justify-self-start">
-            <Icon icon="ph:wrench" class="size-6" />
-          </DropdownMenu.Trigger>
-
-          <DropdownMenu.Content 
-            class="flex flex-col gap-2 bg-slate-800 min-w-12 h-fit p-2 rounded-lg shadow-lg border border-slate-600 text-sm text-white"
-          >
-            {#if data.post.author.did === user.did}
-              <DropdownMenu.Item 
-                onclick={() => isDeleteDialogOpen = true}
-                class="text-red-400 cursor-pointer flex items-center px-2 py-1 gap-2 hover:bg-white/5 transition-all duration-150 rounded"
-              >
-                <Icon icon="ph:trash" class="size-4" />
-                <p>Delete post</p> 
-              </DropdownMenu.Item>
-            {/if}
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
-        <form
+        <a href={`/p/${data.post.author.handle}/${record_id}#selected_post`} class="flex gap-1">
+          <Icon icon="iconamoon:comment" class="size-6" />
+          {data.post.replyCount}
+        </a>
+        <form 
           method="POST" 
-          action="/?/bookmarkPost"
+          action="/?/toggleRepostPost" 
           use:enhance={() => {
-            return async ({ result }) => {
-              // @ts-ignore
-              if (result.data.uri === data.post.uri) {
+              return async ({ result }) => {
                 // @ts-ignore
-                isBookmarked = result.data.message === "bookmarked";
+                if (result.data.uri === data.post.uri) {
+                  // @ts-ignore
+                  repostUri = result.data.repostUri;
+                  if (repostUri) { reposts++; }
+                  else { reposts--; }
+                }
+                await applyAction(result);
               }
-              await applyAction(result);
-            }
-          }} 
+          }}
         >
+          <input name="repost_uri" type="hidden" value={repostUri} />
           <input name="post_uri" type="hidden" value={data.post.uri} />
-          <input name="is_bookmarked" type="hidden" value={isBookmarked} />
-          <button type="submit" class="flex gap-1 justify-self-start">
+          <input name="post_cid" type="hidden" value={data.post.cid} />
+          <button type="submit" class="flex gap-1">
             <Icon 
-              icon={isBookmarked ? "mingcute:bookmark-fill" : "mingcute:bookmark-line"}
-              class="size-6" 
+              icon="bx:repost" 
+              class={`size-6 ${repostUri ? "text-green-500" : "text-white"}`} 
             />
+            {reposts}
           </button>
         </form>
-      {/if}
-    </div>
-
-    {#if !user}
-      <a href={`/p/${data.post.author.handle}/${record_id}#selected_post`} class="flex gap-1">
-        <Icon icon="iconamoon:comment" class="size-6" />
-        {data.post.replyCount}
-      </a>
-      <button onclick={() => toastError("Must be logged in to repost")} class="flex gap-1">
-        <Icon icon="bx:repost" class="size-6" />
-        {reposts}
-      </button>
-      <button onclick={() => toastError("Must be logged in to like")} class="flex gap-1">
-        <Icon icon="prime:heart" class="size-6" />
-        {likes}
-      </button>
-    {:else}
-      <a href={`/p/${data.post.author.handle}/${record_id}#selected_post`} class="flex gap-1">
-        <Icon icon="iconamoon:comment" class="size-6" />
-        {data.post.replyCount}
-      </a>
-      <form 
-        method="POST" 
-        action="/?/toggleRepostPost" 
-        use:enhance={() => {
-            return async ({ result }) => {
-              // @ts-ignore
-              if (result.data.uri === data.post.uri) {
-                // @ts-ignore
-                repostUri = result.data.repostUri;
-                if (repostUri) { reposts++; }
-                else { reposts--; }
-              }
-              await applyAction(result);
-            }
-        }}
-      >
-        <input name="repost_uri" type="hidden" value={repostUri} />
-        <input name="post_uri" type="hidden" value={data.post.uri} />
-        <input name="post_cid" type="hidden" value={data.post.cid} />
-        <button type="submit" class="flex gap-1">
-          <Icon 
-            icon="bx:repost" 
-            class={`size-6 ${repostUri ? "text-green-500" : "text-white"}`} 
-          />
-          {reposts}
-        </button>
-      </form>
-      <form 
-        method="POST" 
-        action="/?/toggleLikePost" 
-        use:enhance={() => {
-            return async ({ result }) => {
-              // @ts-ignore
-              if (result.data.uri === data.post.uri) {
+        <form 
+          method="POST" 
+          action="/?/toggleLikePost" 
+          use:enhance={() => {
+              return async ({ result }) => {
                 // @ts-ignore
-                likeUri = result.data.likeUri;
-                if (likeUri) { likes++; }
-                else { likes--; }
+                if (result.data.uri === data.post.uri) {
+                  // @ts-ignore
+                  likeUri = result.data.likeUri;
+                  if (likeUri) { likes++; }
+                  else { likes--; }
+                }
+                await applyAction(result);
               }
-              await applyAction(result);
-            }
-        }}
-      >
-        <input name="like_uri" type="hidden" value={likeUri} />
-        <input name="post_uri" type="hidden" value={data.post.uri} />
-        <input name="post_cid" type="hidden" value={data.post.cid} />
-        <button type="submit" class="flex gap-1">
-          <Icon 
-            icon={likeUri ? "prime:heart-fill" : "prime:heart"}
-            class={`size-6 ${likeUri ? "text-red-500" : "text-white"}`} 
-          />
-          {likes}
-        </button>
-      </form>
-    {/if}
-  </menu>
-</article>
+          }}
+        >
+          <input name="like_uri" type="hidden" value={likeUri} />
+          <input name="post_uri" type="hidden" value={data.post.uri} />
+          <input name="post_cid" type="hidden" value={data.post.cid} />
+          <button type="submit" class="flex gap-1">
+            <Icon 
+              icon={likeUri ? "prime:heart-fill" : "prime:heart"}
+              class={`size-6 ${likeUri ? "text-red-500" : "text-white"}`} 
+            />
+            {likes}
+          </button>
+        </form>
+      {/if}
+    </menu>
+  </article>
+{/if}

From e59ea333096a72f03f0609d9e72c40f5c551b3cf Mon Sep 17 00:00:00 2001
From: Zeu Capua <coding@zeu.dev>
Date: Mon, 13 Jan 2025 08:44:56 -0800
Subject: [PATCH 4/4] update enhance checking

---
 src/lib/components/PostItem.svelte | 2 +-
 src/lib/server/client.ts           | 2 +-
 src/routes/+page.server.ts         | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/PostItem.svelte b/src/lib/components/PostItem.svelte
index 6373f77..293183c 100644
--- a/src/lib/components/PostItem.svelte
+++ b/src/lib/components/PostItem.svelte
@@ -55,7 +55,7 @@
           use:enhance={() => {
             return async ({ result }) => {
               // @ts-ignore
-              if (result.data.uri === data.post.uri) {
+              if (result.data.post_uri === data.post.uri) {
                 isDeleted = true;
               }
               await applyAction(result);
diff --git a/src/lib/server/client.ts b/src/lib/server/client.ts
index 1b758df..ca93853 100644
--- a/src/lib/server/client.ts
+++ b/src/lib/server/client.ts
@@ -4,7 +4,7 @@ import { SessionStore, StateStore } from "./storage";
 import { dev } from "$app/environment";
 
 const publicUrl = "https://myb.zeu.dev";
-const url = dev ? "http://127.0.0.1:5173" : publicUrl; // since I'm using ipv6, use ::1 instead 127.0.0.1
+const url = dev ? "http://[::1]:5173" : publicUrl; // since I'm using ipv6, use [::1] instead 127.0.0.1
 const enc = encodeURIComponent;
 
 export const atclient = new NodeOAuthClient({
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 3aa98f3..1d88c31 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -6,7 +6,6 @@ import { Agent, RichText } from "@atproto/api";
 import { isValidHandle } from "@atproto/syntax";
 import { renderTextToMarkdownToHTML } from "$lib/utils";
 import { error, fail, redirect, type Actions } from "@sveltejs/kit";
-import { useQueryClient } from "@tanstack/svelte-query";
 
 export const actions: Actions = {
   "login": async ({ cookies, request }) => {