feat: room form edit with enter (#662)

* room form edit with enter

* mobile form enter do nothing

* restore overwritten older change

---------

Co-authored-by: Igor Loskutov <igor.loskutoff@gmail.com>

www/app/(app)/rooms/page.tsx

@@ -309,7 +309,7 @@ export default function RoomsList() {
 
       setRoomInput(null);
       setIsEditing(false);
-      setEditRoomId("");
+      setEditRoomId(null);
       setNameError("");
       refetch();
       onClose();
@@ -449,6 +449,13 @@ export default function RoomsList() {
               </Dialog.CloseTrigger>
             </Dialog.Header>
             <Dialog.Body>
+              <form
+                id="room-form"
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  handleSaveRoom();
+                }}
+              >
                 <Tabs.Root defaultValue="general">
                   <Tabs.List>
                     <Tabs.Trigger value="general">General</Tabs.Trigger>
@@ -465,6 +472,7 @@ export default function RoomsList() {
                         placeholder="room-name"
                         value={room.name}
                         onChange={handleRoomChange}
+                        enterKeyHint="next"
                       />
                       <Field.HelperText>
                         No spaces or special characters allowed
@@ -496,7 +504,6 @@ export default function RoomsList() {
                         <Checkbox.Label>Locked room</Checkbox.Label>
                       </Checkbox.Root>
                     </Field.Root>
-
                     <Field.Root mt={4}>
                       <Field.Label>Room size</Field.Label>
                       <Select.Root
@@ -527,7 +534,6 @@ export default function RoomsList() {
                         </Select.Positioner>
                       </Select.Root>
                     </Field.Root>
-
                     <Field.Root mt={4}>
                       <Field.Label>Recording type</Field.Label>
                       <Select.Root
@@ -565,13 +571,15 @@ export default function RoomsList() {
                         </Select.Positioner>
                       </Select.Root>
                     </Field.Root>
-
                     <Field.Root mt={4}>
                       <Field.Label>Cloud recording start trigger</Field.Label>
                       <Select.Root
                         value={[room.recordingTrigger]}
                         onValueChange={(e) =>
-                        setRoomInput({ ...room, recordingTrigger: e.value[0] })
+                          setRoomInput({
+                            ...room,
+                            recordingTrigger: e.value[0],
+                          })
                         }
                         collection={recordingTriggerCollection}
                         disabled={room.recordingType !== "cloud"}
@@ -622,34 +630,6 @@ export default function RoomsList() {
                     </Field.Root>
                   </Tabs.Content>
 
-                <Tabs.Content value="calendar" pt={6}>
-                  <ICSSettings
-                    roomName={room.name ? parseNonEmptyString(room.name) : null}
-                    icsUrl={room.icsUrl}
-                    icsEnabled={room.icsEnabled}
-                    icsFetchInterval={room.icsFetchInterval}
-                    onChange={(settings) => {
-                      setRoomInput({
-                        ...room,
-                        icsUrl:
-                          settings.ics_url !== undefined
-                            ? settings.ics_url
-                            : room.icsUrl,
-                        icsEnabled:
-                          settings.ics_enabled !== undefined
-                            ? settings.ics_enabled
-                            : room.icsEnabled,
-                        icsFetchInterval:
-                          settings.ics_fetch_interval !== undefined
-                            ? settings.ics_fetch_interval
-                            : room.icsFetchInterval,
-                      });
-                    }}
-                    isOwner={true}
-                    isEditing={isEditing}
-                  />
-                </Tabs.Content>
-
                   <Tabs.Content value="share" pt={6}>
                     <Field.Root>
                       <Checkbox.Root
@@ -675,7 +655,6 @@ export default function RoomsList() {
                         </Checkbox.Label>
                       </Checkbox.Root>
                     </Field.Root>
-
                     <Field.Root mt={4}>
                       <Field.Label>Zulip stream</Field.Label>
                       <Select.Root
@@ -711,7 +690,6 @@ export default function RoomsList() {
                         </Select.Positioner>
                       </Select.Root>
                     </Field.Root>
-
                     <Field.Root mt={4}>
                       <Field.Label>Zulip topic</Field.Label>
                       <Select.Root
@@ -750,10 +728,10 @@ export default function RoomsList() {
                       <Field.Label>Webhook URL</Field.Label>
                       <Input
                         name="webhookUrl"
-                      type="url"
                         placeholder="https://example.com/webhook"
                         value={room.webhookUrl}
                         onChange={handleRoomChange}
+                        enterKeyHint="next"
                       />
                       <Field.HelperText>
                         Optional: URL to receive notifications when transcripts
@@ -832,7 +810,8 @@ export default function RoomsList() {
                                     maxWidth: "100%",
                                     padding: "8px",
                                     borderRadius: "4px",
-                                  backgroundColor: webhookTestResult.startsWith(
+                                    backgroundColor:
+                                      webhookTestResult.startsWith(
                                         SUCCESS_EMOJI,
                                       )
                                         ? "#f0fdf4"
@@ -849,15 +828,49 @@ export default function RoomsList() {
                       </>
                     )}
                   </Tabs.Content>
+
+                  <Tabs.Content value="calendar" pt={6}>
+                    <Field.Root>
+                      <ICSSettings
+                        roomName={
+                          room.name ? parseNonEmptyString(room.name) : null
+                        }
+                        icsUrl={room.icsUrl}
+                        icsEnabled={room.icsEnabled}
+                        icsFetchInterval={room.icsFetchInterval}
+                        onChange={(settings) => {
+                          setRoomInput({
+                            ...room,
+                            icsUrl:
+                              settings.ics_url !== undefined
+                                ? settings.ics_url
+                                : room.icsUrl,
+                            icsEnabled:
+                              settings.ics_enabled !== undefined
+                                ? settings.ics_enabled
+                                : room.icsEnabled,
+                            icsFetchInterval:
+                              settings.ics_fetch_interval !== undefined
+                                ? settings.ics_fetch_interval
+                                : room.icsFetchInterval,
+                          });
+                        }}
+                        isOwner={true}
+                        isEditing={isEditing}
+                      />
+                    </Field.Root>
+                  </Tabs.Content>
                 </Tabs.Root>
+              </form>
             </Dialog.Body>
             <Dialog.Footer>
               <Button variant="ghost" onClick={handleCloseDialog}>
                 Cancel
               </Button>
               <Button
+                type="submit"
                 colorPalette="primary"
-                onClick={handleSaveRoom}
+                form="room-form"
                 disabled={
                   !room.name || (room.zulipAutoPost && !room.zulipTopic)
                 }