♿ Fix UX in post list

pkg/view/src/components/PostItem.tsx

@@ -35,8 +35,14 @@ export default function PostItem(props: {
     setReacting(false);
   }
 
-  const element = (
-    <>
+  const content = (
+    <article class="prose">
+      <SolidMarkdown children={props.post.content} />
+    </article>
+  );
+
+  return (
+    <div class="post-item">
       <Show when={!props.noAuthor}>
         <a href={`/accounts/${props.post.author.name}`}>
           <div class="flex bg-base-200">
@@ -59,9 +65,12 @@ export default function PostItem(props: {
       </Show>
       <div class="px-7">
         <h2 class="card-title">{props.post.title}</h2>
-        <article class="prose">
-          <SolidMarkdown children={props.post.content} />
-        </article>
+
+        <Show when={!props.noClick} fallback={content}>
+          <a href={`/posts/${props.post.id}`}>
+            {content}
+          </a>
+        </Show>
 
         <div class="mt-2 flex gap-2">
           <For each={props.post.categories}>
@@ -92,7 +101,8 @@ export default function PostItem(props: {
               noControl
               post={props.post.repost_to}
               onError={props.onError}
-              onReact={props.onReact} />
+              onReact={props.onReact}
+            />
           </div>
         </Show>
         <Show when={!props.noRelated && props.post.reply_to}>
@@ -105,7 +115,8 @@ export default function PostItem(props: {
               noControl
               post={props.post.reply_to}
               onError={props.onError}
-              onReact={props.onReact} />
+              onReact={props.onReact}
+            />
           </div>
         </Show>
       </div>
@@ -170,20 +181,6 @@ export default function PostItem(props: {
           </div>
         </div>
       </Show>
-    </>
+    </div>
   );
-
-  if (props.noClick) {
-    return (
-      <div class="post-item">
-        {element}
-      </div>
-    );
-  } else {
-    return (
-      <a class="post-item" href={`/posts/${props.post.id}`}>
-        {element}
-      </a>
-    );
-  }
 }

pkg/view/src/components/PostList.tsx

@@ -57,16 +57,18 @@ export default function PostList(props: {
     <div id="post-list">
       <div id="posts">
         <For each={posts()}>
-          {item => <PostItem
-            post={item}
-            noRelated={props.noRelated}
-            onRepost={props.onRepost}
-            onReply={props.onReply}
-            onEdit={props.onEdit}
-            onDelete={deletePost}
-            onReact={() => readPosts()}
-            onError={props.onError}
-          />}
+          {item =>
+            <PostItem
+              post={item}
+              noRelated={props.noRelated}
+              onRepost={props.onRepost}
+              onReply={props.onReply}
+              onEdit={props.onEdit}
+              onDelete={deletePost}
+              onReact={() => readPosts()}
+              onError={props.onError}
+            />
+          }
         </For>
 
         <div class="flex justify-center">

pkg/view/src/pages/post.tsx

@@ -5,6 +5,7 @@ import { closeModel, openModel } from "../scripts/modals.ts";
 import PostPublish from "../components/PostPublish.tsx";
 import PostList from "../components/PostList.tsx";
 import PostItem from "../components/PostItem.tsx";
+import { getAtk } from "../stores/userinfo.tsx";
 
 export default function PostPage() {
   const [error, setError] = createSignal<string | null>(null);
@@ -37,6 +38,21 @@ export default function PostPage() {
 
   readPost();
 
+  async function deletePost(item: any) {
+    if (!confirm(`Are you sure to delete post#${item.id}?`)) return;
+
+    const res = await fetch(`/api/posts/${item.id}`, {
+      method: "DELETE",
+      headers: { "Authorization": `Bearer ${getAtk()}` }
+    });
+    if (res.status !== 200) {
+      setError(await res.text());
+    } else {
+      back();
+      setError(null);
+    }
+  }
+
   function setMeta(data: any, field: string, open = true) {
     const meta: { [id: string]: any } = {
       reposting: null,
@@ -112,6 +128,7 @@ export default function PostPage() {
           post={info()}
           onError={setError}
           onReact={readPost}
+          onDelete={deletePost}
           onRepost={(item) => setMeta(item, "reposting")}
           onReply={(item) => setMeta(item, "replying")}
           onEdit={(item) => setMeta(item, "editing")}