diff options
| author | Beebles <102569435+beebls@users.noreply.github.com> | 2024-08-31 16:41:58 -0600 |
|---|---|---|
| committer | Beebles <102569435+beebls@users.noreply.github.com> | 2025-08-01 06:54:40 -0600 |
| commit | 1a231bf03e5db38ba99edb6903757ce2f8172b8f (patch) | |
| tree | 333f3a6fcfe49e89129cfca14c456ae28955493a /frontend/src/components/MotdDisplay.tsx | |
| parent | edf6b54db4bff465020a49ea4a50b3283723f55e (diff) | |
| download | decky-loader-1a231bf03e5db38ba99edb6903757ce2f8172b8f.tar.gz decky-loader-1a231bf03e5db38ba99edb6903757ce2f8172b8f.zip | |
rename motd to announcements and implement new API
Diffstat (limited to 'frontend/src/components/MotdDisplay.tsx')
| -rw-r--r-- | frontend/src/components/MotdDisplay.tsx | 112 |
1 files changed, 0 insertions, 112 deletions
diff --git a/frontend/src/components/MotdDisplay.tsx b/frontend/src/components/MotdDisplay.tsx deleted file mode 100644 index d5236d88..00000000 --- a/frontend/src/components/MotdDisplay.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { DialogButton, Focusable, PanelSection } from '@decky/ui'; -import { useEffect, useMemo, useState } from 'react'; -import { FaTimes } from 'react-icons/fa'; - -import { Motd, getMotd } from '../store'; -import { useSetting } from '../utils/hooks/useSetting'; - -const SEVERITIES = { - High: { - color: '#bb1414', - text: '#fff', - }, - Medium: { - color: '#bbbb14', - text: '#fff', - }, - Low: { - color: '#1488bb', - text: '#fff', - }, -}; - -const welcomeMotd: Motd = { - id: 'welcomeMotd', - name: 'Welcome to Decky!', - date: Date.now().toString(), - description: 'We hope you enjoy using Decky! If you have any questions or feedback, please let us know.', - severity: 'Low', -}; - -export function MotdDisplay() { - const [motd, setMotd] = useState<Motd | null>(null); - // showWelcome will display a welcome motd, the welcome motd has an id of "welcome" and once that is saved to hiddenMotdId, it will not show again - const [hiddenMotdId, setHiddenMotdId] = useSetting('hiddenMotdId', 'showWelcome'); - - async function fetchMotd() { - const motd = await getMotd(); - motd && setMotd(motd); - } - - useEffect(() => { - void fetchMotd(); - }, []); - - useEffect(() => { - if (hiddenMotdId === 'showWelcome') { - setMotd(welcomeMotd); - } - }, [hiddenMotdId]); - - function hideMotd() { - if (motd) { - setHiddenMotdId(motd.id); - void fetchMotd(); - } - } - - const hidden = useMemo(() => { - return hiddenMotdId === motd?.id; - }, [hiddenMotdId, motd]); - - if (!motd || !motd?.name || hidden) { - return null; - } - - const severity = SEVERITIES[motd?.severity || 'Low']; - - return ( - <PanelSection> - <Focusable - style={{ - // Transparency is 20% of the color - backgroundColor: `${severity.color}33`, - color: severity.text, - borderColor: severity.color, - borderWidth: '2px', - borderStyle: 'solid', - padding: '0.7rem', - display: 'flex', - flexDirection: 'column', - position: 'relative', - }} - > - <div style={{ display: 'flex', justifyContent: 'space-between' }}> - <span style={{ fontWeight: 'bold' }}>{motd?.name}</span> - <DialogButton - style={{ - width: '1rem', - minWidth: '1rem', - height: '1rem', - padding: '0', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - position: 'absolute', - top: '.75rem', - right: '.75rem', - }} - onClick={hideMotd} - > - <FaTimes - style={{ - height: '.75rem', - }} - /> - </DialogButton> - </div> - <span style={{ fontSize: '0.75rem', whiteSpace: 'pre-line' }}>{motd?.description}</span> - </Focusable> - </PanelSection> - ); -} |
