2 files changed, 77 insertions, 8 deletions

diff --git a/front/src/pages/Settings.tsx b/front/src/pages/Settings.tsx
index 6b6f7bd..cd9eec7 100644
--- a/front/src/pages/Settings.tsx
+++ b/front/src/pages/Settings.tsx
@@ -6,10 +6,11 @@ import Icon from "@/components/Icon";
 import "@/styles/Settings.css";
 
 function Settings() {
-  const { key, relays, api } = useLocalState((s) => ({
+  const { key, relays, api, addNotification } = useLocalState((s) => ({
     key: s.key,
     relays: s.relays,
     api: s.api,
+    addNotification: s.addNotification,
   }));
   const [newRelay, setNewRelay] = useState("");
   const [isAddingRelay, setIsAddingRelay] = useState(false);
@@ -78,6 +79,41 @@ function Settings() {
       </div>
 
       <div className="settings-content">
+        {/* Notifications Test Section - Remove in production */}
+        <div className="settings-section">
+          <div className="section-header">
+            <Icon name="bell" size={20} />
+            <h2>Test Notifications</h2>
+          </div>
+          <div className="section-content">
+            <div className="setting-item">
+              <div className="setting-info">
+                <label>Test Notification System</label>
+                <p>Generate test notifications to see how they work</p>
+              </div>
+              <div className="setting-control">
+                <button 
+                  className="test-notification-btn"
+                  onClick={() => {
+                    const types = ["follow", "reply", "react", "mention", "access_request"];
+                    const randomType = types[Math.floor(Math.random() * types.length)] as any;
+                    addNotification({
+                      type: randomType,
+                      from: "~sampel-palnet",
+                      message: "This is a test notification",
+                      reaction: randomType === "react" ? "👍" : undefined,
+                    });
+                    toast.success("Test notification sent!");
+                  }}
+                >
+                  <Icon name="bell" size={16} />
+                  Send Test Notification
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
         {/* Appearance Section */}
         <div className="settings-section">
           <div className="section-header">
diff --git a/front/src/pages/User.tsx b/front/src/pages/User.tsx
index d8b66e1..b73cd96 100644
--- a/front/src/pages/User.tsx
+++ b/front/src/pages/User.tsx
@@ -5,7 +5,7 @@ import Profile from "@/components/profile/Profile";
 import useLocalState, { useStore } from "@/state/state";
 import Icon from "@/components/Icon";
 import toast from "react-hot-toast";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import type { FC } from "@/types/trill";
 import type { UserType } from "@/types/nostrill";
 import { isValidPatp } from "urbit-ob";
@@ -45,13 +45,16 @@ function UserFeed({
   userString: string;
   isMe: boolean;
 }) {
-  const { api, addProfile } = useLocalState((s) => ({
+  const { api, addProfile, addNotification, lastFact } = useLocalState((s) => ({
     api: s.api,
     addProfile: s.addProfile,
+    addNotification: s.addNotification,
+    lastFact: s.lastFact,
   }));
   // auto updating on SSE doesn't work if we do shallow
   const { following } = useStore();
   const feed = following.get(userString);
+  const hasFeed = !feed ? false : Object.entries(feed).length > 0;
   const refetch = () => feed;
   const isFollowing = following.has(userString);
 
@@ -59,6 +62,32 @@ function UserFeed({
   const [isAccessLoading, setIsAccessLoading] = useState(false);
   const [fc, setFC] = useState<FC>();
 
+  useEffect(() => {
+    console.log("fact", lastFact);
+    console.log(isFollowLoading);
+    if (!isFollowLoading) return;
+    const follow = lastFact?.fols;
+    if (!follow) return;
+    if ("new" in follow) {
+      if (userString !== follow.new.user) return;
+      toast.success(`Now following ${userString}`);
+      setIsFollowLoading(false);
+      addNotification({
+        type: "follow",
+        from: userString,
+        message: `You are now following ${userString}`,
+      });
+    } else if ("quit" in follow) {
+      toast.success(`Unfollowed ${userString}`);
+      setIsFollowLoading(false);
+      addNotification({
+        type: "unfollow",
+        from: userString,
+        message: `You unfollowed ${userString}`,
+      });
+    }
+  }, [lastFact, userString, isFollowLoading]);
+
   const handleFollow = async () => {
     if (!api) return;
 
@@ -66,18 +95,16 @@ function UserFeed({
     try {
       if (isFollowing) {
         await api.unfollow(user);
-        toast.success(`Unfollowed ${userString}`);
       } else {
         await api.follow(user);
-        toast.success(`Now following ${userString}`);
+        toast.success(`Follow request sent to ${userString}`);
       }
     } catch (error) {
       toast.error(
         `Failed to ${isFollowing ? "unfollow" : "follow"} ${userString}`,
       );
-      console.error("Follow error:", error);
-    } finally {
       setIsFollowLoading(false);
+      console.error("Follow error:", error);
     }
   };
 
@@ -89,6 +116,11 @@ function UserFeed({
     try {
       const res = await api.peekFeed(user.urbit);
       toast.success(`Access request sent to ${user.urbit}`);
+      addNotification({
+        type: "access_request",
+        from: userString,
+        message: `Access request sent to ${userString}`,
+      });
       if ("error" in res) toast.error(res.error);
       else {
         console.log("peeked", res.ok.feed);
@@ -102,6 +134,7 @@ function UserFeed({
       setIsAccessLoading(false);
     }
   };
+  console.log({ user, userString, feed, fc });
 
   return (
     <div id="user-page">
@@ -147,7 +180,7 @@ function UserFeed({
         </div>
       )}
 
-      {feed ? (
+      {feed && hasFeed ? (
         <div id="feed-proper">
           <Composer />
           <PostList data={feed} refetch={refetch} />