Implement removing fetched plugins

components/FetchedPluginsList.tsx

@@ -6,6 +6,7 @@ import {
   disableAllFetchedPlugins,
   enableAllFetchedPlugins,
   toggleFetchedPlugin,
+  removeFetchedPlugin,
 } from "../slices/plugins";
 import styles from "../styles/FetchedPluginList.module.css";
 
@@ -45,7 +46,11 @@ const FetchedPluginsList: React.FC<Props> = ({ selectedCell }) => {
         }`}
       >
         {plugins.map((plugin) => (
-          <li key={plugin.hash} title={plugin.plugins[0].file_name}>
+          <li
+            key={plugin.hash}
+            title={plugin.plugins[0].file_name}
+            className={styles["plugin-row"]}
+          >
             <input
               id={plugin.hash}
               type="checkbox"
@@ -58,6 +63,12 @@ const FetchedPluginsList: React.FC<Props> = ({ selectedCell }) => {
                 <a>{plugin.plugins[0].file_name}</a>
               </Link>
             </label>
+            <button
+              onClick={() => dispatch(removeFetchedPlugin(plugin.hash))}
+              className={styles["plugin-remove"]}
+            >
+              &#10006;
+            </button>
           </li>
         ))}
       </ol>

slices/plugins.ts

@@ -122,6 +122,10 @@ export const pluginsSlice = createSlice({
       ...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,
@@ -179,6 +183,7 @@ export const {
   addFetchedPlugin,
   updateParsedPlugin,
   updateFetchedPlugin,
+  removeFetchedPlugin,
   setParsedPlugins,
   setFetchedPlugins,
   setPending,

styles/FetchedPluginList.module.css

@@ -14,12 +14,28 @@
   margin-bottom: 12px;
 }
 
-.plugin-error {
+.plugin-row {
-  color: #ff0000;
+  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;
+  font-size: 14px;
+}
+
+.plugin-remove:hover {
+  color: crimson;
 }
 
 .loading {