fix: #71 merge compatibility fix

ADOFAI-gg · Dec 22, 2023 · f755242 · f755242
1 parent 23a7718
commit f755242
Show file tree

Hide file tree

Showing 17 changed files with 99 additions and 84 deletions.
diff --git a/src/components/atoms/auth/AuthCard.svelte b/src/components/atoms/auth/AuthCard.svelte
@@ -8,15 +8,15 @@
 
 <div class="legal-docs-container">
   <a href="../docs/legal" target="_blank">
-    <Translation key="LEGAL_NOTICE" />
+    <Translation key="common-auth:legal-notice" />
   </a>
   <div class="separator" />
   <a href="../docs/terms" target="_blank">
-    <Translation key="TERMS_OF_SERVICE" />
+    <Translation key="common-auth:terms" />
   </a>
   <div class="separator" />
   <a href="../docs/privacy" target="_blank">
-    <Translation key="PRIVACY_POLICY" />
+    <Translation key="common-auth:privacy-policy" />
   </a>
 </div>
 

diff --git a/src/components/atoms/interaction/InputField.svelte b/src/components/atoms/interaction/InputField.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { currentLangData, type TranslationKey } from '@/utils/i18n';
+  import { currentLang, type TranslationKey, translate } from '@/utils/i18n';
   import Icon from '@atoms/asset/Icon.svelte';
 
-  export let value: TranslationKey = '';
+  export let value: string = '';
   export let placeholder: string = '';
   export let passwordVisible: boolean = false;
 
@@ -14,7 +14,7 @@
     input.type = showPassword ? 'text' : 'password';
   };
 
-  $: localizedPlaceholder = $currentLangData[placeholder];
+  $: localizedPlaceholder = translate(placeholder as TranslationKey, {}, true, $currentLang);
 </script>
 
 <div class="input-field-container">

diff --git a/src/components/atoms/search/SearchMetaInput.svelte b/src/components/atoms/search/SearchMetaInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { translate, currentLang } from '@/utils/i18n';
+  import { translate, type TranslationKey } from '@/utils/i18n';
 
-  export let placeholder: string | null = null;
+  export let placeholder: TranslationKey | null = null;
 
   export let value: string | number | null = '';
 
@@ -10,7 +10,7 @@
   export let min: number | undefined = undefined;
   export let max: number | undefined = undefined;
 
-  $: placeholderContent = translate(placeholder || '', $currentLang);
+  $: placeholderContent = translate(placeholder!);
 
   $: textValue = `${value ?? ''}`;
 

diff --git a/src/components/molecules/auth/OAuth2SignOptions.svelte b/src/components/molecules/auth/OAuth2SignOptions.svelte
@@ -3,10 +3,11 @@
   import Button from '@atoms/interaction/Button.svelte';
   import Google from 'svelte-icons/fa/FaGoogle.svelte';
   import { createEventDispatcher } from 'svelte';
+  import type { StringTranslationKey } from '@/utils/i18n';
 
   const dispatch = createEventDispatcher();
 
-  export let labelKey: string = 'SIGNIN_MORE_OPTIONS';
+  export let labelKey: StringTranslationKey = 'sign-in:more-options';
 </script>
 
 <div class="oauth2-container">

diff --git a/src/components/molecules/nav/NavSignArea.svelte b/src/components/molecules/nav/NavSignArea.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div class="sign-area" class:sign-area__overlay={overlay}>
-  <a href="/auth/signup" class="sign-area__singup">
+  <a href="/auth/signup" class="sign-area__signup">
     <Translation key="common:sign-up" />
   </a>
 

diff --git a/src/components/organisms/levels/info/LevelLeaderboardItem.svelte b/src/components/organisms/levels/info/LevelLeaderboardItem.svelte
@@ -47,7 +47,7 @@
       <a href={play.url} target="_blank" class="right-side__video-link" rel="noreferrer">
         <Icon icon="playOutlined" size={16} alt="Video Icon" />
         <span>
-          <Translation key="level-details:clear-video" />
+          <Translation key="level-details:leaderboard-clear-video" />
         </span>
       </a>
     </div>

diff --git a/src/components/organisms/levels/info/LevelMetaArea.svelte b/src/components/organisms/levels/info/LevelMetaArea.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
-  import Button from '@atoms/interaction/Button.svelte';
   import DifficultyIcon from '@atoms/asset/DifficultyIcon.svelte';
-  import Icon from '@atoms/asset/Icon.svelte';
   import LevelMetaLabelValuePair from '@molecules/levels/LevelMetaLabelValuePair.svelte';
   import Translation from '@/components/utils/Translation.svelte';
   import type { Level } from '@/types';
   import LevelShareMenu from '@organisms/levels/info/LevelShareMenu.svelte';
   import LevelTagDetailsArea from '@organisms/levels/info/LevelTagDetailsArea.svelte';
-  import { useAccount } from '@/utils/constants';
 
   $: convertLength = (length: number): [string, number] => {
     const seconds = Math.floor(length % 60);
@@ -86,15 +83,15 @@
   <div class="blank" />
 
   <div class="buttons">
-    {#if useAccount}
-      <Button type="levelAction">
-        <div class="buttons__like-container">
-          <Icon style="color: rgba(var(--color-red), 1);" icon="heart" size={20} alt="Heart Icon" />
+    <!-- TODO: uncomment after backend implements likes feature
+    <Button type="levelAction">
+      <div class="buttons__like-container">
+        <Icon style="color: rgba(var(--color-red), 1);" icon="heart" size={20} alt="Heart Icon" />
 
-          <div class="buttons__like-container-text">1.4K</div>
-        </div>
-      </Button>
-    {/if}
+        <div class="buttons__like-container-text">1.4K</div>
+      </div>
+    </Button>
+    -->
 
     <LevelShareMenu {level} />
   </div>
@@ -121,6 +118,7 @@
     display: flex;
     gap: 12px;
 
+    /* TODO: uncomment after backend implements likes feature
     &__like-container {
       display: flex;
       gap: 6px;
@@ -131,5 +129,6 @@
         font-size: 16px;
       }
     }
+    */
   }
 </style>
diff --git a/src/components/organisms/levels/list/LevelListItemTagList.svelte b/src/components/organisms/levels/list/LevelListItemTagList.svelte
@@ -68,7 +68,7 @@
     {#if level.epilepsyWarning}
       <Tooltip placement="bottom-end">
         <Icon
-          icon="SW"
+          icon="sw"
           namespace="tagIcons"
           style="color: rgba(var(--color-red), 100);"
           size={24}

diff --git a/src/components/organisms/levels/list/LevelTableView.svelte b/src/components/organisms/levels/list/LevelTableView.svelte
@@ -13,11 +13,11 @@
 
   export let total: number;
 
-  let swwidth = 0;
+  let swWidth = 0;
 </script>
 
 {#if browser}
-  <VirtualTable style="width: {1582 + swwidth + 24}px;" data={levels} let:item {total} on:more>
+  <VirtualTable style="width: {1582 + swWidth + 24}px;" data={levels} let:item {total} on:more>
     <colgroup slot="cols">
       <col width="56" />
       <col width="40" />
@@ -28,7 +28,7 @@
       <col width="144" />
       <col width="120" />
       <col width="180" />
-      <col style="min-width: {swwidth + 24}px;" />
+      <col style="min-width: {swWidth + 24}px;" />
       <col width="92" />
     </colgroup>
     <thead slot="head">
@@ -62,15 +62,15 @@
         </th>
 
         <th>
-          <Translation key="level-table-cols:tils" />
+          <Translation key="level-table-cols:tiles" />
         </th>
 
         <th>
           <Translation key="level-table-cols:tags" />
         </th>
 
         <th class="auto-fit">
-          <div bind:clientWidth={swwidth}>
+          <div bind:clientWidth={swWidth}>
             <Translation key="level-table-cols:warnings" />
           </div>
         </th>

diff --git a/src/components/organisms/levels/search/DifficultyRangeSelector.svelte b/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>
diff --git a/src/components/organisms/levels/search/LevelSearchMetaTab.svelte b/src/components/organisms/levels/search/LevelSearchMetaTab.svelte
@@ -137,73 +137,73 @@
 </script>
 
 <div class="meta">
-  <SearchGroup title="SEARCH_META_CREDIT">
+  <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 label="SEARCH_META_SONG_LABEL">
+      <LabeledInputContainer key="search:meta-field-song">
         <SearchMetaInput
           on:input={onChangeSong}
           value={$parsedQuery.song}
-          placeholder="SEARCH_META_SONG_PLACEHOLDER"
+          placeholder="search:meta-field-song-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-label">
         <DifficultyRangeSelector />
       </LabeledInputContainer>
-      <LabeledInputContainer key="SEARCH_META_TILES_LABEL">
+      <LabeledInputContainer key="search:meta-field-tiles-label">
         <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-label">
         <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>

diff --git a/src/components/organisms/levels/search/LevelSearchSortTab.svelte b/src/components/organisms/levels/search/LevelSearchSortTab.svelte
@@ -4,7 +4,6 @@
 
   import SearchGroup from '@molecules/levels/SearchGroup.svelte';
   import { searchSettingStore, type SearchSettings } from '@/stores/search';
-  import { useAccount } from '@/utils/constants';
 
   const updateOrder = (v: SearchSettings['sort']['order']) => () => {
     searchSettingStore.update((x) => ({
@@ -27,24 +26,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,24 +54,24 @@
         <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"
-              checked={$searchSettingStore.sort.type === 'likes'}
-              on:click={updateType('likes')}
-            />
-          {/if}
+          <!-- TODO: uncomment after backend implements likes feature
+          <SortOrderRadio
+            icon="heart"
+            key="search:sort-by-likes"
+            checked={$searchSettingStore.sort.type === 'likes'}
+            on:click={updateType('likes')}
+          />
+          -->
         </div>
       </div>
     {/if}

diff --git a/src/components/organisms/levels/search/TagSearchTab.svelte b/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>