diff --git a/index.html b/index.html index ae280bd9..3581003a 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,10 @@ - + Phanpy =0.10.0" } }, + "node_modules/just-debounce-it": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/just-debounce-it/-/just-debounce-it-3.2.0.tgz", + "integrity": "sha512-WXzwLL0745uNuedrCsCs3rpmfD6DBaf7uuVwaq98/8dafURfgQaBsSpjiPp5+CW6Vjltwy9cOGI6qE71b3T8iQ==" + }, "node_modules/kolorist": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.6.0.tgz", @@ -8562,6 +8568,11 @@ "integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==", "dev": true }, + "just-debounce-it": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/just-debounce-it/-/just-debounce-it-3.2.0.tgz", + "integrity": "sha512-WXzwLL0745uNuedrCsCs3rpmfD6DBaf7uuVwaq98/8dafURfgQaBsSpjiPp5+CW6Vjltwy9cOGI6qE71b3T8iQ==" + }, "kolorist": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.6.0.tgz", diff --git a/package.json b/package.json index f0d1bb19..191757ff 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "fast-blurhash": "~1.1.2", "history": "~5.3.0", "iconify-icon": "~1.0.2", + "just-debounce-it": "^3.2.0", "masto": "~4.10.1", "mem": "~9.0.2", "preact": "~10.11.3", diff --git a/public/logo-maskable-512.png b/public/logo-maskable-512.png new file mode 100644 index 00000000..2aa8608e Binary files /dev/null and b/public/logo-maskable-512.png differ diff --git a/public/sw.js b/public/sw.js index 329386cd..b44db070 100644 --- a/public/sw.js +++ b/public/sw.js @@ -5,12 +5,17 @@ import { CacheFirst, StaleWhileRevalidate } from 'workbox-strategies'; const imageRoute = new Route( ({ request, sameOrigin }) => { - return !sameOrigin && request.destination === 'image'; + const isRemote = !sameOrigin; + const isImage = request.destination === 'image'; + const isAvatar = request.url.includes('/avatars/'); + const isEmoji = request.url.includes('/emoji/'); + return isRemote && isImage && (isAvatar || isEmoji); }, new CacheFirst({ cacheName: 'remote-images', plugins: [ new ExpirationPlugin({ + maxEntries: 100, maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days purgeOnQuotaError: true, }), diff --git a/src/app.css b/src/app.css index a725080d..5612910a 100644 --- a/src/app.css +++ b/src/app.css @@ -137,6 +137,7 @@ a.mention span { transparent ); background-repeat: no-repeat; + transition: opacity 0.3s ease-in-out; } .timeline.contextual > li:first-child { background-position: 0 16px; @@ -273,6 +274,14 @@ a.mention span { .timeline.contextual > li.thread .replies li:before { left: calc(50px + 16px + 16px); } +.timeline.contextual.loading > li:not(.hero) { + opacity: 0.5; + pointer-events: none; + /* background-image: none !important; */ +} +/* .timeline.contextual.loading > li:not(.hero):before { + content: none !important; +} */ .timeline-deck.compact .status { max-height: max(25vh, 160px); @@ -334,12 +343,12 @@ a.mention span { } @keyframes slide-in { 0% { - opacity: 0; - transform: translateX(100%); + opacity: 0.5; + transform: translate3d(100%, 0, 0); } 100% { opacity: 1; - transform: translateX(0); + transform: translate3d(0, 0, 0); } } .deck-backdrop .deck { @@ -347,7 +356,7 @@ a.mention span { max-width: 100vw; border-left: 1px solid var(--divider-color); background-color: var(--bg-color); - animation: slide-in 0.2s ease-out; + animation: slide-in 0.5s var(--timing-function); box-shadow: -1px 0 var(--bg-color); } .deck-backdrop .deck .status { @@ -356,7 +365,7 @@ a.mention span { .decks { flex-grow: 1; - transition: transform 0.2s ease-in-out; + transition: transform 0.5s var(--timing-function); } .deck-close { @@ -405,31 +414,6 @@ a.mention span { width: 40em; max-width: 100vw; padding: 16px; - background-color: var(--bg-color); - border-radius: 8px; - border: 1px solid var(--divider-color); - overflow: auto; - max-height: 90vh; - max-height: 90dvh; - position: relative; -} -.box > :is(h1, h2, h3):first-of-type { - margin-top: 0; -} -.box .close-button { - position: sticky; - top: 0; - float: right; - margin: -16px -8px 0 0; - transform: translate(0, -8px); -} - -.box-shadow { - box-shadow: 0px 36px 89px rgb(0 0 0 / 4%), - 0px 23.3333px 52.1227px rgb(0 0 0 / 3%), - 0px 13.8667px 28.3481px rgb(0 0 0 / 2%), 0px 7.2px 14.4625px rgb(0 0 0 / 2%), - 0px 2.93333px 7.25185px rgb(0 0 0 / 2%), - 0px 0.666667px 3.50231px rgb(0 0 0 / 1%); } /* CAROUSEL */ @@ -463,6 +447,9 @@ a.mention span { max-height: 100vh; max-height: 100dvh; } +.carousel > * video { + min-height: 80px; +} .carousel-top-controls { top: 0; @@ -587,7 +574,7 @@ button.carousel-dot[disabled].active { padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: max(16px, env(safe-area-inset-bottom)); box-shadow: 0 -1px 32px var(--divider-color); - animation: slide-up 0.2s ease-out; + animation: slide-up 0.2s var(--timing-function); border: 1px solid var(--outline-color); } @@ -632,13 +619,15 @@ button.carousel-dot[disabled].active { border: 1px solid var(--outline-color); border-radius: 8px; transition: all 0.2s ease-in-out; + box-shadow: 0 0 8px var(--bg-faded-color), 0 4px 8px var(--bg-faded-color), + 0 2px 4px var(--bg-faded-color); } .menu-container menu li { margin: 0; padding: 0; list-style: none; } -.menu-container > button:is(:active, :focus) + menu, +.menu-container > button:is(:hover, :active, :focus) + menu, .menu-container menu:is(:hover, :active) { opacity: 1; pointer-events: auto; @@ -663,7 +652,7 @@ button.carousel-dot[disabled].active { display: flex; } .decks:has(~ .deck-backdrop) { - transform: translateX(-5vw); + transform: translate3d(-5vw, 0, 0); } .deck-backdrop .deck { width: 50%; diff --git a/src/app.jsx b/src/app.jsx index 5613c658..27268c59 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -104,7 +104,7 @@ async function startStream() { export function App() { const snapStates = useSnapshot(states); const [isLoggedIn, setIsLoggedIn] = useState(false); - const [uiState, setUIState] = useState('default'); + const [uiState, setUIState] = useState('loading'); useLayoutEffect(() => { const theme = store.local.get('theme'); @@ -144,6 +144,7 @@ export function App() { url: `https://${instanceURL}`, accessToken, disableVersionCheck: true, + timeout: 30_000, }); const mastoAccount = await masto.accounts.verifyCredentials(); @@ -185,6 +186,7 @@ export function App() { url: `https://${instanceURL}`, accessToken, disableVersionCheck: true, + timeout: 30_000, }); setIsLoggedIn(true); } catch (e) { @@ -192,6 +194,8 @@ export function App() { } setUIState('default'); })(); + } else { + setUIState('default'); } }, []); diff --git a/src/components/compose.css b/src/components/compose.css index 2568747e..56e04ace 100644 --- a/src/components/compose.css +++ b/src/components/compose.css @@ -78,6 +78,7 @@ text-shadow: 0 1px 10px var(--bg-color), 0 1px 10px var(--bg-color), 0 1px 10px var(--bg-color), 0 1px 10px var(--bg-color), 0 1px 10px var(--bg-color); + z-index: 2; } #_compose-container .status-preview-legend.reply-to { color: var(--reply-to-color); @@ -359,3 +360,10 @@ width: 100%; color: var(--red-color); } + +@media (display-mode: standalone) { + /* No popping in standalone mode */ + #compose-container .pop-button { + display: none; + } +} diff --git a/src/components/compose.jsx b/src/components/compose.jsx index aca29fde..120b79e5 100644 --- a/src/components/compose.jsx +++ b/src/components/compose.jsx @@ -256,6 +256,12 @@ function Compose({ const canClose = () => { const { value, dataset } = textareaRef.current; + // check if loading + if (uiState === 'loading') { + console.log('canClose', { uiState }); + return false; + } + // check for status and media attachments const hasMediaAttachments = mediaAttachments.length > 0; if (!value && !hasMediaAttachments) { @@ -297,6 +303,7 @@ function Compose({ isSelf, hasOnlyAcct, sameWithSource, + uiState, }); return false; @@ -341,7 +348,8 @@ function Compose({ {' '} + •{' '} + + )} {shortenNumber(votersCount)}{' '} {votersCount === 1 ? 'voter' : 'voters'} {votersCount !== votesCount && ( @@ -1012,10 +1063,10 @@ function EditedAtModal({ statusID, onClose = () => {} }) { const currentYear = new Date().getFullYear(); return ( -
- + */}

Edit History

{uiState === 'error' &&

Failed to load history

} {uiState === 'loading' && ( diff --git a/src/compose.jsx b/src/compose.jsx index 88fa3990..a171ac73 100644 --- a/src/compose.jsx +++ b/src/compose.jsx @@ -29,6 +29,7 @@ if (window.opener) { url: `https://${instanceURL}`, accessToken, disableVersionCheck: true, + timeout: 30_000, }); console.info('Logged in successfully.'); } catch (e) { diff --git a/src/index.css b/src/index.css index d7fe7760..b799879b 100644 --- a/src/index.css +++ b/src/index.css @@ -30,6 +30,8 @@ --img-bg-color: rgba(128, 128, 128, 0.2); --loader-color: #1c1e2199; --comment-line-color: #e5e5e5; + + --timing-function: cubic-bezier(0.3, 0.5, 0, 1); } @media (prefers-color-scheme: dark) { @@ -118,8 +120,9 @@ button, vertical-align: middle; text-decoration: none; } -button > * { +:is(button, .button) > * { vertical-align: middle; + pointer-events: none; } :is(button, .button):not(:disabled, .disabled):hover { cursor: pointer; @@ -154,6 +157,15 @@ button > * { padding: 12px; } +:is(button, .button).textual { + padding: 0; + margin: 0; + vertical-align: baseline; + color: var(--link-color); + background-color: transparent; + border-radius: 0; +} + input[type='text'], textarea, select { diff --git a/src/pages/home.jsx b/src/pages/home.jsx index 4c910dd6..8edd4bfa 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -82,6 +82,7 @@ function Home({ hidden }) { const diffMins = Math.round(diff / 1000 / 60); if (diffMins > 1) { console.log('visible', { lastHidden, diffMins }); + setUIState('loading'); setTimeout(() => { (async () => { const newStatus = await masto.timelines.fetchHome({ @@ -91,6 +92,7 @@ function Home({ hidden }) { if (newStatus.length && newStatus[0].id !== states.home[0].id) { states.homeNew = newStatus; } + setUIState('default'); })(); // loadStatuses(true); // states.homeNew = []; @@ -101,6 +103,7 @@ function Home({ hidden }) { document.addEventListener('visibilitychange', handleVisibilityChange); return () => { document.removeEventListener('visibilitychange', handleVisibilityChange); + setUIState('default'); }; }, []); diff --git a/src/pages/login.css b/src/pages/login.css new file mode 100644 index 00000000..69cc6c28 --- /dev/null +++ b/src/pages/login.css @@ -0,0 +1,26 @@ +#login { + padding: 16px; + background-image: radial-gradient( + closest-side at 50% 50%, + var(--bg-color), + transparent + ); +} + +#login .error { + color: var(--red-color); +} + +#login label p { + margin: 0 0 0.25em 0; + padding: 0; + text-transform: uppercase; + font-size: 90%; + font-weight: bold; + color: var(--text-insignificant-color); +} + +#login input { + display: block; + width: 100%; +} diff --git a/src/pages/login.jsx b/src/pages/login.jsx index 39975136..9dd2dc76 100644 --- a/src/pages/login.jsx +++ b/src/pages/login.jsx @@ -1,3 +1,5 @@ +import './login.css'; + import { useEffect, useRef, useState } from 'preact/hooks'; import Loader from '../components/loader'; @@ -53,7 +55,7 @@ function Login() { }; return ( -
+

Log in

diff --git a/src/pages/notifications.css b/src/pages/notifications.css index 9b2c4179..2dda0eec 100644 --- a/src/pages/notifications.css +++ b/src/pages/notifications.css @@ -17,20 +17,20 @@ opacity: 0.75; color: var(--text-insignificant-color); } -.notification-type.favourite { +.notification-type.notification-favourite { color: var(--favourite-color); } -.notification-type.reblog { +.notification-type.notification-reblog { color: var(--reblog-color); } -.notification-type.poll, -.notification-type.mention { +.notification-type.notification-poll, +.notification-type.notification-mention { color: var(--link-color); } .notification .status-link { border-radius: 8px 8px 0 0; - border: 1px solid var(--divider-color); + border: 1px solid var(--outline-color); max-height: 160px; overflow: hidden; /* fade out mask gradient bottom */ @@ -41,9 +41,16 @@ ); filter: saturate(0.25); } +.notification .status-link.status-type-mention { + max-height: 320px; + filter: none; + background-color: var(--bg-color); + margin-top: calc(-16px - 1px); +} .notification .status-link:hover { background-color: var(--bg-blur-color); filter: saturate(1); + border-color: var(--outline-hover-color); } .notification .status-link > * { pointer-events: none; diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx index 2820e8f4..fc40265a 100644 --- a/src/pages/notifications.jsx +++ b/src/pages/notifications.jsx @@ -41,7 +41,7 @@ const contentText = { update: 'A status you interacted with has been edited.', }; -const LIMIT = 20; +const LIMIT = 30; // 30 is the maximum limit :( function Notification({ notification }) { const { id, type, status, account, _accounts } = notification; @@ -61,7 +61,7 @@ function Notification({ notification }) { return ( <>

-

- {!/poll|update/i.test(type) && ( - <> - {_accounts?.length > 1 ? ( - <> - {_accounts.length} people{' '} - - ) : ( - <> - {' '} - - )} - - )} - {text} - {type === 'mention' && ( - - {' '} - •{' '} - - - )} -

+ {type !== 'mention' && ( +

+ {!/poll|update/i.test(type) && ( + <> + {_accounts?.length > 1 ? ( + <> + {_accounts.length} people{' '} + + ) : ( + <> + {' '} + + )} + + )} + {text} + {type === 'mention' && ( + + {' '} + •{' '} + + + )} +

+ )} {_accounts?.length > 1 && (

{_accounts.map((account, i) => ( @@ -142,7 +144,10 @@ function Notification({ notification }) {

)} {status && ( - + )} diff --git a/src/pages/settings.css b/src/pages/settings.css index 2f7812ca..1d11098c 100644 --- a/src/pages/settings.css +++ b/src/pages/settings.css @@ -1,10 +1,5 @@ -#settings-container { - padding-bottom: 3em; - animation: fade-in 0.2s ease-out; -} - #settings-container h2 { - font-size: .9em; + font-size: 0.9em; text-transform: uppercase; color: var(--text-insignificant-color); } @@ -48,7 +43,7 @@ text-align: right; } #settings-container div, -#settings-container div > *{ +#settings-container div > * { vertical-align: middle; } #settings-container .avatar { @@ -63,7 +58,7 @@ overflow: hidden; padding: 1px; } -#settings-container .radio-group input[type="radio"] { +#settings-container .radio-group input[type='radio'] { opacity: 0; position: absolute; pointer-events: none; @@ -87,4 +82,4 @@ } #settings-container .radio-group label:has(input:checked) input:checked + span { color: inherit; -} \ No newline at end of file +} diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx index 925d6a25..90e5f4c7 100644 --- a/src/pages/settings.jsx +++ b/src/pages/settings.jsx @@ -23,10 +23,10 @@ function Settings({ onClose }) { const [currentDefault, setCurrentDefault] = useState(0); return ( -
- + */}

Accounts

    {accounts.map((account, i) => { diff --git a/src/pages/status.jsx b/src/pages/status.jsx index ca4f35be..7d6f4dd8 100644 --- a/src/pages/status.jsx +++ b/src/pages/status.jsx @@ -1,3 +1,4 @@ +import debounce from 'just-debounce-it'; import { Link } from 'preact-router/match'; import { useEffect, @@ -13,124 +14,168 @@ import Loader from '../components/loader'; import Status from '../components/status'; import shortenNumber from '../utils/shorten-number'; import states from '../utils/states'; +import store from '../utils/store'; import useTitle from '../utils/useTitle'; function StatusPage({ id }) { const snapStates = useSnapshot(states); - const [statuses, setStatuses] = useState([{ id }]); + const [statuses, setStatuses] = useState([]); const [uiState, setUIState] = useState('default'); + const userInitiated = useRef(true); // Initial open is user-initiated const heroStatusRef = useRef(); - useEffect(async () => { - const containsStatus = statuses.find((s) => s.id === id); - const statusesWithSameAccountID = statuses.filter( - (s) => s.accountID === containsStatus?.accountID, - ); - if (statusesWithSameAccountID.length > 1) { - setStatuses( - statusesWithSameAccountID.map((s) => ({ - ...s, - thread: true, - descendant: undefined, - ancestor: undefined, - })), - ); - } else { - setStatuses([{ id }]); - } + const scrollableRef = useRef(); + useEffect(() => { + const onScroll = debounce(() => { + // console.log('onScroll'); + const { scrollTop } = scrollableRef.current; + states.scrollPositions.set(id, scrollTop); + }, 100); + scrollableRef.current.addEventListener('scroll', onScroll, { + passive: true, + }); + onScroll(); + return () => { + scrollableRef.current?.removeEventListener('scroll', onScroll); + }; + }, [id]); + useEffect(() => { setUIState('loading'); - const hasStatus = snapStates.statuses.has(id); - let heroStatus = snapStates.statuses.get(id); - try { - heroStatus = await masto.statuses.fetch(id); - states.statuses.set(id, heroStatus); - } catch (e) { - // Silent fail if status is cached - if (!hasStatus) { - setUIState('error'); - alert('Error fetching status'); + const containsStatus = statuses.find((s) => s.id === id); + if (!containsStatus) { + // Case 1: On first load, or when navigating to a status that's not cached at all + setStatuses([{ id }]); + } else { + const cachedStatuses = store.session.getJSON('statuses-' + id); + if (cachedStatuses) { + // Case 2: Looks like we've cached this status before, let's restore them to make it snappy + const reallyCachedStatuses = cachedStatuses.filter( + (s) => snapStates.statuses.has(s.id), + // Some are not cached in the global state, so we need to filter them out + ); + setStatuses(reallyCachedStatuses); + } else { + // Case 3: Unknown state, could be a sub-comment. Let's slice off all descendant statuses after the hero status to be safe because they are custom-rendered with sub-comments etc + const heroIndex = statuses.findIndex((s) => s.id === id); + const slicedStatuses = statuses.slice(0, heroIndex + 1); + setStatuses(slicedStatuses); } - return; } - try { - const context = await masto.statuses.fetchContext(id); - const { ancestors, descendants } = context; - - ancestors.forEach((status) => { - states.statuses.set(status.id, status); - }); - const nestedDescendants = []; - descendants.forEach((status) => { - states.statuses.set(status.id, status); - if (status.inReplyToAccountId === status.account.id) { - // If replying to self, it's part of the thread, level 1 - nestedDescendants.push(status); - } else if (status.inReplyToId === heroStatus.id) { - // If replying to the hero status, it's a reply, level 1 - nestedDescendants.push(status); - } else { - // If replying to someone else, it's a reply to a reply, level 2 - const parent = descendants.find((s) => s.id === status.inReplyToId); - if (parent) { - if (!parent.__replies) { - parent.__replies = []; - } - parent.__replies.push(status); - } else { - // If no parent, it's probably a reply to a reply to a reply, level 3 - console.warn('[LEVEL 3] No parent found for', status); - } + (async () => { + const hasStatus = snapStates.statuses.has(id); + let heroStatus = snapStates.statuses.get(id); + try { + heroStatus = await masto.statuses.fetch(id); + states.statuses.set(id, heroStatus); + } catch (e) { + // Silent fail if status is cached + if (!hasStatus) { + setUIState('error'); + alert('Error fetching status'); } - }); + return; + } - console.log({ ancestors, descendants, nestedDescendants }); + try { + const context = await masto.statuses.fetchContext(id); + const { ancestors, descendants } = context; - const allStatuses = [ - ...ancestors.map((s) => ({ - id: s.id, - ancestor: true, - accountID: s.account.id, - })), - { id, accountID: heroStatus.account.id }, - ...nestedDescendants.map((s) => ({ - id: s.id, - accountID: s.account.id, - descendant: true, - thread: s.account.id === heroStatus.account.id, - replies: s.__replies?.map((r) => r.id), - })), - ]; - console.log({ allStatuses }); - setStatuses(allStatuses); - } catch (e) { - console.error(e); - setUIState('error'); - } + ancestors.forEach((status) => { + states.statuses.set(status.id, status); + }); + const nestedDescendants = []; + descendants.forEach((status) => { + states.statuses.set(status.id, status); + if (status.inReplyToAccountId === status.account.id) { + // If replying to self, it's part of the thread, level 1 + nestedDescendants.push(status); + } else if (status.inReplyToId === heroStatus.id) { + // If replying to the hero status, it's a reply, level 1 + nestedDescendants.push(status); + } else { + // If replying to someone else, it's a reply to a reply, level 2 + const parent = descendants.find((s) => s.id === status.inReplyToId); + if (parent) { + if (!parent.__replies) { + parent.__replies = []; + } + parent.__replies.push(status); + } else { + // If no parent, it's probably a reply to a reply to a reply, level 3 + console.warn('[LEVEL 3] No parent found for', status); + } + } + }); - setUIState('default'); + console.log({ ancestors, descendants, nestedDescendants }); + + const allStatuses = [ + ...ancestors.map((s) => ({ + id: s.id, + ancestor: true, + accountID: s.account.id, + })), + { id, accountID: heroStatus.account.id }, + ...nestedDescendants.map((s) => ({ + id: s.id, + accountID: s.account.id, + descendant: true, + thread: s.account.id === heroStatus.account.id, + replies: s.__replies?.map((r) => r.id), + })), + ]; + + setUIState('default'); + console.log({ allStatuses }); + setStatuses(allStatuses); + store.session.setJSON('statuses-' + id, allStatuses); + } catch (e) { + console.error(e); + setUIState('error'); + } + })(); }, [id, snapStates.reloadStatusPage]); useLayoutEffect(() => { - if (heroStatusRef.current && statuses.length > 1) { - heroStatusRef.current.scrollIntoView({ - behavior: 'smooth', - block: 'start', - }); + if (!statuses.length) return; + const isLoading = uiState === 'loading'; + if (userInitiated.current) { + const hasAncestors = statuses.findIndex((s) => s.id === id) > 0; // Cannot use `ancestor` key because the hero state is dynamic + if (!isLoading && hasAncestors) { + // Case 1: User initiated, has ancestors, after statuses are loaded, SNAP to hero status + console.log('Case 1'); + heroStatusRef.current?.scrollIntoView(); + } else if (isLoading && statuses.length > 1) { + // Case 2: User initiated, while statuses are loading, SMOOTH-SCROLL to hero status + console.log('Case 2'); + heroStatusRef.current?.scrollIntoView({ + behavior: 'smooth', + block: 'start', + }); + } + } else { + const scrollPosition = states.scrollPositions.get(id); + if (scrollPosition && scrollableRef.current) { + // Case 3: Not user initiated (e.g. back/forward button), restore to saved scroll position + console.log('Case 3'); + scrollableRef.current.scrollTop = scrollPosition; + } } - }, [id]); + console.log('No case', { + isLoading, + userInitiated: userInitiated.current, + statusesLength: statuses.length, + // scrollPosition, + }); - useLayoutEffect(() => { - const hasAncestor = statuses.some((s) => s.ancestor); - if (hasAncestor) { - heroStatusRef.current?.scrollIntoView({ - // behavior: 'smooth', - block: 'start', - }); + if (!isLoading) { + // Reset user initiated flag after statuses are loaded + userInitiated.current = false; } - }, [statuses]); + }, [statuses, uiState]); const heroStatus = snapStates.statuses.get(id); const heroDisplayName = useMemo(() => { @@ -177,11 +222,13 @@ function StatusPage({ id }) { }, [statuses.length, limit]); const hasManyStatuses = statuses.length > 40; + const hasDescendants = statuses.some((s) => s.descendant); return (
    1 ? 'padded-bottom' : '' }`} @@ -200,7 +247,11 @@ function StatusPage({ id }) {
    -
      +
        {statuses.slice(0, limit).map((status) => { const { id: statusID, @@ -216,7 +267,7 @@ function StatusPage({ id }) { ref={isHero ? heroStatusRef : null} class={`${ancestor ? 'ancestor' : ''} ${ descendant ? 'descendant' : '' - } ${thread ? 'thread' : ''}`} + } ${thread ? 'thread' : ''} ${isHero ? 'hero' : ''}`} > {isHero ? ( @@ -226,6 +277,9 @@ function StatusPage({ id }) { status-link " href={`#/s/${statusID}`} + onClick={() => { + userInitiated.current = true; + }} > {replies.map((replyID) => (
      • - + { + userInitiated.current = true; + }} + >
        • @@ -256,7 +316,7 @@ function StatusPage({ id }) { {uiState === 'loading' && isHero && !!heroStatus?.repliesCount && - statuses.length === 1 && ( + !hasDescendants && (
        diff --git a/src/pages/welcome.css b/src/pages/welcome.css index 4bd7a456..1a341973 100644 --- a/src/pages/welcome.css +++ b/src/pages/welcome.css @@ -1,39 +1,41 @@ #welcome { text-align: center; + background-image: radial-gradient( + closest-side at 50% 50%, + var(--bg-faded-color), + transparent + ); + padding: 16px; } -#welcome img { - margin-top: 16px; - height: auto; +#welcome h1 { + margin: 0; + padding: 0; + font-size: 1.2em; } -@keyframes dance { +#welcome img { + vertical-align: top; +} + +#welcome h2 { + font-size: 3em; + letter-spacing: -0.05ex; + margin: 16px 0; + padding: 0; + /* gradiented text */ + background: linear-gradient(45deg, var(--purple-color), var(--red-color)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +@keyframes psychedelic { 0% { - transform: rotate(0deg); - } - 20% { - transform: rotate(5deg); - } - 40% { - transform: rotate(-5deg); - } - 60% { - transform: rotate(5deg); - } - 80% { - transform: rotate(-5deg); + filter: hue-rotate(0deg); } 100% { - transform: rotate(0deg); + filter: hue-rotate(360deg); } } -#welcome:hover img { - animation: dance 2s infinite 15s linear; +#welcome:hover h2 { + animation: psychedelic 60s infinite; } - -#welcome .warning { - font-weight: bold; - padding: 16px; - background: lemonchiffon; - color: chocolate; - border-radius: 16px; -} \ No newline at end of file diff --git a/src/pages/welcome.jsx b/src/pages/welcome.jsx index f9940a98..4ba7e7c2 100644 --- a/src/pages/welcome.jsx +++ b/src/pages/welcome.jsx @@ -6,22 +6,25 @@ import useTitle from '../utils/useTitle'; function Welcome() { useTitle(); return ( -
        - -

        Welcome

        -

        Phanpy is a minimalistic opinionated Mastodon web client.

        -

        - 🚧 This is an early ALPHA project. Many features are missing, many bugs - are present. Please report issues as detailed as possible. Thanks 🙏 -

        +
        +

        + {' '} + Phanpy +

        +

        + Trunk-tastic +
        + Mastodon Experience +

        +

        A minimalistic opinionated Mastodon web client.

        diff --git a/src/utils/states.js b/src/utils/states.js index 31b14380..cc3f6b3a 100644 --- a/src/utils/states.js +++ b/src/utils/states.js @@ -10,8 +10,10 @@ export default proxy({ notifications: [], notificationsNew: [], notificationsLastFetchTime: null, - accounts: new WeakMap(), + accounts: new Map(), reloadStatusPage: 0, + spoilers: proxyMap([]), + scrollPositions: new Map(), // Modals showCompose: false, showSettings: false, diff --git a/vite.config.js b/vite.config.js index e762e750..fb906535 100644 --- a/vite.config.js +++ b/vite.config.js @@ -35,6 +35,12 @@ export default defineConfig({ sizes: '512x512', type: 'image/png', }, + { + src: 'logo-maskable-512.png', + sizes: '512x512', + type: 'image/png', + purpose: 'maskable', + }, ], }, strategies: 'injectManifest',