feat: add skip to the category page setting for home and bookmark pages

app/components/SettingsModal/SettingsModal.tsx

@@ -1,9 +1,32 @@
 "use client";
 
 import { usePreferencesStore } from "#/store/preferences";
-import { Modal, Button, useThemeMode, ToggleSwitch, HR } from "flowbite-react";
+import {
+  Modal,
+  Button,
+  useThemeMode,
+  ToggleSwitch,
+  HR,
+  Dropdown,
+} from "flowbite-react";
 import Link from "next/link";
 
+const HomeCategory = {
+  last: "Последние релизы",
+  finished: "Завершенные релизы",
+  ongoing: "Выходит",
+  announce: "Анонсированные релизы",
+  films: "Фильмы",
+};
+
+const BookmarksCategory = {
+  watching: "Смотрю",
+  planned: "В планах",
+  watched: "Просмотрено",
+  delayed: "Отложено",
+  abandoned: "Заброшено",
+};
+
 export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
   const preferenceStore = usePreferencesStore();
 
@@ -58,6 +81,87 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
               checked={preferenceStore.flags.showChangelog}
             />
           </div>
+          <div className="flex items-center justify-between">
+            <p className="font-bold dark:text-white max-w-96">
+              Пропускать страницу выбора категорий на страницах Домашняя и
+              Закладки
+            </p>
+            <ToggleSwitch
+              color="blue"
+              theme={{
+                toggle: {
+                  checked: {
+                    color: {
+                      blue: "border-blue-700 bg-blue-700",
+                    },
+                  },
+                },
+              }}
+              onChange={() =>
+                preferenceStore.setParams({
+                  skipToCategory: {
+                    ...preferenceStore.params.skipToCategory,
+                    enabled: !preferenceStore.params.skipToCategory.enabled,
+                  },
+                })
+              }
+              checked={preferenceStore.params.skipToCategory.enabled}
+            />
+          </div>
+          {preferenceStore.params.skipToCategory.enabled ? (
+            <>
+              <div className="flex items-center justify-between">
+                <p className="font-bold dark:text-white max-w-96">
+                  Категория домашней страницы
+                </p>
+                <Dropdown color="blue" label={HomeCategory[preferenceStore.params.skipToCategory.homeCategory]}>
+                  {Object.keys(HomeCategory).map((key) => {
+                    return (
+                      <Dropdown.Item
+                        key={key}
+                        onClick={() =>
+                          preferenceStore.setParams({
+                            skipToCategory: {
+                              ...preferenceStore.params.skipToCategory,
+                              homeCategory: key,
+                            },
+                          })
+                        }
+                      >
+                        {HomeCategory[key]}
+                      </Dropdown.Item>
+                    );
+                  })}
+                </Dropdown>
+              </div>
+              <div className="flex items-center justify-between">
+                <p className="font-bold dark:text-white max-w-96">
+                  Категория страницы закладок
+                </p>
+                <Dropdown color="blue" label={BookmarksCategory[preferenceStore.params.skipToCategory.bookmarksCategory]}>
+                  {Object.keys(BookmarksCategory).map((key) => {
+                    return (
+                      <Dropdown.Item
+                        key={key}
+                        onClick={() =>
+                          preferenceStore.setParams({
+                            skipToCategory: {
+                              ...preferenceStore.params.skipToCategory,
+                              bookmarksCategory: key,
+                            },
+                          })
+                        }
+                      >
+                        {BookmarksCategory[key]}
+                      </Dropdown.Item>
+                    );
+                  })}
+                </Dropdown>
+              </div>
+            </>
+          ) : (
+            ""
+          )}
           <div className="flex items-center justify-between">
             <div>
               <p className="font-bold dark:text-white">Отправка аналитики</p>
@@ -87,18 +191,28 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
         </div>
         <HR className="my-4 dark:bg-slate-400" />
         <div>
-          <Link href={"https://t.me/anix_web"} className="flex items-center gap-2 p-2 text-left rounded-md hover:bg-gray-100 dark:hover:bg-gray-900">
+          <Link
+            href={"https://t.me/anix_web"}
+            className="flex items-center gap-2 p-2 text-left rounded-md hover:bg-gray-100 dark:hover:bg-gray-900"
+          >
             <span className="w-8 h-8 iconify fa6-brands--telegram"></span>
             <div>
               <p>Телеграм канал</p>
-              <p className="text-sm text-gray-400 dark:text-gray-200">@anix_web</p>
+              <p className="text-sm text-gray-400 dark:text-gray-200">
+                @anix_web
+              </p>
             </div>
           </Link>
-          <Link href={"https://wah.su/radiquum"} className="flex items-center gap-2 p-2 text-left rounded-md hover:bg-gray-100 dark:hover:bg-gray-900">
+          <Link
+            href={"https://wah.su/radiquum"}
+            className="flex items-center gap-2 p-2 text-left rounded-md hover:bg-gray-100 dark:hover:bg-gray-900"
+          >
             <span className="w-8 h-8 iconify mdi--code"></span>
             <div>
               <p>Разработчик</p>
-              <p className="text-sm text-gray-400 dark:text-gray-200">Radiquum</p>
+              <p className="text-sm text-gray-400 dark:text-gray-200">
+                Radiquum
+              </p>
             </div>
           </Link>
         </div>

app/pages/Bookmarks.tsx

@@ -5,6 +5,7 @@ import { Spinner } from "#/components/Spinner/Spinner";
 const fetcher = (...args: any) =>
   fetch([...args] as any).then((res) => res.json());
 import { useUserStore } from "#/store/auth";
+import { usePreferencesStore } from "#/store/preferences";
 import { BookmarksList } from "#/api/utils";
 import { ENDPOINTS } from "#/api/config";
 import { useRouter } from "next/navigation";
@@ -14,31 +15,42 @@ export function BookmarksPage(props: { profile_id?: number }) {
   const token = useUserStore((state) => state.token);
   const authState = useUserStore((state) => state.state);
   const router = useRouter();
+  const preferenceStore = usePreferencesStore();
+
+  useEffect(() => {
+    if (preferenceStore.params.skipToCategory.enabled) {
+      if (props.profile_id) {
+        router.push(
+          `/profile/${props.profile_id}/bookmarks/${preferenceStore.params.skipToCategory.bookmarksCategory}`
+        );
+      } else {
+        router.push(
+          `/bookmarks/${preferenceStore.params.skipToCategory.bookmarksCategory}`
+        );
+      }
+    }
+  }, []);
 
   function useFetchReleases(listName: string) {
     let url: string;
+    if (!preferenceStore.params.skipToCategory.enabled) {
+      if (props.profile_id) {
+        url = `${ENDPOINTS.user.bookmark}/all/${props.profile_id}/${BookmarksList[listName]}/0?sort=1`;
+        if (token) {
+          url += `&token=${token}`;
+        }
+      } else {
+        if (token) {
+          url = `${ENDPOINTS.user.bookmark}/all/${BookmarksList[listName]}/0?sort=1&token=${token}`;
+        }
+      }
 
-    if (props.profile_id) {
+      const { data } = useSWR(url, fetcher);
-      url = `${ENDPOINTS.user.bookmark}/all/${props.profile_id}/${BookmarksList[listName]}/0?sort=1`;
+      return [data];
-      if (token) {
-        url += `&token=${token}`;
-      }
-    } else {
-      if (token) {
-        url = `${ENDPOINTS.user.bookmark}/all/${BookmarksList[listName]}/0?sort=1&token=${token}`;
-      }
     }
-
+    return [null];
-    const { data } = useSWR(url, fetcher);
-    return [data];
   }
 
-  const [watchingData] = useFetchReleases("watching");
-  const [plannedData] = useFetchReleases("planned");
-  const [watchedData] = useFetchReleases("watched");
-  const [delayedData] = useFetchReleases("delayed");
-  const [abandonedData] = useFetchReleases("abandoned");
-
   useEffect(() => {
     if (authState === "finished" && !token && !props.profile_id) {
       router.push("/login?redirect=/bookmarks");
@@ -46,6 +58,12 @@ export function BookmarksPage(props: { profile_id?: number }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [authState, token]);
 
+  const [watchingData] = useFetchReleases("watching");
+  const [plannedData] = useFetchReleases("planned");
+  const [watchedData] = useFetchReleases("watched");
+  const [delayedData] = useFetchReleases("delayed");
+  const [abandonedData] = useFetchReleases("abandoned");
+
   return (
     <>
       {authState === "loading" &&

app/pages/BookmarksCategory.tsx

@@ -144,11 +144,11 @@ export function BookmarksCategoryPage(props: any) {
       </form>
       <div className="m-4 overflow-auto">
         <Button.Group>
-          <Button className="whitespace-nowrap" disabled={props.slug == "watching"} color="light" onClick={() => router.push("/bookmarks/watching")}>{props.SectionTitleMapping["watching"]}</Button>
+          <Button className="whitespace-nowrap" disabled={props.slug == "watching"} color="light" onClick={() => router.push(props.profile_id ? `/profile/${props.profile_id}/bookmarks/watching` : "/bookmarks/watching")}>{props.SectionTitleMapping["watching"]}</Button>
-          <Button className="whitespace-nowrap" disabled={props.slug == "planned"} color="light" onClick={() => router.push("/bookmarks/planned")}>{props.SectionTitleMapping["planned"]}</Button>
+          <Button className="whitespace-nowrap" disabled={props.slug == "planned"} color="light" onClick={() => router.push(props.profile_id ? `/profile/${props.profile_id}/bookmarks/planned` : "/bookmarks/planned")}>{props.SectionTitleMapping["planned"]}</Button>
-          <Button className="whitespace-nowrap" disabled={props.slug == "watched"} color="light" onClick={() => router.push("/bookmarks/watched")}>{props.SectionTitleMapping["watched"]}</Button>
+          <Button className="whitespace-nowrap" disabled={props.slug == "watched"} color="light" onClick={() => router.push(props.profile_id ? `/profile/${props.profile_id}/bookmarks/watched` : "/bookmarks/watched")}>{props.SectionTitleMapping["watched"]}</Button>
-          <Button className="whitespace-nowrap" disabled={props.slug == "delayed"} color="light" onClick={() => router.push("/bookmarks/delayed")}>{props.SectionTitleMapping["delayed"]}</Button>
+          <Button className="whitespace-nowrap" disabled={props.slug == "delayed"} color="light" onClick={() => router.push(props.profile_id ? `/profile/${props.profile_id}/bookmarks/delayed` : "/bookmarks/delayed")}>{props.SectionTitleMapping["delayed"]}</Button>
-          <Button className="whitespace-nowrap" disabled={props.slug == "abandoned"} color="light" onClick={() => router.push("/bookmarks/abandoned")}>{props.SectionTitleMapping["abandoned"]}</Button>
+          <Button className="whitespace-nowrap" disabled={props.slug == "abandoned"} color="light" onClick={() => router.push(props.profile_id ? `/profile/${props.profile_id}/bookmarks/abandoned` : "/bookmarks/abandoned")}>{props.SectionTitleMapping["abandoned"]}</Button>
         </Button.Group>
       </div>
       <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black dark:border-white">

app/pages/Index.tsx

@@ -5,8 +5,13 @@ import { useUserStore } from "#/store/auth";
 import { useState, useEffect } from "react";
 import { _FetchHomePageReleases } from "#/api/utils";
 
+import { usePreferencesStore } from "#/store/preferences";
+import { useRouter } from "next/navigation";
+
 export function IndexPage() {
   const token = useUserStore((state) => state.token);
+  const preferenceStore = usePreferencesStore();
+  const router = useRouter()
   const [isLoading, setIsLoading] = useState(true);
   const [lastReleasesData, setLastReleasesData] = useState(null);
   const [ongoingReleasesData, setOngoingReleasesData] = useState(null);
@@ -14,6 +19,12 @@ export function IndexPage() {
   const [announceReleasesData, setAnnounceReleasesData] = useState(null);
   const [filmsReleasesData, setFilmsReleasesData] = useState(null);
 
+  useEffect(() => {
+    if (preferenceStore.params.skipToCategory.enabled) {
+      router.push(`/home/${preferenceStore.params.skipToCategory.homeCategory}`);
+    }
+  }, []);
+
   useEffect(() => {
     async function _loadReleases() {
       setIsLoading(true);
@@ -36,7 +47,9 @@ export function IndexPage() {
       setFilmsReleasesData(filmsReleases);
       setIsLoading(false);
     }
-    _loadReleases();
+    if (!preferenceStore.params.skipToCategory.enabled) {
+      _loadReleases();
+    }
   }, [token]);
 
   return (

app/store/preferences.ts

@@ -14,6 +14,11 @@ interface preferencesState {
   params: {
     isFirstLaunch?: boolean;
     version?: string;
+    skipToCategory?: {
+      enabled: boolean;
+      homeCategory: string;
+      bookmarksCategory: string;
+    }
     // color: {
     //   primary: string;
     //   secondary: string;
@@ -38,6 +43,11 @@ export const usePreferencesStore = create<preferencesState>()(
       params: {
         isFirstLaunch: true,
         version: "3.0.0",
+        skipToCategory: {
+          enabled: false,
+          homeCategory: "last",
+          bookmarksCategory: "watching",
+        }
       },
       setHasHydrated: (state) => {
         set({