fix: translations

src/components/atoms/search/SearchMetaInput.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  import { translate, currentLang } from '@/utils/i18n';
+  import { getLangContext, translate, type TranslationKey } from '@/utils/i18n';
+
+  const currentLang = getLangContext();
 
   export let placeholder: string | null = null;
 
@@ -10,7 +12,7 @@
   export let min: number | undefined = undefined;
   export let max: number | undefined = undefined;
 
-  $: placeholderContent = translate(placeholder || '', $currentLang);
+  $: placeholderContent = translate((placeholder || '') as TranslationKey, {}, true, $currentLang);
 
   $: textValue = `${value ?? ''}`;
 

src/components/molecules/search/SearchInput.svelte

@@ -11,7 +11,7 @@
 <script lang="ts">
   import Icon from '@atoms/asset/Icon.svelte';
   import { fade } from 'svelte/transition';
-  import { translate, currentLang, type TranslationKey } from '@/utils/i18n';
+  import { getLangContext, translate, type TranslationKey } from '@/utils/i18n';
   import { parseSearchString, type SearchChunk } from '@/utils/search';
 
   export let value = '';
@@ -21,6 +21,8 @@
 
   let inputWidth = 0;
 
+  const currentLang = getLangContext();
+
   $: placeholderContent = translate(placeholder || '', {}, true, $currentLang);
 
   $: parsedValue = parseSearchString(value);

src/components/organisms/layout/MenuOverlayLangTab.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import NavMenuItem from '@/components/atoms/nav/NavMenuItem.svelte';
   import NavMenuGroup from '@/components/molecules/nav/NavMenuGroup.svelte';
-  import { availableLanguages, currentLang } from '@/utils/i18n';
+  import { availableLanguages, getLangContext } from '@/utils/i18n';
+
+  const currentLang = getLangContext();
 
   const updateLang = (code: string) => () => {
     $currentLang = code;

src/components/organisms/levels/search/DifficultyRangeSelector.svelte

@@ -69,13 +69,13 @@
   <DifficultySelectorInput
     bind:value={$parsedQuery.minDifficulty}
     on:change={onChangeMin}
-    placeholderKey="SEARCH_META_LV_MIN"
+    placeholderKey="search:meta-field-difficulty-placeholder-min"
     slot="min"
   />
   <DifficultySelectorInput
     bind:value={$parsedQuery.maxDifficulty}
     on:change={onChangeMax}
-    placeholderKey="SEARCH_META_LV_MAX"
+    placeholderKey="search:meta-field-difficulty-placeholder-max"
     slot="max"
   />
 </RangeInputPair>

src/components/organisms/levels/search/LevelSearchMetaTab.svelte

@@ -119,66 +119,66 @@
 </script>
 
 <div class="meta">
-  <SearchGroup title="SEARCH_META_AUTHOR">
+  <SearchGroup title="search:meta-group-credit">
     <div class="meta-group">
-      <LabeledInputContainer key="SEARCH_META_ARTIST_LABEL">
+      <LabeledInputContainer key="search:meta-field-artist">
         <SearchMetaInput
           on:input={onChangeArtist}
           value={$parsedQuery.artist}
-          placeholder="SEARCH_META_ARTIST_PLACEHOLDER"
+          placeholder="search:meta-field-artist-placeholder"
         />
       </LabeledInputContainer>
-      <LabeledInputContainer key="SEARCH_META_CREATOR_LABEL">
+      <LabeledInputContainer key="search:meta-field-creator">
         <SearchMetaInput
           on:input={onChangeCreator}
           value={$parsedQuery.creator}
-          placeholder="SEARCH_META_CREATOR_PLACEHOLDER"
+          placeholder="search:meta-field-creator-placeholder"
         />
       </LabeledInputContainer>
     </div>
   </SearchGroup>
-  <SearchGroup title="SEARCH_META_LEVEL">
+  <SearchGroup title="search:meta-group-level">
     <div class="meta-group">
-      <LabeledInputContainer key="SEARCH_META_LV_LABEL">
+      <LabeledInputContainer key="search:meta-field-difficulty">
         <DifficultyRangeSelector />
       </LabeledInputContainer>
-      <LabeledInputContainer key="SEARCH_META_TILES_LABEL">
+      <LabeledInputContainer key="search:meta-field-tiles">
         <RangeInputPair>
           <SearchMetaInput
             value={$parsedQuery.minTiles}
             on:input={onChangeMinTiles}
             slot="min"
             min={0}
             type="number"
-            placeholder="SEARCH_META_TILES_MIN"
+            placeholder="search:meta-field-tiles-placeholder-min"
           />
           <SearchMetaInput
             value={$parsedQuery.maxTiles}
             on:input={onChangeMaxTiles}
             slot="max"
             min={0}
             type="number"
-            placeholder="SEARCH_META_TILES_MAX"
+            placeholder="search:meta-field-tiles-placeholder-max"
           />
         </RangeInputPair>
       </LabeledInputContainer>
-      <LabeledInputContainer key="SEARCH_META_BPM_LABEL">
+      <LabeledInputContainer key="search:meta-field-bpm">
         <RangeInputPair>
           <SearchMetaInput
             value={$parsedQuery.minBpm}
             on:input={onChangeMinBPM}
             slot="min"
             min={0}
             type="number"
-            placeholder="SEARCH_META_BPM_MIN"
+            placeholder="search:meta-field-bpm-placeholder-min"
           />
           <SearchMetaInput
             value={$parsedQuery.maxBpm}
             on:input={onChangeMaxBPM}
             slot="max"
             min={0}
             type="number"
-            placeholder="SEARCH_META_BPM_MAX"
+            placeholder="search:meta-field-bpm-placeholder-max"
           />
         </RangeInputPair>
       </LabeledInputContainer>

src/components/organisms/levels/search/LevelSearchSortTab.svelte

@@ -27,24 +27,24 @@
   };
 </script>
 
-<SearchGroup title="SORT_BY">
+<SearchGroup title="search:sort-by">
   <div class="sort">
     <div class="sort__unit-container">
       <SortOrderRadio
         icon="topLeft"
-        key="SORT_ASC"
+        key="search:sort-direction-asc"
         checked={$searchSettingStore.sort.order === 'asc'}
         on:click={updateOrder('asc')}
       />
       <SortOrderRadio
         icon="bottomRight"
-        key="SORT_DESC"
+        key="search:sort-direction-desc"
         checked={$searchSettingStore.sort.order === 'desc'}
         on:click={updateOrder('desc')}
       />
       <SortOrderRadio
         icon="shuffle"
-        key="SORT_SHUFFLE"
+        key="search:sort-direction-shuffle"
         checked={$searchSettingStore.sort.order === 'shuffle'}
         on:click={updateOrder('shuffle')}
       />
@@ -55,20 +55,20 @@
         <div class="sort__order-container">
           <SortOrderRadio
             icon="calendar"
-            key="SORT_CREATED"
+            key="search:sort-by-created"
             checked={$searchSettingStore.sort.type === 'created'}
             on:click={updateType('created')}
           />
           <SortOrderRadio
             icon="fire"
-            key="SORT_DIFFICULTY"
+            key="search:sort-by-difficulty"
             checked={$searchSettingStore.sort.type === 'difficulty'}
             on:click={updateType('difficulty')}
           />
           {#if useAccount}
             <SortOrderRadio
               icon="heart"
-              key="SORT_LIKES"
+              key="search:sort-by-likes"
               checked={$searchSettingStore.sort.type === 'likes'}
               on:click={updateType('likes')}
             />

src/components/organisms/levels/search/TagSearchTab.svelte

@@ -6,7 +6,7 @@
 
 <div class="tag-search-tab-container">
   {#each tagGroups as group}
-    <SearchTagGroup tags={group.tags} title={`TAG_GROUP_${group.key}`} />
+    <SearchTagGroup tags={group.tags} title={`tags:group-${group.key}`} />
   {/each}
   <MusicTagSearchArea />
 </div>

src/components/utils/Translation.svelte

@@ -3,14 +3,16 @@
 </script>
 
 <script lang="ts">
-  import { currentLang, type TranslationKey, translate } from '@/utils/i18n';
+  import { type TranslationKey, translate, getLangContext } from '@/utils/i18n';
   import type { FluentVariable } from '@fluent/bundle';
 
   export let key: TranslationKey;
   export let params: Record<string, FluentVariable> = {};
 
   export let htmlReplacer: (value: string) => string = (v) => v;
 
+  const currentLang = getLangContext();
+
   $: htmlValue = (() => {
     let k = translate(key, params, true, $currentLang);
 

src/routes/docs/[...slug]/+page.ts

@@ -1,17 +1,14 @@
 import type { PageLoad } from './$types';
 import { error } from '@sveltejs/kit';
 import type { SvelteComponent } from 'svelte';
-import { currentLang } from '@/utils/i18n';
-
-let lang = '';
-
-currentLang.subscribe((v) => (lang = v));
 
 const pages = import.meta.glob('/src/content/*.md');
 
-export const load: PageLoad = async ({ params }) => {
+export const load: PageLoad = async ({ params, parent }) => {
+  const { initialLang } = await parent();
   const page =
-    pages[`/src/content/${params.slug}.${lang}.md`] ?? pages[`/src/content/${params.slug}.md`];
+    pages[`/src/content/${params.slug}.${initialLang}.md`] ??
+    pages[`/src/content/${params.slug}.md`];
 
   if (!page) throw error(404, { message: 'Post not found.' });
 

src/routes/rankings/+page.svelte

@@ -11,7 +11,7 @@
   import { onMount } from 'svelte';
   import { writable } from 'svelte/store';
   import type { RankingResult } from './+page';
-  import Virtuallist from '@/components/utils/VirtualList.svelte';
+  import { VirtualizedInfiniteScrollList } from '@adofai-gg/svelte-virtualized-infinite-scroll';
 
   let items = writable<RankingResult[]>([]);
 
@@ -69,12 +69,17 @@
         <RankingTopItem {item} />
       {/each}
     </div>
-    <Virtuallist data={listItems} on:more={onMore} let:item total={Math.max(0, total - 3)}>
+    <VirtualizedInfiniteScrollList
+      data={listItems}
+      on:more={onMore}
+      let:item
+      total={Math.max(0, total - 3)}
+    >
       <RankingListItem {item} />
       <div slot="loading" class="loader">
         <LoadingSpinner size={48} />
       </div>
-    </Virtuallist>
+    </VirtualizedInfiniteScrollList>
   {/if}
 </PageContainer>
 

src/utils/i18n.ts

@@ -1,17 +1,12 @@
-import { writable } from 'svelte/store';
-
 import langs from '@/assets/langs.json';
-import { browser } from '$app/environment';
-import Cookies from 'js-cookie';
-
 import { FluentBundle, FluentResource, type FluentVariable } from '@fluent/bundle';
+import { getContext } from 'svelte';
+import type { Writable } from 'svelte/store';
 
 export const availableLanguages: LangResponse[] = langs;
 
 export const fallbackLang = 'en';
 
-let _currentLang = 'en';
-
 const langSections = [
   'common',
   'common-auth',
@@ -75,14 +70,14 @@ export const getLangCode = (code: string) => {
   return lang?.code || 'en';
 };
 
-export const currentLang = writable<string>(
-  getLangCode(browser ? Cookies.get('_adofaigg-lang') || window.navigator.language : 'en')
-);
+// export const currentLang = writable<string>(
+//   getLangCode(browser ? Cookies.get('_adofaigg-lang') || window.navigator.language : 'en')
+// );
 
-currentLang.subscribe((v) => {
-  Cookies.set('_adofaigg-lang', v, { expires: 365 * 10 });
-  _currentLang = v;
-});
+// currentLang.subscribe((v) => {
+//   Cookies.set('_adofaigg-lang', v, { expires: 365 * 10 });
+//   _currentLang = v;
+// });
 
 type LangResponse = {
   code: string;
@@ -100,9 +95,9 @@ const escapeHtmlTags = (str: string) =>
 
 export const translate = (
   rawKey: TranslationKey,
-  args: Record<string, FluentVariable> = {},
-  escape = true,
-  l: string = _currentLang
+  args: Record<string, FluentVariable>,
+  escape: boolean,
+  l: string
 ) => {
   let key: string;
   let sectionName: LangSection;
@@ -124,3 +119,5 @@ export const translate = (
   if (escape) escapeHtmlTags(result);
   return result;
 };
+
+export const getLangContext = () => getContext<Writable<string>>('lang');