From f6144f9634482d6bd0ed88a31495c6c6c88add96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81lvaro=20Cuesta?= <1827495+alvaro-cuesta@users.noreply.github.com> Date: Thu, 2 Jan 2025 20:38:40 +0100 Subject: feat: sync with local plugin status in store (#733) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: useDeckyState proper type and safety * refactor: plugin list Avoids unneeded re-renders. See https://react.dev/learn/you-might-not-need-an-effect#caching-expensive-calculations * feat: sync with local plugin status in store Adds some QoL changes to the plugin store browser: - Add ✓ icon to currently installed plugin version in version selector - Change install button label depending on the install type that the button would trigger - Adds icon to install button for clarity The goal is to make it clear to the user what the current state of the installed plugin is, and what would be the impact of installing the selected version. Resolves #360 * lint: prettier * fix: add missing translations * refactor: safer translation strings on install Prefer using `t(...)` instead of `TranslationHelper` since it ensures that the translation keys are not missing in the locale files when running the `extractext` task. By adding comments with `t(...)` calls, `i18next-parser` will generate the strings as if they were present as literals in the code (see https://github.com/i18next/i18next-parser#caveats). This does _not_ suppress the warnings (since `i18next-parser` does not have access to TS types, so it cannot infer template literals) but it at least makes it less likely that a translation will be missed by mistake, have typos, etc. --- backend/decky_loader/browser.py | 4 +- backend/decky_loader/locales/en-US.json | 25 +++++++- frontend/src/components/DeckyState.tsx | 12 +++- frontend/src/components/PluginView.tsx | 44 ++++++------- .../modals/MultiplePluginsInstallModal.tsx | 37 ++++++++--- .../src/components/modals/PluginInstallModal.tsx | 66 +++++++++++-------- frontend/src/components/store/PluginCard.tsx | 73 +++++++++++++++++----- frontend/src/components/store/Store.tsx | 10 ++- frontend/src/plugin-loader.tsx | 8 ++- frontend/src/plugin.ts | 12 ++++ frontend/src/utils/TranslationHelper.tsx | 19 +----- 11 files changed, 211 insertions(+), 99 deletions(-) diff --git a/backend/decky_loader/browser.py b/backend/decky_loader/browser.py index aa108c59..64ecfb78 100644 --- a/backend/decky_loader/browser.py +++ b/backend/decky_loader/browser.py @@ -29,6 +29,8 @@ class PluginInstallType(IntEnum): INSTALL = 0 REINSTALL = 1 UPDATE = 2 + DOWNGRADE = 3 + OVERWRITE = 4 class PluginInstallRequest(TypedDict): name: str @@ -323,5 +325,5 @@ class PluginBrowser: if name in plugin_order: plugin_order.remove(name) self.settings.setSetting("pluginOrder", plugin_order) - + logger.debug("Removed any settings for plugin %s", name) diff --git a/backend/decky_loader/locales/en-US.json b/backend/decky_loader/locales/en-US.json index 23566026..7cbc2a8b 100644 --- a/backend/decky_loader/locales/en-US.json +++ b/backend/decky_loader/locales/en-US.json @@ -52,7 +52,9 @@ "MultiplePluginsInstallModal": { "confirm": "Are you sure you want to make the following modifications?", "description": { + "downgrade": "Downgrade {{name}} to {{version}}", "install": "Install {{name}} {{version}}", + "overwrite": "Overwrite {{name}} with {{version}}", "reinstall": "Reinstall {{name}} {{version}}", "update": "Update {{name}} to {{version}}" }, @@ -61,10 +63,14 @@ "loading": "Working" }, "title": { + "downgrade_one": "Downgrade 1 plugin", + "downgrade_other": "Downgrade {{count}} plugins", "install_one": "Install 1 plugin", "install_other": "Install {{count}} plugins", "mixed_one": "Modify {{count}} plugin", "mixed_other": "Modify {{count}} plugins", + "overwrite_one": "Overwrite 1 plugin", + "overwrite_other": "Overwrite {{count}} plugins", "reinstall_one": "Reinstall 1 plugin", "reinstall_other": "Reinstall {{count}} plugins", "update_one": "Update 1 plugin", @@ -72,12 +78,22 @@ } }, "PluginCard": { + "plugin_downgrade": "Downgrade", "plugin_full_access": "This plugin has full access to your Steam Deck.", "plugin_install": "Install", "plugin_no_desc": "No description provided.", + "plugin_overwrite": "Overwrite", + "plugin_reinstall": "Reinstall", + "plugin_update": "Update", "plugin_version_label": "Plugin Version" }, "PluginInstallModal": { + "downgrade": { + "button_idle": "Downgrade", + "button_processing": "Downgrading", + "desc": "Are you sure you want to downgrade {{artifact}} to version {{version}}?", + "title": "Downgrade {{artifact}}" + }, "install": { "button_idle": "Install", "button_processing": "Installing", @@ -85,6 +101,13 @@ "title": "Install {{artifact}}" }, "no_hash": "This plugin does not have a hash, you are installing it at your own risk.", + "not_installed": "(not installed)", + "overwrite": { + "button_idle": "Overwrite", + "button_processing": "Overwriting", + "desc": "Are you sure you want to overwrite {{artifact}} with version {{version}}?", + "title": "Overwrite {{artifact}}" + }, "reinstall": { "button_idle": "Reinstall", "button_processing": "Reinstalling", @@ -94,7 +117,7 @@ "update": { "button_idle": "Update", "button_processing": "Updating", - "desc": "Are you sure you want to update {{artifact}} {{version}}?", + "desc": "Are you sure you want to update {{artifact}} to version {{version}}?", "title": "Update {{artifact}}" } }, diff --git a/frontend/src/components/DeckyState.tsx b/frontend/src/components/DeckyState.tsx index 75106e62..d2ac63ae 100644 --- a/frontend/src/components/DeckyState.tsx +++ b/frontend/src/components/DeckyState.tsx @@ -128,9 +128,17 @@ interface DeckyStateContext extends PublicDeckyState { closeActivePlugin(): void; } -const DeckyStateContext = createContext(null as any); +const DeckyStateContext = createContext(null); -export const useDeckyState = () => useContext(DeckyStateContext); +export const useDeckyState = () => { + const deckyState = useContext(DeckyStateContext); + + if (deckyState === null) { + throw new Error('useDeckyState needs a parent DeckyStateContext'); + } + + return deckyState; +}; interface Props { deckyState: DeckyState; diff --git a/frontend/src/components/PluginView.tsx b/frontend/src/components/PluginView.tsx index 19afbca5..1d39972e 100644 --- a/frontend/src/components/PluginView.tsx +++ b/frontend/src/components/PluginView.tsx @@ -1,27 +1,26 @@ import { ButtonItem, ErrorBoundary, Focusable, PanelSection, PanelSectionRow } from '@decky/ui'; -import { FC, useEffect, useState } from 'react'; +import { FC, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { FaEyeSlash } from 'react-icons/fa'; -import { Plugin } from '../plugin'; import { useDeckyState } from './DeckyState'; import NotificationBadge from './NotificationBadge'; import { useQuickAccessVisible } from './QuickAccessVisibleState'; import TitleView from './TitleView'; const PluginView: FC = () => { - const { hiddenPlugins } = useDeckyState(); - const { plugins, updates, activePlugin, pluginOrder, setActivePlugin, closeActivePlugin } = useDeckyState(); + const { plugins, hiddenPlugins, updates, activePlugin, pluginOrder, setActivePlugin, closeActivePlugin } = + useDeckyState(); const visible = useQuickAccessVisible(); const { t } = useTranslation(); - 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))); + const pluginList = useMemo(() => { console.log('updating PluginView after changes'); + + return [...plugins] + .sort((a, b) => pluginOrder.indexOf(a.name) - pluginOrder.indexOf(b.name)) + .filter((p) => p.content) + .filter(({ name }) => !hiddenPlugins.includes(name)); }, [plugins, pluginOrder]); if (activePlugin) { @@ -43,20 +42,17 @@ const PluginView: FC = () => { }} > - {pluginList - .filter((p) => p.content) - .filter(({ name }) => !hiddenPlugins.includes(name)) - .map(({ name, icon }) => ( - - setActivePlugin(name)}> -
- {icon} -
{name}
- -
- - - ))} + {pluginList.map(({ name, icon }) => ( + + setActivePlugin(name)}> +
+ {icon} +
{name}
+ +
+ + + ))} {hiddenPlugins.length > 0 && (
diff --git a/frontend/src/components/modals/MultiplePluginsInstallModal.tsx b/frontend/src/components/modals/MultiplePluginsInstallModal.tsx index ba49ba92..9c86f3db 100644 --- a/frontend/src/components/modals/MultiplePluginsInstallModal.tsx +++ b/frontend/src/components/modals/MultiplePluginsInstallModal.tsx @@ -3,7 +3,7 @@ import { FC, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { FaCheck, FaDownload } from 'react-icons/fa'; -import { InstallType } from '../../plugin'; +import { InstallType, InstallTypeTranslationMapping } from '../../plugin'; interface MultiplePluginsInstallModalProps { requests: { name: string; version: string; hash: string; install_type: InstallType }[]; @@ -12,13 +12,7 @@ interface MultiplePluginsInstallModalProps { closeModal?(): void; } -// values are the JSON keys used in the translation file -const InstallTypeTranslationMapping = { - [InstallType.INSTALL]: 'install', - [InstallType.REINSTALL]: 'reinstall', - [InstallType.UPDATE]: 'update', -} as const satisfies Record; - +// IMPORTANT! Keep in sync with `t(...)` comments below type TitleTranslationMapping = 'mixed' | (typeof InstallTypeTranslationMapping)[InstallType]; const MultiplePluginsInstallModal: FC = ({ @@ -70,6 +64,8 @@ const MultiplePluginsInstallModal: FC = ({ if (requests.every(({ install_type }) => install_type === InstallType.INSTALL)) return 'install'; if (requests.every(({ install_type }) => install_type === InstallType.REINSTALL)) return 'reinstall'; if (requests.every(({ install_type }) => install_type === InstallType.UPDATE)) return 'update'; + if (requests.every(({ install_type }) => install_type === InstallType.DOWNGRADE)) return 'downgrade'; + if (requests.every(({ install_type }) => install_type === InstallType.OVERWRITE)) return 'overwrite'; return 'mixed'; }, [requests]); @@ -86,14 +82,35 @@ const MultiplePluginsInstallModal: FC = ({ onCancel={async () => { await onCancel(); }} - strTitle={
{t(`MultiplePluginsInstallModal.title.${installTypeGrouped}`, { count: requests.length })}
} - strOKButtonText={t(`MultiplePluginsInstallModal.ok_button.${loading ? 'loading' : 'idle'}`)} + strTitle={ +
+ { + // IMPORTANT! These comments are not cosmetic and are needed for `extracttext` task to work + // t('MultiplePluginsInstallModal.title.install', { count: n }) + // t('MultiplePluginsInstallModal.title.reinstall', { count: n }) + // t('MultiplePluginsInstallModal.title.update', { count: n }) + // t('MultiplePluginsInstallModal.title.downgrade', { count: n }) + // t('MultiplePluginsInstallModal.title.overwrite', { count: n }) + // t('MultiplePluginsInstallModal.title.mixed', { count: n }) + t(`MultiplePluginsInstallModal.title.${installTypeGrouped}`, { count: requests.length }) + } +
+ } + strOKButtonText={ + loading ? t('MultiplePluginsInstallModal.ok_button.loading') : t('MultiplePluginsInstallModal.ok_button.idle') + } >
{t('MultiplePluginsInstallModal.confirm')}
    {requests.map(({ name, version, install_type, hash }, i) => { const installTypeStr = InstallTypeTranslationMapping[install_type]; + // IMPORTANT! These comments are not cosmetic and are needed for `extracttext` task to work + // t('MultiplePluginsInstallModal.description.install') + // t('MultiplePluginsInstallModal.description.reinstall') + // t('MultiplePluginsInstallModal.description.update') + // t('MultiplePluginsInstallModal.description.downgrade') + // t('MultiplePluginsInstallModal.description.overwrite') const description = t(`MultiplePluginsInstallModal.description.${installTypeStr}`, { name, version, diff --git a/frontend/src/components/modals/PluginInstallModal.tsx b/frontend/src/components/modals/PluginInstallModal.tsx index 227bd818..16419d91 100644 --- a/frontend/src/components/modals/PluginInstallModal.tsx +++ b/frontend/src/components/modals/PluginInstallModal.tsx @@ -2,13 +2,13 @@ import { ConfirmModal, Navigation, ProgressBarWithInfo, QuickAccessTab } from '@ import { FC, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import TranslationHelper, { TranslationClass } from '../../utils/TranslationHelper'; +import { InstallType, InstallTypeTranslationMapping } from '../../plugin'; interface PluginInstallModalProps { artifact: string; version: string; hash: string; - installType: number; + installType: InstallType; onOK(): void; onCancel(): void; closeModal?(): void; @@ -44,6 +44,8 @@ const PluginInstallModal: FC = ({ }; }, []); + const installTypeTranslationKey = InstallTypeTranslationMapping[installType]; + return ( = ({ }} strTitle={
    - + { + // IMPORTANT! These comments are not cosmetic and are needed for `extracttext` task to work + // t('PluginInstallModal.install.title') + // t('PluginInstallModal.reinstall.title') + // t('PluginInstallModal.update.title') + // t('PluginInstallModal.downgrade.title') + // t('PluginInstallModal.overwrite.title') + t(`PluginInstallModal.${installTypeTranslationKey}.title`, { artifact: artifact }) + } {loading && (
    = ({ strOKButtonText={ loading ? (
    - + { + // IMPORTANT! These comments are not cosmetic and are needed for `extracttext` task to work + // t('PluginInstallModal.install.button_processing') + // t('PluginInstallModal.reinstall.button_processing') + // t('PluginInstallModal.update.button_processing') + // t('PluginInstallModal.downgrade.button_processing') + // t('PluginInstallModal.overwrite.button_processing') + t(`PluginInstallModal.${installTypeTranslationKey}.button_processing`) + }
    ) : (
    - + { + // IMPORTANT! These comments are not cosmetic and are needed for `extracttext` task to work + // t('PluginInstallModal.install.button_idle') + // t('PluginInstallModal.reinstall.button_idle') + // t('PluginInstallModal.update.button_idle') + // t('PluginInstallModal.downgrade.button_idle') + // t('PluginInstallModal.overwrite.button_idle') + t(`PluginInstallModal.${installTypeTranslationKey}.button_idle`) + }
    ) } >
    - + }) + }
    {hash == 'False' && {t('PluginInstallModal.no_hash')}} diff --git a/frontend/src/components/store/PluginCard.tsx b/frontend/src/components/store/PluginCard.tsx index 6e2a3510..f64abd09 100644 --- a/frontend/src/components/store/PluginCard.tsx +++ b/frontend/src/components/store/PluginCard.tsx @@ -1,18 +1,32 @@ import { ButtonItem, Dropdown, Focusable, PanelSectionRow, SingleDropdownOption, SuspensefulImage } from '@decky/ui'; import { CSSProperties, FC, useState } from 'react'; import { useTranslation } from 'react-i18next'; +import { FaArrowDown, FaArrowUp, FaCheck, FaDownload, FaRecycle } from 'react-icons/fa'; -import { InstallType } from '../../plugin'; -import { StorePlugin, StorePluginVersion, requestPluginInstall } from '../../store'; +import { InstallType, Plugin } from '../../plugin'; +import { StorePlugin, requestPluginInstall } from '../../store'; import ExternalLink from '../ExternalLink'; interface PluginCardProps { - plugin: StorePlugin; + storePlugin: StorePlugin; + installedPlugin: Plugin | undefined; } -const PluginCard: FC = ({ plugin }) => { +const PluginCard: FC = ({ storePlugin, installedPlugin }) => { const [selectedOption, setSelectedOption] = useState(0); - const root = plugin.tags.some((tag) => tag === 'root'); + const installedVersionIndex = storePlugin.versions.findIndex((version) => version.name === installedPlugin?.version); + const installType = // This assumes index in options is inverse to update order (i.e. newer updates are first) + installedPlugin && selectedOption < installedVersionIndex + ? InstallType.UPDATE + : installedPlugin && selectedOption === installedVersionIndex + ? InstallType.REINSTALL + : installedPlugin && selectedOption > installedVersionIndex + ? InstallType.DOWNGRADE + : installedPlugin // can happen if installed version is not in store + ? InstallType.OVERWRITE + : InstallType.INSTALL; + + const root = storePlugin.tags.some((tag) => tag === 'root'); const { t } = useTranslation(); @@ -43,7 +57,7 @@ const PluginCard: FC = ({ plugin }) => { height: '200px', objectFit: 'cover', }} - src={plugin.image_url} + src={storePlugin.image_url} />
    = ({ plugin }) => { width: '90%', }} > - {plugin.name} + {storePlugin.name} = ({ plugin }) => { fontSize: '1em', }} > - {plugin.author} + {storePlugin.author} = ({ plugin }) => { display: '-webkit-box', }} > - {plugin.description ? ( - plugin.description + {storePlugin.description ? ( + storePlugin.description ) : ( {t('PluginCard.plugin_no_desc')} @@ -141,18 +155,49 @@ const PluginCard: FC = ({ plugin }) => { bottomSeparator="none" layout="below" onClick={() => - requestPluginInstall(plugin.name, plugin.versions[selectedOption], InstallType.INSTALL) + requestPluginInstall(storePlugin.name, storePlugin.versions[selectedOption], installType) } > - {t('PluginCard.plugin_install')} + + {installType === InstallType.UPDATE ? ( + <> + {t('PluginCard.plugin_update')} + + ) : installType === InstallType.REINSTALL ? ( + <> + {t('PluginCard.plugin_reinstall')} + + ) : installType === InstallType.DOWNGRADE ? ( + <> + {t('PluginCard.plugin_downgrade')} + + ) : installType === InstallType.OVERWRITE ? ( + <> + {t('PluginCard.plugin_overwrite')} + + ) : ( + // installType === InstallType.INSTALL (also fallback) + <> + {t('PluginCard.plugin_install')} + + )} +
    ({ + storePlugin.versions.map((version, index) => ({ data: index, - label: version.name, + label: ( +
    + {version.name} + {installedPlugin && installedVersionIndex === index ? : null} +
    + ), })) as SingleDropdownOption[] } menuLabel={t('PluginCard.plugin_version_label') as string} diff --git a/frontend/src/components/store/Store.tsx b/frontend/src/components/store/Store.tsx index 1094b243..3209ba08 100644 --- a/frontend/src/components/store/Store.tsx +++ b/frontend/src/components/store/Store.tsx @@ -14,6 +14,7 @@ import { useTranslation } from 'react-i18next'; import logo from '../../../assets/plugin_store.png'; import Logger from '../../logger'; import { SortDirections, SortOptions, Store, StorePlugin, getPluginList, getStore } from '../../store'; +import { useDeckyState } from '../DeckyState'; import ExternalLink from '../ExternalLink'; import PluginCard from './PluginCard'; @@ -104,6 +105,8 @@ const BrowseTab: FC<{ setPluginCount: Dispatch> }> })(); }, []); + const { plugins: installedPlugins } = useDeckyState(); + return ( <>