From 11c152de293e68e278e63d13aa8c9595e4ba7aa0 Mon Sep 17 00:00:00 2001
From: P-man2976 <ikmy1119924@gmail.com>
Date: Thu, 26 Oct 2023 17:23:30 +0900
Subject: [PATCH] Settings page 5/5 (there is still something to do)

---
 .../src/components/topic/TopicPicker.tsx      |  87 ++++++++++
 packages/react/src/locales/en/ui.yml          |  14 +-
 packages/react/src/routes/router.tsx          |  10 ++
 .../react/src/routes/settings/blocked.tsx     |   8 +
 .../react/src/routes/settings/homepage.tsx    | 160 ++++++++++++++++++
 packages/react/src/routes/settings/lang.tsx   |   4 +-
 packages/react/src/services/search.service.ts |   2 +-
 packages/react/src/store/settings.ts          |   2 +-
 packages/react/src/types/search.d.ts          |   7 +
 9 files changed, 287 insertions(+), 7 deletions(-)
 create mode 100644 packages/react/src/components/topic/TopicPicker.tsx
 create mode 100644 packages/react/src/routes/settings/blocked.tsx
 create mode 100644 packages/react/src/routes/settings/homepage.tsx

diff --git a/packages/react/src/components/topic/TopicPicker.tsx b/packages/react/src/components/topic/TopicPicker.tsx
new file mode 100644
index 000000000..89a574ec1
--- /dev/null
+++ b/packages/react/src/components/topic/TopicPicker.tsx
@@ -0,0 +1,87 @@
+import { useState, useEffect } from "react";
+import { ChevronsUpDown } from "lucide-react";
+import { Button } from "@/shadcn/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/shadcn/ui/command";
+import { Popover, PopoverTrigger, PopoverContent } from "@/shadcn/ui/popover";
+import { useTranslation } from "react-i18next";
+import { useAtom, useAtomValue } from "jotai/react";
+import { useSearchAutoCompleteMutation } from "@/services/search.service";
+import atomWithDebounce from "@/lib/atomWithDebounce";
+
+const { debouncedValueAtom, currentValueAtom } = atomWithDebounce("", 300);
+
+interface TopicPickerProps {
+  onSelect: (topicId: string) => void;
+}
+
+export function TopicPicker({ onSelect }: TopicPickerProps) {
+  const [deboundcedValue, setDebouncedValue] = useAtom(debouncedValueAtom);
+  const currentValue = useAtomValue(currentValueAtom);
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+
+  const { data, isPending, mutate } = useSearchAutoCompleteMutation();
+
+  useEffect(() => {
+    mutate({
+      q: deboundcedValue,
+      t: "topic",
+      n: 10,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [deboundcedValue]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          size="lg"
+          aria-expanded={open}
+          className="w-full justify-between px-4"
+        >
+          {t("component.topicPicker.pickLabel")}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="max-w-[80vw] p-0">
+        <Command>
+          <CommandInput
+            value={currentValue}
+            onValueChange={setDebouncedValue}
+            placeholder={t("component.topicPicker.searchLabel")}
+          />
+          <CommandList>
+            <CommandEmpty>{t("component.topicPicker.notFound")}</CommandEmpty>
+            <CommandGroup>
+              {data?.topic?.map(({ id }) => (
+                <CommandItem
+                  key={id}
+                  onSelect={(topicId) => {
+                    onSelect(topicId);
+                    setOpen(false);
+                  }}
+                >
+                  {id}
+                </CommandItem>
+              ))}
+              {isPending && (
+                <CommandItem className="flex justify-center py-2" disabled>
+                  <div className="i-lucide:loader-2 animate-spin" />
+                </CommandItem>
+              )}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/packages/react/src/locales/en/ui.yml b/packages/react/src/locales/en/ui.yml
index a7980ca31..64a473121 100644
--- a/packages/react/src/locales/en/ui.yml
+++ b/packages/react/src/locales/en/ui.yml
@@ -212,6 +212,10 @@ component:
     pickDate: Pick a date...
   toast:
     copiedToClipboard: Copied to clipboard
+  topicPicker:
+    searchLabel: Search topics...
+    notFound: No topic found
+    pickLabel: Pick topics...
 views:
   channel:
     video: Videos
@@ -323,9 +327,9 @@ views:
     gridSizeLabel: Thumbnail/Grid Size
     gridSizeMsg: Change thumbnail/video grid size on Home/Favorites page
     gridSize:
-      - Large
-      - Medium
-      - Small
+      - Grid
+      - List
+      - Dense List
     hideCollabStreamsLabel: Hide Collab Streams
     hideCollabStreamsMsg: Hide collab streams from your favorites feed
     hidePlaceholderStreams: Hide Placeholder Streams
@@ -339,6 +343,10 @@ views:
     languageSearch: Search language...
     languageNotfound: No language found
     userNotLinked: Not linked
+    defaultHomepage:
+      lastVisitedOrgHome: Last Visited Org Home
+      favoritesWhenLoggedIn: Favorites (When Logged In)
+    hideFeaturesLabel: Hide Features
   app:
     update_available: An update is available
     update_btn: Update
diff --git a/packages/react/src/routes/router.tsx b/packages/react/src/routes/router.tsx
index 474167cee..3a975fca1 100644
--- a/packages/react/src/routes/router.tsx
+++ b/packages/react/src/routes/router.tsx
@@ -11,6 +11,8 @@ const Settings = React.lazy(() => import("./settings"));
 const SettingsLang = React.lazy(() => import("./settings/lang"));
 const SettingsTheme = React.lazy(() => import("./settings/theme"));
 const SettingsUser = React.lazy(() => import("./settings/user"));
+const SettingsHomepage = React.lazy(() => import("./settings/homepage"));
+const SettingsBlocked = React.lazy(() => import("./settings/blocked"));
 const About = React.lazy(() => import("./about"));
 const AboutGeneral = React.lazy(() => import("./about/general"));
 const AboutChangelog = React.lazy(() => import("./about/changelog"));
@@ -97,6 +99,14 @@ const router = createBrowserRouter([
             path: "user",
             element: <SettingsUser />,
           },
+          {
+            path: "homepage",
+            element: <SettingsHomepage />,
+          },
+          {
+            path: "blocked",
+            element: <SettingsBlocked />,
+          },
           // Add children routes similar to above pattern
         ],
       },
diff --git a/packages/react/src/routes/settings/blocked.tsx b/packages/react/src/routes/settings/blocked.tsx
new file mode 100644
index 000000000..c320ade9b
--- /dev/null
+++ b/packages/react/src/routes/settings/blocked.tsx
@@ -0,0 +1,8 @@
+import { blockedChannelsAtom } from "@/store/settings";
+import { useAtom } from "jotai";
+
+export default function SettingsBlocked() {
+  const [blockedChannels, setBlockedChannels] = useAtom(blockedChannelsAtom);
+
+  return <div className="flex flex-col gap-2"></div>;
+}
diff --git a/packages/react/src/routes/settings/homepage.tsx b/packages/react/src/routes/settings/homepage.tsx
new file mode 100644
index 000000000..ddd883d8a
--- /dev/null
+++ b/packages/react/src/routes/settings/homepage.tsx
@@ -0,0 +1,160 @@
+import { SettingsItem } from "@/components/settings/SettingsItem";
+import { TopicPicker } from "@/components/topic/TopicPicker";
+import { cn } from "@/lib/utils";
+import { Badge } from "@/shadcn/ui/badge";
+import { Label } from "@/shadcn/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/shadcn/ui/radio-group";
+import { Switch } from "@/shadcn/ui/switch";
+import {
+  defaultOpenAtom,
+  hideCollabStreamsAtom,
+  hidePlaceholderAtom,
+  hideThumbnailAtom,
+  homeViewModeAtom,
+  ignoredTopicsAtom,
+} from "@/store/settings";
+import { useAtom } from "jotai";
+import { useTranslation } from "react-i18next";
+
+export default function SettingsHomepage() {
+  const { t } = useTranslation();
+  const [defaultOpen, setDefaultOpen] = useAtom(defaultOpenAtom);
+  const [homeViewMode, setHomeViewMode] = useAtom(homeViewModeAtom);
+  const [ignoredTopics, setIgnoredTopics] = useAtom(ignoredTopicsAtom);
+  const [hideThumbnail, setHideThumbnail] = useAtom(hideThumbnailAtom);
+  const [hideCollab, setHideCollab] = useAtom(hideCollabStreamsAtom);
+  const [hidePlaceholder, setHidePlaceholder] = useAtom(hidePlaceholderAtom);
+
+  const defaultPages = [
+    {
+      value: "Home",
+      label: t("views.settings.defaultHomepage.lastVisitedOrgHome"),
+    },
+    {
+      value: "Favorites",
+      label: t("views.settings.defaultHomepage.favoritesWhenLoggedIn"),
+    },
+  ];
+
+  const gridSizes = [
+    {
+      value: "grid",
+      label: t("views.settings.gridSize.0"),
+    },
+    {
+      value: "list",
+      label: t("views.settings.gridSize.1"),
+    },
+    {
+      value: "denseList",
+      label: t("views.settings.gridSize.2"),
+    },
+  ];
+
+  const hideFeatures = [
+    {
+      label: t("views.settings.hideVideoThumbnailsLabel"),
+      value: hideThumbnail,
+      onChange: () => setHideThumbnail(!hideThumbnail),
+    },
+    {
+      label: t("views.settings.hideCollabStreamsLabel"),
+      value: hideCollab,
+      onChange: () => setHideCollab(!hideCollab),
+    },
+    {
+      label: t("views.settings.hidePlaceholderStreams"),
+      value: hidePlaceholder,
+      onChange: () => setHidePlaceholder(!hidePlaceholder),
+    },
+  ];
+
+  return (
+    <div className="flex flex-col p-2 md:p-4">
+      <SettingsItem label={t("views.settings.defaultPage")}>
+        <RadioGroup
+          className="flex w-full flex-col gap-0 rounded-lg border border-base"
+          value={defaultOpen}
+          onValueChange={(val: "Home" | "Favorites") => setDefaultOpen(val)}
+        >
+          {defaultPages.map(({ label, value }, index) => (
+            <Label
+              className={cn(
+                "flex w-full min-w-[18rem] items-center justify-between gap-4 p-4 hover:cursor-pointer",
+                { "bg-base-4": index % 2 },
+              )}
+            >
+              {label}
+              <RadioGroupItem value={value} />
+            </Label>
+          ))}
+        </RadioGroup>
+      </SettingsItem>
+      <SettingsItem label={t("views.settings.gridSizeLabel")}>
+        <RadioGroup
+          className="ml-auto flex gap-0 rounded-lg"
+          onValueChange={(val: "grid" | "list" | "denseList") =>
+            setHomeViewMode(val)
+          }
+        >
+          {gridSizes.map(({ label, value }) => (
+            <Label
+              className={cn(
+                "bg-base-4 border-base border-r-2 px-4 py-2 text-lg first:rounded-l-lg last:rounded-r-lg last:border-r-0 hover:cursor-pointer",
+                { "bg-secondary-9": value === homeViewMode },
+              )}
+            >
+              {label}
+              <RadioGroupItem value={value} className="sr-only" />
+            </Label>
+          ))}
+        </RadioGroup>
+      </SettingsItem>
+      <SettingsItem label={t("views.settings.ignoredTopicsLabel")}>
+        <div className="flex w-full flex-col gap-2">
+          <TopicPicker
+            onSelect={(topic) =>
+              setIgnoredTopics((currentTopics) => [...currentTopics, topic])
+            }
+          />
+          <div className="flex flex-wrap gap-2">
+            {ignoredTopics.map((topic) => (
+              <Badge
+                onClick={() =>
+                  setIgnoredTopics((currentTopics) =>
+                    currentTopics.filter((t) => t !== topic),
+                  )
+                }
+              >
+                {topic}
+                <div className="i-heroicons:x-mark ml-1" />
+              </Badge>
+            ))}
+          </div>
+        </div>
+      </SettingsItem>
+      <SettingsItem label={t("views.settings.hideFeaturesLabel")}>
+        <div className="flex w-full flex-col rounded-lg border border-base">
+          {hideFeatures.map(({ label, value, onChange }, index) => (
+            <Label
+              className={cn(
+                "flex min-w-[18rem] w-full justify-between items-center gap-4 px-4 py-4 hover:cursor-pointer",
+                {
+                  "bg-base-4": index % 2,
+                },
+              )}
+              htmlFor={`hidefeature-${label}`}
+            >
+              {label}
+              <Switch
+                id={`hidefeature-${label}`}
+                checked={value}
+                onCheckedChange={onChange}
+              />
+            </Label>
+          ))}
+        </div>
+      </SettingsItem>
+    </div>
+  );
+}
diff --git a/packages/react/src/routes/settings/lang.tsx b/packages/react/src/routes/settings/lang.tsx
index f1d2246f6..985ef232b 100644
--- a/packages/react/src/routes/settings/lang.tsx
+++ b/packages/react/src/routes/settings/lang.tsx
@@ -92,11 +92,11 @@ export default function SettingsLang() {
         </div>
       </SettingsItem>
       <SettingsItem label={t("views.settings.clipLanguageSelection")}>
-        <div className="flex w-full flex-col">
+        <div className="flex w-full flex-col rounded-lg border border-base">
           {TL_LANGS.map(({ text, value }, index) => (
             <Label
               className={cn(
-                "flex min-w-[18rem] w-full justify-between items-center gap-4 px-4 py-4",
+                "flex min-w-[18rem] w-full justify-between items-center gap-4 px-4 py-4 hover:cursor-pointer",
                 {
                   "bg-base-4": index % 2,
                 },
diff --git a/packages/react/src/services/search.service.ts b/packages/react/src/services/search.service.ts
index c10a790af..56f7b90eb 100644
--- a/packages/react/src/services/search.service.ts
+++ b/packages/react/src/services/search.service.ts
@@ -3,7 +3,7 @@ import { useMutation } from "@tanstack/react-query";
 
 interface SearchAutoCompleteParams {
   q?: string;
-  t?: ChannelType;
+  t?: SearchAutoCompleteType[] | SearchAutoCompleteType;
   n?: number;
 }
 
diff --git a/packages/react/src/store/settings.ts b/packages/react/src/store/settings.ts
index 3f5039ba9..0e6696c00 100644
--- a/packages/react/src/store/settings.ts
+++ b/packages/react/src/store/settings.ts
@@ -7,7 +7,7 @@ export const hideThumbnailAtom = atom(false);
 export const hidePlaceholderAtom = atom(false);
 export const homeViewModeAtom = atom<"grid" | "list" | "denseList">("grid");
 export const gridDensityAtom = atom(0);
-export const defaultOpenAtom = atom("Home");
+export const defaultOpenAtom = atom<"Favorites" | "Home">("Home");
 export const hideCollabStreamsAtom = atom(false);
 export const filterDeadStreamsAtom = atom(true);
 export const ignoredTopicsAtom = atom<string[]>([]);
diff --git a/packages/react/src/types/search.d.ts b/packages/react/src/types/search.d.ts
index ef2fe8e93..4cffaa545 100644
--- a/packages/react/src/types/search.d.ts
+++ b/packages/react/src/types/search.d.ts
@@ -1,5 +1,8 @@
+type SearchAutoCompleteType = "vtuber" | "any_channel" | "topic";
+
 interface SearchAutoComplete {
   vtuber?: SearchAutoCompleteChannel[];
+  topic?: SearchAutoCompleteTopic[];
 }
 
 interface SearchAutoCompleteChannel {
@@ -8,3 +11,7 @@ interface SearchAutoCompleteChannel {
   english_name?: string;
   org?: string;
 }
+
+interface SearchAutoCompleteTopic {
+  id: string;
+}