From 6d549ffe77b46b05fc26e7594e46254e32369713 Mon Sep 17 00:00:00 2001
From: vincent <vincentcharlebois@gmail.com>
Date: Thu, 18 Dec 2025 11:13:41 -0500
Subject: [PATCH] feat(frontend): Add livestream title management to delegated
 moderation

Enable delegated moderators with livestream.manage permission to update
stream titles via mod view.

- Add useUpdateLivestreamRecord hook with owner/delegated paths
- Implement update stream title dialog in mod view
- Add livestream management permission checks
- Export block module from streamplace-store

Note: block.tsx now contains multiple moderation actions.

Related to #718
---
 .../src/components/chat/mod-view.tsx          | 550 ++++++++++++++----
 js/components/src/streamplace-store/block.tsx |  81 +++
 js/components/src/streamplace-store/index.tsx |   1 +
 3 files changed, 504 insertions(+), 128 deletions(-)

diff --git a/js/components/src/components/chat/mod-view.tsx b/js/components/src/components/chat/mod-view.tsx
index 7547bfe8f..95bca92e0 100644
--- a/js/components/src/components/chat/mod-view.tsx
+++ b/js/components/src/components/chat/mod-view.tsx
@@ -5,27 +5,36 @@ import { usePlayerStore } from "../../player-store";
 import {
   useCreateBlockRecord,
   useCreateHideChatRecord,
+  useUpdateLivestreamRecord,
 } from "../../streamplace-store/block";
-import { useCanModerate } from "../../streamplace-store/moderation";
+import {
+  ModerationPermissions,
+  useCanModerate,
+} from "../../streamplace-store/moderation";
 import { usePDSAgent } from "../../streamplace-store/xrpc";
 
 import { Linking } from "react-native";
 import { ChatMessageViewHydrated } from "streamplace";
 import {
   useDeleteChatMessage,
+  useLivestream,
   useLivestreamStore,
 } from "../../livestream-store";
 import { useStreamplaceStore } from "../../streamplace-store";
 import { formatHandle, formatHandleWithAt } from "../../utils/format-handle";
 import {
   atoms,
+  Button,
+  DialogFooter,
   DropdownMenu,
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuTrigger,
   layout,
+  ResponsiveDialog,
   ResponsiveDropdownMenuContent,
   Text,
+  Textarea,
   useToast,
   View,
 } from "../ui";
@@ -46,11 +55,16 @@ export type ModViewRef = {
 export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
   const triggerRef = useRef<TriggerRef>(null);
   const message = usePlayerStore((state) => state.modMessage);
+  const toast = useToast();
 
   let agent = usePDSAgent();
   let [messageRemoved, setMessageRemoved] = useState(false);
   let { createBlock, isLoading: isBlockLoading } = useCreateBlockRecord();
   let { createHideChat, isLoading: isHideLoading } = useCreateHideChatRecord();
+  let { updateLivestream, isLoading: isUpdateTitleLoading } =
+    useUpdateLivestreamRecord();
+  const livestream = useLivestream();
+  const [showUpdateTitleDialog, setShowUpdateTitleDialog] = useState(false);
 
   const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen);
   const setReportSubject = usePlayerStore((x) => x.setReportSubject);
@@ -67,16 +81,11 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
   // get the logged in user's identity
   const handle = useStreamplaceStore((state) => state.handle);
 
-  if (!agent?.did) {
-    <View style={[layout.flex.row, layout.flex.alignCenter, gap.all[2]]}>
-      <Text>Log in to submit mod actions</Text>
-    </View>;
-  }
-
   const cleanup = () => {
     setModMessage(null);
   };
 
+  // Effect must be called unconditionally (before any early returns)
   useEffect(() => {
     if (message) {
       setMessageRemoved(false);
@@ -86,135 +95,262 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
     }
   }, [message]);
 
-  // Can show moderation actions if user can hide or ban
-  const canModerate = modPermissions.canHide || modPermissions.canBan;
+  // Early return AFTER all hooks have been called
+  if (!agent?.did) {
+    return (
+      <View style={[layout.flex.row, layout.flex.alignCenter, gap.all[2]]}>
+        <Text>Log in to submit mod actions</Text>
+      </View>
+    );
+  }
+
+  // Can show moderation actions if user can hide, ban, or manage livestream
+  const canModerate =
+    modPermissions.canHide ||
+    modPermissions.canBan ||
+    modPermissions.canManageLivestream;
+
+  // Check if any moderation actions are actually available for this message
+  // This must match the individual action checks inside the DropdownMenuGroup
+  const hasAvailableActions = !!(
+    message &&
+    agent?.did &&
+    ((modPermissions.canHide && message.author.did !== streamerDID) ||
+      (modPermissions.canBan &&
+        message.author.did !== agent.did &&
+        message.author.did !== streamerDID))
+  );
 
   return (
-    <DropdownMenu
-      style={[layout.flex.row, layout.flex.alignCenter, gap.all[2], w[80]]}
-      onOpenChange={(isOpen) => {
-        if (!isOpen) {
-          cleanup();
-        }
-      }}
-    >
-      <DropdownMenuTrigger ref={triggerRef}>
-        {/* Hidden trigger */}
-        <View />
-      </DropdownMenuTrigger>
-      <ResponsiveDropdownMenuContent>
-        {message && (
-          <>
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <View
-                  style={[
-                    layout.flex.column,
-                    mr[5],
-                    { gap: 6, maxWidth: "100%" },
-                  ]}
-                >
-                  <Text
-                    style={{
-                      fontVariant: ["tabular-nums"],
-                      color: atoms.colors.gray[300],
-                    }}
-                  >
-                    {new Date(message.record.createdAt).toLocaleTimeString([], {
-                      hour: "2-digit",
-                      minute: "2-digit",
-                      hour12: false,
-                    })}{" "}
-                    {formatHandleWithAt(message.author)}: {message.record.text}
-                  </Text>
-                </View>
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-
-            {canModerate && (
-              <DropdownMenuGroup title={`Moderation actions`}>
-                {modPermissions.canHide && (
-                  <DropdownMenuItem
-                    disabled={isHideLoading || messageRemoved}
-                    onPress={() => {
-                      if (isHideLoading || messageRemoved) return;
-                      createHideChat(message.uri, streamerDID ?? undefined)
-                        .then((r) => setMessageRemoved(true))
-                        .catch((e) => console.error(e));
-                    }}
-                  >
-                    <Text
-                      color={
-                        isHideLoading || messageRemoved
-                          ? "muted"
-                          : "destructive"
-                      }
-                    >
-                      {isHideLoading
-                        ? "Removing..."
-                        : messageRemoved
-                          ? "Message removed"
-                          : "Remove this message"}
-                    </Text>
-                  </DropdownMenuItem>
-                )}
-                {modPermissions.canBan && (
-                  <DropdownMenuItem
-                    disabled={
-                      message.author.did === agent?.did || isBlockLoading
-                    }
-                    onPress={() => {
-                      createBlock(message.author.did, streamerDID ?? undefined)
-                        .then((r) => console.log(r))
-                        .catch((e) => console.error(e));
-                    }}
-                  >
-                    {message.author.did === agent?.did ? (
-                      <Text color="muted">
-                        Block yourself (you can't block yourself)
-                      </Text>
-                    ) : (
-                      <Text color="destructive">
-                        {isBlockLoading
-                          ? "Blocking..."
-                          : `Block user ${formatHandleWithAt(message.author)} from this channel`}
-                      </Text>
-                    )}
-                  </DropdownMenuItem>
-                )}
-              </DropdownMenuGroup>
-            )}
+    <>
+      <DropdownMenu
+        style={[layout.flex.row, layout.flex.alignCenter, gap.all[2], w[80]]}
+        onOpenChange={(isOpen) => {
+          if (!isOpen) {
+            cleanup();
+          }
+        }}
+      >
+        <DropdownMenuTrigger ref={triggerRef}>
+          {/* Hidden trigger */}
+          <View />
+        </DropdownMenuTrigger>
+        <ResponsiveDropdownMenuContent>
+          {message && (
+            <ModViewContent
+              message={message}
+              modPermissions={modPermissions}
+              agent={agent}
+              streamerDID={streamerDID}
+              hasAvailableActions={hasAvailableActions}
+              isHideLoading={isHideLoading}
+              isBlockLoading={isBlockLoading}
+              messageRemoved={messageRemoved}
+              setMessageRemoved={setMessageRemoved}
+              createHideChat={createHideChat}
+              createBlock={createBlock}
+              toast={toast}
+              setShowUpdateTitleDialog={setShowUpdateTitleDialog}
+              isUpdateTitleLoading={isUpdateTitleLoading}
+              livestream={livestream}
+              setReportModalOpen={setReportModalOpen}
+              setReportSubject={setReportSubject}
+              deleteChatMessage={deleteChatMessage}
+            />
+          )}
+        </ResponsiveDropdownMenuContent>
+      </DropdownMenu>
 
-            <DropdownMenuGroup title={`User actions`}>
+      {/* Update Stream Title Dialog - rendered outside dropdown */}
+      {showUpdateTitleDialog && (
+        <UpdateStreamTitleDialog
+          livestream={livestream}
+          streamerDID={streamerDID}
+          updateLivestream={updateLivestream}
+          isLoading={isUpdateTitleLoading}
+          onClose={() => setShowUpdateTitleDialog(false)}
+        />
+      )}
+    </>
+  );
+});
+
+interface ModViewContentProps {
+  message: ChatMessageViewHydrated;
+  modPermissions: ModerationPermissions;
+  agent: ReturnType<typeof usePDSAgent>;
+  streamerDID?: string;
+  hasAvailableActions: boolean;
+  isHideLoading: boolean;
+  isBlockLoading: boolean;
+  messageRemoved: boolean;
+  setMessageRemoved: (removed: boolean) => void;
+  createHideChat: (uri: string, streamerDID?: string) => Promise<any>;
+  createBlock: (did: string, streamerDID?: string) => Promise<any>;
+  toast: ReturnType<typeof useToast>;
+  setShowUpdateTitleDialog: (show: boolean) => void;
+  isUpdateTitleLoading: boolean;
+  livestream: any;
+  setReportModalOpen: (open: boolean) => void;
+  setReportSubject: (subject: any) => void;
+  deleteChatMessage: (uri: string) => Promise<any>;
+}
+
+function ModViewContent({
+  message,
+  modPermissions,
+  agent,
+  streamerDID,
+  hasAvailableActions,
+  isHideLoading,
+  isBlockLoading,
+  messageRemoved,
+  setMessageRemoved,
+  createHideChat,
+  createBlock,
+  toast,
+  setShowUpdateTitleDialog,
+  isUpdateTitleLoading,
+  livestream,
+  setReportModalOpen,
+  setReportSubject,
+  deleteChatMessage,
+}: ModViewContentProps) {
+  const { onOpenChange } = useRootContext();
+
+  return (
+    <>
+      <DropdownMenuGroup key="message-display">
+        <DropdownMenuItem>
+          <View
+            style={[layout.flex.column, mr[5], { gap: 6, maxWidth: "100%" }]}
+          >
+            <Text
+              style={{
+                fontVariant: ["tabular-nums"],
+                color: atoms.colors.gray[300],
+              }}
+            >
+              {new Date(message.record.createdAt).toLocaleTimeString([], {
+                hour: "2-digit",
+                minute: "2-digit",
+                hour12: false,
+              })}{" "}
+              {formatHandleWithAt(message.author)}: {message.record.text}
+            </Text>
+          </View>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+
+      {hasAvailableActions && (
+        <DropdownMenuGroup
+          key="moderation-actions"
+          title={`Moderation actions`}
+        >
+          {modPermissions.canHide && message.author.did !== streamerDID && (
+            <DropdownMenuItem
+              disabled={isHideLoading || messageRemoved}
+              onPress={() => {
+                if (isHideLoading || messageRemoved) return;
+                createHideChat(message.uri, streamerDID ?? undefined)
+                  .then((r) => setMessageRemoved(true))
+                  .catch((e) => console.error(e));
+              }}
+            >
+              <Text
+                color={isHideLoading || messageRemoved ? "muted" : "warning"}
+              >
+                {isHideLoading
+                  ? "Hiding..."
+                  : messageRemoved
+                    ? "Message hidden"
+                    : "Hide this message"}
+              </Text>
+            </DropdownMenuItem>
+          )}
+          {modPermissions.canBan &&
+            agent?.did &&
+            message.author.did !== agent.did &&
+            message.author.did !== streamerDID && (
               <DropdownMenuItem
+                disabled={isBlockLoading}
                 onPress={() => {
-                  Linking.openURL(
-                    `https://${BSKY_FRONTEND_DOMAIN}/profile/${formatHandle(message.author)}`,
-                  );
+                  if (isBlockLoading) return;
+                  createBlock(message.author.did, streamerDID ?? undefined)
+                    .then((r) => {
+                      toast.show(
+                        "User blocked",
+                        `${formatHandleWithAt(message.author)} has been blocked from this channel.`,
+                        { duration: 3 },
+                      );
+                      onOpenChange?.(false);
+                    })
+                    .catch((e) => {
+                      console.error(e);
+                      toast.show(
+                        "Error blocking user",
+                        e instanceof Error ? e.message : "Failed to block user",
+                        { duration: 5 },
+                      );
+                    });
                 }}
               >
-                <Text color="primary">View user on {BSKY_FRONTEND_DOMAIN}</Text>
+                <Text color="destructive">
+                  {isBlockLoading
+                    ? "Blocking..."
+                    : `Block user ${formatHandleWithAt(message.author)} from this channel`}
+                </Text>
               </DropdownMenuItem>
-              {message.author.did === agent?.did && (
-                <DeleteButton
-                  message={message}
-                  deleteChatMessage={deleteChatMessage}
-                />
-              )}
-              {message.author.did !== agent?.did && (
-                <ReportButton
-                  message={message}
-                  setReportModalOpen={setReportModalOpen}
-                  setReportSubject={setReportSubject}
-                />
-              )}
-            </DropdownMenuGroup>
-          </>
+            )}
+        </DropdownMenuGroup>
+      )}
+
+      {modPermissions.canManageLivestream && (
+        <DropdownMenuGroup key="stream-actions" title={`Stream actions`}>
+          <DropdownMenuItem
+            onPress={() => {
+              setShowUpdateTitleDialog(true);
+            }}
+            disabled={isUpdateTitleLoading || !livestream}
+          >
+            <Text
+              color={isUpdateTitleLoading || !livestream ? "muted" : "primary"}
+            >
+              {isUpdateTitleLoading ? "Updating..." : "Update stream title"}
+            </Text>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      )}
+
+      <DropdownMenuGroup key="user-actions" title={`User actions`}>
+        <DropdownMenuItem
+          onPress={() => {
+            Linking.openURL(
+              `https://${BSKY_FRONTEND_DOMAIN}/profile/${formatHandle(message.author)}`,
+            );
+          }}
+        >
+          <Text color="primary">View user on {BSKY_FRONTEND_DOMAIN}</Text>
+        </DropdownMenuItem>
+        {message.author.did === agent?.did && (
+          <DeleteButton
+            message={message}
+            deleteChatMessage={deleteChatMessage}
+            onOpenChange={onOpenChange}
+          />
         )}
-      </ResponsiveDropdownMenuContent>
-    </DropdownMenu>
+        {message.author.did !== agent?.did && (
+          <ReportButton
+            message={message}
+            setReportModalOpen={setReportModalOpen}
+            setReportSubject={setReportSubject}
+            onOpenChange={onOpenChange}
+          />
+        )}
+      </DropdownMenuGroup>
+    </>
   );
-});
+}
 
 enum DeleteState {
   None,
@@ -225,12 +361,13 @@ enum DeleteState {
 export function DeleteButton({
   message,
   deleteChatMessage,
+  onOpenChange,
 }: {
   message: ChatMessageViewHydrated;
   deleteChatMessage: (uri: string) => Promise<any>;
+  onOpenChange?: (open: boolean) => void;
 }) {
   const [confirming, setConfirming] = useState<DeleteState>(DeleteState.None);
-  const { onOpenChange } = useRootContext();
   const toast = useToast();
   return (
     <DropdownMenuItem
@@ -271,12 +408,13 @@ export function ReportButton({
   message,
   setReportModalOpen,
   setReportSubject,
+  onOpenChange,
 }: {
   message: ChatMessageViewHydrated;
   setReportModalOpen: (open: boolean) => void;
   setReportSubject: (subject: any) => void;
+  onOpenChange?: (open: boolean) => void;
 }) {
-  const { onOpenChange } = useRootContext();
   return (
     <DropdownMenuItem
       onPress={() => {
@@ -295,3 +433,159 @@ export function ReportButton({
     </DropdownMenuItem>
   );
 }
+
+interface UpdateStreamTitleDialogProps {
+  livestream: any;
+  streamerDID?: string;
+  updateLivestream: (
+    livestreamUri: string,
+    title: string,
+    streamerDID?: string,
+  ) => Promise<any>;
+  isLoading: boolean;
+  onClose: () => void;
+}
+
+function UpdateStreamTitleDialog({
+  livestream,
+  streamerDID,
+  updateLivestream,
+  isLoading,
+  onClose,
+}: UpdateStreamTitleDialogProps) {
+  const [title, setTitle] = useState(livestream?.record?.title || "");
+  const [error, setError] = useState<string | null>(null);
+  const toast = useToast();
+
+  useEffect(() => {
+    if (livestream?.record?.title) {
+      setTitle(livestream.record.title);
+    }
+  }, [livestream?.record?.title]);
+
+  const handleUpdate = async () => {
+    setError(null);
+
+    if (!title.trim()) {
+      setError("Please enter a stream title");
+      return;
+    }
+
+    if (!livestream?.uri) {
+      setError("No livestream found");
+      return;
+    }
+
+    try {
+      await updateLivestream(livestream.uri, title.trim(), streamerDID);
+      toast.show(
+        "Stream title updated",
+        "The stream title has been successfully updated.",
+        { duration: 3 },
+      );
+      onClose();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to update stream title",
+      );
+    }
+  };
+
+  return (
+    <ResponsiveDialog
+      open={true}
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose();
+          setError(null);
+          setTitle(livestream?.record?.title || "");
+        }
+      }}
+      title="Update Stream Title"
+      description="Update the title of the livestream."
+      size="md"
+      dismissible={false}
+    >
+      <View style={[{ padding: 16, paddingBottom: 0 }]}>
+        <View style={[{ marginBottom: 16 }]}>
+          <Text
+            style={[
+              { color: atoms.colors.gray[300], fontSize: 13, marginBottom: 8 },
+            ]}
+          >
+            Stream Title
+          </Text>
+          <Textarea
+            value={title}
+            onChangeText={(text) => {
+              setTitle(text);
+              setError(null);
+            }}
+            placeholder="Enter stream title..."
+            maxLength={140}
+            multiline
+            style={[
+              {
+                padding: 12,
+                borderRadius: 8,
+                backgroundColor: atoms.colors.neutral[800],
+                color: atoms.colors.white,
+                borderWidth: 1,
+                borderColor: atoms.colors.neutral[600],
+                minHeight: 100,
+                fontSize: 16,
+              },
+            ]}
+          />
+          <Text
+            style={[
+              { color: atoms.colors.gray[400], fontSize: 12, marginTop: 4 },
+            ]}
+          >
+            {title.length}/140 characters
+          </Text>
+        </View>
+
+        {error && (
+          <View
+            style={[
+              {
+                backgroundColor: atoms.colors.red[900],
+                padding: 12,
+                borderRadius: 8,
+                borderWidth: 1,
+                borderColor: atoms.colors.red[700],
+                marginBottom: 16,
+              },
+            ]}
+          >
+            <Text style={[{ color: atoms.colors.red[400], fontSize: 13 }]}>
+              {error}
+            </Text>
+          </View>
+        )}
+      </View>
+
+      <DialogFooter>
+        <Button
+          variant="secondary"
+          onPress={() => {
+            onClose();
+            setError(null);
+            setTitle(livestream?.record?.title || "");
+          }}
+          disabled={isLoading}
+        >
+          <Text>Cancel</Text>
+        </Button>
+        <Button
+          variant="primary"
+          onPress={handleUpdate}
+          disabled={isLoading || !title.trim()}
+        >
+          <Text>{isLoading ? "Updating..." : "Update Title"}</Text>
+        </Button>
+      </DialogFooter>
+    </ResponsiveDialog>
+  );
+}
diff --git a/js/components/src/streamplace-store/block.tsx b/js/components/src/streamplace-store/block.tsx
index 64a5fd702..a15080c2d 100644
--- a/js/components/src/streamplace-store/block.tsx
+++ b/js/components/src/streamplace-store/block.tsx
@@ -112,3 +112,84 @@ export function useCreateHideChatRecord() {
 
   return { createHideChat, isLoading };
 }
+
+/**
+ * Hook to update a livestream record (update stream title).
+ *
+ * When the caller is the stream owner (agent.did === streamerDID), updates the
+ * livestream record directly via ATProto writes to their repo.
+ *
+ * When the caller is a delegated moderator, uses the place.stream.moderation.updateLivestream
+ * XRPC endpoint which validates permissions and updates the record using the
+ * streamer's OAuth session.
+ */
+export function useUpdateLivestreamRecord() {
+  let agent = usePDSAgent();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const updateLivestream = async (
+    livestreamUri: string,
+    title: string,
+    streamerDID?: string,
+  ) => {
+    if (!agent) {
+      throw new Error("No PDS agent found");
+    }
+
+    if (!agent.did) {
+      throw new Error("No user DID found, assuming not logged in");
+    }
+
+    setIsLoading(true);
+    try {
+      // If no streamerDID provided or caller is the streamer, use direct ATProto write
+      if (!streamerDID || agent.did === streamerDID) {
+        // Extract rkey from URI
+        const rkey = livestreamUri.split("/").pop();
+        if (!rkey) {
+          throw new Error("Invalid livestream URI");
+        }
+
+        // Get existing record first
+        const getResult = await agent.com.atproto.repo.getRecord({
+          repo: agent.did,
+          collection: "place.stream.livestream",
+          rkey,
+        });
+
+        const oldRecord = getResult.data.value as any;
+
+        // Update the record
+        const record = {
+          $type: "place.stream.livestream",
+          title: title,
+          url: oldRecord.url,
+          createdAt: oldRecord.createdAt,
+          post: oldRecord.post,
+          thumb: oldRecord.thumb,
+        };
+
+        const result = await agent.com.atproto.repo.putRecord({
+          repo: agent.did,
+          collection: "place.stream.livestream",
+          rkey,
+          record,
+          swapRecord: getResult.data.cid,
+        });
+        return result;
+      }
+
+      // Otherwise, use delegated moderation endpoint
+      const result = await agent.place.stream.moderation.updateLivestream({
+        streamer: streamerDID,
+        livestreamUri: livestreamUri,
+        title: title,
+      });
+      return result;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return { updateLivestream, isLoading };
+}
diff --git a/js/components/src/streamplace-store/index.tsx b/js/components/src/streamplace-store/index.tsx
index 3b63d52fa..f0590fc68 100644
--- a/js/components/src/streamplace-store/index.tsx
+++ b/js/components/src/streamplace-store/index.tsx
@@ -1,3 +1,4 @@
+export * from "./block";
 export * from "./moderation";
 export * from "./moderator-management";
 export * from "./stream";
-- 
2.51.2