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} />

client-solid/src/Util/Icons.tsx

@@ -234,3 +234,21 @@ export function ReportIcon(): JSXElement {
     </svg>
   );
 }
+export function RemovePostIcon(): JSXElement {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width={1.5}
+      stroke="currentColor"
+      class="h-6 w-6"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5m6 4.125 2.25 2.25m0 0 2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z"
+      />
+    </svg>
+  );
+}