💄 Optimized post controls

pkg/view/src/components/posts/PostItem.tsx

@@ -5,19 +5,19 @@ import * as marked from "marked";
 import DOMPurify from "dompurify";
 
 export default function PostItem(props: {
-  post: any,
+  post: any;
-  noClick?: boolean,
+  noClick?: boolean;
-  noAuthor?: boolean,
+  noAuthor?: boolean;
-  noControl?: boolean,
+  noControl?: boolean;
-  noRelated?: boolean,
+  noRelated?: boolean;
-  noContent?: boolean,
+  noContent?: boolean;
-  onRepost?: (post: any) => void,
+  onRepost?: (post: any) => void;
-  onReply?: (post: any) => void,
+  onReply?: (post: any) => void;
-  onEdit?: (post: any) => void,
+  onEdit?: (post: any) => void;
-  onDelete?: (post: any) => void,
+  onDelete?: (post: any) => void;
-  onSearch?: (filter: any) => void,
+  onSearch?: (filter: any) => void;
-  onError: (message: string | null) => void,
+  onError: (message: string | null) => void;
-  onReact: () => void
+  onReact: () => void;
 }) {
   const [reacting, setReacting] = createSignal(false);
 
@@ -27,7 +27,7 @@ export default function PostItem(props: {
     setReacting(true);
     const res = await fetch(`/api/posts/${item.id}/react/${type}`, {
       method: "POST",
-      headers: { "Authorization": `Bearer ${getAtk()}` }
+      headers: { Authorization: `Bearer ${getAtk()}` },
     });
     if (res.status !== 201 && res.status !== 204) {
       props.onError(await res.text());
@@ -38,9 +38,7 @@ export default function PostItem(props: {
     setReacting(false);
   }
 
-  const content = (
+  const content = <article class="prose" innerHTML={DOMPurify.sanitize(marked.parse(props.post.content) as string)} />;
-    <article class="prose" innerHTML={DOMPurify.sanitize(marked.parse(props.post.content) as string)} />
-  );
 
   return (
     <div class="post-item">
@@ -49,8 +47,10 @@ export default function PostItem(props: {
           <div class="flex bg-base-200">
             <div class="avatar pl-[20px]">
               <div class="w-12">
-                <Show when={props.post.author.avatar}
+                <Show
-                      fallback={<span class="text-3xl">{props.post.author.name.substring(0, 1)}</span>}>
+                  when={props.post.author.avatar}
+                  fallback={<span class="text-3xl">{props.post.author.name.substring(0, 1)}</span>}
+                >
                   <img alt="avatar" src={props.post.author.avatar} />
                 </Show>
               </div>
@@ -69,27 +69,25 @@ export default function PostItem(props: {
         <div class="px-7 py-5">
           <h2 class="card-title">{props.post.title}</h2>
           <Show when={!props.noClick} fallback={content}>
-            <a href={`/posts/${props.post.alias}`}>
+            <a href={`/posts/${props.post.alias}`}>{content}</a>
-              {content}
-            </a>
           </Show>
 
           <div class="mt-2 flex gap-2">
             <For each={props.post.categories}>
-              {item =>
+              {(item) => (
                 <a href={`/search?category=${item.alias}`} class="badge badge-primary">
                   <i class="fa-solid fa-layer-group me-1.5"></i>
                   {item.name}
                 </a>
-              }
+              )}
             </For>
             <For each={props.post.tags}>
-              {item =>
+              {(item) => (
                 <a href={`/search?tag=${item.alias}`} class="badge badge-accent">
                   <i class="fa-regular fa-tag me-1.5"></i>
                   {item.name}
                 </a>
-              }
+              )}
             </For>
           </div>
 
@@ -105,12 +103,7 @@ export default function PostItem(props: {
               Reposted a post
             </p>
             <div class="border border-base-200 mb-5">
-              <PostItem
+              <PostItem noControl post={props.post.repost_to} onError={props.onError} onReact={props.onReact} />
-                noControl
-                post={props.post.repost_to}
-                onError={props.onError}
-                onReact={props.onReact}
-              />
             </div>
           </Show>
           <Show when={!props.noRelated && props.post.reply_to}>
@@ -119,12 +112,7 @@ export default function PostItem(props: {
               Replied a post
             </p>
             <div class="border border-base-200 mb-5">
-              <PostItem
+              <PostItem noControl post={props.post.reply_to} onError={props.onError} onReact={props.onReact} />
-                noControl
-                post={props.post.reply_to}
-                onError={props.onError}
-                onReact={props.onReact}
-              />
             </div>
           </Show>
         </div>
@@ -133,58 +121,85 @@ export default function PostItem(props: {
       <Show when={!props.noControl}>
         <div class="relative">
           <Show when={!userinfo?.isLoggedIn}>
-            <div
+            <div class="px-7 py-2.5 h-12 w-full opacity-0 transition-opacity hover:opacity-100 bg-base-100 border-t border-base-200 z-[1] absolute top-0 left-0">
-              class="px-7 py-2.5 h-12 w-full opacity-0 transition-opacity hover:opacity-100 bg-base-100 border-t border-base-200 z-[1] absolute top-0 left-0">
               <b>Login!</b> To access entire platform.
             </div>
           </Show>
 
           <div class="grid grid-cols-3 border-y border-base-200">
-            <div class="grid grid-cols-2">
+            <div class="max-md:col-span-2 md:col-span-1 grid grid-cols-2">
               <div class="tooltip" data-tip="Daisuki">
-                <button type="button" class="btn btn-ghost btn-block" disabled={reacting()}
+                <button
-                        onClick={() => reactPost(props.post, "like")}>
+                  type="button"
+                  class="btn btn-ghost btn-block"
+                  disabled={reacting()}
+                  onClick={() => reactPost(props.post, "like")}
+                >
                   <i class="fa-solid fa-thumbs-up"></i>
                   <code class="font-mono">{props.post.like_count}</code>
                 </button>
               </div>
 
               <div class="tooltip" data-tip="Daikirai">
-                <button type="button" class="btn btn-ghost btn-block" disabled={reacting()}
+                <button
-                        onClick={() => reactPost(props.post, "dislike")}>
+                  type="button"
+                  class="btn btn-ghost btn-block"
+                  disabled={reacting()}
+                  onClick={() => reactPost(props.post, "dislike")}
+                >
                   <i class="fa-solid fa-thumbs-down"></i>
                   <code class="font-mono">{props.post.dislike_count}</code>
                 </button>
               </div>
             </div>
 
-            <div class="col-span-2 flex justify-end">
+            <div class="max-md:col-span-1 md:col-span-2 flex justify-end">
-              <div class="tooltip" data-tip="Reply">
+              <section class="max-md:hidden">
-                <button type="button" class="btn btn-ghost btn-block"
+                <div class="tooltip" data-tip="Reply">
-                        onClick={() => props.onReply && props.onReply(props.post)}>
+                  <button
-                  <i class="fa-solid fa-reply"></i>
+                    type="button"
-                </button>
+                    class="btn btn-ghost btn-block"
-              </div>
+                    onClick={() => props.onReply && props.onReply(props.post)}
+                  >
+                    <i class="fa-solid fa-reply"></i>
+                  </button>
+                </div>
 
-              <div class="tooltip" data-tip="Repost">
+                <div class="tooltip" data-tip="Repost">
-                <button type="button" class="btn btn-ghost btn-block"
+                  <button
-                        onClick={() => props.onRepost && props.onRepost(props.post)}>
+                    type="button"
-                  <i class="fa-solid fa-retweet"></i>
+                    class="btn btn-ghost btn-block"
-                </button>
+                    onClick={() => props.onRepost && props.onRepost(props.post)}
-              </div>
+                  >
+                    <i class="fa-solid fa-retweet"></i>
+                  </button>
+                </div>
+              </section>
 
               <div class="dropdown dropdown-end">
                 <div tabIndex="0" role="button" class="btn btn-ghost w-12">
                   <i class="fa-solid fa-ellipsis-vertical"></i>
                 </div>
                 <ul tabIndex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
+                  <li class="md:hidden">
+                    <a onClick={() => props.onReply && props.onReply(props.post)}>Reply</a>
+                  </li>
+                  <li class="md:hidden">
+                    <a onClick={() => props.onRepost && props.onRepost(props.post)}>Repost</a>
+                  </li>
                   <Show when={userinfo?.profiles?.id === props.post.author_id}>
-                    <li><a onClick={() => props.onDelete && props.onDelete(props.post)}>Delete</a></li>
+                    <li>
+                      <a onClick={() => props.onDelete && props.onDelete(props.post)}>Delete</a>
+                    </li>
                   </Show>
                   <Show when={userinfo?.profiles?.id === props.post.author_id}>
-                    <li><a onClick={() => props.onEdit && props.onEdit(props.post)}>Edit</a></li>
+                    <li>
+                      <a onClick={() => props.onEdit && props.onEdit(props.post)}>Edit</a>
+                    </li>
                   </Show>
-                  <li><a>Report</a></li>
+                  <li>
+                    <a>Report</a>
+                  </li>
                 </ul>
               </div>
             </div>