Merge remote-tracking branch 'refs/remotes/upstream/main' into feat/scheduled-post

# Conflicts:
#	app/components/publish/PublishWidget.vue

.github/workflows/ci.yml

@@ -22,7 +22,9 @@ jobs:
       # ref. `pnpm@10.1.0` / `pnpm@9.15.4` 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/setup-node@v4.2.0
+      - uses: actions/setup-node@v4.4.0
+        with:
+          node-version-file: .nvmrc
 
       - name: 📦 Install dependencies
         run: pnpm install --frozen-lockfile

.github/workflows/release.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Set node
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version-file: .nvmrc
 
       - run: npx changelogithub
         env:

.nvmrc

@@ -1 +1 @@
-20
+22

CONTRIBUTING.md

@@ -6,19 +6,13 @@ Refer also to https://github.com/antfu/contribute.
 
 For guidelines on contributing to the documentation, refer to the [docs README](./docs/README.md).
 
-### Online
-
-You can use [StackBlitz Codeflow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the [Codeflow docs](https://developer.stackblitz.com/codeflow/what-is-codeflow).
-
-[![Open in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow.svg)](https://pr.new/elk-zone/elk)
-
 ### Local Setup
 
 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 (20.x).
+2. Ensure using the LTS version of Node.js.
 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/) 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)

README.md

@@ -13,7 +13,6 @@ A nimble Mastodon web client
 <br/>
 <p align="center">
   <a href="https://chat.elk.zone"><img src="https://img.shields.io/badge/chat-discord-blue?style=flat&logo=discord" alt="discord chat"></a>
-  <a href="https://pr.new/elk-zone/elk"><img src="https://developer.stackblitz.com/img/start_pr_dark_small.svg" alt="Start new PR in StackBlitz Codeflow"></a>
   <a href="https://volta.net/elk-zone/elk?utm_source=elk_readme"><img src="https://user-images.githubusercontent.com/904724/209143798-32345f6c-3cf8-4e06-9659-f4ace4a6acde.svg" alt="Open board on Volta"></a>
 </p>
 <br/>
@@ -56,6 +55,7 @@ One could put Elk behind popular reverse proxies with SSL Handling like Traefik,
 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.mastodon.com.pl](https://elk.mastodon.com.pl) - Use Elk for the `mastodon.com.pl` Server
 - [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
@@ -104,12 +104,6 @@ We would also appreciate sponsoring other contributors to the Elk project. If so
 
 We're really excited that you're interested in contributing to Elk! Before submitting your contribution, please read through the following guide.
 
-### Online
-
-You can use [StackBlitz Codeflow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the [Codeflow docs](https://developer.stackblitz.com/codeflow/what-is-codeflow).
-
-[![Open in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow.svg)](https://pr.new/elk-zone/elk)
-
 ### Local Setup
 
 Clone the repository and run on the root folder:

app/components/account/AccountFollowButton.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
-import { toggleFollowAccount, useRelationship } from '~~/composables/masto/relationship'
+import { toggleFollowAccount, useRelationship } from '~/composables/masto/relationship'
 
 const { account, context, command, ...props } = defineProps<{
   account: mastodon.v1.Account

app/components/account/AccountMoreButton.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
-import { toggleBlockAccount, toggleBlockDomain, toggleMuteAccount } from '~~/composables/masto/relationship'
+import { toggleBlockAccount, toggleBlockDomain, toggleMuteAccount } from '~/composables/masto/relationship'
 
 const { account } = defineProps<{
   account: mastodon.v1.Account

app/components/account/AccountTabs.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { CommonRouteTabOption } from '~/types'
+import type { CommonRouteTabOption } from '#shared/types'
 
 const { t } = useI18n()
 const route = useRoute()

app/components/common/CommonRouteTabs.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { CommonRouteTabMoreOption, CommonRouteTabOption } from '~/types'
+import type { CommonRouteTabMoreOption, CommonRouteTabOption } from '#shared/types'
 
 const { options, command, preventScrollTop = false } = defineProps<{
   options: CommonRouteTabOption[]

app/components/common/CommonScrollIntoView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const { as = 'div', active } = defineProps<{
-  as: any
+  as?: string
   active: boolean
 }>()
 

app/components/list/Account.vue

@@ -44,6 +44,7 @@ async function edit() {
         <button
           text-sm p2 border-1 transition-colors
           border-dark
+          bg-base
           btn-action-icon
           @click="edit"
         >

app/components/list/AccountSearchResult.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { SearchResult } from '~/composables/masto/search'
+
+defineProps<{
+  result: SearchResult
+  active: boolean
+}>()
+</script>
+
+<template>
+  <CommonScrollIntoView
+    as="div"
+    :active="active"
+    py2 block px2
+    :aria-selected="active"
+    :class="{ 'bg-active': active }"
+  >
+    <AccountInfo
+      v-if="result.type === 'account'"
+      :account="result.data"
+    />
+  </CommonScrollIntoView>
+</template>

app/components/main/MainContent.vue

@@ -35,15 +35,16 @@ const containerClass = computed(() => {
         '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>
-          <NuxtLink
-            v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0 xl:hidden
+      <div flex justify-between gap-2 min-h-53px px5 py1 :class="{ 'xl:hidden': $route.name !== 'tag' }" class="native:xl:flex" border="b base">
+        <div flex gap-2 items-center :overflow-hidden="!noOverflowHidden ? '' : false" w-full>
+          <button
+            v-if="backOnSmallScreen || back"
+            btn-text flex items-center ms="-3" p-3 xl:hidden
             :aria-label="$t('nav.back')"
             @click="$router.go(-1)"
           >
-            <div i-ri:arrow-left-line class="rtl-flip" />
-          </NuxtLink>
+            <div text-lg i-ri:arrow-left-line class="rtl-flip" />
+          </button>
           <div :truncate="!noOverflowHidden ? '' : false" flex w-full data-tauri-drag-region class="native-mac:justify-start native-mac:text-center">
             <slot name="title" />
           </div>

app/components/modal/ModalConfirm.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ConfirmDialogChoice, ConfirmDialogOptions } from '~/types'
+import type { ConfirmDialogChoice, ConfirmDialogOptions } from '#shared/types'
 
 const { extraOptionType } = defineProps<ConfirmDialogOptions>()
 

app/components/modal/ModalContainer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import type { ConfirmDialogChoice } from '#shared/types'
 import type { mastodon } from 'masto'
-import type { ConfirmDialogChoice } from '~/types'
 import {
   isCommandPanelOpen,
   isConfirmDialogOpen,

app/components/modal/ModalError.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ErrorDialogData } from '~/types'
+import type { ErrorDialogData } from '#shared/types'
 
 defineProps<ErrorDialogData>()
 </script>

app/components/nav/NavTitle.vue

@@ -33,17 +33,16 @@ router.afterEach(() => {
         {{ $t('app_name') }} <sup text-sm italic mt-1>{{ env === 'release' ? 'alpha' : env }}</sup>
       </div>
     </NuxtLink>
-    <div
-      hidden xl:flex items-center me-8 mt-2 gap-1
-    >
-      <CommonTooltip :content="$t('nav.back')">
-        <NuxtLink
+    <div hidden xl:flex items-center me-6 mt-2 gap-1>
+      <CommonTooltip :content="$t('nav.back')" :distance="0">
+        <button
+          type="button"
           :aria-label="$t('nav.back')"
-          :class="{ 'pointer-events-none op0': !back || back === '/', 'xl:flex': $route.name !== 'tag' }"
+          btn-text p-3 :class="{ 'pointer-events-none op0': !back || back === '/', 'xl:flex': $route.name !== 'tag' }"
           @click="$router.go(-1)"
         >
-          <div text-xl i-ri:arrow-left-line class="rtl-flip" btn-text />
-        </NuxtLink>
+          <div text-xl i-ri:arrow-left-line class="rtl-flip" />
+        </button>
       </CommonTooltip>
     </div>
   </div>

app/components/notification/NotificationCard.vue

@@ -51,7 +51,10 @@ const timeAgo = useTimeAgo(() => notification.createdAt, timeAgoOptions)
           <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 />
           <span ws-nowrap>
-            {{ $t('notification.followed_you') }}・{{ timeAgo }}
+            {{ $t('notification.followed_you') }}
+            <time text-secondary :datetime="notification.createdAt">
+              ・{{ timeAgo }}
+            </time>
           </span>
         </div>
         <AccountBigCard
@@ -68,7 +71,11 @@ const timeAgo = useTimeAgo(() => notification.createdAt, timeAgoOptions)
             :account="notification.account"
             text-purple me-1 font-bold line-clamp-1 ws-pre-wrap break-all
           />
-          <span>{{ $t("notification.signed_up") }}・{{ timeAgo }}</span>
+          <span>{{ $t("notification.signed_up") }}
+            <time text-secondary :datetime="notification.createdAt">
+              ・{{ timeAgo }}
+            </time>
+          </span>
         </div>
       </NuxtLink>
     </template>
@@ -97,7 +104,10 @@ const timeAgo = useTimeAgo(() => notification.createdAt, timeAgoOptions)
           text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all
         />
         <span me-1 ws-nowrap>
-          {{ $t('notification.request_to_follow') }}・{{ timeAgo }}
+          {{ $t('notification.request_to_follow') }}
+          <time text-secondary :datetime="notification.createdAt">
+            ・{{ timeAgo }}
+          </time>
         </span>
       </div>
       <AccountCard p="s-2 e-4 b-2" hover-card :account="notification.account">
@@ -111,7 +121,10 @@ const timeAgo = useTimeAgo(() => notification.createdAt, timeAgoOptions)
             <div i-ri:edit-2-fill text-xl me-1 text-secondary />
             <AccountInlineInfo :account="notification.account" me1 />
             <span ws-nowrap>
-              {{ $t('notification.update_status') }}・{{ timeAgo }}
+              {{ $t('notification.update_status') }}
+              <time text-secondary :datetime="notification.createdAt">
+                ・{{ timeAgo }}
+              </time>
             </span>
           </div>
         </template>