Add enable/disable all plugins buttons

components/PluginsList.tsx

@@ -3,7 +3,11 @@ import React from "react";
 
 import { useAppSelector, useAppDispatch } from "../lib/hooks";
 import { excludedPlugins } from "../lib/plugins";
-import { togglePlugin } from "../slices/plugins";
+import {
+  enableAllPlugins,
+  disableAllPlugins,
+  togglePlugin,
+} from "../slices/plugins";
 import styles from "../styles/PluginList.module.css";
 
 type Props = {
@@ -30,6 +34,16 @@ const PluginsList: React.FC<Props> = ({ selectedCell }) => {
   return (
     <>
       {plugins.length > 0 && <h2>Loaded Plugins ({plugins.length})</h2>}
+      {!selectedCell && plugins.length > 0 && (
+        <div className={styles.buttons}>
+          <button onClick={() => dispatch(enableAllPlugins())}>
+            Enable all
+          </button>
+          <button onClick={() => dispatch(disableAllPlugins())}>
+            Disable all
+          </button>
+        </div>
+      )}
       <ol className={styles["plugin-list"]}>
         {plugins.map((plugin) => (
           <li key={plugin.filename} title={plugin.filename}>

slices/plugins.ts

@@ -1,6 +1,7 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit"
 
 import type { AppState, AppThunk } from "../lib/store"
+import { excludedPlugins } from "../lib/plugins";
 import { Mod } from "../components/ModData";
 
 export interface Header {
@@ -128,6 +129,16 @@ export const pluginsSlice = createSlice({
       pending: state.pending,
       fetchedPlugin: state.fetchedPlugin,
     }),
+    enableAllPlugins: (state) => ({
+      plugins: state.plugins.map((plugin) => ({ ...plugin, enabled: !plugin.parseError && !excludedPlugins.includes(plugin.filename) && true })),
+      pending: state.pending,
+      fetchedPlugin: state.fetchedPlugin,
+    }),
+    disableAllPlugins: (state) => ({
+      plugins: state.plugins.map((plugin) => ({ ...plugin, enabled: false })),
+      pending: state.pending,
+      fetchedPlugin: state.fetchedPlugin,
+    }),
     setFetchedPlugin: (state, action: PayloadAction<PluginsByHashWithMods | undefined>) => ({
       plugins: state.plugins,
       pending: state.pending,
@@ -141,7 +152,7 @@ export const pluginsSlice = createSlice({
   },
 })
 
-export const { addPlugin, setPlugins, setPending, decrementPending, togglePlugin, setFetchedPlugin, clearPlugins } = pluginsSlice.actions
+export const { addPlugin, setPlugins, setPending, decrementPending, togglePlugin, enableAllPlugins, disableAllPlugins, setFetchedPlugin, clearPlugins } = pluginsSlice.actions
 
 export const selectPlugins = (state: AppState) => state.plugins
 

styles/PluginList.module.css

@@ -17,6 +17,10 @@
   margin-left: 8px;
 }
 
+.loading {
+  margin-bottom: 12px;
+}
+
 /* From: https://stackoverflow.com/a/28074607/6620612 */
 .loading:after {
   overflow: hidden;
@@ -39,3 +43,17 @@
     width: 1.25em;
   }
 }
+
+.buttons {
+  display: flex;
+  flex-direction: row;
+  padding-right: 12px;
+  padding-left: 12px;
+  justify-content: space-evenly;
+}
+
+.buttons button {
+  flex: 1;
+  margin-right: 12px;
+  margin-right: 12px;
+}