Sort area names based on numbers when starting with a number.

But main lights are always first. #892

gui/helpers/string-helpers.js

@@ -87,3 +87,15 @@ export const enclosureNameSort = (a, b) => {
   // Normal text compare
   return a.localeCompare(b);
 };
+
+export const areaObjectSort = (a, b) => {
+    // Main lights area always first
+    if (a.type === 'lights' && a.setup.main_lights) {
+        return -1;
+    } else if (b.type === 'lights' && a.setup.main_lights) {
+        return 1;
+    }
+
+    // Normal text compare
+    return enclosureNameSort(a.name, b.name);
+}

gui/user-controls/EnclosureCard.svelte

@@ -15,7 +15,7 @@
   import { fancyAppsLanguage } from '../constants/ui';
   import { updateButton, isDarkInterface } from '../stores/terrariumpi';
   import { isAuthenticated } from '../stores/authentication';
-  import { externalLinks } from '../helpers/string-helpers';
+  import { externalLinks, areaObjectSort } from '../helpers/string-helpers';
 
   import Card from '../user-controls/Card.svelte';
   import CardSettingsTools from '../components/common/CardSettingsTools.svelte';
@@ -92,7 +92,7 @@
             </tr>
           </thead>
           <tbody>
-            {#each enclosure.areas.sort((a, b) => a.name.localeCompare(b.name)) as area}
+            {#each enclosure.areas.sort((a, b) => areaObjectSort(a,b)) as area}
               <tr>
                 <td>
                   {area.name}