import './settings.css'; import { Menu, MenuItem } from '@szhsin/react-menu'; import { useReducer, useRef, useState } from 'preact/hooks'; import { useSnapshot } from 'valtio'; import logo from '../assets/logo.svg'; 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 { api } from '../utils/api'; 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 { masto } = api(); 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 && ( )} } > {moreThanOneAccount && ( { // Move account to the top of the list accounts.splice(i, 1); accounts.unshift(account); store.local.setJSON('accounts', accounts); setCurrentDefault(i); }} > Set as default )} { const yes = confirm( 'Are you sure you want to log out?', ); if (!yes) return; accounts.splice(i, 1); store.local.setJSON('accounts', accounts); location.reload(); }} > Log out
  • ); })}
{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

{' '} { e.preventDefault(); states.showAccount = 'phanpy@hachyderm.io'; }} > @phanpy .

Built {' '} by{' '} { e.preventDefault(); states.showAccount = 'cheeaun@mastodon.social'; }} > @cheeaun .{' '} Privacy Policy .

{__BUILD_TIME__ && (

Last build: {' '} {__COMMIT_HASH__ && ( <> ( {__COMMIT_HASH__} ) )}

)}
); } export default Settings;