add settings for autoplay gifs and vids

src/settings/Settings.tsx

@@ -1,4 +1,10 @@
-import { createSignal, For, Show, type ParentComponent } from "solid-js";
+import {
+  children,
+  createSignal,
+  For,
+  Show,
+  type ParentComponent,
+} from "solid-js";
 import Scaffold from "../material/Scaffold.js";
 import {
   AppBar,
@@ -11,18 +17,18 @@ import {
   ListItemSecondaryAction,
   ListItemText,
   ListSubheader,
-  NativeSelect,
   Switch,
   Toolbar,
 } from "@suid/material";
 import {
+  Animation as AnimationIcon,
   Close as CloseIcon,
   Logout,
   Public as PublicIcon,
   Refresh as RefreshIcon,
   Translate as TranslateIcon,
 } from "@suid/icons-material";
-import { useNavigate } from "@solidjs/router";
+import { A, useNavigate } from "@solidjs/router";
 import { Title } from "../material/typography.jsx";
 import { css } from "solid-styled";
 import { useSignedInProfiles } from "../masto/acct.js";
@@ -43,12 +49,13 @@ 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 }>;
 } & Record<string, string | undefined>;
 
-const Settings: ParentComponent = () => {
+const Settings: ParentComponent = (props) => {
   const [t] = createTranslator(
     (code) =>
       import(`./i18n/${code}.json`) as Promise<{
@@ -71,6 +78,8 @@ const Settings: ParentComponent = () => {
     signOut((a) => a.site === acct.site && a.accessToken === acct.accessToken);
   };
 
+  const subpage = children(() => props.children);
+
   css`
     ul {
       padding: 0;
@@ -96,6 +105,10 @@ const Settings: ParentComponent = () => {
         </AppBar>
       }
     >
+      <BottomSheet open={!!subpage()} onClose={() => navigate(-1)}>
+        {subpage()}
+      </BottomSheet>
+
       <List class="setting-list" use:solid-styled>
         <li>
           <ul>
@@ -135,7 +148,7 @@ const Settings: ParentComponent = () => {
           </For>
         </li>
         <li>
-          <ListSubheader>{t("Reading")}</ListSubheader>
+          <ListSubheader>{t("timelines")}</ListSubheader>
           <ListItemButton
             onClick={(e) =>
               $settings.setKey(
@@ -152,6 +165,13 @@ const Settings: ParentComponent = () => {
             </ListItemSecondaryAction>
           </ListItemButton>
           <Divider />
+          <ListItemButton component={A} href="./motions">
+            <ListItemIcon>
+              <AnimationIcon></AnimationIcon>
+            </ListItemIcon>
+            <ListItemText>{t("motions")}</ListItemText>
+          </ListItemButton>
+          <Divider />
         </li>
         <li>
           <ListSubheader>{t("This Application")}</ListSubheader>