diff --git a/src/app.jsx b/src/app.jsx index ebbce5dd..2091994d 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -26,6 +26,7 @@ import Shortcuts from './components/shortcuts'; import ShortcutsSettings from './components/shortcuts-settings'; import NotFound from './pages/404'; import AccountStatuses from './pages/account-statuses'; +import Accounts from './pages/accounts'; import Bookmarks from './pages/bookmarks'; import Favourites from './pages/favourites'; import FollowedHashtags from './pages/followed-hashtags'; @@ -163,6 +164,7 @@ function App() { const showModal = snapStates.showCompose || snapStates.showSettings || + snapStates.showAccounts || snapStates.showAccount || snapStates.showDrafts || snapStates.showMediaModal || @@ -374,6 +376,21 @@ function App() { /> )} + {!!snapStates.showAccounts && ( + { + if (e.target === e.currentTarget) { + states.showAccounts = false; + } + }} + > + { + states.showAccounts = false; + }} + /> + + )} {!!snapStates.showAccount && ( + { + states.showAccounts = true; + }} + > + Accounts… + { states.showShortcutsSettings = true; diff --git a/src/pages/accounts.jsx b/src/pages/accounts.jsx new file mode 100644 index 00000000..0e617d9a --- /dev/null +++ b/src/pages/accounts.jsx @@ -0,0 +1,152 @@ +import './settings.css'; + +import { Menu, MenuItem } from '@szhsin/react-menu'; +import { useReducer, useState } from 'preact/hooks'; + +import Avatar from '../components/avatar'; +import Icon from '../components/icon'; +import Link from '../components/link'; +import NameText from '../components/name-text'; +import { api } from '../utils/api'; +import states from '../utils/states'; +import store from '../utils/store'; + +function Accounts({ onClose }) { + const { masto } = api(); + // Accounts + const accounts = store.local.getJSON('accounts'); + const currentAccount = store.session.get('currentAccount'); + const moreThanOneAccount = accounts.length > 1; + const [currentDefault, setCurrentDefault] = useState(0); + + const [_, reload] = useReducer((x) => x + 1, 0); + + return ( +
+
+

Accounts

+
+ + Account + +
+
+
+
+
    + {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('Log out?'); + if (!yes) return; + accounts.splice(i, 1); + store.local.setJSON('accounts', accounts); + // location.reload(); + location.href = '/'; + }} + > + + Log out + + +
    +
    • + ); + })} +
+ {moreThanOneAccount && ( +

+ + Note: Default account will always be used for first load. + Switched accounts will persist during the session. + +

+ )} +
+
+
+ ); +} + +export default Accounts; diff --git a/src/pages/settings.css b/src/pages/settings.css index 9b1cf279..c2b52f1f 100644 --- a/src/pages/settings.css +++ b/src/pages/settings.css @@ -2,19 +2,16 @@ background-color: var(--bg-faded-color); } -#settings-container h2 { +#settings-container main h3 { font-size: 85%; text-transform: uppercase; color: var(--text-insignificant-color); font-weight: normal; } -#settings-container h2 ~ h2 { - margin-top: 2em; -} #settings-container section { background-color: var(--bg-color); - margin: 0; + margin: 8px 0 0; padding: 8px 16px; border-top: var(--hairline-width) solid var(--outline-color); border-bottom: var(--hairline-width) solid var(--outline-color); @@ -30,7 +27,7 @@ list-style: none; } #settings-container section > ul > li { - padding: 8px 0 16px; + padding: 8px 0; display: flex; justify-content: space-between; align-items: center; @@ -71,6 +68,10 @@ margin-right: 8px; } +#settings-container section select { + padding: 4px; +} + #settings-container .radio-group { display: inline-flex; align-items: center; diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx index 2f06cbfa..decb90e7 100644 --- a/src/pages/settings.jsx +++ b/src/pages/settings.jsx @@ -1,41 +1,20 @@ import './settings.css'; -import { Menu, MenuItem } from '@szhsin/react-menu'; -import { useReducer, useRef, useState } from 'preact/hooks'; +import { useRef } 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 targetLanguages from '../data/lingva-target-languages'; -import { api } from '../utils/api'; import getTranslateTargetLanguage from '../utils/get-translate-target-language'; import localeCode2Text from '../utils/localeCode2Text'; 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); - const targetLanguage = snapStates.settings.contentTranslationTargetLanguage || null; const systemTargetLanguage = getTranslateTargetLanguage(); @@ -43,129 +22,10 @@ function Settings({ onClose }) { 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('Log out?'); - if (!yes) return; - accounts.splice(i, 1); - store.local.setJSON('accounts', accounts); - // location.reload(); - location.href = '/'; - }} - > - - Log out - - -
    -
    • - ); - })} -
- {moreThanOneAccount && ( -

- - Note: Default account will always be used for first load. - Switched accounts will persist during the session. - -

- )} -

- - Add new account - -

-
+

Settings

+
+
  • @@ -236,6 +96,11 @@ function Settings({ onClose }) {
+ + +

Experiments

+
+
  • @@ -257,7 +122,7 @@ function Settings({ onClose }) { states.settings.contentTranslation = e.target.checked; }} />{' '} - Post translation (experimental) + Post translation {snapStates.settings.contentTranslation && (
    @@ -295,24 +160,21 @@ function Settings({ onClose }) {
    )}
    • +
  • + +
-

Hidden features

-
-
- -
-
-

About

+

About