+
+ );
+}
+
export default AccountStatuses;
diff --git a/src/pages/accounts.jsx b/src/pages/accounts.jsx
index d43a33fb..59d43719 100644
--- a/src/pages/accounts.jsx
+++ b/src/pages/accounts.jsx
@@ -1,7 +1,8 @@
import './accounts.css';
+import { useAutoAnimate } from '@formkit/auto-animate/preact';
import { Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';
-import { useReducer, useState } from 'preact/hooks';
+import { useReducer } from 'preact/hooks';
import Avatar from '../components/avatar';
import Icon from '../components/icon';
@@ -18,9 +19,9 @@ function Accounts({ onClose }) {
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);
+ const [accountsListParent] = useAutoAnimate();
return (
@@ -34,12 +35,12 @@ function Accounts({ onClose }) {
-
-
+
- +
-
{moreThanOneAccount && ( @@ -120,7 +121,7 @@ function Accounts({ onClose }) { accounts.splice(i, 1); accounts.unshift(account); store.local.setJSON('accounts', accounts); - setCurrentDefault(i); + reload(); }} >diff --git a/src/pages/search.css b/src/pages/search.css index f78cac9b..a1b830a8 100644 --- a/src/pages/search.css +++ b/src/pages/search.css @@ -40,8 +40,14 @@ ul.link-list.hashtag-list li a { } @media (min-width: 40em) { - #search-page header input { - background-color: var(--bg-color); + #search-page { + header input { + background-color: var(--bg-color); + } + + .filter-bar { + margin-top: 8px; + } } } diff --git a/src/pages/search.jsx b/src/pages/search.jsx index 4d0f11e7..25a9739a 100644 --- a/src/pages/search.jsx +++ b/src/pages/search.jsx @@ -71,6 +71,11 @@ function Search(props) { }; function loadResults(firstLoad) { + if (!firstLoad && !authenticated) { + // Search results pagination is only available to authenticated users + return; + } + setUIState('loading'); if (firstLoad && !type) { setStatusResults(statusResults.slice(0, SHORT_LIMIT)); @@ -89,6 +94,7 @@ function Search(props) { params.type = type; if (authenticated) params.offset = offsetRef.current; } + try { const results = await masto.v2.search.fetch(params); console.log(results); @@ -141,7 +147,7 @@ function Search(props) { return (
diff --git a/src/pages/favourites.jsx b/src/pages/favourites.jsx index 24732ece..5a3310ba 100644 --- a/src/pages/favourites.jsx +++ b/src/pages/favourites.jsx @@ -7,7 +7,7 @@ import useTitle from '../utils/useTitle'; const LIMIT = 20; function Favourites() { - useTitle('Favourites', '/f'); + useTitle('Likes', '/f'); const { masto, instance } = api(); const favouritesIterator = useRef(); async function fetchFavourites(firstLoad) { @@ -19,10 +19,10 @@ function Favourites() { return ( diff --git a/src/pages/lists.jsx b/src/pages/lists.jsx index d1ff97f8..2eacb157 100644 --- a/src/pages/lists.jsx +++ b/src/pages/lists.jsx @@ -23,6 +23,7 @@ function Lists() { (async () => { try { const lists = await masto.v1.lists.list(); + lists.sort((a, b) => a.title.localeCompare(b.title)); console.log(lists); setLists(lists); setUIState('default'); diff --git a/src/pages/notifications-menu.css b/src/pages/notifications-menu.css index 2c66663c..00e30f57 100644 --- a/src/pages/notifications-menu.css +++ b/src/pages/notifications-menu.css @@ -23,6 +23,7 @@ padding: 0; height: 40em; overflow: auto; + overscroll-behavior: contain; } .notifications-menu .status { font-size: inherit; diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx index 2a6f8517..824e7b7d 100644 --- a/src/pages/notifications.jsx +++ b/src/pages/notifications.jsx @@ -1,8 +1,9 @@ import './notifications.css'; -import { useIdle } from '@uidotdev/usehooks'; +import { Fragment } from 'preact'; import { memo } from 'preact/compat'; import { useCallback, useEffect, useRef, useState } from 'preact/hooks'; +import { InView } from 'react-intersection-observer'; import { useSearchParams } from 'react-router-dom'; import { useSnapshot } from 'valtio'; @@ -166,14 +167,12 @@ function Notifications({ columnMode }) { } }, [reachStart]); - useEffect(() => { - if (nearReachEnd && showMore) { - loadNotifications(); - } - }, [nearReachEnd, showMore]); + // useEffect(() => { + // if (nearReachEnd && showMore) { + // loadNotifications(); + // } + // }, [nearReachEnd, showMore]); - const idle = useIdle(5000); - console.debug('🧘♀️ IDLE', idle); const loadUpdates = useCallback(() => { console.log('✨ Load updates', { autoRefresh: snapStates.settings.autoRefresh, @@ -185,7 +184,7 @@ function Notifications({ columnMode }) { if ( snapStates.settings.autoRefresh && scrollableRef.current?.scrollTop === 0 && - idle && + window.__IDLE__ && !inBackground() && snapStates.notificationsShowNew && uiState !== 'loading' @@ -193,7 +192,6 @@ function Notifications({ columnMode }) { loadNotifications(true); } }, [ - idle, snapStates.notificationsShowNew, snapStates.settings.autoRefresh, uiState, @@ -220,23 +218,23 @@ function Notifications({ columnMode }) { } }, [notificationID, notificationAccessToken]); - useEffect(() => { - if (uiState === 'default') { - (async () => { - try { - const registration = await getRegistration(); - if (registration?.getNotifications) { - const notifications = await registration.getNotifications(); - console.log('🔔 Push notifications', notifications); - // Close all notifications? - // notifications.forEach((notification) => { - // notification.close(); - // }); - } - } catch (e) {} - })(); - } - }, [uiState]); + // useEffect(() => { + // if (uiState === 'default') { + // (async () => { + // try { + // const registration = await getRegistration(); + // if (registration?.getNotifications) { + // const notifications = await registration.getNotifications(); + // console.log('🔔 Push notifications', notifications); + // // Close all notifications? + // // notifications.forEach((notification) => { + // // notification.close(); + // // }); + // } + // } catch (e) {} + // })(); + // } + // }, [uiState]); return ( +{differentDay && ); })} @@ -458,15 +452,27 @@ function Notifications({ columnMode }) { )} {showMore && ( - + + )}{heading}
}{ - loadNotifications(true); - loadFollowRequests(); - }} /> - + -+ )} diff --git a/src/pages/settings.css b/src/pages/settings.css index b9dd0e9c..3e21dedb 100644 --- a/src/pages/settings.css +++ b/src/pages/settings.css @@ -140,3 +140,10 @@ color: var(--link-color); vertical-align: middle; } + +#settings-container .version-string { + padding: 4px; + font-family: var(--monospace-font); + font-size: 85%; + text-align: center; +} diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx index abbb99c9..2e7bdaac 100644 --- a/src/pages/settings.jsx +++ b/src/pages/settings.jsx @@ -18,6 +18,7 @@ import { removeSubscription, updateSubscription, } from '../utils/push-notifications'; +import showToast from '../utils/show-toast'; import states from '../utils/states'; import store from '../utils/store'; @@ -508,21 +509,38 @@ function Settings({ onClose }) { {__BUILD_TIME__ && (@@ -181,7 +187,9 @@ function Search(props) { return 0; }) .map((link) => ( - {link.label} + + {link.label} + ))} - Last build:{' '} -
)} @@ -709,7 +727,7 @@ function PushNotificationsSection({ onClose }) { }, { value: 'favourite', - label: 'Favourites', + label: 'Likes', }, { value: 'reblog', diff --git a/src/pages/status.css b/src/pages/status.css index 2b661da6..be46cb93 100644 --- a/src/pages/status.css +++ b/src/pages/status.css @@ -31,7 +31,7 @@ .ancestors-indicator { font-size: 70% !important; - & > .avatar:not(:first-child) { + & > .avatar ~ .avatar { margin-left: -4px; } } diff --git a/src/pages/status.jsx b/src/pages/status.jsx index 0497f6ba..5c074126 100644 --- a/src/pages/status.jsx +++ b/src/pages/status.jsx @@ -168,7 +168,10 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) { const [searchParams, setSearchParams] = useSearchParams(); const mediaParam = searchParams.get('media'); const showMedia = parseInt(mediaParam, 10) > 0; - const [viewMode, setViewMode] = useState(searchParams.get('view')); + const firstLoad = useRef(!states.prevLocation && history.length === 1); + const [viewMode, setViewMode] = useState( + searchParams.get('view') || firstLoad.current ? 'full' : null, + ); const translate = !!parseInt(searchParams.get('translate')); const { masto, instance } = api({ instance: propInstance }); const { @@ -534,6 +537,10 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) { // If media is open, esc to close media first // Else close the status page enabled: !showMedia, + ignoreEventWhen: (e) => { + const hasModal = !!document.querySelector('#modal-container > *'); + return hasModal; + }, }, ); // For backspace, will always close both media and status page @@ -839,9 +846,11 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) { ref={scrollableRef} class={`status-deck deck contained ${ statuses.length > 1 ? 'padded-bottom' : '' - } ${initialPageState.current === 'status' ? 'slide-in' : ''} ${ - viewMode ? `deck-view-${viewMode}` : '' - }`} + } ${ + initialPageState.current === 'status' && !firstLoad.current + ? 'slide-in' + : '' + } ${viewMode ? `deck-view-${viewMode}` : ''}`} onAnimationEnd={(e) => { // Fix the bounce effect when switching viewMode // `slide-in` animation kicks in when switching viewMode @@ -959,6 +968,23 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) { )}{' '} - {__COMMIT_HASH__ && ( - <> - ( - - {__COMMIT_HASH__}- - ) - - )} + Version:{' '} + { + e.target.select(); + // Copy to clipboard + try { + navigator.clipboard.writeText(e.target.value); + showToast('Version string copied'); + } catch (e) { + console.warn(e); + showToast('Unable to copy version string'); + } + }} + />{' '} + + ( + ++ + ) + +
-
{accounts.map((account, i) => {
const isCurrent = account.info.id === currentAccount;
- const isDefault = i === (currentDefault || 0);
+ const isDefault = i === 0; // first account is always default
return (
-