From d2fb86036c04f64fd5d9cc29604657b97ec4652b Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Mon, 1 Jan 2024 18:29:21 +0800 Subject: [PATCH 01/23] Remove DEV check It refers to local dev, not the dev site --- src/components/media-modal.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/media-modal.jsx b/src/components/media-modal.jsx index 968988bf5..8508fe2b7 100644 --- a/src/components/media-modal.jsx +++ b/src/components/media-modal.jsx @@ -295,8 +295,7 @@ function MediaModal({ Open original media - {import.meta.env.DEV && // Only dev for now - !!states.settings.mediaAltGenerator && + {!!states.settings.mediaAltGenerator && !!IMG_ALT_API_URL && !!mediaAttachments[currentIndex]?.url && !mediaAttachments[currentIndex]?.description && From b168707c1448235f77e9ef439abc467df68e68e0 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Mon, 1 Jan 2024 18:31:59 +0800 Subject: [PATCH 02/23] Revert "Remove DEV check" This reverts commit d2fb86036c04f64fd5d9cc29604657b97ec4652b. --- src/components/media-modal.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/media-modal.jsx b/src/components/media-modal.jsx index 8508fe2b7..968988bf5 100644 --- a/src/components/media-modal.jsx +++ b/src/components/media-modal.jsx @@ -295,7 +295,8 @@ function MediaModal({ Open original media - {!!states.settings.mediaAltGenerator && + {import.meta.env.DEV && // Only dev for now + !!states.settings.mediaAltGenerator && !!IMG_ALT_API_URL && !!mediaAttachments[currentIndex]?.url && !mediaAttachments[currentIndex]?.description && From cf52e0776ef43535afed491f272c91c214830c9b Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Tue, 2 Jan 2024 12:20:36 +0800 Subject: [PATCH 03/23] Don't need reachStart from useScroll --- src/pages/search.jsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/pages/search.jsx b/src/pages/search.jsx index e55440ad7..7c4f6ea32 100644 --- a/src/pages/search.jsx +++ b/src/pages/search.jsx @@ -17,7 +17,6 @@ import { api } from '../utils/api'; import { fetchRelationships } from '../utils/relationships'; import shortenNumber from '../utils/shorten-number'; import usePageVisibility from '../utils/usePageVisibility'; -import useScroll from '../utils/useScroll'; import useTitle from '../utils/useTitle'; const SHORT_LIMIT = 5; @@ -151,11 +150,9 @@ function Search({ columnMode, ...props }) { })(); } - const { reachStart } = useScroll({ - scrollableRef, - }); const lastHiddenTime = useRef(); usePageVisibility((visible) => { + const reachStart = scrollableRef.current?.scrollTop === 0; if (visible && reachStart) { const timeDiff = Date.now() - lastHiddenTime.current; if (!lastHiddenTime.current || timeDiff > 1000 * 3) { From 0ebbc5b34ecedf7886726d8a457318debe50b41a Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Tue, 2 Jan 2024 12:24:03 +0800 Subject: [PATCH 04/23] Don't need nearReachEnd, use InView more --- src/components/timeline.jsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx index 255330181..3af0f3df3 100644 --- a/src/components/timeline.jsx +++ b/src/components/timeline.jsx @@ -239,9 +239,10 @@ function Timeline({ setNearReachStart(nearReachStart); if (reachStart) { loadItems(true); - } else if (nearReachEnd || (reachEnd && showMore)) { - loadItems(); } + // else if (nearReachEnd || (reachEnd && showMore)) { + // loadItems(); + // } }, [], ); @@ -451,6 +452,8 @@ function Timeline({ {uiState === 'default' && (showMore ? ( { if (inView) { loadItems(); From df393ae959330ad21f43aedd3026be21da8a9a52 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Tue, 2 Jan 2024 12:25:01 +0800 Subject: [PATCH 05/23] Use InView to replace nearReachStart --- src/pages/status.jsx | 40 +++++++++++++++++++++++----------------- 1 file changed, 23 insertions(+), 17 deletions(-) diff --git a/src/pages/status.jsx b/src/pages/status.jsx index e52ee7e03..2ae42c704 100644 --- a/src/pages/status.jsx +++ b/src/pages/status.jsx @@ -545,7 +545,6 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) { const ancestors = statuses.filter((s) => s.ancestor); const [heroInView, setHeroInView] = useState(true); - const onView = useDebouncedCallback(setHeroInView, 100); const heroPointer = useMemo(() => { // get top offset of heroStatus if (!heroStatusRef.current || heroInView) return null; @@ -652,10 +651,11 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) { } }); - const { nearReachStart } = useScroll({ - scrollableRef, - distanceFromStartPx: 16, - }); + const [reachTopPost, setReachTopPost] = useState(false); + // const { nearReachStart } = useScroll({ + // scrollableRef, + // distanceFromStartPx: 16, + // }); const initialPageState = useRef(showMedia ? 'media+status' : 'status'); @@ -693,7 +693,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) { }, [mediaStatusID, showMedia]); const renderStatus = useCallback( - (status) => { + (status, i) => { const { id: statusID, ancestor, @@ -735,7 +735,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) { <> @@ -810,15 +810,21 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) { resetScrollPosition(statusID); }} > - + + + {ancestor && repliesCount > 1 && (
{' '} @@ -1011,7 +1017,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) { behavior: 'smooth', }); }} - hidden={!ancestors.length || nearReachStart} + hidden={!ancestors.length || reachTopPost} title={`${ancestors.length} posts above ‒ Go to top`} > From d8ceb03d74a699749a08cf9d3cbc84917c27cfab Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Tue, 2 Jan 2024 12:25:25 +0800 Subject: [PATCH 06/23] Throttle scroll events --- src/utils/useScrollFn.js | 102 ++++++++++++++++++++------------------- 1 file changed, 53 insertions(+), 49 deletions(-) diff --git a/src/utils/useScrollFn.js b/src/utils/useScrollFn.js index ffa677bab..20141e2c5 100644 --- a/src/utils/useScrollFn.js +++ b/src/utils/useScrollFn.js @@ -1,4 +1,5 @@ -import { useEffect, useLayoutEffect, useState } from 'preact/hooks'; +import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks'; +import { useThrottledCallback } from 'use-debounce'; export default function useScrollFn( { @@ -22,60 +23,63 @@ export default function useScrollFn( const [nearReachStart, setNearReachStart] = useState(false); const [nearReachEnd, setNearReachEnd] = useState(false); const isVertical = direction === 'vertical'; + const previousScrollStart = useRef(null); - useLayoutEffect(() => { + const onScroll = useThrottledCallback(() => { const scrollableElement = scrollableRef.current; - if (!scrollableElement) return {}; - let previousScrollStart = isVertical - ? scrollableElement.scrollTop - : scrollableElement.scrollLeft; - - function onScroll() { - const { - scrollTop, - scrollLeft, - scrollHeight, - scrollWidth, - clientHeight, - clientWidth, - } = scrollableElement; - const scrollStart = isVertical ? scrollTop : scrollLeft; - const scrollDimension = isVertical ? scrollHeight : scrollWidth; - const clientDimension = isVertical ? clientHeight : clientWidth; - const scrollDistance = Math.abs(scrollStart - previousScrollStart); - const distanceFromStartPx = - _distanceFromStartPx || - Math.min( - clientDimension * distanceFromStart, - scrollDimension, - scrollStart, - ); - const distanceFromEndPx = - _distanceFromEndPx || - Math.min( - clientDimension * distanceFromEnd, - scrollDimension, - scrollDimension - scrollStart - clientDimension, - ); - - if ( - scrollDistance >= - (previousScrollStart < scrollStart - ? scrollThresholdEnd - : scrollThresholdStart) - ) { - setScrollDirection(previousScrollStart < scrollStart ? 'end' : 'start'); - previousScrollStart = scrollStart; - } + const { + scrollTop, + scrollLeft, + scrollHeight, + scrollWidth, + clientHeight, + clientWidth, + } = scrollableElement; + const scrollStart = isVertical ? scrollTop : scrollLeft; + const scrollDimension = isVertical ? scrollHeight : scrollWidth; + const clientDimension = isVertical ? clientHeight : clientWidth; + const scrollDistance = Math.abs(scrollStart - previousScrollStart.current); + const distanceFromStartPx = + _distanceFromStartPx || + Math.min( + clientDimension * distanceFromStart, + scrollDimension, + scrollStart, + ); + const distanceFromEndPx = + _distanceFromEndPx || + Math.min( + clientDimension * distanceFromEnd, + scrollDimension, + scrollDimension - scrollStart - clientDimension, + ); - setReachStart(scrollStart <= 0); - setReachEnd(scrollStart + clientDimension >= scrollDimension); - setNearReachStart(scrollStart <= distanceFromStartPx); - setNearReachEnd( - scrollStart + clientDimension >= scrollDimension - distanceFromEndPx, + if ( + scrollDistance >= + (previousScrollStart.current < scrollStart + ? scrollThresholdEnd + : scrollThresholdStart) + ) { + setScrollDirection( + previousScrollStart.current < scrollStart ? 'end' : 'start', ); + previousScrollStart.current = scrollStart; } + setReachStart(scrollStart <= 0); + setReachEnd(scrollStart + clientDimension >= scrollDimension); + setNearReachStart(scrollStart <= distanceFromStartPx); + setNearReachEnd( + scrollStart + clientDimension >= scrollDimension - distanceFromEndPx, + ); + }, 500); + + useLayoutEffect(() => { + const scrollableElement = scrollableRef.current; + if (!scrollableElement) return {}; + previousScrollStart.current = + scrollableElement[isVertical ? 'scrollTop' : 'scrollLeft']; + scrollableElement.addEventListener('scroll', onScroll, { passive: true }); return () => scrollableElement.removeEventListener('scroll', onScroll); From d54511aa10945d2d29d4a2f3101ca432a8cf73fb Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Tue, 2 Jan 2024 12:27:22 +0800 Subject: [PATCH 07/23] Test a bunch of perf-related style changes --- src/app.css | 16 ++++++++++------ src/components/media-post.css | 2 +- src/components/shortcuts.css | 6 ++++-- src/components/status.css | 4 ++-- 4 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/app.css b/src/app.css index 8befdfaf5..73a7851f9 100644 --- a/src/app.css +++ b/src/app.css @@ -144,9 +144,10 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { user-select: none; } .deck > header .header-grid { - background-color: var(--bg-blur-color); + background-color: var(--bg-color); + /* background-color: var(--bg-blur-color); background-image: linear-gradient(to bottom, var(--bg-color), transparent); - backdrop-filter: saturate(180%) blur(20px); + backdrop-filter: saturate(180%) blur(20px); */ border-bottom: var(--hairline-width) solid var(--divider-color); min-height: 3em; display: grid; @@ -895,7 +896,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { .status-carousel > ul { display: flex; overflow-x: auto; - overflow-y: hidden; + overflow-y: clip; scroll-snap-type: x mandatory; scroll-behavior: smooth; margin: 0; @@ -904,6 +905,8 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { align-items: flex-start; counter-reset: index; min-height: 160px; + max-height: 65vh; + max-height: 65dvh; } .status-carousel > ul > li { scroll-snap-align: center; @@ -915,8 +918,8 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { list-style: none; margin: 0; padding: 0; - max-height: 65vh; - max-height: 65dvh; + /* max-height: 65vh; + max-height: 65dvh; */ counter-increment: index; position: relative; } @@ -1422,7 +1425,7 @@ body:has(.media-modal-container + .status-deck) .media-post-link { right: max(16px, env(safe-area-inset-right)); padding: 16px; background-color: var(--button-bg-blur-color); - backdrop-filter: blur(16px); + /* backdrop-filter: blur(16px); */ z-index: 10; box-shadow: 0 3px 8px -1px var(--drop-shadow-color), 0 10px 36px -4px var(--button-bg-blur-color); @@ -2471,6 +2474,7 @@ ul.link-list li a .icon { border-bottom: 0; border-radius: 16px; background-color: var(--bg-faded-blur-color); + backdrop-filter: blur(16px); background-image: none; border-radius: 16px; min-height: 4em; diff --git a/src/components/media-post.css b/src/components/media-post.css index b9ba419d2..2a52a11a1 100644 --- a/src/components/media-post.css +++ b/src/components/media-post.css @@ -34,7 +34,7 @@ word-break: break-word; word-wrap: break-word; overflow-wrap: break-word; - mix-blend-mode: luminosity; + /* mix-blend-mode: luminosity; */ -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; diff --git a/src/components/shortcuts.css b/src/components/shortcuts.css index 59bee8f7e..69e680bed 100644 --- a/src/components/shortcuts.css +++ b/src/components/shortcuts.css @@ -59,8 +59,9 @@ left: 0; right: 0; z-index: 100; - background-color: var(--bg-blur-color); - backdrop-filter: blur(16px) saturate(3); + background-color: var(--bg-color); + /* background-color: var(--bg-blur-color); + backdrop-filter: blur(16px) saturate(3); */ border-top: var(--hairline-width) solid var(--outline-color); box-shadow: 0 -8px 16px -8px var(--drop-shadow-color); overflow: auto; @@ -165,6 +166,7 @@ shortcuts .tab-bar[hidden] { padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); background-color: var(--bg-faded-blur-color); + backdrop-filter: blur(16px); border: 0; box-shadow: none; border-bottom: var(--hairline-width) solid var(--bg-faded-color); diff --git a/src/components/status.css b/src/components/status.css index 10deb5d51..ec8e83a4f 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -206,7 +206,7 @@ .status-card:not(.status-carousel .status) :is(.content, .poll, .media-container) { max-height: 160px !important; - overflow: hidden; + overflow: clip; } .status.small:not(.status-carousel .status) .status-card @@ -1957,7 +1957,7 @@ a.card:is(:hover, :focus):visited { color: var(--media-fg-color); background-color: var(--media-bg-color); border: var(--hairline-width) solid var(--media-outline-color); - mix-blend-mode: luminosity; + /* mix-blend-mode: luminosity; */ border-radius: 4px; padding: 4px; opacity: 0.65; From 852f7090f6b6f17ceb5dc934f44edc47493c94fe Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Tue, 2 Jan 2024 12:27:39 +0800 Subject: [PATCH 08/23] Status card style changes --- src/app.css | 4 ++++ src/components/status.css | 7 ++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/app.css b/src/app.css index 73a7851f9..a8ba5ecd4 100644 --- a/src/app.css +++ b/src/app.css @@ -944,6 +944,10 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { } .status-carousel .content-container .content:only-child { font-size: calc(100% + 25% * max(2 - var(--content-text-weight), 0)); + + &:has(.status-card) { + font-size: unset; + } } /* .status-carousel .content-container[data-content-text-weight='1'] diff --git a/src/components/status.css b/src/components/status.css index ec8e83a4f..ecfd0c9da 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -208,7 +208,7 @@ max-height: 160px !important; overflow: clip; } -.status.small:not(.status-carousel .status) +.status.small:not(.status-carousel .status, .status.large .status) .status-card :is(.content, .poll, .media-container) { max-height: 80px !important; @@ -959,6 +959,11 @@ height: auto; max-height: 60vh; } +.status.status-card .media-container.media-eq1 .media { + max-height: 160px; + width: auto; + max-width: min(var(--width), 100%); +} /* Special media borders */ .status .media-container.media-eq2 .media:first-of-type { border-radius: var(--media-radius) var(--media-radius-inner) From e41e49884ff57e86dcade3f91eca41c97bd2c33a Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Tue, 2 Jan 2024 17:45:21 +0800 Subject: [PATCH 09/23] Less paragraph margins for status cards --- src/components/status.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/status.css b/src/components/status.css index ecfd0c9da..be0e33a98 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -730,6 +730,9 @@ tab-size: 2; text-wrap: pretty; } +.status-card .content p { + margin-block: min(0.25em, 4px); +} .status .content p:first-child { margin-block-start: 0; } From 098df0ad2cba0adc770ebb78984c074ca3c137e8 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Tue, 2 Jan 2024 17:45:58 +0800 Subject: [PATCH 10/23] Test move this out of component mount It needs to run faster --- src/components/notification-service.jsx | 54 ++++++++++++++++--------- 1 file changed, 35 insertions(+), 19 deletions(-) diff --git a/src/components/notification-service.jsx b/src/components/notification-service.jsx index 741e5f2e7..7f071a3e8 100644 --- a/src/components/notification-service.jsx +++ b/src/components/notification-service.jsx @@ -15,6 +15,22 @@ import Link from './link'; import Modal from './modal'; import Notification from './notification'; +{ + if ('serviceWorker' in navigator) { + console.log('👂👂👂 Listen to message'); + navigator.serviceWorker.addEventListener('message', (event) => { + console.log('💥💥💥 Message event', event); + const { type, id, accessToken } = event?.data || {}; + if (type === 'notification') { + states.routeNotification = { + id, + accessToken, + }; + } + }); + } +} + export default memo(function NotificationService() { if (!('serviceWorker' in navigator)) return null; @@ -82,25 +98,25 @@ export default memo(function NotificationService() { })(); }, [id, accessToken]); - useLayoutEffect(() => { - // Listen to message from service worker - const handleMessage = (event) => { - console.log('💥💥💥 Message event', event); - const { type, id, accessToken } = event?.data || {}; - if (type === 'notification') { - states.routeNotification = { - id, - accessToken, - }; - } - }; - console.log('👂👂👂 Listen to message'); - navigator.serviceWorker.addEventListener('message', handleMessage); - return () => { - console.log('👂👂👂 Remove listen to message'); - navigator.serviceWorker.removeEventListener('message', handleMessage); - }; - }, []); + // useLayoutEffect(() => { + // // Listen to message from service worker + // const handleMessage = (event) => { + // console.log('💥💥💥 Message event', event); + // const { type, id, accessToken } = event?.data || {}; + // if (type === 'notification') { + // states.routeNotification = { + // id, + // accessToken, + // }; + // } + // }; + // console.log('👂👂👂 Listen to message'); + // navigator.serviceWorker.addEventListener('message', handleMessage); + // return () => { + // console.log('👂👂👂 Remove listen to message'); + // navigator.serviceWorker.removeEventListener('message', handleMessage); + // }; + // }, []); useLayoutEffect(() => { if (navigator?.clearAppBadge) { From 764125e6b95af923643b1a4be82975ff79a8826c Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Tue, 2 Jan 2024 19:26:05 +0800 Subject: [PATCH 11/23] Test replace scroll-based to inview --- src/app.css | 12 ++++++++++- src/components/timeline.jsx | 41 +++++++++++++++++++++++++------------ 2 files changed, 39 insertions(+), 14 deletions(-) diff --git a/src/app.css b/src/app.css index a8ba5ecd4..36061c9a8 100644 --- a/src/app.css +++ b/src/app.css @@ -894,6 +894,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { text-shadow: 0 1px var(--bg-color); } .status-carousel > ul { + --carousel-gap: 16px; display: flex; overflow-x: auto; overflow-y: clip; @@ -901,7 +902,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { scroll-behavior: smooth; margin: 0; padding: 8px 16px; - gap: 16px; + gap: var(--carousel-gap); align-items: flex-start; counter-reset: index; min-height: 160px; @@ -926,6 +927,15 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { .status-carousel > ul > li:is(:empty, :has(> a:empty)) { display: none; } +.status-carousel .status-carousel-beacon { + margin-right: calc(-1 * var(--carousel-gap)); + pointer-events: none; + opacity: 0; + + ~ .status-carousel-beacon { + margin-left: calc(-1 * var(--carousel-gap)); + } +} /* Assume that browsers that do support inline-size property also support container queries. https://www.smashingmagazine.com/2021/05/css-container-queries-use-cases-migration-strategies/#progressive-enhancement-polyfills diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx index 3af0f3df3..2939c8eb7 100644 --- a/src/components/timeline.jsx +++ b/src/components/timeline.jsx @@ -698,18 +698,18 @@ function StatusCarousel({ title, class: className, children }) { // }); const startButtonRef = useRef(); const endButtonRef = useRef(); - useScrollFn( - { - scrollableRef: carouselRef, - direction: 'horizontal', - init: true, - }, - ({ reachStart, reachEnd }) => { - if (startButtonRef.current) startButtonRef.current.disabled = reachStart; - if (endButtonRef.current) endButtonRef.current.disabled = reachEnd; - }, - [], - ); + // useScrollFn( + // { + // scrollableRef: carouselRef, + // direction: 'horizontal', + // init: true, + // }, + // ({ reachStart, reachEnd }) => { + // if (startButtonRef.current) startButtonRef.current.disabled = reachStart; + // if (endButtonRef.current) endButtonRef.current.disabled = reachEnd; + // }, + // [], + // ); // useEffect(() => { // init?.(); // }, []); @@ -749,7 +749,22 @@ function StatusCarousel({ title, class: className, children }) { -
    {children}
+
    + { + if (startButtonRef.current) + startButtonRef.current.disabled = inView; + }} + /> + {children} + { + if (endButtonRef.current) endButtonRef.current.disabled = inView; + }} + /> +
); } From b4d4c61128dbaddeabdf6694926e514d13e3a2cc Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Tue, 2 Jan 2024 19:56:54 +0800 Subject: [PATCH 12/23] Experiment delay render items in carousel --- src/components/timeline.jsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx index 2939c8eb7..7e792c4ae 100644 --- a/src/components/timeline.jsx +++ b/src/components/timeline.jsx @@ -714,6 +714,13 @@ function StatusCarousel({ title, class: className, children }) { // init?.(); // }, []); + const [render, setRender] = useState(false); + useEffect(() => { + setTimeout(() => { + setRender(true); + }, 1); + }, []); + return (
@@ -757,7 +764,8 @@ function StatusCarousel({ title, class: className, children }) { startButtonRef.current.disabled = inView; }} /> - {children} + {children[0]} + {render && children.slice(1)} { From 1adcca5666bfb37057499f5a553fed3756c92906 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Wed, 3 Jan 2024 07:27:39 +0800 Subject: [PATCH 13/23] Fix destructure error --- src/utils/get-instance-status-url.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/get-instance-status-url.js b/src/utils/get-instance-status-url.js index ebbcaa949..042e85830 100644 --- a/src/utils/get-instance-status-url.js +++ b/src/utils/get-instance-status-url.js @@ -22,7 +22,7 @@ export function getInstanceStatusObject(url) { }; } } - return null; + return {}; } function getInstanceStatusURL(url) { From 92c0a8b4f00c4c4577d9a4ba5a300fba13200ad7 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Wed, 3 Jan 2024 09:49:48 +0800 Subject: [PATCH 14/23] Test memoize svg icon --- src/components/icon.jsx | 52 +++++++++++++++++++++++++++++++++-------- 1 file changed, 42 insertions(+), 10 deletions(-) diff --git a/src/components/icon.jsx b/src/components/icon.jsx index e444cd4b8..3a2aea256 100644 --- a/src/components/icon.jsx +++ b/src/components/icon.jsx @@ -1,3 +1,4 @@ +import moize from 'moize'; import { useEffect, useRef, useState } from 'preact/hooks'; const SIZES = { @@ -110,6 +111,29 @@ export const ICONS = { const ICONDATA = {}; +// Memoize the dangerouslySetInnerHTML of the SVGs +const SVGICon = moize( + function ({ size, width, height, body, rotate, flip }) { + return ( + + ); + }, + { + isShallowEqual: true, + maxSize: Object.keys(ICONS).length, + }, +); + function Icon({ icon, size = 'm', @@ -150,16 +174,24 @@ function Icon({ }} > {iconData && ( - + )} From 72dc4cc81b75d9182434ab78579ac1fa576f2bf5 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Wed, 3 Jan 2024 09:53:08 +0800 Subject: [PATCH 15/23] Test disable menu animation --- src/app.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app.css b/src/app.css index 36061c9a8..c311881b8 100644 --- a/src/app.css +++ b/src/app.css @@ -1652,7 +1652,7 @@ body > .szh-menu-container { border-radius: 8px; box-shadow: 0 3px 16px -3px var(--drop-shadow-color); text-align: left; - animation: appear-smooth 0.15s ease-in-out; + /* animation: appear-smooth 0.15s ease-in-out; */ width: 16em; max-width: 90vw; /* overflow: hidden; */ From 3d4ebb8abe114833095da7f95015d9a15e52d643 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Wed, 3 Jan 2024 10:54:55 +0800 Subject: [PATCH 16/23] Adjust rootMargin --- src/components/timeline.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx index 7e792c4ae..c56c27bad 100644 --- a/src/components/timeline.jsx +++ b/src/components/timeline.jsx @@ -453,7 +453,7 @@ function Timeline({ (showMore ? ( { if (inView) { loadItems(); From 848433365d097be10b38b9600d78f66a22abf524 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Thu, 4 Jan 2024 18:55:14 +0800 Subject: [PATCH 17/23] Don't limit 80px if more than 2 media --- src/components/status.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/status.css b/src/components/status.css index be0e33a98..8921b7e54 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -210,7 +210,7 @@ } .status.small:not(.status-carousel .status, .status.large .status) .status-card - :is(.content, .poll, .media-container) { + :is(.content, .poll, .media-container:not(.media-gt2)) { max-height: 80px !important; } .status.large .status-card :is(.content, .poll, .media-container) { From d25c2df392bd62c8c12dfb60832bf654f6afa9f4 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Thu, 4 Jan 2024 18:55:21 +0800 Subject: [PATCH 18/23] Warn if icon not found --- src/components/icon.jsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/icon.jsx b/src/components/icon.jsx index 3a2aea256..1f60dcbae 100644 --- a/src/components/icon.jsx +++ b/src/components/icon.jsx @@ -146,6 +146,11 @@ function Icon({ const iconSize = SIZES[size]; let iconBlock = ICONS[icon]; + if (!iconBlock) { + console.warn(`Icon ${icon} not found`); + return null; + } + let rotate, flip; if (Array.isArray(iconBlock)) { [iconBlock, rotate, flip] = iconBlock; From c0987209a8ac61163f32feb72152e3c793811f58 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Thu, 4 Jan 2024 18:56:11 +0800 Subject: [PATCH 19/23] Only threadify & unfurl non-reblog post object --- src/utils/states.js | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/src/utils/states.js b/src/utils/states.js index 25ffb849c..9f1d986ae 100644 --- a/src/utils/states.js +++ b/src/utils/states.js @@ -192,19 +192,14 @@ export function saveStatus(status, instance, opts) { // THREAD TRAVERSER if (!skipThreading) { queueMicrotask(() => { - threadifyStatus(status, instance); - if (status.reblog) { - queueMicrotask(() => { - threadifyStatus(status.reblog, instance); - }); - } + threadifyStatus(status.reblog || status, instance); }); } // UNFURLER if (!skipUnfurling) { queueMicrotask(() => { - unfurlStatus(status, instance); + unfurlStatus(status.reblog || status, instance); }); } } @@ -253,10 +248,10 @@ export const threadifyStatus = rateLimit(_threadifyStatus, 100); const fauxDiv = document.createElement('div'); export function unfurlStatus(status, instance) { const { instance: currentInstance } = api(); - const content = status.reblog?.content || status.content; + const content = status?.content; const hasLink = / Date: Thu, 4 Jan 2024 19:08:51 +0800 Subject: [PATCH 20/23] Remove unneeded .inview --- src/pages/status.css | 4 ---- src/pages/status.jsx | 4 +--- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/src/pages/status.css b/src/pages/status.css index be46cb936..dbd49d126 100644 --- a/src/pages/status.css +++ b/src/pages/status.css @@ -12,10 +12,6 @@ margin-left: -16px; } -.status-deck header.inview h1 { - font-weight: bold; -} - .hero-heading { font-size: var(--text-size); display: inline-block; diff --git a/src/pages/status.jsx b/src/pages/status.jsx index 2ae42c704..9ac5024e9 100644 --- a/src/pages/status.jsx +++ b/src/pages/status.jsx @@ -941,9 +941,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) { }} >
{ // reload statuses states.reloadStatusPage++; From a8331375ba466a1c62c6c765adc0f965b2495f9e Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Thu, 4 Jan 2024 19:09:30 +0800 Subject: [PATCH 21/23] Double make sure header change doesn't block scrolling --- src/pages/status.css | 1 + src/pages/status.jsx | 16 ++++++++++++++-- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/pages/status.css b/src/pages/status.css index dbd49d126..49bca4480 100644 --- a/src/pages/status.css +++ b/src/pages/status.css @@ -7,6 +7,7 @@ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; + align-self: stretch; } .status-deck header h1 .deck-back { margin-left: -16px; diff --git a/src/pages/status.jsx b/src/pages/status.jsx index 9ac5024e9..69612e4fa 100644 --- a/src/pages/status.jsx +++ b/src/pages/status.jsx @@ -735,7 +735,13 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) { <> { + queueMicrotask(() => { + requestAnimationFrame(() => { + setHeroInView(inView); + }); + }); + }} class="status-focus" tabIndex={0} > @@ -813,7 +819,13 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) { { + queueMicrotask(() => { + requestAnimationFrame(() => { + setReachTopPost(inView); + }); + }); + }} > Date: Thu, 4 Jan 2024 22:00:27 +0800 Subject: [PATCH 22/23] Need to encode the query --- src/components/shortcuts-settings.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/shortcuts-settings.jsx b/src/components/shortcuts-settings.jsx index 7a6c5b7b1..db7b6cb1f 100644 --- a/src/components/shortcuts-settings.jsx +++ b/src/components/shortcuts-settings.jsx @@ -172,7 +172,9 @@ export const SHORTCUTS_META = { id: 'search', title: ({ query }) => (query ? `"${query}"` : 'Search'), path: ({ query }) => - query ? `/search?q=${query}&type=statuses` : '/search', + query + ? `/search?q=${encodeURIComponent(query)}&type=statuses` + : '/search', icon: 'search', excludeViewMode: ({ query }) => (!query ? ['multi-column'] : []), }, From 2bc1b8387e93700688772e9a93d774d81d105353 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 5 Jan 2024 09:14:09 +0800 Subject: [PATCH 23/23] Fix missing name & short_name inside webmanifest Need to pass env prefix to loadEnv too --- vite.config.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/vite.config.js b/vite.config.js index d2ce17d12..3654ea8d8 100644 --- a/vite.config.js +++ b/vite.config.js @@ -9,11 +9,12 @@ import htmlPlugin from 'vite-plugin-html-config'; import { VitePWA } from 'vite-plugin-pwa'; import removeConsole from 'vite-plugin-remove-console'; +const allowedEnvPrefixes = ['VITE_', 'PHANPY_']; const { NODE_ENV } = process.env; const { PHANPY_CLIENT_NAME: CLIENT_NAME, PHANPY_APP_ERROR_LOGGING: ERROR_LOGGING, -} = loadEnv('production', process.cwd()); +} = loadEnv('production', process.cwd(), allowedEnvPrefixes); const now = new Date(); let commitHash; @@ -35,7 +36,7 @@ const rollbarCode = fs.readFileSync( // https://vitejs.dev/config/ export default defineConfig({ base: './', - envPrefix: ['VITE_', 'PHANPY_'], + envPrefix: allowedEnvPrefixes, mode: NODE_ENV, define: { __BUILD_TIME__: JSON.stringify(now),