fix: Better handling for when there's no highlights in the all highlights page

2 files changed, 14 insertions, 3 deletions

diff --git a/apps/web/components/dashboard/highlights/AllHighlights.tsx b/apps/web/components/dashboard/highlights/AllHighlights.tsx
index 27dda6ff..98e17e2b 100644
--- a/apps/web/components/dashboard/highlights/AllHighlights.tsx
+++ b/apps/web/components/dashboard/highlights/AllHighlights.tsx
@@ -47,6 +47,7 @@ export default function AllHighlights({
 }: {
   highlights: ZGetAllHighlightsResponse;
 }) {
+  const { t } = useTranslation();
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
     api.highlights.getAll.useInfiniteQuery(
       {},
@@ -67,11 +68,13 @@ export default function AllHighlights({
     }
   }, [loadMoreButtonInView]);
 
+  const allHighlights = data?.pages.flatMap((p) => p.highlights);
+
   return (
     <div className="flex flex-col gap-2">
-      {data?.pages
-        .flatMap((p) => p.highlights)
-        .map((h) => (
+      {allHighlights &&
+        allHighlights.length > 0 &&
+        allHighlights.map((h) => (
           <>
             <Highlight key={h.id} highlight={h} />
             <Separator
@@ -80,6 +83,11 @@ export default function AllHighlights({
             />
           </>
         ))}
+      {allHighlights && allHighlights.length == 0 && (
+        <p className="rounded-md bg-muted p-2 text-sm text-muted-foreground">
+          {t("highlights.no_highlights")}
+        </p>
+      )}
       {hasNextPage && (
         <div className="flex justify-center">
           <ActionButton
diff --git a/apps/web/lib/i18n/locales/en/translation.json b/apps/web/lib/i18n/locales/en/translation.json
index 2812df88..0236b1c3 100644
--- a/apps/web/lib/i18n/locales/en/translation.json
+++ b/apps/web/lib/i18n/locales/en/translation.json
@@ -65,6 +65,9 @@
     "apply_all": "Apply All",
     "ignore": "Ignore"
   },
+  "highlights": {
+    "no_highlights": "You don't have any highlights yet."
+  },
   "settings": {
     "back_to_app": "Back To App",
     "user_settings": "User Settings",