Add news

renderer/atoms/newsAtom.tsx

@@ -0,0 +1,3 @@
+import { atomWithStorage } from "jotai/utils";
+
+export const newsAtom = atomWithStorage("newsAtom", "");

renderer/components/NewsModal.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+export const NewsModal = ({ show, setShow }) => {
+  return (
+    <dialog className={`modal ${show && "modal-open"}`}>
+      <div className="modal-box flex flex-col text-center items-center gap-4">
+        <button
+          className="absolute top-2 right-4 btn btn-circle"
+          onClick={() => setShow(false)}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24">
+            <rect
+              x="0"
+              y="0"
+              width="24"
+              height="24"
+              fill="none"
+              stroke="none"
+            />
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-width="1.5"
+              d="m8.464 15.535l7.072-7.07m-7.072 0l7.072 7.07"
+            />
+          </svg>
+        </button>
+      </div>
+
+      <form method="dialog" className="modal-backdrop">
+        <button onClick={() => setShow(false)}>close</button>
+      </form>
+    </dialog>
+  );
+};

renderer/pages/index.tsx

@@ -30,6 +30,7 @@ import {
   DoubleUpscaylPayload,
   ImageUpscaylPayload,
 } from "@common/types/types";
+import { newsAtom } from "@/atoms/newsAtom";
 
 const Home = () => {
   // LOCAL STATES
@@ -67,13 +68,16 @@ const Home = () => {
     dontShowCloudModalAtom
   );
   const noImageProcessing = useAtomValue(noImageProcessingAtom);
+  const [news, setNews] = useAtom(newsAtom);
 
   const { logit } = useLog();
 
   // EFFECTS
   useEffect(() => {
     setVersion(navigator?.userAgent?.match(/Upscayl\/([\d\.]+\d+)/)[1]);
-
+    if (!news) {
+      setNews(navigator?.userAgent?.match(/Upscayl\/([\d\.]+\d+)/)[1]);
+    }
     const handleErrors = (data: string) => {
       if (data.includes("invalid gpu")) {
         alert(
@@ -226,6 +230,10 @@ const Home = () => {
     }
   }, []);
 
+  useEffect(() => {
+    // Fetch news
+  }, []);
+
   // CHECK IF OUTPUT FOLDER IS REMEMBERED
   useEffect(() => {
     const rememberOutputFolder = localStorage.getItem("rememberOutputFolder");