From 05bf79870a7accbdc8155662f5c9f3d97b7ba171 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sat, 8 Apr 2023 10:47:41 +0800 Subject: [PATCH 001/122] Attempt to fix more vertical alignments --- src/components/name-text.css | 5 +++++ src/components/name-text.jsx | 2 +- src/components/status.css | 5 ----- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/name-text.css b/src/components/name-text.css index 1db35970..a9a4c2a7 100644 --- a/src/components/name-text.css +++ b/src/components/name-text.css @@ -1,6 +1,11 @@ .name-text { color: inherit; text-decoration: none; + display: inline-flex; + gap: 4px; + align-items: center; +} +.name-text.show-acct { display: inline-block; } a.name-text:is(:hover, :focus) b, diff --git a/src/components/name-text.jsx b/src/components/name-text.jsx index 36e8c198..3c563557 100644 --- a/src/components/name-text.jsx +++ b/src/components/name-text.jsx @@ -36,7 +36,7 @@ function NameText({ return ( * { vertical-align: middle; } From 1e34ce92f8e9fd20cb590a3de9829b5eaa90aba8 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sat, 8 Apr 2023 13:18:15 +0800 Subject: [PATCH 002/122] Cloak mode --- src/app.jsx | 1 + src/cloak-mode.css | 12 ++++++++++++ 2 files changed, 13 insertions(+) create mode 100644 src/cloak-mode.css diff --git a/src/app.jsx b/src/app.jsx index 79dd9b04..96e0499f 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -1,5 +1,6 @@ import './app.css'; +// import './cloak-mode.css'; import { useEffect, useLayoutEffect, diff --git a/src/cloak-mode.css b/src/cloak-mode.css new file mode 100644 index 00000000..2d1e1505 --- /dev/null +++ b/src/cloak-mode.css @@ -0,0 +1,12 @@ +@import url('https://fonts.googleapis.com/css2?family=Flow+Circular&family=Noto+Emoji&display=swap'); + +.status-pre-meta, +.status .container { + font-family: 'Flow Circular', 'Noto Emoji', cursive; +} + +.status :is(img, video, audio), +.avatar { + filter: invert(0.5); + background-color: #000 !important; +} From 4f5709a55c4976563c7252add044c775f0847221 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sat, 8 Apr 2023 16:52:04 +0800 Subject: [PATCH 003/122] yet another vertical alignment fix --- src/components/name-text.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/name-text.css b/src/components/name-text.css index a9a4c2a7..e8f88643 100644 --- a/src/components/name-text.css +++ b/src/components/name-text.css @@ -1,9 +1,7 @@ .name-text { color: inherit; text-decoration: none; - display: inline-flex; - gap: 4px; - align-items: center; + display: inline; } .name-text.show-acct { display: inline-block; @@ -20,4 +18,5 @@ a.name-text.short:is(:hover, :focus) i { .name-text .avatar { vertical-align: middle; + transform: translateY(-0.1em); } From b227d816bc4c52406e91a4adb113fc35d1e45981 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sat, 8 Apr 2023 16:52:34 +0800 Subject: [PATCH 004/122] Show replies count for ancestors --- src/pages/status.jsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/pages/status.jsx b/src/pages/status.jsx index 922b25ff..fa53703c 100644 --- a/src/pages/status.jsx +++ b/src/pages/status.jsx @@ -185,6 +185,7 @@ function StatusPage() { id: s.id, ancestor: true, accountID: s.account.id, + repliesCount: s.repliesCount, })), { id, accountID: heroStatus.account.id }, ...nestedDescendants.map((s) => ({ @@ -627,6 +628,7 @@ function StatusPage() { descendant, thread, replies, + repliesCount, } = status; const isHero = statusID === id; return ( @@ -729,6 +731,14 @@ function StatusPage() { size={thread || ancestor ? 'm' : 's'} enableTranslate /> + {ancestor && !!repliesCount && ( +
+ {' '} + + {shortenNumber(repliesCount)} + +
+ )}{' '} {/* {replies?.length > LIMIT && (
{' '} From d7b91273e86269b1bd231798edc6c9c11ebe42b9 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sat, 8 Apr 2023 17:00:55 +0800 Subject: [PATCH 005/122] More alignment stuff --- src/components/status.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/status.css b/src/components/status.css index 2a4e0fd9..e90d6604 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -46,12 +46,10 @@ overflow: hidden; margin-bottom: -8px; } -.status-pre-meta > * { - vertical-align: middle; -} .status-reblog .status-pre-meta .icon { color: var(--reblog-color); margin-right: 4px; + vertical-align: text-bottom; } /* STATUS */ From 1c93e8f76941841a6baf07547f7cfbd2ee700e75 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sat, 8 Apr 2023 18:32:00 +0800 Subject: [PATCH 006/122] Forgot the styles for ancestors' replies indicator --- src/app.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/app.css b/src/app.css index efdcae6b..c2a6cea0 100644 --- a/src/app.css +++ b/src/app.css @@ -376,6 +376,11 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { padding-bottom: 12px; font-size: 90%; } +.timeline.contextual > li.ancestor .replies-link { + margin-left: calc( + var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + ); +} .timeline.contextual > li.thread > .status-link .replies-link { margin-left: calc( var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) From 8f45f2cb4d236f06d34893a06de37cfd7d5421f7 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sat, 8 Apr 2023 19:25:49 +0800 Subject: [PATCH 007/122] Fix "Following" not appearing --- src/components/menu.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/menu.jsx b/src/components/menu.jsx index ca69f463..dc795625 100644 --- a/src/components/menu.jsx +++ b/src/components/menu.jsx @@ -24,7 +24,8 @@ function NavMenu(props) { // User may choose pin or not to pin Following // If user doesn't pin Following, we show it in the menu const showFollowing = - snapStates.settings.shortcutsColumnsMode && + (snapStates.settings.shortcutsColumnsMode || + snapStates.settings.shortcutsViewMode === 'multi-column') && !snapStates.shortcuts.find((pin) => pin.type === 'following'); const bindLongPress = useLongPress( From eebb55ba38f7a29bd51b84c66aa1e52c6ee2abb5 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sat, 8 Apr 2023 19:47:54 +0800 Subject: [PATCH 008/122] Only show replies count if ancestors is a thread --- src/pages/status.jsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/status.jsx b/src/pages/status.jsx index fa53703c..d7f5c7ba 100644 --- a/src/pages/status.jsx +++ b/src/pages/status.jsx @@ -142,6 +142,9 @@ function StatusPage() { skipThreading: true, }); }); + const ancestorsIsThread = ancestors.every( + (s) => s.account.id === heroStatus.account.id, + ); const nestedDescendants = []; descendants.forEach((status) => { saveStatus(status, instance, { @@ -184,6 +187,7 @@ function StatusPage() { ...ancestors.map((s) => ({ id: s.id, ancestor: true, + isThread: ancestorsIsThread, accountID: s.account.id, repliesCount: s.repliesCount, })), @@ -625,6 +629,7 @@ function StatusPage() { const { id: statusID, ancestor, + isThread, descendant, thread, replies, @@ -731,7 +736,7 @@ function StatusPage() { size={thread || ancestor ? 'm' : 's'} enableTranslate /> - {ancestor && !!repliesCount && ( + {ancestor && isThread && !!repliesCount && (
{' '} From 959ac468d85948ef65cb5145660a939f6df1742a Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sat, 8 Apr 2023 20:42:38 +0800 Subject: [PATCH 009/122] Allow instance-based hashtags Also change design a little --- src/components/shortcuts-settings.css | 2 + src/components/shortcuts-settings.jsx | 34 +++++++++-- src/components/shortcuts.css | 12 ++++ src/components/shortcuts.jsx | 81 +++++++++++++++++---------- src/pages/hashtag.jsx | 28 +++++++-- 5 files changed, 117 insertions(+), 40 deletions(-) diff --git a/src/components/shortcuts-settings.css b/src/components/shortcuts-settings.css index c3bf0dcd..1036d79b 100644 --- a/src/components/shortcuts-settings.css +++ b/src/components/shortcuts-settings.css @@ -26,6 +26,8 @@ #shortcuts-settings-container .shortcuts-list li .shortcut-text { flex-grow: 1; min-width: 0; + line-height: 1; + word-break: break-word; } #shortcuts-settings-container .shortcuts-list li .shortcut-actions { flex-shrink: 0; diff --git a/src/components/shortcuts-settings.jsx b/src/components/shortcuts-settings.jsx index ed9e189a..7e2c7fef 100644 --- a/src/components/shortcuts-settings.jsx +++ b/src/components/shortcuts-settings.jsx @@ -94,6 +94,13 @@ const TYPE_PARAMS = { placeholder: 'e.g. PixelArt (Max 5, space-separated)', pattern: '[^#]+', }, + { + text: 'Instance', + name: 'instance', + type: 'text', + placeholder: 'Optional, e.g. mastodon.social', + notRequired: true, + }, ], }; export const SHORTCUTS_META = { @@ -131,14 +138,15 @@ export const SHORTCUTS_META = { }, public: { id: 'public', - title: ({ local, instance }) => - `${local ? 'Local' : 'Federated'} (${instance})`, + title: ({ local }) => (local ? 'Local' : 'Federated'), + subtitle: ({ instance }) => instance, path: ({ local, instance }) => `/${instance}/p${local ? '/l' : ''}`, icon: ({ local }) => (local ? 'group' : 'earth'), }, trending: { id: 'trending', title: 'Trending', + subtitle: ({ instance }) => instance, path: ({ instance }) => `/${instance}/trending`, icon: 'chart', }, @@ -177,6 +185,7 @@ export const SHORTCUTS_META = { hashtag: { id: 'hashtag', title: ({ hashtag }) => hashtag, + subtitle: ({ instance }) => instance, path: ({ hashtag }) => `/t/${hashtag.split(/\s+/).join('+')}`, icon: 'hashtag', }, @@ -307,10 +316,13 @@ function ShortcutsSettings() { const key = i + Object.values(shortcut); const { type } = shortcut; if (!SHORTCUTS_META[type]) return null; - let { icon, title } = SHORTCUTS_META[type]; + let { icon, title, subtitle } = SHORTCUTS_META[type]; if (typeof title === 'function') { title = title(shortcut, i); } + if (typeof subtitle === 'function') { + subtitle = subtitle(shortcut, i); + } if (typeof icon === 'function') { icon = icon(shortcut, i); } @@ -319,6 +331,12 @@ function ShortcutsSettings() { {title} + {subtitle && ( + <> + {' '} + {subtitle} + + )} } > - {formattedShortcuts.map(({ path, title, icon }, i) => { + {formattedShortcuts.map(({ path, title, subtitle, icon }, i) => { return ( {' '} - {title} + + {title} + + {subtitle && ( + <> + {' '} + {subtitle} + + )} {i + 1} diff --git a/src/pages/hashtag.jsx b/src/pages/hashtag.jsx index fd0e6f8e..0d46d1af 100644 --- a/src/pages/hashtag.jsx +++ b/src/pages/hashtag.jsx @@ -32,8 +32,10 @@ function Hashtags(props) { hashtags.sort(); hashtag = hashtags[0]; - const { masto, instance } = api({ instance: params.instance }); - const { authenticated } = api(); + const { masto, instance, authenticated } = api({ + instance: props?.instance || params.instance, + }); + const { authenticated: currentAuthenticated } = api(); const hashtagTitle = hashtags.map((t) => `#${t}`).join(' '); const title = instance ? `${hashtagTitle} on ${instance}` : hashtagTitle; useTitle(title, `/:instance?/t/:hashtag`); @@ -99,7 +101,7 @@ function Hashtags(props) { return ( ( { hashtags.splice(i, 1); hashtags.sort(); @@ -252,7 +255,7 @@ function Hashtags(props) { { const shortcut = { type: 'hashtag', @@ -281,6 +284,23 @@ function Hashtags(props) { > Add to Shorcuts + { + let newInstance = prompt( + 'Enter a new instance e.g. "mastodon.social"', + ); + if (!/\./.test(newInstance)) { + if (newInstance) alert('Invalid instance'); + return; + } + if (newInstance) { + newInstance = newInstance.toLowerCase().trim(); + navigate(`/${newInstance}/t/${hashtags.join('+')}`); + } + }} + > + Go to another instance… + } /> From c06a31dfbb35537379defabe84701f9355a105a5 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sat, 8 Apr 2023 22:16:13 +0800 Subject: [PATCH 010/122] Allow edit Shortcuts now woot --- src/components/columns.jsx | 1 + src/components/shortcuts-settings.css | 4 ++ src/components/shortcuts-settings.jsx | 82 ++++++++++++++++++++++----- 3 files changed, 74 insertions(+), 13 deletions(-) diff --git a/src/components/columns.jsx b/src/components/columns.jsx index ad8d4aec..da5ca8db 100644 --- a/src/components/columns.jsx +++ b/src/components/columns.jsx @@ -17,6 +17,7 @@ function Columns() { const { shortcuts } = snapStates; const components = shortcuts.map((shortcut) => { + if (!shortcut) return null; const { type, ...params } = shortcut; const Component = { following: Following, diff --git a/src/components/shortcuts-settings.css b/src/components/shortcuts-settings.css index 1036d79b..5e141930 100644 --- a/src/components/shortcuts-settings.css +++ b/src/components/shortcuts-settings.css @@ -121,3 +121,7 @@ min-width: 0; max-width: 320px; } +#shortcut-settings-form form footer { + display: flex; + gap: 16px; +} diff --git a/src/components/shortcuts-settings.jsx b/src/components/shortcuts-settings.jsx index 7e2c7fef..7f92f521 100644 --- a/src/components/shortcuts-settings.jsx +++ b/src/components/shortcuts-settings.jsx @@ -1,7 +1,7 @@ import './shortcuts-settings.css'; import mem from 'mem'; -import { useEffect, useState } from 'preact/hooks'; +import { useEffect, useRef, useState } from 'preact/hooks'; import { useSnapshot } from 'valtio'; import floatingButtonUrl from '../assets/floating-button.svg'; @@ -312,7 +312,7 @@ function ShortcutsSettings() {

*/} {shortcuts.length > 0 ? (
    - {shortcuts.map((shortcut, i) => { + {shortcuts.filter(Boolean).map((shortcut, i) => { const key = i + Object.values(shortcut); const { type } = shortcut; if (!SHORTCUTS_META[type]) return null; @@ -372,6 +372,18 @@ function ShortcutsSettings() { + {/* + */} ); @@ -420,12 +432,18 @@ function ShortcutsSettings() { }} > = SHORTCUTS_LIMIT} lists={lists} followedHashtags={followedHashtags} - onSubmit={(data) => { - console.log('onSubmit', data); - states.shortcuts.push(data); + onSubmit={({ result, mode }) => { + console.log('onSubmit', result); + if (mode === 'edit') { + states.shortcuts[showForm.shortcutIndex] = result; + } else { + states.shortcuts.push(result); + } }} onClose={() => setShowForm(false)} /> @@ -436,21 +454,40 @@ function ShortcutsSettings() { } function ShortcutForm({ - type, lists, followedHashtags, onSubmit, disabled, + shortcut, + shortcutIndex, onClose = () => {}, }) { - const [currentType, setCurrentType] = useState(type); + console.log('shortcut', shortcut); + const editMode = !!shortcut; + const [currentType, setCurrentType] = useState(shortcut?.type || null); + + const formRef = useRef(); + useEffect(() => { + if (editMode && currentType && TYPE_PARAMS[currentType]) { + // Populate form + const form = formRef.current; + TYPE_PARAMS[currentType].forEach(({ name }) => { + const input = form.querySelector(`[name="${name}"]`); + if (input && shortcut[name]) { + input.value = shortcut[name]; + } + }); + } + }, [editMode, currentType]); + return (
    -

    Add shortcut

    +

    {editMode ? 'Edit' : 'Add'} shortcut

    { // Construct a nice object from form e.preventDefault(); @@ -459,8 +496,12 @@ function ShortcutForm({ data.forEach((value, key) => { result[key] = value?.trim(); }); + console.log('result', result); if (!result.type) return; - onSubmit(result); + onSubmit({ + result, + mode: editMode ? 'edit' : 'add', + }); // Reset e.target.reset(); setCurrentType(null); @@ -476,6 +517,7 @@ function ShortcutForm({ onChange={(e) => { setCurrentType(e.target.value); }} + defaultValue={editMode ? shortcut.type : undefined} name="type" > @@ -539,9 +581,23 @@ function ShortcutForm({ ); }, )} - +
    + + {editMode && ( + + )} +
    From 1f4d4dfea70db512db3458f609e719aca8c26e64 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sat, 8 Apr 2023 22:16:58 +0800 Subject: [PATCH 011/122] Embrace the live preview --- src/app.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app.jsx b/src/app.jsx index 96e0499f..9d09548c 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -384,6 +384,7 @@ function App() { )} {!!snapStates.showShortcutsSettings && ( { if (e.target === e.currentTarget) { states.showShortcutsSettings = false; From b2f9dd010e97a95d2d26c5a90340403bbcd64713 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sat, 8 Apr 2023 22:37:05 +0800 Subject: [PATCH 012/122] Fix edit shortcuts with checkbox --- src/components/shortcuts-settings.jsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/shortcuts-settings.jsx b/src/components/shortcuts-settings.jsx index 7f92f521..12f0749d 100644 --- a/src/components/shortcuts-settings.jsx +++ b/src/components/shortcuts-settings.jsx @@ -471,10 +471,14 @@ function ShortcutForm({ if (editMode && currentType && TYPE_PARAMS[currentType]) { // Populate form const form = formRef.current; - TYPE_PARAMS[currentType].forEach(({ name }) => { + TYPE_PARAMS[currentType].forEach(({ name, type }) => { const input = form.querySelector(`[name="${name}"]`); if (input && shortcut[name]) { - input.value = shortcut[name]; + if (type === 'checkbox') { + input.checked = shortcut[name] === 'on' ? true : false; + } else { + input.value = shortcut[name]; + } } }); } From 82d88dbe1078d73e3c9bd19fe95c428d6a84b8be Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sun, 9 Apr 2023 00:19:15 +0800 Subject: [PATCH 013/122] Fix wrong color for bookmark icon --- src/components/status.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/status.jsx b/src/components/status.jsx index 240a381e..8eef3a11 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -510,7 +510,7 @@ function Status({ {bookmarked ? 'Unbookmark' : 'Bookmark'} From 7edf63d41b433e7a64fb8c15bbdc92272f78596b Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sun, 9 Apr 2023 00:43:27 +0800 Subject: [PATCH 014/122] Fix hashtag url not working --- src/components/shortcuts-settings.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/shortcuts-settings.jsx b/src/components/shortcuts-settings.jsx index 12f0749d..7489e445 100644 --- a/src/components/shortcuts-settings.jsx +++ b/src/components/shortcuts-settings.jsx @@ -186,7 +186,8 @@ export const SHORTCUTS_META = { id: 'hashtag', title: ({ hashtag }) => hashtag, subtitle: ({ instance }) => instance, - path: ({ hashtag }) => `/t/${hashtag.split(/\s+/).join('+')}`, + path: ({ hashtag, instance }) => + `${instance ? `/${instance}` : ''}/t/${hashtag.split(/\s+/).join('+')}`, icon: 'hashtag', }, }; From 5b2cbc5bf18f0e254fe1e3917b77595f27ff144e Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sun, 9 Apr 2023 00:46:30 +0800 Subject: [PATCH 015/122] Fix hashtag shortcut added check --- src/pages/hashtag.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/hashtag.jsx b/src/pages/hashtag.jsx index 0d46d1af..a4db5bd6 100644 --- a/src/pages/hashtag.jsx +++ b/src/pages/hashtag.jsx @@ -260,6 +260,7 @@ function Hashtags(props) { const shortcut = { type: 'hashtag', hashtag: hashtags.join(' '), + instance, }; // Check if already exists const exists = states.shortcuts.some( @@ -272,7 +273,8 @@ function Hashtags(props) { shortcut.hashtag .split(/[\s+]+/) .sort() - .join(' '), + .join(' ') && + (s.instance ? s.instance === shortcut.instance : true), ); if (exists) { alert('This shortcut already exists'); From f957d9a8a88f6bf87662673f2562515ef536a5b4 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sun, 9 Apr 2023 01:01:36 +0800 Subject: [PATCH 016/122] Show toasts. Lots of toasts. --- src/pages/account-statuses.jsx | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/pages/account-statuses.jsx b/src/pages/account-statuses.jsx index 376fee6b..751931f0 100644 --- a/src/pages/account-statuses.jsx +++ b/src/pages/account-statuses.jsx @@ -8,6 +8,7 @@ import Link from '../components/link'; import Timeline from '../components/timeline'; import { api } from '../utils/api'; import emojifyText from '../utils/emojify-text'; +import showToast from '../utils/show-toast'; import states from '../utils/states'; import { saveStatus } from '../utils/states'; import useTitle from '../utils/useTitle'; @@ -128,18 +129,33 @@ function AccountStatuses() { )} { + if (excludeReplies) { + showToast('Showing post with replies'); + } + }} class={excludeReplies ? '' : 'is-active'} > + Replies { + if (!excludeBoosts) { + showToast('Showing posts without boosts'); + } + }} class={!excludeBoosts ? '' : 'is-active'} > - Boosts { + if (!media) { + showToast('Showing posts with media'); + } + }} class={media ? 'is-active' : ''} > Media @@ -151,6 +167,11 @@ function AccountStatuses() { ? '' : `?tagged=${encodeURIComponent(tag.name)}` }`} + onClick={() => { + if (tagged !== tag.name) { + showToast(`Showing posts tagged with #${tag.name}`); + } + }} class={tagged === tag.name ? 'is-active' : ''} > From efb9864d73adc2ffe81ee90b663b788104864e91 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sun, 9 Apr 2023 09:36:55 +0800 Subject: [PATCH 017/122] Oops Fix Mentions missing --- src/components/columns.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/columns.jsx b/src/components/columns.jsx index da5ca8db..2347c222 100644 --- a/src/components/columns.jsx +++ b/src/components/columns.jsx @@ -6,6 +6,7 @@ import Favourites from '../pages/favourites'; import Following from '../pages/following'; import Hashtag from '../pages/hashtag'; import List from '../pages/list'; +import Mentions from '../pages/mentions'; import Notifications from '../pages/notifications'; import Public from '../pages/public'; import states from '../utils/states'; @@ -27,6 +28,7 @@ function Columns() { bookmarks: Bookmarks, favourites: Favourites, hashtag: Hashtag, + mentions: Mentions, }[type]; if (!Component) return null; return ; From f9217ac16f423112f71ae3a91d5958c085c3a8cb Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sun, 9 Apr 2023 11:36:18 +0800 Subject: [PATCH 018/122] Fix boost dedupe bug, it was too powerful --- src/utils/timeline-utils.jsx | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/src/utils/timeline-utils.jsx b/src/utils/timeline-utils.jsx index 40994a95..95c4dd8d 100644 --- a/src/utils/timeline-utils.jsx +++ b/src/utils/timeline-utils.jsx @@ -1,4 +1,4 @@ -import { getStatus } from './states'; +import store from './store'; export function groupBoosts(values) { let newValues = []; @@ -50,24 +50,32 @@ export function groupBoosts(values) { } export function dedupeBoosts(items, instance) { - return items.filter((item) => { + const boostedStatusIDs = store.account.get('boostedStatusIDs') || {}; + const filteredItems = items.filter((item) => { if (!item.reblog) return true; - const s = getStatus(item.reblog.id, instance); - if (s) { + const statusKey = `${instance}-${item.reblog.id}`; + const boosterID = boostedStatusIDs[statusKey]; + if (boosterID && boosterID !== item.id) { console.warn( `🚫 Duplicate boost by ${item.account.displayName}`, item, - s, + item.reblog, ); return false; - } - const s2 = getStatus(item.id, instance); - if (s2) { - console.warn('🚫 Re-boosted boost', item); - return false; + } else { + boostedStatusIDs[statusKey] = item.id; } return true; }); + // Limit to 50 + const keys = Object.keys(boostedStatusIDs); + if (keys.length > 50) { + keys.slice(0, keys.length - 50).forEach((key) => { + delete boostedStatusIDs[key]; + }); + } + store.account.set('boostedStatusIDs', boostedStatusIDs); + return filteredItems; } export function groupContext(items) { From 65e22ea81940445c05bec6acd676bde78b0147e6 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sun, 9 Apr 2023 11:40:35 +0800 Subject: [PATCH 019/122] Further compact-ify threads/conversations with spoilers --- src/components/timeline.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx index 25a76aab..f9c0cbce 100644 --- a/src/components/timeline.jsx +++ b/src/components/timeline.jsx @@ -383,6 +383,10 @@ function Timeline({ ? `/${instance}/s/${statusID}` : `/s/${statusID}`; const isMiddle = i > 0 && i < items.length - 1; + const isSpoiler = item.sensitive && !!item.spoilerText; + const showCompact = + (isSpoiler && i > 0) || + (manyItems && isMiddle && type === 'thread'); return (
  1. - {manyItems && isMiddle && type === 'thread' ? ( + {showCompact ? ( Date: Sun, 9 Apr 2023 12:02:58 +0800 Subject: [PATCH 020/122] Cloak whole status --- src/cloak-mode.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cloak-mode.css b/src/cloak-mode.css index 2d1e1505..5e2bc61f 100644 --- a/src/cloak-mode.css +++ b/src/cloak-mode.css @@ -1,7 +1,7 @@ @import url('https://fonts.googleapis.com/css2?family=Flow+Circular&family=Noto+Emoji&display=swap'); .status-pre-meta, -.status .container { +.status { font-family: 'Flow Circular', 'Noto Emoji', cursive; } From ea4db6bdcfdf0922e6cee11e3b6023e3a4bfbd24 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sun, 9 Apr 2023 19:46:49 +0800 Subject: [PATCH 021/122] Attempt to fix weird unloaded image on Mobile Safari --- src/components/media.jsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/media.jsx b/src/components/media.jsx index 0e83fbdb..4a8e3c70 100644 --- a/src/components/media.jsx +++ b/src/components/media.jsx @@ -1,5 +1,5 @@ import { getBlurHashAverageColor } from 'fast-blurhash'; -import { useCallback, useRef } from 'preact/hooks'; +import { useCallback, useRef, useState } from 'preact/hooks'; import QuickPinchZoom, { make3dTransformValue } from 'react-quick-pinch-zoom'; import Icon from './icon'; @@ -54,7 +54,9 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) { } }, []); + const [pinchZoomEnabled, setPinchZoomEnabled] = useState(false); const quickPinchZoomProps = { + enabled: pinchZoomEnabled, draggableUnZoomed: false, inertiaFriction: 0.9, containerProps: { @@ -97,6 +99,7 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) { onLoad={(e) => { e.target.closest('.media-image').style.backgroundImage = ''; e.target.closest('.media-zoom').style.display = ''; + setPinchZoomEnabled(true); }} /> @@ -180,7 +183,7 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) { > {showOriginal || autoGIFAnimate ? ( isGIF && showOriginal ? ( - +
    Date: Mon, 10 Apr 2023 00:30:13 +0800 Subject: [PATCH 022/122] Try no need vertical alignment here --- src/app.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app.css b/src/app.css index c2a6cea0..2b485444 100644 --- a/src/app.css +++ b/src/app.css @@ -1218,9 +1218,9 @@ body:has(.status-deck) .media-post-link { text-overflow: ellipsis; line-height: 1.05; } -.szh-menu .szh-menu__item * { +/* .szh-menu .szh-menu__item * { vertical-align: middle; -} +} */ .szh-menu .szh-menu__item a { flex: 1; overflow: hidden; From 60cfeea89fcf729eb6f420bd012ac1a86088af25 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Mon, 10 Apr 2023 00:30:32 +0800 Subject: [PATCH 023/122] Add 'Mute conversation' menu item --- src/components/status.jsx | 43 ++++++++++++++++++++++++++++++++++++--- 1 file changed, 40 insertions(+), 3 deletions(-) diff --git a/src/components/status.jsx b/src/components/status.jsx index 8eef3a11..4a266c87 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -175,10 +175,12 @@ function Status({ const createdAtDate = new Date(createdAt); const editedAtDate = new Date(editedAt); + const currentAccount = useMemo(() => { + return store.session.get('currentAccount'); + }, []); const isSelf = useMemo(() => { - const currentAccount = store.session.get('currentAccount'); return currentAccount && currentAccount === accountId; - }, [accountId]); + }, [accountId, currentAccount]); let inReplyToAccountRef = mentions?.find( (mention) => mention.id === inReplyToAccountId, @@ -200,6 +202,9 @@ function Status({ .catch((e) => {}); } } + const mentionSelf = + inReplyToAccountId === currentAccount || + mentions?.find((mention) => mention.id === currentAccount); const showSpoiler = !!snapStates.spoilers[id] || false; @@ -570,9 +575,41 @@ function Status({ )}
    + {(isSelf || mentionSelf) && } + {(isSelf || mentionSelf) && ( + { + try { + const newStatus = await masto.v1.statuses[ + muted ? 'unmute' : 'mute' + ](id); + saveStatus(newStatus, instance); + showToast(muted ? 'Conversation unmuted' : 'Conversation muted'); + } catch (e) { + console.error(e); + showToast( + muted + ? 'Unable to unmute conversation' + : 'Unable to mute conversation', + ); + } + }} + > + {muted ? ( + <> + + Unmute conversation + + ) : ( + <> + + Mute conversation + + )} + + )} {isSelf && ( <> - { states.showCompose = { From c7db204d5b17ee72c09ef141e856d2af5a791497 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Mon, 10 Apr 2023 01:21:02 +0800 Subject: [PATCH 024/122] More compact menu items --- src/app.css | 12 ++++++ src/components/status.jsx | 83 ++++++++++++++++++++------------------- 2 files changed, 55 insertions(+), 40 deletions(-) diff --git a/src/app.css b/src/app.css index 2b485444..cbc12749 100644 --- a/src/app.css +++ b/src/app.css @@ -1273,6 +1273,18 @@ body:has(.status-deck) .media-post-link { .szh-menu .menu-horizontal .szh-menu__item { flex: 1; } +.szh-menu .menu-horizontal .szh-menu__item:not(:only-child):first-child { + padding-right: 4px !important; +} +.szh-menu + .menu-horizontal + .szh-menu__item:not(:only-child):not(:first-child):not(:last-child) { + padding-left: 8px !important; + padding-right: 4px !important; +} +.szh-menu .menu-horizontal .szh-menu__item:not(:only-child):last-child { + padding-left: 8px !important; +} .szh-menu .szh-menu__item .menu-shortcut { opacity: 0.5; font-weight: normal; diff --git a/src/components/status.jsx b/src/components/status.jsx index 4a266c87..3bdd3a42 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -462,12 +462,13 @@ function Status({ )} {!isSizeLarge && sameInstance && ( <> - - - Reply - - {canBoost && ( +
    + + + Reply + { try { const done = await boostStatus(); @@ -485,41 +486,43 @@ function Status({ /> {reblogged ? 'Unboost' : 'Boost…'} - )} - { - try { - favouriteStatus(); - if (!isSizeLarge) - showToast(favourited ? 'Unfavourited' : 'Favourited'); - } catch (e) {} - }} - > - +
    + { + try { + favouriteStatus(); + if (!isSizeLarge) + showToast(favourited ? 'Unfavourited' : 'Favourited'); + } catch (e) {} }} - /> - {favourited ? 'Unfavourite' : 'Favourite'} - - { - try { - bookmarkStatus(); - if (!isSizeLarge) - showToast(bookmarked ? 'Unbookmarked' : 'Bookmarked'); - } catch (e) {} - }} - > - + + {favourited ? 'Unfavourite' : 'Favourite'} + + { + try { + bookmarkStatus(); + if (!isSizeLarge) + showToast(bookmarked ? 'Unbookmarked' : 'Bookmarked'); + } catch (e) {} }} - /> - {bookmarked ? 'Unbookmark' : 'Bookmark'} - + > + + {bookmarked ? 'Unbookmark' : 'Bookmark'} + +
    )} {enableTranslate && ( @@ -609,7 +612,7 @@ function Status({     )} {isSelf && ( - <> +
    { states.showCompose = { @@ -643,7 +646,7 @@ function Status({ Delete… )} - +
    )} ); From c9c49d9a93bbaa0a9e15b3e762dda399e64fa0d6 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Mon, 10 Apr 2023 20:23:40 +0800 Subject: [PATCH 025/122] Fixes for logical properties --- package.json | 6 +++++- src/components/status.jsx | 3 +++ src/components/translation-block.jsx | 2 +- src/index.css | 4 ++++ 4 files changed, 13 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 3c8c270b..aa880ea2 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,11 @@ "postcss": { "plugins": { "postcss-dark-theme-class": {}, - "postcss-preset-env": {} + "postcss-preset-env": { + "features": { + "logical-properties-and-values": false + } + } } }, "browserslist": [ diff --git a/src/components/status.jsx b/src/components/status.jsx index 3bdd3a42..9adc28ce 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -881,6 +881,7 @@ function Status({
    @@ -907,6 +908,7 @@ function Status({
    - + {translatedContent} {!!pronunciationContent && ( diff --git a/src/index.css b/src/index.css index 7002c099..b4b96ec0 100644 --- a/src/index.css +++ b/src/index.css @@ -90,6 +90,10 @@ box-sizing: border-box; } +[dir] { + text-align: start; +} + html { text-size-adjust: 100%; } From 9920525d90704aae0b8744d250eda27075fc0edd Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Mon, 10 Apr 2023 20:23:58 +0800 Subject: [PATCH 026/122] Add some sort of "onboarding" for Shortcuts --- src/components/shortcuts-settings.jsx | 28 ++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/src/components/shortcuts-settings.jsx b/src/components/shortcuts-settings.jsx index 7489e445..f20d56e6 100644 --- a/src/components/shortcuts-settings.jsx +++ b/src/components/shortcuts-settings.jsx @@ -399,9 +399,31 @@ function ShortcutsSettings() { })}
) : ( -

- No shortcuts yet. Add one from the form below. -

+
+

No shortcuts yet. Add one from the form below.

+

+ Not sure what to add? +
+ Try adding{' '} + { + e.preventDefault(); + states.shortcuts = [ + { + type: 'following', + }, + { + type: 'notifications', + }, + ]; + }} + > + Home / Following and Notifications + {' '} + first. +

+
)}

Date: Mon, 10 Apr 2023 21:41:42 +0800 Subject: [PATCH 027/122] Fancy hidden cloak mode --- src/app.jsx | 1 - src/cloak-mode.css | 19 +++++++++++-------- src/main.jsx | 6 ++++++ 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/src/app.jsx b/src/app.jsx index 9d09548c..d73e2a08 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -1,6 +1,5 @@ import './app.css'; -// import './cloak-mode.css'; import { useEffect, useLayoutEffect, diff --git a/src/cloak-mode.css b/src/cloak-mode.css index 5e2bc61f..66c65a1b 100644 --- a/src/cloak-mode.css +++ b/src/cloak-mode.css @@ -1,12 +1,15 @@ -@import url('https://fonts.googleapis.com/css2?family=Flow+Circular&family=Noto+Emoji&display=swap'); - -.status-pre-meta, -.status { - font-family: 'Flow Circular', 'Noto Emoji', cursive; +body.cloak .name-text, +body.cloak .status .content-container, +body.cloak .account-container :is(header, main > *:not(.actions)) { + text-decoration-thickness: 1.1em; + text-decoration-line: line-through; + text-rendering: optimizeSpeed; } -.status :is(img, video, audio), -.avatar { - filter: invert(0.5); +body.cloak .status :is(img, video, audio), +body.cloak .avatar, +body.cloak .emoji, +body.cloak .header-banner { + filter: contrast(0) !important; background-color: #000 !important; } diff --git a/src/main.jsx b/src/main.jsx index e2006dbf..e7eec379 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,5 +1,7 @@ import './index.css'; +import './cloak-mode.css'; + import { render } from 'preact'; import { HashRouter } from 'react-router-dom'; @@ -35,3 +37,7 @@ setTimeout(() => { localStorage.removeItem('settings:boostsCarousel'); } catch (e) {} }, 5000); + +window.__CLOAK__ = () => { + document.body.classList.toggle('cloak'); +}; From 13b22730226e8e6314cb3d4c545b1c9b55b66fb8 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Tue, 11 Apr 2023 00:26:43 +0800 Subject: [PATCH 028/122] Bot avatars will be squircles --- src/components/account-block.jsx | 3 ++- src/components/account-info.css | 2 +- src/components/account-info.jsx | 1 + src/components/avatar.css | 3 +++ src/components/avatar.jsx | 6 ++++-- src/components/compose.jsx | 1 + src/components/menu.jsx | 1 + src/components/name-text.jsx | 5 +++-- src/components/status.jsx | 8 +++++--- src/pages/notifications.jsx | 1 + src/pages/status.jsx | 1 + 11 files changed, 23 insertions(+), 9 deletions(-) diff --git a/src/components/account-block.jsx b/src/components/account-block.jsx index b4c40a0a..a8598284 100644 --- a/src/components/account-block.jsx +++ b/src/components/account-block.jsx @@ -44,6 +44,7 @@ function AccountBlock({ url, statusesCount, lastStatusAt, + bot, } = account; const displayNameWithEmoji = emojifyText(displayName, emojis); const [_, acct1, acct2] = acct.match(/([^@]+)(@.+)/i) || [, acct]; @@ -68,7 +69,7 @@ function AccountBlock({ } }} > - + {displayName ? ( *:first-child { diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx index 0acc64b4..626b44d8 100644 --- a/src/components/account-info.jsx +++ b/src/components/account-info.jsx @@ -507,6 +507,7 @@ function RelatedActions({ info, instance, authenticated }) { url={follower.avatarStatic} size="l" alt={`${follower.displayName} @${follower.acct}`} + squircle={follower?.bot} /> ))} diff --git a/src/components/avatar.css b/src/components/avatar.css index 444a0cdb..1a874941 100644 --- a/src/components/avatar.css +++ b/src/components/avatar.css @@ -12,6 +12,9 @@ .avatar.has-alpha { border-radius: 0; } +.avatar:not(.has-alpha).squircle { + border-radius: 12px; +} .avatar img { width: 100%; diff --git a/src/components/avatar.jsx b/src/components/avatar.jsx index 5cb3f845..a9fef01d 100644 --- a/src/components/avatar.jsx +++ b/src/components/avatar.jsx @@ -13,14 +13,16 @@ const SIZES = { const alphaCache = {}; -function Avatar({ url, size, alt = '', ...props }) { +function Avatar({ url, size, alt = '', squircle, ...props }) { size = SIZES[size] || size || SIZES.m; const avatarRef = useRef(); const isMissing = /missing\.png$/.test(url); return ( )} {!standalone ? ( diff --git a/src/components/menu.jsx b/src/components/menu.jsx index dc795625..22da8fa7 100644 --- a/src/components/menu.jsx +++ b/src/components/menu.jsx @@ -67,6 +67,7 @@ function NavMenu(props) { currentAccount?.info?.avatarStatic } size="l" + squircle={currentAccount?.info?.bot} /> )} diff --git a/src/components/name-text.jsx b/src/components/name-text.jsx index 3c563557..f2e79ece 100644 --- a/src/components/name-text.jsx +++ b/src/components/name-text.jsx @@ -14,7 +14,8 @@ function NameText({ external, onClick, }) { - const { acct, avatar, avatarStatic, id, url, displayName, emojis } = account; + const { acct, avatar, avatarStatic, id, url, displayName, emojis, bot } = + account; let { username } = account; const displayNameWithEmoji = emojifyText(displayName, emojis); @@ -52,7 +53,7 @@ function NameText({ > {showAvatar && ( <> - {' '} + {' '} )} {displayName && !short ? ( diff --git a/src/components/status.jsx b/src/components/status.jsx index 9adc28ce..53a199bb 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -118,6 +118,7 @@ function Status({ displayName, username, emojis: accountEmojis, + bot, }, id, repliesCount, @@ -753,7 +754,7 @@ function Status({ }; }} > - + )}

@@ -1957,7 +1958,7 @@ function safeBoundingBoxPadding() { function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) { const { - account: { avatar, avatarStatic }, + account: { avatar, avatarStatic, bot }, createdAt, visibility, reblog, @@ -2002,7 +2003,7 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) { Filtered {filterTitleStr} {' '} - + {' '} @@ -2022,6 +2023,7 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) { <> {' '} )} diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx index 7b4dda1c..060b8b4a 100644 --- a/src/pages/notifications.jsx +++ b/src/pages/notifications.jsx @@ -403,6 +403,7 @@ function Notification({ notification, instance }) { } key={account.id} alt={`${account.displayName} @${account.acct}`} + squircle={account?.bot} /> {type === 'favourite+reblog' && ( + ); } } diff --git a/src/components/status.jsx b/src/components/status.jsx index 53a199bb..584422db 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -79,6 +79,7 @@ function Status({ enableTranslate, previewMode, allowFilters, + onMediaClick, }) { if (skeleton) { return ( @@ -1024,16 +1025,16 @@ function Status({ key={media.id} media={media} autoAnimate={isSizeLarge} - onClick={(e) => { - e.preventDefault(); - e.stopPropagation(); - states.showMediaModal = { - mediaAttachments, - index: i, - instance, - statusID: readOnly ? null : id, - }; - }} + to={`/${instance}/s/${id}?${ + withinContext ? 'media' : 'media-only' + }=${i + 1}`} + onClick={ + onMediaClick + ? (e) => { + onMediaClick(e, i, media); + } + : undefined + } /> ))}
diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx index f9c0cbce..ab0c0100 100644 --- a/src/components/timeline.jsx +++ b/src/components/timeline.jsx @@ -42,6 +42,8 @@ function Timeline({ const [visible, setVisible] = useState(true); const scrollableRef = useRef(); + console.debug('RENDER Timeline', id, refresh); + const loadItems = useDebouncedCallback( (firstLoad) => { setShowNew(false); diff --git a/src/pages/following.jsx b/src/pages/following.jsx index 60beb217..4b7a8947 100644 --- a/src/pages/following.jsx +++ b/src/pages/following.jsx @@ -18,6 +18,8 @@ function Following({ title, path, id, ...props }) { const homeIterator = useRef(); const latestItem = useRef(); + console.debug('RENDER Following', title, id); + async function fetchHome(firstLoad) { if (firstLoad || !homeIterator.current) { homeIterator.current = masto.v1.timelines.listHome({ limit: LIMIT }); diff --git a/src/pages/home.jsx b/src/pages/home.jsx index 4cd84d98..850f4098 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -1,3 +1,4 @@ +import { memo } from 'preact/compat'; import { useEffect } from 'preact/hooks'; import { useSnapshot } from 'valtio'; @@ -75,4 +76,4 @@ function Home() { ); } -export default Home; +export default memo(Home); diff --git a/src/pages/status.jsx b/src/pages/status.jsx index f1771592..d5d76e27 100644 --- a/src/pages/status.jsx +++ b/src/pages/status.jsx @@ -6,7 +6,7 @@ import pRetry from 'p-retry'; import { useEffect, useMemo, useRef, useState } from 'preact/hooks'; import { useHotkeys } from 'react-hotkeys-hook'; import { InView } from 'react-intersection-observer'; -import { matchPath, useNavigate, useParams } from 'react-router-dom'; +import { matchPath, useParams, useSearchParams } from 'react-router-dom'; import { useDebouncedCallback } from 'use-debounce'; import { useSnapshot } from 'valtio'; @@ -14,6 +14,7 @@ import Avatar from '../components/avatar'; import Icon from '../components/icon'; import Link from '../components/link'; import Loader from '../components/loader'; +import MediaModal from '../components/media-modal'; import NameText from '../components/name-text'; import RelativeTime from '../components/relative-time'; import Status from '../components/status'; @@ -21,6 +22,7 @@ import { api } from '../utils/api'; import htmlContentLength from '../utils/html-content-length'; import shortenNumber from '../utils/shorten-number'; import states, { + getStatus, saveStatus, statusKey, threadifyStatus, @@ -43,13 +45,97 @@ function resetScrollPosition(id) { function StatusPage() { const { id, ...params } = useParams(); const { masto, instance } = api({ instance: params.instance }); + const [searchParams, setSearchParams] = useSearchParams(); + const mediaParam = searchParams.get('media'); + const mediaOnlyParam = searchParams.get('media-only'); + const mediaIndex = parseInt(mediaParam || mediaOnlyParam, 10); + let showMedia = mediaIndex > 0; + const mediaStatusID = searchParams.get('mediaStatusID'); + const mediaStatus = getStatus(mediaStatusID, instance); + if (mediaStatusID && !mediaStatus) { + showMedia = false; + } + const showMediaOnly = showMedia && !!mediaOnlyParam; + + const sKey = statusKey(id, instance); + const [heroStatus, setHeroStatus] = useState(states.statuses[sKey]); + + const closeLink = useMemo(() => { + const { prevLocation } = states; + const pathname = + (prevLocation?.pathname || '') + (prevLocation?.search || ''); + const matchStatusPath = + matchPath('/:instance/s/:id', pathname) || matchPath('/s/:id', pathname); + if (!pathname || matchStatusPath) { + return '/'; + } + return pathname; + }, []); + + useEffect(() => { + if (!heroStatus && showMedia) { + (async () => { + try { + const status = await masto.v1.statuses.fetch(id); + saveStatus(status, instance); + setHeroStatus(status); + } catch (err) { + console.error(err); + alert('Unable to load status.'); + location.hash = closeLink; + } + })(); + } + }, []); + + const mediaAttachments = mediaStatusID + ? mediaStatus?.mediaAttachments + : heroStatus?.mediaAttachments; + + return ( +
+ {showMedia ? ( + mediaAttachments?.length ? ( + { + if (showMediaOnly) { + location.hash = closeLink; + } else { + searchParams.delete('media'); + searchParams.delete('mediaStatusID'); + setSearchParams(searchParams); + } + }} + /> + ) : ( +
+ +
+ ) + ) : ( + + )} + {!showMediaOnly && } +
+ ); +} + +function StatusThread({ closeLink = '/' }) { + const { id, ...params } = useParams(); + const [searchParams, setSearchParams] = useSearchParams(); + const mediaParam = searchParams.get('media'); + const showMedia = parseInt(mediaParam, 10) > 0; + const { masto, instance } = api({ instance: params.instance }); const { masto: currentMasto, instance: currentInstance, authenticated, } = api(); const sameInstance = instance === currentInstance; - const navigate = useNavigate(); const snapStates = useSnapshot(states); const [statuses, setStatuses] = useState([]); const [uiState, setUIState] = useState('default'); @@ -69,7 +155,7 @@ function StatusPage() { states.scrollPositions[id] = scrollTop; } }, 50); - scrollableRef.current.addEventListener('scroll', onScroll, { + scrollableRef.current?.addEventListener('scroll', onScroll, { passive: true, }); onScroll(); @@ -331,23 +417,6 @@ function StatusPage() { return postInstance === instance; }, [postInstance, instance]); - const closeLink = useMemo(() => { - const { prevLocation } = snapStates; - const pathname = - (prevLocation?.pathname || '') + (prevLocation?.search || ''); - if ( - !pathname || - matchPath('/:instance/s/:id', pathname) || - matchPath('/s/:id', pathname) - ) { - return '/'; - } - return pathname; - }, []); - const onClose = () => { - states.showMediaModal = false; - }; - const [limit, setLimit] = useState(LIMIT); const showMore = useMemo(() => { // return number of statuses to show @@ -367,10 +436,20 @@ function StatusPage() { return top > 0 ? 'down' : 'up'; }, [heroInView]); - useHotkeys(['esc', 'backspace'], () => { - // location.hash = closeLink; - onClose(); - navigate(closeLink); + useHotkeys( + 'esc', + () => { + location.hash = closeLink; + }, + { + // If media is open, esc to close media first + // Else close the status page + enabled: !showMedia, + }, + ); + // For backspace, will always close both media and status page + useHotkeys('backspace', () => { + location.hash = closeLink; }); useHotkeys('j', () => { @@ -464,287 +543,286 @@ function StatusPage() { distanceFromStartPx: 16, }); + const initialPageState = useRef(showMedia ? 'media+status' : 'status'); + return ( -
- -
1 ? 'padded-bottom' : '' - }`} +
1 ? 'padded-bottom' : '' + } ${initialPageState.current === 'status' ? 'slide-in' : ''}`} + > +
{ + // reload statuses + states.reloadStatusPage++; + }} > -
{ - // reload statuses - states.reloadStatusPage++; - }} - > - {/*
+ {/*
*/} -
-

- {!heroInView && heroStatus && uiState !== 'loading' ? ( - <> - - {' '} - - •{' '} - - - {' '} - - - ) : ( - <> - Status{' '} - - - )} -

-
- {uiState === 'loading' ? ( - - ) : ( - + {' '} + - } > - { - states.reloadStatusPage++; - }} - > - - Refresh - - { - // Click all buttons with class .spoiler but not .spoiling - const buttons = Array.from( - scrollableRef.current.querySelectorAll( - 'button.spoiler:not(.spoiling)', - ), - ); - buttons.forEach((button) => { - button.click(); - }); - }} - > - {' '} - Show all sensitive content - - - Experimental - { - const statusURL = getInstanceStatusURL(heroStatus.url); - if (statusURL) { - navigate(statusURL); - } else { - alert('Unable to switch'); - } - }} - > - - - Switch to post's instance ({postInstance}) - - - - )} - + + + ) : ( + <> + Status{' '} + + + )} + +
+ {uiState === 'loading' ? ( + + ) : ( + + + + } > - - -
-
-
- {!!statuses.length && heroStatus ? ( -
    - {statuses.slice(0, limit).map((status) => { - const { - id: statusID, - ancestor, - isThread, - descendant, - thread, - replies, - repliesCount, - } = status; - const isHero = statusID === id; - return ( -
  • { + states.reloadStatusPage++; + }} > - {isHero ? ( - <> - - - - {uiState !== 'loading' && !authenticated ? ( -
    -

    - You're not logged in. Interactions (reply, boost, - etc) are not possible. -

    - - Log in - -
    - ) : ( - !sameInstance && ( -
    -

    - This post is from another instance ( - {instance}). Interactions (reply, boost, - etc) are not possible. -

    - -
    - ) - )} - - ) : ( - { - resetScrollPosition(statusID); - }} + + Refresh + + { + // Click all buttons with class .spoiler but not .spoiling + const buttons = Array.from( + scrollableRef.current.querySelectorAll( + 'button.spoiler:not(.spoiling)', + ), + ); + buttons.forEach((button) => { + button.click(); + }); + }} + > + {' '} + Show all sensitive content + + + Experimental + { + const statusURL = getInstanceStatusURL(heroStatus.url); + if (statusURL) { + location.hash = statusURL; + } else { + alert('Unable to switch'); + } + }} + > + + + Switch to post's instance ({postInstance}) + + + + )} + + + +
+
+ + {!!statuses.length && heroStatus ? ( +
    + {statuses.slice(0, limit).map((status) => { + const { + id: statusID, + ancestor, + isThread, + descendant, + thread, + replies, + repliesCount, + } = status; + const isHero = statusID === id; + return ( +
  • + {isHero ? ( + <> + - {ancestor && isThread && !!repliesCount && ( -
    - {' '} - - {shortenNumber(repliesCount)} - + + {uiState !== 'loading' && !authenticated ? ( +
    +

    + You're not logged in. Interactions (reply, boost, etc) + are not possible. +

    + + Log in + +
    + ) : ( + !sameInstance && ( +
    +

    + This post is from another instance ( + {instance}). Interactions (reply, boost, etc) + are not possible. +

    +
    - )}{' '} - {/* {replies?.length > LIMIT && ( + ) + )} + + ) : ( + { + resetScrollPosition(statusID); + }} + > + { + e.preventDefault(); + e.stopPropagation(); + setSearchParams({ + media: i + 1, + mediaStatusID: statusID, + }); + }} + /> + {ancestor && isThread && repliesCount > 1 && ( +
    + {' '} + + {shortenNumber(repliesCount)} + +
    + )}{' '} + {/* {replies?.length > LIMIT && (
    {' '} @@ -752,90 +830,89 @@ function StatusPage() {
    )} */} - + + )} + {descendant && replies?.length > 0 && ( + + )} + {uiState === 'loading' && + isHero && + !!heroStatus?.repliesCount && + !hasDescendants && ( +
    + +
    )} - {descendant && replies?.length > 0 && ( - + {uiState === 'error' && + isHero && + !!heroStatus?.repliesCount && + !hasDescendants && ( +
    + Unable to load replies. +
    + +
    )} - {uiState === 'loading' && - isHero && - !!heroStatus?.repliesCount && - !hasDescendants && ( -
    - -
    - )} - {uiState === 'error' && - isHero && - !!heroStatus?.repliesCount && - !hasDescendants && ( -
    - Unable to load replies. -
    - -
    - )} -
    • - ); - })} - {showMore > 0 && ( -
  • -
    • - )} -
- ) : ( - <> - {uiState === 'loading' && ( -
    -
  • - -
    • -
- )} - {uiState === 'error' && ( -

- Unable to load status -
-
- -

- )} - - )} -
+ ); + })} + {showMore > 0 && ( +
  • + +
    • + )} + + ) : ( + <> + {uiState === 'loading' && ( +
      +
    • + +
      • +
    + )} + {uiState === 'error' && ( +

    + Unable to load status +
    +
    + +

    + )} + + )}
    ); } @@ -847,6 +924,7 @@ function SubComments({ hasParentThread, level, }) { + const [searchParams, setSearchParams] = useSearchParams(); // Set isBrief = true: // - if less than or 2 replies // - if replies have no sub-replies @@ -946,6 +1024,14 @@ function SubComments({ withinContext size="s" enableTranslate + onMediaClick={(e, i) => { + e.preventDefault(); + e.stopPropagation(); + setSearchParams({ + media: i + 1, + mediaStatusID: r.id, + }); + }} /> {!r.replies?.length && r.repliesCount > 0 && (
    diff --git a/src/utils/useScroll.js b/src/utils/useScroll.js index e8a258e1..dc7c034a 100644 --- a/src/utils/useScroll.js +++ b/src/utils/useScroll.js @@ -19,6 +19,7 @@ export default function useScroll({ useEffect(() => { const scrollableElement = scrollableRef.current; + if (!scrollableElement) return {}; let previousScrollStart = isVertical ? scrollableElement.scrollTop : scrollableElement.scrollLeft; From cc3a1d30309a957a5090f3c29156466ceba30bd8 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 14 Apr 2023 15:45:55 +0800 Subject: [PATCH 034/122] Need readable max width --- src/app.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app.css b/src/app.css index 24c5f155..8bb2f33d 100644 --- a/src/app.css +++ b/src/app.css @@ -599,10 +599,12 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { .status-loading { text-align: center; color: var(--text-insignificant-color); + max-width: var(--main-width); } .status-error { text-align: center; color: var(--text-insignificant-color); + max-width: var(--main-width); } .status-link { From 19858dc8897c52065f28284329e289dd2ea5b10b Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 14 Apr 2023 15:46:11 +0800 Subject: [PATCH 035/122] It's time for a new loading indicator --- src/app.css | 30 ++++++++++ src/components/timeline.jsx | 3 +- src/pages/notifications.jsx | 3 +- src/pages/status.jsx | 115 ++++++++++++++++++------------------ 4 files changed, 90 insertions(+), 61 deletions(-) diff --git a/src/app.css b/src/app.css index 8bb2f33d..e1a2b342 100644 --- a/src/app.css +++ b/src/app.css @@ -154,6 +154,36 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { padding-bottom: 80dvh !important; } +@keyframes indeterminate-bar { + 0% { + transform: translateX(-50%); + opacity: 0.25; + } + 50% { + opacity: 1; + } + 100% { + transform: translateX(50%); + opacity: 0.25; + } +} +.deck > header.loading:after { + pointer-events: none; + content: ''; + display: block; + height: 4px; + position: absolute; + bottom: 0; + width: 50%; + left: 25%; + background-image: radial-gradient( + ellipse farthest-side at bottom, + var(--link-color), + transparent + ); + animation: indeterminate-bar 1s ease-in-out infinite alternate; +} + .timeline { margin: 0 auto; padding: 0; diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx index ab0c0100..48fc1b86 100644 --- a/src/components/timeline.jsx +++ b/src/components/timeline.jsx @@ -271,6 +271,7 @@ function Timeline({ loadItems(true); } }} + class={uiState === 'loading' ? 'loading' : ''} >
    @@ -285,7 +286,7 @@ function Timeline({
    {title && (titleComponent ? titleComponent :

    {title}

    )}
    -
    diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx index 060b8b4a..9476fdb9 100644 --- a/src/pages/notifications.jsx +++ b/src/pages/notifications.jsx @@ -162,6 +162,7 @@ function Notifications() { scrollableRef.current?.scrollTo({ top: 0, behavior: 'smooth' }); } }} + class={uiState === 'loading' ? 'loading' : ''} >
    @@ -172,7 +173,7 @@ function Notifications() {

    Notifications

    -
    {snapStates.notificationsShowNew && uiState !== 'loading' && ( diff --git a/src/pages/status.jsx b/src/pages/status.jsx index d5d76e27..3939a77b 100644 --- a/src/pages/status.jsx +++ b/src/pages/status.jsx @@ -554,7 +554,9 @@ function StatusThread({ closeLink = '/' }) { } ${initialPageState.current === 'status' ? 'slide-in' : ''}`} >
    { // reload statuses states.reloadStatusPage++; @@ -628,66 +630,61 @@ function StatusThread({ closeLink = '/' }) { )}
    - {uiState === 'loading' ? ( - - ) : ( - + + + } + > + { + states.reloadStatusPage++; }} - menuButton={ - - } > - { - states.reloadStatusPage++; - }} - > - - Refresh - - { - // Click all buttons with class .spoiler but not .spoiling - const buttons = Array.from( - scrollableRef.current.querySelectorAll( - 'button.spoiler:not(.spoiling)', - ), - ); - buttons.forEach((button) => { - button.click(); - }); - }} - > - {' '} - Show all sensitive content - - - Experimental - { - const statusURL = getInstanceStatusURL(heroStatus.url); - if (statusURL) { - location.hash = statusURL; - } else { - alert('Unable to switch'); - } - }} - > - - - Switch to post's instance ({postInstance}) - - - - )} + + Refresh + + { + // Click all buttons with class .spoiler but not .spoiling + const buttons = Array.from( + scrollableRef.current.querySelectorAll( + 'button.spoiler:not(.spoiling)', + ), + ); + buttons.forEach((button) => { + button.click(); + }); + }} + > + Show all sensitive content + + + Experimental + { + const statusURL = getInstanceStatusURL(heroStatus.url); + if (statusURL) { + location.hash = statusURL; + } else { + alert('Unable to switch'); + } + }} + > + + + Switch to post's instance ({postInstance}) + + + From 7e58a4e14f4a3efe3699381a447919ef4c31c362 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 14 Apr 2023 17:23:41 +0800 Subject: [PATCH 036/122] Use different build path for icons, cache them --- public/sw.js | 21 +++++++++++++++++++++ vite.config.js | 9 +++++++++ 2 files changed, 30 insertions(+) diff --git a/public/sw.js b/public/sw.js index b44a94b0..95121e3c 100644 --- a/public/sw.js +++ b/public/sw.js @@ -33,6 +33,27 @@ const imageRoute = new Route( ); registerRoute(imageRoute); +const iconsRoute = new Route( + ({ request, sameOrigin }) => { + const isIcon = request.url.includes('/icons/'); + return sameOrigin && isIcon; + }, + new CacheFirst({ + cacheName: 'icons', + plugins: [ + new ExpirationPlugin({ + maxEntries: 50, + maxAgeSeconds: 3 * 24 * 60 * 60, // 3 days + purgeOnQuotaError: true, + }), + new CacheableResponsePlugin({ + statuses: [0, 200], + }), + ], + }), +); +registerRoute(iconsRoute); + // 1-day cache for // - /api/v1/instance // - /api/v1/custom_emojis diff --git a/vite.config.js b/vite.config.js index 7493c085..aecbde7f 100644 --- a/vite.config.js +++ b/vite.config.js @@ -94,6 +94,15 @@ export default defineConfig({ main: resolve(__dirname, 'index.html'), compose: resolve(__dirname, 'compose/index.html'), }, + output: { + chunkFileNames: (chunkInfo) => { + const { facadeModuleId } = chunkInfo; + if (facadeModuleId && facadeModuleId.includes('icon')) { + return 'assets/icons/[name]-[hash].js'; + } + return 'assets/[name]-[hash].js'; + }, + }, }, }, }); From 460e4a3cc41717fd3e94464e1bdabc0f062086ac Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 14 Apr 2023 18:14:25 +0800 Subject: [PATCH 037/122] Don't need ellipse --- src/app.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app.css b/src/app.css index e1a2b342..48118211 100644 --- a/src/app.css +++ b/src/app.css @@ -177,7 +177,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { width: 50%; left: 25%; background-image: radial-gradient( - ellipse farthest-side at bottom, + farthest-side at bottom, var(--link-color), transparent ); From 55980597154f17ff49e6d9d9a541d75bb0103235 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 14 Apr 2023 21:02:29 +0800 Subject: [PATCH 038/122] Spanify un-spanned mentions --- src/utils/enhance-content.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/utils/enhance-content.js b/src/utils/enhance-content.js index fe30f50f..55d3bbdc 100644 --- a/src/utils/enhance-content.js +++ b/src/utils/enhance-content.js @@ -15,6 +15,21 @@ function enhanceContent(content, opts = {}) { link.setAttribute('target', '_blank'); }); + // Spanify un-spanned mentions + const mentionLinks = Array.from(dom.querySelectorAll('a[href].mention')); + mentionLinks.forEach((link) => { + if (link.querySelector('*')) { + return; + } + const text = link.innerText; + // If text looks like @username@domain, then it's a mention + if (/^@[^@]+@[^@]+$/g.test(text)) { + // Only show @username + const username = text.split('@')[1]; + link.innerHTML = `@${username}`; + } + }); + // EMOJIS // ====== // Convert :shortcode: to From adfe660cc82e2330e563ccbedfd01e94184abea7 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 14 Apr 2023 21:14:08 +0800 Subject: [PATCH 039/122] Special styling for portrait media --- src/components/media.jsx | 7 +++++++ src/components/status.css | 5 +++++ 2 files changed, 12 insertions(+) diff --git a/src/components/media.jsx b/src/components/media.jsx index 220da460..d3857921 100644 --- a/src/components/media.jsx +++ b/src/components/media.jsx @@ -24,6 +24,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) { const width = showOriginal ? original?.width : small?.width; const height = showOriginal ? original?.height : small?.height; const mediaURL = showOriginal ? url : previewUrl; + const orientation = width >= height ? 'landscape' : 'portrait'; const rgbAverageColor = blurhash ? getBlurHashAverageColor(blurhash) : null; @@ -97,6 +98,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) { alt={description} width={width} height={height} + data-orientation={orientation} loading="eager" decoding="async" onLoad={(e) => { @@ -112,6 +114,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) { alt={description} width={width} height={height} + data-orientation={orientation} loading="lazy" style={{ backgroundColor: @@ -140,6 +143,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) { poster="${previewUrl}" width="${width}" height="${height}" + data-orientation="${orientation}" preload="auto" autoplay muted="${isGIF}" @@ -209,6 +213,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) { poster={previewUrl} width={width} height={height} + data-orientation={orientation} preload="auto" // controls playsinline @@ -222,6 +227,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) { alt={description} width={width} height={height} + data-orientation={orientation} loading="lazy" />
    @@ -247,6 +253,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) { alt={description} width={width} height={height} + data-orientation={orientation} loading="lazy" /> ) : null} diff --git a/src/components/status.css b/src/components/status.css index 3782894c..4e4ab7b8 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -477,6 +477,11 @@ height: auto; max-height: 160px; } +.status .media-container.media-eq1:has([data-orientation='portrait']) { + width: 85%; + min-width: 160px; + max-height: 200px; +} .status .media-container.media-gt2 { height: 200px; } From 5d8cddc07e68b1cfc93f7cccc8f17ed1ac25f974 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 14 Apr 2023 23:03:04 +0800 Subject: [PATCH 040/122] Poll titles can be emoji-fied --- src/components/status.jsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/status.jsx b/src/components/status.jsx index 584422db..bf423aa9 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -25,6 +25,7 @@ import Loader from '../components/loader'; import Modal from '../components/modal'; import NameText from '../components/name-text'; import { api } from '../utils/api'; +import emojifyText from '../utils/emojify-text'; import enhanceContent from '../utils/enhance-content'; import getTranslateTargetLanguage from '../utils/get-translate-target-language'; import getHTMLText from '../utils/getHTMLText'; @@ -1351,6 +1352,7 @@ function Poll({ voted, votersCount, votesCount, + emojis, } = poll; const expiresAtDate = !!expiresAt && new Date(expiresAt); @@ -1426,7 +1428,11 @@ function Poll({ }} >
    - {title} + {voted && ownVotes.includes(i) && ( <> {' '} @@ -1477,7 +1483,12 @@ function Poll({ disabled={uiState === 'loading'} readOnly={readOnly} /> - {title} +
    ); From 020019132ddb524724316ef2b2862e7b9da28931 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 14 Apr 2023 23:05:46 +0800 Subject: [PATCH 041/122] Spoiler text also can be emoji-fied --- src/components/status.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/status.jsx b/src/components/status.jsx index bf423aa9..1d054ce7 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -888,7 +888,11 @@ function Status({ ref={spoilerContentRef} data-read-more={readMoreText} > -

    {spoilerText}

    +

    + + ))} + + {/* {instancesList.map((instance) => ( + */} {uiState === 'error' && (

    Failed to log in. Please try again or another instance.

    )} -

    +

    {' '} -

    +