chore: downstream Elk's new commits

.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

@@ -117,7 +117,7 @@ We've added some `UnoCSS` utilities styles to help you with that:
 
 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.nimbus.town/docs/guide/contributing#translation-status): more instructions on the table caption.
+You can check the current [translation status](https://docs.nimbus.town/guide/contributing#translation-status): more instructions on the table caption.
 
 If you are updating a translation in your local environment, you can run the following commands to check the status:
 

Dockerfile

@@ -6,7 +6,10 @@ WORKDIR /nimbus
 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,13 +1,18 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-defineProps<{
+const { account } = 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' ? (account?.avatarStatic ?? account.avatar) : account.avatar
+})
 </script>
 
 <template>
@@ -16,10 +21,10 @@ const error = ref(false)
     width="400"
     height="400"
     select-none
-    :src="(error || !loaded) ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : account.avatar"
+    :src="(error || !loaded) ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : accountAvatarSrc"
     :alt="$t('account.avatar_description', [account.username])"
     loading="lazy"
-    class="account-avatar"
+    class="account-avatar object-cover"
     :class="(loaded ? 'bg-base' : 'bg-gray:10') + (square ? ' ' : ' rounded-full')"
     :style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }"
     v-bind="$attrs"

components/account/AccountDisplayName.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const { account, hideEmojis = false } = defineProps<{
+const { hideEmojis = false } = defineProps<{
   account: mastodon.v1.Account
   hideEmojis?: boolean
 }>()

components/account/AccountFollowButton.vue

@@ -2,7 +2,7 @@
 import type { mastodon } from 'masto'
 import { toggleFollowAccount, useRelationship } from '~~/composables/masto/relationship'
 
-const { account, command, context, ...props } = defineProps<{
+const { account, context, command, ...props } = defineProps<{
   account: mastodon.v1.Account
   relationship?: mastodon.v1.Relationship
   context?: 'followedBy' | 'following'

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/AccountInfo.vue

@@ -5,7 +5,7 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const { account, as = 'div' } = defineProps<{
+const { as = 'div' } = defineProps<{
   account: mastodon.v1.Account
   as?: string
   hoverCard?: boolean

components/account/AccountPaginator.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const { paginator, account, context } = defineProps<{
+const { account, context } = defineProps<{
   paginator: mastodon.Paginator<mastodon.v1.Account[], mastodon.DefaultPaginationParams | undefined>
   context?: 'following' | 'followers'
   account?: mastodon.v1.Account

components/account/TagHoverWrapper.vue

@@ -5,7 +5,7 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const { tagName, disabled } = defineProps<{
+const { tagName } = defineProps<{
   tagName?: string
   disabled?: boolean
 }>()

components/aria/AriaLog.vue

@@ -1,17 +1,16 @@
 <script setup lang="ts">
 import type { AriaLive } from '~/composables/aria'
 
-// tsc complaining when using $defineProps
-withDefaults(defineProps<{
-  title: string
+const {
+  ariaLive = 'polite',
+  heading = 'h2',
+  messageKey = (message: any) => message,
+} = defineProps<{
   ariaLive?: AriaLive
-  messageKey?: (message: any) => any
   heading?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-}>(), {
-  heading: 'h2',
-  messageKey: (message: any) => message,
-  ariaLive: 'polite',
-})
+  title: string
+  messageKey?: (message: any) => any
+}>()
 
 const { announceLogs, appendLogs, clearLogs, logs } = useAriaLog()
 

components/aria/AriaStatus.vue

@@ -1,12 +1,9 @@
 <script setup lang="ts">
 import type { AriaLive } from '~/composables/aria'
 
-// tsc complaining when using $defineProps
-withDefaults(defineProps<{
+const { ariaLive = 'polite' } = defineProps<{
   ariaLive?: AriaLive
-}>(), {
-  ariaLive: 'polite',
-})
+}>()
 
 const { announceStatus, clearStatus, status } = useAriaStatus()
 

components/command/CommandItem.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
 import type { ResolvedCommand } from '~/composables/command'
 
-const {
-  cmd,
-  index,
-  active = false,
-} = defineProps<{
+const { active = false } = defineProps<{
   cmd: ResolvedCommand
   index: number
   active?: boolean

components/command/CommandKey.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-const props = defineProps<{
+const { name } = defineProps<{
   name: string
 }>()
 
 const isMac = useIsMac()
 
-const keys = computed(() => props.name.toLowerCase().split('+'))
+const keys = computed(() => name.toLowerCase().split('+'))
 </script>
 
 <template>

components/common/CommonBlurhash.vue

@@ -3,7 +3,7 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const { blurhash = '', src, srcset, shouldLoadImage = true } = defineProps<{
+const { blurhash = '', shouldLoadImage = true } = defineProps<{
   blurhash?: string
   src: string
   srcset?: string

components/common/CommonCropImage.vue

@@ -3,34 +3,27 @@ import type { Boundaries } from 'vue-advanced-cropper'
 import { Cropper } from 'vue-advanced-cropper'
 import 'vue-advanced-cropper/dist/style.css'
 
-export interface Props {
+const { stencilAspectRatio = 1 / 1, stencilSizePercentage = 0.9 } = defineProps<{
   /** Crop frame aspect ratio (width/height), default 1/1 */
   stencilAspectRatio?: number
   /** The ratio of the longest edge of the cut box to the length of the cut screen, default 0.9, not more than 1 */
   stencilSizePercentage?: number
-}
-const props = withDefaults(defineProps<Props>(), {
-  stencilAspectRatio: 1 / 1,
-  stencilSizePercentage: 0.9,
-})
+}>()
 
 const file = defineModel<File | null>()
 
 const cropperDialog = ref(false)
-
 const cropper = ref<InstanceType<typeof Cropper>>()
-
 const cropperFlag = ref(false)
-
 const cropperImage = reactive({
   src: '',
   type: 'image/jpg',
 })
 
 function stencilSize({ boundaries }: { boundaries: Boundaries }) {
   return {
-    width: boundaries.width * props.stencilSizePercentage,
-    height: boundaries.height * props.stencilSizePercentage,
+    width: boundaries.width * stencilSizePercentage,
+    height: boundaries.height * stencilSizePercentage,
   }
 }
 
@@ -82,7 +75,7 @@ function cropImage() {
           }"
           :stencil-size="stencilSize"
           :stencil-props="{
-            aspectRatio: props.stencilAspectRatio,
+            aspectRatio: stencilAspectRatio,
             movable: false,
             resizable: false,
             handlers: {},

components/common/CommonInputImage.vue

@@ -2,21 +2,21 @@
 import type { FileWithHandle } from 'browser-fs-access'
 import { fileOpen } from 'browser-fs-access'
 
-const props = withDefaults(defineProps<{
+const {
+  original,
+  allowedFileTypes = ['image/jpeg', 'image/png'],
+  allowedFileSize = 1024 * 1024 * 5, // 5 MB
+} = defineProps<{
   /** The image src before change */
   original?: string
   /** Allowed file types */
   allowedFileTypes?: string[]
   /** Allowed file size */
   allowedFileSize?: number
-
   imgClass?: string
-
   loading?: boolean
-}>(), {
-  allowedFileTypes: () => ['image/jpeg', 'image/png'],
-  allowedFileSize: 1024 * 1024 * 5, // 5 MB
-})
+}>()
+
 const emit = defineEmits<{
   (event: 'pick', value: FileWithHandle): void
   (event: 'error', code: number, message: string): void
@@ -26,7 +26,7 @@ const file = defineModel<FileWithHandle | null>()
 
 const { t } = useI18n()
 
-const defaultImage = computed(() => props.original || '')
+const defaultImage = computed(() => original || '')
 /** Preview of selected images */
 const previewImage = ref('')
 /** The current images on display */
@@ -37,14 +37,14 @@ async function pickImage() {
     return
   const image = await fileOpen({
     description: 'Image',
-    mimeTypes: props.allowedFileTypes,
+    mimeTypes: allowedFileTypes,
   })
 
-  if (!props.allowedFileTypes.includes(image.type)) {
+  if (!allowedFileTypes.includes(image.type)) {
     emit('error', 1, t('error.unsupported_file_format'))
     return
   }
-  else if (image.size > props.allowedFileSize) {
+  else if (image.size > allowedFileSize) {
     emit('error', 2, t('error.file_size_cannot_exceed_n_mb', [5]))
     return
   }

components/common/CommonMask.vue

@@ -2,7 +2,7 @@
 const {
   zIndex = 100,
   background = 'transparent',
-} = $defineProps<{
+} = defineProps<{
   zIndex?: number
   background?: string
 }>()

components/common/CommonPaginator.vue

@@ -6,10 +6,10 @@ import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
 const {
   paginator,
-  stream,
-  eventType,
   keyProp = 'id',
   virtualScroller = false,
+  stream,
+  eventType,
   preprocess,
   endMessage = true,
 } = defineProps<{

components/common/CommonRouteTabs.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { CommonRouteTabMoreOption, CommonRouteTabOption } from '~/types'
 
-const { options, command, replace, preventScrollTop = false, moreOptions } = defineProps<{
+const { options, command, preventScrollTop = false } = defineProps<{
   options: CommonRouteTabOption[]
   moreOptions?: CommonRouteTabMoreOption
   command?: boolean
@@ -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/LocalizedNumber.vue

@@ -3,16 +3,16 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = defineProps<{
+const { count } = defineProps<{
   count: number
   keypath: string
 }>()
 
 const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()
 
-const useSR = computed(() => forSR(props.count))
-const rawNumber = computed(() => formatNumber(props.count))
-const humanReadableNumber = computed(() => formatHumanReadableNumber(props.count))
+const useSR = computed(() => forSR(count))
+const rawNumber = computed(() => formatNumber(count))
+const humanReadableNumber = computed(() => formatHumanReadableNumber(count))
 </script>
 
 <template>