summaryrefslogtreecommitdiff
path: root/frontend/src/components/MotdDisplay.tsx
diff options
context:
space:
mode:
authorBeebles <102569435+beebls@users.noreply.github.com>2024-08-31 16:41:58 -0600
committerBeebles <102569435+beebls@users.noreply.github.com>2025-08-01 06:54:40 -0600
commit1a231bf03e5db38ba99edb6903757ce2f8172b8f (patch)
tree333f3a6fcfe49e89129cfca14c456ae28955493a /frontend/src/components/MotdDisplay.tsx
parentedf6b54db4bff465020a49ea4a50b3283723f55e (diff)
downloaddecky-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.tsx112
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>
- );
-}