From fda4ef9ab1eb85b291fe996d69c0944814b6fa6b Mon Sep 17 00:00:00 2001
From: ElementalCrisis <9443295+ElementalCrisis@users.noreply.github.com>
Date: Sat, 3 Feb 2024 23:53:07 -0800
Subject: [PATCH] Add Collection Page to Settings. (#807)

---
 src/core/router/index.tsx                     |   2 +
 src/css/common.css                            |   5 +
 src/pages/settings/SettingsPage.tsx           |   1 +
 src/pages/settings/tabs/AniDBSettings.tsx     | 104 +-------
 .../settings/tabs/CollectionSettings.tsx      | 236 ++++++++++++++++++
 src/pages/settings/tabs/GeneralSettings.tsx   | 119 ---------
 6 files changed, 246 insertions(+), 221 deletions(-)
 create mode 100644 src/pages/settings/tabs/CollectionSettings.tsx

diff --git a/src/core/router/index.tsx b/src/core/router/index.tsx
index 9ab6742a4..31cc70131 100644
--- a/src/core/router/index.tsx
+++ b/src/core/router/index.tsx
@@ -30,6 +30,7 @@ import MainPage from '@/pages/main/MainPage';
 import SettingsPage from '@/pages/settings/SettingsPage';
 import AniDBSettings from '@/pages/settings/tabs/AniDBSettings';
 import ApiKey from '@/pages/settings/tabs/ApiKeys';
+import CollectionSettings from '@/pages/settings/tabs/CollectionSettings';
 import GeneralSettings from '@/pages/settings/tabs/GeneralSettings';
 import ImportSettings from '@/pages/settings/tabs/ImportSettings';
 import MetadataSitesSettings from '@/pages/settings/tabs/MetadataSitesSettings';
@@ -110,6 +111,7 @@ const router = sentryCreateBrowserRouter(
             <Route path="import" element={<ImportSettings />} />
             <Route path="anidb" element={<AniDBSettings />} />
             <Route path="metadata-sites" element={<MetadataSitesSettings />} />
+            <Route path="collection" element={<CollectionSettings />} />
             <Route path="user-management" element={<UserManagementSettings />} />
             <Route path="api-keys" element={<ApiKey />} />
           </Route>
diff --git a/src/css/common.css b/src/css/common.css
index 270aa51ff..90085ddac 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -150,6 +150,11 @@ body {
   font-family: Sora, sans, serif, mono !important;
 }
 
+/* stylelint-disable-next-line selector-class-pattern */
+.Toastify__progress-bar {
+  height: 10% !important;
+}
+
 /* stylelint-disable-next-line selector-class-pattern */
 .Toastify__progress-bar--success {
   background: theme('colors.panel-text-important') !important;
diff --git a/src/pages/settings/SettingsPage.tsx b/src/pages/settings/SettingsPage.tsx
index 1ea5da408..14d5ed65f 100644
--- a/src/pages/settings/SettingsPage.tsx
+++ b/src/pages/settings/SettingsPage.tsx
@@ -18,6 +18,7 @@ const items = [
   { name: 'Import', path: 'import' },
   { name: 'AniDB', path: 'anidb' },
   { name: 'Metadata Sites', path: 'metadata-sites' },
+  { name: 'Collection', path: 'collection' },
   // { name: 'Display', path: 'display' },
   { name: 'User Management', path: 'user-management' },
   // { name: 'Themes', path: 'themes' },
diff --git a/src/pages/settings/tabs/AniDBSettings.tsx b/src/pages/settings/tabs/AniDBSettings.tsx
index 09f6ae472..48b4a592e 100644
--- a/src/pages/settings/tabs/AniDBSettings.tsx
+++ b/src/pages/settings/tabs/AniDBSettings.tsx
@@ -1,13 +1,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import React, { useState } from 'react';
-import { mdiMinusCircleOutline, mdiPlusCircleOutline } from '@mdi/js';
-import { Icon } from '@mdi/react';
+import React from 'react';
 import cx from 'classnames';
-import { remove } from 'lodash';
 
-import LanguagesModal from '@/components/Dialogs/LanguagesModal';
-import { languageDescription } from '@/components/Dialogs/constants';
-import DnDList from '@/components/DnDList/DnDList';
 import Button from '@/components/Input/Button';
 import Checkbox from '@/components/Input/Checkbox';
 import InputSmall from '@/components/Input/InputSmall';
@@ -16,8 +10,6 @@ import toast from '@/components/Toast';
 import { useAniDBTestLoginMutation } from '@/core/react-query/settings/mutations';
 import useSettingsContext from '@/hooks/useSettingsContext';
 
-import type { DropResult } from '@hello-pangea/dnd';
-
 const UpdateFrequencyValues = () => (
   <>
     <option value={1}>Never</option>
@@ -30,12 +22,9 @@ const UpdateFrequencyValues = () => (
 );
 
 function AniDBSettings() {
-  const { newSettings, setNewSettings, updateSetting } = useSettingsContext();
-
+  const { newSettings, updateSetting } = useSettingsContext();
   const { isPending: isAnidbLoginPending, mutate: testAniDbLogin } = useAniDBTestLoginMutation();
 
-  const [showLanguagesModal, setShowLanguagesModal] = useState<'Series' | 'Episode' | null>(null);
-
   const {
     AVDumpClientPort,
     AVDumpKey,
@@ -61,34 +50,6 @@ function AniDBSettings() {
     Username,
   } = newSettings.AniDb;
 
-  const onDragEnd = (result: DropResult, episodePreference = false) => {
-    if (!result.destination || result.destination.index === result.source.index) {
-      return;
-    }
-
-    const items = Array.from(
-      episodePreference ? newSettings.EpisodeLanguagePreference : newSettings.LanguagePreference,
-    );
-    const [removed] = items.splice(result.source.index, 1);
-    items.splice(result.destination.index, 0, removed);
-
-    setNewSettings({
-      ...newSettings,
-      [episodePreference ? 'EpisodeLanguagePreference' : 'LanguagePreference']: items,
-    });
-  };
-
-  const removeLanguage = (language: string, episodePreference = false) => {
-    const items = Array.from(
-      episodePreference ? newSettings.EpisodeLanguagePreference : newSettings.LanguagePreference,
-    );
-    remove(items, item => item === language);
-    setNewSettings({
-      ...newSettings,
-      [episodePreference ? 'EpisodeLanguagePreference' : 'LanguagePreference']: items,
-    });
-  };
-
   const testLogin = () => {
     testAniDbLogin({ Username, Password }, {
       onSuccess: () => toast.success('AniDB Login Successful!'),
@@ -345,67 +306,6 @@ function AniDBSettings() {
           </div>
         </div>
       </div>
-
-      <div className="flex flex-col gap-y-4">
-        <div className="font-semibold">Language Options</div>
-        <div className="flex flex-col gap-y-2 border-b border-panel-border pb-8">
-          <Checkbox
-            label="Also Use Synonyms"
-            id="LanguageUseSynonyms"
-            isChecked={newSettings.LanguageUseSynonyms}
-            onChange={event => setNewSettings({ ...newSettings, LanguageUseSynonyms: event.target.checked })}
-            justify
-          />
-          <div className="flex justify-between">
-            Series Title (Drag to Reorder)
-            <Button onClick={() => setShowLanguagesModal('Series')} tooltip="Add Language">
-              <Icon className="text-panel-icon-action" path={mdiPlusCircleOutline} size={1} />
-            </Button>
-          </div>
-          <div className="flex rounded-md border border-panel-border bg-panel-input p-4">
-            <DnDList onDragEnd={result => onDragEnd(result)}>
-              {newSettings.LanguagePreference.map(language => (
-                {
-                  key: language,
-                  item: (
-                    <div className="mt-2.5 flex items-center justify-between group-first:mt-0">
-                      {languageDescription[language]}
-                      <Button onClick={() => removeLanguage(language)} tooltip="Remove">
-                        <Icon className="text-panel-icon-action" path={mdiMinusCircleOutline} size={1} />
-                      </Button>
-                    </div>
-                  ),
-                }
-              ))}
-            </DnDList>
-          </div>
-          <div className="flex justify-between">
-            Episode Title (Drag to Reorder)
-            <Button onClick={() => setShowLanguagesModal('Episode')} tooltip="Add Language">
-              <Icon className="text-panel-icon-action" path={mdiPlusCircleOutline} size={1} />
-            </Button>
-          </div>
-          <div className="flex rounded-md border border-panel-border bg-panel-input p-4">
-            <DnDList onDragEnd={result => onDragEnd(result, true)}>
-              {newSettings.EpisodeLanguagePreference.map(language => (
-                {
-                  key: language,
-                  item: (
-                    <div className="mt-2.5 flex items-center justify-between group-first:mt-0">
-                      {languageDescription[language]}
-                      <Button onClick={() => removeLanguage(language, true)} tooltip="Remove">
-                        <Icon className="text-panel-icon-action" path={mdiMinusCircleOutline} size={1} />
-                      </Button>
-                    </div>
-                  ),
-                }
-              ))}
-            </DnDList>
-          </div>
-        </div>
-      </div>
-
-      <LanguagesModal type={showLanguagesModal} onClose={() => setShowLanguagesModal(null)} />
     </>
   );
 }
diff --git a/src/pages/settings/tabs/CollectionSettings.tsx b/src/pages/settings/tabs/CollectionSettings.tsx
new file mode 100644
index 000000000..836f729fc
--- /dev/null
+++ b/src/pages/settings/tabs/CollectionSettings.tsx
@@ -0,0 +1,236 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import React, { type ChangeEvent, useState } from 'react';
+import { mdiMinusCircleOutline, mdiPlusCircleOutline } from '@mdi/js';
+import { Icon } from '@mdi/react';
+import { keys, remove } from 'lodash';
+
+import LanguagesModal from '@/components/Dialogs/LanguagesModal';
+import { languageDescription } from '@/components/Dialogs/constants';
+import DnDList from '@/components/DnDList/DnDList';
+import Button from '@/components/Input/Button';
+import Checkbox from '@/components/Input/Checkbox';
+import useSettingsContext from '@/hooks/useSettingsContext';
+
+import type { DropResult } from '@hello-pangea/dnd';
+
+const CollectionSettings = () => {
+  const { newSettings, setNewSettings } = useSettingsContext();
+  const [showLanguagesModal, setShowLanguagesModal] = useState<'Series' | 'Episode' | null>(null);
+
+  const {
+    AutoGroupSeries,
+    AutoGroupSeriesRelationExclusions,
+    AutoGroupSeriesUseScoreAlgorithm,
+  } = newSettings;
+
+  const onDragEnd = (result: DropResult, episodePreference = false) => {
+    if (!result.destination || result.destination.index === result.source.index) {
+      return;
+    }
+
+    const items = Array.from(
+      episodePreference ? newSettings.EpisodeLanguagePreference : newSettings.LanguagePreference,
+    );
+    const [removed] = items.splice(result.source.index, 1);
+    items.splice(result.destination.index, 0, removed);
+
+    setNewSettings({
+      ...newSettings,
+      [episodePreference ? 'EpisodeLanguagePreference' : 'LanguagePreference']: items,
+    });
+  };
+
+  const removeLanguage = (language: string, episodePreference = false) => {
+    const items = Array.from(
+      episodePreference ? newSettings.EpisodeLanguagePreference : newSettings.LanguagePreference,
+    );
+    remove(items, item => item === language);
+    setNewSettings({
+      ...newSettings,
+      [episodePreference ? 'EpisodeLanguagePreference' : 'LanguagePreference']: items,
+    });
+  };
+
+  const exclusionMapping = {
+    dissimilarTitles: {
+      id: 'AllowDissimilarTitleExclusion',
+      name: 'Dissimilar Titles',
+    },
+    prequel: {
+      id: 'prequel',
+      name: 'Prequel',
+    },
+    sequel: {
+      id: 'sequel',
+      name: 'Sequel',
+    },
+    ova: {
+      id: 'ova',
+      name: 'OVA',
+    },
+    movie: {
+      id: 'movie',
+      name: 'Movie',
+    },
+    sameSetting: {
+      id: 'same setting',
+      name: 'Same Setting',
+    },
+    altSetting: {
+      id: 'alternative setting',
+      name: 'Alternative Setting',
+    },
+    altVersion: {
+      id: 'alternative version',
+      name: 'Alternative Version',
+    },
+    parentStory: {
+      id: 'parent story',
+      name: 'Parent Story',
+    },
+    sideStory: {
+      id: 'side story',
+      name: 'Side Story',
+    },
+    fullStory: {
+      id: 'full story',
+      name: 'Full Story',
+    },
+    summary: {
+      id: 'summary',
+      name: 'Summary',
+    },
+    character: {
+      id: 'character',
+      name: 'Character',
+    },
+    other: {
+      id: 'other',
+      name: 'Other',
+    },
+  };
+
+  function isExclusionKey(id: string): id is keyof typeof exclusionMapping {
+    return id in exclusionMapping;
+  }
+
+  const handleExclusionChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (!(event.target.id in exclusionMapping)) return;
+    const { checked, id } = event.target;
+
+    if (isExclusionKey(id)) {
+      if (checked) {
+        const tempExclusions = [...AutoGroupSeriesRelationExclusions, exclusionMapping[id].id];
+        setNewSettings({ ...newSettings, AutoGroupSeriesRelationExclusions: tempExclusions });
+      } else {
+        const tempExclusions = AutoGroupSeriesRelationExclusions.filter(
+          exclusion => exclusion !== exclusionMapping[id].id,
+        );
+        setNewSettings({ ...newSettings, AutoGroupSeriesRelationExclusions: tempExclusions });
+      }
+    }
+  };
+
+  return (
+    <>
+      <div className="text-xl font-semibold">Collection</div>
+      {/* Language Settings */}
+      <div className="flex flex-col gap-y-4">
+        <div className="font-semibold">Language Options</div>
+        <div className="flex flex-col gap-y-2 border-b border-panel-border pb-8">
+          <Checkbox
+            label="Also Use Synonyms"
+            id="LanguageUseSynonyms"
+            isChecked={newSettings.LanguageUseSynonyms}
+            onChange={event => setNewSettings({ ...newSettings, LanguageUseSynonyms: event.target.checked })}
+            justify
+          />
+          <div className="flex justify-between">
+            Series Title (Drag to Reorder)
+            <Button onClick={() => setShowLanguagesModal('Series')} tooltip="Add Language">
+              <Icon className="text-panel-icon-action" path={mdiPlusCircleOutline} size={1} />
+            </Button>
+          </div>
+          <div className="flex rounded-md border border-panel-border bg-panel-input p-4">
+            <DnDList onDragEnd={result => onDragEnd(result)}>
+              {newSettings.LanguagePreference.map(language => (
+                {
+                  key: language,
+                  item: (
+                    <div className="mt-2.5 flex items-center justify-between group-first:mt-0">
+                      {languageDescription[language]}
+                      <Button onClick={() => removeLanguage(language)} tooltip="Remove">
+                        <Icon className="text-panel-icon-action" path={mdiMinusCircleOutline} size={1} />
+                      </Button>
+                    </div>
+                  ),
+                }
+              ))}
+            </DnDList>
+          </div>
+          <div className="flex justify-between">
+            Episode Title (Drag to Reorder)
+            <Button onClick={() => setShowLanguagesModal('Episode')} tooltip="Add Language">
+              <Icon className="text-panel-icon-action" path={mdiPlusCircleOutline} size={1} />
+            </Button>
+          </div>
+          <div className="flex rounded-md border border-panel-border bg-panel-input p-4">
+            <DnDList onDragEnd={result => onDragEnd(result, true)}>
+              {newSettings.EpisodeLanguagePreference.map(language => (
+                {
+                  key: language,
+                  item: (
+                    <div className="mt-2.5 flex items-center justify-between group-first:mt-0">
+                      {languageDescription[language]}
+                      <Button onClick={() => removeLanguage(language, true)} tooltip="Remove">
+                        <Icon className="text-panel-icon-action" path={mdiMinusCircleOutline} size={1} />
+                      </Button>
+                    </div>
+                  ),
+                }
+              ))}
+            </DnDList>
+          </div>
+        </div>
+      </div>
+      <LanguagesModal type={showLanguagesModal} onClose={() => setShowLanguagesModal(null)} />
+
+      {/*   Relation Settings */}
+      <div className="flex flex-col gap-y-4">
+        <div className="font-semibold">Relation Options</div>
+        <div className="flex flex-col gap-y-2 border-b border-panel-border pb-8">
+          <Checkbox
+            justify
+            label="Auto Group Series"
+            id="auto-group-series"
+            isChecked={AutoGroupSeries}
+            onChange={event => setNewSettings({ ...newSettings, AutoGroupSeries: event.target.checked })}
+          />
+          <Checkbox
+            justify
+            label="Determine Main Series Using Relation Weighing"
+            id="auto-group-using-score"
+            isChecked={AutoGroupSeriesUseScoreAlgorithm}
+            onChange={event =>
+              setNewSettings({ ...newSettings, AutoGroupSeriesUseScoreAlgorithm: event.target.checked })}
+          />
+          Exclude following relations
+          <div className="flex flex-col gap-y-2.5 rounded-md border border-panel-border bg-panel-input p-4">
+            {keys(exclusionMapping).map((item: keyof typeof exclusionMapping) => (
+              <Checkbox
+                justify
+                label={exclusionMapping[item].name}
+                id={item}
+                isChecked={AutoGroupSeriesRelationExclusions.includes(exclusionMapping[item].id)}
+                onChange={handleExclusionChange}
+                key={item}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default CollectionSettings;
diff --git a/src/pages/settings/tabs/GeneralSettings.tsx b/src/pages/settings/tabs/GeneralSettings.tsx
index a3ab6593f..8ff3a8b7d 100644
--- a/src/pages/settings/tabs/GeneralSettings.tsx
+++ b/src/pages/settings/tabs/GeneralSettings.tsx
@@ -1,10 +1,8 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import React, { useMemo } from 'react';
-import type { ChangeEvent } from 'react';
 import { mdiOpenInNew, mdiRefresh } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import cx from 'classnames';
-import { keys } from 'lodash';
 
 import Button from '@/components/Input/Button';
 import Checkbox from '@/components/Input/Checkbox';
@@ -16,76 +14,10 @@ import useSettingsContext from '@/hooks/useSettingsContext';
 
 const UI_VERSION = uiVersion();
 
-const exclusionMapping = {
-  dissimilarTitles: {
-    id: 'AllowDissimilarTitleExclusion',
-    name: 'Dissimilar Titles',
-  },
-  prequel: {
-    id: 'prequel',
-    name: 'Prequel',
-  },
-  sequel: {
-    id: 'sequel',
-    name: 'Sequel',
-  },
-  ova: {
-    id: 'ova',
-    name: 'OVA',
-  },
-  movie: {
-    id: 'movie',
-    name: 'Movie',
-  },
-  sameSetting: {
-    id: 'same setting',
-    name: 'Same Setting',
-  },
-  altSetting: {
-    id: 'alternative setting',
-    name: 'Alternative Setting',
-  },
-  altVersion: {
-    id: 'alternative version',
-    name: 'Alternative Version',
-  },
-  parentStory: {
-    id: 'parent story',
-    name: 'Parent Story',
-  },
-  sideStory: {
-    id: 'side story',
-    name: 'Side Story',
-  },
-  fullStory: {
-    id: 'full story',
-    name: 'Full Story',
-  },
-  summary: {
-    id: 'summary',
-    name: 'Summary',
-  },
-  character: {
-    id: 'character',
-    name: 'Character',
-  },
-  other: {
-    id: 'other',
-    name: 'Other',
-  },
-};
-
-function isExclusionKey(id: string): id is keyof typeof exclusionMapping {
-  return id in exclusionMapping;
-}
-
 function GeneralSettings() {
   const { newSettings, setNewSettings, updateSetting } = useSettingsContext();
 
   const {
-    AutoGroupSeries,
-    AutoGroupSeriesRelationExclusions,
-    AutoGroupSeriesUseScoreAlgorithm,
     LogRotator,
     TraceLog,
     WebUI_Settings,
@@ -102,23 +34,6 @@ function GeneralSettings() {
     themesQuery.data?.find(theme => `theme-${theme.ID}` === WebUI_Settings.theme)
   ), [themesQuery.data, WebUI_Settings.theme]);
 
-  const handleExclusionChange = (event: ChangeEvent<HTMLInputElement>) => {
-    if (!(event.target.id in exclusionMapping)) return;
-    const { checked, id } = event.target;
-
-    if (isExclusionKey(id)) {
-      if (checked) {
-        const tempExclusions = [...AutoGroupSeriesRelationExclusions, exclusionMapping[id].id];
-        setNewSettings({ ...newSettings, AutoGroupSeriesRelationExclusions: tempExclusions });
-      } else {
-        const tempExclusions = AutoGroupSeriesRelationExclusions.filter(
-          exclusion => exclusion !== exclusionMapping[id].id,
-        );
-        setNewSettings({ ...newSettings, AutoGroupSeriesRelationExclusions: tempExclusions });
-      }
-    }
-  };
-
   return (
     <>
       <div className="text-xl font-semibold">General</div>
@@ -304,40 +219,6 @@ function GeneralSettings() {
           />
         </div>
       </div>
-
-      <div className="flex flex-col gap-y-4">
-        <div className="font-semibold">Relation Options</div>
-        <div className="flex flex-col gap-y-2 border-b border-panel-border pb-8">
-          <Checkbox
-            justify
-            label="Auto Group Series"
-            id="auto-group-series"
-            isChecked={AutoGroupSeries}
-            onChange={event => setNewSettings({ ...newSettings, AutoGroupSeries: event.target.checked })}
-          />
-          <Checkbox
-            justify
-            label="Determine Main Series Using Relation Weighing"
-            id="auto-group-using-score"
-            isChecked={AutoGroupSeriesUseScoreAlgorithm}
-            onChange={event =>
-              setNewSettings({ ...newSettings, AutoGroupSeriesUseScoreAlgorithm: event.target.checked })}
-          />
-          Exclude following relations
-          <div className="flex flex-col gap-y-2.5 rounded-md border border-panel-border bg-panel-input p-4">
-            {keys(exclusionMapping).map((item: keyof typeof exclusionMapping) => (
-              <Checkbox
-                justify
-                label={exclusionMapping[item].name}
-                id={item}
-                isChecked={AutoGroupSeriesRelationExclusions.includes(exclusionMapping[item].id)}
-                onChange={handleExclusionChange}
-                key={item}
-              />
-            ))}
-          </div>
-        </div>
-      </div>
     </>
   );
 }