From 3d1d33c2aac15e07c3b840a1fb9428e3feda8330 Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Fri, 3 Oct 2025 02:25:55 -0700
Subject: initial firebase fcm implementation

---
 site/src/pages/Homepage.tsx | 125 +++++++++++++++++++++++++++-----------------
 1 file changed, 78 insertions(+), 47 deletions(-)

(limited to 'site/src/pages')

diff --git a/site/src/pages/Homepage.tsx b/site/src/pages/Homepage.tsx
index 2f35280..db658ca 100644
--- a/site/src/pages/Homepage.tsx
+++ b/site/src/pages/Homepage.tsx
@@ -4,6 +4,7 @@ import { useParams, useSearchParams } from "react-router-dom";
 import { getGameTitle } from "../utils.ts";
 import TitleBar from "../components/TitleBar";
 import { GameNotes } from "../components/GameNotes";
+import NotificationButton from "../components/NotificationButton";
 
 interface ArcadeNewsAPIData {
   fetch_time: number;
@@ -14,8 +15,9 @@ export default function Home() {
   const { gameId } = useParams<{ gameId?: string }>();
   const [searchParams] = useSearchParams();
   const isMoe = searchParams.has("moe");
-  const rssFeedUrl = import.meta.env.VITE_NEWS_BASE_URL + "/" +gameId + "_news.xml";
-  const newsAPIBase = import.meta.env.VITE_NEWS_BASE_URL
+  const rssFeedUrl =
+    import.meta.env.VITE_NEWS_BASE_URL + "/" + gameId + "_news.xml";
+  const newsAPIBase = import.meta.env.VITE_NEWS_BASE_URL;
 
   const [newsFeedData, setNewsFeedData] = useState<ArcadeNewsAPIData | null>(
     null,
@@ -29,9 +31,7 @@ export default function Home() {
       setError(false);
       const newsDataFileName = gameId ? `${gameId}_news.json` : "news.json";
       try {
-        const response = await fetch(
-          newsAPIBase+"/" + `${newsDataFileName}`,
-        );
+        const response = await fetch(newsAPIBase + "/" + `${newsDataFileName}`);
         if (!response.ok) {
           throw new Error(`Failed to fetch news: ${response.statusText}`);
         }
@@ -70,21 +70,31 @@ export default function Home() {
           className={`${isMoe ? "bg-pink-100" : "bg-gray-950"} min-h-screen flex items-center justify-center`}
         >
           <div className="text-center px-4">
-            <div className={`${isMoe ? "text-pink-500" : "text-purple-500"} text-8xl font-bold mb-4`}>
+            <div
+              className={`${isMoe ? "text-pink-500" : "text-purple-500"} text-8xl font-bold mb-4`}
+            >
               404
             </div>
-            <h1 className={`${isMoe ? "text-pink-900" : "text-white"} text-3xl font-bold mb-4`}>
+            <h1
+              className={`${isMoe ? "text-pink-900" : "text-white"} text-3xl font-bold mb-4`}
+            >
               News Not Found
             </h1>
-            <p className={`${isMoe ? "text-pink-700" : "text-gray-400"} text-lg mb-8`}>
+            <p
+              className={`${isMoe ? "text-pink-700" : "text-gray-400"} text-lg mb-8`}
+            >
               {gameId
                 ? `Unable to fetch news for ${getGameTitle(gameId)}`
-                : "Unable to fetch news feed"
-              }
+                : "Unable to fetch news feed"}
             </p>
-            <div className={`${isMoe ? "bg-pink-200" : "bg-gray-800"} rounded-lg p-6 max-w-md mx-auto`}>
-              <p className={`${isMoe ? "text-pink-800" : "text-gray-300"} mb-4`}>
-                The news feed you're looking for might be temporarily unavailable or doesn't exist.
+            <div
+              className={`${isMoe ? "bg-pink-200" : "bg-gray-800"} rounded-lg p-6 max-w-md mx-auto`}
+            >
+              <p
+                className={`${isMoe ? "text-pink-800" : "text-gray-300"} mb-4`}
+              >
+                The news feed you're looking for might be temporarily
+                unavailable or doesn't exist.
               </p>
               <a
                 href="/"
@@ -127,43 +137,64 @@ export default function Home() {
               </div>
             </div>
           ) : (
-            <div
-              className={`${isMoe ? "bg-pink-200 text-pink-900" : "bg-gray-800 text-white"} rounded-lg p-6 text-center shadow-lg`}
-            >
-              <h1 className="text-2xl font-bold">Welcome to 573-UPDATES</h1>
-              <h2
-                className={`text-2xl font-extrabold mb-4 tracking-widest text-center uppercase glow-neon ${
-                  isMoe ? "text-pink-500" : "text-[#00FF00]"
-                }`}
+            <>
+              <div
+                className={`${isMoe ? "bg-pink-200 text-pink-900" : "bg-gray-800 text-white"} rounded-lg p-6 text-center shadow-lg`}
               >
-                SECOND STYLE
-              </h2>
-              <div className="floating">
-                <img
-                  src="/liris.webp"
-                  className="w-48 mx-auto mb-2 object-contain rounded-2xl"
-                />
-              </div>
-              <p>
-                News and Information for various arcade games is aggregated
-                here!
-              </p>
-              <p className="mt-2">
-                RSS feeds are available on each game's individual page
-              </p>
-              <p className="mt-2">
-                Please see the{" "}
-                <a
-                  href="https://github.com/pinapelz/573-updates"
-                  className="text-blue-500 hover:underline"
+                <h1 className="text-2xl font-bold">Welcome to 573-UPDATES</h1>
+                <h2
+                  className={`text-2xl font-extrabold mb-4 tracking-widest text-center uppercase glow-neon ${
+                    isMoe ? "text-pink-500" : "text-[#00FF00]"
+                  }`}
                 >
-                  GitHub
-                </a>{" "}
-                for API information
-              </p>
-            </div>
+                  SECOND STYLE
+                </h2>
+                <div className="floating">
+                  <img
+                    src="/liris.webp"
+                    className="w-48 mx-auto mb-2 object-contain rounded-2xl"
+                  />
+                </div>
+                <p>
+                  News and Information for various arcade games is aggregated
+                  here!
+                </p>
+                <p className="mt-2">
+                  RSS feeds are available on each game's individual page
+                </p>
+                <p className="mt-2">
+                  Please see the{" "}
+                  <a
+                    href="https://github.com/pinapelz/573-updates"
+                    className="text-blue-500 hover:underline"
+                  >
+                    GitHub
+                  </a>{" "}
+                  for API information
+                </p>
+                <div className="mt-6">
+                  <details className="rounded-lg">
+                    <summary
+                      className={`cursor-pointer text-lg font-semibold ${
+                        isMoe
+                          ? "text-pink-700 hover:text-pink-500"
+                          : "text-gray-300 hover:text-white"
+                      }`}
+                    >
+                      Receive Notifications
+                    </summary>
+                    <div className="mt-4">
+                      <NotificationButton isMoe={isMoe} />
+                      <p className="mt-2">
+                        Enables notifications for the main feed
+                      </p>
+                    </div>
+                  </details>
+                </div>
+              </div>
+            </>
           )}
-          <NewsFeed newsItems={newsFeedData.news_posts}/>
+          <NewsFeed newsItems={newsFeedData.news_posts} />
         </div>
         <footer
           className={`mt-8 text-center text-sm ${isMoe ? "text-pink-800" : "text-gray-400"}`}
-- 
cgit v1.2.3