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()
+            .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) {
+        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;
+}