Add reload notice if plugin requires it

i18n/en-US.messages.d.ts

@@ -215,6 +215,19 @@ export declare const messages: {
    * Missing translations: `bg`, `da`, `el`, `es-419`, `hi`, `hr`, `lt`, `ro`, `th`
    */
   'REPLUGGED_ADDON_RELOAD': TypedIntlMessageGetter<{type: any}>,
+  /**
+   * Key: `2hkkZ2`
+   * 
+   * ### Definition
+   * ```text
+   * Reload might be required to apply changes!
+   * ```
+   * 
+   * ### Problems
+   * 
+   * Missing translations: `bg`, `cs`, `da`, `de`, `el`, `en-GB`, `es-419`, `es-ES`, `fi`, `fr`, `hi`, `hr`, `hu`, `it`, `ja`, `ko`, `lt`, `nl`, `no`, `pl`, `pt-BR`, `ro`, `ru`, `sv-SE`, `th`, `tr`, `uk`, `vi`, `zh-CN`, `zh-TW`
+   */
+  'REPLUGGED_ADDON_RELOAD_REQUIRED': TypedIntlMessageGetter<{}>,
   /**
    * Key: `rDXyPT`
    * 

i18n/en-US.messages.js

@@ -194,6 +194,7 @@ export default defineMessages({
   "REPLUGGED_STORE": "Store",
   "REPLUGGED_SETTINGS_CUSTOM_TITLE_BAR": "Custom Title Bar",
   "REPLUGGED_SETTINGS_CUSTOM_TITLE_BAR_DESC": "Use Discord's custom title bar instead of the system title bar. **Requires restart**.",
+  "REPLUGGED_ADDON_RELOAD_REQUIRED": "Reload might be required to apply changes!",
   "REPLUGGED_SETTINGS_DISCORD_DEVTOOLS": "Enable Discord Internal DevTools",
   "REPLUGGED_SETTINGS_DISCORD_DEVTOOLS_DESC": "Replaces the help button in the title bar with Discord's internal developer tools (different from Chrome DevTools). This setting requires Discord experiments to be enabled first. **Requires restart**.",
   "REPLUGGED_SETTINGS_QUICKCSS_ENABLE": "Enable Quick CSS",
@@ -210,4 +211,4 @@ export default defineMessages({
   "REPLUGGED_SETTINGS_WIN_UPDATER": "Keep Replugged After Updates",
   "REPLUGGED_SETTINGS_WIN_UPDATER_DESC": "Automatically reapplies Replugged after Discord updates.",
   "REPLUGGED_SETTINGS_DEVELOPMENT_TOOLS": "Development Tools"
-});
+});

i18n/messages/en-US.messages.json

@@ -189,6 +189,7 @@
   "REPLUGGED_STORE": "Store",
   "REPLUGGED_SETTINGS_CUSTOM_TITLE_BAR": "Custom Title Bar",
   "REPLUGGED_SETTINGS_CUSTOM_TITLE_BAR_DESC": "Use Discord's custom title bar instead of the system title bar. **Requires restart**.",
+  "REPLUGGED_ADDON_RELOAD_REQUIRED": "Reload might be required to apply changes!",
   "REPLUGGED_SETTINGS_DISCORD_DEVTOOLS": "Enable Discord Internal DevTools",
   "REPLUGGED_SETTINGS_DISCORD_DEVTOOLS_DESC": "Replaces the help button in the title bar with Discord's internal developer tools (different from Chrome DevTools). This setting requires Discord experiments to be enabled first. **Requires restart**.",
   "REPLUGGED_SETTINGS_QUICKCSS_ENABLE": "Enable Quick CSS",

src/renderer/coremods/settings/pages/Addons.css

@@ -34,3 +34,23 @@
 .replugged-addon-breadcrumbsInactive:hover {
   color: var(--header-primary);
 }
+
+.replugged-addon-reload-notice {
+  z-index: 999;
+  background: var(--background-base-lowest);
+  margin-top: 2.5em;
+  align-items: center;
+  position: fixed;
+  bottom: 4.5em;
+  max-width: 660px;
+  width: 100%;
+  opacity: 0.75;
+}
+
+.replugged-addon-reload-notice:hover {
+  opacity: 1;
+}
+
+.replugged-addon-reload-notice div {
+  align-items: inherit;
+}

src/renderer/coremods/settings/pages/Addons.tsx

@@ -393,13 +393,15 @@ function Cards({
   setDisabled,
   list,
   refreshList,
+  setRequiresReload,
 }: {
   type: AddonType;
   disabled: Set<string>;
   setSection: (section: string) => void;
   setDisabled: (disabled: Set<string>) => void;
   list: Array<RepluggedPlugin | RepluggedTheme>;
   refreshList: () => void;
+  setRequiresReload: React.Dispatch<React.SetStateAction<Set<string>>>;
 }): React.ReactElement {
   return (
     <Stack gap={16}>
@@ -441,6 +443,15 @@ function Cards({
                     name: addon.manifest.name,
                   }),
                 );
+                if (
+                  addon.manifest.type === "replugged-plugin" &&
+                  (addon.manifest.plaintextPatches || addon.manifest.reloadRequired)
+                )
+                  setRequiresReload((ids) => {
+                    if (ids.has(addon.manifest.id)) ids.delete(addon.manifest.id);
+                    else ids.add(addon.manifest.id);
+                    return ids;
+                  });
               } catch (e) {
                 logger.error("Error disabling", addon, e);
                 toast.toast(
@@ -471,6 +482,14 @@ function Cards({
                   name: addon.manifest.name,
                 }),
               );
+              if (
+                addon.manifest.type === "replugged-plugin" &&
+                (addon.manifest.plaintextPatches || addon.manifest.reloadRequired)
+              )
+                setRequiresReload((ids) => {
+                  ids.add(addon.manifest.id);
+                  return ids;
+                });
             } catch (e) {
               logger.error("Error uninstalling", addon, e);
               toast.toast(
@@ -519,6 +538,7 @@ export const Addons = (type: AddonType): React.ReactElement => {
   const [list, setList] = React.useState<Array<RepluggedPlugin | RepluggedTheme> | null>();
   const [unfilteredCount, setUnfilteredCount] = React.useState(0);
   const [section, setSection] = React.useState(`rp_${type}`);
+  const [requiresReload, setRequiresReload] = React.useState<Set<string>>(new Set());
 
   let SettingsElement: React.ComponentType | undefined;
 
@@ -677,6 +697,7 @@ export const Addons = (type: AddonType): React.ReactElement => {
               setDisabled={setDisabled}
               list={list}
               refreshList={refreshList}
+              setRequiresReload={setRequiresReload}
             />
           ) : list ? (
             <Text variant="heading-lg/bold" style={{ textAlign: "center" }}>
@@ -694,6 +715,20 @@ export const Addons = (type: AddonType): React.ReactElement => {
             </ErrorBoundary>
           )
         )}
+        {requiresReload.size && (
+          <Notice className="replugged-addon-reload-notice" messageType={Notice.Types.WARNING}>
+            <Flex justify={Flex.Justify.BETWEEN}>
+              <Text.Normal>{intl.string(t.REPLUGGED_ADDON_RELOAD_REQUIRED)}</Text.Normal>
+              <Button
+                color={Button.Colors.RED}
+                look={Button.Looks.OUTLINED}
+                size={Button.Sizes.TINY}
+                onClick={() => setTimeout(() => window.location.reload(), 250)}>
+                {intl.string(discordT.ERRORS_RELOAD)}
+              </Button>
+            </Flex>
+          </Notice>
+        )}
       </Stack>
     </FormSection>
   );