display overhaul, compatibility with legacy plugins, fixes

frontend/src/components/LegacyPlugin.tsx

@@ -0,0 +1,13 @@
+import React from "react"
+
+class LegacyPlugin extends React.Component {
+    constructor(props: object) {
+        super(props);
+    }
+
+    render() {
+        return <iframe style={{ border: 'none', width: '100%', height: '100%' }} src={this.props.url}></iframe>
+    }
+}
+
+export default LegacyPlugin;

frontend/src/components/PluginView.tsx

@@ -0,0 +1,40 @@
+import { Button } from "decky-frontend-lib";
+import React from "react"
+
+class PluginView extends React.Component<{}, { runningPlugin: string, plugins: Array<any> }> {
+    constructor() {
+        super({});
+        this.state = {
+            plugins: [],
+            runningPlugin: ""
+        }
+    }
+
+    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 }) });
+    }
+
+    private openPlugin(name: string) {
+        const ev = new Event("pluginOpen");
+        ev.data = name;
+        window.__DeckyEvLoop.dispatchEvent(ev);
+        this.setState({ runningPlugin: name, plugins: this.state.plugins })
+    }
+
+    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;
+        }
+    }
+}
+
+export default PluginView;

frontend/src/components/TitleView.tsx

@@ -0,0 +1,39 @@
+import { Button, staticClasses } from "decky-frontend-lib";
+import React from "react"
+import { FaArrowCircleLeft, FaShoppingBag } from "react-icons/fa"
+
+class TitleView extends React.Component<{}, { runningPlugin: string }> {
+    constructor() {
+        super({});
+        this.state = {
+            runningPlugin: ""
+        }
+    }
+
+    componentDidMount() {
+        window.__DeckyEvLoop.addEventListener("pluginOpen", (ev) => this.setState({ runningPlugin: ev.data }));
+        window.__DeckyEvLoop.addEventListener("pluginClose", (_) => this.setState({ runningPlugin: "" }));
+    }
+
+    private openPluginStore() {
+        fetch("http://127.0.0.1:1337/methods/open_plugin_store", {method: "POST"})
+    }
+
+    render() {
+        if (this.state.runningPlugin)
+            return <div className={staticClasses.Title}>
+                <Button bottomSeparator={false}  onClick={(_) => {
+                    window.__DeckyEvLoop.dispatchEvent(new Event("pluginClose"));
+                    this.setState({ runningPlugin: "" });
+                }}><FaArrowCircleLeft /></Button>
+                {this.state.runningPlugin}
+            </div>
+        else
+            return <div className={staticClasses.Title}>
+                    Plugins
+                    <Button bottomSeparator={false} onClick={ (_) => this.openPluginStore() }><FaShoppingBag /></Button>
+                </div>
+    }
+}
+
+export default TitleView;