145 lines
4.5 KiB
TypeScript
145 lines
4.5 KiB
TypeScript
import { createResource, For, type ParentComponent } from "solid-js";
|
|
import Scaffold from "../material/Scaffold.js";
|
|
import {
|
|
AppBar,
|
|
Divider,
|
|
IconButton,
|
|
List,
|
|
ListItem,
|
|
ListItemButton,
|
|
ListItemSecondaryAction,
|
|
ListItemText,
|
|
ListSubheader,
|
|
NativeSelect,
|
|
Select,
|
|
Switch,
|
|
Toolbar,
|
|
} from "@suid/material";
|
|
import { Close as CloseIcon } 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";
|
|
|
|
const Settings: ParentComponent = () => {
|
|
const navigate = useNavigate();
|
|
const settings$ = useStore($settings);
|
|
|
|
const [profiles] = useSignedInProfiles();
|
|
|
|
const doSignOut = (acct: Account) => {
|
|
signOut((a) => a.site === acct.site && a.accessToken === acct.accessToken);
|
|
};
|
|
|
|
css`
|
|
ul {
|
|
padding: 0;
|
|
}
|
|
|
|
.setting-list {
|
|
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
|
|
}
|
|
`;
|
|
return (
|
|
<Scaffold
|
|
topbar={
|
|
<AppBar position="static">
|
|
<Toolbar variant="dense">
|
|
<IconButton onClick={[navigate, -1]}>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
<Title>Settings</Title>
|
|
</Toolbar>
|
|
</AppBar>
|
|
}
|
|
>
|
|
<List class="setting-list" use:solid-styled>
|
|
<li>
|
|
<ul>
|
|
<ListSubheader>Accounts</ListSubheader>
|
|
<ListItem>
|
|
<ListItemText>All Notifications</ListItemText>
|
|
<ListItemSecondaryAction>
|
|
<Switch />
|
|
</ListItemSecondaryAction>
|
|
</ListItem>
|
|
<ListItem>
|
|
<ListItemText>Sign in...</ListItemText>
|
|
</ListItem>
|
|
</ul>
|
|
<For each={profiles()}>
|
|
{({ account: acct, inf }) => (
|
|
<ul data-site={acct.site} data-username={inf?.username}>
|
|
<ListSubheader>{`@${inf?.username ?? "..."}@${new URL(acct.site).host}`}</ListSubheader>
|
|
<ListItem>
|
|
<ListItemText>Notifications</ListItemText>
|
|
<ListItemSecondaryAction>
|
|
<Switch />
|
|
</ListItemSecondaryAction>
|
|
</ListItem>
|
|
<ListItemButton onClick={[doSignOut, acct]}>
|
|
<ListItemText>Sign out</ListItemText>
|
|
</ListItemButton>
|
|
</ul>
|
|
)}
|
|
</For>
|
|
</li>
|
|
<li>
|
|
<ListSubheader>Reading</ListSubheader>
|
|
<ListItem>
|
|
<ListItemText secondary="Regular">Fonts</ListItemText>
|
|
</ListItem>
|
|
<ListItem>
|
|
<ListItemText secondary="Tutu will download toots before you scroll to the position.">
|
|
Prefetch Toots
|
|
</ListItemText>
|
|
<ListItemSecondaryAction>
|
|
<Switch
|
|
checked={!settings$().prefetchTootsDisabled}
|
|
onChange={(e) =>
|
|
$settings.setKey("prefetchTootsDisabled", !e.target.checked)
|
|
}
|
|
/>
|
|
</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>
|
|
</ListItemSecondaryAction>
|
|
</ListItem>
|
|
</li>
|
|
<li>
|
|
<ListSubheader>This Application</ListSubheader>
|
|
<ListItem>
|
|
<ListItemText secondary="Comformtable tooting experience.">
|
|
About Tutu
|
|
</ListItemText>
|
|
</ListItem>
|
|
<ListItem>
|
|
<ListItemText
|
|
secondary={`Using v${import.meta.env.PACKAGE_VERSION} (built on ${intlFormat(import.meta.env.BUILT_AT)}, ${import.meta.env.MODE})`}
|
|
>
|
|
No updates
|
|
</ListItemText>
|
|
</ListItem>
|
|
</li>
|
|
</List>
|
|
</Scaffold>
|
|
);
|
|
};
|
|
|
|
export default Settings;
|