TW-1579 Add some more countries flags

README.md

@@ -102,3 +102,34 @@ redux-devtools --open --port=8000
 > Other UI options like `--open=browser` are available.
 
 Go to settings to specify port one more time.
+
+### Notes about countries flags
+
+- Do not compress the atlas with them, which is located at `public/misc/country-flags/atlas_original.png`, using tinypng; the compressed image has too low quality.
+- You can generate such an atlas with a script like below:
+```js
+const sharp = require('sharp');
+const fsPromises = require('fs/promises');
+const path = require('path');
+(async () => {
+  const imagesNames = await fsPromises.readdir(path.resolve('input'));
+  const atlasRowSize = 7;
+  const atlasRows = Math.ceil(imagesNames.length / atlasRowSize);
+  // Each image has a size of 40x30
+  const atlas = sharp({
+    create: {
+      width: 40 * atlasRowSize,
+      height: 30 * atlasRows,
+      channels: 4,
+      background: { r: 0, g: 0, b: 0, alpha: 0 }
+    }
+  }).composite(
+    imagesNames.map((imageName, index) => ({
+      input: path.resolve(`input/${imageName}`),
+      left: 40 * (index % atlasRowSize),
+      top: 30 * Math.floor(index / atlasRowSize)
+    }))
+  );
+  await atlas.png().toFile(path.resolve('output/atlas.png'));
+})();
+```

src/app/atoms/Flag.tsx

@@ -1,25 +1,122 @@
-import React, { HTMLAttributes, memo, useCallback, useState } from 'react';
+import React, { HTMLAttributes, memo, useCallback, useMemo, useState } from 'react';
 
 import classNames from 'clsx';
+import browser from 'webextension-polyfill';
 
-type FlagProps = {
+const atlasCountriesCodes = [
+  'ae',
+  'ar',
+  'au',
+  'az',
+  'bg',
+  'bh',
+  'br',
+  'ca',
+  'ch',
+  'cl',
+  'cn',
+  'co',
+  'cr',
+  'cz',
+  'de',
+  'dk',
+  'do',
+  'eg',
+  'eu',
+  'fr',
+  'gb',
+  'ge',
+  'gt',
+  'hk',
+  'hn',
+  'hr',
+  'hu',
+  'id',
+  'il',
+  'in',
+  'jo',
+  'jp',
+  'kn',
+  'kr',
+  'kw',
+  'kz',
+  'lk',
+  'md',
+  'mx',
+  'my',
+  'ng',
+  'no',
+  'nz',
+  'om',
+  'pe',
+  'ph',
+  'pl',
+  'pt',
+  'py',
+  'qa',
+  'ro',
+  'rw',
+  'sa',
+  'se',
+  'th',
+  'tr',
+  'tw',
+  'ua',
+  'us',
+  'uy',
+  'vn',
+  'za'
+];
+const atlasRowSize = 7;
+const imageWidth = 40;
+const imageHeight = 30;
+
+export const canUseAtlasFlag = (countryCode: string) => atlasCountriesCodes.includes(countryCode);
+
+interface FlagProps {
   alt: string;
+  countryCode?: string;
   className?: string;
   src?: string;
-};
+}
 
-const Flag = memo<FlagProps>(({ alt, className, src }) => {
+export const Flag = memo<FlagProps>(({ alt, className, countryCode, src }) => {
   const [error, setError] = useState(false);
 
+  const bgFromAtlasStyle = useMemo(() => {
+    if (src || !countryCode) {
+      return undefined;
+    }
+
+    const index = atlasCountriesCodes.indexOf(countryCode);
+
+    if (index === -1) {
+      return undefined;
+    }
+
+    const row = Math.floor(index / atlasRowSize);
+    const col = index % atlasRowSize;
+
+    return {
+      backgroundImage: `url(${browser.runtime.getURL('/misc/country-flags/atlas.png')})`,
+      backgroundPosition: `${-(col * imageWidth) / 2}px ${-(row * imageHeight) / 2}px`,
+      backgroundSize: `${atlasRowSize * 1.25}rem`
+    };
+  }, [countryCode, src]);
+
   const handleError = useCallback(() => {
     setError(true);
   }, [setError]);
 
   return (
     <div className={classNames('w-6 h-6 flex justify-center items-center', className)}>
-      {src ? (
+      {src || bgFromAtlasStyle ? (
         <>
-          <img alt={alt} className={classNames({ hidden: error }, 'w-5 h-auto')} src={src} onError={handleError} />
+          {src ? (
+            <img alt={alt} className={classNames({ hidden: error }, 'w-5 h-auto')} src={src} onError={handleError} />
+          ) : (
+            <div className="w-5 aspect-[4/3]" style={bgFromAtlasStyle} />
+          )}
           {error && <FlagStub className="w-6 h-auto" />}
         </>
       ) : (
@@ -29,8 +126,6 @@ const Flag = memo<FlagProps>(({ alt, className, src }) => {
   );
 });
 
-export default Flag;
-
 const FlagStub = memo((props: HTMLAttributes<unknown>) => (
   <svg
     role="img"

src/app/templates/SettingsGeneral/components/locale-select/locale-icon.tsx

@@ -1,12 +1,10 @@
 import React, { memo } from 'react';
 
-import browser from 'webextension-polyfill';
-
-import Flag from 'app/atoms/Flag';
+import { Flag } from 'app/atoms/Flag';
 import { CellPartProps } from 'app/templates/select-with-modal';
 
 import { LocaleOption } from './options';
 
 export const LocaleIcon = memo<CellPartProps<LocaleOption>>(({ option: { flagName, code } }) => (
-  <Flag alt={code} src={browser.runtime.getURL(`/misc/country-flags/${flagName}.png`)} />
+  <Flag alt={code} countryCode={flagName} />
 ));