Add plugin reordering (#378)

* feat: started work on saving plugin order

* feat: implemented local ReorderableList

* feat: reoder complete except for usage of DFL

* switched to using dfl reorderableList

* fix: added missing file and removed frag

* updated to newest dfl

* Update defsettings.json

* fix: plugin order was missing on init

* fix: now await pluginOrder

* fix: moved the plugin-order load to plugin-loader

* chore: v6 and dfl bump

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}>