feat(frontend): russian and english interface with a language choice in settings, soon stubs removed
This commit is contained in:
hh committed
1 parent
3d2f670e87
commit
3460246749
13 files changed
+308
-127
No files matched your search
@@ -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>
|
||||
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
@@ -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}
|
||||
/>
|
||||
@@ -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 />
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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>
|
||||
@@ -1,29 +1,39 @@
|
||||
const time = new Intl.DateTimeFormat(undefined, {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
const day = new Intl.DateTimeFormat(undefined, {
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
});
|
||||
const full = new Intl.DateTimeFormat(undefined, {
|
||||
import { locale } from "#lib/i18n/locale.svelte.js";
|
||||
|
||||
const OPTIONS = {
|
||||
day: { day: "numeric", month: "short" },
|
||||
full: {
|
||||
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);
|
||||
}
|
||||
@@ -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
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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>>;
|
||||
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user