Add after option to setting plugin (#7056)

app/hooks/useSettingsConfig.ts

@@ -188,9 +188,11 @@ const useSettingsConfig = () => {
 
     // Plugins
     PluginManager.getHooks(Hook.Settings).forEach((plugin) => {
-      const insertIndex = items.findIndex(
-        (i) => i.group === t(plugin.value.group ?? "Integrations")
-      );
+      const insertIndex = plugin.value.after
+        ? items.findIndex((i) => i.name === t(plugin.value.after!)) + 1
+        : items.findIndex(
+            (i) => i.group === t(plugin.value.group ?? "Integrations")
+          );
       items.splice(insertIndex, 0, {
         name: t(plugin.name),
         path: integrationSettingsPath(plugin.id),

app/utils/PluginManager.ts

@@ -20,6 +20,8 @@ type PluginValueMap = {
   [Hook.Settings]: {
     /** The group in settings sidebar this plugin belongs to. */
     group: string;
+    /** An optional settings item to display this after. */
+    after?: string;
     /** The displayed icon of the plugin. */
     icon: React.ElementType;
     /** The settings screen somponent, should be lazy loaded. */