Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add uninstall button to store #739

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat: add uninstall button to store #739

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
48f23fd
refactor: remove unused classnames
alvaro-cuesta Jan 2, 2025
ebc2f52
feat: add uninstall button to store
alvaro-cuesta Jan 2, 2025
bb69a9a
revert(48f23fd7): "refactor: remove unused classnames"
alvaro-cuesta Jan 17, 2025
3396928
revert(partial): restore "deckyStoreCardInstallContainer"
alvaro-cuesta Jan 17, 2025
cc89630
chore: remove unneeded formatting change
alvaro-cuesta Jan 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
160 changes: 78 additions & 82 deletions frontend/src/components/store/PluginCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { ButtonItem, Dropdown, Focusable, PanelSectionRow, SingleDropdownOption, SuspensefulImage } from '@decky/ui';
import { CSSProperties, FC, useState } from 'react';
import { DialogButton, Dropdown, Focusable, PanelSectionRow, SingleDropdownOption, SuspensefulImage } from '@decky/ui';
import { FC, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { FaArrowDown, FaArrowUp, FaCheck, FaDownload, FaRecycle } from 'react-icons/fa';
import { FaArrowDown, FaArrowUp, FaCheck, FaDownload, FaRecycle, FaTrash } from 'react-icons/fa';

import { InstallType, Plugin } from '../../plugin';
import { StorePlugin, requestPluginInstall } from '../../store';
Expand Down Expand Up @@ -32,7 +32,6 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {

return (
<div
className="deckyStoreCard"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These classes seemed unused.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

they exist for theme developers, keep them

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@AAGaming00 done. Also added a small warning documenting this.

style={{
marginLeft: '20px',
marginRight: '20px',
Expand All @@ -41,15 +40,13 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
}}
>
<div
className="deckyStoreCardImageContainer"
style={{
width: '320px',
height: '200px',
position: 'relative',
}}
>
<SuspensefulImage
className="deckyStoreCardImage"
suspenseHeight="200px"
suspenseWidth="320px"
style={{
Expand All @@ -61,7 +58,6 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
/>
</div>
<div
className="deckyStoreCardInfo"
style={{
width: 'calc(100% - 320px)', // The calc is here so that the info section doesn't expand into the image
display: 'flex',
Expand All @@ -73,7 +69,6 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
>
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
<span
className="deckyStoreCardTitle"
style={{
fontSize: '1.25em',
fontWeight: 'bold',
Expand All @@ -86,7 +81,6 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
{storePlugin.name}
</span>
<span
className="deckyStoreCardAuthor"
style={{
marginRight: 'auto',
fontSize: '1em',
Expand All @@ -95,7 +89,6 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
{storePlugin.author}
</span>
<span
className="deckyStoreCardDescription"
style={{
fontSize: '13px',
color: '#969696',
Expand All @@ -115,7 +108,6 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
</span>
{root && (
<div
className="deckyStoreCardDescription deckyStoreCardDescriptionRoot"
style={{
fontSize: '13px',
color: '#fee75c',
Expand All @@ -124,7 +116,6 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
>
<i>{t('PluginCard.plugin_full_access')}</i>{' '}
<ExternalLink
className="deckyStoreCardDescriptionRootLink"
href="https://deckbrew.xyz/root"
target="_blank"
style={{
Expand All @@ -137,77 +128,82 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
</div>
)}
</div>
<div className="deckyStoreCardButtonRow">
<PanelSectionRow>
<Focusable style={{ display: 'flex', gap: '5px', padding: 0 }}>
<div
className="deckyStoreCardInstallContainer"
style={
{
paddingTop: '0px',
paddingBottom: '0px',
flexGrow: 1,
'--field-negative-horizontal-margin': 0,
} as CSSProperties
}
<PanelSectionRow>
<Focusable style={{ display: 'flex', gap: '5px', padding: 0 }}>
<DialogButton
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
gap: '5px',
}}
onClick={() => requestPluginInstall(storePlugin.name, storePlugin.versions[selectedOption], installType)}
>
{installType === InstallType.UPDATE ? (
<>
<FaArrowUp /> {t('PluginCard.plugin_update')}
</>
) : installType === InstallType.REINSTALL ? (
<>
<FaRecycle /> {t('PluginCard.plugin_reinstall')}
</>
) : installType === InstallType.DOWNGRADE ? (
<>
<FaArrowDown /> {t('PluginCard.plugin_downgrade')}
</>
) : installType === InstallType.OVERWRITE ? (
<>
<FaDownload /> {t('PluginCard.plugin_overwrite')}
</>
) : (
// installType === InstallType.INSTALL (also fallback)
<>
<FaDownload /> {t('PluginCard.plugin_install')}
</>
)}
</DialogButton>
{installedPlugin && installedVersionIndex === selectedOption ? (
<DialogButton
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minWidth: '40px',
flex: '1 1',
padding: '0',
}}
onClick={() => {
DeckyPluginLoader.uninstallPlugin(
installedPlugin.name,
t('PluginLoader.plugin_uninstall.title', { name: installedPlugin.name }),
t('PluginLoader.plugin_uninstall.button'),
t('PluginLoader.plugin_uninstall.desc', { name: installedPlugin.name }),
);
}}
>
<ButtonItem
bottomSeparator="none"
layout="below"
onClick={() =>
requestPluginInstall(storePlugin.name, storePlugin.versions[selectedOption], installType)
}
>
<span
className="deckyStoreCardInstallText"
style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '5px' }}
>
{installType === InstallType.UPDATE ? (
<>
<FaArrowUp /> {t('PluginCard.plugin_update')}
</>
) : installType === InstallType.REINSTALL ? (
<>
<FaRecycle /> {t('PluginCard.plugin_reinstall')}
</>
) : installType === InstallType.DOWNGRADE ? (
<>
<FaArrowDown /> {t('PluginCard.plugin_downgrade')}
</>
) : installType === InstallType.OVERWRITE ? (
<>
<FaDownload /> {t('PluginCard.plugin_overwrite')}
</>
) : (
// installType === InstallType.INSTALL (also fallback)
<>
<FaDownload /> {t('PluginCard.plugin_install')}
</>
)}
</span>
</ButtonItem>
</div>
<div className="deckyStoreCardVersionContainer" style={{ minWidth: '130px' }}>
<Dropdown
rgOptions={
storePlugin.versions.map((version, index) => ({
data: index,
label: (
<div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
{version.name}
{installedPlugin && installedVersionIndex === index ? <FaCheck /> : null}
</div>
),
})) as SingleDropdownOption[]
}
menuLabel={t('PluginCard.plugin_version_label') as string}
selectedOption={selectedOption}
onChange={({ data }) => setSelectedOption(data)}
/>
</div>
</Focusable>
</PanelSectionRow>
</div>
<FaTrash />
</DialogButton>
) : null}
<div style={{ minWidth: '130px' }}>
<Dropdown
rgOptions={storePlugin.versions.map(
(version, index): SingleDropdownOption => ({
data: index,
label: (
<div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
{version.name}
{installedPlugin && installedVersionIndex === index ? <FaCheck /> : null}
</div>
),
}),
)}
menuLabel={t('PluginCard.plugin_version_label') as string}
selectedOption={selectedOption}
onChange={({ data }) => setSelectedOption(data)}
/>
</div>
</Focusable>
</PanelSectionRow>
</div>
</div>
);
Expand Down
5 changes: 0 additions & 5 deletions frontend/src/components/store/Store.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,11 +109,6 @@ const BrowseTab: FC<{ setPluginCount: Dispatch<SetStateAction<number | null>> }>

return (
<>
<style>{`
.deckyStoreCardInstallContainer > .Panel {
padding: 0;
}
`}</style>
{/* This should be used once filtering is added

<PanelSectionRow>
Expand Down