Rewrite hotswap logic

public/index.html

@@ -1633,24 +1633,6 @@
                         </label>
                     </div>
                     <div class="hotswap flex-container justifyCenter">
-                        <div id="hotswap1" class="hotswapAvatar">
-                            <img src="/img/ai4.png">
-                        </div>
-                        <div id="hotswap2" class="hotswapAvatar">
-                            <img src="/img/ai4.png">
-                        </div>
-                        <div id="hotswap3" class="hotswapAvatar">
-                            <img src="/img/ai4.png">
-                        </div>
-                        <div id="hotswap4" class="hotswapAvatar">
-                            <img src="/img/ai4.png">
-                        </div>
-                        <div id="hotswap5" class="hotswapAvatar">
-                            <img src="/img/ai4.png">
-                        </div>
-                        <div id="hotswap6" class="hotswapAvatar">
-                            <img src="/img/ai4.png">
-                        </div>
                     </div>
                     <div id="right-nav-panel-tabs">
                         <div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters"></div>
@@ -2252,6 +2234,12 @@
         </div>
     </div>
 
+    <div id="hotswap_template" class="template_element">
+        <div class="hotswapAvatar">
+            <img src="/img/ai4.png">
+        </div>
+    </div>
+
     <!-- chat and input bar -->
     <div id="typing_indicator_template" class="template_element">
         <div class="typing_indicator"><span class="typing_indicator_name">CHAR</span> is typing</div>

public/scripts/RossAscends-mods.js

@@ -21,7 +21,7 @@ import {
 } from "./power-user.js";
 
 import { LoadLocal, SaveLocal, ClearLocal, CheckLocal, LoadLocalBool } from "./f-localStorage.js";
-import { selected_group, is_group_generating } from "./group-chats.js";
+import { selected_group, is_group_generating, getGroupAvatar, groups } from "./group-chats.js";
 import { oai_settings } from "./openai.js";
 import { poe_settings } from "./poe.js";
 
@@ -285,35 +285,49 @@ async function RA_autoloadchat() {
 }
 
 export async function favsToHotswap() {
-
     const selector = ['#rm_print_characters_block .character_select', '#rm_print_characters_block .group_select'].join(',');
+    const container = $('#rm_PinAndTabs .hotswap');
+    const template = $('#hotswap_template .hotswapAvatar');
+    container.empty();
+    const maxCount = 6;
     let count = 0;
+
     $(selector).each(function () {
-        if ($(this).hasClass('is_fav') && count < 6) {
+        if ($(this).hasClass('is_fav') && count < maxCount) {
-            //console.log(count + 1);
+            const isCharacter = $(this).hasClass('character_select');
-            let hotswapChId = $(this).attr('id');
+            const isGroup = $(this).hasClass('group_select');
-            let thisHotswapImgURL = $(this).find('.avatar img').attr('src');
+            const grid =  Number($(this).attr('grid'));
-            let thisHotSwapSlot = `#hotswap${count + 1}`
+            const chid = Number($(this).attr('chid'));
-            $(thisHotSwapSlot).find('img').attr('src', thisHotswapImgURL);
+            let thisHotSwapSlot = template.clone();
+            thisHotSwapSlot.toggleClass('character_select', isCharacter);
+            thisHotSwapSlot.toggleClass('group_select', isGroup);
+            thisHotSwapSlot.attr('grid', isGroup ? grid : '');
+            thisHotSwapSlot.attr('chid', isCharacter ? chid : '');
+            thisHotSwapSlot.data('id', isGroup ? grid : chid);
+
+            if (isGroup) {
+                const group = groups.find(x => x.id === grid);
+                const avatar = getGroupAvatar(group);
+                $(thisHotSwapSlot).find('img').replaceWith(avatar);
+            }
+
+            if (isCharacter) {
+                const avatarUrl = $(this).find('img').attr('src');
+                $(thisHotSwapSlot).find('img').attr('src', avatarUrl);
+            }
+
             $(thisHotSwapSlot).css('cursor', 'pointer');
-            $(thisHotSwapSlot).on('click', function () {
+            container.append(thisHotSwapSlot);
-                $("#rm_button_characters").click();
+            count++;
-                $(`#${hotswapChId}`).click();
-            });
-            count = count + 1;
         }
     });
+
     console.log('about to check for leftover selectors...')
     // there are 6 slots in total,
-    if (count < 6) { //if any are left over
+    if (count < maxCount) { //if any are left over
-        let leftOverSlots = 6 - count;
+        let leftOverSlots = maxCount - count;
         for (let i = 1; i <= leftOverSlots; i++) {
-            let thisLeftOverSlotNumber = 6 - leftOverSlots + i;
+            container.append(template.clone());
-            //console.log(`Not fav for slot ${thisLeftOverSlotNumber}`);
-            let thisLeftOverSlot = `#hotswap${thisLeftOverSlotNumber}`;
-            $(thisLeftOverSlot).off();
-            $(thisLeftOverSlot).css('cursor', 'unset');
-            $(thisLeftOverSlot).find('img').attr('src', 'img/ai4.png'); //replace with blank ai avatar
         }
     } else {
         //console.log(`count was ${count} so no need to knock off any selectors!`);

public/style.css

@@ -577,6 +577,8 @@ code {
 .hotswapAvatar {
     opacity: 0.5;
     transition: 250ms;
+    overflow: hidden;
+    padding: 0 !important;
 }
 
 .hotswapAvatar:hover {