add post context menu button

src/components/post/PostContextMenu.tsx

@@ -1,7 +1,6 @@
 "use client";
 import { type PropsWithChildren, useEffect, useState } from "react";
 import { Card } from "../ui/card";
-import { useUser } from "../user/UserContext";
 import type { Post } from "./Post";
 import { PostMenu } from "./PostMenu";
 
@@ -11,7 +10,6 @@ export const ContextMenu = (props: PropsWithChildren & { post: Post }) => {
     x: 0,
     y: 0,
   });
-  const { user } = useUser();
 
   const handleClick = () => setClicked(false);
   useEffect(() => {
@@ -36,7 +34,7 @@ export const ContextMenu = (props: PropsWithChildren & { post: Post }) => {
       {clicked && (
         <div className="z-[40] absolute" style={{ top: `${points.y}px`, left: `${points.x}px` }}>
           <Card className="flex flex-col w-max gap-1 p-1 hover:bg-card border">
-            <PostMenu post={props.post} profileId={user.id} />
+            <PostMenu post={props.post} />
           </Card>
         </div>
       )}

src/components/post/PostInfo.tsx

@@ -1,6 +1,9 @@
 import Link from "next/link";
 import { TimeElapsedSince } from "../TimeLabel";
+import { Button } from "../ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../ui/dropdown-menu";
 import type { Post } from "./Post";
+import { PostMenu } from "./PostMenu";
 
 export const PostInfo = ({ post }: { post: Post }) => {
   const author = post.author;
@@ -42,6 +45,16 @@ export const PostInfo = ({ post }: { post: Post }) => {
       )}
       <span>{"·"}</span>
       <TimeElapsedSince date={post.createdAt} />
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="sm" className="text-xs font-light leading-4 text-base-content sm:text-sm h-6">
+            {"···"}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="flex flex-col w-max gap-1 p-1 hover:bg-card border">
+          <PostMenu post={post} />
+        </DropdownMenuContent>
+      </DropdownMenu>
     </div>
   );
 };

src/components/post/PostMenu.tsx

@@ -5,10 +5,12 @@ import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import { Button } from "../ui/button";
 import type { Post } from "./Post";
+import { useUser } from "../user/UserContext";
 
-export const PostMenu = ({ post, profileId }: { post: Post; profileId: string }) => {
+export const PostMenu = ({ post}: { post: Post}) => {
   const router = useRouter();
   const author = post.author;
+  const { user } = useUser();
 
   const origin = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
   const postLink = `${origin}/p/${post.id}`;
@@ -59,7 +61,7 @@ export const PostMenu = ({ post, profileId }: { post: Post; profileId: string })
         <Share2Icon size={12} className="mr-2 h-4 w-4" />
         share
       </Button>
-      {profileId === author.id && (
+      {user.id === author.id && (
         <>
           <Button size="context" variant="ghost" onClick={setEditingQuery} disabled>
             <EditIcon size={12} className="mr-2 h-4 w-4" />

src/components/post/PostView.tsx

@@ -30,7 +30,7 @@ export const PostView = ({
   return (
     <div className={"flex flex-col gap-2 w-full"}>
       <ContextMenu post={item}>
-        <Card onClick={() => setCollapsed(false)}>
+        <Card onClick={() => setCollapsed(false)} className="hover:bg-card">
           <CardContent className={`flex flex-row p-2 ${settings.isComment ? "sm:p-2 sm:pb-4 gap-2" : "sm:p-4 gap-4 "}`}>
             <span className="min-h-full flex flex-col justify-start items-center relative">
               <div className={`shrink-0 grow-0 rounded-full" ${settings.isComment ? "w-6 h-6" : "w-10 h-10"}`}>