feat: support more actions for user

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>
 

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>

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>

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

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">

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

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>

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>

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>

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>

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>

pages/tags/[tag].vue

@@ -10,7 +10,7 @@ useHead({
 </script>
 
 <template>
-  <MainContent>
+  <MainContent back>
     <template #title>
       <span text-lg font-bold>#{{ tag }}</span>
     </template>