Merge branch 'elk-zone:main' into main

.github/renovate.json5

@@ -3,10 +3,13 @@
   "extends": ["config:base", "schedule:weekly", "group:allNonMajor"],
   "labels": ["c: dependencies"],
   "rangeStrategy": "bump",
-  "node": false,
   "ignoreDeps": [
     "vue",
-    "vue-tsc"
+    "vue-tsc",
+    "typescript",
+
+    // Intl.Segmenter is not supported in Firefox
+    "string-length"
   ],
   "packageRules": [
     {
@@ -61,6 +64,10 @@
     {
       "groupName": "typescript",
       "matchPackageNames": ["typescript"]
+    },
+    {
+      "matchDatasources": ["node-version"],
+      "enabled": false
     }
   ],
   "vulnerabilityAlerts": {

.npmrc

@@ -1,4 +1,3 @@
 shamefully-hoist=true
-strict-peer-dependencies=false
 shell-emulator=true
 ignore-workspace-root-check=true

Dockerfile

@@ -14,6 +14,7 @@ RUN apk add git --no-cache
 
 # Prepare build deps ( ignore postinstall scripts for now )
 COPY package.json ./
+COPY .npmrc ./
 COPY pnpm-lock.yaml ./
 COPY patches ./patches
 RUN pnpm i --frozen-lockfile --ignore-scripts

README.md

@@ -57,12 +57,16 @@ Note: The provided Dockerfile creates a container which will eventually run Elk
 These are known deployments using Elk as an alternative Web client for Mastodon servers or as a base for other projects in the fediverse:
 
 - [elk.fedified.com](https://elk.fedified.com) - Use Elk to log into any compatible instance
+- [elk.me.uk](https://elk.me.uk) - Use Elk to log into any compatible instance, hosted on Google Cloud Run with no Cloudflare proxy
 - [elk.h4.io](https://elk.h4.io) - Use Elk for the `h4.io` Server
 - [elk.universeodon.com](https://elk.universeodon.com) - Use Elk for the Universeodon Server
 - [elk.vmst.io](https://elk.vmst.io) - Use Elk for the `vmst.io` Server
 - [elk.hostux.social](https://elk.hostux.social) - Use Elk for the `hostux.social` Server
 - [elk.cupoftea.social](https://elk.cupoftea.social) - Use Elk for the `cupoftea.social` Server
 - [elk.aus.social](https://elk.aus.social) - Use Elk for the `aus.social` Server
+- [elk.mstdn.ca](https://elk.mstdn.ca) - Use Elk for the `mstdn.ca` Server
+- [elk.mastodonapp.uk](https://elk.mastodonapp.uk) - Use Elk for the `mastodonapp.uk` Server
+- [elk.bolha.us](https://elk.bolha.us) - Use Elk for the `bolha.us` Server
 
 > **Note**: Community deployments are **NOT** maintained by the Elk team. It may not be synced with Elk's source code. Please do your own research about the host servers before using them.
 

components/account/AccountBigCard.vue

@@ -1,16 +1,16 @@
 <script lang="ts" setup>
 import type { mastodon } from 'masto'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const { account, as = 'div' } = $defineProps<{
   account: mastodon.v1.Account
   as?: string
 }>()
 
 cacheAccount(account)
-
-defineOptions({
-  inheritAttrs: false,
-})
 </script>
 
 <template>

components/account/AccountFollowButton.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
+import { toggleFollowAccount, useRelationship } from '~~/composables/masto/relationship'
 
 const { account, command, context, ...props } = defineProps<{
   account: mastodon.v1.Account
@@ -14,26 +15,6 @@ const enable = $computed(() => !isSelf && currentUser.value)
 const relationship = $computed(() => props.relationship || useRelationship(account).value)
 
 const { client } = $(useMasto())
-async function toggleFollow() {
-  if (relationship!.following) {
-    if (await openConfirmDialog({
-      title: t('confirm.unfollow.title'),
-      confirm: t('confirm.unfollow.confirm'),
-      cancel: t('confirm.unfollow.cancel'),
-    }) !== 'confirm')
-      return
-  }
-  relationship!.following = !relationship!.following
-  try {
-    const newRel = await client.v1.accounts[relationship!.following ? 'follow' : 'unfollow'](account.id)
-    Object.assign(relationship!, newRel)
-  }
-  catch (err) {
-    console.error(err)
-    // TODO error handling
-    relationship!.following = !relationship!.following
-  }
-}
 
 async function unblock() {
   relationship!.blocking = false
@@ -67,7 +48,7 @@ useCommand({
   visible: () => command && enable,
   name: () => `${relationship?.following ? t('account.unfollow') : t('account.follow')} ${getShortHandle(account)}`,
   icon: 'i-ri:star-line',
-  onActivate: () => toggleFollow(),
+  onActivate: () => toggleFollowAccount(relationship!, account),
 })
 
 const buttonStyle = $computed(() => {
@@ -90,12 +71,11 @@ const buttonStyle = $computed(() => {
   <button
     v-if="enable"
     gap-1 items-center group
-    :disabled="relationship?.requested"
     border-1
     rounded-full flex="~ gap2 center" font-500 min-w-30 h-fit px3 py1
     :class="buttonStyle"
     :hover="!relationship?.blocking && !relationship?.muting && relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'"
-    @click="relationship?.blocking ? unblock() : relationship?.muting ? unmute() : toggleFollow()"
+    @click="relationship?.blocking ? unblock() : relationship?.muting ? unmute() : toggleFollowAccount(relationship!, account)"
   >
     <template v-if="relationship?.blocking">
       <span elk-group-hover="hidden">{{ $t('account.blocking') }}</span>
@@ -110,11 +90,12 @@ const buttonStyle = $computed(() => {
       <span hidden elk-group-hover="inline">{{ $t('account.unfollow') }}</span>
     </template>
     <template v-else-if="relationship?.requested">
-      <span>{{ $t('account.follow_requested') }}</span>
+      <span elk-group-hover="hidden">{{ $t('account.follow_requested') }}</span>
+      <span hidden elk-group-hover="inline">Withdraw follow request</span>
     </template>
     <template v-else-if="relationship ? relationship.followedBy : context === 'followedBy'">
       <span elk-group-hover="hidden">{{ $t('account.follows_you') }}</span>
-      <span hidden elk-group-hover="inline">{{ $t('account.follow_back') }}</span>
+      <span hidden elk-group-hover="inline">{{ account.locked ? $t('account.request_follow') : $t('account.follow_back') }}</span>
     </template>
     <template v-else>
       <span>{{ account.locked ? $t('account.request_follow') : $t('account.follow') }}</span>

components/account/AccountHeader.vue

@@ -165,8 +165,9 @@ const personalNoteMaxLength = 2000
           </div>
         </div>
         <div flex="~ col gap1" pt2>
-          <div flex justify-between>
+          <div flex gap2 items-center>
             <AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
+            <AccountLockIndicator v-if="account.locked" show-label />
             <AccountBotIndicator v-if="account.bot" show-label />
           </div>
           <AccountHandle :account="account" overflow-unset line-clamp-unset />

components/account/AccountHoverWrapper.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = defineProps<{
   account?: mastodon.v1.Account
   handle?: string
@@ -9,10 +13,6 @@ const props = defineProps<{
 
 const account = computed(() => props.account || (props.handle ? useAccountByHandle(props.handle!) : undefined))
 const userSettings = useUserSettings()
-
-defineOptions({
-  inheritAttrs: false,
-})
 </script>
 
 <template>

components/account/AccountInfo.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const { account, as = 'div' } = defineProps<{
   account: mastodon.v1.Account
   as?: string
   hoverCard?: boolean
   square?: boolean
 }>()
-
-defineOptions({
-  inheritAttrs: false,
-})
 </script>
 
 <!-- TODO: Make this work for both buttons and links -->
@@ -23,6 +23,7 @@ defineOptions({
     <div flex="~ col" shrink pt-1 h-full overflow-hidden justify-center leading-none select-none>
       <div flex="~" gap-2>
         <AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg />
+        <AccountLockIndicator v-if="account.bot" text-xs />
         <AccountBotIndicator v-if="account.bot" text-xs />
       </div>
       <AccountHandle :account="account" text-secondary-light />

components/account/AccountLockIndicator.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{
+  showLabel?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    flex="~ gap1" items-center
+    :class="{ 'border border-base rounded-md px-1': showLabel }"
+    text-secondary-light
+  >
+    <slot name="prepend" />
+    <CommonTooltip no-auto-focus content="Lock" :disabled="showLabel">
+      <div i-ri:lock-line />
+    </CommonTooltip>
+    <div v-if="showLabel">
+      Lock
+    </div>
+  </div>
+</template>

components/account/AccountMoreButton.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
+import { toggleBlockAccount, toggleBlockDomain, toggleMuteAccount } from '~~/composables/masto/relationship'
 
 const { account } = defineProps<{
   account: mastodon.v1.Account
@@ -17,45 +18,10 @@ const isSelf = $(useSelfAccount(() => account))
 const { t } = useI18n()
 const { client } = $(useMasto())
 const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
+const { share, isSupported: isShareSupported } = useShare()
 
-async function toggleMute() {
-  if (!relationship!.muting && await openConfirmDialog({
-    title: t('confirm.mute_account.title', [account.acct]),
-    confirm: t('confirm.mute_account.confirm'),
-    cancel: t('confirm.mute_account.cancel'),
-  }) !== 'confirm')
-    return
-
-  relationship!.muting = !relationship!.muting
-  relationship = relationship!.muting
-    ? await client.v1.accounts.mute(account.id, {
-      // TODO support more options
-    })
-    : await client.v1.accounts.unmute(account.id)
-}
-
-async function toggleBlockUser() {
-  if (!relationship!.blocking && await openConfirmDialog({
-    title: t('confirm.block_account.title', [account.acct]),
-    confirm: t('confirm.block_account.confirm'),
-    cancel: t('confirm.block_account.cancel'),
-  }) !== 'confirm')
-    return
-
-  relationship!.blocking = !relationship!.blocking
-  relationship = await client.v1.accounts[relationship!.blocking ? 'block' : 'unblock'](account.id)
-}
-
-async function toggleBlockDomain() {
-  if (!relationship!.domainBlocking && await openConfirmDialog({
-    title: t('confirm.block_domain.title', [getServerName(account)]),
-    confirm: t('confirm.block_domain.confirm'),
-    cancel: t('confirm.block_domain.cancel'),
-  }) !== 'confirm')
-    return
-
-  relationship!.domainBlocking = !relationship!.domainBlocking
-  await client.v1.domainBlocks[relationship!.domainBlocking ? 'block' : 'unblock'](getServerName(account))
+function shareAccount() {
+  share({ url: location.href })
 }
 
 async function toggleReblogs() {
@@ -100,6 +66,13 @@ async function removeUserNote() {
           :command="command"
         />
       </NuxtLink>
+      <CommonDropdownItem
+        v-if="isShareSupported"
+        :text="`Share @${account.acct}`"
+        icon="i-ri:share-line"
+        :command="command"
+        @click="shareAccount()"
+      />
 
       <template v-if="currentUser">
         <template v-if="!isSelf">
@@ -149,31 +122,31 @@ async function removeUserNote() {
           <CommonDropdownItem
             v-if="!relationship?.muting"
             :text="$t('menu.mute_account', [`@${account.acct}`])"
-            icon="i-ri:volume-up-fill"
+            icon="i-ri:volume-mute-line"
             :command="command"
-            @click="toggleMute()"
+            @click="toggleMuteAccount (relationship!, account)"
           />
           <CommonDropdownItem
             v-else
             :text="$t('menu.unmute_account', [`@${account.acct}`])"
-            icon="i-ri:volume-mute-line"
+            icon="i-ri:volume-up-fill"
             :command="command"
-            @click="toggleMute()"
+            @click="toggleMuteAccount (relationship!, account)"
           />
 
           <CommonDropdownItem
             v-if="!relationship?.blocking"
             :text="$t('menu.block_account', [`@${account.acct}`])"
             icon="i-ri:forbid-2-line"
             :command="command"
-            @click="toggleBlockUser()"
+            @click="toggleBlockAccount (relationship!, account)"
           />
           <CommonDropdownItem
             v-else
             :text="$t('menu.unblock_account', [`@${account.acct}`])"
             icon="i-ri:checkbox-circle-line"
             :command="command"
-            @click="toggleBlockUser()"
+            @click="toggleBlockAccount (relationship!, account)"
           />
 
           <template v-if="getServerName(account) !== currentServer">
@@ -182,16 +155,23 @@ async function removeUserNote() {
               :text="$t('menu.block_domain', [getServerName(account)])"
               icon="i-ri:shut-down-line"
               :command="command"
-              @click="toggleBlockDomain()"
+              @click="toggleBlockDomain(relationship!, account)"
             />
             <CommonDropdownItem
               v-else
               :text="$t('menu.unblock_domain', [getServerName(account)])"
               icon="i-ri:restart-line"
               :command="command"
-              @click="toggleBlockDomain()"
+              @click="toggleBlockDomain(relationship!, account)"
             />
           </template>
+
+          <CommonDropdownItem
+            :text="$t('menu.report_account', [`@${account.acct}`])"
+            icon="i-ri:flag-2-line"
+            :command="command"
+            @click="openReportDialog(account)"
+          />
         </template>
 
         <template v-else>