src/App.tsx

@@ -26,8 +26,6 @@ const TimelineHome = lazy(() => import("./timelines/Home.js"));
 const Settings = lazy(() => import("./settings/Settings.js"));
 const TootBottomSheet = lazy(() => import("./timelines/TootBottomSheet.js"));
 const MotionSettings = lazy(() => import("./settings/Motions.js"));
-const LanguageSettings = lazy(() => import("./settings/Language.js"));
-const RegionSettings = lazy(() => import("./settings/Region.jsx"));
 
 const Routing: Component = () => {
   return (
@@ -36,8 +34,6 @@ const Routing: Component = () => {
         <Route path=""></Route>
         <Route path="/settings" component={Settings}>
           <Route path=""></Route>
-          <Route path="/language" component={LanguageSettings}></Route>
-          <Route path="/region" component={RegionSettings}></Route>
           <Route path="/motions" component={MotionSettings}></Route>
         </Route>
         <Route path="/:acct/:id" component={TootBottomSheet}></Route>

src/material/BottomSheet.module.css

@@ -43,7 +43,7 @@
 
   &.animated {
     position: absolute;
-    transform: translateY(-50%);
+    transform: none;
     overflow: hidden;
     will-change: width, height, top, left;
 
@@ -54,12 +54,6 @@
     & * {
       overflow: hidden;
     }
-
-    @media (max-width: 560px) {
-      & {
-        transform: none;
-      }
-    }
   }
 
   &.bottom {

src/material/BottomSheet.tsx

@@ -36,7 +36,7 @@ function composeAnimationFrame(
   };
 }
 
-const MOVE_SPEED = 1200;
+const MOVE_SPEED = 1400; // 1400px/s, bottom sheet is big and a bit heavier than small papers
 
 const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   let element: HTMLDialogElement;
@@ -62,17 +62,13 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   });
 
   const onClose = () => {
-    const srcElement = hero();
-    if (srcElement) {
-      srcElement.style.visibility = "unset";
-    }
-
+    hero()!.style.visibility = 'unset'
     element.close();
     setHero();
   };
 
   const animatedClose = () => {
-    const srcElement = hero();
+    const srcElement = hero()
     const endRect = srcElement?.getBoundingClientRect();
     if (endRect) {
       const startRect = element.getBoundingClientRect();
@@ -80,94 +76,19 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
       animation.addEventListener("finish", onClose);
       animation.addEventListener("cancel", onClose);
     } else {
-      if (window.innerWidth > 560 && !props.bottomUp) {
-        onClose();
-        return;
-      }
-      const animation = props.bottomUp
-        ? animateSlideInFromBottom(element, true)
-        : animateSlideInFromRight(element, true);
-      animation.addEventListener("finish", onClose);
-      animation.addEventListener("cancel", onClose);
+      element.close();
+      setHero();
     }
   };
 
   const animatedOpen = () => {
     element.showModal();
-    const srcElement = hero();
+    const srcElement = hero()
     const startRect = srcElement?.getBoundingClientRect();
-    if (startRect) {
-      srcElement!.style.visibility = "hidden";
+    if (!startRect) return;
+    srcElement!.style.visibility = 'hidden'
     const endRect = element.getBoundingClientRect();
     animateHero(startRect, endRect, element);
-    } else if (props.bottomUp) {
-      animateSlideInFromBottom(element);
-    } else if (window.innerWidth <= 560) {
-      animateSlideInFromRight(element);
-    }
-  };
-
-  const animateSlideInFromRight = (element: HTMLElement, reserve?: boolean) => {
-    const rect = element.getBoundingClientRect();
-    const easing = "cubic-bezier(0.4, 0, 0.2, 1)";
-    element.classList.add(styles.animated);
-    const oldOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    const distance = Math.abs(rect.left - window.innerWidth);
-    const duration = (distance / MOVE_SPEED) * 1000;
-
-    animation = element.animate(
-      {
-        top: [rect.top, rect.top],
-        left: reserve
-          ? [`${rect.left}px`, `${window.innerWidth}px`]
-          : [`${window.innerWidth}px`, `${rect.left}px`],
-        width: [rect.width, rect.width],
-        height: [rect.height, rect.height],
-      },
-      { easing, duration },
-    );
-    const onAnimationEnd = () => {
-      element.classList.remove(styles.animated);
-      document.body.style.overflow = oldOverflow;
-      animation = undefined;
-    };
-    animation.addEventListener("cancel", onAnimationEnd);
-    animation.addEventListener("finish", onAnimationEnd);
-    return animation;
-  };
-
-  const animateSlideInFromBottom = (
-    element: HTMLElement,
-    reserve?: boolean,
-  ) => {
-    const rect = element.getBoundingClientRect();
-    const easing = "cubic-bezier(0.4, 0, 0.2, 1)";
-    element.classList.add(styles.animated);
-    const oldOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    const distance = Math.abs(rect.top - window.innerHeight);
-    const duration = (distance / MOVE_SPEED) * 1000;
-
-    animation = element.animate(
-      {
-        left: [rect.left, rect.left],
-        top: reserve
-          ? [`${rect.top}px`, `${window.innerHeight}px`]
-          : [`${window.innerHeight}px`, `${rect.top}px`],
-        width: [rect.width, rect.width],
-        height: [rect.height, rect.height],
-      },
-      { easing, duration },
-    );
-    const onAnimationEnd = () => {
-      element.classList.remove(styles.animated);
-      document.body.style.overflow = oldOverflow;
-      animation = undefined;
-    };
-    animation.addEventListener("cancel", onAnimationEnd);
-    animation.addEventListener("finish", onAnimationEnd);
-    return animation;
   };
 
   const animateHero = (

src/settings/ChooseLang.tsx

@@ -13,7 +13,7 @@ import {
   Switch,
   Toolbar,
 } from "@suid/material";
-import { ArrowBack } from "@suid/icons-material";
+import { Close as CloseIcon } from "@suid/icons-material";
 import iso639_1 from "iso-639-1";
 import {
   autoMatchLangTag,
@@ -22,12 +22,14 @@ import {
 } from "../platform/i18n";
 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";
 
-const ChooseLang: Component = () => {
-  const navigate = useNavigate()
+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) =>
@@ -37,9 +39,6 @@ const ChooseLang: Component = () => {
         };
       }>,
   );
-  const settings = useStore($settings)
-
-  const code = () => settings().language
 
   const unsupportedLangCodes = createMemo(() => {
     return iso639_1.getAllCodes().filter((x) => !["zh", "en"].includes(x));
@@ -47,10 +46,6 @@ const ChooseLang: Component = () => {
 
   const matchedLangCode = createMemo(() => autoMatchLangTag());
 
-  const onCodeChange = (code?: string) => {
-    $settings.setKey("language", code)
-  }
-
   return (
     <Scaffold
       topbar={
@@ -59,8 +54,8 @@ const ChooseLang: Component = () => {
             variant="dense"
             sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
           >
-            <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
-              <ArrowBack />
+            <IconButton color="inherit" onClick={props.onClose} disableRipple>
+              <CloseIcon />
             </IconButton>
             <Title>{t("Choose Language")}</Title>
           </Toolbar>
@@ -74,7 +69,7 @@ const ChooseLang: Component = () => {
       >
         <ListItemButton
           onClick={() => {
-            onCodeChange(code() ? undefined : matchedLangCode());
+            props.onCodeChange(props.code ? undefined : matchedLangCode());
           }}
         >
           <ListItemText>
@@ -83,20 +78,20 @@ const ChooseLang: Component = () => {
             })}
           </ListItemText>
           <ListItemSecondaryAction>
-            <Switch checked={typeof code() === "undefined"} />
+            <Switch checked={typeof props.code === "undefined"} />
           </ListItemSecondaryAction>
         </ListItemButton>
         <List subheader={<ListSubheader>{t("Supported")}</ListSubheader>}>
           <For each={SUPPORTED_LANGS}>
-            {(c) => (
+            {(code) => (
               <ListItemButton
-                disabled={typeof code() === "undefined"}
-                onClick={[onCodeChange, c]}
+                disabled={typeof props.code === "undefined"}
+                onClick={[props.onCodeChange, code]}
               >
-                <ListItemText>{t(`lang.${c}`)}</ListItemText>
+                <ListItemText>{t(`lang.${code}`)}</ListItemText>
                 <ListItemSecondaryAction>
                   <Radio
-                    checked={code() === c || (code() === undefined && matchedLangCode() == c)}
+                    checked={props.code === code || (props.code === undefined && matchedLangCode() == code)}
                   />
                 </ListItemSecondaryAction>
               </ListItemButton>

src/settings/ChooseRegion.tsx

@@ -12,7 +12,8 @@ import {
   Switch,
   Toolbar,
 } from "@suid/material";
-import { ArrowBack } from "@suid/icons-material";
+import { Close as CloseIcon } from "@suid/icons-material";
+import iso639_1 from "iso-639-1";
 import {
   autoMatchRegion,
   createTranslator,
@@ -20,12 +21,14 @@ 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";
 
-const ChooseRegion: Component = () => {
-  const navigate = useNavigate();
+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) =>
@@ -36,16 +39,12 @@ const ChooseRegion: Component = () => {
       }>,
   );
 
-  const settings = useStore($settings);
-
-  const region = () => settings().region;
+  const unsupportedLangCodes = createMemo(() => {
+    return iso639_1.getAllCodes().filter((x) => !["zh", "en"].includes(x));
+  });
 
   const matchedRegionCode = createMemo(() => autoMatchRegion());
 
-  const onCodeChange = (code?: string) => {
-    $settings.setKey("region", code);
-  };
-
   return (
     <Scaffold
       topbar={
@@ -54,8 +53,8 @@ const ChooseRegion: Component = () => {
             variant="dense"
             sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
           >
-            <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
-              <ArrowBack />
+            <IconButton color="inherit" onClick={props.onClose} disableRipple>
+              <CloseIcon />
             </IconButton>
             <Title>{t("Choose Language")}</Title>
           </Toolbar>
@@ -69,17 +68,16 @@ const ChooseRegion: Component = () => {
       >
         <ListItemButton
           onClick={() => {
-            onCodeChange(region() ? undefined : matchedRegionCode());
+            props.onCodeChange(props.code ? undefined : matchedRegionCode());
           }}
         >
           <ListItemText>
             {t("region.auto", {
-              detected:
-                t(`region.${matchedRegionCode()}`) ?? matchedRegionCode(),
+              detected: t(`region.${matchedRegionCode()}`) ?? matchedRegionCode(),
             })}
           </ListItemText>
           <ListItemSecondaryAction>
-            <Switch checked={typeof region() === "undefined"} />
+            <Switch checked={typeof props.code === "undefined"} />
           </ListItemSecondaryAction>
         </ListItemButton>
 
@@ -87,16 +85,13 @@ const ChooseRegion: Component = () => {
           <For each={SUPPORTED_REGIONS}>
             {(code) => (
               <ListItemButton
-                disabled={typeof region() === "undefined"}
-                onClick={[onCodeChange, code]}
+                disabled={typeof props.code === "undefined"}
+                onClick={[props.onCodeChange, code]}
               >
                 <ListItemText>{t(`region.${code}`)}</ListItemText>
                 <ListItemSecondaryAction>
                   <Radio
-                    checked={
-                      region() === code ||
-                      (region() === undefined && matchedRegionCode() == code)
-                    }
+                    checked={props.code === code || (props.code === undefined && matchedRegionCode() == code)}
                   />
                 </ListItemSecondaryAction>
               </ListItemButton>

src/settings/Motions.tsx

@@ -14,7 +14,7 @@ import {
 } from "@suid/material";
 import { Title } from "../material/typography";
 import { useNavigate } from "@solidjs/router";
-import { ArrowBack } from "@suid/icons-material";
+import { Close as CloseIcon } from "@suid/icons-material";
 import { createTranslator } from "../platform/i18n";
 import { useStore } from "@nanostores/solid";
 import { $settings } from "./stores";
@@ -37,7 +37,7 @@ const Motions: Component = () => {
             sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
           >
             <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
-              <ArrowBack />
+              <CloseIcon />
             </IconButton>
             <Title>{t("motions")}</Title>
           </Toolbar>

src/settings/Settings.tsx

@@ -41,10 +41,15 @@ import {
   autoMatchLangTag,
   autoMatchRegion,
   createTranslator,
+  SUPPORTED_LANGS,
+  SUPPORTED_REGIONS,
   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";
+import { Portal } from "solid-js/web";
 
 type Strings = {
   ["lang.auto"]: Template<{ detected: string }>;
@@ -64,6 +69,8 @@ const Settings: ParentComponent = (props) => {
     needRefresh: [needRefresh],
   } = useRegisterSW();
   const dateFnLocale = useDateFnLocale();
+  const [langPickerOpen, setLangPickerOpen] = createSignal(false);
+  const [regionPickerOpen, setRegionPickerOpen] = createSignal(false);
 
   const [profiles] = useSignedInProfiles();
 
@@ -168,7 +175,7 @@ const Settings: ParentComponent = (props) => {
         </li>
         <li>
           <ListSubheader>{t("This Application")}</ListSubheader>
-          <ListItemButton component={A} href="./language">
+          <ListItemButton onClick={[setLangPickerOpen, true]}>
             <ListItemIcon>
               <TranslateIcon />
             </ListItemIcon>
@@ -185,8 +192,15 @@ const Settings: ParentComponent = (props) => {
               {t("Language")}
             </ListItemText>
           </ListItemButton>
+          <BottomSheet open={langPickerOpen()}>
+            <ChooseLang
+              code={settings$().language}
+              onCodeChange={(nval) => $settings.setKey("language", nval)}
+              onClose={[setLangPickerOpen, false]}
+            />
+          </BottomSheet>
           <Divider />
-          <ListItemButton component={A} href="./region">
+          <ListItemButton onClick={[setRegionPickerOpen, true]}>
             <ListItemIcon>
               <PublicIcon />
             </ListItemIcon>
@@ -203,6 +217,13 @@ const Settings: ParentComponent = (props) => {
               {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")}>