From 84478984dc508bca2d747bed7df0787e87686133 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Sat, 26 Nov 2022 20:58:10 +0800
Subject: [PATCH] feat: support more actions for user

---
 components/account/AccountFollowButton.vue  | 10 ++-
 components/account/AccountMoreButton.vue    | 78 +++++++++++++++------
 components/common/dropdown/DropdownItem.vue |  2 +
 components/main/MainContent.vue             | 19 +++--
 pages/@[account]/[status].vue               |  2 +-
 pages/@[account]/index.vue                  |  6 +-
 pages/blocks.vue                            | 20 ++++++
 pages/domain_blocks.vue                     | 34 +++++++++
 pages/mutes.vue                             | 20 ++++++
 pages/pinned.vue                            | 22 ++++++
 pages/public/index.vue                      |  6 +-
 pages/tags/[tag].vue                        |  2 +-
 12 files changed, 184 insertions(+), 37 deletions(-)
 create mode 100644 pages/blocks.vue
 create mode 100644 pages/domain_blocks.vue
 create mode 100644 pages/mutes.vue
 create mode 100644 pages/pinned.vue

diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue
index 13b020c2..bc4e496a 100644
--- a/components/account/AccountFollowButton.vue
+++ b/components/account/AccountFollowButton.vue
@@ -6,11 +6,17 @@ const { account } = defineProps<{
 }>()
 
 const isSelf = $computed(() => currentUser.value?.account.id === account.id)
-const relationship = $(useRelationship(account))
+let relationship = $(useRelationship(account))
 
 async function toggleFollow() {
   relationship!.following = !relationship!.following
-  await masto.accounts[relationship!.following ? 'follow' : 'unfollow'](account.id)
+  try {
+    relationship = await masto.accounts[relationship!.following ? 'follow' : 'unfollow'](account.id)
+  }
+  catch {
+    // TODO error handling
+    relationship!.following = !relationship!.following
+  }
 }
 </script>
 
diff --git a/components/account/AccountMoreButton.vue b/components/account/AccountMoreButton.vue
index 5bda60c4..62590c8f 100644
--- a/components/account/AccountMoreButton.vue
+++ b/components/account/AccountMoreButton.vue
@@ -8,34 +8,29 @@ let relationship = $(useRelationship(account))
 
 const isSelf = $computed(() => currentUser.value?.account.id === account.id)
 
-const mute = async () => {
+const toggleMute = async () => {
   // TODO: Add confirmation
 
-  relationship!.muting = true
-  relationship = await masto.accounts.mute(account.id, {
-    // TODO support more options
-  })
+  relationship!.muting = !relationship!.muting
+  relationship = relationship!.muting
+    ? await masto.accounts.mute(account.id, {
+      // TODO support more options
+    })
+    : await masto.accounts.unmute(account.id)
 }
 
-const unmute = async () => {
+const toggleBlockUser = async () => {
   // TODO: Add confirmation
 
-  relationship!.muting = false
-  relationship = await masto.accounts.unmute(account.id)
+  relationship!.blocking = !relationship!.blocking
+  relationship = await masto.accounts[relationship!.blocking ? 'block' : 'unblock'](account.id)
 }
 
-const block = async () => {
+const toggleBlockDomain = async () => {
   // TODO: Add confirmation
 
-  relationship!.blocking = true
-  relationship = await masto.accounts.block(account.id)
-}
-
-const unblock = async () => {
-  // TODO: Add confirmation
-
-  relationship!.blocking = false
-  relationship = await masto.accounts.unblock(account.id)
+  relationship!.domainBlocking = !relationship!.domainBlocking
+  await masto.domainBlocks[relationship!.domainBlocking ? 'block' : 'unblock'](getServerName(account))
 }
 </script>
 
@@ -62,19 +57,58 @@ const unblock = async () => {
           Direct message @{{ account.acct }}
         </CommonDropdownItem>
 
-        <CommonDropdownItem v-if="!relationship?.muting" icon="i-ri:volume-up-fill" @click="mute">
+        <CommonDropdownItem v-if="!relationship?.muting" icon="i-ri:volume-up-fill" @click="toggleMute">
           Mute @{{ account.acct }}
         </CommonDropdownItem>
-        <CommonDropdownItem v-else icon="i-ri:volume-mute-line" @click="unmute">
+        <CommonDropdownItem v-else icon="i-ri:volume-mute-line" @click="toggleMute">
           Unmute @{{ account.acct }}
         </CommonDropdownItem>
 
-        <CommonDropdownItem v-if="!relationship?.blocking" icon="i-ri:forbid-2-line" @click="block">
+        <CommonDropdownItem v-if="!relationship?.blocking" icon="i-ri:forbid-2-line" @click="toggleBlockUser">
           Block @{{ account.acct }}
         </CommonDropdownItem>
-        <CommonDropdownItem v-else icon="i-ri:checkbox-circle-line" @click="unblock">
+        <CommonDropdownItem v-else icon="i-ri:checkbox-circle-line" @click="toggleBlockUser">
           Unblock @{{ account.acct }}
         </CommonDropdownItem>
+
+        <CommonDropdownItem
+          v-if="!relationship?.domainBlocking"
+          icon="i-ri:shut-down-line"
+          @click="toggleBlockDomain"
+        >
+          Block domain {{ getServerName(account) }}
+        </CommonDropdownItem>
+        <CommonDropdownItem v-else icon="i-ri:restart-line" @click="toggleBlockDomain">
+          Unblock domain {{ getServerName(account) }}
+        </CommonDropdownItem>
+      </template>
+
+      <template v-else>
+        <NuxtLink to="/pinned">
+          <CommonDropdownItem icon="i-ri:pushpin-line">
+            Pinned
+          </CommonDropdownItem>
+        </NuxtLink>
+        <NuxtLink to="/favourites">
+          <CommonDropdownItem icon="i-ri:heart-3-line">
+            Favourites
+          </CommonDropdownItem>
+        </NuxtLink>
+        <NuxtLink to="/mutes">
+          <CommonDropdownItem icon="i-ri:volume-mute-line">
+            Muted users
+          </CommonDropdownItem>
+        </NuxtLink>
+        <NuxtLink to="/blocks">
+          <CommonDropdownItem icon="i-ri:forbid-2-line">
+            Blocked users
+          </CommonDropdownItem>
+        </NuxtLink>
+        <NuxtLink to="/domain_blocks">
+          <CommonDropdownItem icon="i-ri:shut-down-line">
+            Blocked domains
+          </CommonDropdownItem>
+        </NuxtLink>
       </template>
     </template>
   </CommonDropdown>
diff --git a/components/common/dropdown/DropdownItem.vue b/components/common/dropdown/DropdownItem.vue
index 7dc93b7e..6fcd81c2 100644
--- a/components/common/dropdown/DropdownItem.vue
+++ b/components/common/dropdown/DropdownItem.vue
@@ -19,6 +19,7 @@ const handleClick = (evt: MouseEvent) => {
 <template>
   <div
     flex gap-3 items-center cursor-pointer px4 py3 hover-bg-active
+    v-bind="$attrs"
     @click="handleClick"
   >
     <div v-if="icon" :class="icon" />
@@ -38,5 +39,6 @@ const handleClick = (evt: MouseEvent) => {
     <div flex-auto />
 
     <div v-if="checked" i-ri:check-line />
+    <slot name="actions" />
   </div>
 </template>
diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index c164f2ee..1b3de65e 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -1,3 +1,9 @@
+<script setup lang="ts">
+defineProps<{
+  back?: boolean
+}>()
+</script>
+
 <template>
   <div relative>
     <div
@@ -7,13 +13,12 @@
       :class="isZenMode ? 'op0 hover:op100 transition duration-300' : ''"
     >
       <div flex justify-between px5 py4>
-        <div flex gap-1>
-          <slot name="title">
-            <NuxtLink flex="~ gap1" items-center btn-text p-0 @click="$router.go(-1)">
-              <div i-ri-arrow-left-line />
-              Back
-            </NuxtLink>
-          </slot>
+        <div flex gap-3>
+          <NuxtLink v-if="back" flex="~ gap1" items-center btn-text p-0 @click="$router.go(-1)">
+            <div i-ri-arrow-left-line />
+          </NuxtLink>
+          <slot name="title" />
+          <div h-7 w-1px />
         </div>
         <div flex items-center>
           <slot name="actions" />
diff --git a/pages/@[account]/[status].vue b/pages/@[account]/[status].vue
index 92726b56..ed3288c3 100644
--- a/pages/@[account]/[status].vue
+++ b/pages/@[account]/[status].vue
@@ -10,7 +10,7 @@ const { data: context } = useAsyncData(`context:${id}`, () => masto.statuses.fet
 </script>
 
 <template>
-  <MainContent>
+  <MainContent back>
     <template v-if="status">
       <template v-if="context">
         <template v-for="comment of context?.ancestors" :key="comment.id">
diff --git a/pages/@[account]/index.vue b/pages/@[account]/index.vue
index 57d5545a..e57415f1 100644
--- a/pages/@[account]/index.vue
+++ b/pages/@[account]/index.vue
@@ -12,7 +12,11 @@ if (account) {
 </script>
 
 <template>
-  <MainContent>
+  <MainContent back>
+    <template #title>
+      <span text-lg font-bold>{{ account ? getDisplayName(account) : 'Profile' }}</span>
+    </template>
+
     <template v-if="account">
       <AccountHeader :account="account" border="b base" />
       <NuxtPage />
diff --git a/pages/blocks.vue b/pages/blocks.vue
new file mode 100644
index 00000000..6700bca4
--- /dev/null
+++ b/pages/blocks.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: 'auth',
+})
+
+const paginator = masto.blocks.getIterator()
+
+useHead({
+  title: 'Blocked users',
+})
+</script>
+
+<template>
+  <MainContent back>
+    <template #title>
+      <span text-lg font-bold>Blocked users</span>
+    </template>
+    <AccountPaginator :paginator="paginator" />
+  </MainContent>
+</template>
diff --git a/pages/domain_blocks.vue b/pages/domain_blocks.vue
new file mode 100644
index 00000000..8f85a2fb
--- /dev/null
+++ b/pages/domain_blocks.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: 'auth',
+})
+
+const paginator = masto.domainBlocks.getIterator()
+
+useHead({
+  title: 'Blocked domains',
+})
+
+const unblock = async (domain: string) => {
+  await masto.domainBlocks.unblock(domain)
+}
+</script>
+
+<template>
+  <MainContent back>
+    <template #title>
+      <span text-lg font-bold>Blocked domains</span>
+    </template>
+
+    <CommonPaginator :paginator="paginator">
+      <template #default="{ item }">
+        <CommonDropdownItem class="!cursor-auto">
+          {{ item }}
+          <template #actions>
+            <div i-ri:lock-unlock-line text-primary cursor-pointer @click="unblock(item)" />
+          </template>
+        </CommonDropdownItem>
+      </template>
+    </CommonPaginator>
+  </MainContent>
+</template>
diff --git a/pages/mutes.vue b/pages/mutes.vue
new file mode 100644
index 00000000..947b3a24
--- /dev/null
+++ b/pages/mutes.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: 'auth',
+})
+
+const paginator = masto.mutes.getIterator()
+
+useHead({
+  title: 'Muted users',
+})
+</script>
+
+<template>
+  <MainContent back>
+    <template #title>
+      <span text-lg font-bold>Muted users</span>
+    </template>
+    <AccountPaginator :paginator="paginator" />
+  </MainContent>
+</template>
diff --git a/pages/pinned.vue b/pages/pinned.vue
new file mode 100644
index 00000000..32858159
--- /dev/null
+++ b/pages/pinned.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: 'auth',
+})
+
+const paginator = masto.accounts.getStatusesIterable(currentUser.value!.account.id, { pinned: true })
+
+useHead({
+  title: 'Pinned',
+})
+</script>
+
+<template>
+  <MainContent>
+    <template #title>
+      <div i-ri:pushpin-line h-6 mr-1 />
+      <span>Pinned</span>
+    </template>
+
+    <TimelinePaginator :paginator="paginator" />
+  </MainContent>
+</template>
diff --git a/pages/public/index.vue b/pages/public/index.vue
index 61e6f2c7..f31307fe 100644
--- a/pages/public/index.vue
+++ b/pages/public/index.vue
@@ -2,16 +2,16 @@
 const paginator = masto.timelines.getPublicIterable()
 
 useHead({
-  title: 'Federated'
+  title: 'Federated',
 })
 </script>
 
 <template>
   <MainContent>
     <template #title>
-  <span text-lg font-bold>Federated Timeline</span>
+      <span text-lg font-bold>Federated Timeline</span>
     </template>
-    
+
     <slot>
       <TimelinePaginator :paginator="paginator" />
     </slot>
diff --git a/pages/tags/[tag].vue b/pages/tags/[tag].vue
index 92d6b1cc..712597c9 100644
--- a/pages/tags/[tag].vue
+++ b/pages/tags/[tag].vue
@@ -10,7 +10,7 @@ useHead({
 </script>
 
 <template>
-  <MainContent>
+  <MainContent back>
     <template #title>
       <span text-lg font-bold>#{{ tag }}</span>
     </template>