From 46468591775fd4ca230be9ffb81b315b281bf6bf Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 20 Oct 2023 00:11:14 +0800 Subject: [PATCH 01/65] Fix text shadows applied to search popover --- src/app.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/app.css b/src/app.css index b697a1d3..7d4c4c8e 100644 --- a/src/app.css +++ b/src/app.css @@ -2229,6 +2229,10 @@ ul.link-list li a .icon { } .deck > header { text-shadow: 0 1px var(--bg-color); + + form { + text-shadow: none; + } } .deck > header h1 { font-size: 1.5em; From dba921a3fdcc9f4398f9748f3dbf8a2e1901359b Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 20 Oct 2023 12:52:56 +0800 Subject: [PATCH 02/65] Add key --- src/pages/search.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/search.jsx b/src/pages/search.jsx index 4d0f11e7..1dc499b4 100644 --- a/src/pages/search.jsx +++ b/src/pages/search.jsx @@ -181,7 +181,9 @@ function Search(props) { return 0; }) .map((link) => ( - {link.label} + + {link.label} + ))} )} From 72f204771f434f11949ddc8e4f96a9321d227802 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 20 Oct 2023 12:53:23 +0800 Subject: [PATCH 03/65] Minor adjustments for search page --- src/pages/search.css | 10 ++++++++-- src/pages/search.jsx | 2 +- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/pages/search.css b/src/pages/search.css index f78cac9b..a1b830a8 100644 --- a/src/pages/search.css +++ b/src/pages/search.css @@ -40,8 +40,14 @@ ul.link-list.hashtag-list li a { } @media (min-width: 40em) { - #search-page header input { - background-color: var(--bg-color); + #search-page { + header input { + background-color: var(--bg-color); + } + + .filter-bar { + margin-top: 8px; + } } } diff --git a/src/pages/search.jsx b/src/pages/search.jsx index 1dc499b4..0ac45288 100644 --- a/src/pages/search.jsx +++ b/src/pages/search.jsx @@ -141,7 +141,7 @@ function Search(props) { return (
-
+
From 691aea3389c35a72d286608ea29c3e8133926d5d Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 20 Oct 2023 13:07:31 +0800 Subject: [PATCH 04/65] Update loading state of account info --- src/components/account-info.jsx | 41 ++++++++++++++++++++++++--------- 1 file changed, 30 insertions(+), 11 deletions(-) diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx index a063d611..2d25a3ce 100644 --- a/src/components/account-info.jsx +++ b/src/components/account-info.jsx @@ -343,20 +343,39 @@ function AccountInfo({
-

████████ ███████

-

███████████████ ███████████████

+

███████ ████ ████

+

████ ████████ ██████ █████████ ████ ██

-
-
- ██ Followers +
From d1aedcaef254b2bab86c3ccc50066531a39b4414 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 20 Oct 2023 17:11:10 +0800 Subject: [PATCH 05/65] Fix unneeded id passed here --- src/pages/account-statuses.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/account-statuses.jsx b/src/pages/account-statuses.jsx index 168ce3e1..34704188 100644 --- a/src/pages/account-statuses.jsx +++ b/src/pages/account-statuses.jsx @@ -98,7 +98,7 @@ function AccountStatuses() { try { const featuredTags = await masto.v1.accounts .$select(id) - .featuredTags.list(id); + .featuredTags.list(); console.log({ featuredTags }); setFeaturedTags(featuredTags); } catch (e) { From ab7df0f66c4aa949aae3d0816f5d769fb8601444 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 20 Oct 2023 18:11:13 +0800 Subject: [PATCH 06/65] Experiment: month filter for account statuses --- src/app.css | 42 +++++++ src/pages/account-statuses.jsx | 224 +++++++++++++++++++++++++++++++-- 2 files changed, 259 insertions(+), 7 deletions(-) diff --git a/src/app.css b/src/app.css index 7d4c4c8e..292ff984 100644 --- a/src/app.css +++ b/src/app.css @@ -2127,6 +2127,48 @@ ul.link-list li a .icon { pointer-events: none; opacity: 0.5; } + + .filter-field { + flex-shrink: 0; + padding: 8px 16px; + border-radius: 999px; + color: var(--text-color); + background-color: var(--bg-color); + border: 2px solid transparent; + margin: 0; + appearance: none; + line-height: 1; + font-size: 90%; + + &:placeholder-shown { + color: var(--text-insignificant-color); + } + + &:is(:hover, :focus-visible) { + border-color: var(--link-light-color); + } + &:focus { + outline-color: var(--link-light-color); + } + &.is-active { + border-color: var(--link-color); + box-shadow: inset 0 0 8px var(--link-faded-color); + } + + :is(input, select) { + background-color: transparent; + border: 0; + padding: 0; + margin: 0; + color: inherit; + font-size: inherit; + line-height: inherit; + appearance: none; + border-radius: 0; + box-shadow: none; + outline: none; + } + } } .filter-bar.centered { justify-content: center; diff --git a/src/pages/account-statuses.jsx b/src/pages/account-statuses.jsx index 34704188..dfd94df5 100644 --- a/src/pages/account-statuses.jsx +++ b/src/pages/account-statuses.jsx @@ -17,17 +17,119 @@ import useTitle from '../utils/useTitle'; const LIMIT = 20; +const supportsInputMonth = (() => { + try { + const input = document.createElement('input'); + input.setAttribute('type', 'month'); + return input.type === 'month'; + } catch (e) { + return false; + } +})(); + function AccountStatuses() { const snapStates = useSnapshot(states); const { id, ...params } = useParams(); const [searchParams, setSearchParams] = useSearchParams(); + const month = searchParams.get('month'); const excludeReplies = !searchParams.get('replies'); const excludeBoosts = !!searchParams.get('boosts'); const tagged = searchParams.get('tagged'); const media = !!searchParams.get('media'); const { masto, instance, authenticated } = api({ instance: params.instance }); const accountStatusesIterator = useRef(); + + const allSearchParams = [month, excludeReplies, excludeBoosts, tagged, media]; + const [account, setAccount] = useState(); + const searchOffsetRef = useRef(0); + useEffect(() => { + searchOffsetRef.current = 0; + }, allSearchParams); + + const sameCurrentInstance = useMemo( + () => instance === api().instance, + [instance], + ); + const [searchEnabled, setSearchEnabled] = useState(false); + useEffect(() => { + // Only enable for current logged-in instance + // Most remote instances don't allow unauthenticated searches + if (!sameCurrentInstance) return; + if (!account?.acct) return; + (async () => { + const results = await masto.v2.search.fetch({ + q: `from:${account?.acct}`, + type: 'statuses', + limit: 1, + }); + setSearchEnabled(!!results?.statuses?.length); + })(); + }, [sameCurrentInstance, account?.acct]); + async function fetchAccountStatuses(firstLoad) { + if (/^\d{4}-[01]\d$/.test(month)) { + if (!account) { + return { + value: [], + done: true, + }; + } + const [_year, _month] = month.split('-'); + const monthIndex = parseInt(_month, 10) - 1; + // YYYY-MM (no day) + // Search options: + // - from:account + // - after:YYYY-MM-DD (non-inclusive) + // - before:YYYY-MM-DD (non-inclusive) + + // Last day of previous month + const after = new Date(_year, monthIndex, 0); + const afterStr = `${after.getFullYear()}-${(after.getMonth() + 1) + .toString() + .padStart(2, '0')}-${after.getDate().toString().padStart(2, '0')}`; + // First day of next month + const before = new Date(_year, monthIndex + 1, 1); + const beforeStr = `${before.getFullYear()}-${(before.getMonth() + 1) + .toString() + .padStart(2, '0')}-${before.getDate().toString().padStart(2, '0')}`; + console.log({ + month, + _year, + _month, + monthIndex, + after, + before, + afterStr, + beforeStr, + }); + + let limit; + if (firstLoad) { + limit = LIMIT + 1; + searchOffsetRef.current = 0; + } else { + limit = LIMIT + searchOffsetRef.current + 1; + searchOffsetRef.current += LIMIT; + } + + const searchResults = await masto.v2.search.fetch({ + q: `from:${account.acct} after:${afterStr} before:${beforeStr}`, + type: 'statuses', + limit, + offset: searchOffsetRef.current, + }); + if (searchResults?.statuses?.length) { + const value = searchResults.statuses.slice(0, LIMIT); + value.forEach((item) => { + saveStatus(item, instance); + }); + const done = searchResults.statuses.length <= LIMIT; + return { value, done }; + } else { + return { value: [], done: true }; + } + } + const results = []; if (firstLoad) { const { value: pinnedStatuses } = await masto.v1.accounts @@ -78,7 +180,6 @@ function AccountStatuses() { }; } - const [account, setAccount] = useState(); const [featuredTags, setFeaturedTags] = useState([]); useTitle( `${account?.displayName ? account.displayName + ' ' : ''}@${ @@ -112,7 +213,8 @@ function AccountStatuses() { const filterBarRef = useRef(); const TimelineStart = useMemo(() => { const cachedAccount = snapStates.accounts[`${id}@${instance}`]; - const filtered = !excludeReplies || excludeBoosts || tagged || media; + const filtered = + !excludeReplies || excludeBoosts || tagged || media || !!month; return ( <> {featuredTags.map((tag) => ( {tag.statusesCount} */} ))} + {searchEnabled && + (supportsInputMonth ? ( + { + const { value } = e.currentTarget; + setSearchParams( + value + ? { + month: value, + } + : {}, + ); + }} + /> + ) : ( + // Fallback to for year + { + const { value } = e; + setSearchParams( + value + ? { + month: value, + } + : {}, + ); + }} + /> + ))}
); @@ -199,11 +342,9 @@ function AccountStatuses() { id, instance, authenticated, - excludeReplies, - excludeBoosts, featuredTags, - tagged, - media, + searchEnabled, + ...allSearchParams, ]); useEffect(() => { @@ -258,7 +399,13 @@ function AccountStatuses() { useItemID boostsCarousel={snapStates.settings.boostsCarousel} timelineStart={TimelineStart} - refresh={[excludeReplies, excludeBoosts, tagged, media].toString()} + refresh={[ + excludeReplies, + excludeBoosts, + tagged, + media, + month + account?.acct, + ].toString()} headerEnd={ {}, + } = props; + const [_year, _month] = value?.split('-') || []; + const monthFieldRef = useRef(); + const yearFieldRef = useRef(); + + return ( +
+ {' '} + { + const { value } = e.currentTarget; + onInput({ + value: value ? `${value}-${monthFieldRef.current.value}` : '', + }); + }} + style={{ + width: '4.5em', + }} + /> +
+ ); +} + export default AccountStatuses; From 3721acf3d3eb26bc262eab6ba33c102fb1b90832 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 20 Oct 2023 19:24:01 +0800 Subject: [PATCH 07/65] Attempt to make month picker better --- src/app.css | 16 ++++++++++- src/components/icon.jsx | 1 + src/pages/account-statuses.jsx | 49 +++++++++++++++++++--------------- 3 files changed, 44 insertions(+), 22 deletions(-) diff --git a/src/app.css b/src/app.css index 292ff984..6e8e36b4 100644 --- a/src/app.css +++ b/src/app.css @@ -2134,11 +2134,18 @@ ul.link-list li a .icon { border-radius: 999px; color: var(--text-color); background-color: var(--bg-color); + background-image: none; border: 2px solid transparent; margin: 0; - appearance: none; + /* appearance: none; */ line-height: 1; font-size: 90%; + display: flex; + gap: 8px; + + > .icon { + color: var(--link-color); + } &:placeholder-shown { color: var(--text-insignificant-color); @@ -2157,6 +2164,7 @@ ul.link-list li a .icon { :is(input, select) { background-color: transparent; + background-image: none; border: 0; padding: 0; margin: 0; @@ -2167,6 +2175,12 @@ ul.link-list li a .icon { border-radius: 0; box-shadow: none; outline: none; + + &::-webkit-calendar-picker-indicator { + /* replace icon with triangle */ + opacity: 0.5; + background-image: url('data:image/svg+xml;utf8,'); + } } } } diff --git a/src/components/icon.jsx b/src/components/icon.jsx index 9186383b..42e33f2a 100644 --- a/src/components/icon.jsx +++ b/src/components/icon.jsx @@ -101,6 +101,7 @@ export const ICONS = { 'account-warning': () => import('@iconify-icons/mingcute/user-warning-line'), keyboard: () => import('@iconify-icons/mingcute/keyboard-line'), cloud: () => import('@iconify-icons/mingcute/cloud-line'), + month: () => import('@iconify-icons/mingcute/calendar-month-line'), }; function Icon({ diff --git a/src/pages/account-statuses.jsx b/src/pages/account-statuses.jsx index dfd94df5..4f9d936e 100644 --- a/src/pages/account-statuses.jsx +++ b/src/pages/account-statuses.jsx @@ -16,6 +16,8 @@ import { saveStatus } from '../utils/states'; import useTitle from '../utils/useTitle'; const LIMIT = 20; +const MIN_YEAR = 1983; +const MIN_YEAR_MONTH = `${MIN_YEAR}-01`; // Birth of the Internet const supportsInputMonth = (() => { try { @@ -67,7 +69,9 @@ function AccountStatuses() { }, [sameCurrentInstance, account?.acct]); async function fetchAccountStatuses(firstLoad) { - if (/^\d{4}-[01]\d$/.test(month)) { + const isValidMonth = /^\d{4}-[01]\d$/.test(month); + const isValidYear = month?.split?.('-')?.[0] >= MIN_YEAR; + if (isValidMonth && isValidYear) { if (!account) { return { value: [], @@ -297,31 +301,33 @@ function AccountStatuses() { ))} {searchEnabled && (supportsInputMonth ? ( - { - const { value } = e.currentTarget; - setSearchParams( - value - ? { - month: value, - } - : {}, - ); - }} - /> + ) : ( // Fallback to for year { const { value } = e; @@ -465,6 +471,7 @@ function MonthPicker(props) { return (
+ { + e.target.select(); + // Copy to clipboard + try { + navigator.clipboard.writeText(e.target.value); + showToast('Version string copied'); + } catch (e) { + console.warn(e); + showToast('Unable to copy version string'); + } + }} + />{' '} + + ( + + + + ) +

)} From 58d36d24033212d7e4f1fdeddd9a8f2a6a979e90 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Mon, 23 Oct 2023 08:55:22 +0800 Subject: [PATCH 35/65] Filter links by type --- src/pages/trending.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/trending.jsx b/src/pages/trending.jsx index 54040ea3..793a8a2c 100644 --- a/src/pages/trending.jsx +++ b/src/pages/trending.jsx @@ -64,7 +64,10 @@ function Trending({ columnMode, ...props }) { // Get links try { - const { value: links } = await fetchLinks(masto); + const { value } = await fetchLinks(masto); + // 4 types available: link, photo, video, rich + // Only want links for now + const links = value?.filter?.((link) => link.type === 'link'); console.log('links', links); if (links?.length) { setLinks(links); From 2c4dd0cdb75e47d9b982c1cf332242c9b4bde90f Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Mon, 23 Oct 2023 11:12:15 +0800 Subject: [PATCH 36/65] Add lang & dir to trending news --- src/pages/trending.jsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/pages/trending.jsx b/src/pages/trending.jsx index 793a8a2c..742c7175 100644 --- a/src/pages/trending.jsx +++ b/src/pages/trending.jsx @@ -230,10 +230,16 @@ function Trending({ columnMode, ...props }) { )}
- {!!title &&

{title}

} + {!!title && ( +

+ {title} +

+ )} {!!description && ( -

{description}

+

+ {description} +

)}
From f2c2983663a6d60b954e9ca8c4c07da29815db1f Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Mon, 23 Oct 2023 11:12:28 +0800 Subject: [PATCH 37/65] Comment out test code --- src/pages/notifications.jsx | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx index a6cda934..da66b192 100644 --- a/src/pages/notifications.jsx +++ b/src/pages/notifications.jsx @@ -217,23 +217,23 @@ function Notifications({ columnMode }) { } }, [notificationID, notificationAccessToken]); - useEffect(() => { - if (uiState === 'default') { - (async () => { - try { - const registration = await getRegistration(); - if (registration?.getNotifications) { - const notifications = await registration.getNotifications(); - console.log('🔔 Push notifications', notifications); - // Close all notifications? - // notifications.forEach((notification) => { - // notification.close(); - // }); - } - } catch (e) {} - })(); - } - }, [uiState]); + // useEffect(() => { + // if (uiState === 'default') { + // (async () => { + // try { + // const registration = await getRegistration(); + // if (registration?.getNotifications) { + // const notifications = await registration.getNotifications(); + // console.log('🔔 Push notifications', notifications); + // // Close all notifications? + // // notifications.forEach((notification) => { + // // notification.close(); + // // }); + // } + // } catch (e) {} + // })(); + // } + // }, [uiState]); return (
Date: Mon, 23 Oct 2023 16:23:33 +0800 Subject: [PATCH 38/65] Slight rewrite, possibly breaking --- src/app.jsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/app.jsx b/src/app.jsx index 5b03521a..a673a34e 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -267,11 +267,14 @@ function PrimaryRoutes({ isLoggedIn, loading }) { ); } +function getPrevLocation() { + return states.prevLocation || null; +} function SecondaryRoutes({ isLoggedIn }) { - const snapStates = useSnapshot(states); + // const snapStates = useSnapshot(states); const location = useLocation(); - const prevLocation = snapStates.prevLocation; - const backgroundLocation = useRef(prevLocation || null); + // const prevLocation = snapStates.prevLocation; + const backgroundLocation = useRef(getPrevLocation()); const isModalPage = useMemo(() => { return ( @@ -280,7 +283,8 @@ function SecondaryRoutes({ isLoggedIn }) { ); }, [location.pathname, matchPath]); if (isModalPage) { - if (!backgroundLocation.current) backgroundLocation.current = prevLocation; + if (!backgroundLocation.current) + backgroundLocation.current = getPrevLocation(); } else { backgroundLocation.current = null; } From 4897847601c69dd7af98e9e91f624e8c11a83374 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Mon, 23 Oct 2023 16:23:45 +0800 Subject: [PATCH 39/65] Let's prettify all paragraphs --- src/index.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/index.css b/src/index.css index 8508da46..307b6ea2 100644 --- a/src/index.css +++ b/src/index.css @@ -148,6 +148,16 @@ body { } } +p { + /* + white-space is shorthand for two values; white-space-collapse and text-wrap + https://developer.mozilla.org/en-US/docs/Web/CSS/white-space + !important is needed to override higher specificity when elements are styled + with `white-space` and 1 value, which doesn't have "pretty" + */ + text-wrap: pretty !important; +} + a { color: var(--link-color); text-decoration-color: var(--link-faded-color); From 61756fac1d164226b943b1b6f4d42356b8a8c308 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Mon, 23 Oct 2023 16:24:30 +0800 Subject: [PATCH 40/65] Fix unneccesary re-renders in Notifications --- src/components/notification.jsx | 21 ++++++++++++--------- src/pages/notifications.jsx | 19 ++++++++----------- src/utils/group-notifications.jsx | 7 +++++-- 3 files changed, 25 insertions(+), 22 deletions(-) diff --git a/src/components/notification.jsx b/src/components/notification.jsx index e02beea3..abe557df 100644 --- a/src/components/notification.jsx +++ b/src/components/notification.jsx @@ -1,3 +1,5 @@ +import { memo } from 'preact/compat'; + import shortenNumber from '../utils/shorten-number'; import states from '../utils/states'; import store from '../utils/store'; @@ -64,7 +66,7 @@ const contentText = { const AVATARS_LIMIT = 50; -function Notification({ notification, instance, reload, isStatic }) { +function Notification({ notification, instance, isStatic }) { const { id, status, account, report, _accounts, _statuses } = notification; let { type } = notification; @@ -153,8 +155,14 @@ function Notification({ notification, instance, reload, isStatic }) { }; }; + console.debug('RENDER Notification', notification.id); + return ( -
+
{type === 'follow_request' && ( - { - // reload(); - }} - /> + )} )} @@ -327,4 +330,4 @@ function TruncatedLink(props) { return ; } -export default Notification; +export default memo(Notification); diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx index da66b192..824e7b7d 100644 --- a/src/pages/notifications.jsx +++ b/src/pages/notifications.jsx @@ -1,5 +1,6 @@ import './notifications.css'; +import { Fragment } from 'preact'; import { memo } from 'preact/compat'; import { useCallback, useEffect, useRef, useState } from 'preact/hooks'; import { InView } from 'react-intersection-observer'; @@ -166,11 +167,11 @@ function Notifications({ columnMode }) { } }, [reachStart]); - useEffect(() => { - if (nearReachEnd && showMore) { - loadNotifications(); - } - }, [nearReachEnd, showMore]); + // useEffect(() => { + // if (nearReachEnd && showMore) { + // loadNotifications(); + // } + // }, [nearReachEnd, showMore]); const loadUpdates = useCallback(() => { console.log('✨ Load updates', { @@ -409,18 +410,14 @@ function Notifications({ columnMode }) { hideTime: true, }); return ( - <> + {differentDay &&

{heading}

} { - loadNotifications(true); - loadFollowRequests(); - }} /> - + ); })} diff --git a/src/utils/group-notifications.jsx b/src/utils/group-notifications.jsx index cbc80b48..83326ccb 100644 --- a/src/utils/group-notifications.jsx +++ b/src/utils/group-notifications.jsx @@ -6,7 +6,7 @@ function groupNotifications(notifications) { const cleanNotifications = []; for (let i = 0, j = 0; i < notifications.length; i++) { const notification = notifications[i]; - const { status, account, type, createdAt } = notification; + const { id, status, account, type, createdAt } = notification; const date = new Date(createdAt).toLocaleDateString(); let virtualType = type; if (type === 'favourite' || type === 'reblog') { @@ -23,9 +23,11 @@ function groupNotifications(notifications) { if (mappedAccount) { mappedAccount._types.push(type); mappedAccount._types.sort().reverse(); + mappedNotification.id += `-${id}`; } else { account._types = [type]; mappedNotification._accounts.push(account); + mappedNotification.id += `-${id}`; } } else { account._types = [type]; @@ -47,13 +49,14 @@ function groupNotifications(notifications) { const cleanNotifications2 = []; for (let i = 0, j = 0; i < cleanNotifications.length; i++) { const notification = cleanNotifications[i]; - const { account, _accounts, type, createdAt } = notification; + const { id, account, _accounts, type, createdAt } = notification; const date = new Date(createdAt).toLocaleDateString(); if (type === 'favourite+reblog' && account && _accounts.length === 1) { const key = `${account?.id}-${type}-${date}`; const mappedNotification = notificationsMap2[key]; if (mappedNotification) { mappedNotification._statuses.push(notification.status); + mappedNotification.id += `-${id}`; } else { let n = (notificationsMap2[key] = { ...notification, From 7555bda8e9108d12de85376d7ee61a5f5fc370f6 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Tue, 24 Oct 2023 09:58:41 +0800 Subject: [PATCH 41/65] Waited wayy too long for Firefox to support :has --- src/components/shortcuts-settings.css | 2 +- src/components/shortcuts-settings.jsx | 40 ++++++++++++++------------- 2 files changed, 22 insertions(+), 20 deletions(-) diff --git a/src/components/shortcuts-settings.css b/src/components/shortcuts-settings.css index 5078a377..086c7911 100644 --- a/src/components/shortcuts-settings.css +++ b/src/components/shortcuts-settings.css @@ -85,7 +85,7 @@ transform: scale(0.975); transition: all 0.2s ease-out; } -#shortcuts-settings-container .shortcuts-view-mode label:has(input:checked) { +#shortcuts-settings-container .shortcuts-view-mode label.checked { box-shadow: inset 0 0 0 3px var(--link-color); } #shortcuts-settings-container diff --git a/src/components/shortcuts-settings.jsx b/src/components/shortcuts-settings.jsx index ecc8d98d..734d90d2 100644 --- a/src/components/shortcuts-settings.jsx +++ b/src/components/shortcuts-settings.jsx @@ -271,25 +271,27 @@ function ShortcutsSettings({ onClose }) { label: 'Multi-column', imgURL: multiColumnUrl, }, - ].map(({ value, label, imgURL }) => ( - - ))} + ].map(({ value, label, imgURL }) => { + const checked = + snapStates.settings.shortcutsViewMode === value || + (value === 'float-button' && + !snapStates.settings.shortcutsViewMode); + return ( + + ); + })}
{/*