feat: ✨ Implement replies, quotes and edits

components/notes/actions.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="flex flex-row w-full items-stretch justify-around text-sm *:max-w-28 *:w-full *:text-muted-foreground">
-        <Button variant="ghost">
+        <Button variant="ghost" @click="emit('reply')">
             <Reply class="size-5 text-primary" />
             {{ numberFormat(replyCount) }}
         </Button>
@@ -12,10 +12,10 @@
             <Repeat class="size-5 text-primary" />
             {{ numberFormat(reblogCount) }}
         </Button>
-        <Button variant="ghost">
+        <Button variant="ghost" @click="emit('quote')">
             <Quote class="size-5 text-primary" />
         </Button>
-        <Menu :api-note-string="apiNoteString" :url="url" :remote-url="remoteUrl" :is-remote="isRemote" :author-id="authorId">
+        <Menu :api-note-string="apiNoteString" :url="url" :remote-url="remoteUrl" :is-remote="isRemote" :author-id="authorId" @edit="emit('edit')">
             <Button variant="ghost">
                 <Ellipsis class="size-5 text-primary" />
             </Button>
@@ -39,6 +39,12 @@ defineProps<{
     authorId: string;
 }>();
 
+const emit = defineEmits<{
+    edit: [];
+    reply: [];
+    quote: [];
+}>();
+
 const numberFormat = (number = 0) =>
     number !== 0
         ? new Intl.NumberFormat(undefined, {

components/notes/menu.vue

@@ -11,7 +11,6 @@ import {
 } from "@/components/ui/dropdown-menu";
 import {
     Ban,
-    Check,
     Code,
     Delete,
     ExternalLink,
@@ -22,7 +21,7 @@ import {
 } from "lucide-vue-next";
 import { toast } from "vue-sonner";
 
-defineProps<{
+const { authorId } = defineProps<{
     apiNoteString: string;
     isRemote: boolean;
     url: string;
@@ -30,7 +29,13 @@ defineProps<{
     authorId: string;
 }>();
 
+const emit = defineEmits<{
+    edit: [];
+}>();
+
 const { copy } = useClipboard();
+const loggedIn = !!identity.value;
+const authorIsMe = loggedIn && authorId === identity.value?.account.id;
 
 const copyText = (text: string) => {
     copy(text);
@@ -53,7 +58,7 @@ const blockUser = async (id: string) => {
             <DropdownMenuLabel>Note Actions</DropdownMenuLabel>
             <DropdownMenuSeparator />
             <DropdownMenuGroup>
-                <DropdownMenuItem as="button">
+                <DropdownMenuItem v-if="authorIsMe" as="button" @click="emit('edit')">
                     <Pencil class="mr-2 size-4" />
                     <span>Edit</span>
                     <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
@@ -79,8 +84,8 @@ const blockUser = async (id: string) => {
                     <DropdownMenuShortcut>⌘F</DropdownMenuShortcut>
                 </DropdownMenuItem>
             </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
+            <DropdownMenuSeparator v-if="authorIsMe" />
+            <DropdownMenuGroup v-if="authorIsMe">
                 <DropdownMenuItem as="button">
                     <Delete class="mr-2 size-4" />
                     <span>Delete and redraft</span>
@@ -91,8 +96,8 @@ const blockUser = async (id: string) => {
                     <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>
                 </DropdownMenuItem>
             </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
+            <DropdownMenuSeparator v-if="loggedIn && !authorIsMe" />
+            <DropdownMenuGroup v-if="loggedIn && !authorIsMe">
                 <DropdownMenuItem as="button" :disabled="true">
                     <MessageSquare class="mr-2 size-4" />
                     <span>Report</span>

components/notes/note.vue

@@ -13,7 +13,7 @@
         </CardContent>
         <CardFooter v-if="!hideActions">
             <Actions :reply-count="noteToUse.replies_count" :like-count="noteToUse.favourites_count" :url="url"
-                :api-note-string="JSON.stringify(note, null, 4)" :reblog-count="noteToUse.reblogs_count" :remote-url="noteToUse.url" :is-remote="isRemote" :author-id="noteToUse.account.id" />
+                :api-note-string="JSON.stringify(note, null, 4)" :reblog-count="noteToUse.reblogs_count" :remote-url="noteToUse.url" :is-remote="isRemote" :author-id="noteToUse.account.id" @edit="useEvent('composer:edit', note)" @reply="useEvent('composer:reply', note)" @quote="useEvent('composer:quote', note)" />
         </CardFooter>
     </Card>
 </template>