From d4e0d5c5f5242f5ac541d1ce47316c7d15fa2a4c Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Sun, 30 Apr 2023 17:49:33 +0200
Subject: [PATCH] feat: better messages for no favourites and bookmarks (#2031)

---
 components/common/CommonPaginator.vue      | 8 ++++----
 components/list/Lists.vue                  | 2 +-
 components/timeline/TimelineBookmarks.vue  | 2 +-
 components/timeline/TimelineFavourites.vue | 2 +-
 components/timeline/TimelinePaginator.vue  | 5 +++--
 locales/en.json                            | 2 ++
 6 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/components/common/CommonPaginator.vue b/components/common/CommonPaginator.vue
index ee51666d..f945db90 100644
--- a/components/common/CommonPaginator.vue
+++ b/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>
diff --git a/components/list/Lists.vue b/components/list/Lists.vue
index d5d3657f..c39eed26 100644
--- a/components/list/Lists.vue
+++ b/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>
diff --git a/components/timeline/TimelineBookmarks.vue b/components/timeline/TimelineBookmarks.vue
index 77082de2..cdab6a35 100644
--- a/components/timeline/TimelineBookmarks.vue
+++ b/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>
diff --git a/components/timeline/TimelineFavourites.vue b/components/timeline/TimelineFavourites.vue
index 3a85a52b..346b8c8b 100644
--- a/components/timeline/TimelineFavourites.vue
+++ b/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>
diff --git a/components/timeline/TimelinePaginator.vue b/components/timeline/TimelinePaginator.vue
index 7a1c0a16..9d049165 100644
--- a/components/timeline/TimelinePaginator.vue
+++ b/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) } }) }}
diff --git a/locales/en.json b/locales/en.json
index b7eebcc2..585882aa 100644
--- a/locales/en.json
+++ b/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."
   },