Notification message for add/remove mod

Also changed how scrolling resets on pagination.

And tweaked pagination styling.

components/CellList.tsx

@@ -60,7 +60,7 @@ const CellList: React.FC<Props> = ({ cells }) => {
       forcePage={page}
       onPageChange={(event) => {
         setPage(event.selected);
-        document.getElementById("sidebar")?.scrollTo(0, 0);
+        document.getElementById("exterior-cells")?.scrollIntoView();
       }}
       pageRangeDisplayed={3}
       marginPagesDisplayed={2}
@@ -76,7 +76,7 @@ const CellList: React.FC<Props> = ({ cells }) => {
   return (
     filteredCells && (
       <>
-        <h2>Exterior Cells ({filteredCells.length})</h2>
+        <h2 id="exterior-cells">Exterior Cells ({filteredCells.length})</h2>
         <div className={styles.filters}>
           <hr />
           <div className={styles["filter-row"]}>

components/FetchedPluginsList.tsx

@@ -30,7 +30,9 @@ const FetchedPluginsList: React.FC<Props> = ({ selectedCell }) => {
 
   return (
     <>
-      {plugins.length > 0 && <h2>Added Plugins ({plugins.length})</h2>}
+      {plugins.length > 0 && (
+        <h2 id="added-plugins">Added Plugins ({plugins.length})</h2>
+      )}
       {!selectedCell && plugins.length > 0 && (
         <div className={styles.buttons}>
           <button onClick={() => dispatch(enableAllFetchedPlugins())}>

components/ModData.tsx

@@ -98,6 +98,8 @@ const ModData: React.FC<Props> = ({
   onSelectFile,
   onSelectPlugin,
 }) => {
+  const [showAddRemovePluginNotification, setShowAddRemovePluginNotification] =
+    useState<boolean>(false);
   const { data: modData, error: modError } = useSWRImmutable(
     `https://mods.modmapper.com/${selectedMod}.json`,
     (_) => jsonFetcher<Mod>(_)
@@ -286,23 +288,37 @@ const ModData: React.FC<Props> = ({
           </div>
         )}
         {pluginData ? (
+          <>
             <div className={styles["plugin-actions"]}>
               <Link href={`/?plugin=${pluginData.hash}`}>
                 <a className={styles["plugin-link"]}>View plugin</a>
               </Link>
               <button
                 className={styles.button}
-              onClick={() =>
+                onClick={() => {
-                fetchedPlugin
+                  if (fetchedPlugin) {
-                  ? dispatch(removeFetchedPlugin(pluginData.hash))
+                    dispatch(removeFetchedPlugin(pluginData.hash));
-                  : dispatch(
+                  } else {
+                    dispatch(
                       updateFetchedPlugin({ ...pluginData, enabled: true })
-                    )
+                    );
                   }
+                  setShowAddRemovePluginNotification(true);
+                }}
               >
                 {Boolean(fetchedPlugin) ? "Remove plugin" : "Add plugin"}
               </button>
             </div>
+            {showAddRemovePluginNotification && (
+              <span>
+                Plugin {Boolean(fetchedPlugin) ? "added" : "removed"}.{" "}
+                <Link href="/#added-plugins">
+                  <a>View list</a>
+                </Link>
+                .
+              </span>
+            )}
+          </>
         ) : (
           <div className={styles.spacer} />
         )}

components/ModList.tsx

@@ -120,7 +120,7 @@ const ModList: React.FC<Props> = ({ mods, files, counts }) => {
       forcePage={page}
       onPageChange={(event) => {
         setPage(event.selected);
-        document.getElementById("sidebar")?.scrollTo(0, 0);
+        document.getElementById("nexus-mods")?.scrollIntoView();
       }}
       pageRangeDisplayed={3}
       marginPagesDisplayed={2}
@@ -136,7 +136,7 @@ const ModList: React.FC<Props> = ({ mods, files, counts }) => {
   return (
     mods && (
       <>
-        <h2>Nexus Mods ({modsWithCounts.length})</h2>
+        <h2 id="nexus-mods">Nexus Mods ({modsWithCounts.length})</h2>
         <div className={styles.filters}>
           <hr />
           <div className={styles["filter-row"]}>

components/PluginDetail.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import useSWRImmutable from "swr/immutable";
 
 import { useAppDispatch, useAppSelector } from "../lib/hooks";
@@ -15,6 +15,7 @@ import type { CellCoord } from "./ModData";
 import PluginData, { Plugin as PluginProps } from "./PluginData";
 import styles from "../styles/PluginDetail.module.css";
 import { jsonFetcher } from "../lib/api";
+import Link from "next/link";
 
 const buildPluginProps = (
   data?: PluginsByHashWithMods | null,
@@ -48,6 +49,9 @@ type Props = {
 };
 
 const PluginDetail: React.FC<Props> = ({ hash, counts }) => {
+  const [showAddRemovePluginNotification, setShowAddRemovePluginNotification] =
+    useState<boolean>(false);
+
   const { data, error } = useSWRImmutable(
     `https://plugins.modmapper.com/${hash}.json`,
     (_) => jsonFetcher<PluginsByHashWithMods>(_)
@@ -84,16 +88,30 @@ const PluginDetail: React.FC<Props> = ({ hash, counts }) => {
         counts={counts}
       />
       {data && (
+        <>
           <button
             className={styles.button}
-          onClick={() =>
+            onClick={() => {
-            fetchedPlugin
+              if (fetchedPlugin) {
-              ? dispatch(removeFetchedPlugin(data.hash))
+                dispatch(removeFetchedPlugin(data.hash));
-              : dispatch(updateFetchedPlugin({ ...data, enabled: true }))
+              } else {
+                dispatch(updateFetchedPlugin({ ...data, enabled: true }));
               }
+              setShowAddRemovePluginNotification(true);
+            }}
           >
             {Boolean(fetchedPlugin) ? "Remove plugin" : "Add plugin"}
           </button>
+          {showAddRemovePluginNotification && (
+            <span>
+              Plugin {Boolean(fetchedPlugin) ? "added" : "removed"}.{" "}
+              <Link href="/#added-plugins">
+                <a>View list</a>
+              </Link>
+              .
+            </span>
+          )}
+        </>
       )}
       {data && <ModList mods={data.mods} files={data.files} counts={counts} />}
       {parsedPlugin?.parseError && (

styles/CellList.module.css

@@ -56,7 +56,7 @@
   padding: 0;
   margin-top: 0;
   width: 100%;
-  justify-content: center;
+  justify-content: space-between;
 }
 
 .pagination li {

styles/ModList.module.css

@@ -115,7 +115,7 @@
   padding: 0;
   margin-top: 0;
   width: 100%;
-  justify-content: center;
+  justify-content: space-between;
 }
 
 .pagination li {