fix: remove subscriptions after disabling notifications

2 files changed, 74 insertions, 20 deletions

diff --git a/site/src/components/NotificationButton.tsx b/site/src/components/NotificationButton.tsx
index 1e9bc5e..fa31cde 100644
--- a/site/src/components/NotificationButton.tsx
+++ b/site/src/components/NotificationButton.tsx
@@ -178,6 +178,9 @@ export default function NotificationButton({ className = "", isMoe = false, game
       console.log("FCM token deleted");
       localStorage.removeItem('fcm_token');
 
+      // Clear all subscribed topics
+      localStorage.removeItem('subscribed_topics');
+
       if ('serviceWorker' in navigator) {
         const registration = await navigator.serviceWorker.getRegistration('/firebase-messaging-sw.js');
         if (registration) {
diff --git a/site/src/pages/Homepage.tsx b/site/src/pages/Homepage.tsx
index 871df19..3ebbade 100644
--- a/site/src/pages/Homepage.tsx
+++ b/site/src/pages/Homepage.tsx
@@ -4,7 +4,7 @@ import { Link, 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";
+import NotificationButton from "../components/NotificationButton";
 
 interface ArcadeNewsAPIData {
   fetch_time: number;
@@ -30,7 +30,9 @@ export default function Home() {
   useEffect(() => {
     // Load subscribed games from localStorage
     const loadSubscribedGames = () => {
-      const topics = JSON.parse(localStorage.getItem('subscribed_topics') || '[]');
+      const topics = JSON.parse(
+        localStorage.getItem("subscribed_topics") || "[]",
+      );
       setSubscribedGames(topics);
     };
 
@@ -41,10 +43,10 @@ export default function Home() {
       loadSubscribedGames();
     };
 
-    window.addEventListener('storage', handleStorageChange);
+    window.addEventListener("storage", handleStorageChange);
 
     return () => {
-      window.removeEventListener('storage', handleStorageChange);
+      window.removeEventListener("storage", handleStorageChange);
     };
   }, []);
 
@@ -73,7 +75,9 @@ export default function Home() {
   // Update subscribed games when localStorage changes locally
   useEffect(() => {
     const checkSubscriptions = () => {
-      const topics = JSON.parse(localStorage.getItem('subscribed_topics') || '[]');
+      const topics = JSON.parse(
+        localStorage.getItem("subscribed_topics") || "[]",
+      );
       setSubscribedGames(topics);
     };
 
@@ -164,15 +168,46 @@ export default function Home() {
               {GameNotes(isMoe)[gameId] && (
                 <div className="text-left">{GameNotes(isMoe)[gameId]}</div>
               )}
-              {/* <div className="mt-4">
+              <div className="mt-4">
                 <NotificationButton gameId={gameId} isMoe={isMoe} />
               </div>
-              <p className="text-left">
-                Currently in testing, not all games will receive updates via notifications yet.
-              </p> */}
               <div className="mt-2">
-                <a href={rssFeedUrl} className="text-blue-400 hover:underline">
-                  Subscribe via RSS
+                <a
+                  href={rssFeedUrl}
+                  className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-lg font-medium transition-colors ${
+                    isMoe
+                      ? "bg-pink-300 text-pink-800 hover:bg-pink-400"
+                      : "bg-gray-700 text-white hover:bg-gray-600"
+                  }`}
+                >
+                  <svg
+                    fill="#FFFFFF"
+                    height="24px"
+                    width="24px"
+                    version="1.1"
+                    id="Layer_1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlnsXlink="http://www.w3.org/1999/xlink"
+                    viewBox="-271 273 256 256"
+                    xmlSpace="preserve"
+                  >
+                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                    <g
+                      id="SVGRepo_tracerCarrier"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    ></g>
+                    <g id="SVGRepo_iconCarrier">
+                      {" "}
+                      <g>
+                        {" "}
+                        <path d="M-271,360v48.9c31.9,0,62.1,12.6,84.7,35.2c22.6,22.6,35.1,52.8,35.1,84.8v0.1h49.1c0-46.6-19-88.7-49.6-119.4 C-182.2,379-224.4,360.1-271,360z"></path>{" "}
+                        <path d="M-237,460.9c-9.4,0-17.8,3.8-24,10s-10,14.6-10,24c0,9.3,3.8,17.7,10,23.9c6.2,6.1,14.6,9.9,24,9.9s17.8-3.7,24-9.9 s10-14.6,10-23.9c0-9.4-3.8-17.8-10-24C-219.2,464.7-227.6,460.9-237,460.9z"></path>{" "}
+                        <path d="M-90.1,348.1c-46.3-46.4-110.2-75.1-180.8-75.1v48.9C-156.8,322-64.1,414.9-64,529h49C-15,458.4-43.7,394.5-90.1,348.1z"></path>{" "}
+                      </g>{" "}
+                    </g>
+                  </svg>
+                  RSS Feed
                 </a>
               </div>
             </div>
@@ -214,32 +249,48 @@ export default function Home() {
                 </p>
                 <div className="mt-6">
                   <div className="mt-4">
-                    {/* <NotificationButton isMoe={isMoe} /> */}
+                    <NotificationButton isMoe={isMoe} />
 
                     {/* Subscribed Games Display */}
                     {subscribedGames.length > 0 && (
                       <div className="mt-3">
                         <button
-                          onClick={() => setShowSubscribedDropdown(!showSubscribedDropdown)}
+                          onClick={() =>
+                            setShowSubscribedDropdown(!showSubscribedDropdown)
+                          }
                           className={`text-sm ${
-                            isMoe ? "text-pink-700 hover:text-pink-500" : "text-gray-300 hover:text-white"
+                            isMoe
+                              ? "text-pink-700 hover:text-pink-500"
+                              : "text-gray-300 hover:text-white"
                           } flex items-center gap-1 mx-auto transition-colors`}
                         >
-                          <span>Subscribed to {subscribedGames.length} game{subscribedGames.length !== 1 ? 's' : ''}</span>
+                          <span>
+                            Subscribed to {subscribedGames.length} game
+                            {subscribedGames.length !== 1 ? "s" : ""}
+                          </span>
                           <svg
-                            className={`w-4 h-4 transition-transform ${showSubscribedDropdown ? 'rotate-180' : ''}`}
+                            className={`w-4 h-4 transition-transform ${showSubscribedDropdown ? "rotate-180" : ""}`}
                             fill="none"
                             stroke="currentColor"
                             viewBox="0 0 24 24"
                           >
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M19 9l-7 7-7-7"
+                            />
                           </svg>
                         </button>
 
                         {showSubscribedDropdown && (
-                          <div className={`mt-2 p-3 rounded-lg ${
-                            isMoe ? "bg-pink-300 bg-opacity-50" : "bg-gray-700 bg-opacity-50"
-                          }`}>
+                          <div
+                            className={`mt-2 p-3 rounded-lg ${
+                              isMoe
+                                ? "bg-pink-300 bg-opacity-50"
+                                : "bg-gray-700 bg-opacity-50"
+                            }`}
+                          >
                             <div className="grid grid-cols-2 gap-2 text-sm">
                               {subscribedGames.map((gameId) => (
                                 <Link