From 0025c9d34583ff0d245ca9cb1dab44717d9e5a33 Mon Sep 17 00:00:00 2001
From: Beebles <102569435+beebls@users.noreply.github.com>
Date: Thu, 16 Nov 2023 17:11:53 -0700
Subject: [PATCH] add MOTD

---
 src/api.ts                            |  3 +-
 src/apiTypes/Motd.ts                  |  7 ++++
 src/components/QAMTab/MOTDDisplay.tsx | 51 +++++++++++++++++++++++++++
 src/components/QAMTab/index.ts        |  1 +
 src/index.tsx                         | 49 +++++++++++++------------
 5 files changed, 87 insertions(+), 24 deletions(-)
 create mode 100644 src/apiTypes/Motd.ts
 create mode 100644 src/components/QAMTab/MOTDDisplay.tsx

diff --git a/src/api.ts b/src/api.ts
index ffe2778..2bd8f04 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -131,7 +131,8 @@ export async function genericGET(
   fetchPath: string,
   requiresAuth: boolean = false,
   customAuthToken: string | undefined = undefined,
-  onError: () => void = () => {}
+  onError: () => void = () => {},
+  failSilently: boolean = false
 ) {
   const { apiUrl } = globalState!.getPublicState();
   function doTheFetching(authToken: string | undefined = undefined) {
diff --git a/src/apiTypes/Motd.ts b/src/apiTypes/Motd.ts
new file mode 100644
index 0000000..80475ae
--- /dev/null
+++ b/src/apiTypes/Motd.ts
@@ -0,0 +1,7 @@
+export interface Motd {
+  id: string;
+  name: string;
+  description: string;
+  date: string;
+  severity: "High" | "Medium" | "Low";
+}
diff --git a/src/components/QAMTab/MOTDDisplay.tsx b/src/components/QAMTab/MOTDDisplay.tsx
new file mode 100644
index 0000000..66f595f
--- /dev/null
+++ b/src/components/QAMTab/MOTDDisplay.tsx
@@ -0,0 +1,51 @@
+import { Focusable, PanelSection } from "decky-frontend-lib";
+import { useEffect, useState } from "react";
+import { Motd } from "../../apiTypes/Motd";
+import { genericGET } from "../../api";
+
+export function MOTDDisplay() {
+  const [motd, setMotd] = useState<Motd | undefined>();
+  useEffect(() => {
+    async function getMotd() {
+      const res = await genericGET("/motd", false);
+      setMotd(res);
+    }
+    getMotd();
+  }, []);
+
+  function getColors() {
+    switch (motd?.severity) {
+      case "High":
+        return { bg: "#c3010155", border: "#560d0d", text: "#fff" };
+      case "Medium":
+        return { bg: "rgba(255, 255, 0, 0.067)", border: "rgba(255, 255, 0, 0.467)", text: "#fff" };
+      default:
+        return { bg: "#3e72b055", border: "#6680a8", text: "#fff" };
+    }
+  }
+
+  if (motd && motd?.name) {
+    return (
+      <PanelSection>
+        <Focusable
+          onActivate={() => {}}
+          style={{
+            backgroundColor: getColors().bg,
+            color: getColors().text,
+            borderColor: getColors().border,
+            borderWidth: "0.25em",
+            borderStyle: "solid",
+            padding: "0.25em",
+            display: "flex",
+            flexDirection: "column",
+          }}
+          focusWithinClassName="gpfocuswithin"
+        >
+          <span style={{ fontWeight: "bold" }}>{motd?.name}</span>
+          <span style={{ fontSize: "0.75em" }}>{motd?.description}</span>
+        </Focusable>
+      </PanelSection>
+    );
+  }
+  return null;
+}
diff --git a/src/components/QAMTab/index.ts b/src/components/QAMTab/index.ts
index 8406046..c63a957 100644
--- a/src/components/QAMTab/index.ts
+++ b/src/components/QAMTab/index.ts
@@ -1,2 +1,3 @@
 export * from "./QAMThemeToggleList";
 export * from "./PresetSelectionDropdown";
+export * from "./MOTDDisplay";
diff --git a/src/index.tsx b/src/index.tsx
index 6f6208e..c36bc4c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -15,7 +15,7 @@ import { RiPaintFill } from "react-icons/ri";
 
 import { ThemeManagerRouter } from "./pages/theme-manager";
 import { CssLoaderContextProvider, CssLoaderState, useCssLoaderState } from "./state";
-import { PresetSelectionDropdown, QAMThemeToggleList, TitleView } from "./components";
+import { MOTDDisplay, PresetSelectionDropdown, QAMThemeToggleList, TitleView } from "./components";
 import { ExpandedViewPage } from "./pages/theme-manager/ExpandedView";
 import { Flags, Theme } from "./ThemeTypes";
 import { dummyFunction, getInstalledThemes, reloadBackend } from "./python";
@@ -58,11 +58,13 @@ function Content() {
   }, []);
 
   return (
-    <PanelSection title="Themes">
-      {dummyFuncResult ? (
-        <>
-          <style>
-            {`
+    <>
+      <MOTDDisplay />
+      <PanelSection title="Themes">
+        {dummyFuncResult ? (
+          <>
+            <style>
+              {`
               .CSSLoader_QAMTab_NavButton {
                 height: 2em !important;
                 width: 1.5em !important;
@@ -84,25 +86,26 @@ function Content() {
                 transform: translate(-50%, -50%); 
               }
             `}
-          </style>
-          {localThemeList.length > 0 && <PresetSelectionDropdown />}
-          <QAMThemeToggleList />
-        </>
-      ) : (
+            </style>
+            {localThemeList.length > 0 && <PresetSelectionDropdown />}
+            <QAMThemeToggleList />
+          </>
+        ) : (
+          <PanelSectionRow>
+            <span>
+              CssLoader failed to initialize, try reloading, and if that doesn't work, try
+              restarting your deck.
+            </span>
+          </PanelSectionRow>
+        )}
+
         <PanelSectionRow>
-          <span>
-            CssLoader failed to initialize, try reloading, and if that doesn't work, try restarting
-            your deck.
-          </span>
+          <ButtonItem layout="below" onClick={() => reload()}>
+            Refresh
+          </ButtonItem>
         </PanelSectionRow>
-      )}
-
-      <PanelSectionRow>
-        <ButtonItem layout="below" onClick={() => reload()}>
-          Refresh
-        </ButtonItem>
-      </PanelSectionRow>
-    </PanelSection>
+      </PanelSection>
+    </>
   );
 }