Add/Remove plugin on plugin sidebar page

components/Map.tsx

@@ -330,7 +330,8 @@ const Map: React.FC = () => {
     }
 
     if (
-      ((parsedPlugins && parsedPlugins.length > 0 && pluginsPending === 0) ||
+      pluginsPending === 0 &&
+      ((parsedPlugins && parsedPlugins.length > 0) ||
         fetchedPlugins.length > 0) &&
       !router.query.mod &&
       !router.query.plugin

components/PluginData.tsx

@@ -80,11 +80,13 @@ const PluginData: React.FC<Props> = ({ plugin, counts }) => {
         <strong>Cell edits:&nbsp;</strong>
         {plugin.cell_count}
       </div>
-      {plugin.description && (
+      {plugin.description ? (
         <div>
           <h3>Description:</h3>
           <p>{plugin.description}</p>
         </div>
+      ) : (
+        <div className={styles.spacer} />
       )}
     </>
   );

components/PluginDetail.tsx

@@ -3,9 +3,11 @@ import useSWRImmutable from "swr/immutable";
 
 import { useAppDispatch, useAppSelector } from "../lib/hooks";
 import {
-  setFetchedPlugin,
+  setSelectedFetchedPlugin,
   PluginFile,
   PluginsByHashWithMods,
+  updateFetchedPlugin,
+  removeFetchedPlugin,
 } from "../slices/plugins";
 import ModList from "./ModList";
 import CellList from "./CellList";
@@ -55,43 +57,61 @@ const PluginDetail: React.FC<Props> = ({ hash, counts }) => {
   );
 
   const dispatch = useAppDispatch();
-  const plugins = useAppSelector((state) => state.plugins.plugins);
+  const parsedPlugin = useAppSelector((state) =>
-  const fetchedPlugin = useAppSelector((state) => state.plugins.fetchedPlugin);
+    state.plugins.parsedPlugins.find((plugin) => plugin.hash === hash)
-  const plugin = plugins.find((plugin) => plugin.hash === hash);
+  );
+  const fetchedPlugin = useAppSelector((state) =>
+    state.plugins.fetchedPlugins.find((plugin) => plugin.hash === hash)
+  );
 
   useEffect(() => {
     if (data) {
-      dispatch(setFetchedPlugin(data));
+      dispatch(setSelectedFetchedPlugin(data));
     }
-  }, [dispatch, data, fetchedPlugin]);
+  }, [dispatch, data]);
 
-  if (!plugin && error && error.status === 404) {
+  if (!parsedPlugin && error && error.status === 404) {
     return <h3>Plugin could not be found.</h3>;
-  } else if (!plugin && error) {
+  } else if (!parsedPlugin && error) {
     return <div>{`Error loading plugin data: ${error.message}`}</div>;
   }
-  if (!plugin && data === undefined)
+  if (!parsedPlugin && data === undefined)
     return <div className={styles.status}>Loading...</div>;
-  if (!plugin && data === null)
+  if (!parsedPlugin && data === null)
     return <div className={styles.status}>Plugin could not be found.</div>;
 
   return (
     <>
-      <PluginData plugin={buildPluginProps(data, plugin)} counts={counts} />
+      <PluginData
+        plugin={buildPluginProps(data, parsedPlugin)}
+        counts={counts}
+      />
+      {data && (
+        <button
+          className={styles.button}
+          onClick={() =>
+            fetchedPlugin
+              ? dispatch(removeFetchedPlugin(data.hash))
+              : dispatch(updateFetchedPlugin(data))
+          }
+        >
+          {Boolean(fetchedPlugin) ? "Remove plugin" : "Add plugin"}
+        </button>
+      )}
       {data && <ModList mods={data.mods} files={data.files} counts={counts} />}
-      {plugin?.parseError && (
+      {parsedPlugin?.parseError && (
         <div className={styles.error}>
-          {`Error parsing plugin: ${plugin.parseError}`}
+          {`Error parsing plugin: ${parsedPlugin.parseError}`}
         </div>
       )}
       <CellList
         cells={
-          (plugin?.parsed?.cells.filter(
+          (parsedPlugin?.parsed?.cells.filter(
             (cell) =>
               cell.x !== undefined &&
               cell.y !== undefined &&
               cell.world_form_id === 60 &&
-              plugin.parsed?.header.masters[0] === "Skyrim.esm"
+              parsedPlugin.parsed?.header.masters[0] === "Skyrim.esm"
           ) as CellCoord[]) ||
           data?.cells ||
           []

styles/FetchedPluginsList.module.css

@@ -33,6 +33,7 @@
   border: none;
   display: flex;
   align-items: center;
+  cursor: pointer;
 }
 
 .plugin-remove:hover {

styles/PluginData.module.css

@@ -2,3 +2,7 @@ h1.name {
   line-height: 1.75rem;
   word-wrap: break-word;
 }
+
+.spacer {
+  margin-bottom: 12px;
+}

styles/PluginDetail.module.css

@@ -2,3 +2,11 @@
   color: red;
   margin-top: 12px;
 }
+
+.button {
+  margin-top: 12px;
+  margin-bottom: 12px;
+  margin-right: auto;
+  padding-left: 12px;
+  padding-right: 12px;
+}