chore: Refactor client plugin management (#7053)

* Update clientside plugin management to work as server

* docs

* tsc

* Rebase main

app/components/PluginIcon.tsx

@@ -1,29 +1,37 @@
+import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
-import PluginLoader from "~/utils/PluginLoader";
+import Logger from "~/utils/Logger";
+import { Hook, usePluginValue } from "~/utils/PluginManager";
 
 type Props = {
+  /** The ID of the plugin to render an Icon for. */
   id: string;
+  /** The size of the icon. */
   size?: number;
+  /** The color of the icon. */
   color?: string;
 };
 
+/**
+ * Renders an icon defined in a plugin (Hook.Icon).
+ */
 function PluginIcon({ id, color, size = 24 }: Props) {
-  const plugin = PluginLoader.plugins[id];
-  const Icon = plugin?.icon;
+  const Icon = usePluginValue(Hook.Icon, id);
 
   if (Icon) {
     return (
-      <Wrapper>
+      <IconPosition>
         <Icon size={size} fill={color} />
-      </Wrapper>
+      </IconPosition>
     );
   }
 
+  Logger.warn("No Icon registered for plugin", { id });
   return null;
 }
 
-const Wrapper = styled.div`
+const IconPosition = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -32,4 +40,4 @@ const Wrapper = styled.div`
   height: 24px;
 `;
 
-export default PluginIcon;
+export default observer(PluginIcon);