Settings: ask user to refresh if update available

src/settings/Settings.tsx

@@ -1,4 +1,4 @@
-import { createResource, For, type ParentComponent } from "solid-js";
+import { For, Show, type ParentComponent } from "solid-js";
 import Scaffold from "../material/Scaffold.js";
 import {
   AppBar,
@@ -10,25 +10,29 @@ import {
   ListItemSecondaryAction,
   ListItemText,
   ListSubheader,
-  NativeSelect,
-  Select,
   Switch,
   Toolbar,
 } from "@suid/material";
-import { Close as CloseIcon } from "@suid/icons-material";
+import {
+  Close as CloseIcon,
+  Refresh as RefreshIcon,
+} from "@suid/icons-material";
 import { useNavigate } from "@solidjs/router";
 import { Title } from "../material/typography.jsx";
-import { useSessions } from "../masto/clients.js";
 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";
+import { useRegisterSW } from "virtual:pwa-register/solid";
 
 const Settings: ParentComponent = () => {
   const navigate = useNavigate();
   const settings$ = useStore($settings);
+  const {
+    needRefresh: [needRefresh],
+  } = useRegisterSW();
 
   const [profiles] = useSignedInProfiles();
 
@@ -49,7 +53,10 @@ const Settings: ParentComponent = () => {
     <Scaffold
       topbar={
         <AppBar position="static">
-          <Toolbar variant="dense" sx={{paddingTop: "var(--safe-area-inset-top, 0px)"}}>
+          <Toolbar
+            variant="dense"
+            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
+          >
             <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
               <CloseIcon />
             </IconButton>
@@ -65,12 +72,14 @@ const Settings: ParentComponent = () => {
             <ListItem>
               <ListItemText>All Notifications</ListItemText>
               <ListItemSecondaryAction>
-                <Switch />
+                <Switch value={false} />
               </ListItemSecondaryAction>
             </ListItem>
+            <Divider />
             <ListItem>
               <ListItemText>Sign in...</ListItemText>
             </ListItem>
+            <Divider />
           </ul>
           <For each={profiles()}>
             {({ account: acct, inf }) => (
@@ -79,12 +88,14 @@ const Settings: ParentComponent = () => {
                 <ListItem>
                   <ListItemText>Notifications</ListItemText>
                   <ListItemSecondaryAction>
-                    <Switch />
+                    <Switch value={false} />
                   </ListItemSecondaryAction>
                 </ListItem>
+                <Divider />
                 <ListItemButton onClick={[doSignOut, acct]}>
                   <ListItemText>Sign out</ListItemText>
                 </ListItemButton>
+                <Divider />
               </ul>
             )}
           </For>
@@ -94,32 +105,23 @@ const Settings: ParentComponent = () => {
           <ListItem>
             <ListItemText secondary="Regular">Fonts</ListItemText>
           </ListItem>
-          <ListItem onClick={(e) =>
-                  $settings.setKey("prefetchTootsDisabled", !settings$().prefetchTootsDisabled)
-                }>
+          <Divider />
+          <ListItem
+            onClick={(e) =>
+              $settings.setKey(
+                "prefetchTootsDisabled",
+                !settings$().prefetchTootsDisabled,
+              )
+            }
+          >
             <ListItemText secondary="Tutu will download toots before you scroll to the position.">
               Prefetch Toots
             </ListItemText>
             <ListItemSecondaryAction>
-              <Switch
-                checked={!settings$().prefetchTootsDisabled}
-              />
-            </ListItemSecondaryAction>
-          </ListItem>
-        </li>
-        <li>
-          <ListSubheader>Controls</ListSubheader>
-          <ListItem>
-            <ListItemText>Optimized UI</ListItemText>
-            <ListItemSecondaryAction>
-              <NativeSelect value="auto">
-                <option value="auto">Tutu Decides (Mouse)</option>
-                <option value="mouse">Mouse</option>
-                <option value="touch">Touch</option>
-                <option value="controlpad">Control Pad</option>
-              </NativeSelect>
+              <Switch checked={!settings$().prefetchTootsDisabled} />
             </ListItemSecondaryAction>
           </ListItem>
+          <Divider />
         </li>
         <li>
           <ListSubheader>This Application</ListSubheader>
@@ -128,13 +130,24 @@ const Settings: ParentComponent = () => {
               About Tutu
             </ListItemText>
           </ListItem>
+          <Divider />
           <ListItem>
             <ListItemText
               secondary={`Using v${import.meta.env.PACKAGE_VERSION} (built on ${intlFormat(import.meta.env.BUILT_AT)}, ${import.meta.env.MODE})`}
             >
-              No updates
+              {needRefresh()
+                ? "An update is ready, restart the Tutu to apply"
+                : "No updates"}
             </ListItemText>
+            <Show when={needRefresh()}>
+              <ListItemSecondaryAction>
+                <IconButton aria-label="Restart Now" onClick={() => window.location.reload()}>
+                  <RefreshIcon />
+                </IconButton>
+              </ListItemSecondaryAction>
+            </Show>
           </ListItem>
+          <Divider />
         </li>
       </List>
     </Scaffold>