From 0f36e87ccea0d9bf2a3db8ee858f27d9d1b2d796 Mon Sep 17 00:00:00 2001 From: Travis Lane <63308171+Tormak9970@users.noreply.github.com> Date: Mon, 3 Apr 2023 17:21:31 -0400 Subject: 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 --- frontend/src/components/DeckyState.tsx | 19 ++- frontend/src/components/PluginView.tsx | 16 ++- .../settings/pages/plugin_list/index.tsx | 128 +++++++++++++-------- 3 files changed, 112 insertions(+), 51 deletions(-) (limited to 'frontend/src/components') diff --git a/frontend/src/components/DeckyState.tsx b/frontend/src/components/DeckyState.tsx index 283fb118..67d4b78e 100644 --- a/frontend/src/components/DeckyState.tsx +++ b/frontend/src/components/DeckyState.tsx @@ -6,6 +6,7 @@ import { VerInfo } from '../updater'; interface PublicDeckyState { plugins: Plugin[]; + pluginOrder: string[]; activePlugin: Plugin | null; updates: PluginUpdateMapping | null; hasLoaderUpdate?: boolean; @@ -15,6 +16,7 @@ interface PublicDeckyState { export class DeckyState { private _plugins: Plugin[] = []; + private _pluginOrder: string[] = []; private _activePlugin: Plugin | null = null; private _updates: PluginUpdateMapping | null = null; private _hasLoaderUpdate: boolean = false; @@ -26,6 +28,7 @@ export class DeckyState { publicState(): PublicDeckyState { return { plugins: this._plugins, + pluginOrder: this._pluginOrder, activePlugin: this._activePlugin, updates: this._updates, hasLoaderUpdate: this._hasLoaderUpdate, @@ -44,6 +47,11 @@ export class DeckyState { this.notifyUpdate(); } + setPluginOrder(pluginOrder: string[]) { + this._pluginOrder = pluginOrder; + this.notifyUpdate(); + } + setActivePlugin(name: string) { this._activePlugin = this._plugins.find((plugin) => plugin.name === name) ?? null; this.notifyUpdate(); @@ -78,6 +86,7 @@ interface DeckyStateContext extends PublicDeckyState { setVersionInfo(versionInfo: VerInfo): void; setIsLoaderUpdating(hasUpdate: boolean): void; setActivePlugin(name: string): void; + setPluginOrder(pluginOrder: string[]): void; closeActivePlugin(): void; } @@ -106,10 +115,18 @@ export const DeckyStateContextProvider: FC = ({ children, deckyState }) = const setVersionInfo = (versionInfo: VerInfo) => deckyState.setVersionInfo(versionInfo); const setActivePlugin = (name: string) => deckyState.setActivePlugin(name); const closeActivePlugin = () => deckyState.closeActivePlugin(); + const setPluginOrder = (pluginOrder: string[]) => deckyState.setPluginOrder(pluginOrder); return ( {children} 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( + 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 ( @@ -36,7 +46,7 @@ const PluginView: VFC = () => {
- {plugins + {pluginList .filter((p) => p.content) .map(({ name, icon }) => ( diff --git a/frontend/src/components/settings/pages/plugin_list/index.tsx b/frontend/src/components/settings/pages/plugin_list/index.tsx index 48894031..d9a85e9f 100644 --- a/frontend/src/components/settings/pages/plugin_list/index.tsx +++ b/frontend/src/components/settings/pages/plugin_list/index.tsx @@ -2,24 +2,93 @@ import { DialogBody, DialogButton, DialogControlsSection, - Focusable, + GamepadEvent, Menu, MenuItem, + ReorderableEntry, + ReorderableList, showContextMenu, } from 'decky-frontend-lib'; -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import { FaDownload, FaEllipsisH } from 'react-icons/fa'; -import { requestPluginInstall } from '../../../../store'; +import { StorePluginVersion, requestPluginInstall } from '../../../../store'; +import { useSetting } from '../../../../utils/hooks/useSetting'; import { useDeckyState } from '../../../DeckyState'; +function PluginInteractables(props: { entry: ReorderableEntry }) { + const data = props.entry.data; + + const showCtxMenu = (e: MouseEvent | GamepadEvent) => { + showContextMenu( + + window.DeckyPluginLoader.importPlugin(props.entry.label, data?.version)}> + Reload + + window.DeckyPluginLoader.uninstallPlugin(props.entry.label)}>Uninstall + , + e.currentTarget ?? window, + ); + }; + + return ( + <> + {data?.update && ( + requestPluginInstall(props.entry.label, data?.update as StorePluginVersion)} + onOKButton={() => requestPluginInstall(props.entry.label, data?.update as StorePluginVersion)} + > +
+ Update to {data?.update?.name} + +
+ + )} + + + + + ); +} + +type PluginData = { + update?: StorePluginVersion; + version?: string; +}; + export default function PluginList() { - const { plugins, updates } = useDeckyState(); + const { plugins, updates, pluginOrder, setPluginOrder } = useDeckyState(); + const [_, setPluginOrderSetting] = useSetting( + 'pluginOrder', + plugins.map((plugin) => plugin.name), + ); useEffect(() => { window.DeckyPluginLoader.checkPluginUpdates(); }, []); + const [pluginEntries, setPluginEntries] = useState[]>([]); + + useEffect(() => { + setPluginEntries( + plugins.map((plugin) => { + return { + label: plugin.name, + data: { + update: updates?.get(plugin.name), + version: plugin.version, + }, + position: pluginOrder.indexOf(plugin.name), + }; + }), + ); + }, [plugins, updates]); + if (plugins.length === 0) { return (
@@ -28,52 +97,17 @@ export default function PluginList() { ); } + function onSave(entries: ReorderableEntry[]) { + const newOrder = entries.map((entry) => entry.label); + console.log(newOrder); + setPluginOrder(newOrder); + setPluginOrderSetting(newOrder); + } + return ( -
    - {plugins.map(({ name, version }) => { - const update = updates?.get(name); - return ( -
  • - - {name} {'(' + version + ')'} - - - {update && ( - requestPluginInstall(name, update)} - > -
    - Update to {update.name} - -
    -     - )} - - showContextMenu( - - window.DeckyPluginLoader.importPlugin(name, version)}> - Reload - - window.DeckyPluginLoader.uninstallPlugin(name)}> - Uninstall - - , - e.currentTarget ?? window, - ) - } - > - - -     -
    • - ); - })} -
+ entries={pluginEntries} onSave={onSave} interactables={PluginInteractables} /> ); -- cgit v1.2.3