Merge pull request #860 from streamplace/v/fix-update-stream-title-location

fix: move stream title update button from the ModView to kebab menu

js/app/components/mobile/desktop-ui/kebab.tsx

···
   DropdownMenuTrigger,
   ResponsiveDropdownMenuContent,
   Text,
+  UpdateStreamTitleDialog,
+  useCanModerate,
+  useLivestream,
   useLivestreamInfo,
   useLivestreamStore,
   usePlayerStore,
   useTheme,
+  useUpdateLivestreamRecord,
 } from "@streamplace/components";
 import { EllipsisVertical } from "lucide-react-native";
 import { useState } from "react";
···
 export function KebabMenu({ dropdownPortalContainer }: KebabMenuProps) {
   const th = useTheme();
   const [isOpen, setIsOpen] = useState(false);
+  const [showUpdateTitleDialog, setShowUpdateTitleDialog] = useState(false);
 
-  const livestream = useLivestreamStore((x) => x.livestream);
+  const livestreamFromStore = useLivestreamStore((x) => x.livestream);
+  const livestream = useLivestream();
   const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen);
   const setReportSubject = usePlayerStore((x) => x.setReportSubject);
   const { profile } = useLivestreamInfo();
 
+  // Get the streamer's DID from the profile
+  const streamerDID = profile?.did;
+  // Check moderation permissions for the current user on this streamer's channel
+  const modPermissions = useCanModerate(streamerDID);
+  const { updateLivestream, isLoading: isUpdateTitleLoading } =
+    useUpdateLivestreamRecord();
+
   const iconRotate = useAnimatedStyle(() => {
     return {
       transform: [
···
   });
 
   return (
-    <DropdownMenu onOpenChange={setIsOpen} key={dropdownPortalContainer}>
-      <DropdownMenuTrigger>
-        <Animated.View style={[iconRotate]}>
-          <EllipsisVertical color={th.theme.colors.foreground} />
-        </Animated.View>
-      </DropdownMenuTrigger>
-      <ResponsiveDropdownMenuContent
-        side="top"
-        align="end"
-        portalHost={dropdownPortalContainer}
-      >
-        <DropdownMenuGroup title="Report">
-          <ReportStreamItem
-            livestream={livestream}
-            setReportModalOpen={setReportModalOpen}
-            setReportSubject={setReportSubject}
-          />
-          <ReportUserItem
-            profile={profile}
-            setReportModalOpen={setReportModalOpen}
-            setReportSubject={setReportSubject}
-          />
-        </DropdownMenuGroup>
-      </ResponsiveDropdownMenuContent>
-    </DropdownMenu>
+    <>
+      <DropdownMenu onOpenChange={setIsOpen} key={dropdownPortalContainer}>
+        <DropdownMenuTrigger>
+          <Animated.View style={[iconRotate]}>
+            <EllipsisVertical color={th.theme.colors.foreground} />
+          </Animated.View>
+        </DropdownMenuTrigger>
+        <ResponsiveDropdownMenuContent
+          side="top"
+          align="end"
+          portalHost={dropdownPortalContainer}
+        >
+          {modPermissions.canManageLivestream && (
+            <DropdownMenuGroup title="Stream Settings">
+              <UpdateStreamTitleItem
+                setShowUpdateTitleDialog={setShowUpdateTitleDialog}
+                isUpdateTitleLoading={isUpdateTitleLoading}
+                livestream={livestream}
+              />
+            </DropdownMenuGroup>
+          )}
+          <DropdownMenuGroup title="Report">
+            <ReportStreamItem
+              livestream={livestreamFromStore}
+              setReportModalOpen={setReportModalOpen}
+              setReportSubject={setReportSubject}
+            />
+            <ReportUserItem
+              profile={profile}
+              setReportModalOpen={setReportModalOpen}
+              setReportSubject={setReportSubject}
+            />
+          </DropdownMenuGroup>
+        </ResponsiveDropdownMenuContent>
+      </DropdownMenu>
+
+      {showUpdateTitleDialog && (
+        <UpdateStreamTitleDialog
+          livestream={livestream}
+          streamerDID={streamerDID}
+          updateLivestream={updateLivestream}
+          isLoading={isUpdateTitleLoading}
+          onClose={() => setShowUpdateTitleDialog(false)}
+        />
+      )}
+    </>
   );
 }
 
···
     </DropdownMenuItem>
   );
 }
+
+function UpdateStreamTitleItem({
+  setShowUpdateTitleDialog,
+  isUpdateTitleLoading,
+  livestream,
+}: {
+  setShowUpdateTitleDialog: (show: boolean) => void;
+  isUpdateTitleLoading: boolean;
+  livestream: any;
+}) {
+  const { onOpenChange } = useRootContext();
+
+  return (
+    <DropdownMenuItem
+      onPress={() => {
+        onOpenChange?.(false);
+        setShowUpdateTitleDialog(true);
+      }}
+      disabled={isUpdateTitleLoading || !livestream}
+    >
+      <Text>
+        {isUpdateTitleLoading ? "Updating..." : "Update stream title"}
+      </Text>
+    </DropdownMenuItem>
+  );
+}

js/components/src/components/chat/mod-view.tsx

···
 import {
   useCreateBlockRecord,
   useCreateHideChatRecord,
-  useUpdateLivestreamRecord,
 } from "../../streamplace-store/block";
 import {
   ModerationPermissions,
···
 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";
···
   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);
···
               createHideChat={createHideChat}
               createBlock={createBlock}
               toast={toast}
-              setShowUpdateTitleDialog={setShowUpdateTitleDialog}
-              isUpdateTitleLoading={isUpdateTitleLoading}
-              livestream={livestream}
               setReportModalOpen={setReportModalOpen}
               setReportSubject={setReportSubject}
               deleteChatMessage={deleteChatMessage}
···
           )}
         </ResponsiveDropdownMenuContent>
       </DropdownMenu>
-
-      {/* Update Stream Title Dialog - rendered outside dropdown */}
-      {showUpdateTitleDialog && (
-        <UpdateStreamTitleDialog
-          livestream={livestream}
-          streamerDID={streamerDID}
-          updateLivestream={updateLivestream}
-          isLoading={isUpdateTitleLoading}
-          onClose={() => setShowUpdateTitleDialog(false)}
-        />
-      )}
     </>
   );
 });
···
   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>;
···
   createHideChat,
   createBlock,
   toast,
-  setShowUpdateTitleDialog,
-  isUpdateTitleLoading,
-  livestream,
   setReportModalOpen,
   setReportSubject,
   deleteChatMessage,
···
         </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={() => {
···
     </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
-          width="min"
-          variant="secondary"
-          onPress={() => {
-            onClose();
-            setError(null);
-            setTitle(livestream?.record?.title || "");
-          }}
-          disabled={isLoading}
-        >
-          <Text>Cancel</Text>
-        </Button>
-        <Button
-          variant="primary"
-          width="min"
-          onPress={handleUpdate}
-          disabled={isLoading || !title.trim()}
-        >
-          <Text>{isLoading ? "Updating..." : "Update Title"}</Text>
-        </Button>
-      </DialogFooter>
-    </ResponsiveDialog>
-  );
-}

js/components/src/components/chat/update-stream-title-dialog.tsx

···
+import { useEffect, useState } from "react";
+import {
+  atoms,
+  Button,
+  DialogFooter,
+  ResponsiveDialog,
+  Text,
+  Textarea,
+  useToast,
+  View,
+} from "../ui";
+
+export interface UpdateStreamTitleDialogProps {
+  livestream: any;
+  streamerDID?: string;
+  updateLivestream: (
+    livestreamUri: string,
+    title: string,
+    streamerDID?: string,
+  ) => Promise<any>;
+  isLoading: boolean;
+  onClose: () => void;
+}
+
+export 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
+          width="min"
+          variant="secondary"
+          onPress={() => {
+            onClose();
+            setError(null);
+            setTitle(livestream?.record?.title || "");
+          }}
+          disabled={isLoading}
+        >
+          <Text>Cancel</Text>
+        </Button>
+        <Button
+          variant="primary"
+          width="min"
+          onPress={handleUpdate}
+          disabled={isLoading || !title.trim()}
+        >
+          <Text>{isLoading ? "Updating..." : "Update Title"}</Text>
+        </Button>
+      </DialogFooter>
+    </ResponsiveDialog>
+  );
+}

js/components/src/index.tsx

···
 export * from "./components/chat/chat";
 export * from "./components/chat/chat-box";
 export * from "./components/chat/system-message";
+export * from "./components/chat/update-stream-title-dialog";
 export { default as VideoRetry } from "./components/mobile-player/video-retry";
 export * from "./lib/system-messages";