Fix some bugs (see below):

1. Remove yellow highlights in hotswaps list.
2. Decrease font size of group members list, make it respect the block limits (1 row for small avatars, 3 rows for big avatars).
3. Fix autoload loading the first character if the latest selected entity was a group.
4. Fix tag key potentially skipping the first character.
5. Fix being unable to open groups from the hotswaps panel.
6. Fix left alignment of hotswaps panel, now centered.
7. Fix rounding of missing group avatars (most noticeable when favorited).

public/index.html

@@ -5030,7 +5030,7 @@
                 <small class="character_name_block_sub_line">in this group</small>
                 <i class='group_fav_icon fa-solid fa-star'></i>
                 <input class="ch_fav" value="" hidden />
-                <div class="group_select_block_list"></div>
+                <div class="group_select_block_list ch_description"></div>
                 <div class="tags tags_inline"></div>
             </div>
         </div>

public/script.js

@@ -5298,7 +5298,7 @@ function getThumbnailUrl(type, file) {
     return `/thumbnail?type=${type}&file=${encodeURIComponent(file)}`;
 }
 
-function buildAvatarList(block, entities, { templateId = 'inline_avatar_template', empty = true, selectable = false } = {}) {
+function buildAvatarList(block, entities, { templateId = 'inline_avatar_template', empty = true, selectable = false, highlightFavs = true } = {}) {
     if (empty) {
         block.empty();
     }
@@ -5318,8 +5318,10 @@ function buildAvatarList(block, entities, { templateId = 'inline_avatar_template
         avatarTemplate.attr({ 'chid': id, 'id': `CharID${id}` });
         avatarTemplate.find('img').attr('src', this_avatar).attr('alt', entity.item.name);
         avatarTemplate.attr('title', `[Character] ${entity.item.name}`);
-        avatarTemplate.toggleClass('is_fav', entity.item.fav || entity.item.fav == 'true');
-        avatarTemplate.find('.ch_fav').val(entity.item.fav);
+        if (highlightFavs) {
+            avatarTemplate.toggleClass('is_fav', entity.item.fav || entity.item.fav == 'true');
+            avatarTemplate.find('.ch_fav').val(entity.item.fav);
+        }
 
         // If this is a group, we need to hack slightly. We still want to keep most of the css classes and layout, but use a group avatar instead.
         if (entity.type === 'group') {

public/scripts/RossAscends-mods.js

@@ -248,12 +248,14 @@ export function RA_CountCharTokens() {
 async function RA_autoloadchat() {
     if (document.querySelector('#rm_print_characters_block .character_select') !== null) {
         // active character is the name, we should look it up in the character list and get the id
-        const active_character_id = characters.findIndex(x => getTagKeyForEntity(x) == active_character);
-        if (active_character_id !== null) {
-            await selectCharacterById(String(active_character_id));
+        if (active_character !== null && active_character !== undefined) {
+            const active_character_id = characters.findIndex(x => getTagKeyForEntity(x) === active_character);
+            if (active_character_id !== null) {
+                await selectCharacterById(String(active_character_id));
+            }
         }
 
-        if (active_group != null) {
+        if (active_group !== null && active_group !== undefined) {
             await openGroupById(String(active_group));
         }
 
@@ -273,7 +275,7 @@ export async function favsToHotswap() {
         return;
     }
 
-    buildAvatarList(container, favs, { selectable: true });
+    buildAvatarList(container, favs, { selectable: true, highlightFavs: false });
 }
 
 //changes input bar and send button display depending on connection status
@@ -812,7 +814,7 @@ export function initRossMods() {
     });
 
     $(document).on('click', '.group_select', function () {
-        const groupId = $(this).attr('grid') || $(this).data('id');
+        const groupId = $(this).attr('chid') || $(this).attr('grid') || $(this).data('id');
         setActiveCharacter(null);
         setActiveGroup(groupId);
         saveSettingsDebounced();

public/scripts/group-chats.js

@@ -529,9 +529,11 @@ export function getGroupBlock(group) {
     // Build inline name list
     if (Array.isArray(group.members) && group.members.length) {
         for (const member of group.members) {
-            count++;
             const character = characters.find(x => x.avatar === member || x.name === member);
-            namesList.push(`<span class="group_ch_name">${character.name}</span>`);
+            if (character) {
+                namesList.push(character.name);
+                count++;
+            }
         }
     }
 
@@ -543,7 +545,7 @@ export function getGroupBlock(group) {
     template.addClass(group.fav ? 'is_fav' : '');
     template.find('.ch_fav').val(group.fav);
     template.find('.group_select_counter').text(`${count} ${count != 1 ? 'characters' : 'character'}`);
-    template.find('.group_select_block_list').append(namesList.join(''));
+    template.find('.group_select_block_list').text(namesList.join(', '));
 
     // Display inline tags
     const tagsElement = template.find('.tags');
@@ -1761,7 +1763,7 @@ function doCurMemberListPopout() {
 
 jQuery(() => {
     $(document).on('click', '.group_select', function () {
-        const groupId = $(this).data('id');
+        const groupId = $(this).attr('chid') || $(this).attr('grid') || $(this).data('id');
         openGroupById(groupId);
     });
     $('#rm_group_filter').on('input', filterGroupMembers);

public/scripts/tags.js

@@ -324,7 +324,7 @@ export function getTagKeyForEntity(entityOrKey) {
     }
 
     // Next lets check if its a valid character or character id, so we can swith it to its tag
-    const character = characters.indexOf(x) > 0 ? x : characters[x];
+    const character = characters.indexOf(x) >= 0 ? x : characters[x];
     if (character) {
         x = character.avatar;
     }

public/style.css

@@ -884,6 +884,11 @@ hr {
 
 .hotswap {
     margin: 5px;
+    justify-content: space-evenly;
+}
+
+#HotSwapWrapper {
+    justify-content: space-evenly;
 }
 
 .avatar.selectable {
@@ -955,30 +960,11 @@ hr {
     margin-left: calc(var(--avatar-base-border-radius));
     margin-bottom: calc(var(--avatar-base-border-radius));
 }
+
 .avatars_inline .avatar:last-of-type {
     margin-right: calc(var(--avatar-base-border-radius));
 }
 
-.group_select_block_list {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    gap: 0.2rem;
-    align-items: flex-end;
-    flex-basis: 100%;
-}
-
-.group_select_block_list .group_ch_name:not(:last-child):not(:nth-last-child(2)):after {
-    content: ", ";
-    font-size: calc(var(--mainFontSize) * 0.9);
-}
-
-.group_select_block_list .group_ch_name:nth-last-child(2):after {
-    content: " & ";
-    font-size: calc(var(--mainFontSize) * 0.9);
-}
-
 .mes_block {
     padding-top: 0;
     padding-left: 10px;
@@ -1329,6 +1315,7 @@ input[type="file"] {
     justify-content: center;
     align-items: center;
 }
+
 #rm_print_characters_block .hidden_block p {
     display: inline;
 }
@@ -1617,7 +1604,8 @@ input[type=search]:focus::-webkit-search-cancel-button {
     margin-bottom: 1px;
 }
 
-.character_select.inline_avatar {
+.character_select.inline_avatar,
+.missing-avatar.inline_avatar {
     padding: unset;
     border-radius: var(--avatar-base-border-radius-round);
 }
@@ -1686,8 +1674,9 @@ input[type=search]:focus::-webkit-search-cancel-button {
     display: block;
 }
 
-#rm_print_characters_block .character_name_block > :last-child {
-    flex: 0 100000 auto; /* Force shrinking first */
+#rm_print_characters_block .character_name_block> :last-child {
+    flex: 0 100000 auto;
+    /* Force shrinking first */
     overflow: hidden;
     text-wrap: nowrap;
     text-overflow: ellipsis;