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">{t("settings.about.version", { version: appVersion })}</div>
-  <div class="line">Лицензия GPL-3.0</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 = [
+  const options = $derived([
-    { label: "Светлая", value: "light" },
+    { label: t("settings.theme.light"), value: "light" as const },
-    { label: "Тёмная", value: "dark" },
+    { label: t("settings.theme.dark"), value: "dark" as const },
-    { label: "Системная", value: "system" },
+    { label: t("settings.theme.system"), value: "system" as const },
-  ] as const;
+  ]);
 </script>
 
-<div class="appearance">
+<RadioList
-  {#each options as option (option.value)}
+  onselect={(value) => theme.set(value)}
-    <button
+  {options}
-      class="theme-row"
+  selected={theme.preference}
-      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>

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
+<button class="settings-item" {onclick} type="button" use:ripple>
-  class="settings-item"
-  disabled={soon}
-  {onclick}
-  type="button"
-  class:soon
-  use:ripple
->
   <Icon class="leading" name={icon} size="1.5rem" />
   <span class="label">{label}</span>
-  {#if soon}
+  {#if value}
-    <span class="soon-tag">скоро</span>
-  {:else 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>

frontend/src/lib/format/datetime.ts

@@ -1,29 +1,39 @@
-const time = new Intl.DateTimeFormat(undefined, {
+import { locale } from "#lib/i18n/locale.svelte.js";
-  hour: "2-digit",
+
-  minute: "2-digit",
+const OPTIONS = {
-});
+  day: { day: "numeric", month: "short" },
-const day = new Intl.DateTimeFormat(undefined, {
+  full: {
-  day: "numeric",
-  month: "short",
-});
-const full = new Intl.DateTimeFormat(undefined, {
     day: "numeric",
     hour: "2-digit",
     minute: "2-digit",
     month: "short",
     year: "numeric",
-});
+  },
+  time: { hour: "2-digit", minute: "2-digit" },
+} satisfies Record<string, Intl.DateTimeFormatOptions>;
+
+const formatters = new Map<string, Intl.DateTimeFormat>();
+
+function format(kind: keyof typeof OPTIONS, date: Date): string {
+  const key = `${locale.tag}:${kind}`;
+  let formatter = formatters.get(key);
+  if (!formatter) {
+    formatter = new Intl.DateTimeFormat(locale.tag, OPTIONS[kind]);
+    formatters.set(key, formatter);
+  }
+  return formatter.format(date);
+}
 
 export function formatTime(iso: string): string {
-  return time.format(new Date(iso));
+  return format("time", new Date(iso));
 }
 
 export function formatDay(iso: string): string {
-  return day.format(new Date(iso));
+  return format("day", new Date(iso));
 }
 
 export function formatFull(iso: string): string {
-  return full.format(new Date(iso));
+  return format("full", new Date(iso));
 }
 
 export function formatListDate(iso: string | null): string {
@@ -33,7 +43,7 @@ export function formatListDate(iso: string | null): string {
   const date = new Date(iso);
   const now = new Date();
   if (date.toDateString() === now.toDateString()) {
-    return time.format(date);
+    return format("time", date);
   }
-  return day.format(date);
+  return format("day", date);
 }

frontend/src/lib/i18n/locale.svelte.ts

@@ -0,0 +1,80 @@
+import { type MessageKey, messages } from "#lib/i18n/messages.js";
+import type { Locale, Text } from "#lib/i18n/types.js";
+import { browser } from "$app/env";
+
+type Preference = Locale | "system";
+type Params = Record<string, number | string>;
+
+const STORAGE_KEY = "bg.locale";
+const PARAM = /\{(\w+)\}/g;
+const TAGS: Record<Locale, string> = { en: "en-GB", ru: "ru-RU" };
+const plurals: Record<Locale, Intl.PluralRules> = {
+  en: new Intl.PluralRules(TAGS.en),
+  ru: new Intl.PluralRules(TAGS.ru),
+};
+
+function readPreference(): Preference {
+  if (!browser) {
+    return "system";
+  }
+  const stored = localStorage.getItem(STORAGE_KEY);
+  return stored === "en" || stored === "ru" ? stored : "system";
+}
+
+function systemLocale(): Locale {
+  if (!browser) {
+    return "ru";
+  }
+  for (const language of navigator.languages) {
+    const base = language.toLowerCase().slice(0, 2);
+    if (base === "ru" || base === "en") {
+      return base;
+    }
+  }
+  return "en";
+}
+
+function createLocale() {
+  let preference = $state<Preference>(readPreference());
+  const current = $derived<Locale>(
+    preference === "system" ? systemLocale() : preference
+  );
+
+  return {
+    get current() {
+      return current;
+    },
+    get preference() {
+      return preference;
+    },
+    set(value: Preference) {
+      preference = value;
+      if (browser) {
+        localStorage.setItem(STORAGE_KEY, value);
+      }
+    },
+    get tag() {
+      return TAGS[current];
+    },
+  };
+}
+
+export const locale = createLocale();
+
+function pick(text: Text, count: number | undefined): string {
+  if (typeof text === "string") {
+    return text;
+  }
+  return text[plurals[locale.current].select(count ?? 0)] ?? text.other;
+}
+
+export function t(key: MessageKey, params?: Params): string {
+  const count = typeof params?.count === "number" ? params.count : undefined;
+  const text = pick(messages[key][locale.current], count);
+  if (!params) {
+    return text;
+  }
+  return text.replace(PARAM, (match, name: string) =>
+    name in params ? String(params[name]) : match
+  );
+}

frontend/src/lib/i18n/messages.ts

@@ -0,0 +1,9 @@
+import { common } from "#lib/i18n/messages/common.js";
+import { settings } from "#lib/i18n/messages/settings.js";
+
+export const messages = {
+  ...common,
+  ...settings,
+};
+
+export type MessageKey = keyof typeof messages;

frontend/src/lib/i18n/messages/common.ts

@@ -0,0 +1,9 @@
+import type { Messages } from "#lib/i18n/types.js";
+
+export const common = {
+  "common.back": { en: "Back", ru: "Назад" },
+  "common.cancel": { en: "Cancel", ru: "Отмена" },
+  "common.close": { en: "Close", ru: "Закрыть" },
+  "common.delete": { en: "Delete", ru: "Удалить" },
+  "common.save": { en: "Save", ru: "Сохранить" },
+} satisfies Messages;

frontend/src/lib/i18n/messages/settings.ts

@@ -0,0 +1,25 @@
+import type { Messages } from "#lib/i18n/types.js";
+
+export const settings = {
+  "settings.about.license": { en: "GPL-3.0 license", ru: "Лицензия GPL-3.0" },
+  "settings.about.port": {
+    en: "UI ported from Telegram A",
+    ru: "UI портирован из Telegram A",
+  },
+  "settings.about.version": { en: "Version {version}", ru: "Версия {version}" },
+  "settings.alerts": { en: "Alerts", ru: "Оповещения" },
+  "settings.appearance": { en: "Appearance", ru: "Внешний вид" },
+  "settings.bots": { en: "Bots", ru: "Боты" },
+  "settings.jobs": { en: "Backfill and jobs", ru: "Бэкфилл и задачи" },
+  "settings.language": { en: "Language", ru: "Язык" },
+  "settings.language.system": { en: "System", ru: "Как в системе" },
+  "settings.policy": { en: "Capture policy", ru: "Политика захвата" },
+  "settings.shares": { en: "Files by link", ru: "Файлы по ссылке" },
+  "settings.storage": { en: "Storage", ru: "Хранилище" },
+  "settings.stories": { en: "Stories", ru: "Сторис" },
+  "settings.theme.dark": { en: "Dark", ru: "Тёмная" },
+  "settings.theme.light": { en: "Light", ru: "Светлая" },
+  "settings.theme.system": { en: "System", ru: "Системная" },
+  "settings.title": { en: "Settings", ru: "Настройки" },
+  "settings.watches": { en: "Watches", ru: "Наблюдения" },
+} satisfies Messages;

frontend/src/lib/i18n/types.ts

@@ -0,0 +1,9 @@
+export type Locale = "en" | "ru";
+
+export type Plural = Partial<Record<Intl.LDMLPluralRule, string>> & {
+  other: string;
+};
+
+export type Text = string | Plural;
+
+export type Messages = Record<string, Record<Locale, Text>>;

frontend/src/routes/+layout.svelte

@@ -4,6 +4,7 @@
   import "#lib/styles/icons.css";
   import "#lib/styles/global.scss";
   import ToastHost from "#lib/components/ui/ToastHost.svelte";
+  import { locale } from "#lib/i18n/locale.svelte.js";
   import { auth } from "#lib/stores/auth.svelte.js";
   import { theme } from "#lib/stores/theme.svelte.js";
   import { goto } from "$app/navigation";
@@ -16,6 +17,10 @@
 
   $effect(() => theme.watchSystem());
 
+  $effect(() => {
+    document.documentElement.lang = locale.current;
+  });
+
   $effect(() => {
     const next = theme.resolved;
     const root = document.documentElement;