app: [wip] add follow on livestream

js/app/components/follow-button.tsx

···
+import React, { useEffect, useState } from "react";
+import { useAppDispatch, useAppSelector } from "../store/hooks";
+import { selectStreamplace } from "../features/streamplace/streamplaceSlice";
+import { followUser, unfollowUser } from "../features/bluesky/blueskySlice";
+import { Button, View, Text } from "tamagui";
+import { Plus, Check } from "@tamagui/lucide-icons";
+
+/**
+ * FollowButton component for following/unfollowing a streamer.
+ *
+ * Props:
+ * - streamerDID: string — The DID of the streamer to follow/unfollow
+ * - currentUserDID?: string — The DID of the current user (optional)
+ * - onFollowChange?: (isFollowing: boolean) => void — Optional callback when follow state changes
+ */
+interface FollowButtonProps {
+  streamerDID: string;
+  currentUserDID?: string;
+  onFollowChange?: (isFollowing: boolean) => void;
+}
+
+const FollowButton: React.FC<FollowButtonProps> = ({
+  streamerDID,
+  currentUserDID,
+  onFollowChange,
+}) => {
+  const [isFollowing, setIsFollowing] = useState<boolean | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [followRKey, setFollowRKey] = useState<string | null>(null);
+  const { url: streamplaceUrl } = useAppSelector(selectStreamplace);
+  const dispatch = useAppDispatch();
+
+  // Hide button if not logged in or viewing own stream
+  if (!currentUserDID || currentUserDID === streamerDID) return null;
+
+  // Fetch initial follow state
+  useEffect(() => {
+    let cancelled = false;
+
+    const fetchFollowStatus = async () => {
+      if (!currentUserDID || !streamerDID) return;
+
+      setError(null);
+      try {
+        const res = await fetch(
+          `${streamplaceUrl}/api/following/${currentUserDID}`,
+          {
+            credentials: "include",
+            headers: {
+              "X-User-DID": currentUserDID || "",
+            },
+          },
+        );
+
+        if (!res.ok) {
+          const errorText = await res.text();
+          throw new Error(`Failed to fetch following list: ${errorText}`);
+        }
+
+        const data = await res.json();
+        if (cancelled) return;
+
+        const following = Array.isArray(data) ? data : [];
+        const followRecord = following.find(
+          (f: any) => f.SubjectDID === streamerDID,
+        );
+
+        if (followRecord) {
+          setIsFollowing(true);
+          setFollowRKey(followRecord.RKey);
+        } else {
+          setIsFollowing(false);
+          setFollowRKey(null);
+        }
+      } catch (err) {
+        if (!cancelled) setError("Could not determine follow state");
+      }
+    };
+
+    fetchFollowStatus();
+    return () => {
+      cancelled = true;
+    };
+  }, [currentUserDID, streamerDID, streamplaceUrl]);
+
+  const handleFollow = async () => {
+    setError(null);
+    setIsFollowing(true); // Optimistic
+    try {
+      const result = await dispatch(followUser(streamerDID)).unwrap();
+      setIsFollowing(true);
+      setFollowRKey(result.rkey);
+      onFollowChange?.(true);
+    } catch (err) {
+      setIsFollowing(false);
+      setError(
+        `Failed to follow: ${err instanceof Error ? err.message : "Unknown error"}`,
+      );
+    }
+  };
+
+  const handleUnfollow = async () => {
+    if (!followRKey) {
+      setError("Cannot unfollow: missing record key");
+      return;
+    }
+
+    setError(null);
+    setIsFollowing(false); // Optimistic
+    try {
+      await dispatch(
+        unfollowUser({ subjectDID: streamerDID, rkey: followRKey }),
+      ).unwrap();
+      setIsFollowing(false);
+      setFollowRKey(null);
+      onFollowChange?.(false);
+    } catch (err) {
+      setIsFollowing(true);
+      setError(
+        `Failed to unfollow: ${err instanceof Error ? err.message : "Unknown error"}`,
+      );
+    }
+  };
+
+  return (
+    <View flexDirection="row" alignItems="center" gap={8}>
+      {isFollowing ? (
+        <Button
+          backgroundColor="transparent"
+          onPress={handleUnfollow}
+          aria-label="Following"
+          icon={Check}
+        >
+          Following
+        </Button>
+      ) : (
+        <Button
+          backgroundColor="transparent"
+          onPress={handleFollow}
+          aria-label="Follow"
+          icon={Plus}
+        >
+          Follow
+        </Button>
+      )}
+      {error && (
+        <Text color="#c00" marginLeft={8}>
+          {error}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+export default FollowButton;

js/app/components/livestream/livestream.tsx

···
 import { useKeyboard } from "hooks/useKeyboard";
 import usePlatform from "hooks/usePlatform";
 import { useCallback, useEffect, useState } from "react";
-import { LayoutChangeEvent, View as RNView, SafeAreaView } from "react-native";
+import {
+  LayoutChangeEvent,
+  View as RNView,
+  SafeAreaView,
+  Linking,
+} from "react-native";
 import { useAppDispatch, useAppSelector } from "store/hooks";
-import { Button, H2, H3, Text, useWindowDimensions, View } from "tamagui";
+import {
+  Button,
+  H2,
+  H3,
+  isWeb,
+  Text,
+  useWindowDimensions,
+  View,
+} from "tamagui";
 import { MessageCircleOff, MessageCircleMore } from "@tamagui/lucide-icons";
+import FollowButton from "components/follow-button";
+import { useToastController } from "@tamagui/toast";
+import { selectProfiles, getProfile } from "features/bluesky/blueskySlice";
+import storage from "storage";
 
 export default function Livestream(props: Partial<PlayerProps>) {
   return (
···
 export function LivestreamInner(props: Partial<PlayerProps>) {
   const telemetry = useAppSelector(selectTelemetry);
   const player = useAppSelector(usePlayer());
+  const profiles = useAppSelector(selectProfiles);
+  const toast = useToastController();
 
   const { src, ...extraProps } = props;
   const dispatch = useAppDispatch();
···
   const [videoWidth, setVideoWidth] = useState(0);
   const [videoHeight, setVideoHeight] = useState(0);
   const { isKeyboardVisible, keyboardHeight } = useKeyboard();
-  const { isIOS } = usePlatform();
+  const { isIOS, isWeb } = usePlatform();
 
   const [outerHeight, setOuterHeight] = useState(0);
   const [innerHeight, setInnerHeight] = useState(0);
   const [isChatVisible, setIsChatVisible] = useState(true);
+  const [currentUserDID, setCurrentUserDID] = useState<string | null>(null);
+
+  const streamerDID = player.livestream?.author?.did;
+  const streamerProfile = streamerDID ? profiles[streamerDID] : undefined;
+  const streamerHandle = streamerProfile?.handle || streamerDID;
 
   // this would all be really easy if i had library that would give me the
   // safe area view height and width but i don't. so let's measure
···
     }
   }, [video, width, height]);
 
+  useEffect(() => {
+    getCurrentUserDID().then((did) => {
+      console.log("currentUserDID:", did);
+      setCurrentUserDID(did);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (streamerDID && !streamerProfile) {
+      dispatch(getProfile(streamerDID));
+    }
+  }, [streamerDID, streamerProfile, dispatch]);
+
   let slideKeyboard = 0;
   if (isIOS && keyboardHeight > 0) {
     slideKeyboard = -keyboardHeight + (outerHeight - innerHeight);
   }
 
+  const handleFollowChange = (isFollowing: boolean) => {
+    if (!streamerHandle) return;
+    if (isFollowing) {
+      toast.show(`You are now following @${streamerHandle}`);
+    } else {
+      toast.show(`You have unfollowed @${streamerHandle}`);
+    }
+  };
+
   return (
     <RNView style={{ flex: 1 }}>
       <SafeAreaView style={{ flex: 1 }} onLayout={onOuterLayout}>
···
                 fg={0}
                 p="$4"
                 display="none"
-                flexDirection="row"
-                alignItems="flex-start"
-                justifyContent="space-between"
+                flexDirection="column"
                 $gtXs={{ display: "flex" }}
               >
-                <H2>{player.livestream?.record.title}</H2>
                 <View
                   flexDirection="row"
                   alignItems="center"
-                  gap="$2"
-                  paddingRight="$3"
+                  justifyContent="space-between"
+                  width="100%"
                 >
-                  <Viewers viewers={player.viewers ?? 0} />
-                  <Button
-                    backgroundColor="transparent"
-                    onPress={() => setIsChatVisible(!isChatVisible)}
-                    marginLeft="$2"
+                  <View
+                    flexDirection="row"
+                    alignItems="center"
+                    gap="$2"
+                    minWidth={0}
                   >
-                    {isChatVisible ? (
-                      <MessageCircleOff size={22} />
-                    ) : (
-                      <MessageCircleMore size={22} />
+                    {streamerHandle && (
+                      <Text
+                        onPress={() =>
+                          Linking.openURL(
+                            `https://bsky.app/profile/${streamerHandle}`,
+                          )
+                        }
+                        aria-label={`View @${streamerHandle} on Bluesky`}
+                        style={{ cursor: "pointer" }}
+                      >
+                        {`@${streamerHandle}`}
+                      </Text>
+                    )}
+                    {streamerDID && currentUserDID && (
+                      <FollowButton
+                        streamerDID={streamerDID}
+                        currentUserDID={currentUserDID}
+                        onFollowChange={handleFollowChange}
+                      />
                     )}
-                  </Button>
+                  </View>
+                  <View flexDirection="row" alignItems="center" gap="$2">
+                    <Viewers viewers={player.viewers ?? 0} />
+                    <Button
+                      backgroundColor="transparent"
+                      onPress={() => setIsChatVisible(!isChatVisible)}
+                      marginLeft="$2"
+                    >
+                      {isChatVisible ? (
+                        <MessageCircleOff size={22} />
+                      ) : (
+                        <MessageCircleMore size={22} />
+                      )}
+                    </Button>
+                  </View>
+                </View>
+                <View width="100%" marginTop={4}>
+                  <H2
+                    maxWidth="100%"
+                    lineHeight={32}
+                    numberOfLines={
+                      typeof window !== "undefined" && window.innerWidth < 600
+                        ? 1
+                        : undefined
+                    }
+                  >
+                    {player.livestream?.record.title}
+                  </H2>
                 </View>
               </View>
             </View>
···
                   : undefined
               }
             >
+              {/* Native potrait view: first row = handle/follow/viewers, second row = title */}
               <View
                 $gtXs={{ display: "none" }}
-                flexDirection="row"
-                gap="$2"
+                flexDirection="column"
                 borderBottomColor="#666"
                 borderBottomWidth={1}
                 borderTopColor="#666"
                 borderTopWidth={1}
                 zIndex={1}
               >
-                <View f={1} fb={0} padding="$3" justifyContent="center">
-                  <Text fontSize={18} numberOfLines={1} ellipsizeMode="tail">
-                    {player.livestream?.record.title}
-                  </Text>
-                </View>
                 <View
                   flexDirection="row"
                   alignItems="center"
                   gap="$2"
+                  paddingTop="$1"
+                  paddingBottom="$1"
+                  paddingLeft="$3"
                   paddingRight="$3"
+                  justifyContent="space-between"
                 >
-                  <Viewers viewers={player.viewers ?? 0} />
+                  <View
+                    style={{
+                      flexDirection: "row",
+                      alignItems: "center",
+                      flex: 1,
+                      gap: 8,
+                      minWidth: 0,
+                    }}
+                  >
+                    {streamerHandle && (
+                      <Text
+                        onPress={() =>
+                          Linking.openURL(
+                            `https://bsky.app/profile/${streamerHandle}`,
+                          )
+                        }
+                        aria-label={`View @${streamerHandle} on Bluesky`}
+                        style={{ cursor: "pointer" }}
+                        numberOfLines={1}
+                        ellipsizeMode="tail"
+                      >
+                        {`@${streamerHandle}`}
+                      </Text>
+                    )}
+                    {streamerDID && currentUserDID && (
+                      <FollowButton
+                        streamerDID={streamerDID}
+                        currentUserDID={currentUserDID}
+                        onFollowChange={handleFollowChange}
+                      />
+                    )}
+                  </View>
+                  <View style={{ alignItems: "flex-end" }}>
+                    <Viewers viewers={player.viewers ?? 0} />
+                  </View>
+                </View>
+                <View
+                  paddingLeft="$3"
+                  paddingRight="$3"
+                  paddingBottom="$3"
+                  marginTop={-15}
+                >
+                  <Text fontSize={18} numberOfLines={1} ellipsizeMode="tail">
+                    {player.livestream?.record.title}
+                  </Text>
                 </View>
               </View>
               <Chat
···
     </RNView>
   );
 }
+
+async function getCurrentUserDID(): Promise<string | null> {
+  try {
+    const did = await storage.getItem(
+      `${isWeb ? "@@atproto/oauth-client-browser(sub)" : "did"}`,
+    );
+    if (did) {
+      return did;
+    }
+    console.debug("Could not find user DID");
+    return null;
+  } catch (err) {
+    console.error("[ERROR] Failed to get current user DID:", err);
+    return null;
+  }
+}

js/app/features/bluesky/blueskySlice.tsx

···
   Agent,
   AppBskyFeedPost,
   AppBskyGraphBlock,
+  AppBskyGraphFollow,
   BlobRef,
   RichText,
 } from "@atproto/api";
···
   params.delete("code");
   u.search = params.toString();
   window.history.replaceState(null, "", u.toString());
+};
+
+// Deterministic rkey for follow
+const createDeterministicRKey = (
+  userDID: string,
+  subjectDID: string,
+): string => {
+  const combinedStr = userDID + ":" + subjectDID;
+  let hash = 0;
+  for (let i = 0; i < combinedStr.length; i++) {
+    const char = combinedStr.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash; // Convert to 32bit integer
+  }
+  // Convert to hex string and take first 16 chars
+  const hexHash = Math.abs(hash).toString(16).padStart(8, "0");
+  return hexHash.substring(0, 16);
 };
 
 export const blueskySlice = createAppSlice({
···
         },
       },
     ),
+
+    followUser: create.asyncThunk(
+      async (subjectDID: string, thunkAPI) => {
+        const { bluesky } = thunkAPI.getState() as {
+          bluesky: BlueskyState;
+        };
+        if (!bluesky.pdsAgent) {
+          throw new Error("No agent");
+        }
+        const did = bluesky.oauthSession?.did;
+        if (!did) {
+          throw new Error("No DID");
+        }
+
+        const rkey = createDeterministicRKey(did, subjectDID);
+        const record: AppBskyGraphFollow.Record = {
+          subject: subjectDID,
+          createdAt: new Date().toISOString(),
+        };
+        await bluesky.pdsAgent.com.atproto.repo.createRecord({
+          repo: did,
+          collection: "app.bsky.graph.follow",
+          rkey: rkey,
+          record,
+        });
+
+        return { subjectDID, rkey };
+      },
+      {
+        pending: (state) => {
+          console.log("followUser pending");
+        },
+        fulfilled: (state, action) => {
+          console.log("followUser fulfilled", action.payload);
+        },
+        rejected: (state, action) => {
+          console.error("followUser rejected", action.error);
+        },
+      },
+    ),
+
+    unfollowUser: create.asyncThunk(
+      async (
+        { subjectDID, rkey }: { subjectDID: string; rkey: string },
+        thunkAPI,
+      ) => {
+        const { bluesky } = thunkAPI.getState() as {
+          bluesky: BlueskyState;
+        };
+        if (!bluesky.pdsAgent) {
+          throw new Error("No agent");
+        }
+        const did = bluesky.oauthSession?.did;
+        if (!did) {
+          throw new Error("No DID");
+        }
+
+        await bluesky.pdsAgent.com.atproto.repo.deleteRecord({
+          repo: did,
+          collection: "app.bsky.graph.follow",
+          rkey: rkey,
+        });
+
+        return { subjectDID };
+      },
+      {
+        pending: (state) => {
+          console.log("unfollowUser pending");
+        },
+        fulfilled: (state, action) => {
+          console.log("unfollowUser fulfilled", action.payload);
+        },
+        rejected: (state, action) => {
+          console.error("unfollowUser rejected", action.error);
+        },
+      },
+    ),
   }),
 
   // You can define your selectors here. These selectors receive the slice
···
   chatPost,
   chatMessage,
   createBlockRecord,
+  followUser,
+  unfollowUser,
 } = blueskySlice.actions;
 
 // Selectors returned by `slice.selectors` take the root state as their first argument.

pkg/api/api.go

···
 	}
 	apiRouter.GET("/api/live-users", a.HandleLiveUsers(ctx))
 	apiRouter.GET("/api/view-count/:user", a.HandleViewCount(ctx))
+	apiRouter.GET("/api/following/:user", a.HandleFollowing(ctx))
+	apiRouter.POST("/api/follow/:user", a.HandleFollow(ctx))
+	apiRouter.DELETE("/api/follow/:user", a.HandleUnfollow(ctx))
 	apiRouter.NotFound = a.HandleAPI404(ctx)
 	router.Handler("GET", "/api/*resource", apiRouter)
 	router.Handler("POST", "/api/*resource", apiRouter)

pkg/api/api_internal.go

···
 import (
 	"bufio"
 	"context"
+	"crypto/sha256"
 	"encoding/base64"
+	"encoding/hex"
 	"encoding/json"
 	"fmt"
 	"io"
···
 	"strings"
 	"time"
 
+	"github.com/bluesky-social/indigo/api/bsky"
 	"github.com/julienschmidt/httprouter"
 	"github.com/prometheus/client_golang/prometheus/promhttp"
 	sloghttp "github.com/samber/slog-http"
···
 	"stream.place/streamplace/pkg/renditions"
 	v0 "stream.place/streamplace/pkg/schema/v0"
 )
+
+// Get current user DID from custom header
+func getUserDIDFromHeader(r *http.Request) (string, error) {
+	didHeader := r.Header.Get("X-User-DID")
+	if didHeader != "" && strings.HasPrefix(didHeader, "did:") {
+		return didHeader, nil
+	}
+
+	return "", fmt.Errorf("could not find user DID in headers")
+}
+
+// Deterministic rkey for a follow relationship
+func deterministicRKey(userDID, subjectDID string) string {
+	h := sha256.New()
+	h.Write([]byte(userDID + ":" + subjectDID))
+	return hex.EncodeToString(h.Sum(nil))[:16] // 16 chars for brevity
+}
+
+// GET /api/following/:user
+func (a *StreamplaceAPI) HandleFollowing(ctx context.Context) httprouter.Handle {
+	return func(w http.ResponseWriter, r *http.Request, p httprouter.Params) {
+		user := p.ByName("user")
+		if user == "" {
+			log.Error(ctx, "Missing user parameter")
+			errors.WriteHTTPBadRequest(w, "user required", nil)
+			return
+		}
+		user, err := a.NormalizeUser(ctx, user)
+		if err != nil {
+			log.Error(ctx, "Failed to normalize user", "user", user, "error", err)
+			errors.WriteHTTPNotFound(w, "user not found", err)
+			return
+		}
+
+		following, err := a.Model.GetUserFollowing(ctx, user)
+		if err != nil {
+			log.Error(ctx, "Failed to get user following", "user", user, "error", err)
+			errors.WriteHTTPInternalServerError(w, "unable to get following", err)
+			return
+		}
+
+		bs, err := json.Marshal(following)
+		if err != nil {
+			log.Error(ctx, "Failed to marshal following list", "error", err)
+			errors.WriteHTTPInternalServerError(w, "unable to marshal json", err)
+			return
+		}
+		w.Write(bs)
+	}
+}
+
+// POST /api/follow/:user
+func (a *StreamplaceAPI) HandleFollow(ctx context.Context) httprouter.Handle {
+	return func(w http.ResponseWriter, r *http.Request, p httprouter.Params) {
+		userDID, err := getUserDIDFromHeader(r)
+		if err != nil {
+			log.Error(ctx, "Failed to get user DID from session", "error", err)
+			http.Error(w, fmt.Sprintf("Unauthorized: %v", err), http.StatusUnauthorized)
+			return
+		}
+
+		subject := p.ByName("user")
+		if subject == "" {
+			http.Error(w, "user required", http.StatusBadRequest)
+			return
+		}
+		subject, err = a.NormalizeUser(ctx, subject)
+		if err != nil {
+			log.Error(ctx, "Invalid user", "subject", subject, "error", err)
+			http.Error(w, "invalid user", http.StatusBadRequest)
+			return
+		}
+
+		if userDID == subject {
+			http.Error(w, "cannot follow yourself", http.StatusBadRequest)
+			return
+		}
+
+		// Check if already following
+		following, err := a.Model.GetUserFollowing(ctx, userDID)
+		if err != nil {
+			log.Error(ctx, "Error getting user following", "userDID", userDID, "error", err)
+		} else {
+			for _, f := range following {
+				if f.SubjectDID == subject {
+					log.Debug(ctx, "User already following subject", "userDID", userDID, "subject", subject)
+					w.WriteHeader(http.StatusNoContent)
+					return
+				}
+			}
+		}
+
+		rkey := deterministicRKey(userDID, subject)
+		createdAt := time.Now().UTC().Format("2006-01-02T15:04:05.000Z")
+		follow := &bsky.GraphFollow{
+			Subject:   subject,
+			CreatedAt: createdAt,
+		}
+
+		err = a.Model.CreateFollow(ctx, userDID, rkey, follow)
+		if err != nil {
+			log.Error(ctx, "Failed to create follow in local database", "userDID", userDID, "subject", subject, "error", err)
+			http.Error(w, fmt.Sprintf("failed to follow: %v", err), http.StatusInternalServerError)
+			return
+		}
+	}
+}
+
+// DELETE /api/follow/:user
+func (a *StreamplaceAPI) HandleUnfollow(ctx context.Context) httprouter.Handle {
+	return func(w http.ResponseWriter, r *http.Request, p httprouter.Params) {
+		userDID, err := getUserDIDFromHeader(r)
+		if err != nil {
+			log.Error(ctx, "Failed to get user DID from session", "error", err)
+			http.Error(w, fmt.Sprintf("Unauthorized: %v", err), http.StatusUnauthorized)
+			return
+		}
+
+		subject := p.ByName("user")
+		if subject == "" {
+			http.Error(w, "user required", http.StatusBadRequest)
+			return
+		}
+		subject, err = a.NormalizeUser(ctx, subject)
+		if err != nil {
+			log.Error(ctx, "Invalid user", "subject", subject, "error", err)
+			http.Error(w, "invalid user", http.StatusBadRequest)
+			return
+		}
+
+		// Find the follow record to get the rkey
+		following, err := a.Model.GetUserFollowing(ctx, userDID)
+		if err != nil {
+			log.Error(ctx, "Error getting user following", "userDID", userDID, "error", err)
+			http.Error(w, fmt.Sprintf("failed to query follows: %v", err), http.StatusInternalServerError)
+			return
+		}
+
+		var rkey string
+		for _, f := range following {
+			if f.SubjectDID == subject {
+				rkey = f.RKey
+				break
+			}
+		}
+
+		if rkey == "" {
+			log.Debug(ctx, "No follow relationship found to delete", "userDID", userDID, "subject", subject)
+			w.WriteHeader(http.StatusNoContent)
+			return
+		}
+
+		err = a.Model.DeleteFollow(ctx, userDID, rkey)
+		if err != nil {
+			log.Error(ctx, "Failed to delete follow from local database", "userDID", userDID, "subject", subject, "rkey", rkey, "error", err)
+			http.Error(w, fmt.Sprintf("failed to unfollow: %v", err), http.StatusInternalServerError)
+			return
+		}
+	}
+}
 
 func (a *StreamplaceAPI) ServeInternalHTTP(ctx context.Context) error {
 	handler, err := a.InternalHandler(ctx)