Merge pull request #18 from maybeanerd/chore-update-from-upstream

chore: update from upstream

Author: maybeanerd

.github/workflows/ci.yml

@@ -32,6 +32,7 @@ jobs:
 
       - name: 🧪 Test project
         run: pnpm test:ci
+        timeout-minutes: 10
 
       - name: 📝 Lint
         run: pnpm lint

CONTRIBUTING.md

@@ -83,7 +83,7 @@ Simple approach used by most websites of relying on direction set in HTML elemen
 We've added some `UnoCSS` utilities styles to help you with that:
 - Do not use `left/right` padding and margin: for example `pl-1`. Use `padding-inline-start/end` instead. So `pl-1` should be `ps-1`, `pr-1` should be `pe-1`. The same rules apply to margin.
 - Do not use `rtl-` classes, such as `rtl-left-0`.
-- For icons that should be rotated for RTL, add `class="rtl-flip"`. This can only be used for icons outside of elements with `dir="auto"`, such as timeline, and is the only exception from the rule above. For icons inside the timeline, it might not work as expected.
+- For icons that should be rotated for RTL, add `class="rtl-flip"`. This can only be used for icons outside of elements with `dir="auto"`, such as timeline, and is the only exception to the rule above. For icons inside the timeline, it might not work as expected.
 - For absolute positioned elements, don't use `left/right`: for example `left-0`. Use `inset-inline-start/end` instead. `UnoCSS` shortcuts are `inset-is` for `inset-inline-start` and `inset-ie` for `inset-inline-end`. Example: `left-0` should be replaced with `inset-is-0`.
 - If you need to change the border radius for an entire left or right side, use `border-inline-start/end`. `UnoCSS` shortcuts are `rounded-is` for left side, `rounded-ie` for right side. Example: `rounded-l-5` should be replaced with `rounded-ie-5`.
 - If you need to change the border radius for one corner, use `border-start-end-radius` and similar rules. `UnoCSS` shortcuts are `rounded` + top/bottom as either `-bs` (top) or `-be` (bottom) + left/right as either `-is` (left) or `-ie` (right). Example: `rounded-tl-0` should be replaced with `rounded-bs-is-0`.

components/common/CommonPaginator.vue

@@ -8,6 +8,7 @@ import type { UnwrapRef } from 'vue'
 const {
   paginator,
   stream,
+  eventType,
   keyProp = 'id',
   virtualScroller = false,
   preprocess,
@@ -17,6 +18,7 @@ const {
   keyProp?: keyof T
   virtualScroller?: boolean
   stream?: mastodon.streaming.Subscription
+  eventType?: 'update' | 'notification'
   preprocess?: (items: (U | T)[]) => U[]
   endMessage?: boolean | string
 }>()
@@ -44,7 +46,7 @@ defineSlots<{
 const { t } = useI18n()
 const nuxtApp = useNuxtApp()
 
-const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, toRef(() => stream), preprocess)
+const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, toRef(() => stream), eventType, preprocess)
 
 nuxtApp.hook('elk-logo:click', () => {
   update()

components/common/CommonTabs.vue

@@ -19,8 +19,8 @@ const tabs = computed(() => {
   })
 })
 
-function toValidName(otpion: string) {
-  return otpion.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
+function toValidName(option: string) {
+  return option.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
 }
 
 useCommands(() => command

components/help/HelpPreview.vue

@@ -30,10 +30,12 @@ const vAutoFocus = (el: HTMLElement) => el.focus()
       </NuxtLink>
       {{ $t('help.desc_para6') }}
     </p>
-    {{ $t('help.desc_para3') }}
+    <NuxtLink hover:text-primary href="https://github.com/sponsors/elk-zone" target="_blank">
+      {{ $t('help.desc_para3') }}
+    </NuxtLink>
     <p flex="~ gap-2 wrap" mxa>
       <template v-for="team of crabTeamMembers" :key="team.github">
-        <NuxtLink :href="`https://github.com/sponsors/${team.github}`" target="_blank" external rounded-full transition duration-300 border="~ transparent" hover="scale-105 border-primary">
+        <NuxtLink :href="team.link" target="_blank" external rounded-full transition duration-300 border="~ transparent" hover="scale-105 border-primary">
           <img :src="`/avatars/${team.github}-100x100.png`" :alt="team.display" rounded-full w-15 h-15 height="60" width="60">
         </NuxtLink>
       </template>
@@ -45,7 +47,7 @@ const vAutoFocus = (el: HTMLElement) => el.focus()
     </p>
     <p flex="~ gap-2 wrap" mxa>
       <template v-for="team of elkTeamMembers" :key="team.github">
-        <NuxtLink :href="`https://github.com/sponsors/${team.github}`" target="_blank" external rounded-full transition duration-300 border="~ transparent" hover="scale-105 border-primary">
+        <NuxtLink :href="team.link" target="_blank" external rounded-full transition duration-300 border="~ transparent" hover="scale-105 border-primary">
           <img :src="`/avatars/${team.github}-100x100.png`" :alt="team.display" rounded-full w-15 h-15 height="60" width="60">
         </NuxtLink>
       </template>

components/modal/ModalMediaPreview.vue

@@ -37,7 +37,7 @@ onUnmounted(() => locked.value = false)
 </script>
 
 <template>
-  <div relative h-full w-full flex pt-12 w-100vh @click="onClick">
+  <div relative h-full w-full flex pt-12 @click="onClick">
     <button
       v-if="hasNext" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.previous')"
       hover:bg="black/40" dark:bg="white/30" dark-hover:bg="white/20" absolute top="1/2" right-1 z5

components/modal/ModalMediaPreviewCarousel.vue

@@ -15,7 +15,7 @@ const emit = defineEmits<{
 const modelValue = defineModel<number>({ required: true })
 
 const slideGap = 20
-const doubleTapTreshold = 250
+const doubleTapThreshold = 250
 
 const view = ref()
 const slider = ref()
@@ -36,6 +36,8 @@ const isPinching = ref(false)
 const maxZoomOut = ref(1)
 const isZoomedIn = computed(() => scale.value > 1)
 
+const enableAutoplay = usePreferences('enableAutoplay')
+
 function goToFocusedSlide() {
   scale.value = 1
   x.value = slide.value[modelValue.value].offsetLeft * scale.value
@@ -147,7 +149,7 @@ function handleLastDrag(tap: boolean, swipe: Vector2, movement: Vector2, positio
 let lastTapAt = 0
 function handleTap([positionX, positionY]: Vector2) {
   const now = Date.now()
-  const isDoubleTap = now - lastTapAt < doubleTapTreshold
+  const isDoubleTap = now - lastTapAt < doubleTapThreshold
   lastTapAt = now
 
   if (!isDoubleTap)
@@ -218,7 +220,7 @@ function handleZoomDrag([deltaX, deltaY]: Vector2) {
 function handleSlideDrag([movementX, movementY]: Vector2) {
   goToFocusedSlide()
 
-  if (Math.abs(movementY) > Math.abs(movementX)) // vertical movement is more then horizontal
+  if (Math.abs(movementY) > Math.abs(movementX)) // vertical movement is more than horizontal
     y.value -= movementY / scale.value
   else
     x.value -= movementX / scale.value
@@ -264,16 +266,20 @@ const imageStyle = computed(() => ({
         items-center
         justify-center
       >
-        <img
+        <component
+          :is="item.type === 'gifv' ? 'video' : 'img'"
           ref="image"
+          :autoplay="enableAutoplay"
+          controls
+          loop
           select-none
           max-w-full
           max-h-full
           :style="imageStyle"
           :draggable="false"
           :src="item.url || item.previewUrl"
           :alt="item.description || ''"
-        >
+        />
       </div>
     </div>
   </div>

components/nav/NavUser.vue

@@ -34,7 +34,13 @@ const { busy, oauth, singleInstanceServer } = useSignIn()
         <strong>{{ currentServer }}</strong>
       </i18n-t>
     </button>
-    <button v-else btn-solid text-sm px-2 py-1 text-center xl:hidden @click="openSigninDialog()">
+    <button
+      v-else
+      flex="~ row"
+      gap-x-1 items-center justify-center btn-solid text-sm px-2 py-1 xl:hidden
+      @click="openSigninDialog()"
+    >
+      <span aria-hidden="true" block i-ri:login-circle-line class="rtl-flip" />
       {{ $t('action.sign_in') }}
     </button>
   </template>

components/notification/NotificationPaginator.vue

@@ -25,7 +25,7 @@ function includeNotificationsForStatusCard({ type, status }: mastodon.v1.Notific
 
 // 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)
+  // If the update is related to a status, group notifications from the same account (boost + favorite the same status)
   const id = item.status
     ? {
         status: item.status?.id,
@@ -171,6 +171,7 @@ const { formatNumber } = useHumanReadableNumber()
     :paginator="paginator"
     :preprocess="preprocess"
     :stream="stream"
+    eventType="notification"
     :virtualScroller="virtualScroller"
   >
     <template #updater="{ number, update }">

components/publish/PublishWidget.vue

@@ -87,7 +87,9 @@ function editPollOptionDraft(event: Event, index: number) {
 }
 
 function deletePollOption(index: number) {
-  draft.value.params.poll!.options = draft.value.params.poll!.options.slice().splice(index, 1)
+  const newPollOptions = draft.value.params.poll!.options.slice()
+  newPollOptions.splice(index, 1)
+  draft.value.params.poll!.options = newPollOptions
   trimPollOptions()
 }
 
@@ -156,6 +158,8 @@ const isExceedingCharacterLimit = computed(() => {
 
 const postLanguageDisplay = computed(() => languagesNameList.find(i => i.code === (draft.value.params.language || preferredLanguage))?.nativeName)
 
+const isDM = computed(() => draft.value.params.visibility === 'direct')
+
 async function handlePaste(evt: ClipboardEvent) {
   const files = evt.clipboardData?.files
   if (!files || files.length === 0)
@@ -275,12 +279,16 @@ onDeactivated(() => {
           </ol>
         </CommonErrorMessage>
 
-        <div relative flex-1 flex flex-col>
+        <div relative flex-1 flex flex-col min-h-30>
           <EditorContent
             :editor="editor"
             flex max-w-full
-            :class="shouldExpanded ? 'min-h-30 md:max-h-[calc(100vh-200px)] sm:max-h-[calc(100vh-400px)] max-h-35 of-y-auto overscroll-contain' : ''"
+            :class="{
+              'md:max-h-[calc(100vh-200px)] sm:max-h-[calc(100vh-400px)] max-h-35 of-y-auto overscroll-contain': shouldExpanded,
+              'py2 px3.5 bg-dm rounded-4 me--1 ms--1 mt--1': isDM,
+            }"
             @keydown="stopQuestionMarkPropagation"
+            @keydown.esc.prevent="editor?.commands.blur()"
           />
         </div>
 

components/search/SearchWidget.vue

@@ -82,6 +82,7 @@ function activate() {
         placeholder-text-secondary
         @keydown.down.prevent="shift(1)"
         @keydown.up.prevent="shift(-1)"
+        @keydown.esc.prevent="input?.blur()"
         @keypress.enter="activate"
       >
       <button v-if="query.length" btn-action-icon text-secondary @click="query = ''; input?.focus()">

components/settings/SettingsItem.vue

@@ -10,9 +10,11 @@ const props = defineProps<{
   external?: true
   large?: true
   match?: boolean
+  target?: string
 }>()
 
 const router = useRouter()
+const scrollOnClick = computed(() => props.to && !(props.target === '_blank' || props.external))
 
 useCommand({
   scope: 'Settings',
@@ -39,11 +41,12 @@ useCommand({
     :disabled="disabled"
     :to="to"
     :external="external"
+    :target="target"
     exact-active-class="text-primary"
     :class="disabled ? 'op25 pointer-events-none ' : match ? 'text-primary' : ''"
     block w-full group focus:outline-none
     :tabindex="disabled ? -1 : null"
-    @click="to ? $scrollToTop() : undefined"
+    @click="scrollOnClick ? $scrollToTop() : undefined"
   >
     <div
       w-full flex px5 py3 md:gap2 gap4 items-center

components/settings/SettingsToggleItem.vue

@@ -16,7 +16,7 @@ const { disabled = false } = defineProps<{
     :class="disabled ? 'opacity-50 cursor-not-allowed' : ''"
   >
     <div
-      w-full flex w-fit px5 py3 md:gap2 gap4 items-center
+      w-full flex px5 py3 md:gap2 gap4 items-center
       transition-250
       :class="disabled ? '' : 'group-hover:bg-active'"
       group-focus-visible:ring="2 current"

components/status/StatusActions.vue

@@ -55,7 +55,7 @@ function reply() {
 
     <div flex-1>
       <StatusActionButton
-        :content="$t('action.boost')"
+        :content="$t(status.reblogged ? 'action.boosted' : 'action.boost')"
         :text="!getPreferences(userSettings, 'hideBoostCount') && status.reblogsCount ? status.reblogsCount : ''"
         color="text-green" hover="text-green" elk-group-hover="bg-green/10"
         icon="i-ri:repeat-line"
@@ -77,7 +77,7 @@ function reply() {
 
     <div flex-1>
       <StatusActionButton
-        :content="$t('action.favourite')"
+        :content="$t(status.favourited ? 'action.favourited' : 'action.favourite')"
         :text="!getPreferences(userSettings, 'hideFavoriteCount') && status.favouritesCount ? status.favouritesCount : ''"
         :color="useStarFavoriteIcon ? 'text-yellow' : 'text-rose'"
         :hover="useStarFavoriteIcon ? 'text-yellow' : 'text-rose'"
@@ -100,7 +100,7 @@ function reply() {
 
     <div flex-none>
       <StatusActionButton
-        :content="$t('action.bookmark')"
+        :content="$t(status.bookmarked ? 'action.bookmarked' : 'action.bookmark')"
         :color="useStarFavoriteIcon ? 'text-rose' : 'text-yellow'"
         :hover="useStarFavoriteIcon ? 'text-rose' : 'text-yellow'"
         :elk-group-hover="useStarFavoriteIcon ? 'bg-rose/10' : 'bg-yellow/10' "

components/status/StatusActionsMore.vue

@@ -144,7 +144,7 @@ function showFavoritedAndBoostedBy() {
 
     <template #popper>
       <div flex="~ col">
-        <template v-if="getPreferences(userSettings, 'zenMode')">
+        <template v-if="getPreferences(userSettings, 'zenMode') && !details">
           <CommonDropdownItem
             :text="$t('action.reply')"
             icon="i-ri:chat-1-line"

components/status/StatusAttachment.vue

@@ -68,6 +68,7 @@ const video = ref<HTMLVideoElement | undefined>()
 const prefersReducedMotion = usePreferredReducedMotion()
 const isAudio = computed(() => attachment.type === 'audio')
 const isVideo = computed(() => attachment.type === 'video')
+const isGif = computed(() => attachment.type === 'gifv')
 
 const enableAutoplay = usePreferences('enableAutoplay')
 
@@ -164,7 +165,7 @@ watch(shouldLoadAttachment, () => {
       <button
         type="button"
         relative
-        @click="!shouldLoadAttachment ? loadAttachment() : null"
+        @click="!shouldLoadAttachment ? loadAttachment() : openMediaPreview(attachments ? attachments : [attachment], attachments?.indexOf(attachment) || 0)"
       >
         <video
           ref="video"
@@ -248,12 +249,13 @@ watch(shouldLoadAttachment, () => {
       </button>
     </template>
     <div
-      v-if="attachment.description && !getPreferences(userSettings, 'hideAltIndicatorOnPosts')" :class="isAudio ? [] : [
+      :class="isAudio ? [] : [
         'absolute left-2',
         isVideo ? 'top-2' : 'bottom-2',
       ]"
+      flex gap-col-2
     >
-      <VDropdown :distance="6" placement="bottom-start">
+      <VDropdown v-if="attachment.description && !getPreferences(userSettings, 'hideAltIndicatorOnPosts')" :distance="6" placement="bottom-start">
         <button
           font-bold text-sm
           :class="isAudio
@@ -281,6 +283,14 @@ watch(shouldLoadAttachment, () => {
           </div>
         </template>
       </VDropdown>
+      <div v-if="isGif && !getPreferences(userSettings, 'hideGifIndicatorOnPosts')">
+        <button
+          aria-hidden font-bold text-sm
+          rounded-1 bg-black:65 text-white px1.2 py0.2 pointer-events-none
+        >
+          {{ $t('status.gif') }}
+        </button>
+      </div>
     </div>
   </div>
 </template>

components/status/StatusContent.vue

@@ -37,7 +37,7 @@ const allowEmbeddedMedia = computed(() => status.card?.html && embeddedMediaPref
   <div
     space-y-3
     :class="{
-      'pt2 pb0.5 px3.5 bg-dm rounded-4 me--1': isDM,
+      'py2 px3.5 bg-dm rounded-4 me--1': isDM,
       'ms--3.5 mt--1 ms--1': isDM && context !== 'details',
     }"
   >
@@ -68,7 +68,6 @@ const allowEmbeddedMedia = computed(() => status.card?.html && embeddedMediaPref
         :status="status.reblog" border="~ rounded"
         :actions="false"
       />
-      <div v-if="isDM" />
     </StatusSpoiler>
   </div>
 </template>

components/status/StatusDetails.vue

@@ -31,7 +31,7 @@ useHydratedHead({
 
 <template>
   <div :id="`status-${status.id}`" flex flex-col gap-2 pt2 pb1 ps-3 pe-4 relative :lang="status.language ?? undefined" aria-roledescription="status-details">
-    <StatusActionsMore :status="status" absolute inset-ie-2 top-2 @after-edit="$emit('refetchStatus')" />
+    <StatusActionsMore :status="status" :details="true" absolute inset-ie-2 top-2 @after-edit="$emit('refetchStatus')" />
     <NuxtLink :to="getAccountRoute(status.account)" rounded-full hover:bg-active transition-100 pe5 me-a>
       <AccountHoverWrapper :account="status.account">
         <AccountInfo :account="status.account" />

components/status/StatusLink.vue

@@ -14,7 +14,8 @@ function onclick(evt: MouseEvent | KeyboardEvent) {
   const path = evt.composedPath() as HTMLElement[]
   const el = path.find(el => ['A', 'BUTTON', 'IMG', 'VIDEO'].includes(el.tagName?.toUpperCase()))
   const text = window.getSelection()?.toString()
-  if (!el && !text)
+  const isCustomEmoji = el?.parentElement?.classList.contains('custom-emoji')
+  if ((!el && !text) || isCustomEmoji)
     go(evt)
 }