split the achievements modal into achieved and not achieved (#6089)

frontend/app/src/components/home/profile/LearnToEarn.svelte

@@ -14,7 +14,6 @@
 
     const dispatch = createEventDispatcher();
     const client = getContext<OpenChat>("client");
-
     const enabled = new Set<Achievement>([
         "streak_3",
         "streak_7",
@@ -49,6 +48,8 @@
         "forwarded_message",
     ]);
 
+    let selectedTab: "todo" | "done" = "todo";
+
     $: globalState = client.globalStateStore;
     $: filtered = [...achievements].filter(filter);
     $: [achieved, notAchieved] = client.partition(filtered, (a) =>
@@ -59,6 +60,10 @@
     function filter(achievement: Achievement): boolean {
         return enabled.has(achievement) || $globalState.achievements.has(achievement);
     }
+
+    function selectTab(tab: "todo" | "done") {
+        selectedTab = tab;
+    }
 </script>
 
 <Overlay dismissible>
@@ -67,22 +72,71 @@
             ><Translatable resourceKey={i18nKey("learnToEarn.title")} /></span>
 
         <div class="body" slot="body">
-            {#each achieved as achievement}
-                <div class="achievement">
-                    <div class="yes icon">
-                        <CheckCircle size={$iconSize} color={"var(--toast-success-bg)"} />
-                    </div>
-                    <Translatable resourceKey={i18nKey(`learnToEarn.${achievement}`)} />
+            <div class="tabs">
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <div
+                    tabindex="0"
+                    role="button"
+                    on:click={() => selectTab("todo")}
+                    class:selected={selectedTab === "todo"}
+                    class="tab">
+                    <Translatable resourceKey={i18nKey("learnToEarn.todo")} />
+                </div>
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <div
+                    tabindex="0"
+                    role="button"
+                    on:click={() => selectTab("done")}
+                    class:selected={selectedTab === "done"}
+                    class="tab">
+                    <Translatable resourceKey={i18nKey("learnToEarn.done")} />
                 </div>
-            {/each}
-            {#each notAchieved as achievement}
-                <div class="achievement">
-                    <div class="no icon">
-                        <CheckCircleOutline size={$iconSize} color={"#ccc"} />
-                    </div>
-                    <Translatable resourceKey={i18nKey(`learnToEarn.${achievement}`)} />
+            </div>
+            {#if selectedTab === "todo"}
+                <div class="list">
+                    {#if notAchieved.length === 0}
+                        <div class="empty">
+                            <div class="emoji">😎</div>
+                            <div class="msg">
+                                <Translatable
+                                    resourceKey={i18nKey("learnToEarn.nothingLeftToDo")} />
+                            </div>
+                        </div>
+                    {:else}
+                        {#each notAchieved as achievement}
+                            <div class="achievement">
+                                <div class="no icon">
+                                    <CheckCircleOutline size={$iconSize} color={"#ccc"} />
+                                </div>
+                                <Translatable resourceKey={i18nKey(`learnToEarn.${achievement}`)} />
+                            </div>
+                        {/each}
+                    {/if}
                 </div>
-            {/each}
+            {/if}
+            {#if selectedTab === "done"}
+                <div class="list">
+                    {#if achieved.length === 0}
+                        <div class="empty">
+                            <div class="emoji">😢</div>
+                            <div class="msg">
+                                <Translatable resourceKey={i18nKey("learnToEarn.nothingDone")} />
+                            </div>
+                        </div>
+                    {:else}
+                        {#each achieved as achievement}
+                            <div class="achievement">
+                                <div class="yes icon">
+                                    <CheckCircle
+                                        size={$iconSize}
+                                        color={"var(--toast-success-bg)"} />
+                                </div>
+                                <Translatable resourceKey={i18nKey(`learnToEarn.${achievement}`)} />
+                            </div>
+                        {/each}
+                    {/if}
+                </div>
+            {/if}
         </div>
 
         <span class="footer" slot="footer">
@@ -118,4 +172,53 @@
         align-items: center;
         gap: $sp4;
     }
+
+    .tabs {
+        display: flex;
+        align-items: center;
+        @include font(medium, normal, fs-90);
+        color: var(--txt-light);
+        gap: $sp5;
+        border-bottom: 1px solid var(--bd);
+        cursor: pointer;
+        margin-bottom: $sp5;
+
+        @include mobile() {
+            gap: $sp4;
+        }
+
+        .tab {
+            padding-bottom: 10px;
+            margin-bottom: -2px;
+            border-bottom: 3px solid transparent;
+            white-space: nowrap;
+            &.selected {
+                color: var(--txt);
+                border-bottom: 3px solid var(--txt);
+            }
+        }
+    }
+
+    .list {
+        height: 400px;
+        @include nice-scrollbar();
+    }
+
+    .empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        padding: 0 25%;
+        gap: $sp4;
+        text-align: center;
+
+        .emoji {
+            @include font(book, normal, fs-260);
+        }
+        .msg {
+            @include font(bold, normal, fs-140);
+        }
+    }
 </style>

frontend/app/src/i18n/cn.json

@@ -570,6 +570,7 @@
         "direct_chat_5": "进行 5 次直接聊天",
         "direct_chats_10": "进行 10 次直接聊天",
         "direct_chats_20": "进行 20 次直接聊天",
+        "done": "完毕",
         "edited_message": "编辑第一条消息",
         "enabled_disappearing_messages": "首次启用“消失的消息”",
         "favourited_chat": "将你的第一次聊天标记为收藏",
@@ -580,6 +581,8 @@
         "joined_community": "加入你的第一个社区",
         "joined_gated_group_or_community": "加入你的第一个封闭群组/频道",
         "joined_group": "加入了你的第一个群组",
+        "nothingDone": "你还有很多工作要做！",
+        "nothingLeftToDo": "放松！你没什么可做的了",
         "owned_group_with_1_diamond_member": "拥有第一个群组/社区，其中有 1 名经过验证的成员",
         "owned_group_with_10_diamond_members": "拥有第一个群组/社区，其中有 10 名经过验证的成员",
         "owned_group_with_100_diamond_members": "拥有第一个拥有 100 名经过验证的成员的群组/社区",
@@ -621,6 +624,7 @@
         "swapped_from_wallet": "从钱包中兑换了第一个代币",
         "tipped_message": "已给小费的第一条消息",
         "title": "成就",
+        "todo": "去做",
         "translation_accepted": "你的第一个翻译是否被接受",
         "upgrade_to_gold_diamond": "升级为终身钻石会员",
         "upgraded_to_diamond": "升级为钻石会员",

frontend/app/src/i18n/de.json

@@ -570,6 +570,7 @@
         "direct_chat_5": "Führen Sie 5 direkte Chats",
         "direct_chats_10": "Führen Sie 10 direkte Chats",
         "direct_chats_20": "Führen Sie 20 direkte Chats",
+        "done": "Erledigt",
         "edited_message": "Erste Nachricht bearbeitet",
         "enabled_disappearing_messages": "Zum ersten Mal verschwindende Nachrichten aktivieren",
         "favourited_chat": "Den ersten Chat als Favorit markiert",
@@ -580,6 +581,8 @@
         "joined_community": "Ihrer ersten Community beigetreten",
         "joined_gated_group_or_community": "Ihrer ersten geschlossenen Gruppe/Ihrem ersten geschlossenen Kanal beigetreten",
         "joined_group": "Ihrer ersten Gruppe beigetreten",
+        "nothingDone": "Es liegt noch viel Arbeit vor Ihnen!",
+        "nothingLeftToDo": "Entspannen Sie sich! Sie haben nichts mehr zu tun",
         "owned_group_with_1_diamond_member": "Besitzen Sie Ihre erste Gruppe/Community mit 1 verifiziertem Mitglied.",
         "owned_group_with_10_diamond_members": "Besitzen Sie Ihre erste Gruppe/Community mit 10 verifizierten Mitgliedern.",
         "owned_group_with_100_diamond_members": "Besitzen Sie Ihre erste Gruppe/Community mit 100 verifizierten Mitgliedern.",
@@ -621,6 +624,7 @@
         "swapped_from_wallet": "Dein erstes Token aus der Wallet getauscht",
         "tipped_message": "Erste Nachricht mit Trinkgeld",
         "title": "Erfolge",
+        "todo": "Machen",
         "translation_accepted": "Ihre erste Übersetzung wurde akzeptiert",
         "upgrade_to_gold_diamond": "Upgrade auf Lifetime Diamond-Mitgliedschaft",
         "upgraded_to_diamond": "Upgrade auf Diamond-Mitgliedschaft",

frontend/app/src/i18n/en.json

@@ -570,6 +570,7 @@
         "direct_chat_5": "Have 5 direct chats",
         "direct_chats_10": "Have 10 direct chats",
         "direct_chats_20": "Have 20 direct chats",
+        "done": "Done",
         "edited_message": "Edited first message",
         "enabled_disappearing_messages": "First time enabling disappearing messages",
         "favourited_chat": "Marked your first chat as a favourite",
@@ -580,6 +581,8 @@
         "joined_community": "Joined your first community",
         "joined_gated_group_or_community": "Joined your first gated group/channel",
         "joined_group": "Joined your first group",
+        "nothingDone": "You still have a lot of work to do!",
+        "nothingLeftToDo": "Relax! You have nothing left to do",
         "owned_group_with_1_diamond_member": "Owned your first group/community with 1 verified member",
         "owned_group_with_10_diamond_members": "Owned your first group/community with 10 verified members",
         "owned_group_with_100_diamond_members": "Owned your first group/community with 100 verified members",
@@ -621,6 +624,7 @@
         "swapped_from_wallet": "Swapped your first token from the wallet",
         "tipped_message": "Tipped first message",
         "title": "Achievements",
+        "todo": "To do",
         "translation_accepted": "Had your first translation accepted",
         "upgrade_to_gold_diamond": "Upgrade to Lifetime Diamond membership",
         "upgraded_to_diamond": "Upgraded to Diamond membership",

frontend/app/src/i18n/es.json

@@ -570,6 +570,7 @@
         "direct_chat_5": "Tener 5 chats directos",
         "direct_chats_10": "Tener 10 chats directos",
         "direct_chats_20": "Tener 20 chats directos",
+        "done": "Hecho",
         "edited_message": "Primer mensaje editado.",
         "enabled_disappearing_messages": "Primera vez que se habilitan los mensajes que desaparecen",
         "favourited_chat": "Marcó su primer chat como favorito",
@@ -580,6 +581,8 @@
         "joined_community": "Se unió a su primera comunidad",
         "joined_gated_group_or_community": "Se unió a su primer grupo/canal privado",
         "joined_group": "Se unió a su primer grupo",
+        "nothingDone": "¡Aún tienes mucho trabajo por hacer!",
+        "nothingLeftToDo": "¡Relajarse! No tienes nada más que hacer",
         "owned_group_with_1_diamond_member": "Era propietario de su primer grupo/comunidad con 1 miembro verificado",
         "owned_group_with_10_diamond_members": "Fue propietario de su primer grupo/comunidad con 10 miembros verificados",
         "owned_group_with_100_diamond_members": "Sea propietario de su primer grupo/comunidad con 100 miembros verificados",
@@ -621,6 +624,7 @@
         "swapped_from_wallet": "Cambiaste tu primer token de la billetera",
         "tipped_message": "Primer mensaje con propina",
         "title": "Logros",
+        "todo": "Hacer",
         "translation_accepted": "¿Han aceptado su primera traducción?",
         "upgrade_to_gold_diamond": "Actualice a una membresía Lifetime Diamond",
         "upgraded_to_diamond": "Actualizado a membresía Diamante",

frontend/app/src/i18n/fr.json

@@ -570,6 +570,7 @@
         "direct_chat_5": "Avoir 5 discussions directes",
         "direct_chats_10": "Avoir 10 discussions directes",
         "direct_chats_20": "Avoir 20 discussions directes",
+        "done": "Fait",
         "edited_message": "Premier message modifié",
         "enabled_disappearing_messages": "Activation pour la première fois des messages qui disparaissent",
         "favourited_chat": "Vous avez marqué votre première discussion comme favorite",
@@ -580,6 +581,8 @@
         "joined_community": "Vous avez rejoint votre première communauté",
         "joined_gated_group_or_community": "Vous avez rejoint votre premier groupe/canal fermé",
         "joined_group": "Vous avez rejoint votre premier groupe",
+        "nothingDone": "Vous avez encore beaucoup de travail à faire !",
+        "nothingLeftToDo": "Se détendre! Tu n'as plus rien à faire",
         "owned_group_with_1_diamond_member": "Posséder votre premier groupe/communauté avec 1 membre vérifié",
         "owned_group_with_10_diamond_members": "Posséder votre premier groupe/communauté avec 10 membres vérifiés",
         "owned_group_with_100_diamond_members": "Posséder votre premier groupe/communauté avec 100 membres vérifiés",
@@ -621,6 +624,7 @@
         "swapped_from_wallet": "Vous avez échangé votre premier jeton du portefeuille",
         "tipped_message": "Premier message averti",
         "title": "Réalisations",
+        "todo": "Faire",
         "translation_accepted": "Votre première traduction a-t-elle été acceptée",
         "upgrade_to_gold_diamond": "Passer à l'adhésion Diamond à vie",
         "upgraded_to_diamond": "Surclassé en abonnement Diamant",

frontend/app/src/i18n/hi.json

@@ -570,6 +570,7 @@
         "direct_chat_5": "5 प्रत्यक्ष चैट करें",
         "direct_chats_10": "10 प्रत्यक्ष चैट करें",
         "direct_chats_20": "20 प्रत्यक्ष चैट करें",
+        "done": "हो गया",
         "edited_message": "पहला संदेश संपादित किया गया",
         "enabled_disappearing_messages": "पहली बार गायब होने वाले संदेशों को सक्षम करना",
         "favourited_chat": "आपकी पहली चैट को पसंदीदा के रूप में चिह्नित किया गया",
@@ -580,6 +581,8 @@
         "joined_community": "अपने पहले समुदाय में शामिल हुए",
         "joined_gated_group_or_community": "अपने पहले गेटेड ग्रुप/चैनल में शामिल हुए",
         "joined_group": "अपने पहले समूह में शामिल हो गए",
+        "nothingDone": "तुम्हें अभी भी बहुत काम करना है!",
+        "nothingLeftToDo": "आराम करो! तुम्हारे पास करने को कुछ नहीं बचा है",
         "owned_group_with_1_diamond_member": "1 सत्यापित सदस्य के साथ अपना पहला समूह/समुदाय बनाएं",
         "owned_group_with_10_diamond_members": "10 सत्यापित सदस्यों के साथ अपना पहला समूह/समुदाय बनाएं",
         "owned_group_with_100_diamond_members": "100 सत्यापित सदस्यों के साथ अपना पहला समूह/समुदाय बनाएं",
@@ -621,6 +624,7 @@
         "swapped_from_wallet": "वॉलेट से अपना पहला टोकन स्वैप किया",
         "tipped_message": "पहला संदेश टिप किया गया",
         "title": "उपलब्धियों",
+        "todo": "करने के लिए",
         "translation_accepted": "क्या आपका पहला अनुवाद स्वीकार किया गया था?",
         "upgrade_to_gold_diamond": "लाइफटाइम डायमंड सदस्यता में अपग्रेड करें",
         "upgraded_to_diamond": "डायमंड सदस्यता में अपग्रेड किया गया",

frontend/app/src/i18n/it.json

@@ -570,6 +570,7 @@
         "direct_chat_5": "Avere 5 chat dirette",
         "direct_chats_10": "Avere 10 chat dirette",
         "direct_chats_20": "Avere 20 chat dirette",
+        "done": "Fatto",
         "edited_message": "Primo messaggio modificato",
         "enabled_disappearing_messages": "Abilitazione dei messaggi a scomparsa per la prima volta",
         "favourited_chat": "Contrassegnata la tua prima chat come preferita",
@@ -580,6 +581,8 @@
         "joined_community": "Ti sei unito alla tua prima community",
         "joined_gated_group_or_community": "Ti sei unito al tuo primo gruppo/canale delimitato",
         "joined_group": "Ti sei unito al tuo primo gruppo",
+        "nothingDone": "Hai ancora molto lavoro da fare!",
+        "nothingLeftToDo": "Relax! Non hai più niente da fare",
         "owned_group_with_1_diamond_member": "Hai posseduto il tuo primo gruppo/community con 1 membro verificato",
         "owned_group_with_10_diamond_members": "Hai posseduto il tuo primo gruppo/community con 10 membri verificati",
         "owned_group_with_100_diamond_members": "Hai posseduto il tuo primo gruppo/community con 100 membri verificati",
@@ -621,6 +624,7 @@
         "swapped_from_wallet": "Hai scambiato il tuo primo token dal portafoglio",
         "tipped_message": "Primo messaggio con mancia",
         "title": "Risultati",
+        "todo": "Fare",
         "translation_accepted": "La tua prima traduzione è stata accettata",
         "upgrade_to_gold_diamond": "Passa all'abbonamento Lifetime Diamond",
         "upgraded_to_diamond": "Upgrade all'abbonamento Diamond",

frontend/app/src/i18n/iw.json

@@ -570,6 +570,7 @@
         "direct_chat_5": "ערכו 5 שיחות ישירות",
         "direct_chats_10": "ערכו 10 צ'אטים ישירים",
         "direct_chats_20": "יש 20 צ'אטים ישירים",
+        "done": "בוצע",
         "edited_message": "ערכת הודעה ראשונה",
         "enabled_disappearing_messages": "פעם ראשונה שמאפשרת הודעות נעלמות",
         "favourited_chat": "סימן את הצ'אט הראשון שלך כמועדף",
@@ -580,6 +581,8 @@
         "joined_community": "הצטרף לקהילה הראשונה שלך",
         "joined_gated_group_or_community": "הצטרף לקבוצה/ערוץ הסגור הראשון שלך",
         "joined_group": "הצטרף לקבוצה הראשונה שלך",
+        "nothingDone": "יש לך עוד הרבה עבודה לעשות!",
+        "nothingLeftToDo": "לְהִרָגַע! לא נשאר לך מה לעשות",
         "owned_group_with_1_diamond_member": "הבעלים של הקבוצה/הקהילה הראשונה שלך עם חבר מאומת אחד",
         "owned_group_with_10_diamond_members": "הבעלים של הקבוצה/הקהילה הראשונה שלך עם 10 חברים מאומתים",
         "owned_group_with_100_diamond_members": "הבעלים של הקבוצה/הקהילה הראשונה שלך עם 100 חברים מאומתים",
@@ -621,6 +624,7 @@
         "swapped_from_wallet": "החלפת את האסימון הראשון שלך מהארנק",
         "tipped_message": "הודעה ראשונה עם טיפ",
         "title": "הישגים",
+        "todo": "לעשות",
         "translation_accepted": "התרגום הראשון שלך התקבל",
         "upgrade_to_gold_diamond": "שדרג לחברות Lifetime Diamond",
         "upgraded_to_diamond": "שודרג לחברות Diamond",