Resolve "Room setup: Not able to edit the room name once the room is created"

src/components/RoomInfoBottomSheet.vue

@@ -8,7 +8,30 @@
       <div class="text-center current-room">
         <room-avatar-picker />
         <div class="h4">{{$t('room_info_sheet.this_room')}}</div>
-        <div class="h2">{{ roomName }}</div>
+        <div
+          class="h2"
+          v-if="!isEditMode"
+          @click="onRoomNameClicked()"
+        >
+          {{ roomName }}
+        </div>
+        <v-text-field
+          v-model="editedRoomName"
+          ref="editedRoomName"
+          :rules="[(v) => !!v || $t('room.room_name_required')]"
+          :error="roomNameErrorMessage != null"
+          :error-messages="roomNameErrorMessage"
+          required
+          color="black"
+          counter="50"
+          background-color="white"
+          autofocus
+          v-if="isEditMode"
+          maxlength="50"
+          @blur="updateRoomName()"
+          @keyup.enter="updateRoomName()"
+          solo
+        ></v-text-field>
         <v-btn
           id="btn-room-details"
           height="20px"