Merge pull request #20 from maybeanerd/feat/update-from-upstream

feat: update from upstream

.github/renovate.json5

@@ -40,7 +40,6 @@
       "groupName": "lint",
       "matchPackageNames": [
         "@antfu/eslint-config",
-        "@types/prettier",
         "eslint",
         "prettier"
       ]

.github/workflows/docker.yml

@@ -33,7 +33,7 @@ jobs:
           username: ${{ github.actor }}
           password: ${{ github.token }}
       - name: Build and push
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           context: .
           platforms: linux/amd64,linux/arm64

.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.4.0
+        uses: amannn/action-semantic-pull-request@v5.5.3
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.npmrc

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

CONTRIBUTING.md

@@ -18,10 +18,10 @@ To develop and test the Elk package:
 
 1. Fork the Elk repository to your own GitHub account and then clone it to your local device.
 
-2. Ensure using the latest Node.js (16.x).
+2. Ensure using the latest Node.js (20.x).
 If you have [nvm](https://github.com/nvm-sh/nvm), you can run `nvm i` to install the required version.
 
-3. The package manager used to install and link dependencies must be [pnpm](https://pnpm.io/) v7. To use it you must first enable [Corepack](https://github.com/nodejs/corepack) by running `corepack enable`. (Note: on Linux in a standard Node 16+ environment, you should follow the instructions to install via Node's `corepack` rather than using the `curl` command)
+3. The package manager used to install and link dependencies must be [pnpm](https://pnpm.io/) v9. To use it you must first enable [Corepack](https://github.com/nodejs/corepack) by running `corepack enable`. (Note: on Linux in a standard Node 20+ environment, you should follow the instructions to install via Node's `corepack` rather than using the `curl` command)
 
 4. Check out a branch where you can work and commit your changes:
 ```shell
@@ -97,7 +97,7 @@ You can check the current [translation status](https://docs.elk.zone/docs/guide/
 If you are updating a translation in your local environment, you can run the following commands to check the status:
 - from root folder: `nr prepare-translation-status`
 - change to `docs` folder and run docs dev server `nr dev`
-- open `http://localhost:3000/docs/guide/contributing#translation-status` in your browser
+- open `http://localhost:3000/guide/contributing#translation-status` in your browser
 
 ### Adding a new language
 

components/account/AccountBigCard.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import type { mastodon } from 'masto'
 
 defineOptions({

components/account/AccountHeader.vue

@@ -189,7 +189,6 @@ async function copyAccountName() {
         <div flex="~ col gap1" pt2>
           <div flex gap2 items-center flex-wrap>
             <AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
-            <AccountRolesIndicator v-if="account.roles?.length" :account="account" />
             <AccountLockIndicator v-if="account.locked" show-label />
             <AccountBotIndicator v-if="account.bot" show-label />
           </div>
@@ -202,6 +201,9 @@ async function copyAccountName() {
               </button>
             </CommonTooltip>
           </div>
+          <div self-start mt-1>
+            <AccountRolesIndicator v-if="account.roles?.length" :account="account" />
+          </div>
         </div>
       </div>
       <label

components/account/AccountHoverCard.vue

@@ -12,7 +12,7 @@ const relationship = useRelationship(account)
   <div v-show="relationship" flex="~ col gap2" rounded min-w-90 max-w-120 z-100 overflow-hidden p-4>
     <div flex="~ gap2" items-center>
       <NuxtLink :to="getAccountRoute(account)" flex-auto rounded-full hover:bg-active transition-100 pe5 me-a>
-        <AccountInfo :account="account" />
+        <AccountInfo :account="account" :hover-card="true" />
       </NuxtLink>
       <AccountFollowButton text-sm :account="account" :relationship="relationship" />
     </div>

components/account/AccountInfo.vue

@@ -16,18 +16,20 @@ const { account, as = 'div' } = defineProps<{
 <!-- TODO: Make this work for both buttons and links -->
 <!-- This is sometimes (like in the sidebar) used directly as a button, and sometimes, like in follow notifications, as a link. I think this component may need a second refactor that either lets an implementation pass in a link or an action and adapt to what's passed in, or the implementations need to be updated to wrap in the action they want to take and this be just the layout for these items -->
 <template>
-  <component :is="as" flex gap-3 v-bind="$attrs">
+  <component :is="as" flex items-center gap-3 v-bind="$attrs">
     <AccountHoverWrapper :disabled="!hoverCard" :account="account">
       <AccountBigAvatar :account="account" shrink-0 :square="square" />
     </AccountHoverWrapper>
-    <div flex="~ col" shrink pt-1 h-full overflow-hidden justify-center leading-none select-none>
+    <div flex="~ col" shrink h-full overflow-hidden justify-center leading-none select-none p-1>
       <div flex="~" gap-2>
         <AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg />
-        <AccountRolesIndicator v-if="account.roles?.length" :account="account" :limit="1" />
         <AccountLockIndicator v-if="account.locked" text-xs />
         <AccountBotIndicator v-if="account.bot" text-xs />
       </div>
       <AccountHandle :account="account" text-secondary-light />
+      <div self-start mt-1>
+        <AccountRolesIndicator v-if="account.roles?.length" :account="account" :limit="1" />
+      </div>
     </div>
   </component>
 </template>

components/account/AccountMoreButton.vue

@@ -56,7 +56,7 @@ async function removeUserNote() {
 
 <template>
   <CommonDropdown :eager-mount="command">
-    <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group aria-label="More actions">
+    <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group :aria-label="t('actions.more')">
       <div rounded-5 p2 elk-group-hover="bg-purple/10">
         <div i-ri:more-2-fill />
       </div>

components/aria/AriaAnnouncer.vue

@@ -38,12 +38,14 @@ onMounted(() => {
     announce(t('a11y.loading_page'))
   })
   router.afterEach((to, from) => {
-    from && setTimeout(() => {
-      requestAnimationFrame(() => {
-        const title = document.title.trim().split('|')
-        announce(t('a11y.route_loaded', [title[0]]))
-      })
-    }, 512)
+    if (from) {
+      setTimeout(() => {
+        requestAnimationFrame(() => {
+          const title = document.title.trim().split('|')
+          announce(t('a11y.route_loaded', [title[0]]))
+        })
+      }, 512)
+    }
   })
 })
 </script>

components/command/CommandItem.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import type { ResolvedCommand } from '~/composables/command'
 
 const {

components/common/CommonAlert.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 const emit = defineEmits<{
   (event: 'close'): void
 }>()

components/common/CommonCropImage.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import type { Boundaries } from 'vue-advanced-cropper'
 import { Cropper } from 'vue-advanced-cropper'
 import 'vue-advanced-cropper/dist/style.css'

components/common/CommonInputImage.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { fileOpen } from 'browser-fs-access'
 import type { FileWithHandle } from 'browser-fs-access'
 

components/common/CommonPaginator.vue

@@ -3,7 +3,6 @@
 import { DynamicScroller } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import type { mastodon } from 'masto'
-import type { UnwrapRef } from 'vue'
 
 const {
   paginator,
@@ -33,7 +32,7 @@ defineSlots<{
     newer: U // newer is undefined when index === 0
   }) => void
   items: (props: {
-    items: UnwrapRef<U[]>
+    items: U[]
   }) => void
   updater: (props: {
     number: number
@@ -74,7 +73,7 @@ defineExpose({ createEntry, removeEntry, updateEntry })
 <template>
   <div>
     <slot v-if="prevItems.length" name="updater" v-bind="{ number: prevItems.length, update }" />
-    <slot name="items" :items="items">
+    <slot name="items" :items="items as U[]">
       <template v-if="virtualScroller">
         <DynamicScroller
           v-slot="{ item, active, index }"

components/common/CommonTabs.vue

@@ -20,7 +20,7 @@ const tabs = computed(() => {
 })
 
 function toValidName(option: string) {
-  return option.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
+  return option.toLowerCase().replace(/[^a-z0-9]/gi, '-')
 }
 
 useCommands(() => command

components/common/CommonTrending.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import type { mastodon } from 'masto'
 
 const {

components/common/CommonTrendingCharts.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import type { mastodon } from 'masto'
 import sparkline from '@fnando/sparkline'
 

components/help/HelpPreview.vue

@@ -8,7 +8,7 @@ const vAutoFocus = (el: HTMLElement) => el.focus()
 
 <template>
   <div my-8 px-3 sm:px-8 md:max-w-200 flex="~ col gap-4" relative>
-    <button v-auto-focus type="button" btn-action-icon absolute top--8 right-0 m1 aria-label="Close" @click="emit('close')">
+    <button v-auto-focus type="button" btn-action-icon absolute top--8 right-0 m1 :aria-label="$t('action.close')" @click="emit('close')">
       <span i-ri:close-line />
     </button>
 

components/list/Account.vue

@@ -15,9 +15,10 @@ const isRemoved = ref(false)
 
 async function edit() {
   try {
-    isRemoved.value
-      ? await client.v1.lists.$select(list).accounts.create({ accountIds: [account.id] })
-      : await client.v1.lists.$select(list).accounts.remove({ accountIds: [account.id] })
+    if (isRemoved.value)
+      await client.v1.lists.$select(list).accounts.create({ accountIds: [account.id] })
+    else
+      await client.v1.lists.$select(list).accounts.remove({ accountIds: [account.id] })
     isRemoved.value = !isRemoved.value
   }
   catch (err) {

components/list/Lists.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 const { userId } = defineProps<{
   userId: string
 }>()

components/magickeys/MagickeysKeyboardShortcuts.vue

@@ -32,14 +32,14 @@ const shortcutItemGroups = computed<ShortcutItemGroup[]>(() => [
         description: t('magic_keys.groups.navigation.shortcut_help'),
         shortcut: { keys: ['?'], isSequence: false },
       },
-      // {
-      //   description: t('magic_keys.groups.navigation.next_status'),
-      //   shortcut: { keys: ['j'], isSequence: false },
-      // },
-      // {
-      //   description: t('magic_keys.groups.navigation.previous_status'),
-      //   shortcut: { keys: ['k'], isSequence: false },
-      // },
+      {
+        description: t('magic_keys.groups.navigation.next_status'),
+        shortcut: { keys: ['j'], isSequence: false },
+      },
+      {
+        description: t('magic_keys.groups.navigation.previous_status'),
+        shortcut: { keys: ['k'], isSequence: false },
+      },
       {
         description: t('magic_keys.groups.navigation.go_to_search'),
         shortcut: { keys: ['/'], isSequence: false },

components/main/MainContent.vue

@@ -27,7 +27,7 @@ const containerClass = computed(() => {
 <template>
   <div ref="container" :class="containerClass">
     <div
-      sticky top-0 z10
+      sticky top-0 z-20
       pt="[env(safe-area-inset-top,0)]"
       bg="[rgba(var(--rgb-bg-base),0.7)]"
       class="native:lg:w-[calc(100vw-5rem)] native:xl:w-[calc(135%+(100vw-1200px)/2)]"

components/modal/ModalConfirm.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { ConfirmDialogChoice, ConfirmDialogOptions } from '~/types'
-import DurationPicker from '~/components/modal/DurationPicker.vue'
 
 const props = defineProps<ConfirmDialogOptions>()
 

components/modal/ModalContainer.vue

@@ -63,13 +63,14 @@ function handleFavouritedBoostedByClose() {
     </ModalDialog>
     <ModalDialog
       v-model="isPublishDialogOpen"
-      max-w-180 flex
+      max-w-180 flex w-full
       @close="handlePublishClose"
     >
-      <!-- This `w-0` style is used to avoid overflow problems in flex layouts，so don't remove it unless you know what you're doing -->
       <PublishWidgetList
         v-if="dialogDraftKey"
-        :draft-key="dialogDraftKey" expanded flex-1 w-0
+        :draft-key="dialogDraftKey"
+        expanded
+        class="flex-1"
         @published="handlePublished"
       />
     </ModalDialog>

components/modal/ModalDialog.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
 
 export interface Props {

components/modal/ModalMediaPreview.vue

@@ -39,14 +39,14 @@ onUnmounted(() => locked.value = false)
 <template>
   <div relative h-full w-full flex pt-12 @click="onClick">
     <button
-      v-if="hasNext" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.previous')"
+      v-if="hasNext" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.next')"
       hover:bg="black/40" dark:bg="white/30" dark-hover:bg="white/20" absolute top="1/2" right-1 z5
       :title="$t('action.next')" @click="next"
     >
       <div i-ri:arrow-right-s-line text-white />
     </button>
     <button
-      v-if="hasPrev" pointer-events-auto btn-action-icon bg="black/20" aria-label="action.next"
+      v-if="hasPrev" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.prev')"
       hover:bg="black/40" dark:bg="white/30" dark:hover-bg="white/20" absolute top="1/2" left-1 z5
       :title="$t('action.prev')" @click="prev"
     >
@@ -71,7 +71,7 @@ onUnmounted(() => locked.value = false)
 
     <div absolute top-0 w-full flex justify-end>
       <button
-        btn-action-icon bg="black/30" aria-label="action.close" hover:bg="black/40" dark:bg="white/30"
+        btn-action-icon bg="black/30" :aria-label="$t('action.close')" hover:bg="black/40" dark:bg="white/30"
         dark:hover-bg="white/20" pointer-events-auto shrink-0 @click="emit('close')"
       >
         <div i-ri:close-line text-white />

components/nav/NavBottomMoreMenu.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { invoke } from '@vueuse/core'
 
 const modelValue = defineModel<boolean>({ required: true })

components/nav/NavUser.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const { busy, oauth, singleInstanceServer } = useSignIn()
 </script>
 

components/nav/button/MoreMenu.vue

@@ -10,7 +10,7 @@ defineModel<boolean>()
     <button
       flex items-center place-content-center h-full flex-1 class="select-none"
       :class="show ? '!text-primary' : ''"
-      aria-label="More menu"
+      :aria-label="$t('nav.more_menu')"
       @click="toggleVisible"
     >
       <span :class="show ? 'i-ri:close-fill' : 'i-ri:more-fill'" />

components/notification/NotificationGroupedLikes.vue

@@ -27,16 +27,16 @@ const likes = computed(() => group.likes.filter(i => i.favourite && !i.reblog))
             {{ $t('notification.reblogged_post') }}
           </div>
         </div>
-        <div v-if="likes.length" flex="~ gap-1">
+        <div v-if="likes.length" flex="~ gap-1 wrap">
           <div :class="useStarFavoriteIcon ? 'i-ri:star-line color-yellow' : 'i-ri:heart-line color-red'" text-xl me-2 />
           <template v-for="i, idx of likes" :key="idx">
-            <AccountHoverWrapper :account="i.account">
+            <AccountHoverWrapper :account="i.account" relative me--4 border="2 bg-base" rounded-full hover:z-1 focus-within:z-1>
               <NuxtLink :to="getAccountRoute(i.account)">
                 <AccountAvatar text-primary font-bold :account="i.account" class="h-1.5em w-1.5em" />
               </NuxtLink>
             </AccountHoverWrapper>
           </template>
-          <div ms1>
+          <div ms-4>
             {{ $t('notification.favourited_post') }}
           </div>
         </div>

components/notification/NotificationSubscribePushNotificationError.vue

@@ -17,7 +17,7 @@ const modelValue = defineModel<boolean>({ required: true })
     text-red-600 dark:text-red-400
     border="~ base rounded red-600 dark:red-400"
   >
-    <head id="notification-failed" flex justify-between>
+    <header id="notification-failed" flex justify-between>
       <div flex items-center gap-x-2 font-bold>
         <div aria-hidden="true" i-ri:error-warning-fill />
         <p>{{ title ?? $t('settings.notifications.push_notifications.subscription_error.title') }}</p>
@@ -32,7 +32,7 @@ const modelValue = defineModel<boolean>({ required: true })
           <span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
         </button>
       </CommonTooltip>
-    </head>
+    </header>
     <p>{{ message }}</p>
     <p py-2>
       <i18n-t keypath="settings.notifications.push_notifications.subscription_error.error_hint">