Edit room name within explore

pages/explore/manage-room/ChangeRoomName.js

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+
+import { useAuth } from '@/lib/Auth';
+import ConfirmCancelButtons from '@/components/UI/ConfirmCancelButtons';
+import { Input } from '@/components/UI/shadcn/Input';
+
+const ChangeRoomName = ({ roomName, roomId }) => {
+    const matrixClient = useAuth().getAuthenticationProvider('matrix').getMatrixClient();
+    const [newRoomName, setNewRoomName] = useState('');
+    const [isChangingName, setIsChangingName] = useState(false);
+    const { t } = useTranslation('explore');
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setIsChangingName(true);
+
+        try {
+            await matrixClient.setRoomName(roomId, newRoomName);
+            toast.success(
+                t('room name successfully changed to {{newRoomName}}. Please reload the page to see the changes.', { newRoomName }),
+            );
+        } catch (error) {
+            toast.error(error.data?.error);
+        } finally {
+            setIsChangingName(false);
+        }
+    };
+
+    return (
+        <>
+            <form className="[&>*+*]:mt-4" onSubmit={handleSubmit} onReset={() => setNewRoomName(roomName)}>
+                <Input
+                    type="text"
+                    disabled={isChangingName}
+                    value={newRoomName || roomName}
+                    onChange={(e) => setNewRoomName(e.target.value)}
+                />
+                <ConfirmCancelButtons disabled={roomName === newRoomName} />
+            </form>
+        </>
+    );
+};
+
+export default ChangeRoomName;

pages/explore/manage-room/ExploreMatrixActions.js

@@ -8,6 +8,7 @@ import ChangeAvatar from './ChangeAvatar';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/UI/shadcn/Tabs';
 import ChangeJoinRule from './ChangeJoinRule';
 import { useAuth } from '@/lib/Auth';
+import ChangeRoomName from './ChangeRoomName';
 
 /**
  * This component provides actions for managing contexts and items within a matrix room.
@@ -77,6 +78,13 @@ const ExploreMatrixActions = ({ currentId, parentId, myPowerLevel }) => {
                                 <ChangeAvatar roomId={currentId} />
                             </div>
                         )}
+
+                        {room.currentState.hasSufficientPowerLevelFor('m.room.title', myPowerLevel) && (
+                            <div className="[&>*+*]:mt-4">
+                                <h3>{t('Name')}</h3>
+                                <ChangeRoomName roomId={currentId} roomName={room.name} />
+                            </div>
+                        )}
                     </>
                 </TabsContent>