Rubicon/tutu
1
0
Fork 0
Code Issues 18 Pull requests 1 Projects 1 Activity Actions

first prototype of i18n system

Browse source
This commit is contained in:
thislight 2024-09-26 17:23:40 +08:00
parent d3a7602fb5
commit b4fa751345
No known key found for this signature in database
GPG key ID: A50F9451AC56A63E
9 changed files with 348 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

119
src/settings/Settings.tsx
View file

@ -7,32 +7,50 @@ import {
List,
ListItem,
ListItemButton,
ListItemIcon,
ListItemSecondaryAction,
ListItemText,
ListSubheader,
NativeSelect,
Switch,
Toolbar,
} from "@suid/material";
import {
Close as CloseIcon,
Public as PublicIcon,
Refresh as RefreshIcon,
Translate as TranslateIcon,
} from "@suid/icons-material";
import { useNavigate } from "@solidjs/router";
import { Title } from "../material/typography.jsx";
import { css } from "solid-styled";
import { useSignedInProfiles } from "../masto/acct.js";
import { signOut, type Account } from "../accounts/stores.js";
import { intlFormat } from "date-fns";
import { format, intlFormat } from "date-fns";
import { useStore } from "@nanostores/solid";
import { $settings } from "./stores.js";
import { useRegisterSW } from "virtual:pwa-register/solid";
import {
autoMatchLangTag,
autoMatchRegion,
createStringResource,
SUPPORTED_LANGS,
SUPPORTED_REGIONS,
useDateFnLocale,
} from "../platform/i18n.jsx";
import { resolveTemplate, translator } from "@solid-primitives/i18n";
const Settings: ParentComponent = () => {
const [strings] = createStringResource(
(code) => import(`./i18n/${code}.json`),
);
const t = translator(strings, resolveTemplate);
const navigate = useNavigate();
const settings$ = useStore($settings);
const {
needRefresh: [needRefresh],
} = useRegisterSW();
const dateFnLocale = useDateFnLocale();
const [profiles] = useSignedInProfiles();
@ -60,7 +78,7 @@ const Settings: ParentComponent = () => {
<IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
<CloseIcon />
</IconButton>
<Title>Settings</Title>
<Title>{t("Settings")}</Title>
</Toolbar>
</AppBar>
}
@ -68,16 +86,16 @@ const Settings: ParentComponent = () => {
<List class="setting-list" use:solid-styled>
<li>
<ul>
<ListSubheader>Accounts</ListSubheader>
<ListSubheader>{t("Accounts")}</ListSubheader>
<ListItem>
<ListItemText>All Notifications</ListItemText>
<ListItemText>{t("All Notifications")}</ListItemText>
<ListItemSecondaryAction>
<Switch value={false} />
</ListItemSecondaryAction>
</ListItem>
<Divider />
<ListItem>
<ListItemText>Sign in...</ListItemText>
<ListItemText>{t("Sign in...")}</ListItemText>
</ListItem>
<Divider />
</ul>
@ -101,7 +119,7 @@ const Settings: ParentComponent = () => {
</For>
</li>
<li>
<ListSubheader>Reading</ListSubheader>
<ListSubheader>{t("Reading")}</ListSubheader>
<ListItem>
<ListItemText secondary="Regular">Fonts</ListItemText>
</ListItem>
@ -114,8 +132,8 @@ const Settings: ParentComponent = () => {
)
}
>
<ListItemText secondary="Tutu will download toots before you scroll to the position.">
Prefetch Toots
<ListItemText secondary={t("Prefetch Toots.2nd")}>
{t("Prefetch Toots")}
</ListItemText>
<ListItemSecondaryAction>
<Switch checked={!settings$().prefetchTootsDisabled} />
@ -124,24 +142,93 @@ const Settings: ParentComponent = () => {
<Divider />
</li>
<li>
<ListSubheader>This Application</ListSubheader>
<ListSubheader>{t("This Application")}</ListSubheader>
<ListItem>
<ListItemText secondary="Comformtable tooting experience.">
About Tutu
<ListItemIcon>
<TranslateIcon />
</ListItemIcon>
<ListItemText>{t("Language")}</ListItemText>
<ListItemSecondaryAction>
<NativeSelect
value={settings$().language || "xauto"}
onChange={(e) => {
$settings.setKey(
"language",
e.currentTarget.value === "xauto"
? undefined
: e.currentTarget.value,
);
}}
>
<option value={"xauto"}>
{t("lang.auto", {
detected: t("lang." + autoMatchLangTag()),
})}
</option>
<For each={SUPPORTED_LANGS}>
{(code) => <option value={code}>{t("lang." + code)}</option>}
</For>
</NativeSelect>
</ListItemSecondaryAction>
</ListItem>
<Divider />
<ListItem>
<ListItemIcon>
<PublicIcon />
</ListItemIcon>
<ListItemText>{t("Region")}</ListItemText>
<ListItemSecondaryAction>
<NativeSelect
value={settings$().region}
onChange={(e) => {
$settings.setKey(
"region",
e.currentTarget.value === "xauto"
? undefined
: e.currentTarget.value,
);
}}
>
<option value={"xauto"}>
{t("region.auto", {
detected: t("region." + autoMatchRegion()),
})}
</option>
<For each={SUPPORTED_REGIONS}>
{(code) => (
<option value={code}>{t("region." + code)}</option>
)}
</For>
</NativeSelect>
</ListItemSecondaryAction>
</ListItem>
<Divider />
<ListItem>
<ListItemText secondary={t("About Tutu.2nd")}>
{t("About Tutu")}
</ListItemText>
</ListItem>
<Divider />
<ListItem>
<ListItemText
secondary={`Using v${import.meta.env.PACKAGE_VERSION} (built on ${intlFormat(import.meta.env.BUILT_AT)}, ${import.meta.env.MODE})`}
secondary={t("version", {
packageVersion: import.meta.env.PACKAGE_VERSION,
builtAt: format(
import.meta.env.BUILT_AT,
t("datefmt") || "yyyy/MM/dd",
{ locale: dateFnLocale() },
),
buildMode: import.meta.env.MODE,
})}
>
{needRefresh()
? "An update is ready, restart the Tutu to apply"
: "No updates"}
{needRefresh() ? t("updates.ready") : t("updates.no")}
</ListItemText>
<Show when={needRefresh()}>
<ListItemSecondaryAction>
<IconButton aria-label="Restart Now" onClick={() => window.location.reload()}>
<IconButton
aria-label="Restart Now"
onClick={() => window.location.reload()}
>
<RefreshIcon />
</IconButton>
</ListItemSecondaryAction>