Settings: prefetching toots

src/settings/Settings.tsx

@@ -23,9 +23,12 @@ 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 { useStore } from "@nanostores/solid";
+import { $settings } from "./stores.js";
 
 const Settings: ParentComponent = () => {
   const navigate = useNavigate();
+  const settings$ = useStore($settings);
 
   const [profiles] = useSignedInProfiles();
 
@@ -96,7 +99,12 @@ const Settings: ParentComponent = () => {
               Prefetch Toots
             </ListItemText>
             <ListItemSecondaryAction>
-              <Switch />
+              <Switch
+                checked={!settings$().prefetchTootsDisabled}
+                onChange={(e) =>
+                  $settings.setKey("prefetchTootsDisabled", !e.target.checked)
+                }
+              />
             </ListItemSecondaryAction>
           </ListItem>
         </li>

src/settings/stores.ts

@@ -2,6 +2,10 @@ import { persistentMap } from "@nanostores/persistent";
 
 type Settings = {
   onGoingOAuth2Process?: string
+  prefetchTootsDisabled?: boolean
 }
 
-export const $settings = persistentMap<Settings>("settings::", {})
+export const $settings = persistentMap<Settings>("settings::", {}, {
+  encode: JSON.stringify,
+  decode: JSON.parse
+})

src/timelines/Home.tsx

@@ -35,6 +35,8 @@ import { Create as CreateTootIcon } from "@suid/icons-material";
 import { useTimeline } from "../masto/timelines";
 import { makeEventListener } from "@solid-primitives/event-listener";
 import BottomSheet from "../material/BottomSheet";
+import { $settings } from "../settings/stores";
+import { useStore } from "@nanostores/solid";
 
 const TimelinePanel: Component<{
   client: mastodon.rest.Client;
@@ -153,12 +155,13 @@ const Home: ParentComponent = (props) => {
   useDocumentTitle("Timelines");
   const now = createTimeSource();
 
+  const settings$ = useStore($settings)
   const sessions = useSessions();
   const client = () => sessions()[0].client;
   const [profile] = useAcctProfile(client);
 
   const [panelOffset, setPanelOffset] = createSignal(0);
-  const [prefetching, setPrefetching] = createSignal(true);
+  const prefetching = () => !settings$().prefetchTootsDisabled
   const [currentFocusOn, setCurrentFocusOn] = createSignal<HTMLElement[]>([]);
   const [focusRange, setFocusRange] = createSignal([0, 0] as readonly [
     number,
@@ -279,7 +282,7 @@ const Home: ParentComponent = (props) => {
                 </Tab>
               </Tabs>
               <ProfileMenuButton profile={profile()}>
-                <MenuItem onClick={(e) => setPrefetching((x) => !x)}>
+                <MenuItem onClick={(e) => $settings.setKey("prefetchTootsDisabled", !$settings.get().prefetchTootsDisabled)}>
                   <ListItemText>Prefetch Toots</ListItemText>
                   <ListItemSecondaryAction>
                     <Switch checked={prefetching()}></Switch>