[+] Singing mode button

README.md

@@ -26,7 +26,7 @@ Practice Japanese Karaoke lyrics reading and typing at the same time with KaraDa
 
 ## Technical Tasks
 
-* [ ] i18n
+* [x] i18n
 * [ ] 404 page
 * [ ] Update an existing playlist
 * [ ] Allow users to correct lyric pronunciations through correction feedback

src/lib/i18n/en.ts

@@ -86,7 +86,8 @@ export default {
   song: {
     mode: {
       typing: 'Typing Mode',
-      music: 'Music Mode'
+      music: 'Music Mode',
+      karaoke: 'Singing Mode'
     },
     karaoke: {
       noVocals: 'No vocal separation track detected, cannot adjust vocal volume. Please process in song details page first.'

src/lib/i18n/ja.ts

@@ -86,7 +86,8 @@ export default {
   song: {
     mode: {
       typing: 'タイピングモード',
-      music: '音楽モード'
+      music: '音楽モード',
+      karaoke: '歌うモード'
     },
     karaoke: {
       noVocals: 'ボーカル分離トラックが検出されないため、ボーカル音量を調整できません。まず曲の詳細ページで処理してください。'

src/lib/i18n/zh.ts

@@ -86,7 +86,8 @@ export default {
   song: {
     mode: {
       typing: '打字模式',
-      music: '音乐模式'
+      music: '音乐模式',
+      karaoke: '唱歌模式'
     },
     karaoke: {
       noVocals: '未检测到人声分离音轨，无法调节人声音量。请先在歌曲详情页进行处理。'

src/routes/song/[id]/+page.svelte

@@ -54,8 +54,9 @@
 <ProgressList percentage={progressPercentage} items={progressItems} />
 
 {#if loadStatus === "done"}
-  <div class="hbox gap-4 p-16px">
-    <Button big icon="i-material-symbols:keyboard-rounded" onclick={() => goto(`/song/${data.song.id}/play`)}>{t.typing}</Button>
-    <Button big icon="i-material-symbols:music-note-rounded" onclick={() => goto(`/song/${data.song.id}/play?music=true`)}>{t.music}</Button>
+  <div class="hbox gap-4 p-16px flex-wrap">
+    <Button big icon="i-material-symbols:keyboard-rounded" onclick={() => goto(`/song/${data.song.id}/play`)} class="!w-auto !min-w-[calc(50%-8px)] grow">{t.typing}</Button>
+    <Button big icon="i-material-symbols:music-note-rounded" onclick={() => goto(`/song/${data.song.id}/play?music=true`)} class="!w-auto !min-w-[calc(50%-8px)] grow">{t.music}</Button>
+    <Button big icon="i-material-symbols:mic-rounded" onclick={() => goto(`/song/${data.song.id}/karaoke`)} class="!w-auto !min-w-[calc(50%-8px)] grow">{t.karaoke}</Button>
   </div>
 {/if}

src/routes/song/[id]/karaoke/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { PageProps } from "./$types"
-  import { LinearProgress } from "m3-svelte"
   import { onMount } from "svelte"
   import { typingSettingsDefault } from "$lib/types"
   import { processLrcLine, dedupLines, type ProcLrcLine } from "$lib/ui/player/IMEHelper"

src/routes/song/[id]/play/+page.svelte

@@ -8,7 +8,6 @@
   import "$lib/ext.ts"
   import { API } from "$lib/client.ts"
   import { goto } from '$app/navigation'
-  import { artistAndAlbum } from "$lib/utils.ts"
   import { MusicControl } from "$lib/ui/player/MusicControl.ts"
   import Lyrics from "$lib/ui/player/Lyrics.svelte"
   import PlayerAppBar from "$lib/ui/player/PlayerAppBar.svelte"