import './settings.css';
import { useReducer, useRef, useState } from 'preact/hooks';
import { useSnapshot } from 'valtio';
import Avatar from '../components/avatar';
import Icon from '../components/icon';
import Link from '../components/link';
import NameText from '../components/name-text';
import RelativeTime from '../components/relative-time';
import states from '../utils/states';
import store from '../utils/store';
/*
Settings component that shows these settings:
- Accounts list for switching
- Dark/light/auto theme switch (done with adding/removing 'is-light' or 'is-dark' class on the body)
*/
function Settings({ onClose }) {
const snapStates = useSnapshot(states);
// Accounts
const accounts = store.local.getJSON('accounts');
const currentAccount = store.session.get('currentAccount');
const currentTheme = store.local.get('theme') || 'auto';
const themeFormRef = useRef();
const moreThanOneAccount = accounts.length > 1;
const [currentDefault, setCurrentDefault] = useState(0);
const [_, reload] = useReducer((x) => x + 1, 0);
return (
{/* */}
Accounts
{accounts.map((account, i) => {
const isCurrent = account.info.id === currentAccount;
const isDefault = i === (currentDefault || 0);
return (
-
{moreThanOneAccount && (
)}
{
if (isCurrent) {
try {
const info = await masto.v1.accounts.fetch(
account.info.id,
);
console.log('fetched account info', info);
account.info = info;
store.local.setJSON('accounts', accounts);
reload();
} catch (e) {}
}
}}
/>
{
states.showAccount = `${account.info.username}@${account.instanceURL}`;
}}
/>
{isDefault && moreThanOneAccount && (
<>
Default{' '}
>
)}
{!isCurrent && (
)}
{!isDefault && moreThanOneAccount && (
)}
{isCurrent && (
<>
{' '}
>
)}
);
})}
{moreThanOneAccount && (
Note: Default account will always be used for first load.
Switched accounts will persist during the session.
)}
Add new account
Settings
Hidden features
About
);
}
export default Settings;