chore: update changes from elk

.env.example

@@ -8,7 +8,7 @@ NUXT_CLOUDFLARE_ACCOUNT_ID=
 NUXT_CLOUDFLARE_NAMESPACE_ID=
 NUXT_CLOUDFLARE_API_TOKEN=
 
-# 'cloudflare' | 'fs'
+# 'cloudflare' | 'vercel' | 'fs'
 NUXT_STORAGE_DRIVER=
 NUXT_STORAGE_FS_BASE=
 

.github/workflows/docker.yml

@@ -17,17 +17,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 }}

README.md

@@ -28,7 +28,41 @@ If you want to contribute to the parent project, check out [its repo](https://gi
 
 The crab team maintains a deployment at:
 
-- 🦀 Production: [elk.bumscode.com](https://elk.bumscode.com)
+- 🦀 Production: [crab.bumscode.com](https://crab.bumscode.com)
+
+### Self-Host Docker Deployment
+
+In order to host Elk yourself you can use the provided Dockerfile to build a container with elk. Be aware, that Elk only loads properly if the connection is done via SSL/TLS. The Docker container itself does not provide any SSL/TLS handling. You'll have to add this bit yourself. 
+One could put Elk behind popular reverse proxies with SSL Handling like Traefik, NGINX etc. 
+
+1. checkout source ```git clone https://github.com/elk-zone/elk.git```
+1. got into new source dir: ```cd elk```
+1. build Docker image: ```docker build .```
+1. create local storage directory for settings: ```mkdir elk-storage```
+1. adjust permissions of storage dir: ```sudo chown 911:911 ./elk-storage```
+1. start container: ```docker-compose up -d```
+
+> [!NOTE]
+> The provided Dockerfile creates a container which will eventually run Elk as non-root user and create a persistent named Docker volume upon first start (if that volume does not yet exist). This volume is always created with root permission. Failing to change the permissions of ```/elk/data``` inside this volume to UID:GID 911 (as specified for Elk in the Dockerfile) will prevent Elk from storing it's config for user accounts. You either have to fix the permission in the created named volume, or mount a directory with the correct permission to ```/elk/data``` into the container.
+
+
+### Ecosystem
+
+These are known deployments using Elk as an alternative Web client for Mastodon servers or as a base for other projects in the fediverse:
+
+- [elk.fedified.com](https://elk.fedified.com) - Use Elk to log into any compatible instance
+- [elk.me.uk](https://elk.me.uk) - Use Elk to log into any compatible instance, hosted on Google Cloud Run with no Cloudflare proxy
+- [elk.h4.io](https://elk.h4.io) - Use Elk for the `h4.io` Server
+- [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.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
+- [elk.mstdn.ca](https://elk.mstdn.ca) - Use Elk for the `mstdn.ca` Server
+- [elk.mastodonapp.uk](https://elk.mastodonapp.uk) - Use Elk for the `mastodonapp.uk` Server
+- [elk.bolha.us](https://elk.bolha.us) - Use Elk for the `bolha.us` Server
+
+> **Note**: Community deployments are **NOT** maintained by the Elk team. It may not be synced with Elk's source code. Please do your own research about the host servers before using them.
 
 ## 💖 Sponsors
 

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 -->