Add a discover button if there is nothing watched or bookmarked

pnpm-lock.yaml

@@ -2813,7 +2813,7 @@ packages:
       postcss: '>=8.4.31'
     dependencies:
       browserslist: 4.23.0
-      caniuse-lite: 1.0.30001613
+      caniuse-lite: 1.0.30001614
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.0.0
@@ -2917,7 +2917,7 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001613
+      caniuse-lite: 1.0.30001614
       electron-to-chromium: 1.4.750
       node-releases: 2.0.14
       update-browserslist-db: 1.0.13(browserslist@4.23.0)
@@ -2957,8 +2957,8 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
-  /caniuse-lite@1.0.30001613:
-    resolution: {integrity: sha512-BNjJULJfOONQERivfxte7alLfeLW4QnwHvNW4wEcLEbXfV6VSCYvr+REbf2Sojv8tC1THpjPXBxWgDbq4NtLWg==}
+  /caniuse-lite@1.0.30001614:
+    resolution: {integrity: sha512-jmZQ1VpmlRwHgdP1/uiKzgiAuGOfLEJsYFP4+GBou/QQ4U6IOJCB4NP1c+1p9RGLpwObcT94jA5/uO+F1vBbog==}
 
   /chai@4.4.1:
     resolution: {integrity: sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==}
@@ -4988,8 +4988,8 @@ packages:
       get-func-name: 2.0.2
     dev: true
 
-  /lru-cache@10.2.1:
-    resolution: {integrity: sha512-tS24spDe/zXhWbNPErCHs/AGOzbKGHT+ybSBqmdLm8WZ1xXLWvH8Qn71QPAlqVhd0qUTWjy+Kl9JmISgDdEjsA==}
+  /lru-cache@10.2.2:
+    resolution: {integrity: sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==}
     engines: {node: 14 || >=16.14}
     dev: true
 
@@ -5414,7 +5414,7 @@ packages:
     resolution: {integrity: sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==}
     engines: {node: '>=16 || 14 >=14.17'}
     dependencies:
-      lru-cache: 10.2.1
+      lru-cache: 10.2.2
       minipass: 7.0.4
     dev: true
 

src/assets/locales/en.json

@@ -147,7 +147,18 @@
           ">ᴗ<"
         ]
       },
-      "sectionTitle": "Search results"
+      "empty": {
+        "default": "Welcome, find media to watch here!",
+        "extra": [
+          "There's nothing here :(",
+          "So empty...",
+          "Such emptiness.",
+          "Hi new user :3"
+        ]
+      },
+      "sectionTitle": "Search results",
+      "discoverMore": "Discover more",
+      "discover": "Discover"
     },
     "titles": {
       "day": {

src/pages/HomePage.tsx

@@ -1,10 +1,13 @@
 import { useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
 
 import { WideContainer } from "@/components/layout/WideContainer";
 import { useDebounce } from "@/hooks/useDebounce";
+import { useRandomTranslation } from "@/hooks/useRandomTranslation";
 import { useSearchQuery } from "@/hooks/useSearchQuery";
+import { Button } from "@/pages/About";
 import { HomeLayout } from "@/pages/layouts/HomeLayout";
 import { BookmarksPart } from "@/pages/parts/home/BookmarksPart";
 import { HeroPart } from "@/pages/parts/home/HeroPart";
@@ -33,10 +36,15 @@ function useSearch(search: string) {
 
 export function HomePage() {
   const { t } = useTranslation();
+  const { t: randomT } = useRandomTranslation();
+  const emptyText = randomT(`home.search.empty`);
+  const navigate = useNavigate();
   const [showBg, setShowBg] = useState<boolean>(false);
   const searchParams = useSearchQuery();
   const [search] = searchParams;
   const s = useSearch(search);
+  const [showBookmarks, setShowBookmarks] = useState(false);
+  const [showWatching, setShowWatching] = useState(false);
 
   return (
     <HomeLayout showBg={showBg}>
@@ -58,8 +66,19 @@ export function HomePage() {
           <SearchListPart searchQuery={search} />
         ) : (
           <>
-            <BookmarksPart />
-            <WatchingPart />
+            <BookmarksPart onItemsChange={setShowBookmarks} />
+            <WatchingPart onItemsChange={setShowWatching} />
+            {!(showBookmarks || showWatching) ? (
+              <div className="flex flex-col items-center justify-center">
+                <p className="text-[18.5px] pb-3">{emptyText}</p>
+                <Button
+                  className="px-py p-[0.35em] mt-3 rounded-xl text-type-dimmed box-content text-[18px] bg-largeCard-background text-buttons-secondaryText justify-center items-center"
+                  onClick={() => navigate("/discover")}
+                >
+                  {t("home.search.discover")}
+                </Button>
+              </div>
+            ) : null}
           </>
         )}
       </WideContainer>

src/pages/parts/home/BookmarksPart.tsx

@@ -1,5 +1,5 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { EditButton } from "@/components/buttons/EditButton";
@@ -11,7 +11,11 @@ import { useBookmarkStore } from "@/stores/bookmarks";
 import { useProgressStore } from "@/stores/progress";
 import { MediaItem } from "@/utils/mediaTypes";
 
-export function BookmarksPart() {
+export function BookmarksPart({
+  onItemsChange,
+}: {
+  onItemsChange: (hasItems: boolean) => void;
+}) {
   const { t } = useTranslation();
   const progressItems = useProgressStore((s) => s.items);
   const bookmarks = useBookmarkStore((s) => s.bookmarks);
@@ -41,6 +45,10 @@ export function BookmarksPart() {
     return output;
   }, [bookmarks, progressItems]);
 
+  useEffect(() => {
+    onItemsChange(items.length > 0);
+  }, [items, onItemsChange]);
+
   if (items.length === 0) return null;
 
   return (

src/pages/parts/home/WatchingPart.tsx

@@ -1,5 +1,5 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { EditButton } from "@/components/buttons/EditButton";
@@ -12,7 +12,11 @@ import { useProgressStore } from "@/stores/progress";
 import { shouldShowProgress } from "@/stores/progress/utils";
 import { MediaItem } from "@/utils/mediaTypes";
 
-export function WatchingPart() {
+export function WatchingPart({
+  onItemsChange,
+}: {
+  onItemsChange: (hasItems: boolean) => void;
+}) {
   const { t } = useTranslation();
   const bookmarks = useBookmarkStore((s) => s.bookmarks);
   const progressItems = useProgressStore((s) => s.items);
@@ -39,6 +43,10 @@ export function WatchingPart() {
     return output;
   }, [progressItems, bookmarks]);
 
+  useEffect(() => {
+    onItemsChange(sortedProgressItems.length > 0);
+  }, [sortedProgressItems, onItemsChange]);
+
   if (sortedProgressItems.length === 0) return null;
 
   return (

src/pages/parts/search/SearchListPart.tsx

@@ -35,10 +35,10 @@ function SearchSuffix(props: { failed?: boolean; results?: number }) {
             <>
               <p>{t("home.search.allResults")}</p>
               <Button
-                className="px-py p-[0.3em] mt-3 text-type-dimmed box-content text-[17px] bg-largeCard-background text-buttons-secondaryText justify-center items-center"
+                className="px-py p-[0.3em] mt-3 rounded-xl text-type-dimmed box-content text-[17px] bg-largeCard-background text-buttons-secondaryText justify-center items-center"
                 onClick={() => navigate("/discover")}
               >
-                Discover more
+                {t("home.search.discoverMore")}
               </Button>
             </>
           ) : (