added settings
This commit is contained in:
parent
b4f7a863a2
commit
71b9a60b35
15 changed files with 359 additions and 91 deletions
137
src/settings/Settings.tsx
Normal file
137
src/settings/Settings.tsx
Normal file
|
@ -0,0 +1,137 @@
|
|||
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";
|
||||
|
||||
const Settings: ParentComponent = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
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 />
|
||||
</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;
|
Loading…
Add table
Add a link
Reference in a new issue