1 files changed, 34 insertions, 35 deletions
diff --git a/frontend/src/components/PluginView.tsx b/frontend/src/components/PluginView.tsx
index 27cb386a..b3640395 100644
--- a/frontend/src/components/PluginView.tsx
+++ b/frontend/src/components/PluginView.tsx
@@ -1,40 +1,39 @@
-import { Button } from "decky-frontend-lib";
-import React from "react"
+import { ButtonItem, DialogButton, PanelSection, PanelSectionRow } from 'decky-frontend-lib';
+import { VFC } from 'react';
+import { FaArrowLeft } from 'react-icons/fa';
 
-class PluginView extends React.Component<{}, { runningPlugin: string, plugins: Array<any> }> {
-    constructor() {
-        super({});
-        this.state = {
-            plugins: [],
-            runningPlugin: ""
-        }
-    }
+import { useDeckyState } from './DeckyState';
 
-    componentDidMount() {
-        window.__DeckyEvLoop.addEventListener("pluginClose", (_) => { this.setState({ runningPlugin: "", plugins: this.state.plugins }) });
-        window.__DeckyEvLoop.addEventListener("setPlugins", (ev) => { console.log(ev); this.setState({ plugins: ev.data, runningPlugin: this.state.runningPlugin }) });
-    }
+const PluginView: VFC = () => {
+  const { plugins, activePlugin, setActivePlugin, closeActivePlugin } = useDeckyState();
 
-    private openPlugin(name: string) {
-        const ev = new Event("pluginOpen");
-        ev.data = name;
-        window.__DeckyEvLoop.dispatchEvent(ev);
-        this.setState({ runningPlugin: name, plugins: this.state.plugins })
-    }
+  if (activePlugin) {
+    return (
+      <div>
+        <div style={{ position: 'absolute', top: '3px', left: '16px', zIndex: 20 }}>
+          <DialogButton style={{ minWidth: 0, padding: '10px 12px' }} onClick={closeActivePlugin}>
+            <FaArrowLeft style={{ display: 'block' }} />
+          </DialogButton>
+        </div>
+        {activePlugin.content}
+      </div>
+    );
+  }
 
-    render() {
-        if (this.state.runningPlugin) {
-            return this.state.plugins.find(x => x.name == this.state.runningPlugin).content;
-        }
-        else {
-            let buttons = [];
-            for (const plugin of this.state.plugins) {
-                buttons.push(<Button layout="below" onClick={(_) => this.openPlugin(plugin.name)}>{plugin.icon}{plugin.name}</Button>)
-            }
-            if (buttons.length == 0) return <div className='staticClasses.Text'>No plugins...</div>;
-            return buttons;
-        }
-    }
-}
+  return (
+    <PanelSection>
+      {plugins.map(({ name, icon }) => (
+        <PanelSectionRow key={name}>
+          <ButtonItem layout="below" onClick={() => setActivePlugin(name)}>
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <div>{icon}</div>
+              <div>{name}</div>
+            </div>
+          </ButtonItem>
+        </PanelSectionRow>
+      ))}
+    </PanelSection>
+  );
+};
 
-export default PluginView;
-\ No newline at end of file
+export default PluginView;