Add Game Extension Prototype

app/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@electron/remote": "^2.0.12",
+    "@headlessui/react": "^1.7.19",
     "@mdi/js": "6.6.96",
     "@msgpack/msgpack": "^2.7.0",
     "@nexusmods/nexus-api": "Nexus-Mods/node-nexus-api",

app/yarn.lock

@@ -45,6 +45,14 @@
   dependencies:
     tslib "^2.4.0"
 
+"@headlessui/react@^1.7.19":
+  version "1.7.19"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.19.tgz#91c78cf5fcb254f4a0ebe96936d48421caf75f40"
+  integrity sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw==
+  dependencies:
+    "@tanstack/react-virtual" "^3.0.0-beta.60"
+    client-only "^0.0.1"
+
 "@hypnosphi/create-react-context@^0.3.1":
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz#f8bfebdc7665f5d426cba3753e0e9c7d3154d7c6"
@@ -417,6 +425,18 @@
     "@tailwindcss/oxide-win32-arm64-msvc" "4.1.15"
     "@tailwindcss/oxide-win32-x64-msvc" "4.1.15"
 
+"@tanstack/react-virtual@^3.0.0-beta.60":
+  version "3.13.18"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.13.18.tgz#9124ee9f08b2ca3c67ffd508dae3732328983362"
+  integrity sha512-dZkhyfahpvlaV0rIKnvQiVoWPyURppl6w4m9IwMDpuIjcJ1sD9YGWrt0wISvgU7ewACXx2Ct46WPgI6qAD4v6A==
+  dependencies:
+    "@tanstack/virtual-core" "3.13.18"
+
+"@tanstack/virtual-core@3.13.18":
+  version "3.13.18"
+  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.13.18.tgz#586e3c1fe08547ee6abf87e8fb7c99087b9c47ff"
+  integrity sha512-Mx86Hqu1k39icq2Zusq+Ey2J6dDWTjDvEv43PJtRCoEYTLyfaPnxIQ6iy7YAOK0NV/qOEmZQ/uCufrppZxTgcg==
+
 "@tybys/wasm-util@^0.10.1":
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/@tybys/wasm-util/-/wasm-util-0.10.1.tgz#ecddd3205cf1e2d5274649ff0eedd2991ed7f414"
@@ -941,6 +961,11 @@ cli-truncate@^2.1.0:
     slice-ansi "^3.0.0"
     string-width "^4.2.0"
 
+client-only@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
+  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
+
 clsx@^1.0.4:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
@@ -4348,8 +4373,7 @@ string-template@^1.0.0:
   resolved "https://registry.yarnpkg.com/string-template/-/string-template-1.0.0.tgz#9e9f2233dc00f218718ec379a28a5673ecca8b96"
   integrity sha512-SLqR3GBUXuoPP5MmYtD7ompvXiG87QjT6lzOszyXjTM86Uu7At7vNnt2xgyTLq5o9T4IxTYFyGxcULqpsmsfdg==
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0:
-  name string-width-cjs
+"string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -4367,6 +4391,15 @@ string-width@^1.0.1:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
 string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -4400,8 +4433,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  name strip-ansi-cjs
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -4415,6 +4447,13 @@ strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   dependencies:
     ansi-regex "^2.0.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.2.tgz#132875abde678c7ea8d691533f2e7e22bb744dba"

locales/en/common.json

@@ -25,5 +25,11 @@
   "The mod you {{enabled}} depends on other mods, do you want to {{enable}} those as well?_plural": "The mods you {{enabled}} depend on other mods, do you want to {{enable}} those as well?",
   "actions": {
     "search": "Search"
-  }
+  },
+  "Create New Mod": "Create New Mod",
+  "Enter a name for your new mod. This will create an empty mod folder in your staging directory where you can add files manually.": "Enter a name for your new mod. This will create an empty mod folder in your staging directory where you can add files manually.",
+  "Mod Name": "Mod Name",
+  "My Custom Mod": "My Custom Mod",
+  "Cancel": "Cancel",
+  "Create Mod": "Create Mod"
 }

package.json

@@ -250,6 +250,7 @@
   },
   "dependencies": {
     "@electron/remote": "^2.0.12",
+    "@headlessui/react": "^1.7.19",
     "@mdi/js": "6.6.96",
     "@msgpack/msgpack": "^2.7.0",
     "@nexusmods/nexus-api": "Nexus-Mods/node-nexus-api",

src/extensions/add_new_mod/actions/session.ts

@@ -0,0 +1,9 @@
+import safeCreateAction from "../../../actions/safeCreateAction";
+
+/**
+ * Action to show or hide the Add New Mod dialog
+ */
+export const showAddModDialog = safeCreateAction(
+  "SHOW_ADD_MOD_DIALOG",
+  (show: boolean) => show,
+);

src/extensions/add_new_mod/components/AddModDialog.tsx

@@ -0,0 +1,44 @@
+import React, { useCallback } from "react";
+import { useSelector, useDispatch } from "react-redux";
+
+import { AddModModal } from "./AddModModal";
+import { showAddModDialog } from "../actions/session";
+import { createNewMod } from "../util/createMod";
+import type { IExtensionApi } from "../../../types/IExtensionContext";
+
+interface AddModDialogProps {
+  api: IExtensionApi;
+}
+
+/**
+ * Redux-connected wrapper for AddModModal
+ * Used with registerDialog to integrate with Vortex's dialog system
+ */
+const AddModDialog = ({ api }: AddModDialogProps) => {
+  const dispatch = useDispatch();
+  const showDialog = useSelector(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (state: any) => state.session?.addNewMod?.showDialog ?? false,
+  );
+
+  const handleClose = useCallback(() => {
+    dispatch(showAddModDialog(false));
+  }, [dispatch]);
+
+  const handleConfirm = useCallback(
+    async (modName: string) => {
+      await createNewMod(api, modName);
+    },
+    [api],
+  );
+
+  return (
+    <AddModModal
+      isOpen={showDialog}
+      onClose={handleClose}
+      onConfirm={handleConfirm}
+    />
+  );
+};
+
+export default AddModDialog;

src/extensions/add_new_mod/components/AddModModal.tsx

@@ -0,0 +1,112 @@
+import React, { useState, useCallback, useRef, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+
+import { Modal } from "../../../tailwind/components/modal";
+import { Typography } from "../../../tailwind/components/next/typography";
+import { Button } from "../../../tailwind/components/next/button";
+import { Input } from "../../../tailwind/components/next/form/input";
+
+interface AddModModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: (modName: string) => void;
+}
+
+/**
+ * Modal dialog for creating a new empty mod
+ * Uses the modern Tailwind/Headless UI styling
+ */
+export const AddModModal = ({
+  isOpen,
+  onClose,
+  onConfirm,
+}: AddModModalProps) => {
+  const { t } = useTranslation(["common"]);
+  const [modName, setModName] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Reset mod name when dialog opens
+  useEffect(() => {
+    if (isOpen) {
+      // This is intentional - reset state when modal opens
+      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+      setModName("");
+    }
+  }, [isOpen]);
+
+  const handleConfirm = useCallback(() => {
+    const trimmedName = modName.trim();
+    if (trimmedName) {
+      onConfirm(trimmedName);
+      setModName("");
+      onClose();
+    }
+  }, [modName, onConfirm, onClose]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" && modName.trim()) {
+        handleConfirm();
+      }
+    },
+    [handleConfirm, modName],
+  );
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setModName(e.target.value);
+  }, []);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      title={t("Create New Mod")}
+      onClose={onClose}
+      initialFocusRef={inputRef}
+    >
+      <Typography
+        as="div"
+        appearance="subdued"
+        className="mb-4"
+        typographyType="body-sm"
+      >
+        {t(
+          "Enter a name for your new mod. This will create an empty mod folder in your staging directory where you can add files manually.",
+        )}
+      </Typography>
+
+      <Input
+        id="add-mod-name-input"
+        ref={inputRef}
+        label={t("Mod Name")}
+        value={modName}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        placeholder={t("My Custom Mod")}
+        className="w-full"
+      />
+
+      <div className="grid grid-cols-2 gap-x-2 mt-4">
+        <Button
+          buttonType="tertiary"
+          className="w-full"
+          filled="weak"
+          size="sm"
+          onClick={onClose}
+        >
+          {t("Cancel")}
+        </Button>
+        <Button
+          buttonType="primary"
+          className="w-full"
+          size="sm"
+          onClick={handleConfirm}
+          disabled={!modName.trim()}
+        >
+          {t("Create Mod")}
+        </Button>
+      </div>
+    </Modal>
+  );
+};
+
+export default AddModModal;

src/extensions/add_new_mod/index.ts

@@ -0,0 +1,37 @@
+import type { IExtensionContext } from "../../types/IExtensionContext";
+
+import AddModDialog from "./components/AddModDialog";
+import { showAddModDialog } from "./actions/session";
+import { sessionReducer } from "./reducers/session";
+
+/**
+ * Entry point for the add_new_mod extension.
+ * Registers a "Create new mod" action that opens a styled modal dialog
+ * allowing users to create empty mods for manual file management.
+ */
+function init(context: IExtensionContext): boolean {
+  // Register the session reducer for dialog visibility state
+  context.registerReducer(["session", "addNewMod"], sessionReducer);
+
+  // Register the dialog component
+  context.registerDialog("add-new-mod", AddModDialog, () => ({
+    api: context.api,
+  }));
+
+  // Register the toolbar action
+  context.registerAction(
+    "mod-icons",
+    50,
+    "add",
+    {},
+    "Create new mod",
+    () => {
+      context.api.store?.dispatch(showAddModDialog(true));
+    },
+    () => true,
+  );
+
+  return true;
+}
+
+export default init;

src/extensions/add_new_mod/reducers/session.ts

@@ -0,0 +1,18 @@
+import type { IReducerSpec } from "../../../types/IExtensionContext";
+import { setSafe } from "../../../util/storeHelper";
+
+import * as actions from "../actions/session";
+
+/**
+ * Reducer for the add_new_mod extension session state
+ */
+export const sessionReducer: IReducerSpec = {
+  reducers: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    [actions.showAddModDialog as any]: (state, payload: boolean) =>
+      setSafe(state, ["showDialog"], payload),
+  },
+  defaults: {
+    showDialog: false,
+  },
+};