Modernize category modal and improve subcategory management

etc/vortex.api.md

@@ -4520,9 +4520,9 @@ function linkAsync(src: string, dest: string, options?: ILinkFileOptions): Promi
 // Warning: (ae-forgotten-export) The symbol "ICategoryDictionary" needs to be exported by the entry point api.d.ts
 //
 // @public (undocumented)
-const loadCategories: reduxAct.ComplexActionCreator2<string, ICategoryDictionary, {
-    gameId: string;
-    gameCategories: ICategoryDictionary;
+const loadCategories: ComplexActionCreator2<string, ICategoryDictionary, {
+gameId: string;
+gameCategories: ICategoryDictionary;
 }, {}>;
 
 // @public (undocumented)
@@ -5061,9 +5061,9 @@ function relativeTime(date: Date, t: TFunction): string;
 function removeAsync(remPath: string, options?: IRemoveFileOptions): Promise_2<void>;
 
 // @public (undocumented)
-const removeCategory: reduxAct.ComplexActionCreator2<string, string, {
-    gameId: string;
-    id: string;
+const removeCategory: ComplexActionCreator2<string, string, {
+gameId: string;
+id: string;
 }, {}>;
 
 // @public
@@ -5111,10 +5111,10 @@ function removeValueIf<T extends object>(state: T, path: Array<string | number>,
 function renameAsync(sourcePath: string, destinationPath: string): Promise_2<void>;
 
 // @public (undocumented)
-const renameCategory: reduxAct.ComplexActionCreator3<string, string, string, {
-    gameId: string;
-    categoryId: string;
-    name: string;
+const renameCategory: ComplexActionCreator3<string, string, string, {
+gameId: string;
+categoryId: string;
+name: string;
 }, {}>;
 
 // @public (undocumented)
@@ -5327,16 +5327,16 @@ const setAutoStart: reduxAct.ComplexActionCreator1<unknown, unknown, {}>;
 // Warning: (ae-forgotten-export) The symbol "ICategory" needs to be exported by the entry point api.d.ts
 //
 // @public (undocumented)
-const setCategory: reduxAct.ComplexActionCreator3<string, string, ICategory, {
-    gameId: string;
-    id: string;
-    category: ICategory;
+const setCategory: ComplexActionCreator3<string, string, ICategory, {
+gameId: string;
+id: string;
+category: ICategory;
 }, {}>;
 
 // @public (undocumented)
-const setCategoryOrder: reduxAct.ComplexActionCreator2<string, string[], {
-    gameId: string;
-    categoryIds: string[];
+const setCategoryOrder: ComplexActionCreator2<string, string[], {
+gameId: string;
+categoryIds: string[];
 }, {}>;
 
 // @public (undocumented)
@@ -6416,9 +6416,9 @@ function unlinkAsync(filePath: string, options?: IRemoveFileOptions): Promise_2<
 const UPDATE_CHANNELS: readonly ["stable", "beta", "next", "none"];
 
 // @public (undocumented)
-const updateCategories: reduxAct.ComplexActionCreator2<string, ICategoryDictionary, {
-    gameId: string;
-    gameCategories: ICategoryDictionary;
+const updateCategories: ComplexActionCreator2<string, ICategoryDictionary, {
+gameId: string;
+gameCategories: ICategoryDictionary;
 }, {}>;
 
 // Warning: (ae-forgotten-export) The symbol "ValuesOf" needs to be exported by the entry point api.d.ts

src/renderer/src/extensions/category_management/actions/category.ts

@@ -1,17 +1,16 @@
-import * as reduxAct from "redux-act";
+import { createAction } from "redux-act";
 
-import safeCreateAction from "../../../actions/safeCreateAction";
 import type { ICategory, ICategoryDictionary } from "../types/ICategoryDictionary";
 
-export const loadCategories = safeCreateAction(
+export const loadCategories = createAction(
   "LOAD_CATEGORIES",
   (gameId: string, gameCategories: ICategoryDictionary) => ({
     gameId,
     gameCategories,
   }),
 );
 
-export const setCategory = safeCreateAction(
+export const setCategory = createAction(
   "SET_CATEGORY",
   (gameId: string, id: string, category: ICategory) => ({
     gameId,
@@ -20,25 +19,25 @@ export const setCategory = safeCreateAction(
   }),
 );
 
-export const removeCategory = safeCreateAction("REMOVE_CATEGORY", (gameId: string, id: string) => ({
+export const removeCategory = createAction("REMOVE_CATEGORY", (gameId: string, id: string) => ({
   gameId,
   id,
 }));
 
-export const setCategoryOrder = safeCreateAction(
+export const setCategoryOrder = createAction(
   "SET_CATEGORY_ORDER",
   (gameId: string, categoryIds: string[]) => ({ gameId, categoryIds }),
 );
 
-export const updateCategories = safeCreateAction(
+export const updateCategories = createAction(
   "UPDATE_CATEGORIES",
   (gameId: string, gameCategories: ICategoryDictionary) => ({
     gameId,
     gameCategories,
   }),
 );
 
-export const renameCategory = safeCreateAction(
+export const renameCategory = createAction(
   "RENAME_CATEGORY",
   (gameId: string, categoryId: string, name: string) => ({
     gameId,

src/renderer/src/extensions/category_management/hooks/CategoryToolbarActionsHook.ts

@@ -0,0 +1,95 @@
+import {
+  mdiCollapseAll,
+  mdiExpandAll,
+  mdiEye,
+  mdiEyeOff,
+  mdiFolderPlus,
+  mdiSortAlphabeticalAscending,
+  mdiSync,
+} from "@mdi/js";
+import { useMemo } from "react";
+
+import type { IToolbarAction } from "@/ui/components/toolbar/ToolbarGroup";
+import type { TFunction } from "@/util/i18n";
+
+import type { ICategoriesTreeEntry } from "../types/ICategoriesTreeEntry";
+import { flattenTreeToIDs } from "../util/flattenCategoryTree";
+
+interface ICategoryToolbarActionsProps {
+  expanded: Set<string>;
+  showEmpty: boolean;
+  treeData: ICategoriesTreeEntry[];
+  expandAll: (ids: string[]) => void;
+  collapseAll: () => void;
+  addParentVisible: boolean;
+  setAddParentVisible: (show?: boolean) => void;
+  toggleEmpty: () => void;
+  sortAlphabetically: () => void;
+  importCategoriesFromNexusMods: (replace?: boolean) => void;
+  t: TFunction;
+}
+
+export default function useCategoryToolbarActions(props: ICategoryToolbarActionsProps) {
+  const {
+    addParentVisible,
+    setAddParentVisible,
+    expanded,
+    showEmpty,
+    treeData,
+    expandAll,
+    collapseAll,
+    toggleEmpty,
+    sortAlphabetically,
+    importCategoriesFromNexusMods,
+    t,
+  } = props;
+
+  const toolbarActions: IToolbarAction[] = useMemo(
+    () => [
+      {
+        label: expanded.size === 0 ? t("Expand All") : t("Collapse All"),
+        iconPath: expanded.size === 0 ? mdiExpandAll : mdiCollapseAll,
+        showLabel: true,
+        onClick: () =>
+          expanded.size === 0 ? expandAll(flattenTreeToIDs(treeData)) : collapseAll(),
+      },
+      {
+        label: showEmpty ? t("Hide Empty") : t("Show Empty"),
+        iconPath: showEmpty ? mdiEyeOff : mdiEye,
+        showLabel: true,
+        onClick: toggleEmpty,
+      },
+      {
+        label: t("Add Top Level"),
+        iconPath: mdiFolderPlus,
+        onClick: () => setAddParentVisible(!addParentVisible),
+      },
+      {
+        label: t("Sort A-Z"),
+        iconPath: mdiSortAlphabeticalAscending,
+        onClick: sortAlphabetically,
+      },
+      {
+        label: t("Fetch from Nexus Mods"),
+        iconPath: mdiSync,
+        onClick: () => {
+          void importCategoriesFromNexusMods(false);
+        },
+      },
+    ],
+    [
+      showEmpty,
+      toggleEmpty,
+      collapseAll,
+      expandAll,
+      sortAlphabetically,
+      expanded,
+      importCategoriesFromNexusMods,
+      addParentVisible,
+      setAddParentVisible,
+      treeData,
+      t,
+    ],
+  );
+  return toolbarActions;
+}