From cb47cdd5d9c3eab767bb64e22492d6df6a8e370d Mon Sep 17 00:00:00 2001
From: SillyLossy <titan0599@gmail.com>
Date: Sat, 29 Apr 2023 18:43:40 +0300
Subject: [PATCH] Rearrange group form

---
 public/index.html             | 39 ++++++++++++++++++-----------------
 public/scripts/group-chats.js | 25 +++++++++++++++-------
 public/style.css              |  4 ++--
 3 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/public/index.html b/public/index.html
index aec9bc2bb..53bba646e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1545,37 +1545,38 @@
                     <div id="rm_group_top_bar">
                         <div id="rm_button_back_from_group" class="menu_button fa-solid fa-left-long"></div>
                         <input id="rm_group_chat_name" class="text_pole" type="text" name="chat_name" placeholder="Chat Name (Optional)" maxlength="100" />
+                        <div id="group_favorite_button" class="menu_button fa-solid fa-star" title="Add to Favorites"></div>
+                        <input id="rm_group_fav" type="hidden" />
+                        <div id="rm_group_submit" class="menu_button fa-solid fa-check" title="Create"></div>
+                        <div id="rm_group_delete" class="menu_button fa-solid fa-trash-can" title="Delete"></div>
                     </div>
                     <div id="rm_group_buttons">
-                        <div class="rm_group_settings">
+                        <div class="flex1">
+                            <h5>
+                                Group reply strategy
+                                <a href="/notes#groupreplystrategy" class="notes-link" target="_blank">
+                                    <span class="note-link-span">?</span>
+                                </a>
+                            </h5>
                             <label class="checkbox_label">
-                                <input id="rm_group_fav" type="checkbox" />
-                                Favorite
+                                <input type="radio" name="rm_group_activation_strategy" value="0" />
+                                Natural order
                             </label>
+                            <label class="checkbox_label">
+                                <input type="radio" name="rm_group_activation_strategy" value="1" />
+                                List order
+                            </label>
+                        </div>
+                        <div class="flex1">
                             <label class="checkbox_label">
                                 <input id="rm_group_allow_self_responses" type="checkbox" />
-                                Allow bot responses to self
+                                Allow self responses
                             </label>
                             <label id="rm_group_automode_label" class="checkbox_label">
                                 <input id="rm_group_automode" type="checkbox" />
                                 Auto Mode
                             </label>
-                            <h5>
-                                Group reply strategy
-                                <a href="/notes#groupreplystrategy" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
-                            </h5>
-                            <label>
-                                <input type="radio" name="rm_group_activation_strategy" value="0" />
-                                Natural order
-                            </label>
-                            <label>
-                                <input type="radio" name="rm_group_activation_strategy" value="1" />
-                                List order
-                            </label>
                         </div>
-                        <div id="rm_group_buttons_expander">&nbsp;</div>
-                        <input id="rm_group_submit" class="menu_button" type="submit" value="Create">
-                        <input id="rm_group_delete" class="menu_button" type="submit" value="Delete">
                     </div>
                     <div id="rm_group_add_members_header">
                         <h3>Add Members</h3>
diff --git a/public/scripts/group-chats.js b/public/scripts/group-chats.js
index e4781f18d..319675fce 100644
--- a/public/scripts/group-chats.js
+++ b/public/scripts/group-chats.js
@@ -66,6 +66,7 @@ let is_group_automode_enabled = false;
 let groups = [];
 let selected_group = null;
 let group_generation_id = null;
+let fav_grp_checked = false;
 
 const group_activation_strategy = {
     NATURAL: 0,
@@ -719,7 +720,8 @@ function select_group_chats(chat_id, skipAnimation) {
             await editGroup(chat_id);
         }
     });
-    $(`input[name="rm_group_activation_strategy"][value="${Number(group?.activation_strategy ?? group_activation_strategy.NATURAL)}"]`).prop('checked', true);
+    const replyStrategy = Number(group?.activation_strategy ?? group_activation_strategy.NATURAL);
+    $(`input[name="rm_group_activation_strategy"][value="${replyStrategy}"]`).prop('checked', true);
 
     if (!skipAnimation) {
         selectRightMenuWithAnimation('rm_group_chats_block');
@@ -756,7 +758,6 @@ function select_group_chats(chat_id, skipAnimation) {
     const groupHasMembers = !!$("#rm_group_members").children().length;
     $("#rm_group_submit").prop("disabled", !groupHasMembers);
     $("#rm_group_allow_self_responses").prop("checked", group && group.allow_self_responses);
-    $("#rm_group_fav").prop("checked", group && group.fav);
 
     // bottom buttons
     if (chat_id) {
@@ -778,12 +779,14 @@ function select_group_chats(chat_id, skipAnimation) {
         callPopup("<h3>Delete the group?</h3>", "del_group");
     });
 
-    $("#rm_group_fav").off();
-    $("#rm_group_fav").on("input", async function () {
+    updateFavButtonState(group?.fav ?? false);
+
+    $("#group_favorite_button").off('click');
+    $("#group_favorite_button").on('click', async function () {
+        updateFavButtonState(!fav_grp_checked);
         if (group) {
             let _thisGroup = groups.find((x) => x.id == chat_id);
-            const value = $(this).prop("checked");
-            _thisGroup.fav = value;
+            _thisGroup.fav = fav_grp_checked;
             await editGroup(chat_id);
         }
     });
@@ -830,6 +833,13 @@ function select_group_chats(chat_id, skipAnimation) {
     });
 }
 
+function updateFavButtonState(state) {
+    fav_grp_checked = state;
+    $("#rm_group_fav").val(fav_grp_checked);
+    $("#group_favorite_button").toggleClass('fav_on', fav_grp_checked);
+    $("#group_favorite_button").toggleClass('fav_off', !fav_grp_checked);
+}
+
 $(document).ready(() => {
     $(document).on("click", ".group_select", async function () {
         const id = $(this).data("id");
@@ -870,7 +880,6 @@ $(document).ready(() => {
     $("#rm_group_submit").click(async function () {
         let name = $("#rm_group_chat_name").val();
         let allow_self_responses = !!$("#rm_group_allow_self_responses").prop("checked");
-        let fav = $("#rm_group_fav").prop("checked");
         let activation_strategy = $('input[name="rm_group_activation_strategy"]:checked').val() ?? group_activation_strategy.NATURAL;
         const members = $("#rm_group_members .group_member")
             .map((_, x) => $(x).data("id"))
@@ -896,7 +905,7 @@ $(document).ready(() => {
                 allow_self_responses: allow_self_responses,
                 activation_strategy: activation_strategy,
                 chat_metadata: {},
-                fav: fav,
+                fav: fav_grp_checked,
             }),
         });
 
diff --git a/public/style.css b/public/style.css
index 0252f75eb..8e196a5ed 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2498,7 +2498,7 @@ body .ui-widget-content {
     flex-direction: row;
     align-items: center;
     width: 100%;
-    column-gap: 15px;
+    column-gap: 5px;
 }
 
 #rm_button_group_chats h2 {
@@ -2540,7 +2540,7 @@ body .ui-widget-content {
     padding: 0 5px;
 }
 
-.rm_group_settings {
+#rm_group_buttons > div {
     display: flex;
     flex-direction: column;
 }