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

Settings: added lang and region picker dialog

Browse source
This commit is contained in:
thislight 2024-09-27 14:15:34 +08:00
parent 4ae3def190
commit b09effa4dc
10 changed files with 316 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

1
package.json
View file

@ -42,6 +42,7 @@
"date-fns": "^3.6.0",
"fast-average-color": "^9.4.0",
"hammerjs": "^2.0.8",
"iso-639-1": "^3.1.3",
"masto": "^6.8.0",
"nanostores": "^0.11.3",
"solid-js": "^1.8.22",

11
src/masto/acct.ts
View file

@ -12,11 +12,16 @@ export function useSignedInProfiles() {
});
return [
() => {
try {
const value = accessor();
if (!value) {
return sessions().map((x) => ({ ...x, inf: x.account.inf }));
}
if (value) {
return value;
}
} catch (reason) {
console.error("useSignedInProfiles: update acct info failed", reason);
}
return sessions().map((x) => ({ ...x, inf: x.account.inf }));
},
tools,
] as const;

4
src/platform/i18n.tsx
View file

@ -20,9 +20,9 @@ async function synchronised(
await navigator.locks.request(name, callback);
}
export const SUPPORTED_LANGS = ["en", "zh-Hans"];
export const SUPPORTED_LANGS = ["en", "zh-Hans"] as const;
export const SUPPORTED_REGIONS = ["en_US", "en_GB", "zh_CN"];
export const SUPPORTED_REGIONS = ["en_US", "en_GB", "zh_CN"] as const;
const DEFAULT_LANG = "en";

117
src/settings/ChooseLang.tsx Normal file
View file

@ -0,0 +1,117 @@
import { createMemo, For, type Component, type JSX } from "solid-js";
import Scaffold from "../material/Scaffold";
import {
AppBar,
Checkbox,
IconButton,
List,
ListItem,
ListItemButton,
ListItemSecondaryAction,
ListItemText,
ListSubheader,
Radio,
Switch,
Toolbar,
} from "@suid/material";
import { Close as CloseIcon } from "@suid/icons-material";
import iso639_1 from "iso-639-1";
import {
autoMatchLangTag,
createTranslator,
SUPPORTED_LANGS,
} from "../platform/i18n";
import { Title } from "../material/typography";
import type { Template } from "@solid-primitives/i18n";
type ChooseLangProps = {
code?: string;
onCodeChange: (ncode?: string) => void;
onClose?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
};
const ChooseLang: Component<ChooseLangProps> = (props) => {
const [t] = createTranslator(
() => import("./i18n/lang-names.json"),
(code) =>
import(`./i18n/${code}.json`) as Promise<{
default: Record<string, string | undefined> & {
["lang.auto"]: Template<{ detected: string }>;
};
}>,
);
const unsupportedLangCodes = createMemo(() => {
return iso639_1.getAllCodes().filter((x) => !["zh", "en"].includes(x));
});
const matchedLangCode = createMemo(() => autoMatchLangTag());
return (
<Scaffold
topbar={
<AppBar position="static">
<Toolbar
variant="dense"
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
>
<IconButton color="inherit" onClick={props.onClose} disableRipple>
<CloseIcon />
</IconButton>
<Title>{t("Choose Language")}</Title>
</Toolbar>
</AppBar>
}
>
<List
sx={{
paddingBottom: "var(--safe-area-inset-bottom, 0)",
}}
>
<ListItemButton
onClick={() => {
props.onCodeChange(props.code ? undefined : matchedLangCode());
}}
>
<ListItemText>
{t("lang.auto", {
detected: t(`lang.${matchedLangCode()}`) ?? matchedLangCode(),
})}
</ListItemText>
<ListItemSecondaryAction>
<Switch checked={typeof props.code === "undefined"} />
</ListItemSecondaryAction>
</ListItemButton>
<List subheader={<ListSubheader>{t("Supported")}</ListSubheader>}>
<For each={SUPPORTED_LANGS}>
{(code) => (
<ListItemButton
disabled={typeof props.code === "undefined"}
onClick={[props.onCodeChange, code]}
>
<ListItemText>{t(`lang.${code}`)}</ListItemText>
<ListItemSecondaryAction>
<Radio
checked={props.code === code || (props.code === undefined && matchedLangCode() == code)}
/>
</ListItemSecondaryAction>
</ListItemButton>
)}
</For>
</List>
<List subheader={<ListSubheader>{t("Unsupported")}</ListSubheader>}>
<For each={unsupportedLangCodes()}>
{(code) => (
<ListItem>
<ListItemText>{iso639_1.getNativeName(code)}</ListItemText>
</ListItem>
)}
</For>
</List>
</List>
</Scaffold>
);
};
export default ChooseLang;

110
src/settings/ChooseRegion.tsx Normal file
View file

@ -0,0 +1,110 @@
import { createMemo, For, type Component, type JSX } from "solid-js";
import Scaffold from "../material/Scaffold";
import {
AppBar,
Checkbox,
IconButton,
List,
ListItem,
ListItemButton,
ListItemSecondaryAction,
ListItemText,
ListSubheader,
Radio,
Switch,
Toolbar,
} from "@suid/material";
import { Close as CloseIcon } from "@suid/icons-material";
import iso639_1 from "iso-639-1";
import {
autoMatchLangTag,
autoMatchRegion,
createTranslator,
SUPPORTED_LANGS,
SUPPORTED_REGIONS,
} from "../platform/i18n";
import { Title } from "../material/typography";
import type { Template } from "@solid-primitives/i18n";
type ChooseRegionProps = {
code?: string;
onCodeChange: (ncode?: string) => void;
onClose?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
};
const ChooseRegion: Component<ChooseRegionProps> = (props) => {
const [t] = createTranslator(
() => import("./i18n/lang-names.json"),
(code) =>
import(`./i18n/${code}.json`) as Promise<{
default: Record<string, string | undefined> & {
["lang.auto"]: Template<{ detected: string }>;
};
}>,
);
const unsupportedLangCodes = createMemo(() => {
return iso639_1.getAllCodes().filter((x) => !["zh", "en"].includes(x));
});
const matchedRegionCode = createMemo(() => autoMatchRegion());
return (
<Scaffold
topbar={
<AppBar position="static">
<Toolbar
variant="dense"
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
>
<IconButton color="inherit" onClick={props.onClose} disableRipple>
<CloseIcon />
</IconButton>
<Title>{t("Choose Language")}</Title>
</Toolbar>
</AppBar>
}
>
<List
sx={{
paddingBottom: "var(--safe-area-inset-bottom, 0)",
}}
>
<ListItemButton
onClick={() => {
props.onCodeChange(props.code ? undefined : matchedRegionCode());
}}
>
<ListItemText>
{t("region.auto", {
detected: t(`region.${matchedRegionCode()}`) ?? matchedRegionCode(),
})}
</ListItemText>
<ListItemSecondaryAction>
<Switch checked={typeof props.code === "undefined"} />
</ListItemSecondaryAction>
</ListItemButton>
<List subheader={<ListSubheader>{t("Supported")}</ListSubheader>}>
<For each={SUPPORTED_REGIONS}>
{(code) => (
<ListItemButton
disabled={typeof props.code === "undefined"}
onClick={[props.onCodeChange, code]}
>
<ListItemText>{t(`region.${code}`)}</ListItemText>
<ListItemSecondaryAction>
<Radio
checked={props.code === code || (props.code === undefined && matchedRegionCode() == code)}
/>
</ListItemSecondaryAction>
</ListItemButton>
)}
</For>
</List>
</List>
</Scaffold>
);
};
export default ChooseRegion;

103
src/settings/Settings.tsx
View file

@ -1,4 +1,4 @@
import { For, Show, type ParentComponent } from "solid-js";
import { createSignal, For, Show, type ParentComponent } from "solid-js";
import Scaffold from "../material/Scaffold.js";
import {
AppBar,
@ -40,10 +40,13 @@ import {
useDateFnLocale,
} from "../platform/i18n.jsx";
import { type Template } from "@solid-primitives/i18n";
import BottomSheet from "../material/BottomSheet.jsx";
import ChooseLang from "./ChooseLang.jsx";
import ChooseRegion from "./ChooseRegion.jsx";
type Strings = {
["lang.auto"]: Template<{detected: string}>
} & Record<string, string | undefined>
["lang.auto"]: Template<{ detected: string }>;
} & Record<string, string | undefined>;
const Settings: ParentComponent = () => {
const [t] = createTranslator(
@ -51,7 +54,7 @@ const Settings: ParentComponent = () => {
import(`./i18n/${code}.json`) as Promise<{
default: Strings;
}>,
() => import(`./i18n/lang-names.json`)
() => import(`./i18n/lang-names.json`),
);
const navigate = useNavigate();
const settings$ = useStore($settings);
@ -59,6 +62,8 @@ const Settings: ParentComponent = () => {
needRefresh: [needRefresh],
} = useRegisterSW();
const dateFnLocale = useDateFnLocale();
const [langPickerOpen, setLangPickerOpen] = createSignal(false);
const [regionPickerOpen, setRegionPickerOpen] = createSignal(false);
const [profiles] = useSignedInProfiles();
@ -150,65 +155,55 @@ const Settings: ParentComponent = () => {
</li>
<li>
<ListSubheader>{t("This Application")}</ListSubheader>
<ListItem>
<ListItemButton onClick={[setLangPickerOpen, true]}>
<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,
);
}}
<ListItemText
secondary={
settings$().language === undefined
? t("lang.auto", {
detected:
t("lang." + autoMatchLangTag()) ?? autoMatchLangTag(),
})
: t("lang." + settings$().language)
}
>
<option value={"xauto"}>
{t("lang.auto", {
detected: t("lang." + autoMatchLangTag()) ?? autoMatchLangTag(),
})}
</option>
<For each={SUPPORTED_LANGS}>
{(code) => <option value={code}>{t("lang." + code)}</option>}
</For>
</NativeSelect>
</ListItemSecondaryAction>
</ListItem>
{t("Language")}
</ListItemText>
</ListItemButton>
<BottomSheet open={langPickerOpen()}>
<ChooseLang
code={settings$().language}
onCodeChange={(nval) => $settings.setKey("language", nval)}
onClose={[setLangPickerOpen, false]}
/>
</BottomSheet>
<Divider />
<ListItem>
<ListItemButton onClick={[setRegionPickerOpen, true]}>
<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,
);
}}
<ListItemText
secondary={
settings$().region === undefined
? t("region.auto", {
detected:
t("region." + autoMatchRegion()) ?? autoMatchRegion(),
})
: t("region." + settings$().region)
}
>
<option value={"xauto"}>
{t("region.auto", {
detected: t("region." + autoMatchRegion()) ?? autoMatchRegion(),
})}
</option>
<For each={SUPPORTED_REGIONS}>
{(code) => (
<option value={code}>{t("region." + code)}</option>
)}
</For>
</NativeSelect>
</ListItemSecondaryAction>
</ListItem>
{t("Region")}
</ListItemText>
</ListItemButton>
<BottomSheet open={regionPickerOpen()}>
<ChooseRegion
code={settings$().region}
onCodeChange={(nval) => $settings.setKey("region", nval)}
onClose={[setRegionPickerOpen, false]}
/>
</BottomSheet>
<Divider />
<ListItem>
<ListItemText secondary={t("About Tutu.2nd")}>

11
src/settings/i18n/en.json
View file

@ -14,12 +14,17 @@
"version": "Using v{{packageVersion}} (built on {{builtAt}}, {{buildMode}})",
"Language": "Language",
"Region": "Region",
"lang.auto": "Auto({{detected}})",
"region.auto": "Auto({{detected}})",
"lang.auto": "(Auto) {{detected}}",
"region.auto": "(Auto) {{detected}}",
"region.en_GB": "Great Britan (English)",
"region.en_US": "United States (English)",
"region.zh_CN": "China Mainland (Chinese)",
"datefmt": "yyyy/MM/dd",
"Sign out": "Sign out",
"Notifications": "Notifications"
"Notifications": "Notifications",
"Choose Language": "Choose Language",
"Supported": "Supported",
"Unsupported": "Unsupported",
"Choose Region": "Choose Region"
}

13
src/settings/i18n/zh-Hans.json
View file

@ -1,6 +1,6 @@
{
"Settings": "设置",
"Accounts": "所有账号",
"Accounts": "所有账户",
"All Notifications": "所有通知",
"Sign in...": "登录新账户...",
"Reading": "阅读",
@ -14,12 +14,17 @@
"version": "正在使用 v{{packageVersion}} ({{builtAt}}构建, {{buildMode}})",
"Language": "语言",
"Region": "区域",
"lang.auto": "自动（{{detected}}）",
"region.auto": "自动（{{detected}}）",
"lang.auto": "（自动）{{detected}}",
"region.auto": "（自动）{{detected}}",
"region.en_GB": "英国和苏格兰（英语）",
"region.en_US": "美国（英语）",
"region.zh_CN": "中国大陆（中文）",
"datefmt": "yyyy年MM月dd日",
"Sign out": "登出此账户",
"Notifications": "通知"
"Notifications": "通知",
"Choose Language": "选择语言",
"Supported": "已支持",
"Unsupported": "尚未支持",
"Choose Region": "选择区域"
}

9
src/timelines/Home.tsx
View file

@ -10,7 +10,8 @@ import {
children,
Suspense,
Match,
Switch as JsSwitch
Switch as JsSwitch,
ErrorBoundary
} from "solid-js";
import { useDocumentTitle } from "../utils";
import { type mastodon } from "masto";
@ -125,7 +126,9 @@ const TimelinePanel: Component<{
};
return (
<>
<ErrorBoundary fallback={(err, reset) => {
return <p>Oops: {String(err)}</p>
}}>
<PullDownToRefresh
linkedElement={scrollLinked()}
loading={snapshot.loading}
@ -202,7 +205,7 @@ const TimelinePanel: Component<{
</Match>
</JsSwitch>
</div>
</>
</ErrorBoundary>
);
};