1 files changed, 13 insertions, 3 deletions
diff --git a/frontend/src/components/PluginView.tsx b/frontend/src/components/PluginView.tsx
index 630cc962..3ecc2c86 100644
--- a/frontend/src/components/PluginView.tsx
+++ b/frontend/src/components/PluginView.tsx
@@ -7,17 +7,27 @@ import {
   scrollClasses,
   staticClasses,
 } from 'decky-frontend-lib';
-import { VFC } from 'react';
+import { VFC, useEffect, useState } from 'react';
 
+import { Plugin } from '../plugin';
 import { useDeckyState } from './DeckyState';
 import NotificationBadge from './NotificationBadge';
 import { useQuickAccessVisible } from './QuickAccessVisibleState';
 import TitleView from './TitleView';
 
 const PluginView: VFC = () => {
-  const { plugins, updates, activePlugin, setActivePlugin, closeActivePlugin } = useDeckyState();
+  const { plugins, updates, activePlugin, pluginOrder, setActivePlugin, closeActivePlugin } = useDeckyState();
   const visible = useQuickAccessVisible();
 
+  const [pluginList, setPluginList] = useState<Plugin[]>(
+    plugins.sort((a, b) => pluginOrder.indexOf(a.name) - pluginOrder.indexOf(b.name)),
+  );
+
+  useEffect(() => {
+    setPluginList(plugins.sort((a, b) => pluginOrder.indexOf(a.name) - pluginOrder.indexOf(b.name)));
+    console.log('updating PluginView after changes');
+  }, [plugins, pluginOrder]);
+
   if (activePlugin) {
     return (
       <Focusable onCancelButton={closeActivePlugin}>
@@ -36,7 +46,7 @@ const PluginView: VFC = () => {
       <TitleView />
       <div className={joinClassNames(staticClasses.TabGroupPanel, scrollClasses.ScrollPanel, scrollClasses.ScrollY)}>
         <PanelSection>
-          {plugins
+          {pluginList
             .filter((p) => p.content)
             .map(({ name, icon }) => (
               <PanelSectionRow key={name}>