first prototype of StackedRouter
This commit is contained in:
		
							parent
							
								
									607fa64c05
								
							
						
					
					
						commit
						0710aaf4f3
					
				
					 21 changed files with 442 additions and 109 deletions
				
			
		| 
						 | 
				
			
			@ -24,10 +24,10 @@ import { Title } from "../material/typography";
 | 
			
		|||
import type { Template } from "@solid-primitives/i18n";
 | 
			
		||||
import { useStore } from "@nanostores/solid";
 | 
			
		||||
import { $settings } from "./stores";
 | 
			
		||||
import { useNavigate } from "@solidjs/router";
 | 
			
		||||
import { useNavigator } from "../platform/StackedRouter";
 | 
			
		||||
 | 
			
		||||
const ChooseLang: Component = () => {
 | 
			
		||||
  const navigate = useNavigate()
 | 
			
		||||
  const { pop } = useNavigator();
 | 
			
		||||
  const [t] = createTranslator(
 | 
			
		||||
    () => import("./i18n/lang-names.json"),
 | 
			
		||||
    (code) =>
 | 
			
		||||
| 
						 | 
				
			
			@ -37,9 +37,9 @@ const ChooseLang: Component = () => {
 | 
			
		|||
        };
 | 
			
		||||
      }>,
 | 
			
		||||
  );
 | 
			
		||||
  const settings = useStore($settings)
 | 
			
		||||
  const settings = useStore($settings);
 | 
			
		||||
 | 
			
		||||
  const code = () => settings().language
 | 
			
		||||
  const code = () => settings().language;
 | 
			
		||||
 | 
			
		||||
  const unsupportedLangCodes = createMemo(() => {
 | 
			
		||||
    return iso639_1.getAllCodes().filter((x) => !["zh", "en"].includes(x));
 | 
			
		||||
| 
						 | 
				
			
			@ -48,8 +48,8 @@ const ChooseLang: Component = () => {
 | 
			
		|||
  const matchedLangCode = createMemo(() => autoMatchLangTag());
 | 
			
		||||
 | 
			
		||||
  const onCodeChange = (code?: string) => {
 | 
			
		||||
    $settings.setKey("language", code)
 | 
			
		||||
  }
 | 
			
		||||
    $settings.setKey("language", code);
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <Scaffold
 | 
			
		||||
| 
						 | 
				
			
			@ -59,7 +59,7 @@ const ChooseLang: Component = () => {
 | 
			
		|||
            variant="dense"
 | 
			
		||||
            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
 | 
			
		||||
          >
 | 
			
		||||
            <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
 | 
			
		||||
            <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
 | 
			
		||||
              <ArrowBack />
 | 
			
		||||
            </IconButton>
 | 
			
		||||
            <Title>{t("Choose Language")}</Title>
 | 
			
		||||
| 
						 | 
				
			
			@ -96,7 +96,10 @@ const ChooseLang: Component = () => {
 | 
			
		|||
                <ListItemText>{t(`lang.${c}`)}</ListItemText>
 | 
			
		||||
                <ListItemSecondaryAction>
 | 
			
		||||
                  <Radio
 | 
			
		||||
                    checked={code() === c || (code() === undefined && matchedLangCode() == c)}
 | 
			
		||||
                    checked={
 | 
			
		||||
                      code() === c ||
 | 
			
		||||
                      (code() === undefined && matchedLangCode() == c)
 | 
			
		||||
                    }
 | 
			
		||||
                  />
 | 
			
		||||
                </ListItemSecondaryAction>
 | 
			
		||||
              </ListItemButton>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -13,14 +13,14 @@ import {
 | 
			
		|||
  Toolbar,
 | 
			
		||||
} from "@suid/material";
 | 
			
		||||
import { Title } from "../material/typography";
 | 
			
		||||
import { useNavigate } from "@solidjs/router";
 | 
			
		||||
import { ArrowBack } from "@suid/icons-material";
 | 
			
		||||
import { createTranslator } from "../platform/i18n";
 | 
			
		||||
import { useStore } from "@nanostores/solid";
 | 
			
		||||
import { $settings } from "./stores";
 | 
			
		||||
import { useNavigator } from "../platform/StackedRouter";
 | 
			
		||||
 | 
			
		||||
const Motions: Component = () => {
 | 
			
		||||
  const navigate = useNavigate();
 | 
			
		||||
  const {pop} = useNavigator();
 | 
			
		||||
  const [t] = createTranslator(
 | 
			
		||||
    (code) =>
 | 
			
		||||
      import(`./i18n/${code}.json`) as Promise<{
 | 
			
		||||
| 
						 | 
				
			
			@ -36,7 +36,7 @@ const Motions: Component = () => {
 | 
			
		|||
            variant="dense"
 | 
			
		||||
            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
 | 
			
		||||
          >
 | 
			
		||||
            <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
 | 
			
		||||
            <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
 | 
			
		||||
              <ArrowBack />
 | 
			
		||||
            </IconButton>
 | 
			
		||||
            <Title>{t("motions")}</Title>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -20,12 +20,12 @@ import {
 | 
			
		|||
} from "../platform/i18n";
 | 
			
		||||
import { Title } from "../material/typography";
 | 
			
		||||
import type { Template } from "@solid-primitives/i18n";
 | 
			
		||||
import { useNavigate } from "@solidjs/router";
 | 
			
		||||
import { $settings } from "./stores";
 | 
			
		||||
import { useStore } from "@nanostores/solid";
 | 
			
		||||
import { useNavigator } from "../platform/StackedRouter";
 | 
			
		||||
 | 
			
		||||
const ChooseRegion: Component = () => {
 | 
			
		||||
  const navigate = useNavigate();
 | 
			
		||||
  const {pop} = useNavigator();
 | 
			
		||||
  const [t] = createTranslator(
 | 
			
		||||
    () => import("./i18n/lang-names.json"),
 | 
			
		||||
    (code) =>
 | 
			
		||||
| 
						 | 
				
			
			@ -54,7 +54,7 @@ const ChooseRegion: Component = () => {
 | 
			
		|||
            variant="dense"
 | 
			
		||||
            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
 | 
			
		||||
          >
 | 
			
		||||
            <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
 | 
			
		||||
            <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
 | 
			
		||||
              <ArrowBack />
 | 
			
		||||
            </IconButton>
 | 
			
		||||
            <Title>{t("Choose Region")}</Title>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -30,7 +30,7 @@ import {
 | 
			
		|||
  Refresh as RefreshIcon,
 | 
			
		||||
  Translate as TranslateIcon,
 | 
			
		||||
} from "@suid/icons-material";
 | 
			
		||||
import { A, useNavigate } from "@solidjs/router";
 | 
			
		||||
import A from "../platform/A.js";
 | 
			
		||||
import { Title } from "../material/typography.jsx";
 | 
			
		||||
import { css } from "solid-styled";
 | 
			
		||||
import { signOut, type Account } from "../accounts/stores.js";
 | 
			
		||||
| 
						 | 
				
			
			@ -47,6 +47,7 @@ import { type Template } from "@solid-primitives/i18n";
 | 
			
		|||
import BottomSheet from "../material/BottomSheet.jsx";
 | 
			
		||||
import { useServiceWorker } from "../platform/host.js";
 | 
			
		||||
import { useSessions } from "../masto/clients.js";
 | 
			
		||||
import { useNavigator } from "../platform/StackedRouter.jsx";
 | 
			
		||||
 | 
			
		||||
type Inset = {
 | 
			
		||||
  top?: number;
 | 
			
		||||
| 
						 | 
				
			
			@ -170,7 +171,7 @@ const Settings: ParentComponent = (props) => {
 | 
			
		|||
      }>,
 | 
			
		||||
    () => import(`./i18n/lang-names.json`),
 | 
			
		||||
  );
 | 
			
		||||
  const navigate = useNavigate();
 | 
			
		||||
  const {pop} = useNavigator();
 | 
			
		||||
  const settings$ = useStore($settings);
 | 
			
		||||
  const { needRefresh, offlineReady } = useServiceWorker();
 | 
			
		||||
  const dateFnLocale = useDateFnLocale();
 | 
			
		||||
| 
						 | 
				
			
			@ -200,7 +201,7 @@ const Settings: ParentComponent = (props) => {
 | 
			
		|||
            variant="dense"
 | 
			
		||||
            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
 | 
			
		||||
          >
 | 
			
		||||
            <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
 | 
			
		||||
            <IconButton color="inherit" onClick={[pop, 11]} disableRipple>
 | 
			
		||||
              <CloseIcon />
 | 
			
		||||
            </IconButton>
 | 
			
		||||
            <Title>{t("Settings")}</Title>
 | 
			
		||||
| 
						 | 
				
			
			@ -208,7 +209,7 @@ const Settings: ParentComponent = (props) => {
 | 
			
		|||
        </AppBar>
 | 
			
		||||
      }
 | 
			
		||||
    >
 | 
			
		||||
      <BottomSheet open={!!subpage()} onClose={() => navigate(-1)}>
 | 
			
		||||
      <BottomSheet open={!!subpage()} onClose={() => pop(1)}>
 | 
			
		||||
        {subpage()}
 | 
			
		||||
      </BottomSheet>
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue