Merge pull request #5 from thallada/add-mod-to-list

Add mod to list, select files & plugins of mod, and perf improvements
2022-08-30 00:18:28 -04:00 · 2022-08-30 00:18:28 -04:00 · d103451a40
commit d103451a40
parent 329c6f8afd bcd4cb0fa7
45 changed files with 9494 additions and 634 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["add-react-displayname"]
+}
--- a/.gitignore
+++ b/.gitignore
@ -35,3 +35,6 @@ yarn-error.log*

 # typescript
 *.tsbuildinfo
+
+# Sentry
+.sentryclirc
--- a/components/AddModData.tsx
+++ b/components/AddModData.tsx
@ -0,0 +1,155 @@
+import { format } from "date-fns";
+import React, { useCallback, useState } from "react";
+import useSWRImmutable from "swr/immutable";
+
+import { Mod, File, NEXUS_MODS_URL } from "./ModData";
+import styles from "../styles/AddModData.module.css";
+import { jsonFetcher } from "../lib/api";
+
+type Props = {
+  selectedMod: number;
+  selectedPlugin: string | null;
+  setSelectedPlugin: (plugin: string) => void;
+  counts: Record<number, [number, number, number]> | null;
+};
+
+const AddModData: React.FC<Props> = ({
+  selectedMod,
+  selectedPlugin,
+  setSelectedPlugin,
+  counts,
+}) => {
+  const [selectedFile, setSelectedFile] = useState<number | null>(null);
+
+  const { data: modData, error: modError } = useSWRImmutable(
+    selectedMod ? `https://mods.modmapper.com/${selectedMod}.json` : null,
+    (_) => jsonFetcher<Mod>(_)
+  );
+  const { data: fileData, error: fileError } = useSWRImmutable(
+    selectedFile ? `https://files.modmapper.com/${selectedFile}.json` : null,
+    (_) => jsonFetcher<File>(_)
+  );
+
+  const handleFileChange = useCallback(
+    (event) => {
+      setSelectedFile(event.target.value);
+    },
+    [setSelectedFile]
+  );
+  const handlePluginChange = useCallback(
+    (event) => {
+      setSelectedPlugin(event.target.value);
+    },
+    [setSelectedPlugin]
+  );
+
+  if (modError && modError.status === 404) {
+    return <div>Mod could not be found.</div>;
+  } else if (modError) {
+    return <div>{`Error loading mod data: ${modError.message}`}</div>;
+  }
+  if (modData === undefined)
+    return <div className={styles.status}>Loading...</div>;
+  if (modData === null)
+    return <div className={styles.status}>Mod could not be found.</div>;
+
+  let numberFmt = new Intl.NumberFormat("en-US");
+  const modCounts = counts && counts[modData.nexus_mod_id];
+  const total_downloads = modCounts ? modCounts[0] : 0;
+  const unique_downloads = modCounts ? modCounts[1] : 0;
+  const views = modCounts ? modCounts[2] : 0;
+
+  if (selectedMod && modData) {
+    return (
+      <div className={styles.wrapper}>
+        <h3>
+          <a
+            href={`${NEXUS_MODS_URL}/mods/${modData.nexus_mod_id}`}
+            target="_blank"
+            rel="noreferrer noopener"
+            className={styles.name}
+          >
+            {modData.name}
+          </a>
+        </h3>
+        <div>
+          <strong>Category:&nbsp;</strong>
+          <a
+            href={`${NEXUS_MODS_URL}/mods/categories/${modData.category_id}`}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            {modData.category_name}
+          </a>
+          {modData.is_translation && <strong>&nbsp;(translation)</strong>}
+        </div>
+        <div>
+          <strong>Author:&nbsp;</strong>
+          <a
+            href={`${NEXUS_MODS_URL}/users/${modData.author_id}`}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            {modData.author_name}
+          </a>
+        </div>
+        <div>
+          <strong>Uploaded:</strong>{" "}
+          {format(new Date(modData.first_upload_at), "d MMM y")}
+        </div>
+        <div>
+          <strong>Last Update:</strong>{" "}
+          {format(new Date(modData.last_update_at), "d MMM y")}
+        </div>
+        <div>
+          <strong>Total Downloads:</strong> {numberFmt.format(total_downloads)}
+        </div>
+        <div>
+          <strong>Unique Downloads:</strong>{" "}
+          {numberFmt.format(unique_downloads)}
+        </div>
+        <div className={styles["select-container"]}>
+          <label htmlFor="mod-file-select" className={styles.label}>
+            Select file:
+          </label>
+          <select
+            name="file"
+            id="mod-file-select"
+            className={styles.select}
+            onChange={handleFileChange}
+          >
+            <option value="">--Select file--</option>
+            {[...modData.files].reverse().map((file) => (
+              <option key={file.nexus_file_id} value={file.nexus_file_id}>
+                {file.name} (v{file.version}) ({file.category})
+              </option>
+            ))}
+          </select>
+        </div>
+        {fileData && (
+          <div className={styles["select-container"]}>
+            <label htmlFor="file-plugin-select" className={styles.label}>
+              Select plugin:
+            </label>
+            <select
+              name="plugin"
+              id="file-plugin-select"
+              className={styles.select}
+              onChange={handlePluginChange}
+            >
+              <option value="">--Select plugin--</option>
+              {fileData.plugins.map((plugin) => (
+                <option key={plugin.hash} value={plugin.hash}>
+                  {plugin.file_path}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+      </div>
+    );
+  }
+  return null;
+};
+
+export default AddModData;
--- a/components/AddModDialog.tsx
+++ b/components/AddModDialog.tsx
@ -0,0 +1,94 @@
+import { createPortal } from "react-dom";
+import React, { useCallback, useEffect, useState, useRef } from "react";
+import { useDispatch } from "react-redux";
+import useSWRImmutable from "swr/immutable";
+
+import AddModData from "./AddModData";
+import SearchBar from "./SearchBar";
+import { jsonFetcher } from "../lib/api";
+import { updateFetchedPlugin, PluginsByHashWithMods } from "../slices/plugins";
+import styles from "../styles/AddModDialog.module.css";
+import EscapeListener from "./EscapeListener";
+
+type Props = {
+  counts: Record<number, [number, number, number]> | null;
+};
+
+const AddModDialog: React.FC<Props> = ({ counts }) => {
+  const [selectedMod, setSelectedMod] = useState<number | null>(null);
+  const [selectedPlugin, setSelectedPlugin] = useState<string | null>(null);
+  const [dialogShown, setDialogShown] = useState(false);
+  const searchInput = useRef<HTMLInputElement | null>(null);
+  const dispatch = useDispatch();
+
+  const { data, error } = useSWRImmutable(
+    selectedPlugin
+      ? `https://plugins.modmapper.com/${selectedPlugin}.json`
+      : null,
+    (_) => jsonFetcher<PluginsByHashWithMods>(_)
+  );
+
+  const onAddModButtonClick = useCallback(async () => {
+    setSelectedMod(null);
+    setDialogShown(true);
+    requestAnimationFrame(() => {
+      if (searchInput.current) searchInput.current.focus();
+    });
+  }, [setSelectedMod, setDialogShown]);
+
+  return (
+    <>
+      <EscapeListener onEscape={() => setDialogShown(false)} />
+      <button onClick={onAddModButtonClick}>Add mod</button>
+      {typeof window !== "undefined" &&
+        createPortal(
+          <dialog open={dialogShown} className={styles.dialog}>
+            <h3>Add mod</h3>
+            <SearchBar
+              counts={counts}
+              sidebarOpen={false}
+              placeholder="Search mods…"
+              onSelectResult={(selectedItem) => {
+                if (selectedItem) {
+                  setSelectedMod(selectedItem.id);
+                }
+              }}
+              inputRef={searchInput}
+            />
+            {selectedMod && (
+              <AddModData
+                selectedMod={selectedMod}
+                selectedPlugin={selectedPlugin}
+                setSelectedPlugin={setSelectedPlugin}
+                counts={counts}
+              />
+            )}
+            <menu>
+              <button
+                onClick={() => {
+                  setSelectedMod(null);
+                  setDialogShown(false);
+                  if (searchInput.current) searchInput.current.value = "";
+                }}
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => {
+                  if (data)
+                    dispatch(updateFetchedPlugin({ ...data, enabled: true }));
+                  setDialogShown(false);
+                }}
+                disabled={!selectedMod || !selectedPlugin || !data}
+              >
+                Add
+              </button>
+            </menu>
+          </dialog>,
+          document.body
+        )}
+    </>
+  );
+};
+
+export default AddModDialog;
--- a/components/CellData.tsx
+++ b/components/CellData.tsx
@ -4,8 +4,9 @@ import useSWRImmutable from "swr/immutable";

 import styles from "../styles/CellData.module.css";
 import ModList from "./ModList";
-import PluginList from "./PluginsList";
+import ParsedPluginsList from "./ParsedPluginsList";
 import { jsonFetcher } from "../lib/api";
+import FetchedPluginsList from "./FetchedPluginsList";

 export interface Mod {
  id: number;
@ -110,7 +111,8 @@ const CellData: React.FC<Props> = ({ selectedCell, counts }) => {
            <span>{data.plugins_count}</span>
          </li>
        </ul>
-        <PluginList selectedCell={selectedCell} />
+        <ParsedPluginsList selectedCell={selectedCell} />
+        <FetchedPluginsList selectedCell={selectedCell} />
        <ModList mods={data.mods} counts={counts} />
      </>
    )
--- a/components/CellList.tsx
+++ b/components/CellList.tsx
@ -1,10 +1,13 @@
 import React, { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import MiniSearch from "minisearch";
+import ReactPaginate from "react-paginate";

 import styles from "../styles/CellList.module.css";
 import type { CellCoord } from "./ModData";

+const PAGE_SIZE = 100;
+
 type Props = {
  cells: CellCoord[];
 };
@ -32,6 +35,7 @@ const CellList: React.FC<Props> = ({ cells }) => {

  const [filter, setFilter] = useState<string>("");
  const [filterResults, setFilterResults] = useState<Set<string>>(new Set());
+  const [page, setPage] = useState<number>(0);

  const filteredCells = cells
    .filter((cell) => !filter || filterResults.has(`${cell.x},${cell.y}`))
@ -45,10 +49,34 @@ const CellList: React.FC<Props> = ({ cells }) => {
    }
  }, [filter]);

+  useEffect(() => {
+    setPage(0);
+  }, [filterResults]);
+
+  const renderPagination = () => (
+    <ReactPaginate
+      breakLabel="..."
+      nextLabel=">"
+      forcePage={page}
+      onPageChange={(event) => {
+        setPage(event.selected);
+        document.getElementById("exterior-cells")?.scrollIntoView();
+      }}
+      pageRangeDisplayed={3}
+      marginPagesDisplayed={2}
+      pageCount={Math.ceil(filteredCells.length / PAGE_SIZE)}
+      previousLabel="<"
+      renderOnZeroPageCount={() => null}
+      className={styles.pagination}
+      activeClassName={styles["active-page"]}
+      hrefBuilder={() => "#"}
+    />
+  );
+
  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"]}>
@ -63,8 +91,11 @@ const CellList: React.FC<Props> = ({ cells }) => {
          </div>
          <hr />
        </div>
+        {renderPagination()}
        <ul className={styles["cell-list"]}>
-          {filteredCells.map((cell) => (
+          {filteredCells
+            .slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE)
+            .map((cell) => (
              <li
                key={`cell-${cell.x},${cell.y}`}
                className={styles["cell-list-item"]}
@ -72,7 +103,9 @@ const CellList: React.FC<Props> = ({ cells }) => {
                <div className={styles["cell-title"]}>
                  <strong>
                    <Link
-                    href={`/?cell=${encodeURIComponent(`${cell.x},${cell.y}`)}`}
+                      href={`/?cell=${encodeURIComponent(
+                        `${cell.x},${cell.y}`
+                      )}`}
                    >
                      <a>
                        {cell.x}, {cell.y}
@ -83,6 +116,7 @@ const CellList: React.FC<Props> = ({ cells }) => {
              </li>
            ))}
        </ul>
+        {renderPagination()}
      </>
    )
  );
--- a/components/DataDirPicker.tsx
+++ b/components/DataDirPicker.tsx
@ -12,7 +12,7 @@ type Props = {};
 const DataDirPicker: React.FC<Props> = () => {
  const workerPool = useContext(WorkerPoolContext);
  const inputRef = useRef<HTMLInputElement>(null);
-  const plugins = useAppSelector((state) => state.plugins.plugins);
+  const plugins = useAppSelector((state) => state.plugins.parsedPlugins);
  const pluginsPending = useAppSelector((state) => state.plugins.pending);
  const [loading, setLoading] = useState<boolean>(false);
  const [uploadNoticeShown, setUploadNoticeShown] = useState(false);
--- a/components/EscapeListener.tsx
+++ b/components/EscapeListener.tsx
@ -0,0 +1,30 @@
+import React, { useCallback, useEffect } from "react";
+
+type Props = {
+  onEscape: () => void;
+};
+
+const EscapeListener: React.FC<Props> = ({ onEscape }) => {
+  const keyHandler = useCallback(
+    (event) => {
+      switch (event.keyCode) {
+        case 27: // escape key
+          onEscape();
+          break;
+        default:
+          break;
+      }
+    },
+    [onEscape]
+  );
+
+  useEffect(() => {
+    window.addEventListener("keydown", keyHandler);
+
+    return () => window.removeEventListener("keydown", keyHandler);
+  }, [keyHandler]);
+
+  return null;
+};
+
+export default EscapeListener;
--- a/components/FetchedPluginsList.tsx
+++ b/components/FetchedPluginsList.tsx
@ -0,0 +1,82 @@
+/* eslint-disable @next/next/no-img-element */
+import Link from "next/link";
+import React from "react";
+
+import { useAppSelector, useAppDispatch } from "../lib/hooks";
+import {
+  disableAllFetchedPlugins,
+  enableAllFetchedPlugins,
+  toggleFetchedPlugin,
+  removeFetchedPlugin,
+} from "../slices/plugins";
+import styles from "../styles/FetchedPluginsList.module.css";
+
+type Props = {
+  selectedCell?: { x: number; y: number };
+};
+
+const FetchedPluginsList: React.FC<Props> = ({ selectedCell }) => {
+  const dispatch = useAppDispatch();
+  const plugins = useAppSelector((state) =>
+    selectedCell
+      ? state.plugins.fetchedPlugins.filter((plugin) =>
+          plugin.cells.some(
+            (cell) => cell.x === selectedCell.x && cell.y === selectedCell.y
+            // TODO: support other worlds
+          )
+        )
+      : state.plugins.fetchedPlugins
+  );
+
+  return (
+    <>
+      {plugins.length > 0 && (
+        <h2 id="added-plugins">Added Plugins ({plugins.length})</h2>
+      )}
+      {!selectedCell && plugins.length > 0 && (
+        <div className={styles.buttons}>
+          <button onClick={() => dispatch(enableAllFetchedPlugins())}>
+            Enable all
+          </button>
+          <button onClick={() => dispatch(disableAllFetchedPlugins())}>
+            Disable all
+          </button>
+        </div>
+      )}
+      <ol
+        className={`${styles["plugin-list"]} ${
+          plugins.length > 0 ? styles["bottom-spacing"] : ""
+        }`}
+      >
+        {plugins.map((plugin) => (
+          <li
+            key={plugin.hash}
+            title={plugin.plugins[0].file_name}
+            className={styles["plugin-row"]}
+          >
+            <input
+              id={plugin.hash}
+              type="checkbox"
+              checked={plugin.enabled ?? false}
+              value={plugin.enabled ? "on" : "off"}
+              onChange={() => dispatch(toggleFetchedPlugin(plugin.hash))}
+            />
+            <label htmlFor={plugin.hash} className={styles["plugin-label"]}>
+              <Link href={`/?plugin=${plugin.hash}`}>
+                <a>{plugin.plugins[0].file_name}</a>
+              </Link>
+            </label>
+            <button
+              onClick={() => dispatch(removeFetchedPlugin(plugin.hash))}
+              className={styles["plugin-remove"]}
+            >
+              <img src="/img/close.svg" width={18} height={18} alt="close" />
+            </button>
+          </li>
+        ))}
+      </ol>
+    </>
+  );
+};
+
+export default FetchedPluginsList;
--- a/components/Map.tsx
+++ b/components/Map.tsx
@ -5,11 +5,12 @@ import mapboxgl from "mapbox-gl";
 import useSWRImmutable from "swr/immutable";

 import { useAppDispatch, useAppSelector } from "../lib/hooks";
-import { setFetchedPlugin, PluginFile } from "../slices/plugins";
+import { setSelectedFetchedPlugin, PluginFile } from "../slices/plugins";
 import styles from "../styles/Map.module.css";
 import Sidebar from "./Sidebar";
 import ToggleLayersControl from "./ToggleLayersControl";
 import SearchBar from "./SearchBar";
+import SearchProvider from "./SearchProvider";
 import { csvFetcher, jsonFetcherWithLastModified } from "../lib/api";

 mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN ?? "";
@ -55,9 +56,14 @@ const Map: React.FC = () => {
  const [sidebarOpen, setSidebarOpen] = useState(true);

  const dispatch = useAppDispatch();
-  const plugins = useAppSelector((state) => state.plugins.plugins);
+  const parsedPlugins = useAppSelector((state) => state.plugins.parsedPlugins);
+  const fetchedPlugins = useAppSelector(
+    (state) => state.plugins.fetchedPlugins
+  );
  const pluginsPending = useAppSelector((state) => state.plugins.pending);
-  const fetchedPlugin = useAppSelector((state) => state.plugins.fetchedPlugin);
+  const selectedFetchedPlugin = useAppSelector(
+    (state) => state.plugins.selectedFetchedPlugin
+  );

  const { data: cellsData, error: cellsError } = useSWRImmutable(
    "https://cells.modmapper.com/edits.json",
@ -243,7 +249,7 @@ const Map: React.FC = () => {

  const clearSelectedCells = useCallback(() => {
    setSelectedCells(null);
-    dispatch(setFetchedPlugin(undefined));
+    dispatch(setSelectedFetchedPlugin(undefined));
    if (map.current) {
      map.current.removeFeatureState({ source: "selected-cells-source" });
      map.current.removeFeatureState({ source: "conflicted-cell-source" });
@ -297,8 +303,10 @@ const Map: React.FC = () => {
    } else if (router.query.plugin && typeof router.query.plugin === "string") {
      clearSelectedCell();
      setSidebarOpen(true);
-      if (plugins && plugins.length > 0 && pluginsPending === 0) {
-        const plugin = plugins.find((p) => p.hash === router.query.plugin);
+      if (parsedPlugins && parsedPlugins.length > 0 && pluginsPending === 0) {
+        const plugin = parsedPlugins.find(
+          (p) => p.hash === router.query.plugin
+        );
        if (plugin && plugin.parsed) {
          const cells = [];
          const cellSet = new Set<number>();
@ -323,13 +331,13 @@ const Map: React.FC = () => {
    }

    if (
-      plugins &&
-      plugins.length > 0 &&
      pluginsPending === 0 &&
+      ((parsedPlugins && parsedPlugins.length > 0) ||
+        fetchedPlugins.length > 0) &&
      !router.query.mod &&
      !router.query.plugin
    ) {
-      const cells = plugins.reduce(
+      let cells = parsedPlugins.reduce(
        (acc: { x: number; y: number }[], plugin: PluginFile) => {
          if (plugin.enabled && plugin.parsed) {
            const newCells = [...acc];
@ -349,6 +357,11 @@ const Map: React.FC = () => {
        },
        []
      );
+      cells = cells.concat(
+        fetchedPlugins
+          .filter((plugin) => plugin.enabled)
+          .flatMap((plugin) => plugin.cells)
+      );
      selectCells(cells);
    }
  }, [
@ -362,8 +375,9 @@ const Map: React.FC = () => {
    clearSelectedCell,
    clearSelectedCells,
    heatmapLoaded,
-    plugins,
+    parsedPlugins,
    pluginsPending,
+    fetchedPlugins,
  ]);

  useEffect(() => {
@ -371,12 +385,12 @@ const Map: React.FC = () => {
    if (
      router.query.plugin &&
      typeof router.query.plugin === "string" &&
-      fetchedPlugin &&
-      fetchedPlugin.cells
+      selectedFetchedPlugin &&
+      selectedFetchedPlugin.cells
    ) {
      const cells = [];
      const cellSet = new Set<number>();
-      for (const cell of fetchedPlugin.cells) {
+      for (const cell of selectedFetchedPlugin.cells) {
        if (
          cell.x !== undefined &&
          cell.y !== undefined &&
@ -388,7 +402,7 @@ const Map: React.FC = () => {
      }
      selectCells(cells);
    }
-  }, [heatmapLoaded, fetchedPlugin, selectCells, router.query.plugin]);
+  }, [heatmapLoaded, selectedFetchedPlugin, selectCells, router.query.plugin]);

  useEffect(() => {
    if (!heatmapLoaded) return; // wait for all map layers to load
@ -828,6 +842,7 @@ const Map: React.FC = () => {
        ref={mapWrapper}
      >
        <div ref={mapContainer} className={styles["map-container"]}>
+          <SearchProvider>
            <Sidebar
              selectedCell={selectedCell}
              clearSelectedCell={() => router.push({ query: {} })}
@ -837,9 +852,50 @@ const Map: React.FC = () => {
              open={sidebarOpen}
              setOpen={setSidebarOpenWithResize}
              lastModified={cellsData && cellsData.lastModified}
+              onSelectFile={(selectedFile) => {
+                const { plugin, ...withoutPlugin } = router.query;
+                if (selectedFile) {
+                  router.push({
+                    query: { ...withoutPlugin, file: selectedFile },
+                  });
+                } else {
+                  const { file, ...withoutFile } = withoutPlugin;
+                  router.push({ query: { ...withoutFile } });
+                }
+              }}
+              onSelectPlugin={(selectedPlugin) => {
+                if (selectedPlugin) {
+                  router.push({
+                    query: { ...router.query, plugin: selectedPlugin },
+                  });
+                } else {
+                  const { plugin, ...withoutPlugin } = router.query;
+                  router.push({ query: { ...withoutPlugin } });
+                }
+              }}
            />
            <ToggleLayersControl map={map} />
-          <SearchBar counts={counts} sidebarOpen={sidebarOpen} />
+            <SearchBar
+              counts={counts}
+              sidebarOpen={sidebarOpen}
+              placeholder="Search mods or cells…"
+              onSelectResult={(selectedItem) => {
+                if (!selectedItem) return;
+                if (
+                  selectedItem.x !== undefined &&
+                  selectedItem.y !== undefined
+                ) {
+                  router.push({
+                    query: { cell: `${selectedItem.x},${selectedItem.y}` },
+                  });
+                } else {
+                  router.push({ query: { mod: selectedItem.id } });
+                }
+              }}
+              includeCells
+              fixed
+            />
+          </SearchProvider>
        </div>
      </div>
    </>
--- a/components/ModData.tsx
+++ b/components/ModData.tsx
@ -1,17 +1,61 @@
 import { format } from "date-fns";
 import Head from "next/head";
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import useSWRImmutable from "swr/immutable";

+import { useAppDispatch, useAppSelector } from "../lib/hooks";
 import CellList from "./CellList";
 import styles from "../styles/ModData.module.css";
 import { jsonFetcher } from "../lib/api";
+import {
+  PluginsByHashWithMods,
+  removeFetchedPlugin,
+  updateFetchedPlugin,
+} from "../slices/plugins";
+import Link from "next/link";

 export interface CellCoord {
  x: number;
  y: number;
 }

+export interface ModFile {
+  name: string;
+  version: string;
+  category: string;
+  nexus_file_id: number;
+}
+
+export interface FilePlugin {
+  hash: number;
+  file_path: string;
+}
+
+export interface FileCell {
+  x: number;
+  y: number;
+}
+
+export interface File {
+  id: number;
+  name: string;
+  file_name: string;
+  nexus_file_id: number;
+  mod_id: number;
+  category: string;
+  version: string;
+  mod_version: string;
+  size: number;
+  uploaded_at: string;
+  created_at: string;
+  downloaded_at: string;
+  has_plugin: boolean;
+  unable_to_extract_plugins: boolean;
+  cells: FileCell[];
+  plugins: FilePlugin[];
+  plugin_count: number;
+}
+
 export interface Mod {
  id: number;
  name: string;
@ -30,120 +74,171 @@ export interface Mod {
  first_upload_at: string;
  last_updated_files_at: string;
  cells: CellCoord[];
+  files: ModFile[];
 }

-const NEXUS_MODS_URL = "https://www.nexusmods.com/skyrimspecialedition";
+export const NEXUS_MODS_URL = "https://www.nexusmods.com/skyrimspecialedition";

 type Props = {
  selectedMod: number;
+  selectedFile: number;
+  selectedPlugin: string;
  counts: Record<number, [number, number, number]> | null;
  setSelectedCells: (cells: { x: number; y: number }[] | null) => void;
+  onSelectFile: (fileId: number) => void;
+  onSelectPlugin: (hash: string) => void;
 };

 const ModData: React.FC<Props> = ({
  selectedMod,
+  selectedFile,
+  selectedPlugin,
  counts,
  setSelectedCells,
+  onSelectFile,
+  onSelectPlugin,
 }) => {
-  const { data, error } = useSWRImmutable(
+  const [showAddRemovePluginNotification, setShowAddRemovePluginNotification] =
+    useState<boolean>(false);
+  const { data: modData, error: modError } = useSWRImmutable(
    `https://mods.modmapper.com/${selectedMod}.json`,
    (_) => jsonFetcher<Mod>(_)
  );

-  useEffect(() => {
-    if (data) setSelectedCells(data.cells);
-  }, [data, setSelectedCells]);
+  const { data: fileData, error: fileError } = useSWRImmutable(
+    selectedFile ? `https://files.modmapper.com/${selectedFile}.json` : null,
+    (_) => jsonFetcher<File>(_)
+  );

-  if (error && error.status === 404) {
+  const { data: pluginData, error: pluginError } = useSWRImmutable(
+    selectedPlugin
+      ? `https://plugins.modmapper.com/${selectedPlugin}.json`
+      : null,
+    (_) => jsonFetcher<PluginsByHashWithMods>(_)
+  );
+
+  const dispatch = useAppDispatch();
+  const fetchedPlugin = useAppSelector((state) =>
+    state.plugins.fetchedPlugins.find(
+      (plugin) => plugin.hash === selectedPlugin
+    )
+  );
+
+  const handleFileChange = useCallback(
+    (event) => {
+      onSelectFile(event.target.value);
+    },
+    [onSelectFile]
+  );
+  const handlePluginChange = useCallback(
+    (event) => {
+      onSelectPlugin(event.target.value);
+    },
+    [onSelectPlugin]
+  );
+
+  useEffect(() => {
+    if (modData && !selectedFile) setSelectedCells(modData.cells);
+  }, [modData, setSelectedCells, selectedFile]);
+
+  useEffect(() => {
+    if (fileData) setSelectedCells(fileData.cells);
+  }, [fileData, setSelectedCells]);
+
+  useEffect(() => {
+    if (pluginData) setSelectedCells(pluginData.cells);
+  }, [pluginData, setSelectedCells]);
+
+  if (modError && modError.status === 404) {
    return <div>Mod could not be found.</div>;
-  } else if (error) {
-    return <div>{`Error loading mod data: ${error.message}`}</div>;
+  } else if (modError) {
+    return <div>{`Error loading mod modData: ${modError.message}`}</div>;
  }
-  if (data === undefined)
+  if (modData === undefined)
    return <div className={styles.status}>Loading...</div>;
-  if (data === null)
+  if (modData === null)
    return <div className={styles.status}>Mod could not be found.</div>;

  let numberFmt = new Intl.NumberFormat("en-US");
-  const modCounts = counts && counts[data.nexus_mod_id];
+  const modCounts = counts && counts[modData.nexus_mod_id];
  const total_downloads = modCounts ? modCounts[0] : 0;
  const unique_downloads = modCounts ? modCounts[1] : 0;
  const views = modCounts ? modCounts[2] : 0;

-  if (selectedMod && data) {
+  if (selectedMod && modData) {
    return (
      <>
        <Head>
-          <title key="title">{`Modmapper - ${data.name}`}</title>
+          <title key="title">{`Modmapper - ${modData.name}`}</title>
          <meta
            key="description"
            name="description"
-            content={`Map of Skyrim showing ${data.cells.length} cell edits from the mod: ${data.name}`}
+            content={`Map of Skyrim showing ${modData.cells.length} cell edits from the mod: ${modData.name}`}
          />
          <meta
            key="og:title"
            property="og:title"
-            content={`Modmapper - ${data.name}`}
+            content={`Modmapper - ${modData.name}`}
          />
          <meta
            key="og:description"
            property="og:description"
-            content={`Map of Skyrim showing ${data.cells.length} cell edits from the mod: ${data.name}`}
+            content={`Map of Skyrim showing ${modData.cells.length} cell edits from the mod: ${modData.name}`}
          />
          <meta
            key="twitter:title"
            name="twitter:title"
-            content={`Modmapper - ${data.name}`}
+            content={`Modmapper - ${modData.name}`}
          />
          <meta
            key="twitter:description"
            name="twitter:description"
-            content={`Map of Skyrim showing ${data.cells.length} cell edits from the mod: ${data.name}`}
+            content={`Map of Skyrim showing ${modData.cells.length} cell edits from the mod: ${modData.name}`}
          />
          <meta
            key="og:url"
            property="og:url"
-            content={`https://modmapper.com/?mod=${data.nexus_mod_id}`}
+            content={`https://modmapper.com/?mod=${modData.nexus_mod_id}`}
          />
        </Head>
        <h1>
          <a
-            href={`${NEXUS_MODS_URL}/mods/${data.nexus_mod_id}`}
+            href={`${NEXUS_MODS_URL}/mods/${modData.nexus_mod_id}`}
            target="_blank"
            rel="noreferrer noopener"
            className={styles.name}
          >
-            {data.name}
+            {modData.name}
          </a>
        </h1>
        <div>
          <strong>Category:&nbsp;</strong>
          <a
-            href={`${NEXUS_MODS_URL}/mods/categories/${data.category_id}`}
+            href={`${NEXUS_MODS_URL}/mods/categories/${modData.category_id}`}
            target="_blank"
            rel="noreferrer noopener"
          >
-            {data.category_name}
+            {modData.category_name}
          </a>
-          {data.is_translation && <strong>&nbsp;(translation)</strong>}
+          {modData.is_translation && <strong>&nbsp;(translation)</strong>}
        </div>
        <div>
          <strong>Author:&nbsp;</strong>
          <a
-            href={`${NEXUS_MODS_URL}/users/${data.author_id}`}
+            href={`${NEXUS_MODS_URL}/users/${modData.author_id}`}
            target="_blank"
            rel="noreferrer noopener"
          >
-            {data.author_name}
+            {modData.author_name}
          </a>
        </div>
        <div>
          <strong>Uploaded:</strong>{" "}
-          {format(new Date(data.first_upload_at), "d MMM y")}
+          {format(new Date(modData.first_upload_at), "d MMM y")}
        </div>
        <div>
          <strong>Last Update:</strong>{" "}
-          {format(new Date(data.last_update_at), "d MMM y")}
+          {format(new Date(modData.last_update_at), "d MMM y")}
        </div>
        <div>
          <strong>Total Downloads:</strong> {numberFmt.format(total_downloads)}
@ -152,7 +247,96 @@ const ModData: React.FC<Props> = ({
          <strong>Unique Downloads:</strong>{" "}
          {numberFmt.format(unique_downloads)}
        </div>
-        <CellList cells={data.cells} />
+        <div className={styles["select-container"]}>
+          <label htmlFor="mod-file-select" className={styles.label}>
+            Select file:
+          </label>
+          <select
+            name="file"
+            id="mod-file-select"
+            className={styles.select}
+            onChange={handleFileChange}
+            value={selectedFile ?? ""}
+          >
+            <option value="">--Select file--</option>
+            {[...modData.files].reverse().map((file) => (
+              <option key={file.nexus_file_id} value={file.nexus_file_id}>
+                {file.name} (v{file.version}) ({file.category})
+              </option>
+            ))}
+          </select>
+        </div>
+        {fileData && (
+          <div className={styles["select-container"]}>
+            <label htmlFor="file-plugin-select" className={styles.label}>
+              Select plugin:
+            </label>
+            <select
+              name="plugin"
+              id="file-plugin-select"
+              className={styles.select}
+              onChange={handlePluginChange}
+              value={selectedPlugin ?? ""}
+            >
+              <option value="">--Select plugin--</option>
+              {fileData.plugins.map((plugin) => (
+                <option key={plugin.hash} value={plugin.hash}>
+                  {plugin.file_path}
+                </option>
+              ))}
+            </select>
+          </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={() => {
+                  if (fetchedPlugin) {
+                    dispatch(removeFetchedPlugin(pluginData.hash));
+                  } 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} />
+        )}
+        {fileError &&
+          (fileError.status === 404 ? (
+            <div>File cound not be found.</div>
+          ) : (
+            <div>{`Error loading file data: ${fileError.message}`}</div>
+          ))}
+        {pluginError &&
+          (pluginError.status === 404 ? (
+            <div>Plugin cound not be found.</div>
+          ) : (
+            <div>{`Error loading plugin data: ${pluginError.message}`}</div>
+          ))}
+        <CellList
+          cells={pluginData?.cells ?? fileData?.cells ?? modData.cells}
+        />
      </>
    );
  }
--- a/components/ModList.tsx
+++ b/components/ModList.tsx
@ -4,6 +4,7 @@ import React, { useEffect, useRef, useState } from "react";
 import MiniSearch from "minisearch";
 import Link from "next/link";
 import useSWRImmutable from "swr/immutable";
+import ReactPaginate from "react-paginate";

 import styles from "../styles/ModList.module.css";
 import type { Mod } from "./CellData";
@ -21,6 +22,7 @@ import {
 import { useAppDispatch, useAppSelector } from "../lib/hooks";

 const NEXUS_MODS_URL = "https://www.nexusmods.com/skyrimspecialedition";
+const PAGE_SIZE = 50;

 type Props = {
  mods: Mod[];
@ -33,6 +35,7 @@ const ModList: React.FC<Props> = ({ mods, files, counts }) => {
  const { sortBy, sortAsc, filter, category, includeTranslations } =
    useAppSelector((state) => state.modListFilters);
  const [filterResults, setFilterResults] = useState<Set<number>>(new Set());
+  const [page, setPage] = useState<number>(0);

  const { data: cellCounts, error: cellCountsError } = useSWRImmutable(
    `https://mods.modmapper.com/mod_cell_counts.json`,
@ -106,10 +109,34 @@ const ModList: React.FC<Props> = ({ mods, files, counts }) => {
    }
  }, [filter]);

+  useEffect(() => {
+    setPage(0);
+  }, [filterResults, category, includeTranslations, sortBy, sortAsc]);
+
+  const renderPagination = () => (
+    <ReactPaginate
+      breakLabel="..."
+      nextLabel=">"
+      forcePage={page}
+      onPageChange={(event) => {
+        setPage(event.selected);
+        document.getElementById("nexus-mods")?.scrollIntoView();
+      }}
+      pageRangeDisplayed={3}
+      marginPagesDisplayed={2}
+      pageCount={Math.ceil(modsWithCounts.length / PAGE_SIZE)}
+      previousLabel="<"
+      renderOnZeroPageCount={() => null}
+      className={styles.pagination}
+      activeClassName={styles["active-page"]}
+      hrefBuilder={() => "#"}
+    />
+  );
+
  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"]}>
@ -138,7 +165,6 @@ const ModList: React.FC<Props> = ({ mods, files, counts }) => {
            <div className={styles["sort-direction"]}>
              <button
                title="Sort ascending"
-                className={sortAsc ? styles.active : ""}
                onClick={() => dispatch(setSortAsc(true))}
              >
                <img
@ -153,7 +179,6 @@ const ModList: React.FC<Props> = ({ mods, files, counts }) => {
              </button>
              <button
                title="Sort descending"
-                className={!sortAsc ? styles.active : ""}
                onClick={() => dispatch(setSortAsc(false))}
              >
                <img
@ -220,8 +245,11 @@ const ModList: React.FC<Props> = ({ mods, files, counts }) => {
          </div>
          <hr />
        </div>
+        {renderPagination()}
        <ul className={styles["mod-list"]}>
-          {modsWithCounts.map((mod) => (
+          {modsWithCounts
+            .slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE)
+            .map((mod) => (
              <li key={mod.id} className={styles["mod-list-item"]}>
                <div className={styles["mod-title"]}>
                  <strong>
@ -321,6 +349,7 @@ const ModList: React.FC<Props> = ({ mods, files, counts }) => {
              </li>
            ))}
        </ul>
+        {renderPagination()}
      </>
    )
  );
--- a/components/ParsedPluginsList.tsx
+++ b/components/ParsedPluginsList.tsx
@ -4,21 +4,21 @@ import React from "react";
 import { useAppSelector, useAppDispatch } from "../lib/hooks";
 import { excludedPlugins } from "../lib/plugins";
 import {
-  enableAllPlugins,
-  disableAllPlugins,
-  togglePlugin,
+  enableAllParsedPlugins,
+  disableAllParsedPlugins,
+  toggleParsedPlugin,
 } from "../slices/plugins";
-import styles from "../styles/PluginList.module.css";
+import styles from "../styles/ParsedPluginsList.module.css";

 type Props = {
  selectedCell?: { x: number; y: number };
 };

-const PluginsList: React.FC<Props> = ({ selectedCell }) => {
+const ParsedPluginsList: React.FC<Props> = ({ selectedCell }) => {
  const dispatch = useAppDispatch();
  const plugins = useAppSelector((state) =>
    selectedCell
-      ? state.plugins.plugins.filter((plugin) =>
+      ? state.plugins.parsedPlugins.filter((plugin) =>
          plugin.parsed?.cells.some(
            (cell) =>
              cell.x === selectedCell.x &&
@ -28,7 +28,7 @@ const PluginsList: React.FC<Props> = ({ selectedCell }) => {
              plugin.parsed?.header.masters[0] === "Skyrim.esm"
          )
        )
-      : state.plugins.plugins
+      : state.plugins.parsedPlugins
  );
  const pluginsPending = useAppSelector((state) => state.plugins.pending);

@ -37,10 +37,10 @@ const PluginsList: React.FC<Props> = ({ selectedCell }) => {
      {plugins.length > 0 && <h2>Loaded Plugins ({plugins.length})</h2>}
      {!selectedCell && plugins.length > 0 && (
        <div className={styles.buttons}>
-          <button onClick={() => dispatch(enableAllPlugins())}>
+          <button onClick={() => dispatch(enableAllParsedPlugins())}>
            Enable all
          </button>
-          <button onClick={() => dispatch(disableAllPlugins())}>
+          <button onClick={() => dispatch(disableAllParsedPlugins())}>
            Disable all
          </button>
        </div>
@ -60,7 +60,7 @@ const PluginsList: React.FC<Props> = ({ selectedCell }) => {
              }
              checked={plugin.enabled ?? false}
              value={plugin.enabled ? "on" : "off"}
-              onChange={() => dispatch(togglePlugin(plugin.filename))}
+              onChange={() => dispatch(toggleParsedPlugin(plugin.filename))}
            />
            <label htmlFor={plugin.filename} className={styles["plugin-label"]}>
              {excludedPlugins.includes(plugin.filename) ? (
@ -87,4 +87,4 @@ const PluginsList: React.FC<Props> = ({ selectedCell }) => {
  );
 };

-export default PluginsList;
+export default ParsedPluginsList;
--- a/components/PluginData.tsx
+++ b/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} />
      )}
    </>
  );
--- a/components/PluginDetail.tsx
+++ b/components/PluginDetail.tsx
@ -1,11 +1,13 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 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";
@ -13,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,
@ -20,10 +23,7 @@ const buildPluginProps = (
 ): PluginProps => {
  const dataPlugin = data && data.plugins.length > 0 && data.plugins[0];
  return {
-    hash:
-      (plugin && plugin.hash) ||
-      (dataPlugin && dataPlugin.hash.toString(36)) ||
-      "",
+    hash: (plugin && plugin.hash) || (dataPlugin && dataPlugin.hash) || "",
    size: plugin?.size || (dataPlugin && dataPlugin.size) || 0,
    author:
      plugin?.parsed?.header.author ||
@ -49,49 +49,84 @@ 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>(_)
  );

  const dispatch = useAppDispatch();
-  const plugins = useAppSelector((state) => state.plugins.plugins);
-  const fetchedPlugin = useAppSelector((state) => state.plugins.fetchedPlugin);
-  const plugin = plugins.find((plugin) => plugin.hash === hash);
+  const parsedPlugin = useAppSelector((state) =>
+    state.plugins.parsedPlugins.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={() => {
+              if (fetchedPlugin) {
+                dispatch(removeFetchedPlugin(data.hash));
+              } 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} />}
-      {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 ||
          []
--- a/components/PluginTxtEditor.tsx
+++ b/components/PluginTxtEditor.tsx
@ -4,6 +4,7 @@ import React, { useEffect, useState } from "react";
 import { useAppSelector, useAppDispatch } from "../lib/hooks";
 import { setPluginsTxtAndApplyLoadOrder } from "../slices/pluginsTxt";
 import styles from "../styles/PluginTxtEditor.module.css";
+import EscapeListener from "./EscapeListener";

 export const excludedPlugins = [
  "Skyrim.esm",
@ -32,6 +33,7 @@ const PluginTxtEditor: React.FC<Props> = () => {

  return (
    <>
+      <EscapeListener onEscape={() => setPluginsTxtShown(false)} />
      <p className={styles["top-spacing"]}>
        <strong className={styles.step}>2. </strong>Paste or drag-and-drop your{" "}
        <strong>
--- a/components/SearchBar.tsx
+++ b/components/SearchBar.tsx
@ -1,15 +1,18 @@
 import { useCombobox } from "downshift";
-import React, { useEffect, useState, useRef } from "react";
-import { useRouter } from "next/router";
-import MiniSearch, { SearchResult } from "minisearch";
-import useSWRImmutable from "swr/immutable";
+import React, { useContext, useState, useRef } from "react";
+import { SearchResult } from "minisearch";

+import { SearchContext } from "./SearchProvider";
 import styles from "../styles/SearchBar.module.css";
-import { jsonFetcher } from "../lib/api";

 type Props = {
  counts: Record<number, [number, number, number]> | null;
  sidebarOpen: boolean;
+  placeholder: string;
+  onSelectResult: (item: SearchResult | null) => void;
+  includeCells?: boolean;
+  fixed?: boolean;
+  inputRef?: React.MutableRefObject<HTMLInputElement | null>;
 };

 interface Mod {
@ -17,53 +20,17 @@ interface Mod {
  id: number;
 }

-let cells = [];
-
-for (let x = -77; x < 76; x++) {
-  for (let y = -50; y < 45; y++) {
-    const id = `${x},${y}`;
-    cells.push({ id, name: `Cell ${id}`, x, y });
-  }
-}
-const cellSearch = new MiniSearch({
-  fields: ["id"],
-  storeFields: ["id", "name", "x", "y"],
-  tokenize: (s) => [s.replace(/(cell\s?)|\s/gi, "")],
-  searchOptions: {
-    fields: ["id"],
-    prefix: true,
-    fuzzy: false,
-  },
-});
-cellSearch.addAll(cells);
-
-const SearchBar: React.FC<Props> = ({ counts, sidebarOpen }) => {
-  const router = useRouter();
-
-  const modSearch = useRef<MiniSearch<Mod> | null>(
-    null
-  ) as React.MutableRefObject<MiniSearch<Mod>>;
-
-  const { data, error } = useSWRImmutable(
-    `https://mods.modmapper.com/mod_search_index.json`,
-    (_) => jsonFetcher<Mod[]>(_)
-  );
-
-  useEffect(() => {
-    if (data && !modSearch.current) {
-      modSearch.current = new MiniSearch({
-        fields: ["name"],
-        storeFields: ["name", "id"],
-        searchOptions: {
-          fields: ["name"],
-          fuzzy: 0.2,
-          prefix: true,
-        },
-      });
-      modSearch.current.addAll(data);
-    }
-  }, [data]);
-
+const SearchBar: React.FC<Props> = ({
+  counts,
+  sidebarOpen,
+  placeholder,
+  onSelectResult,
+  includeCells = false,
+  fixed = false,
+  inputRef,
+}) => {
+  const { cellSearch, modSearch, loading, loadError } =
+    useContext(SearchContext);
  const searchInput = useRef<HTMLInputElement | null>(null);
  const [searchFocused, setSearchFocused] = useState<boolean>(false);
  const [results, setResults] = useState<SearchResult[]>([]);
@ -83,13 +50,13 @@ const SearchBar: React.FC<Props> = ({ counts, sidebarOpen }) => {
      if (inputValue) {
        let results: SearchResult[] = [];
        if (
-          modSearch.current &&
+          modSearch &&
          !/(^cell\s?-?\d+\s?,?\s?-?\d*$)|(^-?\d+\s?,\s?-?\d*$)/i.test(
            inputValue
          )
        ) {
          results = results.concat(
-            modSearch.current.search(inputValue).sort((resultA, resultB) => {
+            modSearch.search(inputValue).sort((resultA, resultB) => {
              if (counts) {
                const countA = counts[resultA.id];
                const countB = counts[resultB.id];
@ -107,20 +74,16 @@ const SearchBar: React.FC<Props> = ({ counts, sidebarOpen }) => {
            })
          );
        }
+        if (includeCells) {
          results = results.concat(cellSearch.search(inputValue));
+        }
        setResults(results.splice(0, 30));
      }
    },
    onSelectedItemChange: ({ selectedItem }) => {
      if (selectedItem) {
        setSearchFocused(false);
-        if (selectedItem.x !== undefined && selectedItem.y !== undefined) {
-          router.push({
-            query: { cell: `${selectedItem.x},${selectedItem.y}` },
-          });
-        } else {
-          router.push({ query: { mod: selectedItem.id } });
-        }
+        onSelectResult(selectedItem);
        if (searchInput.current) searchInput.current.blur();
        reset();
      }
@ -132,19 +95,25 @@ const SearchBar: React.FC<Props> = ({ counts, sidebarOpen }) => {
      <div
        className={`${styles["search-bar"]} ${
          searchFocused ? styles["search-bar-focused"] : ""
-        } ${sidebarOpen ? styles["search-bar-sidebar-open"] : ""}`}
+        } ${fixed ? styles["search-bar-fixed"] : ""} ${
+          sidebarOpen ? styles["search-bar-sidebar-open"] : ""
+        }`}
        {...getComboboxProps()}
      >
        <input
          {...getInputProps({
            type: "text",
-            placeholder: "Search mods or cells…",
+            placeholder:
+              modSearch && !loading ? placeholder : "Search (loading...)",
            onFocus: () => setSearchFocused(true),
            onBlur: () => {
              if (!isOpen) setSearchFocused(false);
            },
-            disabled: !data,
-            ref: searchInput,
+            disabled: !modSearch,
+            ref: (ref) => {
+              searchInput.current = ref;
+              if (inputRef) inputRef.current = ref;
+            },
          })}
        />
        <ul
@ -164,6 +133,11 @@ const SearchBar: React.FC<Props> = ({ counts, sidebarOpen }) => {
                {result.name}
              </li>
            ))}
+          {loadError && (
+            <div className={styles.error}>
+              Error loading mod search index: {loadError}.
+            </div>
+          )}
        </ul>
      </div>
    </>
--- a/components/SearchProvider.tsx
+++ b/components/SearchProvider.tsx
@ -0,0 +1,86 @@
+import React, { createContext, useEffect, useRef, useState } from "react";
+import MiniSearch from "minisearch";
+import useSWRImmutable from "swr/immutable";
+
+import { jsonFetcher } from "../lib/api";
+
+interface Mod {
+  name: string;
+  id: number;
+}
+
+let cells = [];
+
+for (let x = -77; x < 76; x++) {
+  for (let y = -50; y < 45; y++) {
+    const id = `${x},${y}`;
+    cells.push({ id, name: `Cell ${id}`, x, y });
+  }
+}
+const cellSearch = new MiniSearch({
+  fields: ["id"],
+  storeFields: ["id", "name", "x", "y"],
+  tokenize: (s) => [s.replace(/(cell\s?)|\s/gi, "")],
+  searchOptions: {
+    fields: ["id"],
+    prefix: true,
+    fuzzy: false,
+  },
+});
+cellSearch.addAll(cells);
+
+type SearchContext = {
+  cellSearch: MiniSearch;
+  modSearch?: MiniSearch;
+  loading: boolean;
+  loadError?: any;
+};
+
+export const SearchContext = createContext<SearchContext>({
+  cellSearch,
+  loading: true,
+});
+
+const SearchProvider: React.FC = ({ children }) => {
+  const modSearch = useRef<MiniSearch<Mod> | null>(
+    null
+  ) as React.MutableRefObject<MiniSearch<Mod>>;
+  const [loading, setLoading] = useState(true);
+
+  const { data, error } = useSWRImmutable(
+    `https://mods.modmapper.com/mod_search_index.json`,
+    (_) => jsonFetcher<Mod[]>(_)
+  );
+
+  useEffect(() => {
+    if (data && !modSearch.current) {
+      modSearch.current = new MiniSearch({
+        fields: ["name"],
+        storeFields: ["name", "id"],
+        searchOptions: {
+          fields: ["name"],
+          fuzzy: 0.2,
+          prefix: true,
+        },
+      });
+      modSearch.current.addAllAsync(data).then(() => {
+        setLoading(false);
+      });
+    }
+  }, [data]);
+
+  return (
+    <SearchContext.Provider
+      value={{
+        modSearch: modSearch.current,
+        cellSearch,
+        loading,
+        loadError: error,
+      }}
+    >
+      {children}
+    </SearchContext.Provider>
+  );
+};
+
+export default SearchProvider;
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@ -1,16 +1,18 @@
 /* eslint-disable @next/next/no-img-element */
-import React from "react";
+import React, { useEffect } from "react";
 import { useRouter } from "next/router";
 import { formatRelative } from "date-fns";

 import arrow from "../public/img/arrow.svg";
 import close from "../public/img/close.svg";
+import AddModDialog from "./AddModDialog";
 import CellData from "./CellData";
 import ModData from "./ModData";
 import PluginDetail from "./PluginDetail";
 import DataDirPicker from "./DataDirPicker";
 import PluginTxtEditor from "./PluginTxtEditor";
-import PluginsList from "./PluginsList";
+import ParsedPluginsList from "./ParsedPluginsList";
+import FetchedPluginsList from "./FetchedPluginsList";
 import styles from "../styles/Sidebar.module.css";

 type Props = {
@ -22,6 +24,8 @@ type Props = {
  open: boolean;
  setOpen: (open: boolean) => void;
  lastModified: string | null | undefined;
+  onSelectFile: (fileId: number) => void;
+  onSelectPlugin: (hash: string) => void;
 };

 const Sidebar: React.FC<Props> = ({
@ -33,9 +37,15 @@ const Sidebar: React.FC<Props> = ({
  open,
  setOpen,
  lastModified,
+  onSelectFile,
+  onSelectPlugin,
 }) => {
  const router = useRouter();

+  useEffect(() => {
+    document.getElementById("sidebar")?.scrollTo(0, 0);
+  }, [selectedCell, router.query.mod, router.query.plugin]);
+
  const renderLoadError = (error: Error) => (
    <div>{`Error loading live download counts: ${error.message}`}</div>
  );
@ -49,15 +59,23 @@ const Sidebar: React.FC<Props> = ({
    return <CellData selectedCell={selectedCell} counts={counts} />;
  };

-  const renderModData = (selectedMod: number) => {
+  const renderModData = (
+    selectedMod: number,
+    selectedFile: number,
+    selectedPlugin: string
+  ) => {
    if (countsError) return renderLoadError(countsError);
    if (!counts) return renderLoading();

    return (
      <ModData
        selectedMod={selectedMod}
+        selectedFile={selectedFile}
+        selectedPlugin={selectedPlugin}
        counts={counts}
        setSelectedCells={setSelectedCells}
+        onSelectFile={onSelectFile}
+        onSelectPlugin={onSelectPlugin}
      />
    );
  };
@ -86,6 +104,7 @@ const Sidebar: React.FC<Props> = ({
        <div
          className={styles.sidebar}
          style={!open ? { display: "none" } : {}}
+          id="sidebar"
        >
          <div className={styles["sidebar-content"]}>
            <div className={styles["sidebar-header"]}>
@ -103,10 +122,13 @@ const Sidebar: React.FC<Props> = ({
      );
    } else if (router.query.mod) {
      const modId = parseInt(router.query.mod as string, 10);
+      const fileId = parseInt(router.query.file as string, 10);
+      const pluginHash = router.query.plugin as string;
      return (
        <div
          className={styles.sidebar}
          style={!open ? { display: "none" } : {}}
+          id="sidebar"
        >
          <div className={styles["sidebar-content"]}>
            <div className={styles["sidebar-header"]}>
@ -114,7 +136,7 @@ const Sidebar: React.FC<Props> = ({
                <img src="/img/close.svg" width={24} height={24} alt="close" />
              </button>
            </div>
-            {!Number.isNaN(modId) && renderModData(modId)}
+            {!Number.isNaN(modId) && renderModData(modId, fileId, pluginHash)}
            {renderLastModified(lastModified)}
          </div>
        </div>
@ -124,6 +146,7 @@ const Sidebar: React.FC<Props> = ({
        <div
          className={styles.sidebar}
          style={!open ? { display: "none" } : {}}
+          id="sidebar"
        >
          <div className={styles["sidebar-content"]}>
            <div className={styles["sidebar-header"]}>
@ -145,6 +168,7 @@ const Sidebar: React.FC<Props> = ({
        <div
          className={styles.sidebar}
          style={!open ? { display: "none" } : {}}
+          id="sidebar"
        >
          <div className={styles["sidebar-content"]}>
            <h1 className={styles.title}>Modmapper</h1>
@ -153,7 +177,9 @@ const Sidebar: React.FC<Props> = ({
            </p>
            <DataDirPicker />
            <PluginTxtEditor />
-            <PluginsList />
+            <ParsedPluginsList />
+            <FetchedPluginsList />
+            <AddModDialog counts={counts} />
            {renderLastModified(lastModified)}
          </div>
        </div>
--- a/lib/WorkerPool.ts
+++ b/lib/WorkerPool.ts
@ -1,7 +1,7 @@
 import { createContext } from "react";

 import {
-  addPluginInOrder,
+  addParsedPluginInOrder,
  decrementPending,
  PluginFile,
 } from "../slices/plugins";
@ -48,7 +48,7 @@ export class WorkerPool {
          resolve(worker);
        } else if (typeof data !== "string") {
          store.dispatch(decrementPending(1));
-          store.dispatch(addPluginInOrder(data));
+          store.dispatch(addParsedPluginInOrder(data));
          // Since web assembly memory cannot be shrunk, replace worker with a fresh one to avoid slow repeated
          // invocations on the same worker instance. Repeated invocations are so slow that the delay in creating a
          // new worker is worth it. In practice, there are usually more workers than tasks, so the delay does not slow
--- a/lib/logrocketSetup.ts
+++ b/lib/logrocketSetup.ts
@ -0,0 +1,8 @@
+import LogRocket from "logrocket";
+import setupLogRocketReact from "logrocket-react";
+
+const LOGROCKET_APP_ID =
+  process.env.LOGROCKET_APP_ID || process.env.NEXT_PUBLIC_LOGROCKET_APP_ID;
+
+LogRocket.init(LOGROCKET_APP_ID || "0tlgj3/modmapper");
+if (typeof window !== "undefined") setupLogRocketReact(LogRocket);
--- a/lib/plugins.ts
+++ b/lib/plugins.ts
@ -1,6 +1,6 @@
 import { WorkerPool } from "./WorkerPool";
 import store from "./store";
-import { clearPlugins, setPending } from "../slices/plugins";
+import { clearParsedPlugins, setPending } from "../slices/plugins";

 export const excludedPlugins = [
  "Skyrim.esm",
@ -28,7 +28,7 @@ export const parsePluginFiles = (pluginFiles: File[], workerPool: WorkerPool) =>
    alert("Found no plugins in the folder. Please select the Data folder underneath the Skyrim installation folder.");
    return;
  }
-  store.dispatch(clearPlugins());
+  store.dispatch(clearParsedPlugins());
  store.dispatch(setPending(pluginFiles.length));

  pluginFiles.forEach(async (plugin) => {
--- a/lib/store.ts
+++ b/lib/store.ts
@ -1,13 +1,18 @@
+import LogRocket from "logrocket"
+import * as Sentry from "@sentry/react";
 import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit"

 import pluginsReducer from "../slices/plugins"
 import pluginsTxtReducer from "../slices/pluginsTxt"
 import modListFiltersReducer from "../slices/modListFilters"

+const sentryReduxEnhancer = Sentry.createReduxEnhancer();
+
 export function makeStore() {
  return configureStore({
    reducer: { pluginsTxt: pluginsTxtReducer, plugins: pluginsReducer, modListFilters: modListFiltersReducer },
-    middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }),
+    middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }).concat(LogRocket.reduxMiddleware()),
+    enhancers: [sentryReduxEnhancer],
  })
 }

--- a/next.config.js
+++ b/next.config.js
@ -1,3 +1,5 @@
+const { withSentryConfig } = require('@sentry/nextjs');
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
  reactStrictMode: true,
@ -8,4 +10,15 @@ const nextConfig = {
  },
 }

-module.exports = nextConfig
+const sentryWebpackPluginOptions = {
+  // Additional config options for the Sentry Webpack plugin. Keep in mind that
+  // the following options are set automatically, and overriding them is not
+  // recommended:
+  //   release, url, org, project, authToken, configFile, stripPrefix,
+  //   urlPrefix, include, ignore
+
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options.
+};
+
+module.exports = withSentryConfig(nextConfig, sentryWebpackPluginOptions);
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -9,24 +9,31 @@
    "lint": "next lint"
  },
  "dependencies": {
-    "@reduxjs/toolkit": "^1.7.2",
+    "@reduxjs/toolkit": "^1.8.5",
+    "@sentry/nextjs": "^7.11.1",
+    "@sentry/react": "^7.11.1",
    "@types/javascript-color-gradient": "^1.3.0",
    "@types/mapbox-gl": "^2.6.0",
+    "babel-plugin-add-react-displayname": "^0.0.5",
    "date-fns": "^2.28.0",
    "downshift": "^6.1.7",
    "javascript-color-gradient": "^1.3.2",
    "js-cookie": "^3.0.1",
+    "logrocket": "^3.0.1",
+    "logrocket-react": "^5.0.1",
    "mapbox-gl": "^2.6.1",
-    "minisearch": "^3.2.0",
-    "next": "12.1.1-canary.15",
+    "minisearch": "^5.0.0",
+    "next": "12.2.5",
    "react": "17.0.2",
    "react-dom": "17.0.2",
+    "react-paginate": "^8.1.3",
    "react-redux": "^7.2.6",
    "skyrim-cell-dump-wasm": "0.1.0",
    "swr": "^1.1.2"
  },
  "devDependencies": {
    "@types/js-cookie": "^3.0.2",
+    "@types/logrocket-react": "^3.0.0",
    "@types/node": "17.0.8",
    "@types/react": "17.0.38",
    "@types/react-dom": "^17.0.11",
--- a/pages/404.js
+++ b/pages/404.js
@ -0,0 +1,3 @@
+export default function Custom404() {
+  return <h1>404 - Page Not Found</h1>
+}
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@ -1,10 +1,19 @@
+import "../lib/logrocketSetup";
 import "../styles/globals.css";

+import LogRocket from "logrocket";
+import * as Sentry from "@sentry/nextjs";
 import { Provider } from "react-redux";
 import type { AppProps } from "next/app";

 import store from "../lib/store";

+LogRocket.getSessionURL((sessionURL) => {
+  Sentry.configureScope((scope) => {
+    scope.setExtra("sessionURL", sessionURL);
+  });
+});
+
 function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={store}>
--- a/pages/_error.js
+++ b/pages/_error.js
@ -0,0 +1,39 @@
+/**
+ * NOTE: This requires `@sentry/nextjs` version 7.3.0 or higher.
+ *
+ * NOTE: If using this with `next` version 12.2.0 or lower, uncomment the
+ * penultimate line in `CustomErrorComponent`.
+ *
+ * This page is loaded by Nextjs:
+ *  - on the server, when data-fetching methods throw or reject
+ *  - on the client, when `getInitialProps` throws or rejects
+ *  - on the client, when a React lifecycle method throws or rejects, and it's
+ *    caught by the built-in Nextjs error boundary
+ *
+ * See:
+ *  - https://nextjs.org/docs/basic-features/data-fetching/overview
+ *  - https://nextjs.org/docs/api-reference/data-fetching/get-initial-props
+ *  - https://reactjs.org/docs/error-boundaries.html
+ */
+
+import * as Sentry from '@sentry/nextjs';
+import NextErrorComponent from 'next/error';
+
+const CustomErrorComponent = props => {
+  // If you're using a Nextjs version prior to 12.2.1, uncomment this to
+  // compensate for https://github.com/vercel/next.js/issues/8592
+  // Sentry.captureUnderscoreErrorException(props);
+
+  return <NextErrorComponent statusCode={props.statusCode} />;
+};
+
+CustomErrorComponent.getInitialProps = async contextData => {
+  // In case this is running in a serverless function, await this in order to give Sentry
+  // time to send the error before the lambda exits
+  await Sentry.captureUnderscoreErrorException(contextData);
+
+  // This will contain the status code of the response
+  return NextErrorComponent.getInitialProps(contextData);
+};
+
+export default CustomErrorComponent;
--- a/pages/sentry_sample_error.js
+++ b/pages/sentry_sample_error.js
@ -0,0 +1,47 @@
+import Head from 'next/head'
+
+const boxStyles = { padding: '12px', border: '1px solid #eaeaea', borderRadius: '10px' };
+export default function Home() {
+    return (
+        <div>
+            <Head>
+                <title>Sentry Onboarding</title>
+                <meta name="description" content="Make your Next.js ready for Sentry" />
+            </Head>
+
+            <main style={{
+                minHeight: '100vh',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                alignItems: 'center',
+            }}>
+                <h1 style={{ fontSize: '4rem' }}>
+                    <svg style={{
+                        height: '1em'
+                    }} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 44">
+                        <path fill="currentColor" d="M124.32,28.28,109.56,9.22h-3.68V34.77h3.73V15.19l15.18,19.58h3.26V9.22h-3.73ZM87.15,23.54h13.23V20.22H87.14V12.53h14.93V9.21H83.34V34.77h18.92V31.45H87.14ZM71.59,20.3h0C66.44,19.06,65,18.08,65,15.7c0-2.14,1.89-3.59,4.71-3.59a12.06,12.06,0,0,1,7.07,2.55l2-2.83a14.1,14.1,0,0,0-9-3c-5.06,0-8.59,3-8.59,7.27,0,4.6,3,6.19,8.46,7.52C74.51,24.74,76,25.78,76,28.11s-2,3.77-5.09,3.77a12.34,12.34,0,0,1-8.3-3.26l-2.25,2.69a15.94,15.94,0,0,0,10.42,3.85c5.48,0,9-2.95,9-7.51C79.75,23.79,77.47,21.72,71.59,20.3ZM195.7,9.22l-7.69,12-7.64-12h-4.46L186,24.67V34.78h3.84V24.55L200,9.22Zm-64.63,3.46h8.37v22.1h3.84V12.68h8.37V9.22H131.08ZM169.41,24.8c3.86-1.07,6-3.77,6-7.63,0-4.91-3.59-8-9.38-8H154.67V34.76h3.8V25.58h6.45l6.48,9.2h4.44l-7-9.82Zm-10.95-2.5V12.6h7.17c3.74,0,5.88,1.77,5.88,4.84s-2.29,4.86-5.84,4.86Z M29,2.26a4.67,4.67,0,0,0-8,0L14.42,13.53A32.21,32.21,0,0,1,32.17,40.19H27.55A27.68,27.68,0,0,0,12.09,17.47L6,28a15.92,15.92,0,0,1,9.23,12.17H4.62A.76.76,0,0,1,4,39.06l2.94-5a10.74,10.74,0,0,0-3.36-1.9l-2.91,5a4.54,4.54,0,0,0,1.69,6.24A4.66,4.66,0,0,0,4.62,44H19.15a19.4,19.4,0,0,0-8-17.31l2.31-4A23.87,23.87,0,0,1,23.76,44H36.07a35.88,35.88,0,0,0-16.41-31.8l4.67-8a.77.77,0,0,1,1.05-.27c.53.29,20.29,34.77,20.66,35.17a.76.76,0,0,1-.68,1.13H40.6q.09,1.91,0,3.81h4.78A4.59,4.59,0,0,0,50,39.43a4.49,4.49,0,0,0-.62-2.28Z"></path>
+                    </svg>
+                </h1>
+
+                <p >
+                    Get started by sending us a sample error
+                </p>
+                <button type="button" style={{
+                    ...boxStyles,
+                    backgroundColor: '#c73852',
+                    borderRadius: '12px',
+                    border: 'none'
+                }} onClick={() => {
+                    throw new Error("Sentry Frontend Error");
+                }}>
+                    Throw error
+                </button>
+
+                <p>
+                    For more information, see <a href="https://docs.sentry.io/platforms/javascript/guides/nextjs/">https://docs.sentry.io/platforms/javascript/guides/nextjs/</a>
+                </p>
+            </main>
+        </div>
+    )
+}
--- a/sentry.client.config.js
+++ b/sentry.client.config.js
@ -0,0 +1,37 @@
+// This file configures the initialization of Sentry on the browser.
+// The config you add here will be used whenever a page is visited.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from '@sentry/nextjs';
+import LogRocket from 'logrocket';
+
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+const SENTRY_ENVIRONMENT = process.env.SENTRY_ENVIRONMENT || process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT;
+const LOGROCKET_APP_ID = process.env.LOGROCKET_APP_ID || process.env.NEXT_PUBLIC_LOGROCKET_APP_ID;
+
+Sentry.init({
+  dsn: SENTRY_DSN || 'https://dda36383332143d3a84c25a4f6aa6470@o1382253.ingest.sentry.io/6697231',
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1.0,
+  environment: SENTRY_ENVIRONMENT || 'production',
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+  beforeSend(event) {
+    const logRocketSession = LogRocket.sessionURL;
+    if (logRocketSession !== null) {
+      event.extra["LogRocket"] = logRocketSession;
+      return event;
+    } else {
+      return event;
+    }
+  },
+  // filter out logrocket pings
+  beforeBreadcrumb(breadcrumb) {
+    if (breadcrumb.category === 'xhr' && breadcrumb.data.url.includes(`i?a=${encodeURIComponent(LOGROCKET_APP_ID)}`)) {
+      return null;
+    }
+    return breadcrumb;
+  },
+});
--- a/sentry.properties
+++ b/sentry.properties
@ -0,0 +1,4 @@
+defaults.url=https://sentry.io/
+defaults.org=hallada
+defaults.project=modmapper
+cli.executable=..\\AppData\\Local\\npm-cache\\_npx\\a8388072043b4cbc\\node_modules\\@sentry\\cli\\bin\\sentry-cli
--- a/sentry.server.config.js
+++ b/sentry.server.config.js
@ -0,0 +1,19 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from '@sentry/nextjs';
+
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+const SENTRY_ENVIRONMENT = process.env.SENTRY_ENVIRONMENT || process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT;
+
+Sentry.init({
+  dsn: SENTRY_DSN || 'https://dda36383332143d3a84c25a4f6aa6470@o1382253.ingest.sentry.io/6697231',
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1.0,
+  environment: SENTRY_ENVIRONMENT || 'production',
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});
--- a/slices/plugins.ts
+++ b/slices/plugins.ts
@ -27,14 +27,14 @@ export interface World {
  form_id: number;
 }

-export interface Plugin {
+export interface ParsedPlugin {
  header: Header;
  cells: Cell[];
  worlds: World[];
 }

 export interface PluginFile {
-  parsed?: Plugin;
+  parsed?: ParsedPlugin;
  filename: string;
  lastModified: number;
  hash: string;
@ -65,7 +65,7 @@ export interface File {
 export interface FetchedPlugin {
  id: number;
  name: string;
-  hash: bigint;
+  hash: string;
  file_id: number;
  mod_id: number;
  version: number;
@ -79,86 +79,130 @@ export interface FetchedPlugin {
  created_at: Date;
 }

+export interface FetchedCell {
+  x: 0;
+  y: 0;
+}
+
 export interface PluginsByHashWithMods {
-  hash: number;
+  hash: string;
  plugins: FetchedPlugin[];
  files: File[];
  mods: Mod[];
-  cells: Cell[];
+  cells: FetchedCell[];
+  enabled?: boolean;
 }

 export type PluginsState = {
-  plugins: PluginFile[];
-  fetchedPlugin?: PluginsByHashWithMods;
+  parsedPlugins: PluginFile[];
+  fetchedPlugins: PluginsByHashWithMods[];
+  selectedFetchedPlugin?: PluginsByHashWithMods;
  pending: number;
 }

-const initialState: PluginsState = { plugins: [], pending: 0 };
+const initialState: PluginsState = { parsedPlugins: [], fetchedPlugins: [], pending: 0 };

 export const pluginsSlice = createSlice({
  name: "plugins",
  initialState,
  reducers: {
-    addPlugin: (state, action: PayloadAction<PluginFile>) => ({
-      plugins: [...state.plugins, action.payload],
-      pending: state.pending,
-      fetchedPlugin: state.fetchedPlugin,
+    addParsedPlugin: (state: PluginsState, action: PayloadAction<PluginFile>) => ({
+      ...state,
+      parsedPlugins: [...state.parsedPlugins, action.payload],
    }),
-    updatePlugin: (state, action: PayloadAction<PluginFile>) => ({
-      plugins: [...state.plugins.filter(plugin => plugin.hash !== action.payload.hash), action.payload],
-      pending: state.pending,
-      fetchedPlugin: state.fetchedPlugin,
+    addFetchedPlugin: (state: PluginsState, action: PayloadAction<PluginsByHashWithMods>) => ({
+      ...state,
+      fetchedPlugins: [...state.fetchedPlugins, action.payload],
    }),
-    setPlugins: (state, action: PayloadAction<PluginFile[]>) => ({
-      plugins: action.payload,
-      pending: state.pending,
-      fetchedPlugin: state.fetchedPlugin,
+    updateParsedPlugin: (state: PluginsState, action: PayloadAction<PluginFile>) => ({
+      ...state,
+      parsedPlugins: [...state.parsedPlugins.filter(plugin => plugin.hash !== action.payload.hash), action.payload],
    }),
-    setPending: (state, action: PayloadAction<number>) => ({
-      plugins: state.plugins,
+    updateFetchedPlugin: (state: PluginsState, action: PayloadAction<PluginsByHashWithMods>) => ({
+      ...state,
+      fetchedPlugins: [...state.fetchedPlugins.filter(plugin => plugin.hash !== action.payload.hash), action.payload],
+    }),
+    removeFetchedPlugin: (state: PluginsState, action: PayloadAction<string>) => ({
+      ...state,
+      fetchedPlugins: state.fetchedPlugins.filter(plugin => plugin.hash !== action.payload),
+    }),
+    setParsedPlugins: (state: PluginsState, action: PayloadAction<PluginFile[]>) => ({
+      ...state,
+      parsedPlugins: action.payload,
+    }),
+    setFetchedPlugins: (state: PluginsState, action: PayloadAction<PluginsByHashWithMods[]>) => ({
+      ...state,
+      fetchedPlugins: action.payload,
+    }),
+    setPending: (state: PluginsState, action: PayloadAction<number>) => ({
+      ...state,
      pending: action.payload,
-      fetchedPlugin: state.fetchedPlugin,
    }),
-    decrementPending: (state, action: PayloadAction<number>) => ({
-      plugins: state.plugins,
+    decrementPending: (state: PluginsState, action: PayloadAction<number>) => ({
+      ...state,
      pending: state.pending - action.payload,
-      fetchedPlugin: state.fetchedPlugin,
    }),
-    togglePlugin: (state, action: PayloadAction<string>) => ({
-      plugins: state.plugins.map((plugin) => (plugin.filename === action.payload ? { ...plugin, enabled: !plugin.enabled } : plugin)),
-      pending: state.pending,
-      fetchedPlugin: state.fetchedPlugin,
+    toggleParsedPlugin: (state: PluginsState, action: PayloadAction<string>) => ({
+      ...state,
+      parsedPlugins: state.parsedPlugins.map((plugin) => (plugin.filename === action.payload ? { ...plugin, enabled: !plugin.enabled } : plugin)),
    }),
-    enableAllPlugins: (state) => ({
-      plugins: state.plugins.map((plugin) => ({ ...plugin, enabled: !plugin.parseError && !excludedPlugins.includes(plugin.filename) && true })),
-      pending: state.pending,
-      fetchedPlugin: state.fetchedPlugin,
+    toggleFetchedPlugin: (state: PluginsState, action: PayloadAction<string>) => ({
+      ...state,
+      fetchedPlugins: state.fetchedPlugins.map((plugin) => (plugin.hash === action.payload ? { ...plugin, enabled: !plugin.enabled } : plugin)),
    }),
-    disableAllPlugins: (state) => ({
-      plugins: state.plugins.map((plugin) => ({ ...plugin, enabled: false })),
-      pending: state.pending,
-      fetchedPlugin: state.fetchedPlugin,
+    enableAllParsedPlugins: (state: PluginsState) => ({
+      ...state,
+      parsedPlugins: state.parsedPlugins.map((plugin) => ({ ...plugin, enabled: !plugin.parseError && !excludedPlugins.includes(plugin.filename) && true })),
    }),
-    setFetchedPlugin: (state, action: PayloadAction<PluginsByHashWithMods | undefined>) => ({
-      plugins: state.plugins,
-      pending: state.pending,
-      fetchedPlugin: action.payload,
+    enableAllFetchedPlugins: (state: PluginsState) => ({
+      ...state,
+      fetchedPlugins: state.fetchedPlugins.map((plugin) => ({ ...plugin, enabled: true })),
    }),
-    clearPlugins: () => ({
-      plugins: [],
+    disableAllParsedPlugins: (state: PluginsState) => ({
+      ...state,
+      parsedPlugins: state.parsedPlugins.map((plugin) => ({ ...plugin, enabled: false })),
+    }),
+    disableAllFetchedPlugins: (state: PluginsState) => ({
+      ...state,
+      fetchedPlugins: state.fetchedPlugins.map((plugin) => ({ ...plugin, enabled: false })),
+    }),
+    setSelectedFetchedPlugin: (state: PluginsState, action: PayloadAction<PluginsByHashWithMods | undefined>) => ({
+      ...state,
+      selectedFetchedPlugin: action.payload,
+    }),
+    clearParsedPlugins: (state: PluginsState) => ({
+      ...state,
+      parsedPlugins: [],
      pending: 0,
-      loadedPluginCells: [],
    }),
  },
 })

-export const { addPlugin, updatePlugin, setPlugins, setPending, decrementPending, togglePlugin, enableAllPlugins, disableAllPlugins, setFetchedPlugin, clearPlugins } = pluginsSlice.actions
+export const {
+  addParsedPlugin,
+  addFetchedPlugin,
+  updateParsedPlugin,
+  updateFetchedPlugin,
+  removeFetchedPlugin,
+  setParsedPlugins,
+  setFetchedPlugins,
+  setPending,
+  decrementPending,
+  toggleParsedPlugin,
+  toggleFetchedPlugin,
+  enableAllParsedPlugins,
+  enableAllFetchedPlugins,
+  disableAllParsedPlugins,
+  disableAllFetchedPlugins,
+  setSelectedFetchedPlugin,
+  clearParsedPlugins,
+} = pluginsSlice.actions;

 export const selectPlugins = (state: AppState) => state.plugins

 export const applyLoadOrder = (): AppThunk => (dispatch, getState) => {
  const { plugins, pluginsTxt } = getState();
-  const originalPlugins = [...plugins.plugins];
+  const originalPlugins = [...plugins.parsedPlugins];
  let newPlugins = [];
  for (let line of pluginsTxt.split("\n")) {
    let enabled = false;
@ -179,11 +223,11 @@ export const applyLoadOrder = (): AppThunk => (dispatch, getState) => {
      }
    }
  }
-  dispatch(setPlugins([...originalPlugins.sort((a, b) => b.lastModified - a.lastModified), ...newPlugins]));
+  dispatch(setParsedPlugins([...originalPlugins.sort((a, b) => b.lastModified - a.lastModified), ...newPlugins]));
 }

-export const addPluginInOrder = (plugin: PluginFile): AppThunk => (dispatch) => {
-  dispatch(updatePlugin(plugin));
+export const addParsedPluginInOrder = (plugin: PluginFile): AppThunk => (dispatch) => {
+  dispatch(updateParsedPlugin(plugin));
  dispatch(applyLoadOrder());
 }

--- a/styles/AddModData.module.css
+++ b/styles/AddModData.module.css
@ -0,0 +1,29 @@
+.wrapper {
+  margin-top: 24px;
+  margin-bottom: 24px;
+}
+
+a.name {
+  margin-top: 24px;
+  word-wrap: break-word;
+}
+
+.select-container {
+  margin-top: 12px;
+}
+
+.select {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.label {
+  white-space: nowrap;
+  margin-right: 12px;
+  font-weight: bold;
+  width: 100%;
+  display: block;
+  margin-bottom: 4px;
+}
--- a/styles/AddModDialog.module.css
+++ b/styles/AddModDialog.module.css
@ -0,0 +1,29 @@
+.dialog {
+  top: 12px;
+  z-index: 8;
+  background-color: #fbefd5;
+  box-shadow: 0 0 1em black;
+  max-width: 400px;
+  min-width: 300px;
+  min-height: 400px;
+}
+
+.dialog[open] {
+  display: flex;
+  flex-direction: column;
+}
+
+.dialog h3 {
+  margin-top: 0px;
+}
+
+.dialog menu {
+  padding: 0;
+  display: flex;
+  justify-content: space-between;
+  margin-top: auto;
+}
+
+.button {
+  margin-bottom: 24px;
+}
--- a/styles/CellList.module.css
+++ b/styles/CellList.module.css
@ -48,3 +48,27 @@
 .filter {
  width: 175px;
 }
+
+.pagination {
+  display: flex;
+  flex-direction: row;
+  list-style-type: none;
+  padding: 0;
+  margin-top: 0;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.pagination li {
+  padding: 4px;
+}
+
+.pagination li a {
+  cursor: pointer;
+  user-select: none;
+}
+
+.active-page a {
+  color: black;
+  text-decoration: none;
+}
--- a/styles/FetchedPluginsList.module.css
+++ b/styles/FetchedPluginsList.module.css
@ -0,0 +1,60 @@
+.plugin-list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.plugin-list li {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+}
+
+.bottom-spacing {
+  margin-bottom: 12px;
+}
+
+.plugin-row {
+  display: flex;
+  align-items: center;
+}
+
+.plugin-label {
+  margin-left: 8px;
+  margin-right: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.plugin-remove {
+  margin-left: auto;
+  padding: 2px 8px;
+  background: none;
+  border: none;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.plugin-remove:hover img {
+  filter: invert(40%);
+}
+
+.loading {
+  margin-bottom: 12px;
+}
+
+.buttons {
+  display: flex;
+  flex-direction: row;
+  padding-right: 12px;
+  padding-left: 12px;
+  justify-content: space-evenly;
+  margin-bottom: 12px;
+}
+
+.buttons button {
+  flex: 1;
+  margin-right: 12px;
+  margin-right: 12px;
+}
--- a/styles/ModData.module.css
+++ b/styles/ModData.module.css
@ -6,3 +6,47 @@ a.name {
  line-height: 1.75rem;
  word-wrap: break-word;
 }
+
+.select-container {
+  margin-top: 12px;
+}
+
+.select {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.label {
+  white-space: nowrap;
+  margin-right: 12px;
+  font-weight: bold;
+  width: 100%;
+  display: block;
+  margin-bottom: 4px;
+}
+
+.spacer {
+  margin-bottom: 12px;
+}
+
+.plugin-actions {
+  display: flex;
+  flex-direction: row;
+  padding-right: 12px;
+  padding-left: 12px;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.plugin-link {
+  flex: 1;
+}
+
+.button {
+  flex: 1;
+  margin-top: 12px;
+  margin-bottom: 12px;
+  margin-right: auto;
+}
--- a/styles/ModList.module.css
+++ b/styles/ModList.module.css
@ -107,3 +107,27 @@
 .desc {
  transform: rotate(90deg);
 }
+
+.pagination {
+  display: flex;
+  flex-direction: row;
+  list-style-type: none;
+  padding: 0;
+  margin-top: 0;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.pagination li {
+  padding: 4px;
+}
+
+.pagination li a {
+  cursor: pointer;
+  user-select: none;
+}
+
+.active-page a {
+  color: black;
+  text-decoration: none;
+}
--- a/styles/ParsedPluginsList.module.css
+++ b/styles/ParsedPluginsList.module.css
--- a/styles/PluginData.module.css
+++ b/styles/PluginData.module.css
@ -2,3 +2,7 @@ h1.name {
  line-height: 1.75rem;
  word-wrap: break-word;
 }
+
+.spacer {
+  margin-bottom: 12px;
+}
--- a/styles/PluginDetail.module.css
+++ b/styles/PluginDetail.module.css
@ -2,3 +2,10 @@
  color: red;
  margin-top: 12px;
 }
+
+.button {
+  margin-bottom: 12px;
+  margin-right: auto;
+  padding-left: 12px;
+  padding-right: 12px;
+}
--- a/styles/SearchBar.module.css
+++ b/styles/SearchBar.module.css
@ -1,4 +1,4 @@
-.search-bar {
+.search-bar-fixed {
  position: fixed;
  top: 8px;
  width: 150px;
@ -6,29 +6,33 @@
  z-index: 2;
 }

-.search-bar.search-bar-focused {
+.search-bar-fixed.search-bar-focused {
  width: max(40vw, 250px);
  left: calc(50% - max(20vw, 125px));
 }

@media only screen and (min-width: 600px) {
-  .search-bar.search-bar-sidebar-open {
+  .search-bar-fixed.search-bar-sidebar-open {
    left: calc(50% + 75px);
  }

-  .search-bar.search-bar-focused.search-bar-sidebar-open {
+  .search-bar-fixed.search-bar-focused.search-bar-sidebar-open {
    left: calc(50% - max(20vw, 125px) + 125px);
  }
 }

 .search-bar input {
-  width: 150px;
+  width: 100%;
  border-radius: 8px;
  padding-left: 8px;
  padding-right: 8px;
 }

-.search-bar.search-bar.search-bar-focused input {
+.search-bar-fixed input {
+  width: 150px;
+}
+
+.search-bar-fixed.search-bar-focused input {
  width: max(40vw, 250px);
  border-radius: 8px;
  padding-left: 8px;
@ -58,3 +62,7 @@
 .highlighted-result {
  background-color: #bde4ff;
 }
+
+.error {
+  color: red;
+}
--- a/styles/Sidebar.module.css
+++ b/styles/Sidebar.module.css
@ -48,7 +48,7 @@
 }

 .close:hover {
-  color: #888888;
+  filter: invert(40%);
 }

 .hide {
@ -142,7 +142,6 @@
 .sidebar-content {
  display: flex;
  flex-direction: column;
-  height: 100%;
 }

 .sidebar-modified-date {