Fix expression sprite sorting, fade additional - Sort alphabetically, but keep the main expression file first - Fade additional sprite images if "allow multiple" is not chosen

84a8a2bc2b7dfe6dea5b198f45b834ad44c9556c

Wolfsblvt <wolfsblvt@gmail.com>

public/scripts/extensions/expressions/index.js+18 -4 Viewed

         fileName: fileName,
         title: fileNameWithoutExtension,
         imageSrc: sprite.path,
 -        type: fileNameWithoutExtension == sprite.label ? 'success' : 'additional',
 +        type: 'success',
         isCustom: extension_settings.expressions.custom?.includes(sprite.label),
     };
+}

         const images = sprites
             .filter(s => s.label === expression)
             .map(s => s.files)
             .flat();
 -            .sort((a, b) => a.title.localeCompare(b.title));
         if (images.length === 0) {
             const listItem = await getListItem(expression, {

             return acc;
         }, []);
++
 +        // Sort the sprites for each expression alphabetically, but keep the main expression file at the front
 +        for (const expression of grouped) {
 +            expression.files.sort((a, b) => {
 +                if (a.title === expression.label) return -1;
 +                if (b.title === expression.label) return 1;
 +                return a.title.localeCompare(b.title);
 +            });
++
 +            // Mark all besides the first sprite as 'additional'
 +            for (let i = 1; i < expression.files.length; i++) {
 +                expression.files[i].type = 'additional';
 +            }
 +        }
++
         return grouped;
+    }
     catch (err) {

         /** @type {Expression} */
         const sprite = (spriteCache[character] && spriteCache[character].find(x => x.label === expression));
         console.debug('checking for expression images to show..');
         if (sprite && sprite.files.length > 0) {
             console.debug('setting expression from character images folder');
             let spriteFile = sprite.files[0];

public/scripts/extensions/expressions/style.css+9 -0 Viewed

     align-items: baseline;
     flex-direction: row;
+}
++
 +#expressions_container:has(#expressions_allow_multiple:not(:checked)) #image_list .expression_list_item[data-expression-type="additional"] {
 +    opacity: 0.3;
 +    transition: opacity var(--animation-duration) ease;
 +}
 +#expressions_container:has(#expressions_allow_multiple:not(:checked)) #image_list .expression_list_item[data-expression-type="additional"]:hover,
 +#expressions_container:has(#expressions_allow_multiple:not(:checked)) #image_list .expression_list_item[data-expression-type="additional"]:focus {
 +    opacity: unset;
 +}