add toggle for discover section on homepage

src/assets/locales/en.json

@@ -622,7 +622,10 @@
       "autoplayLabel": "Autoplay",
       "sourceOrder": "Reordering sources",
       "sourceOrderDescription": "Drag and drop to reorder sources. This will determine the order in which sources are checked for the media you are trying to watch. If a source is greyed out, it means the <bold>extension</bold> is required for that source.",
-      "title": "Preferences"
+      "title": "Preferences",
+      "discover": "Discover section",
+      "discoverDescription": "Show the Discover section on the Homepage below your bookmarked media. Enabling this can increase load times. This setting is enabled by default.",
+      "discoverLabel": "Discover section"
     },
     "reset": "Reset",
     "save": "Save",

src/hooks/useSettingsState.ts

@@ -52,6 +52,7 @@ export function useSettingsState(
     | undefined,
   enableThumbnails: boolean,
   enableAutoplay: boolean,
+  enableDiscover: boolean,
   sourceOrder: string[],
 ) {
   const [proxyUrlsState, setProxyUrls, resetProxyUrls, proxyUrlsChanged] =
@@ -92,6 +93,12 @@ export function useSettingsState(
     resetEnableAutoplay,
     enableAutoplayChanged,
   ] = useDerived(enableAutoplay);
+  const [
+    enableDiscoverState,
+    setEnableDiscoverState,
+    resetEnableDiscover,
+    enableDiscoverChanged,
+  ] = useDerived(enableDiscover);
   const [
     sourceOrderState,
     setSourceOrderState,
@@ -110,6 +117,7 @@ export function useSettingsState(
     resetProfile();
     resetEnableThumbnails();
     resetEnableAutoplay();
+    resetEnableDiscover();
     resetSourceOrder();
   }
 
@@ -123,6 +131,7 @@ export function useSettingsState(
     profileChanged ||
     enableThumbnailsChanged ||
     enableAutoplayChanged ||
+    enableDiscoverChanged ||
     sourceOrderChanged;
 
   return {
@@ -173,6 +182,11 @@ export function useSettingsState(
       set: setEnableAutoplayState,
       changed: enableAutoplayChanged,
     },
+    enableDiscover: {
+      state: enableDiscoverState,
+      set: setEnableDiscoverState,
+      changed: enableDiscoverChanged,
+    },
     sourceOrder: {
       state: sourceOrderState,
       set: setSourceOrderState,

src/pages/HomePage.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
+import { To, useNavigate } from "react-router-dom";
 
 import { Icons } from "@/components/Icon";
 import { IconPill } from "@/components/layout/IconPill";
@@ -16,8 +17,10 @@ import { HeroPart } from "@/pages/parts/home/HeroPart";
 import { WatchingPart } from "@/pages/parts/home/WatchingPart";
 import { SearchListPart } from "@/pages/parts/search/SearchListPart";
 import { SearchLoadingPart } from "@/pages/parts/search/SearchLoadingPart";
+import { usePreferencesStore } from "@/stores/preferences";
 import DiscoverContent from "@/utils/discoverContent";
 
+import { Button } from "./About";
 import { PopupModal } from "./parts/home/PopupModal";
 
 function useSearch(search: string) {
@@ -45,6 +48,7 @@ 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;
@@ -52,6 +56,13 @@ export function HomePage() {
   const [showBookmarks, setShowBookmarks] = useState(false);
   const [showWatching, setShowWatching] = useState(false);
 
+  const handleClick = (path: To) => {
+    window.scrollTo(0, 0);
+    navigate(path);
+  };
+
+  const enableDiscover = usePreferencesStore((state) => state.enableDiscover);
+
   // State to track whether content is loading or loaded
   const [loading, setLoading] = useState(true);
 
@@ -234,19 +245,32 @@ export function HomePage() {
         ) : null}
       </WideContainer>
       {/* Conditional rendering: show loading screen or the content */}
-      {loading ? (
-        <div className="flex flex-col justify-center items-center h-64 space-y-4">
-          <Loading />
-          <p className="text-lg font-medium text-gray-400 animate-pulse mt-4">
-            Fetching the latest movies & TV shows...
-          </p>
-          <p className="text-sm text-gray-500">
-            Please wait while we load the best recommendations for you.
-          </p>
-        </div>
+      {enableDiscover ? (
+        loading ? (
+          <div className="flex flex-col justify-center items-center h-64 space-y-4">
+            <Loading />
+            <p className="text-lg font-medium text-gray-400 animate-pulse mt-4">
+              Fetching the latest movies & TV shows...
+            </p>
+            <p className="text-sm text-gray-500">
+              Please wait while we load the best recommendations for you.
+            </p>
+          </div>
+        ) : (
+          <div className="pt-10 px-0 w-full max-w-[100dvw] justify-center items-center">
+            <DiscoverContent />
+          </div>
+        )
       ) : (
-        <div className="pt-10 px-0 w-full max-w-[100dvw] justify-center items-center">
-          <DiscoverContent />
+        <div className="flex flex-col justify-center items-center h-40 space-y-4">
+          <div className="flex flex-col items-center justify-center">
+            <Button
+              className="px-py p-[0.35em] mt-3 rounded-xl text-type-dimmed box-content text-[18px] bg-largeCard-background justify-center items-center"
+              onClick={() => handleClick("/discover")}
+            >
+              {t("home.search.discover")}
+            </Button>
+          </div>
         </div>
       )}
     </HomeLayout>

src/pages/Settings.tsx

@@ -140,6 +140,9 @@ export function SettingsPage() {
   const sourceOrder = usePreferencesStore((s) => s.sourceOrder);
   const setSourceOrder = usePreferencesStore((s) => s.setSourceOrder);
 
+  const enableDiscover = usePreferencesStore((s) => s.enableDiscover);
+  const setEnableDiscover = usePreferencesStore((s) => s.setEnableDiscover);
+
   const account = useAuthStore((s) => s.account);
   const updateProfile = useAuthStore((s) => s.setAccountProfile);
   const updateDeviceName = useAuthStore((s) => s.updateDeviceName);
@@ -163,6 +166,7 @@ export function SettingsPage() {
     account?.profile,
     enableThumbnails,
     enableAutoplay,
+    enableDiscover,
     sourceOrder,
   );
 
@@ -233,6 +237,7 @@ export function SettingsPage() {
 
     setEnableThumbnails(state.enableThumbnails.state);
     setEnableAutoplay(state.enableAutoplay.state);
+    setEnableDiscover(state.enableDiscover.state);
     setSourceOrder(state.sourceOrder.state);
     setAppLanguage(state.appLanguage.state);
     setTheme(state.theme.state);
@@ -260,6 +265,7 @@ export function SettingsPage() {
     setEnableThumbnails,
     state,
     setEnableAutoplay,
+    setEnableDiscover,
     setSourceOrder,
     setAppLanguage,
     setTheme,
@@ -311,6 +317,8 @@ export function SettingsPage() {
             setEnableThumbnails={state.enableThumbnails.set}
             enableAutoplay={state.enableAutoplay.state}
             setEnableAutoplay={state.enableAutoplay.set}
+            enableDiscover={state.enableDiscover.state}
+            setEnableDiscover={state.enableDiscover.set}
             sourceOrder={availableSources}
             setSourceOrder={state.sourceOrder.set}
           />

src/pages/parts/settings/PreferencesPart.tsx

@@ -23,6 +23,8 @@ export function PreferencesPart(props: {
   setEnableAutoplay: (v: boolean) => void;
   sourceOrder: string[];
   setSourceOrder: (v: string[]) => void;
+  enableDiscover: boolean;
+  setEnableDiscover: (v: boolean) => void;
 }) {
   const { t } = useTranslation();
   const sorted = sortLangCodes(appLanguageOptions.map((item) => item.code));
@@ -121,6 +123,25 @@ export function PreferencesPart(props: {
               </p>
             </div>
           </div>
+
+          {/* Show Discover Preference */}
+          <div>
+            <p className="text-white font-bold mb-3">
+              {t("settings.preferences.discover")}
+            </p>
+            <p className="max-w-[25rem] font-medium">
+              {t("settings.preferences.discoverDescription")}
+            </p>
+            <div
+              onClick={() => props.setEnableDiscover(!props.enableDiscover)}
+              className="bg-dropdown-background hover:bg-dropdown-hoverBackground select-none my-4 cursor-pointer space-x-3 flex items-center max-w-[25rem] py-3 px-4 rounded-lg"
+            >
+              <Toggle enabled={props.enableDiscover} />
+              <p className="flex-1 text-white font-bold">
+                {t("settings.preferences.discoverLabel")}
+              </p>
+            </div>
+          </div>
         </div>
 
         {/* Column */}

src/stores/preferences/index.tsx

@@ -5,10 +5,12 @@ import { immer } from "zustand/middleware/immer";
 export interface PreferencesStore {
   enableThumbnails: boolean;
   enableAutoplay: boolean;
+  enableDiscover: boolean;
   sourceOrder: string[];
 
   setEnableThumbnails(v: boolean): void;
   setEnableAutoplay(v: boolean): void;
+  setEnableDiscover(v: boolean): void;
   setSourceOrder(v: string[]): void;
 }
 
@@ -17,6 +19,7 @@ export const usePreferencesStore = create(
     immer<PreferencesStore>((set) => ({
       enableThumbnails: false,
       enableAutoplay: true,
+      enableDiscover: true,
       sourceOrder: [],
       setEnableThumbnails(v) {
         set((s) => {
@@ -28,6 +31,11 @@ export const usePreferencesStore = create(
           s.enableAutoplay = v;
         });
       },
+      setEnableDiscover(v) {
+        set((s) => {
+          s.enableDiscover = v;
+        });
+      },
       setSourceOrder(v) {
         set((s) => {
           s.sourceOrder = v;