Merge branch 'main' into fix/shortcuts-not-general

components/account/AccountFollowButton.vue

@@ -91,7 +91,7 @@ const buttonStyle = $computed(() => {
     </template>
     <template v-else-if="relationship?.requested">
       <span elk-group-hover="hidden">{{ $t('account.follow_requested') }}</span>
-      <span hidden elk-group-hover="inline">Withdraw follow request</span>
+      <span hidden elk-group-hover="inline">{{ $t('account.withdraw_follow_request') }}</span>
     </template>
     <template v-else-if="relationship ? relationship.followedBy : context === 'followedBy'">
       <span elk-group-hover="hidden">{{ $t('account.follows_you') }}</span>

components/account/AccountHeader.vue

@@ -115,7 +115,7 @@ const personalNoteMaxLength = 2000
     <div p4 mt--18 flex flex-col gap-4>
       <div relative>
         <div flex justify-between>
-          <button shrink-0 :class="{ 'rounded-full': !isSelf, 'squircle': isSelf }" p1 bg-base border-bg-base z-2 @click="previewAvatar">
+          <button shrink-0 h-full :class="{ 'rounded-full': !isSelf, 'squircle': isSelf }" p1 bg-base border-bg-base z-2 @click="previewAvatar">
             <AccountAvatar :square="isSelf" :account="account" hover:opacity-90 transition-opacity w-28 h-28 />
           </button>
           <div inset-ie-0 flex="~ wrap row-reverse" gap-2 items-center pt18 justify-start>
@@ -167,7 +167,7 @@ const personalNoteMaxLength = 2000
         <div flex="~ col gap1" pt2>
           <div flex gap2 items-center flex-wrap>
             <AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
-            <AccountRolesIndicator :account="account" />
+            <AccountRolesIndicator v-if="account.roles?.length" :account="account" />
             <AccountLockIndicator v-if="account.locked" show-label />
             <AccountBotIndicator v-if="account.bot" show-label />
           </div>

components/account/AccountInfo.vue

@@ -23,7 +23,7 @@ const { account, as = 'div' } = defineProps<{
     <div flex="~ col" shrink pt-1 h-full overflow-hidden justify-center leading-none select-none>
       <div flex="~" gap-2>
         <AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg />
-        <AccountRolesIndicator :account="account" :limit="1" />
+        <AccountRolesIndicator v-if="account.roles?.length" :account="account" :limit="1" />
         <AccountLockIndicator v-if="account.locked" text-xs />
         <AccountBotIndicator v-if="account.bot" text-xs />
       </div>

components/account/AccountMoreButton.vue

@@ -68,7 +68,7 @@ async function removeUserNote() {
       </NuxtLink>
       <CommonDropdownItem
         v-if="isShareSupported"
-        :text="`Share @${account.acct}`"
+        :text="$t('menu.share_account', [`@${account.acct}`])"
         icon="i-ri:share-line"
         :command="command"
         @click="shareAccount()"

components/common/CommonRouteTabs.vue

@@ -1,16 +1,26 @@
 <script setup lang="ts">
 import type { RouteLocationRaw } from 'vue-router'
 
+const { t } = useI18n()
+
 export interface CommonRouteTabOption {
   to: RouteLocationRaw
   display: string
   disabled?: boolean
   name?: string
   icon?: string
   hide?: boolean
+  match?: boolean
+}
+export interface CommonRouteTabMoreOption {
+  options: CommonRouteTabOption[]
+  icon?: string
+  tooltip?: string
+  match?: boolean
 }
-const { options, command, replace, preventScrollTop = false } = $defineProps<{
+const { options, command, replace, preventScrollTop = false, moreOptions } = $defineProps<{
   options: CommonRouteTabOption[]
+  moreOptions?: CommonRouteTabMoreOption
   command?: boolean
   replace?: boolean
   preventScrollTop?: boolean
@@ -21,7 +31,6 @@ 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),
@@ -51,5 +60,43 @@ useCommands(() => command
         <span ws-nowrap mxa sm:px2 sm:py3 py2 text-center text-secondary-light op50>{{ option.display }}</span>
       </div>
     </template>
+    <template v-if="moreOptions?.options?.length">
+      <CommonDropdown placement="bottom" flex cursor-pointer mx-1.25rem>
+        <CommonTooltip placement="top" :content="moreOptions.tooltip || t('action.more')">
+          <button
+            cursor-pointer
+            flex
+            gap-1
+            w-12
+            rounded
+            hover:bg-active
+            btn-action-icon
+            op75
+            px4
+            group
+            :aria-label="t('action.more')"
+            :class="moreOptions.match ? 'text-primary' : 'text-secondary'"
+          >
+            <span v-if="moreOptions.icon" :class="moreOptions.icon" text-sm me--1 block />
+            <span i-ri:arrow-down-s-line text-sm me--1 block />
+          </button>
+        </CommonTooltip>
+        <template #popper>
+          <NuxtLink
+            v-for="(option, index) in moreOptions.options.filter(item => !item.hide)"
+            :key="option?.name || index"
+            :to="option.to"
+          >
+            <CommonDropdownItem>
+              <span flex="~ row" gap-x-4 items-center :class="option.match ? 'text-primary' : ''">
+                <span v-if="option.icon" :class="[option.icon, option.match ? 'text-primary' : 'text.secondary']" text-md me--1 block />
+                <span v-else block>&#160;</span>
+                <span>{{ option.display }}</span>
+              </span>
+            </CommonDropdownItem>
+          </NuxtLink>
+        </template>
+      </commondropdown>
+    </template>
   </div>
 </template>

components/common/CommonTrending.vue

@@ -18,6 +18,6 @@ const people = $computed(() =>
 
 <template>
   <p>
-    {{ $t('command.n-people-in-the-past-n-days', [people, maxDay]) }}
+    {{ $t('command.n_people_in_the_past_n_days', [people, maxDay]) }}
   </p>
 </template>

components/main/MainContent.vue

@@ -40,7 +40,7 @@ const containerClass = computed(() => {
           >
             <div i-ri:arrow-left-line class="rtl-flip" />
           </NuxtLink>
-          <div :truncate="!noOverflowHidden ? '' : false" flex w-full data-tauri-drag-region class="native-mac:justify-center native-mac:text-center native-mac:sm:justify-start">
+          <div :truncate="!noOverflowHidden ? '' : false" flex w-full data-tauri-drag-region class="native-mac:justify-start native-mac:text-center">
             <slot name="title" />
           </div>
           <div sm:hidden h-7 w-1px />

components/nav/NavFooter.vue

@@ -28,6 +28,9 @@ function toggleDark() {
           @click="togglePreferences('zenMode')"
         />
       </CommonTooltip>
+      <CommonTooltip :content="$t('magic_keys.dialog_header')">
+        <button flex i-ri:keyboard-box-line dark-i-ri:keyboard-box-line text-lg :aria-label="$t('magic_keys.dialog_header')" @click="toggleKeyboardShortcuts" />
+      </CommonTooltip>
       <CommonTooltip :content="$t('settings.about.sponsor_action')">
         <NuxtLink
           flex

components/notification/NotificationCard.vue

@@ -17,32 +17,35 @@ const { notification } = defineProps<{
           py-3 bg-base top-0
           :lang="notification.status?.language ?? undefined"
         >
-          <div i-ri:user-follow-fill me-1 color-primary />
+          <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') }}
           </span>
         </div>
         <AccountBigCard
+          ms10
           :account="notification.account"
           :lang="notification.status?.language ?? undefined"
         />
       </NuxtLink>
     </template>
     <template v-else-if="notification.type === 'admin.sign_up'">
-      <div flex p3 items-center bg-shaded>
-        <div i-ri:admin-fill me-1 color-purple />
-        <AccountDisplayName
-          :account="notification.account"
-          text-purple me-1 font-bold line-clamp-1 ws-pre-wrap break-all
-        />
-        <span>{{ $t("notification.signed_up") }}</span>
-      </div>
+      <NuxtLink :to="getAccountRoute(notification.account)">
+        <div flex p4 items-center bg-shaded>
+          <div i-ri:user-add-line text-xl me-2 color-purple />
+          <AccountDisplayName
+            :account="notification.account"
+            text-purple me-1 font-bold line-clamp-1 ws-pre-wrap break-all
+          />
+          <span>{{ $t("notification.signed_up") }}</span>
+        </div>
+      </NuxtLink>
     </template>
     <template v-else-if="notification.type === 'admin.report'">
       <NuxtLink :to="getReportRoute(notification.report?.id!)">
-        <div flex p3 items-center bg-shaded>
-          <div i-ri:flag-fill me-1 color-purple />
+        <div flex p4 items-center bg-shaded>
+          <div i-ri:flag-line text-xl me-2 color-purple />
           <i18n-t keypath="notification.reported">
             <AccountDisplayName
               :account="notification.account"
@@ -58,7 +61,7 @@ const { notification } = defineProps<{
     </template>
     <template v-else-if="notification.type === 'follow_request'">
       <div flex ms-4 items-center class="-top-2.5" absolute inset-ie-2 px-2>
-        <div i-ri:user-follow-fill text-xl me-1 />
+        <div i-ri:user-shared-fill text-xl me-1 />
         <AccountInlineInfo :account="notification.account" me1 />
       </div>
       <!-- TODO: accept request -->

components/notification/NotificationGroupedFollow.vue

@@ -15,7 +15,7 @@ const lang = $computed(() => {
 <template>
   <article flex flex-col relative :lang="lang ?? undefined">
     <div flex items-center top-0 left-2 pt-2 px-3>
-      <div i-ri:user-follow-fill me-3 color-primary aria-hidden="true" />
+      <div :class="count > 1 ? 'i-ri-group-line' : 'i-ri-user-3-line'" me-3 color-blue text-xl aria-hidden="true" />
       <template v-if="count > 1">
         <CommonLocalizedNumber
           keypath="notification.followed_you_count"
@@ -32,7 +32,7 @@ const lang = $computed(() => {
         </span>
       </template>
     </div>
-    <div pb-2>
+    <div pb-2 ps8>
       <div v-if="isExpanded">
         <AccountCard
           v-for="item in items.items"

components/notification/NotificationGroupedLikes.vue

@@ -12,10 +12,10 @@ const likes = $computed(() => group.likes.filter(i => i.favourite && !i.reblog))
 
 <template>
   <article flex flex-col relative>
-    <StatusLink :status="group.status!" pb2 pt3>
-      <div flex flex-col gap-2>
+    <StatusLink :status="group.status!" pb4 pt5>
+      <div flex flex-col gap-3>
         <div v-if="reblogs.length" flex="~ gap-1">
-          <div i-ri:repeat-fill text-xl me-1 color-green />
+          <div i-ri:repeat-fill text-xl me-2 color-green />
           <template v-for="i, idx of reblogs" :key="idx">
             <AccountHoverWrapper :account="i.account">
               <NuxtLink :to="getAccountRoute(i.account)">
@@ -28,20 +28,20 @@ const likes = $computed(() => group.likes.filter(i => i.favourite && !i.reblog))
           </div>
         </div>
         <div v-if="likes.length" flex="~ gap-1">
-          <div :class="useStarFavoriteIcon ? 'i-ri:star-fill color-yellow' : 'i-ri:heart-fill color-red'" text-xl me-1 />
+          <div :class="useStarFavoriteIcon ? 'i-ri:star-line color-yellow' : 'i-ri:heart-line color-red'" text-xl me-2 />
           <template v-for="i, idx of likes" :key="idx">
             <AccountHoverWrapper :account="i.account">
               <NuxtLink :to="getAccountRoute(i.account)">
                 <AccountAvatar text-primary font-bold :account="i.account" class="h-1.5em w-1.5em" />
               </NuxtLink>
             </AccountHoverWrapper>
           </template>
-          <div ml1>
+          <div ms1>
             {{ $t('notification.favourited_post') }}
           </div>
         </div>
       </div>
-      <div pl8 mt-1>
+      <div ps9 mt-1>
         <StatusBody :status="group.status!" text-secondary />
         <!-- When no text content is presented, we show media instead -->
         <template v-if="!group.status!.content">

components/notification/NotificationPaginator.vue

@@ -13,6 +13,16 @@ const virtualScroller = false // TODO: fix flickering issue with virtual scroll
 
 const groupCapacity = Number.MAX_VALUE // No limit
 
+const includeNotificationTypes: mastodon.v1.NotificationType[] = ['update', 'mention', 'poll', 'status']
+
+function includeNotificationsForStatusCard({ type, status }: mastodon.v1.Notification) {
+  // Exclude update, mention, pool and status notifications without the status entry:
+  // no makes sense to include them
+  // Those notifications will be shown using StatusCard SFC:
+  // check NotificationCard SFC L68 and L81 => :status="notification.status!"
+  return status || !includeNotificationTypes.includes(type)
+}
+
 // Group by type (and status when applicable)
 function groupId(item: mastodon.v1.Notification): string {
   // If the update is related to an status, group notifications from the same account (boost + favorite the same status)
@@ -108,9 +118,9 @@ function groupItems(items: mastodon.v1.Notification[]): NotificationSlot[] {
     results.push(...group)
   }
 
-  for (const item of items) {
+  for (const item of items.filter(includeNotificationsForStatusCard)) {
     const itemId = groupId(item)
-    // Finalize group if it already has too many notifications
+    // Finalize the group if it already has too many notifications
     if (currentGroupId !== itemId || currentGroup.length >= groupCapacity)
       processGroup()
 

components/publish/PublishEditorTools.vue

@@ -11,6 +11,7 @@ const { editor } = defineProps<{
     <VDropdown v-if="editor" placement="top">
       <button
         btn-action-icon
+        :aria-label="$t('tooltip.open_editor_tools')"
       >
         <div i-ri:font-size-2 />
       </button>

components/publish/PublishWidget.vue

@@ -84,28 +84,28 @@ function deletePollOption(index: number) {
   trimPollOptions()
 }
 
-const expiresInOptions = [
+const expiresInOptions = computed(() => [
   {
     seconds: 1 * 60 * 60,
-    label: t('time_ago_options.hour_future', 1),
+    label: isHydrated.value ? t('time_ago_options.hour_future', 1) : '',
   },
   {
     seconds: 2 * 60 * 60,
-    label: t('time_ago_options.hour_future', 2),
+    label: isHydrated.value ? t('time_ago_options.hour_future', 2) : '',
   },
   {
     seconds: 1 * 24 * 60 * 60,
-    label: t('time_ago_options.day_future', 1),
+    label: isHydrated.value ? t('time_ago_options.day_future', 1) : '',
   },
   {
     seconds: 2 * 24 * 60 * 60,
-    label: t('time_ago_options.day_future', 2),
+    label: isHydrated.value ? t('time_ago_options.day_future', 2) : '',
   },
   {
     seconds: 7 * 24 * 60 * 60,
-    label: t('time_ago_options.day_future', 7),
+    label: isHydrated.value ? t('time_ago_options.day_future', 7) : '',
   },
-]
+])
 
 const expiresInDefaultOptionIndex = 2
 
@@ -219,7 +219,7 @@ onDeactivated(() => {
     </template>
 
     <div flex gap-3 flex-1>
-      <NuxtLink :to="getAccountRoute(currentUser.account)">
+      <NuxtLink self-start :to="getAccountRoute(currentUser.account)">
         <AccountBigAvatar :account="currentUser.account" square />
       </NuxtLink>
       <!-- This `w-0` style is used to avoid overflow problems in flex layouts，so don't remove it unless you know what you're doing -->
@@ -369,7 +369,7 @@ onDeactivated(() => {
             @select="insertEmoji"
             @select-custom="insertCustomEmoji"
           >
-            <button btn-action-icon :title="$t('tooltip.emoji')">
+            <button btn-action-icon :title="$t('tooltip.emojis')" :aria-label="$t('tooltip.add_emojis')">
               <div i-ri:emotion-line />
             </button>
           </PublishEmojiPicker>