xcc.es
[READ-ONLY] Mirror of https://github.com/mrgnw/ananas. learn multiple languages at once
ananas.xcc.es
condense
author
Morgan
date
(May 7, 2025, 6:17 PM +0200)
commit
b6635e29
b6635e2953e67dda633aa2901262dfb880321f35
parent
c13279c2
c13279c2dbf2dd276156cad5e3f036071f3f224a
+16
-24
+16
-24
src/routes/languages/+page.svelte
+16
-24
src/routes/languages/+page.svelte
···
2
2
import { userStore } from '$lib/stores/user.svelte.js';
3
3
import { getAllLanguages } from '$lib/utils/languages.js';
4
4
5
-
// All languages, sorted by speakers descending
6
-
let allLanguages = $state(
7
-
getAllLanguages().sort((a, b) => b.speakers - a.speakers)
8
-
);
5
+
// Only runs once on load
6
+
let allLanguages = $state(getAllLanguages().sort((a, b) => b.speakers - a.speakers));
9
7
10
-
// Use $derived.by for reactivity with userStore
11
-
let selectedLangs = $derived.by(() =>
12
-
allLanguages.filter(lang => userStore.user.selectedLanguages.includes(lang.code))
13
-
);
14
-
let unselectedLangs = $derived.by(() =>
15
-
allLanguages.filter(lang => !userStore.user.selectedLanguages.includes(lang.code))
8
+
let languageOptions = $derived.by(() =>
9
+
allLanguages.map(lang => ({
10
+
...lang,
11
+
selected: userStore.user.selectedLanguages.includes(lang.code)
12
+
}))
13
+
.sort((a, b) => (b.selected - a.selected) || (b.speakers - a.speakers))
16
14
);
17
15
18
16
function formatSpeakers(n) {
···
23
21
24
22
<h1>Select Languages</h1>
25
23
<ul class="languages-list">
26
-
{#each selectedLangs as lang (lang.code)}
27
-
<li class="language-item selected">
28
-
<button class="add-btn" onclick={() => userStore.removeLanguage(lang.code)}>
29
-
Remove
30
-
</button>
31
-
<span class="lang-speakers">{formatSpeakers(lang.speakers)}</span>
32
-
<span class="lang-label">{lang.name}</span>
33
-
<span class="lang-native">({lang.nativeName})</span>
34
-
</li>
35
-
{/each}
36
-
{#each unselectedLangs as lang (lang.code)}
37
-
<li class="language-item">
38
-
<button class="add-btn" onclick={() => userStore.addLanguage(lang.code)}>
39
-
Add
24
+
{#each languageOptions as lang (lang.code)}
25
+
<li class="language-item {lang.selected ? 'selected' : ''}">
26
+
<button class="add-btn"
27
+
onclick={() => lang.selected
28
+
? userStore.removeLanguage(lang.code)
29
+
: userStore.addLanguage(lang.code)
30
+
}>
31
+
{lang.selected ? 'Remove' : 'Add'}
40
32
</button>
41
33
<span class="lang-speakers">{formatSpeakers(lang.speakers)}</span>
42
34
<span class="lang-label">{lang.name}</span>