Favorite as a button

public/index.html

@@ -1405,6 +1405,8 @@
                                             <input type="file" id="add_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
                                         </label>
                                         <div id="rm_button_back" class="menu_button fa-solid fa-left-long "></div>
+                                        <div id="favorite_button" class="menu_button fa-solid fa-star" title="Add to Favorites"></div>
+                                        <input type="hidden" id="fav_checkbox" name="fav"/>
                                         <div id="advanced_div" class="menu_button fa-solid fa-book " title="Advanced Definitions"></div>
                                         <div id="export_button" class="menu_button fa-solid fa-file-export " title="Export and Download"></div>
                                         <label for="create_button" id="create_button_label" class="menu_button fa-solid fa-user-check" title="Create Character">
@@ -1416,27 +1418,14 @@
                                 <div title="Token counts may be inaccurate and provided just for reference." id="result_info"></div>
                             </div>
                             <hr>
-                                <div id="fav_chara_wrap">
-                                    <div id="fav_chara_label" class="margin-bot-10px">
-                                        <label for="fav_checkbox" class="checkbox_label">
-                                            <input type="checkbox" id="fav_checkbox" name="fav"/>
-                                            Favorite
-                                            <a href="/notes/15" class="notes-link" target="_blank">
-                                                <span class="note-link-span">?</span>
-                                            </a>
-                                        </label>
-                                    </div>
-                                    <div>
-                                    </div>
-                                </div>
 
-                                <div id="description_div" class="margin-bot-10px">
+                            <div id="description_div" class="margin-bot-10px">
-                                    Description
+                                Description
-                                    <a href="/notes/1" class="notes-link" target="_blank">
+                                <a href="/notes/1" class="notes-link" target="_blank">
-                                        <span class="note-link-span">?</span>
+                                    <span class="note-link-span">?</span>
-                                    </a>
+                                </a>
+                            </div>
 
-                                </div>
                             <textarea id="description_textarea" placeholder="Describe your character's physical and mental traits here." class="margin-bot-10px" name="description" placeholder=""></textarea>
 
                             <div id="first_message_div" class="margin-bot-10px">

public/script.js

@@ -2899,14 +2899,6 @@ async function saveSettings(type) {
     });
 }
 
-function isInt(value) {
-    return (
-        !isNaN(value) &&
-        parseInt(Number(value)) == value &&
-        !isNaN(parseInt(value, 10))
-    );
-}
-
 function messageEditAuto(div) {
     let mesBlock = div.closest(".mes_block");
     var text = mesBlock.find(".edit_textarea").val().trim();
@@ -3050,31 +3042,6 @@ async function getStatusNovel() {
     }
 }
 
-function compareVersions(v1, v2) {
-    const v1parts = v1.split(".");
-    const v2parts = v2.split(".");
-
-    for (let i = 0; i < v1parts.length; ++i) {
-        if (v2parts.length === i) {
-            return 1;
-        }
-
-        if (v1parts[i] === v2parts[i]) {
-            continue;
-        }
-        if (v1parts[i] > v2parts[i]) {
-            return 1;
-        } else {
-            return -1;
-        }
-    }
-
-    if (v1parts.length != v2parts.length) {
-        return -1;
-    }
-
-    return 0;
-}
 
 function selectRightMenuWithAnimation(selectedMenuId) {
     const displayModes = {
@@ -3166,7 +3133,7 @@ function select_selected_character(chid) {
         this_avatar = getThumbnailUrl('avatar', characters[chid].avatar);
     }
 
-    $("#fav_checkbox").prop("checked", characters[chid].fav == "true");
+    updateFavButtonState(characters[chid].fav == "true");
     
     $("#avatar_load_preview").attr("src", this_avatar);
     $("#name_div").css("display", "none");
@@ -3246,6 +3213,13 @@ function updateChatMetadata(newValues, reset) {
     chat_metadata = reset ? { ...newValues } : { ...chat_metadata, ...newValues };
 }
 
+function updateFavButtonState(state) {
+    fav_ch_checked = state;
+    $("#fav_checkbox").val(fav_ch_checked);
+    $("#favorite_button").toggleClass('fav_on', fav_ch_checked);
+    $("#favorite_button").toggleClass('fav_off', !fav_ch_checked);
+}
+
 function callPopup(text, type) {
     if (type) {
         popup_type = type;
@@ -4307,11 +4281,11 @@ $(document).ready(function () {
             }
         });
 
-    $("#fav_checkbox").change(function(){
+    $("#favorite_button").on('click', function(){
-            fav_ch_checked = $(this).prop("checked");
+        updateFavButtonState(!fav_ch_checked);
-            if (menu_type != "create") {
+        if (menu_type != "create") {
-                saveCharacterDebounced();
+            saveCharacterDebounced();
-            }
+        }
     });
 
     $("#talkativeness_slider").on("input", function () {