Added dropdown for report and removal of post, added removal of post frontend

client-solid/src/Components/Buttons/RemovePostButton.tsx

@@ -0,0 +1,19 @@
+import { JSXElement } from "solid-js";
+
+import { RemovePostIcon } from "../../Util/Icons";
+import { Post } from "../../Util/api";
+
+export default function RemovePostButton({ post }: { post: Post }): JSXElement {
+  return (
+    <>
+      <div class="flex p-1">
+        <button
+          class="rounded-base btn btn-xs hover:border-primary"
+          aria-label="Show sign of engagement"
+        >
+          <RemovePostIcon />
+        </button>
+      </div>
+    </>
+  );
+}

client-solid/src/Components/PostSegment.tsx

@@ -5,6 +5,7 @@ import EngagementButton from "./Buttons/Engegament";
 import ReplyButton from "./Buttons/Replies";
 import ReportButton from "./Buttons/Report";
 import ToPostButton from "./Buttons/ToPost";
+import RemovePostButton from "./Buttons/RemovePostButton";
 
 /**
  * PostSegment is used to display posts in both the main feed and the post view
@@ -21,13 +22,23 @@ export function PostSegment({ post }: { post: Post }): JSXElement {
     <div class="card compact w-full flex-grow border-b-2 border-b-primary bg-base-200 text-base-content transition-all hover:bg-base-300">
       <div class="card-body md:mx-6">
         <div class="flex flex-row justify-between">
-        <p class="text-xs">{dateOfCreation}</p>
-        <ReportButton />
+          <p class="text-xs">{dateOfCreation}</p>
+          <details class="dropdown">
+            <summary class="btn m-1">...</summary>
+            <ul class="menu dropdown-content z-[1] w-26 rounded-box bg-base-100 p-2 shadow">
+              <li>
+                <ReportButton />
+              </li>
+              <li>
+                <RemovePostButton post={post}/>
+              </li>
+            </ul>
+          </details>
         </div>
         <Show when={isEdited}>
           <p>This post has been edited</p>
         </Show>
-        <p class="text-base my-5">{post.content}</p>
+        <p class="my-5 text-base">{post.content}</p>
         <div class="card-actions justify-between">
           <div class="flex">
             <EngagementButton post={post} />