Merge branch 'develop' of https://github.com/moonlight-mod/moonlight into settings

packages/core-extensions/src/moonbase/types.ts

···
   "M5 6.99902V18.999C5 20.101 5.897 20.999 7 20.999H17C18.103 20.999 19 20.101 19 18.999V6.99902H5ZM11 17H9V11H11V17ZM15 17H13V11H15V17Z";
 export const CircleXIconSVG =
   "M7.02799 0.333252C3.346 0.333252 0.361328 3.31792 0.361328 6.99992C0.361328 10.6819 3.346 13.6666 7.02799 13.6666C10.71 13.6666 13.6947 10.6819 13.6947 6.99992C13.6947 3.31792 10.7093 0.333252 7.02799 0.333252ZM10.166 9.19525L9.22333 10.1379L7.02799 7.94325L4.83266 10.1379L3.89 9.19525L6.08466 6.99992L3.88933 4.80459L4.832 3.86259L7.02733 6.05792L9.22266 3.86259L10.1653 4.80459L7.97066 6.99992L10.166 9.19525Z";
+export const DangerIconSVG =
+  "M12 23a11 11 0 1 0 0-22 11 11 0 0 0 0 22Zm1.44-15.94L13.06 14a1.06 1.06 0 0 1-2.12 0l-.38-6.94a1 1 0 0 1 1-1.06h.88a1 1 0 0 1 1 1.06Zm-.19 10.69a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z";
 
 export type MoonbaseNatives = {
   fetchRepositories(

packages/core-extensions/src/moonbase/ui/index.tsx

···
 import WebpackRequire from "@moonlight-mod/types/discord/require";
-import { DownloadIconSVG, ExtensionState, TrashIconSVG } from "../types";
+import {
+  DangerIconSVG,
+  DownloadIconSVG,
+  ExtensionState,
+  TrashIconSVG
+} from "../types";
 import { ExtensionLoadSource } from "types/src";
 import info from "./info";
 import settings from "./settings";
···
 
   const DownloadIcon = spacepack.findByCode(DownloadIconSVG)[0].exports.default;
   const TrashIcon = spacepack.findByCode(TrashIconSVG)[0].exports.default;
+  const DangerIcon =
+    spacepack.findByCode(DangerIconSVG)[0].exports.CircleExclamationPointIcon;
 
   const PanelButton =
     spacepack.findByCode("Masks.PANEL_BUTTON")[0].exports.default;
 
   function ExtensionCard({ id }: { id: string }) {
     const [tab, setTab] = React.useState(ExtensionPage.Info);
+    const [restartNeeded, setRestartNeeded] = React.useState(false);
+
     const { ext, enabled, busy, update } = Flux.useStateFromStores(
       [MoonbaseSettingsStore],
       () => {
···
                   />
                 )}
 
+                {restartNeeded && (
+                  <PanelButton
+                    icon={() => (
+                      <DangerIcon
+                        color={CommonComponents.tokens.colors.STATUS_DANGER}
+                      />
+                    )}
+                    tooltipText="You will need to reload/restart your client for this extension to work properly."
+                  />
+                )}
+
                 <Switch
                   checked={enabled}
                   onChange={() => {
+                    setRestartNeeded(true);
                     MoonbaseSettingsStore.setExtensionEnabled(id, !enabled);
                   }}
                 />
···
   }
 
   return function Moonbase() {
+    const { Text } = require("common_components");
+
     const { extensions } = Flux.useStateFromStoresObject(
       [MoonbaseSettingsStore],
       () => {
···
 
     return (
       <>
+        <Text
+          style={{
+            "margin-bottom": "16px"
+          }}
+          variant="heading-lg/semibold"
+          tag="h2"
+        >
+          Moonbase
+        </Text>
         {sorted.map((ext) => (
           <ExtensionCard id={ext.id} key={ext.id} />
         ))}