fix(web): Sort timezones in assets settings by offset

[WazWazTheDeveloper]

fixes #10695

[bo0tzz]

One unnecessary nitpick, but looks good. Thanks!

[bo0tzz]

You could do something like this so you're only calling DateTime.local() once:

  const timezones: ZoneOption[] = Intl.supportedValuesOf('timeZone')
  	.map((zone) => DateTime.local(zone))
    .sort((zoneA, zoneB) => {
      let numericallyCorrect = zoneA.offset - zoneB.offset;
      ...etc

[WazWazTheDeveloper]

But you will have to pass the zone string for the creation of the list items in the last .map
so it will be something more like this

  const timezones: ZoneOption[] = Intl.supportedValuesOf('timeZone')
    .map((zone) => ({
      datatime: DateTime.local({ zone }),
      string: zone,
    }))
    .sort((zoneA, zoneB) => {
      let numericallyCorrect = zoneA.datatime.offset - zoneB.datatime.offset;
      if (numericallyCorrect != 0) {
        return numericallyCorrect;
      }
      const alphabeticallyCorrect = zoneA.string.localeCompare(zoneB.string, undefined, { sensitivity: 'base' });
      return alphabeticallyCorrect;
    })
    .map((zone) => ({
      label: zone.string + ` (${DateTime.local({ zone: zone.string }).toFormat('ZZ')})`,
      value: 'UTC' + DateTime.local({ zone: zone.string }).toFormat('ZZ'),
    }));

[michelheusschen]

DateTime.zoneName can be used:

const timezones: ZoneOption[] = Intl.supportedValuesOf('timeZone')
  .map((zone) => DateTime.local({ zone }))
  .sort((a, b) => a.offset - b.offset || a.zoneName.localeCompare(b.zoneName, undefined, { sensitivity: 'base' }))
  .map((date) => {
    const offset = date.toFormat('ZZ');
    return {
      label: `${date.zoneName} (${offset})`,
      value: 'UTC' + offset,
    };
  });

[alextran1502]

Hello, can you add a unit test for this mechanism? Thank you for the contribution!