Sort themes based on package name (#19696)

ref DES-72

- current sorting makes it difficult to find themes when theme directory
and package name are different, because the sorting is based on the
directory name
- this new sorting is based on package name first
- as package name is optional, it then sorts based on directory name if
it doesn't exist

apps/admin-x-settings/src/components/settings/site/theme/AdvancedThemeSettings.tsx

@@ -151,7 +151,11 @@ const ThemeList:React.FC<ThemeSettingProps> = ({
             return 1; // b comes before a
         } else {
             // Both have the same active status, sort alphabetically
-            return a.name.localeCompare(b.name);
+            if (a.package?.name && b.package?.name) {
+                return a.package.name.localeCompare(b.package.name);
+            } else {
+                return a.name.localeCompare(b.name);
+            }
         }
     });