refactor: generic components (#868)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

components/common/CommonAlert.vue

@@ -20,7 +20,7 @@ function close() {
     <div>
       <slot />
     </div>
-    <button text-xl hover:text-primary bg-hover-overflow w-1.4em h-1.4em @click="close()">
+    <button text-xl hover:text-primary bg-hover-overflow w="1.4em" h="1.4em" @click="close()">
       <div i-ri:close-line />
     </button>
   </div>

components/common/CommonPaginator.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends any, O extends any">
 // @ts-expect-error missing types
 import { DynamicScroller } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
@@ -12,20 +12,23 @@ const {
   eventType = 'update',
   preprocess,
 } = defineProps<{
-  paginator: Paginator<any[], any>
+  paginator: Paginator<T[], O>
-  keyProp?: string
+  keyProp?: keyof T
   virtualScroller?: boolean
   stream?: Promise<WsEvents>
   eventType?: 'notification' | 'update'
-  preprocess?: (items: any[]) => any[]
+  preprocess?: (items: T[]) => any[]
 }>()
 
 defineSlots<{
   default: {
-    item: any
+    item: T
     active?: boolean
-    older?: any
+    older?: T
-    newer?: any // newer is undefined when index === 0
+    newer?: T // newer is undefined when index === 0
+  }
+  items: {
+    items: T[]
   }
   updater: {
     number: number
@@ -35,6 +38,8 @@ defineSlots<{
   done: {}
 }>()
 
+const { t } = useI18n()
+
 const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, stream, eventType, preprocess)
 </script>
 
@@ -62,7 +67,7 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
       <template v-else>
         <slot
           v-for="item, index of items"
-          :key="item[keyProp]"
+          :key="(item as any)[keyProp]"
           :item="item"
           :older="items[index + 1]"
           :newer="items[index - 1]"
@@ -75,11 +80,11 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
     </slot>
     <slot v-else-if="state === 'done'" name="done">
       <div p5 text-secondary italic text-center>
-        {{ $t('common.end_of_list') }}
+        {{ t('common.end_of_list') }}
       </div>
     </slot>
     <div v-else-if="state === 'error'" p5 text-secondary>
-      {{ $t('common.error') }}: {{ error }}
+      {{ t('common.error') }}: {{ error }}
     </div>
   </div>
 </template>

components/modal/ModalMediaPreview.vue

@@ -40,14 +40,14 @@ onUnmounted(() => locked.value = false)
   <div relative h-full w-full flex pt-12 w-100vh @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
+      hover:bg="black/40" dark:bg="white/30" dark-hover:bg="white/20" absolute top="1/2" right-1 z5
       :title="$t('action.next')" @click="next"
     >
       <div i-ri:arrow-right-s-line text-white />
     </button>
     <button
       v-if="hasPrev" pointer-events-auto btn-action-icon bg="black/20" aria-label="action.next"
-      hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20" absolute top="1/2" left-1 z5
+      hover:bg="black/40" dark:bg="white/30" dark:hover-bg="white/20" absolute top="1/2" left-1 z5
       :title="$t('action.prev')" @click="prev"
     >
       <div i-ri:arrow-left-s-line text-white />
@@ -60,7 +60,7 @@ onUnmounted(() => locked.value = false)
     <div absolute top-0 w-full flex justify-between>
       <button
         btn-action-icon bg="black/30" aria-label="action.close" hover:bg="black/40" dark:bg="white/30"
-        dark:hover:bg="white/20" pointer-events-auto shrink-0 @click="emit('close')"
+        dark:hover-bg="white/20" pointer-events-auto shrink-0 @click="emit('close')"
       >
         <div i-ri:close-line text-white />
       </button>

components/nav/NavFooter.vue

@@ -16,7 +16,7 @@ function toggleDark() {
   <footer p4 text-sm text-secondary-light flex="~ col">
     <div flex="~ gap2" items-center mb4>
       <CommonTooltip :content="$t('nav.toggle_theme')">
-        <button flex i-ri:sun-line dark:i-ri:moon-line text-lg :aria-label="$t('nav.toggle_theme')" @click="toggleDark()" />
+        <button flex i-ri:sun-line dark-i-ri:moon-line text-lg :aria-label="$t('nav.toggle_theme')" @click="toggleDark()" />
       </CommonTooltip>
       <CommonTooltip :content="$t('nav.zen_mode')">
         <button

components/notification/NotificationSubscribePushNotificationError.vue

@@ -31,7 +31,7 @@ const { modelValue } = defineModel<{
           :aria-label="$t('settings.notifications.push_notifications.subscription_error.clear_error')"
           @click="modelValue = false"
         >
-          <span aria-hidden="true" w-1.75em h-1.75em i-ri:close-line />
+          <span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
         </button>
       </CommonTooltip>
     </head>

components/publish/PublishWidget.vue

@@ -253,7 +253,7 @@ defineExpose({
                 :aria-label="$t('action.clear_upload_failed')"
                 @click="failed = []"
               >
-                <span aria-hidden="true" w-1.75em h-1.75em i-ri:close-line />
+                <span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
               </button>
             </CommonTooltip>
           </head>
@@ -315,7 +315,7 @@ defineExpose({
 
         <div flex-auto />
 
-        <div dir="ltr" pointer-events-none pe-1 pt-2 text-sm tabular-nums text-secondary flex gap-0.5 :class="{ 'text-rose-500': characterCount > characterLimit }">
+        <div dir="ltr" pointer-events-none pe-1 pt-2 text-sm tabular-nums text-secondary flex gap="0.5" :class="{ 'text-rose-500': characterCount > characterLimit }">
           {{ characterCount ?? 0 }}<span text-secondary-light>/</span><span text-secondary-light>{{ characterLimit }}</span>
         </div>
 

components/status/StatusCard.vue

@@ -100,7 +100,7 @@ const isDM = $computed(() => status.visibility === 'direct')
     <div v-if="newer && !directReply" w-auto h-1px bg-border />
     <div flex justify-between>
       <slot name="meta">
-        <div v-if="rebloggedBy && !collapseRebloggedBy" relative text-secondary ws-nowrap flex="~" items-center pt1 pb0.5 px-1px bg-base>
+        <div v-if="rebloggedBy && !collapseRebloggedBy" relative text-secondary ws-nowrap flex="~" items-center p="t-1 b-0.5 x-1px" bg-base>
           <div i-ri:repeat-fill me-46px text-primary w-16px h-16px />
           <div absolute top-1 ms-24px w-32px h-32px rounded-full>
             <AccountHoverWrapper :account="rebloggedBy">

components/status/StatusReplyingTo.vue

@@ -22,8 +22,8 @@ const account = isSelf ? computed(() => status.account) : useAccountById(status.
       <template v-if="account">
         <div i-ri:reply-fill :class="collapsed ? '' : 'scale-x-[-1]'" text-secondary-light />
         <template v-if="!collapsed">
-          <AccountAvatar v-if="isSelf || simplified || status.inReplyToAccountId === currentUser?.account.id" :account="account" :link="false" w-5 h-5 mx-0.5 />
+          <AccountAvatar v-if="isSelf || simplified || status.inReplyToAccountId === currentUser?.account.id" :account="account" :link="false" w-5 h-5 mx="0.5" />
-          <AccountInlineInfo v-else :account="account" :link="false" mx-0.5 />
+          <AccountInlineInfo v-else :account="account" :link="false" mx="0.5" />
         </template>
       </template>
       <div i-ri:question-answer-line text-secondary-light text-lg />

components/status/StatusSpoiler.vue

@@ -11,7 +11,7 @@ watchEffect(() => {
 
 <template>
   <div v-if="enabled" flex flex-col items-start>
-    <div class="content-rich" px-4 pb-2.5 text-center text-secondary w-full border="~ base" border-0 border-b-dotted border-b-3 mt-2>
+    <div class="content-rich" p="x-4 b-2.5" text-center text-secondary w-full border="~ base" border-0 border-b-dotted border-b-3 mt-2>
       <slot name="spoiler" />
     </div>
     <div flex="~ gap-1 center" w-full mt="-4.5">

components/timeline/TimelinePaginator.vue

@@ -9,7 +9,7 @@ const { paginator, stream, account } = defineProps<{
   stream?: Promise<WsEvents>
   context?: mastodon.v2.FilterContext
   account?: mastodon.v1.Account
-  preprocess?: (items: any[]) => any[]
+  preprocess?: (items: mastodon.v1.Status[]) => mastodon.v1.Status[]
 }>()
 
 const { formatNumber } = useHumanReadableNumber()

nuxt.config.ts

@@ -11,6 +11,10 @@ export default defineNuxtConfig({
   typescript: {
     tsConfig: {
       exclude: ['../service-worker'],
+      vueCompilerOptions: {
+        jsxTemplates: true,
+        experimentalRfc436: true,
+      },
     },
   },
   modules: [

package.json

@@ -110,7 +110,7 @@
     "vite-plugin-inspect": "^0.7.11",
     "vite-plugin-pwa": "^0.14.1",
     "vitest": "^0.26.2",
-    "vue-tsc": "^1.0.16",
+    "vue-tsc": "^1.0.22",
     "workbox-window": "^6.5.4"
   },
   "simple-git-hooks": {

pnpm-lock.yaml

@@ -82,7 +82,7 @@ specifiers:
   vite-plugin-pwa: ^0.14.1
   vitest: ^0.26.2
   vue-advanced-cropper: ^2.8.6
-  vue-tsc: ^1.0.16
+  vue-tsc: ^1.0.22
   vue-virtual-scroller: 2.0.0-beta.7
   workbox-window: ^6.5.4
 
@@ -147,7 +147,7 @@ devDependencies:
   '@types/wicg-file-system-access': 2020.9.5
   '@unocss/nuxt': 0.48.0
   '@vitejs/plugin-vue': 3.2.0
-  '@vue-macros/nuxt': 0.2.8_3nbxte3dhogb6b7pemmre2vo4m
+  '@vue-macros/nuxt': 0.2.8_neamklg3mofeje4gmdzjdymjki
   '@vueuse/math': 9.10.0
   '@vueuse/nuxt': 9.9.0_nuxt@3.0.0
   bumpp: 8.2.1
@@ -171,7 +171,7 @@ devDependencies:
   vite-plugin-inspect: 0.7.11
   vite-plugin-pwa: 0.14.1_workbox-window@6.5.4
   vitest: 0.26.2_jsdom@20.0.3
-  vue-tsc: 1.0.16_typescript@4.9.4
+  vue-tsc: 1.0.22_typescript@4.9.4
   workbox-window: 6.5.4
 
 packages:
@@ -3191,14 +3191,6 @@ packages:
       vue: 3.2.45
     dev: true
 
-  /@volar/language-core/1.0.16:
-    resolution: {integrity: sha512-IGnOxWTs4DZ81TDcmxBAkCBxs97hUblwcjpBsTx/pOGGaSSDQRJPn0wL8NYTybEObU0i7lhEpKZ+0vJfdIy1Kg==}
-    dependencies:
-      '@volar/source-map': 1.0.16
-      '@vue/reactivity': 3.2.45
-      muggle-string: 0.1.0
-    dev: true
-
   /@volar/language-core/1.0.22:
     resolution: {integrity: sha512-hiJeCOqxNdtG/04FRGLGI9H9DVz2l6cTqPDBzwqplHXAWfMxjzUaGUrn9sfTG7YMFNZUgK4EYxJnRfhqdtbSFQ==}
     dependencies:
@@ -3206,42 +3198,36 @@ packages:
       muggle-string: 0.1.0
     dev: true
 
-  /@volar/source-map/1.0.16:
-    resolution: {integrity: sha512-PKjzmQcg8QOGC/1V9tmGh2jcy6bKLhkW5bGidElSr83iDbCzLvldt2/La/QlDxaRCHYLT0MeyuGJBZIChB1dYQ==}
-    dependencies:
-      muggle-string: 0.1.0
-    dev: true
-
   /@volar/source-map/1.0.22:
     resolution: {integrity: sha512-cv4gypHSP4MWVR82ed/+1IpI6794qAl0Q0+KJ+VGMVF8rVugsiF9QbyMCgjel9wNRsssQsazzsf6txOR9vHQiw==}
     dependencies:
       muggle-string: 0.1.0
     dev: true
 
-  /@volar/typescript/1.0.16:
+  /@volar/typescript/1.0.22:
-    resolution: {integrity: sha512-Yov+n4oO3iYnuMt9QJAFpJabfTRCzc7KvjlAwBaSuZy+Gc/f9611MgtqAh5/SIGmltFN8dXn1Ijno8ro8I4lyw==}
+    resolution: {integrity: sha512-VPyEicealSD4gqlE5/UQ1j3ietsO6Hfat40KtUEh/K+XEZ7h02b1KgFV64YEuBkBOaZ5hgvRW/WXKtQgXCl7Iw==}
     dependencies:
-      '@volar/language-core': 1.0.16
+      '@volar/language-core': 1.0.22
     dev: true
 
-  /@volar/vue-language-core/1.0.16:
+  /@volar/vue-language-core/1.0.22:
-    resolution: {integrity: sha512-sQ/aW1Vuiyy4OQuh2lthyYicruM3qh9VSk/aDh8/bFvM8GoohHZqVpMN3LYldEJ9eT/rN6u4xmYP54vc/EjX4Q==}
+    resolution: {integrity: sha512-Ki0G/ZdBj2/GLw+/VVH3n9XR/JL6krMIth02EekFn6JV4PGN3mNxbvoh6lOPSDZLR6biOU5nJPnnjpKy8nuXhw==}
     dependencies:
-      '@volar/language-core': 1.0.16
+      '@volar/language-core': 1.0.22
-      '@volar/source-map': 1.0.16
+      '@volar/source-map': 1.0.22
       '@vue/compiler-dom': 3.2.45
       '@vue/compiler-sfc': 3.2.45
       '@vue/reactivity': 3.2.45
       '@vue/shared': 3.2.45
-      minimatch: 5.1.1
+      minimatch: 5.1.2
       vue-template-compiler: 2.7.14
     dev: true
 
-  /@volar/vue-typescript/1.0.16:
+  /@volar/vue-typescript/1.0.22:
-    resolution: {integrity: sha512-M018Ulg/o2FVktAdlr5b/z4K69bYzekxNUA1o39y5Ur6CObc/o+5eDCCS7gIYijWnx9iNKkSQpWWWblJFv7kHQ==}
+    resolution: {integrity: sha512-2T1o5z86PAev31OMtVOv/qp4P3ZVl9ln/2KTmykQE8Fh4A5F+868MW4nf5J7XQ6RNyx7RH9LhzgjvbqJpAfiYw==}
     dependencies:
-      '@volar/typescript': 1.0.16
+      '@volar/typescript': 1.0.22
-      '@volar/vue-language-core': 1.0.16
+      '@volar/vue-language-core': 1.0.22
     dev: true
 
   /@vue-macros/api/0.2.3:
@@ -3365,7 +3351,7 @@ packages:
       - vue
     dev: true
 
-  /@vue-macros/nuxt/0.2.8_3nbxte3dhogb6b7pemmre2vo4m:
+  /@vue-macros/nuxt/0.2.8_neamklg3mofeje4gmdzjdymjki:
     resolution: {integrity: sha512-vOMPTGNzBx+pmeZa3nJWRgN9CHYW700EZWVcAMQHrLjgh7vV+JqsA667hoBNnJPjmEBwSe8EzYbc1LFqEZoTZQ==}
     engines: {node: '>=14.19.0'}
     peerDependencies:
@@ -3373,7 +3359,7 @@ packages:
     dependencies:
       '@nuxt/kit': 3.0.0
       '@vue-macros/short-vmodel': 1.0.2
-      '@vue-macros/volar': 0.5.9_vue-tsc@1.0.16
+      '@vue-macros/volar': 0.5.9_vue-tsc@1.0.22
       nuxt: 3.0.0_lzzuuodtsqwxnvqeq4g4likcqa
       unplugin-vue-macros: 1.3.0_@vueuse+core@9.9.0
     transitivePeerDependencies:
@@ -3460,7 +3446,7 @@ packages:
       - vue
     dev: true
 
-  /@vue-macros/volar/0.5.9_vue-tsc@1.0.16:
+  /@vue-macros/volar/0.5.9_vue-tsc@1.0.22:
     resolution: {integrity: sha512-SBjgofdn55fDXkPEGwAmjEeUwrupYqC9ZXH+iHMeawQfUwS2BrcvsUHkMnZiAMW0eQPcmwQr2dUJYMswkbp7cw==}
     peerDependencies:
       vue-tsc: ^1.0.9
@@ -3473,7 +3459,7 @@ packages:
       '@vue-macros/define-props': 0.1.2
       '@vue-macros/short-vmodel': 1.0.2
       muggle-string: 0.2.1
-      vue-tsc: 1.0.16_typescript@4.9.4
+      vue-tsc: 1.0.22_typescript@4.9.4
     transitivePeerDependencies:
       - rollup
       - vue
@@ -7277,6 +7263,13 @@ packages:
       brace-expansion: 2.0.1
     dev: true
 
+  /minimatch/5.1.2:
+    resolution: {integrity: sha512-bNH9mmM9qsJ2X4r2Nat1B//1dJVcn3+iBLa3IgqJ7EbGaDNepL9QSHOxN4ng33s52VMMhhIfgCYDk3C4ZmlDAg==}
+    engines: {node: '>=10'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
+
   /minimist/1.2.7:
     resolution: {integrity: sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==}
 
@@ -10323,14 +10316,14 @@ packages:
       he: 1.2.0
     dev: true
 
-  /vue-tsc/1.0.16_typescript@4.9.4:
+  /vue-tsc/1.0.22_typescript@4.9.4:
-    resolution: {integrity: sha512-yZaiJBbcKR1rSLhiF9KryAFH7R63po+N/invr2EAHGXxMzZksE5j1zyQKvrYiqK47ZHLAlCR+re/PHqWp/UzTg==}
+    resolution: {integrity: sha512-xSxwgWR3czhv7sLKHWu6lzj9Xq6AtsCURVL45AY4TLGFszv2L2YlMgygXvqslyCM5bz9cyoIKSaZnzHqHTHjzA==}
     hasBin: true
     peerDependencies:
       typescript: '*'
     dependencies:
-      '@volar/vue-language-core': 1.0.16
+      '@volar/vue-language-core': 1.0.22
-      '@volar/vue-typescript': 1.0.16
+      '@volar/vue-typescript': 1.0.22
       typescript: 4.9.4
     dev: true