.github/workflows/docker.yml

@@ -19,17 +19,17 @@ jobs:
         uses: actions/checkout@v4
       - name: Docker meta
         id: metal
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v5
         with:
           images: |
             ghcr.io/${{ github.repository }}
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2
+        uses: docker/setup-qemu-action@v3
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
       - name: Login to GitHub Container Registry
         if: github.event_name != 'pull_request'
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           registry: ghcr.io
           username: ${{ github.actor }}

app.vue

@@ -5,9 +5,11 @@ provideGlobalCommands()
 const route = useRoute()
 
 if (process.server && !route.path.startsWith('/settings')) {
+  const url = useRequestURL()
+
   useHead({
     meta: [
-      { property: 'og:url', content: `https://elk.zone${route.path}` },
+      { property: 'og:url', content: `${url.origin}${route.path}` },
     ],
   })
 }

components/account/AccountFollowButton.vue

@@ -19,7 +19,7 @@ const { client } = $(useMasto())
 async function unblock() {
   relationship!.blocking = false
   try {
-    const newRel = await client.v1.accounts.unblock(account.id)
+    const newRel = await client.v1.accounts.$select(account.id).unblock()
     Object.assign(relationship!, newRel)
   }
   catch (err) {
@@ -32,7 +32,7 @@ async function unblock() {
 async function unmute() {
   relationship!.muting = false
   try {
-    const newRel = await client.v1.accounts.unmute(account.id)
+    const newRel = await client.v1.accounts.$select(account.id).unmute()
     Object.assign(relationship!, newRel)
   }
   catch (err) {

components/account/AccountFollowRequestButton.vue

@@ -12,7 +12,7 @@ async function authorizeFollowRequest() {
   relationship!.requestedBy = false
   relationship!.followedBy = true
   try {
-    const newRel = await client.v1.followRequests.authorize(account.id)
+    const newRel = await client.v1.followRequests.$select(account.id).authorize()
     Object.assign(relationship!, newRel)
   }
   catch (err) {
@@ -25,7 +25,7 @@ async function authorizeFollowRequest() {
 async function rejectFollowRequest() {
   relationship!.requestedBy = false
   try {
-    const newRel = await client.v1.followRequests.reject(account.id)
+    const newRel = await client.v1.followRequests.$select(account.id).reject()
     Object.assign(relationship!, newRel)
   }
   catch (err) {

components/account/AccountHeader.vue

@@ -53,7 +53,7 @@ function previewAvatar() {
 async function toggleNotifications() {
   relationship!.notifying = !relationship?.notifying
   try {
-    const newRel = await client.v1.accounts.follow(account.id, { notify: relationship?.notifying })
+    const newRel = await client.v1.accounts.$select(account.id).follow({ notify: relationship?.notifying })
     Object.assign(relationship!, newRel)
   }
   catch {
@@ -97,7 +97,7 @@ async function editNote(event: Event) {
   if (relationship.note?.trim() === newNote.trim())
     return
 
-  const newNoteApiResult = await client.v1.accounts.createNote(account.id, { comment: newNote })
+  const newNoteApiResult = await client.v1.accounts.$select(account.id).note.create({ comment: newNote })
   relationship.note = newNoteApiResult.note
   personalNoteDraft.value = relationship.note ?? ''
 }

components/account/AccountLockIndicator.vue

@@ -2,6 +2,8 @@
 defineProps<{
   showLabel?: boolean
 }>()
+
+const { t } = useI18n()
 </script>
 
 <template>
@@ -15,7 +17,7 @@ defineProps<{
       <div i-ri:lock-line />
     </CommonTooltip>
     <div v-if="showLabel">
-      Lock
+      {{ t('account.lock') }}
     </div>
   </div>
 </template>

components/account/AccountMoreButton.vue

@@ -26,14 +26,15 @@ function shareAccount() {
 
 async function toggleReblogs() {
   if (!relationship!.showingReblogs && await openConfirmDialog({
-    title: t('confirm.show_reblogs.title', [account.acct]),
+    title: t('confirm.show_reblogs.title'),
+    description: t('confirm.show_reblogs.description', [account.acct]),
     confirm: t('confirm.show_reblogs.confirm'),
     cancel: t('confirm.show_reblogs.cancel'),
   }) !== 'confirm')
     return
 
   const showingReblogs = !relationship?.showingReblogs
-  relationship = await client.v1.accounts.follow(account.id, { reblogs: showingReblogs })
+  relationship = await client.v1.accounts.$select(account.id).follow({ reblogs: showingReblogs })
 }
 
 async function addUserNote() {
@@ -44,7 +45,7 @@ async function removeUserNote() {
   if (!relationship!.note || relationship!.note.length === 0)
     return
 
-  const newNote = await client.v1.accounts.createNote(account.id, { comment: '' })
+  const newNote = await client.v1.accounts.$select(account.id).note.create({ comment: '' })
   relationship!.note = newNote.note
   emit('removeNote')
 }

components/account/AccountPaginator.vue

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

components/common/CommonPaginator.vue

@@ -2,23 +2,21 @@
 // @ts-expect-error missing types
 import { DynamicScroller } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
-import type { Paginator, WsEvents } from 'masto'
+import type { mastodon } from 'masto'
 import type { UnwrapRef } from 'vue'
 
 const {
   paginator,
   stream,
   keyProp = 'id',
   virtualScroller = false,
-  eventType = 'update',
   preprocess,
   endMessage = true,
 } = defineProps<{
-  paginator: Paginator<T[], O>
+  paginator: mastodon.Paginator<T[], O>
   keyProp?: keyof T
   virtualScroller?: boolean
-  stream?: Promise<WsEvents>
-  eventType?: 'notification' | 'update'
+  stream?: mastodon.streaming.Subscription
   preprocess?: (items: (U | T)[]) => U[]
   endMessage?: boolean | string
 }>()
@@ -46,7 +44,7 @@ defineSlots<{
 const { t } = useI18n()
 const nuxtApp = useNuxtApp()
 
-const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, $$(stream), eventType, preprocess)
+const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, $$(stream), preprocess)
 
 nuxtApp.hook('elk-logo:click', () => {
   update()

components/conversation/ConversationPaginator.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { Paginator, mastodon } from 'masto'
+import type { mastodon } from 'masto'
 
 const { paginator } = defineProps<{
-  paginator: Paginator<mastodon.v1.Conversation[], mastodon.DefaultPaginationParams>
+  paginator: mastodon.Paginator<mastodon.v1.Conversation[], mastodon.DefaultPaginationParams>
 }>()
 
 function preprocess(items: mastodon.v1.Conversation[]): mastodon.v1.Conversation[] {

components/list/Account.vue

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

components/list/ListEntry.vue

@@ -40,7 +40,7 @@ async function cancelEdit() {
 
 const { submit, submitting } = submitter(async () => {
   try {
-    list.value = await client.v1.lists.update(form.id, {
+    list.value = await client.v1.lists.$select(form.id).update({
       title: form.title,
     })
     cancelEdit()
@@ -58,7 +58,8 @@ async function removeList() {
     return
 
   const confirmDelete = await openConfirmDialog({
-    title: t('confirm.delete_list.title', [list.value.title]),
+    title: t('confirm.delete_list.title'),
+    description: t('confirm.delete_list.description', [list.value.title]),
     confirm: t('confirm.delete_list.confirm'),
     cancel: t('confirm.delete_list.cancel'),
   })
@@ -70,7 +71,7 @@ async function removeList() {
   if (confirmDelete === 'confirm') {
     await nextTick()
     try {
-      await client.v1.lists.remove(list.value.id)
+      await client.v1.lists.$select(list.value.id).remove()
       emit('listRemoved', list.value.id)
     }
     catch (err) {

components/list/Lists.vue

@@ -5,7 +5,7 @@ const { userId } = defineProps<{
 
 const { client } = $(useMasto())
 const paginator = client.v1.lists.list()
-const listsWithUser = ref((await client.v1.accounts.listLists(userId)).map(list => list.id))
+const listsWithUser = ref((await client.v1.accounts.$select(userId).lists.list()).map(list => list.id))
 
 function indexOfUserInList(listId: string) {
   return listsWithUser.value.indexOf(listId)
@@ -15,11 +15,11 @@ async function edit(listId: string) {
   try {
     const index = indexOfUserInList(listId)
     if (index === -1) {
-      await client.v1.lists.addAccount(listId, { accountIds: [userId] })
+      await client.v1.lists.$select(listId).accounts.create({ accountIds: [userId] })
       listsWithUser.value.push(listId)
     }
     else {
-      await client.v1.lists.removeAccount(listId, { accountIds: [userId] })
+      await client.v1.lists.$select(listId).accounts.remove({ accountIds: [userId] })
       listsWithUser.value = listsWithUser.value.filter(id => id !== listId)
     }
   }

components/main/MainContent.vue

@@ -10,6 +10,7 @@ defineProps<{
 
 const container = ref()
 const route = useRoute()
+const userSettings = useUserSettings()
 const { height: windowHeight } = useWindowSize()
 const { height: containerHeight } = useElementBounding(container)
 const wideLayout = computed(() => route.meta.wideLayout ?? false)
@@ -26,10 +27,13 @@ const containerClass = computed(() => {
 <template>
   <div ref="container" :class="containerClass">
     <div
-      sticky top-0 z10 backdrop-blur
+      sticky top-0 z10
       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)]"
+      :class="{
+        'backdrop-blur': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),
+      }"
     >
       <div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }" class="native:xl:flex" border="b base">
         <div flex gap-3 items-center :overflow-hidden="!noOverflowHidden ? '' : false" py2 w-full>

components/modal/ModalConfirm.vue

@@ -10,7 +10,7 @@ const emit = defineEmits<{
 
 <template>
   <div flex="~ col" gap-6>
-    <div font-bold text-lg text-center>
+    <div font-bold text-lg>
       {{ title }}
     </div>
     <div v-if="description">

components/modal/ModalDialog.vue

@@ -56,6 +56,7 @@ const visible = defineModel<boolean>({ required: true })
 
 const deactivated = useDeactivated()
 const route = useRoute()
+const userSettings = useUserSettings()
 
 /** scrollable HTML element */
 const elDialogMain = ref<HTMLDivElement>()
@@ -156,7 +157,13 @@ useEventListener('keydown', (e: KeyboardEvent) => {
         <!-- corresponding to issue: #106, so please don't remove it. -->
 
         <!-- Mask layer: blur -->
-        <div class="dialog-mask" absolute inset-0 z-0 bg-transparent opacity-100 backdrop-filter backdrop-blur-sm touch-none />
+        <div
+          class="dialog-mask"
+          :class="{
+            'backdrop-blur-sm': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),
+          }"
+          absolute inset-0 z-0 bg-transparent opacity-100 backdrop-filter touch-none
+        />
         <!-- Mask layer: dimming -->
         <div class="dialog-mask" absolute inset-0 z-0 bg-black opacity-48 touch-none h="[calc(100%+0.5px)]" @click="clickMask" />
         <!-- Dialog container -->

components/nav/NavBottomMoreMenu.vue

@@ -13,7 +13,10 @@ function toggleVisible() {
 }
 
 const buttonEl = ref<HTMLDivElement>()
-/** Close the drop-down menu if the mouse click is not on the drop-down menu button when the drop-down menu is opened */
+/**
+ * Close the drop-down menu if the mouse click is not on the drop-down menu button when the drop-down menu is opened
+ * @param mouse
+ */
 function clickEvent(mouse: MouseEvent) {
   if (mouse.target && !buttonEl.value?.children[0].contains(mouse.target as any)) {
     if (modelValue.value) {
@@ -141,11 +144,12 @@ const { dragging, dragDistance } = invoke(() => {
           :class="{
             'duration-0': dragging,
             'duration-250': !dragging,
+            'backdrop-blur-md': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),
           }"
           transition="transform ease-in"
           flex-1 min-w-48 py-6 mb="-1px"
           of-y-auto scrollbar-hide overscroll-none max-h="[calc(100vh-200px)]"
-          rounded-t-lg bg="white/85 dark:neutral-900/85" backdrop-filter backdrop-blur-md
+          rounded-t-lg bg="white/85 dark:neutral-900/85" backdrop-filter
           border-t-1 border-base
         >
           <!-- Nav -->

components/notification/NotificationCard.vue

@@ -15,7 +15,6 @@ const { notification } = defineProps<{
           ps-3 pe-4 inset-is-0
           rounded-ie-be-3
           py-3 bg-base top-0
-          :lang="notification.status?.language ?? undefined"
         >
           <div i-ri-user-3-line text-xl me-3 color-blue />
           <AccountDisplayName :account="notification.account" text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all />
@@ -26,7 +25,6 @@ const { notification } = defineProps<{
         <AccountBigCard
           ms10
           :account="notification.account"
-          :lang="notification.status?.language ?? undefined"
         />
       </NuxtLink>
     </template>

components/notification/NotificationPaginator.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 // @ts-expect-error missing types
 import { DynamicScrollerItem } from 'vue-virtual-scroller'
-import type { Paginator, WsEvents, mastodon } from 'masto'
+import type { mastodon } from 'masto'
 import type { GroupedAccountLike, NotificationSlot } from '~/types'
 
 const { paginator, stream } = defineProps<{
-  paginator: Paginator<mastodon.v1.Notification[], mastodon.v1.ListNotificationsParams>
-  stream?: Promise<WsEvents>
+  paginator: mastodon.Paginator<mastodon.v1.Notification[], mastodon.rest.v1.ListNotificationsParams>
+  stream?: mastodon.streaming.Subscription
 }>()
 
 const virtualScroller = false // TODO: fix flickering issue with virtual scroll
@@ -172,7 +172,6 @@ const { formatNumber } = useHumanReadableNumber()
     :preprocess="preprocess"
     :stream="stream"
     :virtualScroller="virtualScroller"
-    eventType="notification"
   >
     <template #updater="{ number, update }">
       <button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="() => { update(); clearNotifications() }">

components/publish/PublishWidget.vue

@@ -75,12 +75,13 @@ function trimPollOptions() {
 }
 
 function editPollOptionDraft(event: Event, index: number) {
-  draft.params.poll!.options[index] = (event.target as HTMLInputElement).value
+  draft.params.poll!.options = Object.assign(draft.params.poll!.options.slice(), { [index]: (event.target as HTMLInputElement).value })
+
   trimPollOptions()
 }
 
 function deletePollOption(index: number) {
-  draft.params.poll!.options.splice(index, 1)
+  draft.params.poll!.options = draft.params.poll!.options.slice().splice(index, 1)
   trimPollOptions()
 }