Fix display of project territory

src/components/Tags.svelte

@@ -1,16 +1,35 @@
-<script>
+<script lang="ts">
     import BookmarkIcon from "../svgs/BookmarkIcon.svelte";
     import MapIcon from "../svgs/MapIcon.svelte";
-    export let tags;
     import { t } from "../i18n/store";
+    import type { Project, Territory } from "../openapi/client";
+    import iso3166 from "iso-3166-2";
+    import { getTerritoryTag } from "../utils/getTerritoryTag";
+
+    export let lang: string;
+    export let project: Project;
+
+    function displayName(territory: Territory) {
+        const countryNames = new Intl.DisplayNames(lang, { type: "region" });
+        const country = countryNames.of(territory.country);
+
+        const tag = getTerritoryTag(territory);
+        if (!tag || tag === territory.country) {
+            return country;
+        }
+
+        const iso = iso3166.subdivision(tag!);
+
+        return iso?.name;
+    }
 </script>
 
 <div class="flex w-auto gap-2">
-    <div class="border-secondary flex gap-2 rounded-sm border px-2 py-1">
+    <div class="border-secondary flex items-center gap-2 rounded-sm border px-2 py-1">
         <BookmarkIcon />
-        {$t(`categories.${tags.categoryTag}`)}
+        {$t(`categories.${project.category}`)}
     </div>
-    <div class=" border-secondary flex gap-2 rounded-sm border px-2 py-1">
-        <MapIcon />{tags.territoryTag}
+    <div class="border-secondary flex items-center gap-2 rounded-sm border px-2 py-1">
+        <MapIcon />{displayName(project.territory)}
     </div>
 </div>

src/components/project/SingleProject.svelte

@@ -8,7 +8,6 @@
         apiProjectsIdOrSlugGet,
     } from "../../openapi/client/index";
     import Tags from "../Tags.svelte";
-    import { getTerritoryTag } from "../../utils/getTerritoryTag";
     import Countdown from "../Countdown.svelte";
     import LanguagesDropdown from "../LanguagesDropdown.svelte";
     import Sharebutton from "./Sharebutton.svelte";
@@ -18,11 +17,10 @@
     import Card from "./Card.svelte";
     import Player from "../Player/Player.svelte";
     import Banner from "./Banner.svelte";
-    import { locale, setLocale, t } from "../../i18n/store";
+    import { setLocale, t } from "../../i18n/store";
     import ArrowRightIcon from "../../svgs/ArrowRightIcon.svelte";
     import RememberIcon from "../../svgs/RememberIcon.svelte";
     import { getDefaultLanguage } from "../../utils/consts";
-    import { isSupportedLocale, type Locale } from "../../i18n/locales";
     import TopRewards from "./TopRewards.svelte";
 
     let {
@@ -31,6 +29,7 @@
         accounting,
         accountingBalance,
         ownerName,
+        totalSupports,
         balancePoints,
     }: {
         lang: string;
@@ -38,17 +37,13 @@
         accounting: Accounting;
         accountingBalance: AccountingBalance;
         ownerName: string;
+        totalSupports: number;
         balancePoints: ApiAccountingBalancePointsGetCollectionData;
     } = $props();
 
     let poster = { src: project.video?.thumbnail || "", alt: "Miniatura del video" };
     let showFull = $state(false);
 
-    const tags = {
-        categoryTag: project.category,
-        territoryTag: getTerritoryTag(project.territory),
-    };
-
     let paragraphRef: HTMLParagraphElement;
     let showToggle = $state(false);
     const countdownEnd = project.calendar?.optimum ? new Date(project.calendar.optimum) : undefined;
@@ -137,12 +132,12 @@
             <div class="lg:hidden">
                 <Countdown {countdownEnd} />
             </div>
-            <Card {project} {accountingBalance} {balancePoints} />
+            <Card {project} {accountingBalance} {balancePoints} {totalSupports} />
         </div>
     </div>
 
     <div class="mb-12 flex w-full flex-col justify-between gap-4 lg:flex-row">
-        <Tags {tags} />
+        <Tags {project} {lang} />
         <div class="flex flex-row justify-between gap-6">
             <Sharebutton {project} />
             <button

src/utils/getTerritoryTag.ts

@@ -1,14 +1,7 @@
-import type { ProjectTerritoryApiResource } from "../openapi/client/index";
+import type { Territory } from "../openapi/client";
 
-export const getTerritoryTag = (territory: ProjectTerritoryApiResource): string | undefined => {
-    const entries = Object.entries(territory)
-        .filter(([key, value]) => /^subLvl\d+$/.test(key) && typeof value === "string")
-        .sort(([a], [b]) => {
-            const aNum = parseInt(a.replace("subLvl", ""), 10);
-            const bNum = parseInt(b.replace("subLvl", ""), 10);
-            return aNum - bNum;
-        });
+export const getTerritoryTag = (territory: Territory): string | undefined => {
+    const entries = Object.entries(territory).reverse();
 
-    const last = entries.at(-1);
-    return last?.[1];
+    return entries.at(0)?.[1] ?? undefined;
 };