feat: better messages for no favourites and bookmarks (#2031)

components/common/CommonPaginator.vue

@@ -11,7 +11,7 @@ const {
   virtualScroller = false,
   eventType = 'update',
   preprocess,
-  noEndMessage = false,
+  endMessage = true,
 } = defineProps<{
   paginator: Paginator<T[], O>
   keyProp?: keyof T
@@ -19,7 +19,7 @@ const {
   stream?: Promise<WsEvents>
   eventType?: 'notification' | 'update'
   preprocess?: (items: (U | T)[]) => U[]
-  noEndMessage?: boolean
+  endMessage?: boolean | string
 }>()
 
 defineSlots<{
@@ -109,9 +109,9 @@ defineExpose({ createEntry, removeEntry, updateEntry })
     <slot v-if="state === 'loading'" name="loading">
       <TimelineSkeleton />
     </slot>
-    <slot v-else-if="state === 'done' && !noEndMessage" name="done">
+    <slot v-else-if="state === 'done' && endMessage !== false" name="done">
       <div p5 text-secondary italic text-center>
-        {{ t('common.end_of_list') }}
+        {{ t(typeof endMessage === 'string' ? endMessage : 'common.end_of_list') }}
       </div>
     </slot>
     <div v-else-if="state === 'error'" p5 text-secondary>

components/list/Lists.vue

@@ -30,7 +30,7 @@ async function edit(listId: string) {
 </script>
 
 <template>
-  <CommonPaginator no-end-message :paginator="paginator">
+  <CommonPaginator :end-message="false" :paginator="paginator">
     <template #default="{ item }">
       <div p4 hover:bg-active block w="100%" flex justify-between items-center gap-4>
         <p>{{ item.title }}</p>

components/timeline/TimelineBookmarks.vue

@@ -3,5 +3,5 @@ const paginator = useMastoClient().v1.bookmarks.list()
 </script>
 
 <template>
-  <TimelinePaginator :paginator="paginator" />
+  <TimelinePaginator end-message="common.no_bookmarks" :paginator="paginator" />
 </template>

components/timeline/TimelineFavourites.vue

@@ -3,5 +3,5 @@ const paginator = useMastoClient().v1.favourites.list()
 </script>
 
 <template>
-  <TimelinePaginator :paginator="paginator" />
+  <TimelinePaginator end-message="common.no_favourites" :paginator="paginator" />
 </template>

components/timeline/TimelinePaginator.vue

@@ -4,13 +4,14 @@ import { DynamicScrollerItem } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import type { Paginator, WsEvents, mastodon } from 'masto'
 
-const { paginator, stream, account, buffer = 10 } = defineProps<{
+const { paginator, stream, account, buffer = 10, endMessage } = defineProps<{
   paginator: Paginator<mastodon.v1.Status[], mastodon.v1.ListAccountStatusesParams>
   stream?: Promise<WsEvents>
   context?: mastodon.v2.FilterContext
   account?: mastodon.v1.Account
   preprocess?: (items: mastodon.v1.Status[]) => mastodon.v1.Status[]
   buffer?: number
+  endMessage?: boolean | string
 }>()
 
 const { formatNumber } = useHumanReadableNumber()
@@ -22,7 +23,7 @@ const showOriginSite = $computed(() =>
 </script>
 
 <template>
-  <CommonPaginator v-bind="{ paginator, stream, preprocess, buffer }" :virtual-scroller="virtualScroller">
+  <CommonPaginator v-bind="{ paginator, stream, preprocess, buffer, endMessage }" :virtual-scroller="virtualScroller">
     <template #updater="{ number, update }">
       <button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="update">
         {{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }}

locales/en.json

@@ -98,6 +98,8 @@
     "error": "ERROR",
     "fetching": "Fetching...",
     "in": "in",
+    "no_bookmarks": "No bookmarked posts yet",
+    "no_favourites": "No liked posts yet",
     "not_found": "404 Not Found",
     "offline_desc": "Seems like you are offline. Please check your network connection."
   },