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

feat: update from upstream

.github/workflows/ci.yml

@@ -18,11 +18,11 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-      - run: corepack enable
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: pnpm
+      # workaround for npm registry key change
+      # ref. `[email protected]` / `[email protected]` cannot be installed due to key id mismatch · Issue #612 · nodejs/corepack
+      # - https://github.com/nodejs/corepack/issues/612#issuecomment-2629496091
+      - run: npm i -g corepack@latest && corepack enable
+      - uses: actions/[email protected]
 
       - name: 📦 Install dependencies
         run: pnpm install --frozen-lockfile

CONTRIBUTING.md

@@ -90,7 +90,7 @@ We've added some `UnoCSS` utilities styles to help you with that:
 
 ## Internationalization
 
-We are using [vue-i18n](https://vue-i18n.intlify.dev/) via [nuxt-i18n](https://v8.i18n.nuxtjs.org/) to handle internationalization.
+We are using [vue-i18n](https://vue-i18n.intlify.dev/) via [nuxt-i18n](https://i18n.nuxtjs.org/) to handle internationalization.
 
 You can check the current [translation status](https://docs.elk.zone/docs/guide/contributing#translation-status): more instructions on the table caption.
 

Dockerfile

@@ -6,7 +6,10 @@ WORKDIR /elk
 FROM base AS builder
 
 # Prepare pnpm https://pnpm.io/installation#using-corepack
-RUN corepack enable
+# workaround for npm registry key change
+# ref. `[email protected]` / `[email protected]` cannot be installed due to key id mismatch · Issue #612 · nodejs/corepack
+# - https://github.com/nodejs/corepack/issues/612#issuecomment-2629496091
+RUN npm i -g corepack@latest && corepack enable
 
 # Prepare deps
 RUN apk update

components/account/AccountAvatar.vue

@@ -1,27 +1,32 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-defineProps<{
+const props = defineProps<{
   account: mastodon.v1.Account
   square?: boolean
 }>()
 
 const loaded = ref(false)
 const error = ref(false)
+
+const preferredMotion = usePreferredReducedMotion()
+const accountAvatarSrc = computed(() => {
+  return preferredMotion.value === 'reduce' ? (props.account?.avatarStatic ?? props.account.avatar) : props.account.avatar
+})
 </script>
 
 <template>
   <img
-    :key="account.avatar"
+    :key="props.account.avatar"
     width="400"
     height="400"
     select-none
-    :src="(error || !loaded) ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : account.avatar"
-    :alt="$t('account.avatar_description', [account.username])"
+    :src="(error || !loaded) ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : accountAvatarSrc"
+    :alt="$t('account.avatar_description', [props.account.username])"
     loading="lazy"
     class="account-avatar"
-    :class="(loaded ? 'bg-base' : 'bg-gray:10') + (square ? ' ' : ' rounded-full')"
-    :style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }"
+    :class="(loaded ? 'bg-base' : 'bg-gray:10') + (props.square ? ' ' : ' rounded-full')"
+    :style="{ 'clip-path': props.square ? `url(#avatar-mask)` : 'none' }"
     v-bind="$attrs"
     @load="loaded = true"
     @error="error = true"

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" :hover-card="true" />
+        <AccountInfo :account="account" :hover-card="false" />
       </NuxtLink>
       <AccountFollowButton text-sm :account="account" :relationship="relationship" />
     </div>

components/account/AccountMoreButton.vue

@@ -71,6 +71,7 @@ async function removeUserNote() {
         />
       </NuxtLink>
       <CommonDropdownItem
+        is="button"
         v-if="isShareSupported"
         :text="$t('menu.share_account', [`@${account.acct}`])"
         icon="i-ri:share-line"
@@ -81,26 +82,30 @@ async function removeUserNote() {
       <template v-if="currentUser">
         <template v-if="!isSelf">
           <CommonDropdownItem
+            is="button"
             :text="$t('menu.mention_account', [`@${account.acct}`])"
             icon="i-ri:at-line"
             :command="command"
             @click="mentionUser(account)"
           />
           <CommonDropdownItem
+            is="button"
             :text="$t('menu.direct_message_account', [`@${account.acct}`])"
             icon="i-ri:message-3-line"
             :command="command"
             @click="directMessageUser(account)"
           />
 
           <CommonDropdownItem
+            is="button"
             v-if="!relationship?.showingReblogs"
             icon="i-ri:repeat-line"
             :text="$t('menu.show_reblogs', [`@${account.acct}`])"
             :command="command"
             @click="toggleReblogs()"
           />
           <CommonDropdownItem
+            is="button"
             v-else
             :text="$t('menu.hide_reblogs', [`@${account.acct}`])"
             icon="i-ri:repeat-line"
@@ -109,13 +114,15 @@ async function removeUserNote() {
           />
 
           <CommonDropdownItem
+            is="button"
             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
+            is="button"
             v-else
             :text="$t('menu.remove_personal_note', [`@${account.acct}`])"
             icon="i-ri-edit-2-line"
@@ -124,13 +131,15 @@ async function removeUserNote() {
           />
 
           <CommonDropdownItem
+            is="button"
             v-if="!relationship?.muting"
             :text="$t('menu.mute_account', [`@${account.acct}`])"
             icon="i-ri:volume-mute-line"
             :command="command"
             @click="toggleMuteAccount (relationship!, account)"
           />
           <CommonDropdownItem
+            is="button"
             v-else
             :text="$t('menu.unmute_account', [`@${account.acct}`])"
             icon="i-ri:volume-up-fill"
@@ -139,13 +148,15 @@ async function removeUserNote() {
           />
 
           <CommonDropdownItem
+            is="button"
             v-if="!relationship?.blocking"
             :text="$t('menu.block_account', [`@${account.acct}`])"
             icon="i-ri:forbid-2-line"
             :command="command"
             @click="toggleBlockAccount (relationship!, account)"
           />
           <CommonDropdownItem
+            is="button"
             v-else
             :text="$t('menu.unblock_account', [`@${account.acct}`])"
             icon="i-ri:checkbox-circle-line"
@@ -155,13 +166,15 @@ async function removeUserNote() {
 
           <template v-if="getServerName(account) !== currentServer">
             <CommonDropdownItem
+              is="button"
               v-if="!relationship?.domainBlocking"
               :text="$t('menu.block_domain', [getServerName(account)])"
               icon="i-ri:shut-down-line"
               :command="command"
               @click="toggleBlockDomain(relationship!, account)"
             />
             <CommonDropdownItem
+              is="button"
               v-else
               :text="$t('menu.unblock_domain', [getServerName(account)])"
               icon="i-ri:restart-line"
@@ -171,6 +184,7 @@ async function removeUserNote() {
           </template>
 
           <CommonDropdownItem
+            is="button"
             :text="$t('menu.report_account', [`@${account.acct}`])"
             icon="i-ri:flag-2-line"
             :command="command"

components/command/CommandPanel.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { SearchResult as SearchResultType } from '~/composables/masto/search'
 import type { CommandScope, QueryResult, QueryResultItem } from '~/composables/command'
+import type { SearchResult as SearchResultType } from '~/composables/masto/search'
 
 const emit = defineEmits<{
   (event: 'close'): void

components/common/CommonInputImage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { fileOpen } from 'browser-fs-access'
 import type { FileWithHandle } from 'browser-fs-access'
+import { fileOpen } from 'browser-fs-access'
 
 const props = withDefaults(defineProps<{
   /** The image src before change */

components/common/CommonPaginator.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts" generic="T, O, U = T">
+import type { mastodon } from 'masto'
 // @ts-expect-error missing types
 import { DynamicScroller } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
-import type { mastodon } from 'masto'
 
 const {
   paginator,

components/common/CommonRouteTabs.vue

@@ -14,11 +14,11 @@ const router = useRouter()
 
 useCommands(() => command
   ? options.map(tab => ({
-    scope: 'Tabs',
-    name: tab.display,
-    icon: tab.icon ?? 'i-ri:file-list-2-line',
-    onActivate: () => router.replace(tab.to),
-  }))
+      scope: 'Tabs',
+      name: tab.display,
+      icon: tab.icon ?? 'i-ri:file-list-2-line',
+      onActivate: () => router.replace(tab.to),
+    }))
   : [])
 </script>
 

components/common/CommonTabs.vue

@@ -25,13 +25,13 @@ function toValidName(option: string) {
 
 useCommands(() => command
   ? tabs.value.map(tab => ({
-    scope: 'Tabs',
+      scope: 'Tabs',
 
-    name: tab.display,
-    icon: tab.icon ?? 'i-ri:file-list-2-line',
+      name: tab.display,
+      icon: tab.icon ?? 'i-ri:file-list-2-line',
 
-    onActivate: () => modelValue.value = tab.name,
-  }))
+      onActivate: () => modelValue.value = tab.name,
+    }))
   : [])
 </script>
 

components/common/dropdown/DropdownItem.vue

@@ -1,16 +1,24 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<{
+const {
+  is = 'div',
+  text,
+  description,
+  icon,
+  checked,
+  command,
+} = defineProps<{
   is?: string
   text?: string
   description?: string
   icon?: string
   checked?: boolean
   command?: boolean
-}>(), {
-  is: 'div',
-})
+}>()
+
 const emit = defineEmits(['click'])
 
+const type = computed(() => is === 'button' ? 'button' : null)
+
 const { hide } = useDropdownContext() || {}
 
 const el = ref<HTMLDivElement>()
@@ -24,11 +32,11 @@ useCommand({
   scope: 'Actions',
 
   order: -1,
-  visible: () => props.command && props.text,
+  visible: () => command && text,
 
-  name: () => props.text!,
-  icon: () => props.icon ?? 'i-ri:question-line',
-  description: () => props.description,
+  name: () => text!,
+  icon: () => icon ?? 'i-ri:question-line',
+  description: () => description,
 
   onActivate() {
     const clickEvent = new MouseEvent('click', {
@@ -46,6 +54,7 @@ useCommand({
     v-bind="$attrs"
     :is="is"
     ref="el"
+    :type="type"
     w-full
     flex gap-3 items-center cursor-pointer px4 py3
     select-none

components/modal/DurationPicker.vue

@@ -14,8 +14,8 @@ watchEffect(() => {
 
   const duration
       = days.value * 24 * 60 * 60
-      + hours.value * 60 * 60
-      + minutes.value * 60
+        + hours.value * 60 * 60
+        + minutes.value * 60
 
   if (duration <= 0) {
     isValid.value = false

components/modal/ModalMediaPreviewCarousel.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { Vector2 } from '@vueuse/gesture'
+import type { mastodon } from 'masto'
 import { useGesture } from '@vueuse/gesture'
 import { useReducedMotion } from '@vueuse/motion'
-import type { mastodon } from 'masto'
 
 const { media = [] } = defineProps<{
   media?: mastodon.v1.MediaAttachment[]

components/nav/NavBottom.vue

@@ -2,9 +2,23 @@
 import type { Component } from 'vue'
 import type { NavButtonName } from '../../composables/settings'
 
-import { STORAGE_KEY_BOTTOM_NAV_BUTTONS } from '~/constants'
+import {
+  NavButtonBookmark,
+  NavButtonCompose,
+  NavButtonExplore,
+  NavButtonFavorite,
+  NavButtonFederated,
+  NavButtonHashtag,
+  NavButtonHome,
+  NavButtonList,
+  NavButtonLocal,
+  NavButtonMention,
+  NavButtonMoreMenu,
+  NavButtonNotification,
+  NavButtonSearch,
+} from '#components'
 
-import { NavButtonExplore, NavButtonFederated, NavButtonHome, NavButtonLocal, NavButtonMention, NavButtonMoreMenu, NavButtonNotification, NavButtonSearch } from '#components'
+import { STORAGE_KEY_BOTTOM_NAV_BUTTONS } from '~/constants'
 
 interface NavButton {
   name: string
@@ -16,9 +30,14 @@ const navButtons: NavButton[] = [
   { name: 'search', component: NavButtonSearch },
   { name: 'notification', component: NavButtonNotification },
   { name: 'mention', component: NavButtonMention },
+  { name: 'favorite', component: NavButtonFavorite },
+  { name: 'bookmark', component: NavButtonBookmark },
+  { name: 'compose', component: NavButtonCompose },
   { name: 'explore', component: NavButtonExplore },
   { name: 'local', component: NavButtonLocal },
   { name: 'federated', component: NavButtonFederated },
+  { name: 'list', component: NavButtonList },
+  { name: 'hashtag', component: NavButtonHashtag },
   { name: 'moreMenu', component: NavButtonMoreMenu },
 ]
 

components/nav/NavLogo.vue

@@ -1,3 +1,6 @@
+<script setup lang="ts">
+</script>
+
 <template>
   <img src="@/public/pwa-192x192.png" alt="logo" class="h-10">
 </template>

components/nav/button/Bookmark.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  activeClass: string
+}>()
+</script>
+
+<template>
+  <NuxtLink to="/bookmarks" :aria-label="$t('nav.bookmarks')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
+    <div i-ri:bookmark-line />
+  </NuxtLink>
+</template>