CompostInTraining · pull · Mar 16, 2026 · Mar 16, 2026 · Mar 16, 2026 · Mar 16, 2026
diff --git a/app/components/common/CommonPaginator.vue b/app/components/common/CommonPaginator.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts" generic="T, O, U = T">
 import type { mastodon } from 'masto'
-// @ts-expect-error missing types
-import { DynamicScroller } from 'vue-virtual-scroller'
-import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+import { WindowVirtualizer } from 'virtua/vue'
 
 const {
   paginator,
@@ -27,7 +25,6 @@ defineSlots<{
     items: U[]
     item: U
     index: number
-    active?: boolean
     older: U
     newer: U // newer is undefined when index === 0
   }) => void
@@ -83,23 +80,16 @@ defineExpose({ createEntry, removeEntry, updateEntry })
     <slot v-if="prevItems.length" name="updater" v-bind="{ number: prevItems.length, update }" />
     <slot name="items" :items="items as U[]">
       <template v-if="virtualScroller">
-        <DynamicScroller
-          v-slot="{ item, active, index }"
-          :items="items"
-          :min-item-size="200"
-          :key-field="keyProp"
-          page-mode
-        >
+        <WindowVirtualizer v-slot="{ item, index }" :data="items">
           <slot
-            v-bind="{ key: item[keyProp] }"
+            v-bind="{ key: (item as any)[keyProp] }"
             :item="item"
-            :active="active"
             :older="items[index + 1] as U"
             :newer="items[index - 1] as U"
             :index="index"
             :items="items as U[]"
           />
-        </DynamicScroller>
+        </WindowVirtualizer>
       </template>
       <template v-else>
         <slot

diff --git a/app/components/notification/NotificationPaginator.vue b/app/components/notification/NotificationPaginator.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import type { GroupedAccountLike, NotificationSlot } from '#shared/types'
 import type { mastodon } from 'masto'
-// @ts-expect-error missing types
-import { DynamicScrollerItem } from 'vue-virtual-scroller'
 
 defineProps<{
   paginator: mastodon.Paginator<mastodon.v1.Notification[], mastodon.rest.v1.ListNotificationsParams>
@@ -186,26 +184,24 @@ const { formatNumber } = useHumanReadableNumber()
         {{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }}
       </button>
     </template>
-    <template #default="{ item, active }">
+    <template #default="{ item }">
       <template v-if="virtualScroller">
-        <DynamicScrollerItem :item="item" :active="active" tag="div">
-          <NotificationGroupedFollow
-            v-if="item.type === 'grouped-follow'"
-            :items="item"
-            border="b base"
-          />
-          <NotificationGroupedLikes
-            v-else-if="item.type === 'grouped-reblogs-and-favourites'"
-            :group="item"
-            border="b base"
-          />
-          <NotificationCard
-            v-else
-            :notification="item"
-            hover:bg-active
-            border="b base"
-          />
-        </DynamicScrollerItem>
+        <NotificationGroupedFollow
+          v-if="item.type === 'grouped-follow'"
+          :items="item"
+          border="b base"
+        />
+        <NotificationGroupedLikes
+          v-else-if="item.type === 'grouped-reblogs-and-favourites'"
+          :group="item"
+          border="b base"
+        />
+        <NotificationCard
+          v-else
+          :notification="item"
+          hover:bg-active
+          border="b base"
+        />
       </template>
       <template v-else>
         <NotificationGroupedFollow

diff --git a/app/components/timeline/TimelinePaginator.vue b/app/components/timeline/TimelinePaginator.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
-// @ts-expect-error missing types
-import { DynamicScrollerItem } from 'vue-virtual-scroller'
-import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
 const { account, buffer = 10, endMessage = true, followedTags = [] } = defineProps<{
   paginator: mastodon.Paginator<mastodon.v1.Status[], mastodon.rest.v1.ListAccountStatusesParams>
@@ -36,17 +33,15 @@ function getFollowedTag(status: mastodon.v1.Status): string | null {
         {{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }}
       </button>
     </template>
-    <template #default="{ item, older, newer, active }">
+    <template #default="{ item, older, newer }">
       <template v-if="virtualScroller">
-        <DynamicScrollerItem :item="item" :active="active" tag="article">
-          <StatusCard :followed-tag="getFollowedTag(item)" :status="item" :context="context" :older="older" :newer="newer" :account="account" />
-        </DynamicScrollerItem>
+        <StatusCard :followed-tag="getFollowedTag(item)" :status="item" :context="context" :older="older" :newer="newer" :account="account" />
       </template>
       <template v-else>
         <StatusCard :followed-tag="getFollowedTag(item)" :status="item" :context="context" :older="older" :newer="newer" :account="account" />
       </template>
     </template>
-    <template v-if="context === 'account' " #done="{ items }">
+    <template v-if="context === 'account'" #done="{ items }">
       <div
         v-if="showOriginSite || items.length === 0"
         p5 text-secondary text-center flex flex-col items-center gap1

diff --git a/app/components/timeline/TimelineScheduledPostsPaginator.vue b/app/components/timeline/TimelineScheduledPostsPaginator.vue
@@ -2,10 +2,6 @@
 import type { CommonPaginator } from '#components'
 import type { mastodon } from 'masto'
 import type { ComponentExposed } from 'vue-component-type-helpers'
-// @ts-expect-error missing types
-import { DynamicScrollerItem } from 'vue-virtual-scroller'
-
-import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
 const { account, buffer = 10, endMessage = true } = defineProps<{
   paginator: mastodon.Paginator<mastodon.v1.ScheduledStatus[], mastodon.DefaultPaginationParams>
@@ -38,11 +34,10 @@ const showOriginSite = computed(() =>
         {{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }}
       </button>
     </template>
-    <template #default="{ item, active }">
+    <template #default="{ item }">
       <component
-        :is="virtualScroller ? DynamicScrollerItem : 'article'"
-        :item="item"
-        :active="active"
+        :is="virtualScroller ? 'div' : 'article'"
+        :key="item.id"
       >
         <StatusScheduledCard
           :item="item"

diff --git a/app/pages/[[server]]/@[account]/[status].vue b/app/pages/[[server]]/@[account]/[status].vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { ComponentPublicInstance } from 'vue'
-// @ts-expect-error missing types
-import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
+import { WindowVirtualizer } from 'virtua/vue'
 
 definePageMeta({
   name: 'status',
@@ -95,26 +94,20 @@ onReactivated(() => {
           />
 
           <template v-if="!pendingContext">
-            <DynamicScroller
-              v-slot="{ item, index, active }"
-              :items="context?.descendants || []"
-              :min-item-size="200"
-              :buffer="800"
-              key-field="id"
-              page-mode
+            <WindowVirtualizer
+              v-slot="{ item, index }"
+              :data="context?.descendants || []"
             >
-              <DynamicScrollerItem :item="item" :active="active">
-                <StatusCard
-                  :key="item.id"
-                  :status="item"
-                  context="account"
-                  :older="context?.descendants[index + 1]"
-                  :newer="index > 0 ? context?.descendants[index - 1] : status"
-                  :has-newer="index === 0"
-                  :main="status"
-                />
-              </DynamicScrollerItem>
-            </DynamicScroller>
+              <StatusCard
+                :key="item.id"
+                :status="item"
+                context="account"
+                :older="context?.descendants[index + 1]"
+                :newer="index > 0 ? context?.descendants[index - 1] : status"
+                :has-newer="index === 0"
+                :main="status"
+              />
+            </WindowVirtualizer>
           </template>
         </div>
       </template>

diff --git a/locales/ca.json b/locales/ca.json
@@ -49,7 +49,7 @@
     "unmute": "Deixa de silenciar",
     "view_other_followers": "És possible que no es mostrin els seguidors d'altres instàncies.",
     "view_other_following": "És possible que no es mostrin els seguiments d'altres instàncies.",
-    "withdraw follow request": "Retira la sol·licitud de seguiment"
+    "withdraw_follow_request": "Retira la sol·licitud de seguiment"
   },
   "action": {
     "apply": "Aplica",
@@ -137,7 +137,8 @@
       "cancel": "Cancel·la",
       "confirm": "Bloqueja",
       "description": "Confirmes que vols bloquejar {0}?",
-      "title": "Bloquejar el domini"
+      "title": "Bloquejar el domini",
+      "type_to_confirm": "Repeteix {0} per confirmar"
     },
     "common": {
       "cancel": "No",
@@ -557,6 +558,8 @@
     },
     "notifications_settings": "Notificacions",
     "preferences": {
+      "disable_timeline_autoloading": "Desctiva la càrrega automàtica de la cronologia",
+      "disable_timeline_autoloading_description": "No carregar automàticament publicacions noves a la cronologia i mostrar el botó \"Carrega'n més\".",
       "embedded_media": "Reproductor multimèdia incrustat",
       "embedded_media_description": "Mostrar un reproductor incrustat en lloc de la targeta de vista prèvia normal en expandir enllaços compartits de transmissió multimèdia.",
       "enable_autoplay": "Activa la reproducció automàtica",
@@ -748,6 +751,7 @@
     "year_past": "fa 0 anys|l'any passat|fa {n} anys"
   },
   "timeline": {
+    "load_more": "Carrega'n més",
     "no_posts": "Cap publicació aquí!",
     "show_new_items": "Mostra {v} elements nous|Mostra {v} element nou|Mostra {v} elements nous",
     "view_older_posts": "És possible que les publicacions més antigues d'altres instàncies no es mostrin."

diff --git a/package.json b/package.json
@@ -117,6 +117,7 @@
     "ultrahtml": "^1.5.3",
     "unimport": "^5.6.0",
     "unstorage": "^1.17.1",
+    "virtua": "^0.48.6",
     "vite": "^7.1.7",
     "vite-plugin-pwa": "^1.2.0",
     "vue": "^3.5.4",
@@ -133,7 +134,7 @@
     "ws": "^8.15.1"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^7.7.0",
+    "@antfu/eslint-config": "^7.7.2",
     "@types/chroma-js": "^3.1.1",
     "@types/file-saver": "^2.0.7",
     "@types/fnando__sparkline": "^0.3.7",