Sort 3D effects to show light and fog effects first (4ian#6437)

Author: D8H

Extensions/3D/JsExtension.js

@@ -2014,7 +2014,7 @@ module.exports = {
     {
       const effect = extension
         .addEffect('BrightnessAndContrast')
-        .setFullName(_('Brightness and contrast.'))
+        .setFullName(_('Brightness and contrast'))
         .setDescription(
           _(
             'Adjust brightness and contrast.'

newIDE/app/src/EffectsList/index.js

@@ -426,7 +426,28 @@ export default function EffectsList(props: Props) {
   );
 
   const all3DEffectMetadata = React.useMemo(
-    () => allEffectMetadata.filter(effect => effect.isMarkedAsOnlyWorkingFor3D),
+    () => {
+      const lightEffectMetadata = [];
+      const fogEffectMetadata = [];
+      const otherEffectMetadata = [];
+      for (const effect of allEffectMetadata) {
+        if (!effect.isMarkedAsOnlyWorkingFor3D) {
+          continue;
+        }
+        if (effect.type.endsWith('Light')) {
+          lightEffectMetadata.push(effect);
+        } else if (effect.type.endsWith('Fog')) {
+          fogEffectMetadata.push(effect);
+        } else {
+          otherEffectMetadata.push(effect);
+        }
+      }
+      return [
+        ...lightEffectMetadata,
+        ...fogEffectMetadata,
+        ...otherEffectMetadata,
+      ];
+    },
     [allEffectMetadata]
   );