feat(frontend): russian and english interface with a language choice in settings, soon stubs removed

frontend/src/lib/components/settings/About.svelte

@@ -1,18 +1,20 @@
 <script lang="ts">
+  import { t } from "#lib/i18n/locale.svelte.js";
+
   const appVersion = "0.0.1";
 </script>
 
 <div class="about">
   <div class="title">Beavergram</div>
-  <div class="line">Версия {appVersion}</div>
-  <div class="line">Лицензия GPL-3.0</div>
+  <div class="line">{t("settings.about.version", { version: appVersion })}</div>
+  <div class="line">{t("settings.about.license")}</div>
   <a
     class="line link"
     href="https://github.com/Ajaxy/telegram-tt"
     rel="noopener"
     target="_blank"
   >
-    UI портирован из Telegram A
+    {t("settings.about.port")}
   </a>
 </div>
 

frontend/src/lib/components/settings/Appearance.svelte

@@ -1,70 +1,17 @@
 <script lang="ts">
-  import { ripple } from "#lib/actions/ripple.js";
+  import RadioList from "#lib/components/ui/RadioList.svelte";
+  import { t } from "#lib/i18n/locale.svelte.js";
   import { theme } from "#lib/stores/theme.svelte.js";
 
-  const options = [
-    { label: "Светлая", value: "light" },
-    { label: "Тёмная", value: "dark" },
-    { label: "Системная", value: "system" },
-  ] as const;
+  const options = $derived([
+    { label: t("settings.theme.light"), value: "light" as const },
+    { label: t("settings.theme.dark"), value: "dark" as const },
+    { label: t("settings.theme.system"), value: "system" as const },
+  ]);
 </script>
 
-<div class="appearance">
-  {#each options as option (option.value)}
-    <button
-      class="theme-row"
-      onclick={() => theme.set(option.value)}
-      type="button"
-      use:ripple
-    >
-      <span class="dot" class:on={theme.preference === option.value}></span>
-      <span class="label">{option.label}</span>
-    </button>
-  {/each}
-</div>
-
-<style lang="scss">
-  .theme-row {
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    gap: 1.5rem;
-
-    width: 100%;
-    min-height: 3.25rem;
-    padding: 0 1.25rem;
-    border: 0;
-
-    font-size: 1rem;
-    text-align: start;
-    color: var(--color-text);
-    background-color: transparent;
-    transition: background-color 0.15s ease;
-
-    &:hover {
-      background-color: var(--color-chat-hover);
-    }
-  }
-
-  .dot {
-    flex-shrink: 0;
-
-    width: 1.25rem;
-    height: 1.25rem;
-    border: 2px solid var(--color-borders);
-    border-radius: 50%;
-
-    transition: border-color 0.15s ease;
-
-    &.on {
-      border-width: 0.4375rem;
-      border-color: var(--color-primary);
-    }
-  }
-
-  .label {
-    flex: 1;
-  }
-</style>
+<RadioList
+  onselect={(value) => theme.set(value)}
+  {options}
+  selected={theme.preference}
+/>

frontend/src/lib/components/settings/Language.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import RadioList from "#lib/components/ui/RadioList.svelte";
+  import { locale, t } from "#lib/i18n/locale.svelte.js";
+
+  const options = $derived([
+    { label: t("settings.language.system"), value: "system" as const },
+    { label: "Русский", value: "ru" as const },
+    { label: "English", value: "en" as const },
+  ]);
+</script>
+
+<RadioList
+  onselect={(value) => locale.set(value)}
+  {options}
+  selected={locale.preference}
+/>

frontend/src/lib/components/settings/Settings.svelte

@@ -1,23 +1,19 @@
 <script lang="ts">
   import About from "#lib/components/settings/About.svelte";
   import Appearance from "#lib/components/settings/Appearance.svelte";
+  import Language from "#lib/components/settings/Language.svelte";
   import MyAccount from "#lib/components/settings/MyAccount.svelte";
   import SettingsItem from "#lib/components/settings/SettingsItem.svelte";
   import Button from "#lib/components/ui/Button.svelte";
   import Icon from "#lib/components/ui/Icon.svelte";
+  import { t } from "#lib/i18n/locale.svelte.js";
   import { ui } from "#lib/stores/ui.svelte.js";
-
-  const features = [
-    { icon: "search", label: "Поиск" },
-    { icon: "folder", label: "Папки" },
-    { icon: "stats", label: "Presence и аналитика" },
-  ];
 </script>
 
 <div class="settings">
   <header class="settings-header">
     <Button
-      aria-label="Назад"
+      aria-label={t("common.back")}
       onclick={() => ui.closeSettings()}
       round
       smaller
@@ -25,61 +21,63 @@
     >
       <Icon name="arrow-left" />
     </Button>
-    <h2>Настройки</h2>
+    <h2>{t("settings.title")}</h2>
   </header>
 
   <div class="settings-body custom-scroll">
     <MyAccount />
 
     <div class="section">
-      <div class="section-title">Внешний вид</div>
+      <div class="section-title">{t("settings.appearance")}</div>
       <Appearance />
     </div>
 
+    <div class="section">
+      <div class="section-title">{t("settings.language")}</div>
+      <Language />
+    </div>
+
     <div class="section">
       <SettingsItem
         icon="settings"
-        label="Политика захвата"
+        label={t("settings.policy")}
         onclick={() => ui.openPanel("policy")}
       />
       <SettingsItem
         icon="cloud-download"
-        label="Бэкфилл и задачи"
+        label={t("settings.jobs")}
         onclick={() => ui.openPanel("jobs")}
       />
       <SettingsItem
         icon="data"
-        label="Хранилище"
+        label={t("settings.storage")}
         onclick={() => ui.openPanel("storage")}
       />
       <SettingsItem
         icon="play-story"
-        label="Сторис"
+        label={t("settings.stories")}
         onclick={() => ui.openPanel("stories-all")}
       />
       <SettingsItem
         icon="allow-share"
-        label="Файлы по ссылке"
+        label={t("settings.shares")}
         onclick={() => ui.openPanel("shares")}
       />
       <SettingsItem
         icon="bots"
-        label="Боты"
+        label={t("settings.bots")}
         onclick={() => ui.openPanel("bots")}
       />
       <SettingsItem
         icon="eye"
-        label="Отслеживания"
+        label={t("settings.watches")}
         onclick={() => ui.openPanel("watches")}
       />
       <SettingsItem
         icon="unmute"
-        label="Алерты"
+        label={t("settings.alerts")}
         onclick={() => ui.openPanel("alerts")}
       />
-      {#each features as feature (feature.label)}
-        <SettingsItem icon={feature.icon} label={feature.label} soon />
-      {/each}
     </div>
 
     <About />

frontend/src/lib/components/settings/SettingsItem.svelte

@@ -6,29 +6,19 @@
     icon: string;
     label: string;
     onclick?: () => void;
-    soon?: boolean;
     value?: string;
   }
 
-  let { icon, label, value, soon = false, onclick }: Props = $props();
+  let { icon, label, value, onclick }: Props = $props();
 </script>
 
-<button
-  class="settings-item"
-  disabled={soon}
-  {onclick}
-  type="button"
-  class:soon
-  use:ripple
->
+<button class="settings-item" {onclick} type="button" use:ripple>
   <Icon class="leading" name={icon} size="1.5rem" />
   <span class="label">{label}</span>
-  {#if soon}
-    <span class="soon-tag">скоро</span>
-  {:else if value}
+  {#if value}
     <span class="value">{value}</span>
   {/if}
-  {#if onclick && !soon}
+  {#if onclick}
     <Icon class="chevron" name="arrow-right" size="1rem" />
   {/if}
 </button>
@@ -53,13 +43,9 @@
     background-color: transparent;
     transition: background-color 0.15s ease;
 
-    &:hover:not(:disabled) {
+    &:hover {
       background-color: var(--color-chat-hover);
     }
-
-    &:disabled {
-      cursor: default;
-    }
   }
 
   :global(.settings-item .leading) {
@@ -78,11 +64,6 @@
     color: var(--color-text-secondary);
   }
 
-  .soon-tag {
-    font-size: 0.75rem;
-    color: var(--color-text-secondary);
-  }
-
   :global(.settings-item .chevron) {
     flex-shrink: 0;
     color: var(--color-icon-secondary);

frontend/src/lib/components/ui/RadioList.svelte

@@ -0,0 +1,90 @@
+<script generics="T extends string" lang="ts">
+  import { ripple } from "#lib/actions/ripple.js";
+
+  interface Option {
+    label: string;
+    value: T;
+  }
+
+  interface Props {
+    onselect: (value: T) => void;
+    options: Option[];
+    selected: T;
+  }
+
+  let { options, selected, onselect }: Props = $props();
+  const name = $props.id();
+</script>
+
+<div class="radio-list">
+  {#each options as option (option.value)}
+    <label class="radio-row" use:ripple>
+      <input
+        checked={selected === option.value}
+        class="input"
+        {name}
+        onchange={() => onselect(option.value)}
+        type="radio"
+        value={option.value}
+      >
+      <span class="dot" class:on={selected === option.value}></span>
+      <span class="label">{option.label}</span>
+    </label>
+  {/each}
+</div>
+
+<style lang="scss">
+  .radio-row {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+
+    width: 100%;
+    min-height: 3.25rem;
+    padding: 0 1.25rem;
+    border: 0;
+
+    font-size: 1rem;
+    text-align: start;
+    color: var(--color-text);
+    background-color: transparent;
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: var(--color-chat-hover);
+    }
+
+    &:has(.input:focus-visible) {
+      background-color: var(--color-chat-hover);
+    }
+  }
+
+  .input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .dot {
+    flex-shrink: 0;
+
+    width: 1.25rem;
+    height: 1.25rem;
+    border: 2px solid var(--color-borders);
+    border-radius: 50%;
+
+    transition: border-color 0.15s ease;
+
+    &.on {
+      border-width: 0.4375rem;
+      border-color: var(--color-primary);
+    }
+  }
+
+  .label {
+    flex: 1;
+  }
+</style>