feat: more actions in status card

components/common/CommonDropdown.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-const { modelValue } = defineModel<{
-  modelValue: boolean
-}>()
-
-const el = ref<HTMLDivElement>()
-
-onClickOutside(el, () => {
-  if (modelValue)
-    modelValue.value = false
-})
-</script>
-
-<template>
-  <div
-    v-show="modelValue"
-    ref="el"
-    absolute
-    bg-base
-    rounded
-    shadow-xl
-    dark="border border-base"
-  >
-    <slot />
-  </div>
-</template>

components/common/CommonTooltip.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-
+defineProps<{
+  content?: string
+}>()
 </script>
 
 <template>
@@ -9,7 +11,9 @@
     <slot />
     <template #popper>
       <div text-3>
-        <slot name="popper" />
+        <slot name="popper">
+          {{ content }}
+        </slot>
       </div>
     </template>
   </VTooltip>

components/common/dropdown/Dropdown.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { dropdownContextKey } from './ctx'
+
+const dropdown = $ref<any>()
+
+provide(dropdownContextKey, {
+  hide: () => dropdown.hide(),
+})
+</script>
+
+<template>
+  <VDropdown v-bind="$attrs" ref="dropdown">
+    <slot />
+    <template #popper="scope">
+      <slot name="popper" v-bind="scope" />
+    </template>
+  </VDropdown>
+</template>

components/common/dropdown/DropdownItem.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { dropdownContextKey } from './ctx'
+
+defineProps<{
+  icon?: string
+}>()
+const emit = defineEmits(['click'])
+
+const { hide } = inject(dropdownContextKey)!
+
+const handleClick = (evt: MouseEvent) => {
+  hide()
+  emit('click', evt)
+}
+</script>
+
+<template>
+  <div flex gap-2 items-center cursor-pointer px4 py3 font-700 hover="bg-active" @click="handleClick">
+    <div v-if="icon" :class="icon" />
+    <span text-15px><slot /></span>
+  </div>
+</template>

components/common/dropdown/ctx.ts

@@ -0,0 +1,5 @@
+import type { InjectionKey } from 'vue'
+
+export const dropdownContextKey: InjectionKey<{
+  hide: () => void
+}> = Symbol('dropdownContextKey')

components/status/StatusActionButton.vue

@@ -3,8 +3,7 @@ defineProps<{
   text?: string | number
   color: string
   icon: string
-  activeIcon: string
+  activeIcon?: string
-  tooltip: string
   hover: string
   groupHover: string
   active?: boolean
@@ -17,21 +16,15 @@ defineOptions({
 </script>
 
 <template>
-  <CommonTooltip placement="bottom">
+  <button
-    <button
+    flex gap-1 items-center rounded :hover="`op100 ${hover}`" group
-      flex gap-1 items-center rounded :hover="`op100 ${hover}`" group
+    :class="active ? [color, 'op100'] : 'op50'"
-      :class="active ? [color, 'op100'] : 'op50'"
+    v-bind="$attrs"
-      v-bind="$attrs"
+  >
-    >
+    <div rounded-full p2 :group-hover="groupHover">
-      <div rounded-full p2 :group-hover="groupHover">
+      <div :class="[active && activeIcon ? activeIcon : icon, { 'pointer-events-none': disabled }]" />
-        <div :class="[active && activeIcon ? activeIcon : icon, { 'pointer-events-none': disabled }]" />
+    </div>
-      </div>
 
-      <span v-if="text">{{ text }}</span>
+    <span v-if="text">{{ text }}</span>
-    </button>
+  </button>
-
-    <template #popper>
-      {{ tooltip }}
-    </template>
-  </CommonTooltip>
 </template>

components/status/StatusActions.vue

@@ -5,6 +5,12 @@ const { status } = defineProps<{
   status: Status
 }>()
 
+const isAuthor = $computed(() => status.account.id === currentUser.value?.account?.id)
+
+const clipboard = useClipboard()
+const router = useRouter()
+const route = useRoute()
+
 // Use different states to let the user press different actions right after the other
 const isLoading = $ref({ reblogged: false, favourited: false, bookmarked: false })
 async function toggleStatusAction(action: 'reblogged' | 'favourited' | 'bookmarked', newStatus: Promise<Status>) {
@@ -33,57 +39,105 @@ const toggleBookmark = () => toggleStatusAction(
   'bookmarked',
   masto.statuses[status.bookmarked ? 'unbookmark' : 'bookmark'](status.id),
 )
+const copyLink = async () => {
+  await clipboard.copy(location.href)
+}
+const openInOriginal = () => {
+  window.open(status.url!, '_blank')
+}
+const deleteStatus = async () => {
+  // TODO confirm to delete
+
+  await masto.statuses.remove(status.id)
+  if (route.name === '@user-post')
+    router.back()
+
+  // TODO when timeline, remove this item
+}
 </script>
 
 <template>
   <div flex justify-between gap-8>
-    <RouterLink :to="getStatusPath(status)">
+    <CommonTooltip placement="bottom" content="Replay">
+      <RouterLink :to="getStatusPath(status)">
+        <StatusActionButton
+          :text="status.repliesCount"
+          color="text-blue" hover="text-blue" group-hover="bg-blue/10"
+          icon="i-ri:chat-3-line"
+        />
+      </RouterLink>
+    </CommonTooltip>
+
+    <CommonTooltip placement="bottom" content="Boost">
       <StatusActionButton
-        :text="status.repliesCount"
+        :text="status.reblogsCount"
-        color="text-blue" hover="text-blue" group-hover="bg-blue/10"
+        color="text-green" hover="text-green" group-hover="bg-green/10"
-        icon="i-ri:chat-3-line"
+        icon="i-ri:repeat-line"
-        tooltip="Replay"
+        active-icon="i-ri:repeat-fill"
+        :active="status.reblogged"
+        :disabled="isLoading.reblogged"
+        @click="toggleReblog()"
       />
-    </RouterLink>
+    </CommonTooltip>
 
-    <StatusActionButton
+    <CommonTooltip placement="bottom" content="Favourite">
-      :text="status.reblogsCount"
+      <StatusActionButton
-      color="text-green" hover="text-green" group-hover="bg-green/10"
+        :text="status.favouritesCount"
-      icon="i-ri:repeat-line"
+        color="text-rose" hover="text-rose" group-hover="bg-rose/10"
-      active-icon="i-ri:repeat-fill"
+        icon="i-ri:heart-3-line"
-      :active="status.reblogged"
+        active-icon="i-ri:heart-3-fill"
-      :disabled="isLoading.reblogged"
+        :active="status.favourited"
-      tooltip="Boost"
+        :disabled="isLoading.favourited"
-      @click="toggleReblog()"
-    />
 
-    <StatusActionButton
+        @click="toggleFavourite()"
-      :text="status.favouritesCount"
+      />
-      color="text-rose" hover="text-rose" group-hover="bg-rose/10"
+    </CommonTooltip>
-      icon="i-ri:heart-3-line"
-      active-icon="i-ri:heart-3-fill"
-      :active="status.favourited"
-      :disabled="isLoading.favourited"
-      tooltip="Favourite"
-      @click="toggleFavourite()"
-    />
 
-    <StatusActionButton
+    <CommonTooltip placement="bottom" content="Bookmark">
-      color="text-yellow" hover="text-yellow" group-hover="bg-yellow/10"
+      <StatusActionButton
-      icon="i-ri:bookmark-line"
+        color="text-yellow" hover="text-yellow" group-hover="bg-yellow/10"
-      active-icon="i-ri:bookmark-fill"
+        icon="i-ri:bookmark-line"
-      :active="status.bookmarked"
+        active-icon="i-ri:bookmark-fill"
-      :disabled="isLoading.bookmarked"
+        :active="status.bookmarked"
-      tooltip="Bookmark"
+        :disabled="isLoading.bookmarked"
-      @click="toggleBookmark()"
+        @click="toggleBookmark()"
-    />
+      />
+    </CommonTooltip>
 
-    <!-- <VDropdown>
+    <CommonDropdown placement="bottom">
-      <button flex gap-1 items-center rounded op50 hover="op100 text-purple" group>
+      <CommonTooltip placement="bottom" content="More">
-        <div rounded-full p2 group-hover="bg-purple/10">
+        <button flex gap-1 items-center rounded op50 hover="op100 text-purple" group>
-          <div i-ri:share-circle-line />
+          <div rounded-full p2 group-hover="bg-purple/10">
+            <div i-ri:more-line />
+          </div>
+        </button>
+      </CommonTooltip>
+
+      <template #popper>
+        <div flex="~ col">
+          <CommonDropdownItem icon="i-ri:link" @click="copyLink">
+            Copy link to this post
+          </CommonDropdownItem>
+
+          <CommonDropdownItem v-if="status.url" icon="i-ri:arrow-right-up-line" @click="openInOriginal">
+            Open in original site
+          </CommonDropdownItem>
+
+          <!-- TODO -->
+          <template v-if="isAuthor">
+            <CommonDropdownItem v-if="isAuthor" icon="i-ri:edit-line">
+              Edit
+            </CommonDropdownItem>
+
+            <CommonDropdownItem
+              v-if="isAuthor" icon="i-ri:delete-bin-line" text-red-600
+              @click="deleteStatus"
+            >
+              Delete
+            </CommonDropdownItem>
+          </template>
         </div>
-      </button>
+      </template>
-    </VDropdown> -->
+    </CommonDropdown>
   </div>
 </template>