add hide motd button

src/backend/pythonMethods/pluginSettingsMethods.ts

@@ -18,3 +18,16 @@ export function toggleWatchState(bool: boolean, onlyThisSession: boolean = false
     }
   );
 }
+
+// Todo: when i rewrite store interop, move this
+export function setHiddenMotd(id: string) {
+  return server!.callPluginMethod<{ key: string; val: string }>("store_write", {
+    key: "hiddenMotd",
+    val: id,
+  });
+}
+export function getHiddenMotd() {
+  return server!.callPluginMethod<{ key: string }, string>("store_read", {
+    key: "hiddenMotd",
+  });
+}

src/components/QAMTab/MOTDDisplay.tsx

@@ -1,17 +1,30 @@
-import { Focusable, PanelSection } from "decky-frontend-lib";
-import { useEffect, useState } from "react";
+import { DialogButton, Focusable, PanelSection } from "decky-frontend-lib";
+import { useEffect, useState, useMemo } from "react";
 import { Motd } from "../../apiTypes/Motd";
 import { genericGET } from "../../api";
+import { FaTimes } from "react-icons/fa";
+import { useCssLoaderState } from "../../state";
+import { getHiddenMotd, setHiddenMotd } from "../../backend/pythonMethods/pluginSettingsMethods";
 
 export function MOTDDisplay() {
   const [motd, setMotd] = useState<Motd | undefined>();
+  const { hiddenMotd, setGlobalState } = useCssLoaderState();
   useEffect(() => {
     async function getMotd() {
       const res = await genericGET("/motd", false);
       setMotd(res);
     }
     getMotd();
   }, []);
+  async function dismiss() {
+    if (motd) {
+      await setHiddenMotd(motd.id);
+      const res = await getHiddenMotd();
+      if (res.success) {
+        setGlobalState("hiddenMotd", res.result);
+      }
+    }
+  }
 
   const SEVERITIES = {
     High: {
@@ -28,13 +41,16 @@ export function MOTDDisplay() {
     },
   };
 
+  const hidden = useMemo(() => {
+    return hiddenMotd === motd?.id;
+  }, [hiddenMotd, motd]);
+
   const severity = SEVERITIES[motd?.severity || "Low"];
 
-  if (motd && motd?.name) {
+  if (motd && motd?.name && !hidden) {
     return (
       <PanelSection>
         <Focusable
-          onActivate={() => {}}
           style={{
             // Transparency is 20% of the color
             backgroundColor: `${severity.color}33`,
@@ -46,9 +62,24 @@ export function MOTDDisplay() {
             display: "flex",
             flexDirection: "column",
           }}
-          focusWithinClassName="gpfocuswithin"
         >
-          <span style={{ fontWeight: "bold" }}>{motd?.name}</span>
+          <div style={{ display: "flex", justifyContent: "space-between" }}>
+            <span style={{ fontWeight: "bold" }}>{motd?.name}</span>
+            <DialogButton
+              style={{
+                width: "20px",
+                minWidth: "20px",
+                height: "20px",
+                padding: "0",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+              onClick={dismiss}
+            >
+              <FaTimes />
+            </DialogButton>
+          </div>
           <span style={{ fontSize: "0.75em" }}>{motd?.description}</span>
         </Focusable>
       </PanelSection>

src/index.tsx

@@ -156,6 +156,13 @@ export default definePlugin((serverApi: ServerAPI) => {
     }
   });
 
+  // Hidden MOTD
+  python.resolve(python.storeRead("hiddenMotd"), (id: string) => {
+    if (id) {
+      state.setGlobalState("hiddenMotd", id);
+    }
+  });
+
   // Nav Patch
   python.resolve(python.storeRead("enableNavPatch"), (value: string) => {
     if (value === "true") {

src/state/CssLoaderState.tsx

@@ -53,6 +53,7 @@ interface PublicCssLoaderState {
   currentExpandedTheme: PartialCSSThemeInfo | undefined;
   browserCardSize: number;
   backendVersion: number;
+  hiddenMotd: string;
 }
 
 interface PublicCssLoaderContext extends PublicCssLoaderState {
@@ -150,6 +151,7 @@ export class CssLoaderState {
   };
   private submissionThemeList: ThemeQueryResponse = { total: 0, items: [] };
   private backendVersion: number = 6;
+  private hiddenMotd: string = "";
 
   // You can listen to this eventBus' 'stateUpdate' event and use that to trigger a useState or other function that causes a re-render
   public eventBus = new EventTarget();
@@ -172,6 +174,7 @@ export class CssLoaderState {
       currentSettingsPageTheme: this.currentSettingsPageTheme,
       unpinnedThemes: this.unpinnedThemes,
       isInstalling: this.isInstalling,
+      hiddenMotd: this.hiddenMotd,
 
       navPatchInstance: this.navPatchInstance,
       selectedRepo: this.selectedRepo,