kunkun/apps/desktop/src/lib/components/standalone/general-settings.svelte

<script lang="ts">
	import HotkeyPick from "@/components/standalone/settings/hotkey-pick.svelte"
	import { LanguageMap } from "@/constants"
	import { i18n, switchToLanguage } from "@/i18n"
	import * as m from "@/paraglide/messages"
	import {
		availableLanguageTags,
		languageTag,
		setLanguageTag,
		type AvailableLanguageTag
	} from "@/paraglide/runtime"
	import { appConfig } from "@/stores"
	import { Select, Switch } from "@kksh/svelte5"

	const languages = availableLanguageTags.map((lang) => ({
		value: lang,
		label: LanguageMap[lang] ?? lang
	}))

	let value = $state(languageTag())

	const triggerContent = $derived(languages.find((f) => f.value === value)?.label ?? "Language")
</script>

<ul class="rounded-lg border">
	<li>
		<span>{m.settings_general_launch_at_login()}</span>
		<Switch bind:checked={$appConfig.launchAtLogin} />
	</li>
	<li class="">
		<span>{m.settings_general_hotkey()}</span>
		<HotkeyPick />
	</li>
	<li>
		<span>{m.settings_general_menu_bar_icon()}</span>
		<Switch bind:checked={$appConfig.showInTray} />
	</li>
	<li>
		<span>{m.settings_general_hide_on_blur()}</span>
		<Switch bind:checked={$appConfig.hideOnBlur} />
	</li>
	<li>
		<span>{m.settings_general_extension_auto_upgrade()}</span>
		<Switch bind:checked={$appConfig.extensionAutoUpgrade} />
	</li>
	<li>
		<span>{m.settings_general_dev_extension_hmr()}</span>
		<Switch bind:checked={$appConfig.hmr} />
	</li>
	<li>
		<span>{m.settings_general_join_beta_updates()}</span>
		<Switch bind:checked={$appConfig.joinBetaProgram} />
	</li>

	<li>
		<span>{m.settings_general_developer_mode()}</span>
		<Switch bind:checked={$appConfig.developerMode} />
	</li>
	<li>
		<span>{m.settings_general_language()}</span>

		<Select.Root type="single" name="language" bind:value>
			<Select.Trigger class="w-fit">
				{triggerContent}
			</Select.Trigger>
			<Select.Content>
				<Select.Group>
					<Select.GroupHeading>{m.settings_general_language()}</Select.GroupHeading>
					{#each languages as lang}
						<Select.Item
							onclick={() => {
								appConfig.setLanguage(lang.value)
								switchToLanguage(lang.value as AvailableLanguageTag)
							}}
							value={lang.value}
							label={lang.label}>{lang.label}</Select.Item
						>
					{/each}
				</Select.Group>
			</Select.Content>
		</Select.Root>
	</li>
</ul>

<style scoped>
	li {
		@apply flex items-center justify-between border-b px-3 py-3;
	}
	ul li:last-child {
		@apply border-b-0;
	}
	li > span {
		@apply text-sm;
	}
</style>