Merge branch 'main' into docs/update-deployment-guide

.github/renovate.json5

@@ -3,6 +3,11 @@
   "extends": ["config:base", "schedule:weekly", "group:allNonMajor"],
   "labels": ["c: dependencies"],
   "rangeStrategy": "bump",
+  "node": false,
+  "ignoreDeps": [
+    "vue",
+    "vue-tsc"
+  ],
   "packageRules": [
     {
       "groupName": "devDependencies",

.github/workflows/ci.yml

@@ -30,7 +30,7 @@ jobs:
         run: pnpm nuxi prepare
 
       - name: 🧪 Test project
-        run: pnpm test
+        run: pnpm test tests/unit
 
       - name: 📝 Lint
         run: pnpm lint

.github/workflows/docker.yml

@@ -35,7 +35,7 @@ jobs:
           username: ${{ github.repository_owner }}
           password: ${{ secrets.GITHUB_TOKEN }}
       - name: Build and push
-        uses: docker/build-push-action@v3
+        uses: docker/build-push-action@v4
         with:
           context: .
           platforms: linux/amd64

.github/workflows/semantic-pull-request.yml

@@ -19,6 +19,6 @@ jobs:
     name: Semantic Pull Request
     steps:
       - name: Validate PR title
-        uses: amannn/action-semantic-pull-request@v5.0.2
+        uses: amannn/action-semantic-pull-request@v5.2.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

CONTRIBUTING.md

@@ -103,7 +103,7 @@ If you are updating a translation in your local environment, you can run the fol
 ### Adding a new language
 
 1. Add a new file in [locales](./locales) folder with the language code as the filename.
-2. Copy [en-US](./locales/en-US.json) and translate the strings.
+2. Copy [en](./locales/en.json) and translate the strings.
 3. Add the language to the `locales` array in [config/i18n.ts](./config/i18n.ts#L61), below `en` and `ar`:
    - If your language has multiple country variants, add the generic one for language only (only if there are a lot of common entries, you can always add it as a new one)
       - Add all country variants in [country variants object](./config/i18n.ts#L12)

README.md

@@ -61,7 +61,6 @@ These are known deployments using Elk as an alternative Web client for Mastodon
 - [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.freelancers.online](https://elk.freelancers.online) - Use Elk for the `freelancers.online` 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
 

components/account/AccountFollowButton.vue

@@ -98,23 +98,23 @@ const buttonStyle = $computed(() => {
     @click="relationship?.blocking ? unblock() : relationship?.muting ? unmute() : toggleFollow()"
   >
     <template v-if="relationship?.blocking">
-      <span group-hover="hidden">{{ $t('account.blocking') }}</span>
-      <span hidden group-hover="inline">{{ $t('account.unblock') }}</span>
+      <span elk-group-hover="hidden">{{ $t('account.blocking') }}</span>
+      <span hidden elk-group-hover="inline">{{ $t('account.unblock') }}</span>
     </template>
     <template v-if="relationship?.muting">
-      <span group-hover="hidden">{{ $t('account.muting') }}</span>
-      <span hidden group-hover="inline">{{ $t('account.unmute') }}</span>
+      <span elk-group-hover="hidden">{{ $t('account.muting') }}</span>
+      <span hidden elk-group-hover="inline">{{ $t('account.unmute') }}</span>
     </template>
     <template v-else-if="relationship ? relationship.following : context === 'following'">
-      <span group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
-      <span hidden group-hover="inline">{{ $t('account.unfollow') }}</span>
+      <span elk-group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
+      <span hidden elk-group-hover="inline">{{ $t('account.unfollow') }}</span>
     </template>
     <template v-else-if="relationship?.requested">
       <span>{{ $t('account.follow_requested') }}</span>
     </template>
     <template v-else-if="relationship ? relationship.followedBy : context === 'followedBy'">
-      <span group-hover="hidden">{{ $t('account.follows_you') }}</span>
-      <span hidden group-hover="inline">{{ $t('account.follow_back') }}</span>
+      <span elk-group-hover="hidden">{{ $t('account.follows_you') }}</span>
+      <span hidden elk-group-hover="inline">{{ $t('account.follow_back') }}</span>
     </template>
     <template v-else>
       <span>{{ account.locked ? $t('account.request_follow') : $t('account.follow') }}</span>

components/account/AccountHeader.vue

@@ -20,6 +20,7 @@ const relationship = $(useRelationship(account))
 
 const namedFields = ref<mastodon.v1.AccountField[]>([])
 const iconFields = ref<mastodon.v1.AccountField[]>([])
+const isEditingPersonalNote = ref<boolean>(false)
 const hasHeader = $computed(() => !account.header.endsWith('/original/missing.png'))
 
 function getFieldIconTitle(fieldName: string) {
@@ -80,8 +81,26 @@ watchEffect(() => {
   iconFields.value = icons
 })
 
+const personalNoteDraft = ref(relationship?.note ?? '')
+
+async function editNote(event: Event) {
+  if (!event.target || !('value' in event.target) || !relationship)
+    return
+
+  const newNote = event.target?.value as string
+
+  if (relationship.note?.trim() === newNote.trim())
+    return
+
+  const newNoteApiResult = await client.v1.accounts.createNote(account.id, { comment: newNote })
+  relationship.note = newNoteApiResult.note
+  personalNoteDraft.value = relationship.note ?? ''
+}
+
 const isSelf = $(useSelfAccount(() => account))
 const isNotifiedOnPost = $computed(() => !!relationship?.notifying)
+
+const personalNoteMaxLength = 2000
 </script>
 
 <template>
@@ -107,7 +126,11 @@ const isNotifiedOnPost = $computed(() => !!relationship?.notifying)
             </NuxtLink>
             <AccountFollowButton :account="account" :command="command" />
             <span inset-ie-0 flex gap-2 items-center>
-              <AccountMoreButton :account="account" :command="command" />
+              <AccountMoreButton
+                :account="account" :command="command"
+                @add-note="isEditingPersonalNote = true"
+                @remove-note="() => { isEditingPersonalNote = false; personalNoteDraft = '' }"
+              />
               <CommonTooltip v-if="!isSelf && relationship?.following" :content="getNotificationIconTitle()">
                 <button
                   :aria-pressed="isNotifiedOnPost"
@@ -142,17 +165,56 @@ const isNotifiedOnPost = $computed(() => !!relationship?.notifying)
             <AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
             <AccountBotIndicator v-if="account.bot" show-label />
           </div>
-          <AccountHandle :account="account" />
+          <AccountHandle :account="account" overflow-unset line-clamp-unset />
         </div>
       </div>
+      <label
+        v-if="isEditingPersonalNote || (relationship?.note && relationship.note.length > 0)"
+        space-y-2
+        pb-4
+        block
+        border="b base"
+      >
+        <div flex flex-row space-x-2 flex-v-center>
+          <div i-ri-edit-2-line />
+          <p font-medium>
+            {{ $t('account.profile_personal_note') }}
+          </p>
+          <p text-secondary text-sm :class="{ 'text-orange': personalNoteDraft.length > (personalNoteMaxLength - 100) }">
+            {{ personalNoteDraft.length }} / {{ personalNoteMaxLength }}
+          </p>
+        </div>
+        <div position-relative>
+          <div
+            input-base
+            min-h-10ex
+            whitespace-pre-wrap
+            opacity-0
+            :class="{ 'trailing-newline': personalNoteDraft.endsWith('\n') }"
+          >
+            {{ personalNoteDraft }}
+          </div>
+          <textarea
+            v-model="personalNoteDraft"
+            input-base
+            position-absolute
+            style="height: 100%"
+            top-0
+            resize-none
+            :maxlength="personalNoteMaxLength"
+            @change="editNote"
+          />
+        </div>
+      </label>
       <div v-if="account.note" max-h-100 overflow-y-auto>
         <ContentRich text-4 text-base :content="account.note" :emojis="account.emojis" />
       </div>
       <div v-if="namedFields.length" flex="~ col wrap gap1">
         <div v-for="field in namedFields" :key="field.name" flex="~ gap-1" items-center>
-          <div text-secondary uppercase text-xs font-bold>
-            {{ field.name }} |
+          <div mt="0.5" text-secondary uppercase text-xs font-bold>
+            <ContentRich :content="field.name" :emojis="account.emojis" />
           </div>
+          <span text-secondary text-xs font-bold>|</span>
           <ContentRich :content="field.value" :emojis="account.emojis" />
         </div>
       </div>
@@ -168,3 +230,9 @@ const isNotifiedOnPost = $computed(() => !!relationship?.notifying)
     </div>
   </div>
 </template>
+
+<style>
+.trailing-newline::after {
+  content: '\a';
+}
+</style>

components/account/AccountHoverCard.vue

@@ -19,6 +19,6 @@ const relationship = $(useRelationship(account))
     <div v-if="account.note" max-h-100 overflow-y-auto>
       <ContentRich text-4 text-secondary :content="account.note" :emojis="account.emojis" />
     </div>
-    <AccountPostsFollowers text-sm :account="account" />
+    <AccountPostsFollowers text-sm :account="account" :is-hover-card="true" />
   </div>
 </template>

components/account/AccountHoverWrapper.vue

@@ -7,7 +7,7 @@ const props = defineProps<{
   disabled?: boolean
 }>()
 
-const account = props.account || (props.handle ? useAccountByHandle(props.handle!) : undefined)
+const account = computed(() => props.account || (props.handle ? useAccountByHandle(props.handle!) : undefined))
 const userSettings = useUserSettings()
 
 defineOptions({

components/account/AccountInlineInfo.vue

@@ -10,11 +10,18 @@ const { link = true, avatar = true } = defineProps<{
 const userSettings = useUserSettings()
 </script>
 
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
 <template>
   <AccountHoverWrapper :account="account">
     <NuxtLink
       :to="link ? getAccountRoute(account) : undefined"
-      :class="link ? 'text-link-rounded -ml-1.8rem pl-1.8rem rtl-(ml0 pl-0.5rem -mr-1.8rem pr-1.8rem)' : ''"
+      :class="link ? 'text-link-rounded -ml-1.5rem pl-1.5rem rtl-(ml0 pl-0.5rem -mr-1.5rem pr-1.5rem)' : ''"
+      v-bind="$attrs"
       min-w-0 flex gap-2 items-center
     >
       <AccountAvatar v-if="avatar" :account="account" w-5 h-5 />

components/account/AccountMoreButton.vue

@@ -5,14 +5,20 @@ const { account } = defineProps<{
   account: mastodon.v1.Account
   command?: boolean
 }>()
+const emit = defineEmits<{
+  (evt: 'addNote'): void
+  (evt: 'removeNote'): void
+}>()
+
 let relationship = $(useRelationship(account))
 
 const isSelf = $(useSelfAccount(() => account))
 
 const { t } = useI18n()
 const { client } = $(useMasto())
+const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
 
-const toggleMute = async () => {
+async function toggleMute() {
   if (!relationship!.muting && await openConfirmDialog({
     title: t('confirm.mute_account.title', [account.acct]),
     confirm: t('confirm.mute_account.confirm'),
@@ -28,7 +34,7 @@ const toggleMute = async () => {
     : await client.v1.accounts.unmute(account.id)
 }
 
-const toggleBlockUser = async () => {
+async function toggleBlockUser() {
   if (!relationship!.blocking && await openConfirmDialog({
     title: t('confirm.block_account.title', [account.acct]),
     confirm: t('confirm.block_account.confirm'),
@@ -40,7 +46,7 @@ const toggleBlockUser = async () => {
   relationship = await client.v1.accounts[relationship!.blocking ? 'block' : 'unblock'](account.id)
 }
 
-const toggleBlockDomain = async () => {
+async function toggleBlockDomain() {
   if (!relationship!.domainBlocking && await openConfirmDialog({
     title: t('confirm.block_domain.title', [getServerName(account)]),
     confirm: t('confirm.block_domain.confirm'),
@@ -52,7 +58,7 @@ const toggleBlockDomain = async () => {
   await client.v1.domainBlocks[relationship!.domainBlocking ? 'block' : 'unblock'](getServerName(account))
 }
 
-const toggleReblogs = async () => {
+async function toggleReblogs() {
   if (!relationship!.showingReblogs && await openConfirmDialog({
     title: t('confirm.show_reblogs.title', [account.acct]),
     confirm: t('confirm.show_reblogs.confirm'),
@@ -63,12 +69,25 @@ const toggleReblogs = async () => {
   const showingReblogs = !relationship?.showingReblogs
   relationship = await client.v1.accounts.follow(account.id, { reblogs: showingReblogs })
 }
+
+async function addUserNote() {
+  emit('addNote')
+}
+
+async function removeUserNote() {
+  if (!relationship!.note || relationship!.note.length === 0)
+    return
+
+  const newNote = await client.v1.accounts.createNote(account.id, { comment: '' })
+  relationship!.note = newNote.note
+  emit('removeNote')
+}
 </script>
 
 <template>
   <CommonDropdown :eager-mount="command">
     <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group aria-label="More actions">
-      <div rounded-5 p2 group-hover="bg-purple/10">
+      <div rounded-5 p2 elk-group-hover="bg-purple/10">
         <div i-ri:more-2-fill />
       </div>
     </button>
@@ -112,6 +131,21 @@ const toggleReblogs = async () => {
             @click="toggleReblogs()"
           />
 
+          <CommonDropdownItem
+            v-if="!relationship?.note || relationship?.note?.length === 0"
+            :text="$t('menu.add_personal_note', [`@${account.acct}`])"
+            icon="i-ri-edit-2-line"
+            :command="command"
+            @click="addUserNote()"
+          />
+          <CommonDropdownItem
+            v-else
+            :text="$t('menu.remove_personal_note', [`@${account.acct}`])"
+            icon="i-ri-edit-2-line"
+            :command="command"
+            @click="removeUserNote()"
+          />
+
           <CommonDropdownItem
             v-if="!relationship?.muting"
             :text="$t('menu.mute_account', [`@${account.acct}`])"
@@ -165,7 +199,7 @@ const toggleReblogs = async () => {
             <CommonDropdownItem :text="$t('account.pinned')" icon="i-ri:pushpin-line" :command="command" />
           </NuxtLink>
           <NuxtLink to="/favourites">
-            <CommonDropdownItem :text="$t('account.favourites')" icon="i-ri:heart-3-line" :command="command" />
+            <CommonDropdownItem :text="$t('account.favourites')" :icon="useStarFavoriteIcon ? 'i-ri:star-line' : 'i-ri:heart-3-line'" :command="command" />
           </NuxtLink>
           <NuxtLink to="/mutes">
             <CommonDropdownItem :text="$t('account.muted_users')" icon="i-ri:volume-mute-line" :command="command" />

components/account/AccountPostsFollowers.vue

@@ -3,6 +3,7 @@ import type { mastodon } from 'masto'
 
 defineProps<{
   account: mastodon.v1.Account
+  isHoverCard?: boolean
 }>()
 
 const userSettings = useUserSettings()
@@ -26,32 +27,37 @@ const userSettings = useUserSettings()
       </template>
     </NuxtLink>
     <NuxtLink
+      v-if="!(isHoverCard && getPreferences(userSettings, 'hideFollowerCount'))"
       :to="getAccountFollowingRoute(account)"
       replace
       text-secondary exact-active-class="text-primary"
     >
       <template #default="{ isExactActive }">
         <CommonLocalizedNumber
+          v-if="!getPreferences(userSettings, 'hideFollowerCount')"
           keypath="account.following_count"
           :count="account.followingCount"
           font-bold
           :class="isExactActive ? 'text-primary' : 'text-base'"
         />
+        <span v-else>{{ $t('account.following') }}</span>
       </template>
     </NuxtLink>
     <NuxtLink
-      v-if="!getPreferences(userSettings, 'hideFollowerCount')"
+      v-if="!(isHoverCard && getPreferences(userSettings, 'hideFollowerCount'))"
       :to="getAccountFollowersRoute(account)"
       replace text-secondary
       exact-active-class="text-primary"
     >
       <template #default="{ isExactActive }">
         <CommonLocalizedNumber
+          v-if="!getPreferences(userSettings, 'hideFollowerCount')"
           keypath="account.followers_count"
           :count="account.followersCount"
           font-bold
           :class="isExactActive ? 'text-primary' : 'text-base'"
         />
+        <span v-else>{{ $t('account.followers') }}</span>
       </template>
     </NuxtLink>
   </div>