improve country translation & sort them afterwards

src/components/AlbumItem.vue

@@ -3,7 +3,7 @@ import { useRand } from '@/scripts/colors.js';
 import { useI18n } from '@/stores/misc.js';
 
 const rand = useRand(),
-{ t } = useI18n();
+  { t } = useI18n();
 
 defineProps({
   name: String,

src/components/Artist.vue

@@ -44,7 +44,12 @@ function Sub() {
           @click="
             results.getAlbum('/playlist?list=' + artist.state.playlistId)
           " />
-        <span class="us-box subs" :data-active="isSub" :data-subs-l="t('artist.subscribers')" :data-subs="t('artist.subs')" @click="Sub">
+        <span
+          class="us-box subs"
+          :data-active="isSub"
+          :data-subs-l="t('artist.subscribers')"
+          :data-subs="t('artist.subs')"
+          @click="Sub">
           {{ artist.state.subscriberCount || 0 }}
         </span>
       </div>
@@ -105,7 +110,9 @@ p.more {
   box-shadow: 0 0 1rem var(--color-background-mute);
 }
 .subs {
-  transition: background-color 0.4s ease, color 0.4s ease;
+  transition:
+    background-color 0.4s ease,
+    color 0.4s ease;
 }
 .subs::after {
   content: ' ' attr(data-subs-l);

src/components/Charts.vue

@@ -4,7 +4,6 @@ import { ref, reactive, watch, onMounted } from 'vue';
 import AlbumItem from '@/components/AlbumItem.vue';
 import SongItem from '@/components/SongItem.vue';
 
-import { translateCountryNames } from '@/scripts/countries.js';
 import { getJsonHyp } from '@/scripts/fetch.js';
 
 import { useResults, useArtist } from '@/stores/results.js';
@@ -33,10 +32,17 @@ async function getCharts() {
   if (!id.value)
     id.value = json.options.all.find(i => i.title == json.options.default).id;
 
-  translateCountryNames(json.options.all);
-  console.log(json.options.all)
+  for (const country of json.options.all) {
+    const countryLocaleId = `countries.${country.id}`;
 
-  data.options = json.options.all;
+    if (t(countryLocaleId) !== countryLocaleId) {
+      country.title = t(countryLocaleId);
+    }
+  }
+
+  data.options = json.options.all.sort((a, b) => {
+    return a.title.localeCompare(b.title);
+  });
   data.songs = json.trending;
   data.artists = json.artists;
 }

src/components/NewPlaylist.vue

@@ -480,8 +480,8 @@ onMounted(async () => {
         <a
           href="https://piped.video/register"
           target="_blank"
-          rel="noreferrer noopener"
-          > Piped</a
+          rel="noreferrer noopener">
+          Piped</a
         >
       </p>
     </form>