From 1a231bf03e5db38ba99edb6903757ce2f8172b8f Mon Sep 17 00:00:00 2001
From: Beebles <102569435+beebls@users.noreply.github.com>
Date: Sat, 31 Aug 2024 16:41:58 -0600
Subject: rename motd to announcements and implement new API

---
 frontend/src/components/AnnouncementsDisplay.tsx | 113 +++++++++++++++++++++++
 frontend/src/components/MotdDisplay.tsx          | 112 ----------------------
 frontend/src/components/PluginView.tsx           |   4 +-
 3 files changed, 115 insertions(+), 114 deletions(-)
 create mode 100644 frontend/src/components/AnnouncementsDisplay.tsx
 delete mode 100644 frontend/src/components/MotdDisplay.tsx

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/AnnouncementsDisplay.tsx b/frontend/src/components/AnnouncementsDisplay.tsx
new file mode 100644
index 00000000..6e0eeb70
--- /dev/null
+++ b/frontend/src/components/AnnouncementsDisplay.tsx
@@ -0,0 +1,113 @@
+import { DialogButton, Focusable, PanelSection } from '@decky/ui';
+import { useEffect, useMemo, useState } from 'react';
+import { FaTimes } from 'react-icons/fa';
+
+import { Announcement, getLatestAnnouncement } 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 welcomeAnnouncement: Announcement = {
+  id: 'welcomeAnnouncement',
+  title: 'Welcome to Decky!',
+  text: 'We hope you enjoy using Decky! If you have any questions or feedback, please let us know.',
+  created: Date.now().toString(),
+  updated: Date.now().toString(),
+};
+
+export function AnnouncementsDisplay() {
+  const [announcement, setAnnouncement] = useState<Announcement | 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 [hiddenAnnouncementId, setHiddenAnnouncementId] = useSetting('hiddenAnnouncementId', 'showWelcome');
+
+  async function fetchAnnouncement() {
+    const announcement = await getLatestAnnouncement();
+    announcement && setAnnouncement(announcement);
+  }
+
+  useEffect(() => {
+    void fetchAnnouncement();
+  }, []);
+
+  useEffect(() => {
+    if (hiddenAnnouncementId === 'showWelcome') {
+      setAnnouncement(welcomeAnnouncement);
+    }
+  }, [hiddenAnnouncementId]);
+
+  function hideAnnouncement() {
+    if (announcement) {
+      setHiddenAnnouncementId(announcement.id);
+      void fetchAnnouncement();
+    }
+  }
+
+  const hidden = useMemo(() => {
+    return hiddenAnnouncementId === announcement?.id;
+  }, [hiddenAnnouncementId, announcement]);
+
+  if (!announcement || !announcement.title || hidden) {
+    return null;
+  }
+
+  // Severity is not implemented in the API currently
+  const severity = SEVERITIES['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' }}>{announcement.title}</span>
+          <DialogButton
+            style={{
+              width: '1rem',
+              minWidth: '1rem',
+              height: '1rem',
+              padding: '0',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              position: 'absolute',
+              top: '.75rem',
+              right: '.75rem',
+            }}
+            onClick={hideAnnouncement}
+          >
+            <FaTimes
+              style={{
+                height: '.75rem',
+              }}
+            />
+          </DialogButton>
+        </div>
+        <span style={{ fontSize: '0.75rem', whiteSpace: 'pre-line' }}>{announcement.text}</span>
+      </Focusable>
+    </PanelSection>
+  );
+}
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>
-  );
-}
diff --git a/frontend/src/components/PluginView.tsx b/frontend/src/components/PluginView.tsx
index 88b43b51..13ee33e1 100644
--- a/frontend/src/components/PluginView.tsx
+++ b/frontend/src/components/PluginView.tsx
@@ -3,8 +3,8 @@ import { FC, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaEyeSlash } from 'react-icons/fa';
 
+import { AnnouncementsDisplay } from './AnnouncementsDisplay';
 import { useDeckyState } from './DeckyState';
-import { MotdDisplay } from './MotdDisplay';
 import NotificationBadge from './NotificationBadge';
 import { useQuickAccessVisible } from './QuickAccessVisibleState';
 import TitleView from './TitleView';
@@ -42,7 +42,7 @@ const PluginView: FC = () => {
           paddingTop: '16px',
         }}
       >
-        <MotdDisplay />
+        <AnnouncementsDisplay />
         <PanelSection>
           {pluginList.map(({ name, icon }) => (
             <PanelSectionRow key={name}>
-- 
cgit v1.2.3