-
- {matches.map((emoji) => (
-
-
-
{ - onSelectEmoji(`:${emoji.shortcode}:`); - }} - showCode - /> -
- ))}
-
- {uiState === 'error' && (
- 
{
// Reset meta color
if ($meta.current && metaColor.current) {
$meta.current.content = metaColor.current;
}
+ document.documentElement.style.removeProperty('--meta-theme-color');
};
}, [children, minimized]);
diff --git a/src/components/nav-menu.css b/src/components/nav-menu.css
index 4e9f673660..b2017a5747 100644
--- a/src/components/nav-menu.css
+++ b/src/components/nav-menu.css
@@ -61,7 +61,8 @@
to bottom var(--backward),
var(--bg-blur-color),
transparent
- ), url(../assets/phanpy-bg.svg);
+ ),
+ url(../assets/phanpy-bg.svg);
background-repeat: no-repeat;
/* background-size: auto, auto, 200%; */
background-position:
diff --git a/src/components/notification.jsx b/src/components/notification.jsx
index 2d87346f1c..a30a9713e3 100644
--- a/src/components/notification.jsx
+++ b/src/components/notification.jsx
@@ -502,6 +502,11 @@ function Notification({
)} */}
- {type !== 'mention' && type !== 'quote' && (
+ {type !== 'mention' && type !== 'quote' && type !== 'mention+quote' && (
<>
-
- Private note about{' '}
-
- @{account?.username || account?.acct}
-
-
-
+ Notes
+ {' '}
+
+ Only visible to you
+
)}
@@ -725,7 +740,7 @@ function fetchAccount(id, masto) {
return masto.v1.accounts.$select(id).fetch();
}
const memFetchAccount = pmem(fetchAccount, {
- maxAge: 30 * 60 * 1000, // 30 minutes
+ expires: 30 * 60 * 1000, // 30 minutes
});
export default AccountStatuses;
diff --git a/src/pages/catchup.jsx b/src/pages/catchup.jsx
index 29fed7411f..06a3a8776e 100644
--- a/src/pages/catchup.jsx
+++ b/src/pages/catchup.jsx
@@ -66,7 +66,7 @@ const RANGES = [
{ label: msg`last 10 hours`, value: 10 },
{ label: msg`last 11 hours`, value: 11 },
{ label: msg`last 12 hours`, value: 12 },
- { label: msg`beyond 12 hours`, value: 13 },
+ { label: msg`beyond 12 hours`, value: 13, beyond: true },
];
const FILTER_KEYS = {
@@ -212,6 +212,14 @@ function Catchup() {
const handleCatchupClick = useCallback(async ({ duration } = {}) => {
const now = Date.now();
const maxCreatedAt = duration ? now - duration : null;
+ console.log('CATCHUP', {
+ duration,
+ durationHuman: duration ? `${duration / 1000 / 60 / 60}h` : null,
+ maxCreatedAt,
+ maxCreatedAtHuman: maxCreatedAt
+ ? dtf.format(new Date(maxCreatedAt))
+ : null,
+ });
setUIState('loading');
const results = await fetchHome({ maxCreatedAt });
// Namespaced by account ID
@@ -814,7 +822,7 @@ function Catchup() {
nextItem.scrollIntoView({
block: 'center',
inline: 'center',
- behavior: 'smooth',
+ behavior: 'instant',
});
}
} else {
@@ -827,7 +835,7 @@ function Catchup() {
topmostItem.scrollIntoView({
block: 'nearest',
inline: 'center',
- behavior: 'smooth',
+ behavior: 'instant',
});
}
}
@@ -859,7 +867,7 @@ function Catchup() {
prevItem.scrollIntoView({
block: 'center',
inline: 'center',
- behavior: 'smooth',
+ behavior: 'instant',
});
}
} else {
@@ -872,7 +880,7 @@ function Catchup() {
topmostItem.scrollIntoView({
block: 'nearest',
inline: 'center',
- behavior: 'smooth',
+ behavior: 'instant',
});
}
}
@@ -1102,20 +1110,23 @@ function Catchup() {
)}
+
-
);
diff --git a/src/components/intl-segmenter-suspense.jsx b/src/components/intl-segmenter-suspense.jsx
index e015401ef2..8a2b7a5e32 100644
--- a/src/components/intl-segmenter-suspense.jsx
+++ b/src/components/intl-segmenter-suspense.jsx
@@ -1,4 +1,4 @@
-import { shouldPolyfill } from '@formatjs/intl-segmenter/should-polyfill';
+import { shouldPolyfill } from '@formatjs/intl-segmenter/should-polyfill.js';
import { Suspense } from 'preact/compat';
import { useEffect, useState } from 'preact/hooks';
@@ -10,7 +10,7 @@ const supportsIntlSegmenter = !shouldPolyfill();
setTimeout(() => {
queueMicrotask(() => {
if (!supportsIntlSegmenter) {
- import('@formatjs/intl-segmenter/polyfill-force').catch(() => {});
+ import('@formatjs/intl-segmenter/polyfill-force.js').catch(() => {});
}
});
}, 1000);
@@ -23,7 +23,7 @@ export default function IntlSegmenterSuspense({ children }) {
const [polyfillLoaded, setPolyfillLoaded] = useState(false);
useEffect(() => {
(async () => {
- await import('@formatjs/intl-segmenter/polyfill-force');
+ await import('@formatjs/intl-segmenter/polyfill-force.js');
setPolyfillLoaded(true);
})();
}, []);
diff --git a/src/components/media-modal.jsx b/src/components/media-modal.jsx
index d77a8cbe58..5b5d1097ee 100644
--- a/src/components/media-modal.jsx
+++ b/src/components/media-modal.jsx
@@ -203,6 +203,10 @@ function MediaModal({
metaColor = $meta.content;
$meta.content = mediaColor;
}
+ document.documentElement.style.setProperty(
+ '--meta-theme-color',
+ mediaColor,
+ );
} else {
const colorScheme = window.matchMedia('(prefers-color-scheme: dark)')
.matches
@@ -217,6 +221,10 @@ function MediaModal({
metaColor = $meta.content;
$meta.content = mediaColor;
}
+ document.documentElement.style.setProperty(
+ '--meta-theme-color',
+ mediaColor,
+ );
}
}
return () => {
@@ -224,6 +232,7 @@ function MediaModal({
if ($meta && metaColor) {
$meta.content = metaColor;
}
+ document.documentElement.style.removeProperty('--meta-theme-color');
};
}, [currentIndex, mediaAccentColors]);
diff --git a/src/components/media.jsx b/src/components/media.jsx
index 2050e37a14..5858efb4c9 100644
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@@ -735,7 +735,26 @@ function Media({
style={!showOriginal && mediaStyles}
>
{showOriginal ? (
-
+ previewUrl ? (
+
+ ) : (
+
+ )
) : previewUrl ? (
-
-
+ {matches.map((emoji) => (
+
-
+
{ + onSelectEmoji(`:${emoji.shortcode}:`); + }} + showCode + /> +
+ ))}
+
+ {uiState === 'error' && (
+
)}
- {uiState === 'default' &&
- Object.entries(customEmojisCatList).map(
- ([category, emojis]) =>
- !!emojis?.length && (
-
+
+ )}
+ {uiState === 'default' &&
+ Object.entries(customEmojisCatList).map(
+ ([category, emojis]) =>
+ !!emojis?.length && (
+
+
+
+ ),
+ )}
+ {{
+ '--recent--': t`Recently used`,
+ '--others--': t`Others`,
+ }[category] || category}
+
+
-
- ),
- )}
+
- {{
- '--recent--': t`Recently used`,
- '--others--': t`Others`,
- }[category] || category}
-
-
+
+
+
+
+ ) : (
+
+
)}
-
+
-
-
-
{text}
{type === 'follow_request' && ( @@ -809,6 +814,7 @@ function Notification({ } function TruncatedLink(props) { + const { t } = useLingui(); const ref = useTruncated(); return ; } diff --git a/src/components/private-note-sheet.jsx b/src/components/private-note-sheet.jsx index 0cf91c8857..cd34d3f2b1 100644 --- a/src/components/private-note-sheet.jsx +++ b/src/components/private-note-sheet.jsx @@ -38,13 +38,11 @@ function PrivateNoteSheet({ )}- {appSite} {appVersion} + {sameSite ? appSite : ''} {appVersion}
)} diff --git a/src/pages/year-in-posts.css b/src/pages/year-in-posts.css new file mode 100644 index 0000000000..47ff4c56fa --- /dev/null +++ b/src/pages/year-in-posts.css @@ -0,0 +1,859 @@ +#year-in-posts-page { + /* via https://modernfontstacks.com/ */ + --serif-font: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif; + + padding-bottom: 0 !important; + background-color: var(--bg-faded-color); + background-image: radial-gradient( + closest-side, + var(--bg-color) 30%, + transparent 60% + ); + + ~ :is(#shortcuts, #compose-button) { + display: none; + } + .timeline-deck { + background-color: transparent; + margin-top: 0 !important; + transition: 1s ease-out 0.3s; + transition-property: opacity; + will-change: opacity; + + @starting-style { + opacity: 0; + } + } + header { + --margin-top: 0 !important; + margin-inline: auto; + position: static; + + > .header-grid { + backdrop-filter: none; + } + + .search-field { + transition-property: opacity, scale, translate; + transition-duration: 1s, 0.3s, 0.3s; + transition-timing-function: var(--timing-function); + transform-origin: var(--forward); + + @starting-style { + opacity: 0; + scale: 0 1; + translate: 20% 0; + } + } + + .search-field input { + border-radius: 9999px; + padding-inline: 12px; + } + } + + .year-in-posts-start { + padding: 16px; + padding-top: 15vh; + text-align: center; + margin-inline: auto; + text-wrap: balance; + + h1 { + font-size: 3em; + letter-spacing: -0.02em; + font-family: var(--serif-font); + margin-block: 0.1em; + mask-image: linear-gradient( + to bottom var(--forward), + rgba(0, 0, 0, 0.3) 20%, + black + ); + } + + h1 sup { + font-size: 15px; + text-transform: uppercase; + font-weight: 500; + color: var(--text-insignificant-color); + } + + details { + border-radius: 16px; + text-wrap: balance; + color: var(--text-insignificant-color); + padding: 1em; + margin: -1em 0 0; + transition: all 0.3s var(--timing-function); + line-height: 1.4; + + &[open] { + transform: translateY(-20vh); + color: var(--text-color); + background-color: var(--bg-color); + background-image: + radial-gradient( + farthest-corner at 25% 0, + transparent 80%, + var(--bg-faded-color) 95%, + var(--bg-color) + ), + radial-gradient( + farthest-corner at 100% 100%, + transparent 80%, + var(--bg-faded-blur-color) + ); + outline: 1px solid var(--bg-color); + box-shadow: 0 16px 32px -16px var(--drop-shadow-color); + + ~ * { + opacity: 0; + pointer-events: none; + } + + img { + width: 480px; + height: auto; + border-radius: 8px; + border: 1px solid var(--outline-color); + } + } + + summary { + font-size: 0.9em; + cursor: pointer; + user-select: none; + + &:hover { + color: var(--text-color); + } + } + } + } + + .year-in-posts-summary { + padding: 8px 8px 0; + display: flex; + align-items: center; + gap: 16px; + margin-inline: auto; + } + + /* Keep original search-field styles for non-header usage */ + main .search-field { + padding: 8px 8px 16px; + margin-inline: auto; + + input { + border-radius: 9999px; + padding-inline: 12px; + } + } + + .calendar-bar { + padding: 8px 8px 16px; + display: grid; + gap: 8px; + margin-inline: auto; + grid-auto-rows: 1fr; + + @media (min-width: 420px) { + grid-template-columns: repeat(2, 1fr); + } + @media (min-width: 620px) { + grid-template-columns: repeat(3, 1fr); + } + + &.horizontal { + max-width: none; + display: flex; + overflow-x: auto; + justify-content: safe center; + scroll-padding: 40%; + mask-image: linear-gradient( + var(--to-forward), + transparent, + black 16px calc(100% - 16px), + transparent + ); + + @media (min-width: 40em) { + width: 100vw; + transform: translateX(calc(-50% + var(--main-width) / 2)); + padding-inline: max(calc((100vw - var(--main-width)) / 2), 8px); + &:dir(rtl) { + transform: translateX(calc(50% - var(--main-width) / 2)); + } + } + } + + .month-filter { + animation: fade-in 0.3s var(--timing-function); + display: grid; + grid-template-rows: auto 1fr auto; + justify-items: center; + gap: 4px; + padding: 12px; + border-radius: 24px; + /* transition: 0.3s var(--timing-function); */ + transition-timing-function: var(--spring-timing-function), ease, ease; + transition-property: scale, background-color, box-shadow; + transition-duration: var(--spring-timing-duration), 0.3s, 0.3s; + background-color: var(--bg-blur-color); + scale: 0.975; + position: relative; + + /* Pie chart outline */ + --month-border-width: 2px; + --month-original-pct: calc(var(--month-original-ratio) * 100%); + --month-reply-start: var(--month-original-pct); + --month-reply-pct: calc(var(--month-reply-ratio) * 100%); + --month-quote-start: calc( + var(--month-reply-start) + + var(--month-reply-pct) + ); + --month-quote-pct: calc(var(--month-quote-ratio) * 100%); + --month-boost-start: calc( + var(--month-quote-start) + + var(--month-quote-pct) + ); + --month-boost-pct: calc(var(--month-boost-ratio) * 100%); + + &::before { + content: ''; + position: absolute; + inset: 0; + border-radius: inherit; + padding: var(--month-border-width); + background-image: conic-gradient( + from 0deg, + var(--link-color) 0% var(--month-reply-start), + var(--reply-to-color) var(--month-reply-start) + var(--month-quote-start), + var(--quote-color) var(--month-quote-start) var(--month-boost-start), + var(--reblog-color) var(--month-boost-start) 100% + ); + mask: + linear-gradient(#fff 0 0) content-box, + linear-gradient(#fff 0 0); + mask-composite: exclude; + pointer-events: none; + opacity: 0.2; + transition: 0.6s ease; + transition-property: opacity; + } + + &:is(:hover, :focus, .is-active)::before { + transition-duration: 0.1s; + opacity: 1; + } + + &:is(:hover, :focus, .is-active) { + scale: 1; + background-color: var(--bg-color); + box-shadow: + 0 2px 4px var(--drop-shadow-color), + 0 4px 8px var(--drop-shadow-color); + filter: none; + } + + &:active { + transition: none; + filter: brightness(0.9); + scale: 0.975; + } + + .horizontal & { + padding: 10px; + border-radius: 12px; + + &:not(.is-active) { + animation-duration: 1s; + } + + &:not(.is-active, :hover, :focus) .month-heatmap { + opacity: 0.75; + } + } + + .media-grid & { + background-color: var(--bg-faded-blur-color); + + &::before { + background-image: none; + background-color: var(--outline-hover-color); + } + + &.is-active { + background-color: var(--bg-color); + } + } + + &:is(:hover, :focus) .month-name { + color: var(--text-color); + } + } + } + + .month-name { + color: var(--text-insignificant-color); + text-transform: uppercase; + font-size: 0.8em; + + .is-active & { + font-weight: bold; + color: var(--text-color); + } + } + + .month-metadata { + color: var(--text-insignificant-color); + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: flex-end; + font-size: 0.8em; + } + + .month-heatmap { + display: grid; + grid-template-columns: repeat(7, 1fr); + grid-template-rows: repeat(6, 1fr); + gap: var(--hairline-width); + transition: opacity 0.3s ease; + + .is-active & { + filter: none; + } + } + + .heatmap-day { + --cell-size: 24px; + .calendar-bar.horizontal & { + --cell-size: 16px; + } + + width: var(--cell-size); + height: var(--cell-size); + --min-scale: 0.3; + --max-scale: 1; + + &:not(.empty) { + border-radius: 50%; + background-color: var(--bg-color); + outline: 2px solid var(--outline-color); + outline-offset: -2px; + + &[data-ratio='0'] { + scale: 0.5; + } + + &:not([data-ratio='0']) { + /* Calculate cumulative percentages for conic-gradient */ + --original-pct: calc(var(--original-ratio) * 100%); + --reply-start: var(--original-pct); + --reply-pct: calc(var(--reply-ratio) * 100%); + --quote-start: calc(var(--reply-start) + var(--reply-pct)); + --quote-pct: calc(var(--quote-ratio) * 100%); + --boost-start: calc(var(--quote-start) + var(--quote-pct)); + --boost-pct: calc(var(--boost-ratio) * 100%); + + background: conic-gradient( + from 0deg, + var(--link-color) 0% var(--original-pct), + var(--reply-to-color) var(--reply-start) + calc(var(--reply-start) + var(--reply-pct)), + var(--quote-color) var(--quote-start) + calc(var(--quote-start) + var(--quote-pct)), + var(--reblog-color) var(--boost-start) 100% + ); + + /* + Scale based on total post count + Min 0.5 + Max 1.0 + */ + transform: scale( + calc( + var(--min-scale) + + (var(--max-scale) - var(--min-scale)) * + var(--ratio) + ) + ); + } + } + } + + .month-media-grid { + display: grid; + grid-template-columns: repeat(7, 1fr); + grid-template-rows: repeat(6, 1fr); + gap: var(--hairline-width); + + .media-day { + --cell-size: 24px; + .calendar-bar.horizontal & { + --cell-size: 16px; + } + + width: var(--cell-size); + height: var(--cell-size); + + &:not(.empty) { + border-radius: 4px; + outline: 1px solid var(--outline-hover-color); + outline-offset: -1px; + overflow: hidden; + } + + &.empty { + opacity: 0; + } + + &.no-media { + background-color: var(--bg-blur-color); + outline-color: var(--outline-color); + scale: 0.8; + } + + img { + width: 100%; + height: 100%; + object-fit: cover; + image-rendering: crisp-edges; + } + } + } + + .year-in-posts-nav { + display: flex; + justify-content: space-between; + padding: 24px 16px; + gap: 16px; + + button { + font-size: 1em; + } + } + + .year-generate { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 12px; + border-radius: 9999px; + flex-wrap: wrap; + background-color: var(--link-bg-color); + --top-glare-color: var(--link-light-color); + --bottom-glare-color: var(--bg-faded-color); + background-image: radial-gradient( + ellipse at top var(--backward), + var(--bottom-glare-color) 10%, + var(--link-bg-color) 30% 85%, + var(--top-glare-color) + ); + + @media (prefers-color-scheme: dark) { + --top-glare-color: var(--bg-faded-color); + --bottom-glare-color: var(--link-light-color); + } + + input[type='number'] { + font-weight: bold; + vertical-align: middle; + padding: 8px 12px; + border-radius: 2.5em; + border: 0; + background-color: var(--bg-color); + width: auto !important; + min-height: 44px; + field-sizing: content; + font-variant-numeric: tabular-nums; + } + + button { + min-height: 44px; + } + + .loader-container { + margin: 0; + --loader-color: var(--button-text-color); + vertical-align: middle !important; + } + } + + .year-selection { + margin: 8px auto; + width: fit-content; + color: var(--text-insignificant-color); + border-top: 1px solid var(--bg-faded-color); + + > ul { + list-style: none; + padding: 0; + margin: 0; + + > li { + margin-bottom: 8px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + + a { + display: flex; + align-items: center; + gap: 0.25em; + } + } + } + + .tag.warn { + color: var(--favourite-color); + display: inline-flex; + align-items: center; + gap: 2px; + } + } + + > .timeline-deck > main > .timeline { + margin-inline: auto; + + > li { + background-color: var(--bg-color); + } + + .date-header { + position: sticky; + --mask-padding: 8px; + top: calc(var(--sai-top, 0) - var(--mask-padding)); + z-index: 1; + padding: var(--mask-padding); + margin: 0; + background-color: inherit; + border: 0; + border-radius: 0; + background-color: var(--bg-faded-blur-color); + backdrop-filter: blur(24px); + text-shadow: + 0 0 8px var(--bg-color), + 0 0 8px var(--bg-color), + 0 0 16px var(--bg-color); + mask-composite: intersect; + mask-image: + linear-gradient( + var(--to-forward), + transparent, + #000 var(--mask-padding) 33%, + transparent + ), + linear-gradient( + to bottom, + transparent, + #000 var(--mask-padding) calc(100% - var(--mask-padding)), + transparent + ); + + @supports ( + (animation-timeline: scroll()) and + (animation-range: 0% 100%) + ) { + background-color: transparent; + animation: show-bg 1s linear both; + animation-timeline: view(block); + animation-range: contain 50% exit 0%; + } + + h2 { + margin: 0; + padding: 0; + } + + small { + font-weight: normal; + font-size: var(--text-size); + } + + @media (max-height: 600px) { + font-size: 0.8em; + } + + @media (min-width: calc(40em + 10em)) { + width: 10em; + text-align: end; + mask-image: + linear-gradient( + var(--to-forward), + transparent, + black 50% calc(100% - var(--mask-padding)), + transparent + ), + linear-gradient( + to bottom, + transparent, + black var(--mask-padding) calc(100% - var(--mask-padding)), + transparent + ); + transform: translate(-100%, 1em); + height: 6em; + margin-bottom: -6em; + + small { + display: block; + } + } + } + } + + .post-type-filters { + padding: 8px; + display: flex; + gap: 8px; + align-items: center; + overflow-x: auto; + overflow-y: hidden; + margin-inline: auto; + mask-image: linear-gradient( + var(--to-forward), + transparent, + black 16px calc(100% - 16px), + transparent + ); + + .filter-cat { + text-decoration: none; + font-size: 80%; + white-space: nowrap; + cursor: pointer; + user-select: none; + color: var(--text-insignificant-color); + position: relative; + padding: 8px 12px; + background-color: var(--bg-blur-color); + border-radius: 24px; + display: inline-block; + display: flex; + align-items: center; + gap: 4px; + + &:active { + transform: scale(0.95); + } + + &:is(:hover, :focus) { + background-color: var(--link-bg-color); + } + + &.is-active { + color: var(--link-color); + background-color: var(--link-bg-color); + box-shadow: inset 0 0 0 2px var(--link-color); + } + + .count { + font-size: 70%; + margin-inline-start: 4px; + background-color: var(--bg-color); + padding: 4px 6px; + border-radius: 12px; + display: inline-block; + } + } + } + + .sort-controls { + padding: 8px; + display: flex; + gap: 8px; + align-items: center; + overflow-x: auto; + overflow-y: hidden; + margin-inline: auto; + color: var(--text-insignificant-color); + + > * { + font-size: 80%; + } + + .filter-label { + text-transform: uppercase; + font-size: 12px; + font-weight: 500; + color: var(--text-insignificant-color); + user-select: none; + } + + .radio-field-group { + display: flex; + border: 0; + padding: 0; + margin: 0; + border-radius: 4px; + overflow: hidden; + gap: 1px; + + .filter-sort { + padding: 4px 8px; + line-height: 2em; + min-width: 32px; + text-align: center; + background-color: var(--bg-blur-color); + margin: 0; + cursor: pointer; + user-select: none; + position: relative; + + &:is(:hover, :focus) { + background-color: var(--link-bg-color); + } + + &:has(:checked) { + font-weight: 500; + color: var(--text-color); + background-color: var(--link-bg-color); + box-shadow: inset 0 -2px 0 var(--link-color); + } + + &:has(:disabled) { + opacity: 0.5; + cursor: not-allowed; + } + + input[type] { + left: 0; + position: absolute; + opacity: 0; + pointer-events: none; + } + } + } + + button { + background-color: transparent; + border: 0; + padding: 4px 8px; + border-radius: 16px; + color: inherit; + cursor: pointer; + white-space: nowrap; + display: inline-flex; + align-items: center; + gap: 4px; + + &:hover { + background-color: var(--bg-blur-color); + } + + &.is-active { + color: var(--link-color); + background-color: var(--link-bg-color); + } + + .icon { + font-size: 0.8em; + } + } + } +} + +.tron-grid { + --grid-color: var(--outline-stronger-color); + --grid-border-width: 2px; + --grid-size: 100px; + --grid-angle: 90deg; + --grid-duration: 25s; /* .25s per px */ + /* Offset the space taken by sticky positioning */ + margin-top: -100vh; + margin-top: -100dvh; + position: sticky; + inset: 0; + width: 100%; + height: 100%; + perspective: 1000px; + pointer-events: none; + z-index: -1; + transition: 3s ease-out 0.3s; + transition-property: opacity, perspective; + will-change: opacity, perspective; + + @starting-style { + opacity: 0; + perspective: 600px; + } + + &::before, + &::after { + content: ''; + position: absolute; + left: -50%; + width: 200%; + height: 200vh; + + background-image: + linear-gradient( + var(--grid-color) calc(var(--grid-border-width) + 1px), + transparent calc(var(--grid-border-width) + 1.5px) + ), + linear-gradient( + 90deg, + var(--grid-color) var(--grid-border-width), + transparent var(--grid-border-width) + ); + background-size: var(--grid-size) var(--grid-size); + transition: translate 1s var(--timing-function); + --grid-month-size: calc(var(--month) / 11 * var(--grid-size)); + translate: calc((var(--grid-size) / 2) - var(--grid-month-size)) 0; + } + + /* Ceiling */ + &::before { + top: 0; + transform-origin: top center; + transform: rotateX(calc(-1 * var(--grid-angle))); + mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); + background-position: center calc(-1 * var(--grid-border-width)); + } + + /* Floor */ + &::after { + bottom: 0; + transform-origin: bottom center; + transform: rotateX(var(--grid-angle)); + mask-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); + background-position: center bottom; + } + + &.animated { + &::before, + &::after { + animation: slow-grid var(--grid-duration) linear infinite; + animation-delay: 1.1s; + } + } +} + +@keyframes slow-grid { + from { + translate: calc(var(--grid-size) / -2) 0; + } + to { + translate: calc(var(--grid-size) / 2) 0; + } +} + +@keyframes blur-scroll { + from { + backdrop-filter: none; + background-color: transparent; + } + to { + backdrop-filter: blur(16px); + background-color: var(--bg-faded-blur-color); + } +} + +@keyframes show-bg { + to { + background-color: var(--bg-faded-color); + } +} diff --git a/src/pages/year-in-posts.jsx b/src/pages/year-in-posts.jsx new file mode 100644 index 0000000000..7be1c3a4e0 --- /dev/null +++ b/src/pages/year-in-posts.jsx @@ -0,0 +1,1434 @@ +import './year-in-posts.css'; + +import { Plural, Trans, useLingui } from '@lingui/react/macro'; +import { MenuDivider, MenuItem } from '@szhsin/react-menu'; +import FlexSearch from 'flexsearch'; +import { forwardRef } from 'preact/compat'; +import { + useEffect, + useImperativeHandle, + useMemo, + useRef, + useState, +} from 'preact/hooks'; +import { useHotkeys } from 'react-hotkeys-hook'; +import { useSearchParams } from 'react-router-dom'; +import { useThrottledCallback } from 'use-debounce'; + +import yearInPostsUrl from '../assets/features/year-in-posts.png'; + +import Icon from '../components/icon'; +import Link from '../components/link'; +import Loader from '../components/loader'; +import MenuConfirm from '../components/menu-confirm'; +import Menu2 from '../components/menu2'; +import NavMenu from '../components/nav-menu'; +import Status from '../components/status'; +import { api } from '../utils/api'; +import DateTimeFormat from '../utils/date-time-format'; +import db from '../utils/db'; +import getHTMLText from '../utils/getHTMLText'; +import niceDateTime from '../utils/nice-date-time'; +import prettyBytes from '../utils/pretty-bytes'; +import { supportsNativeQuote } from '../utils/quote-utils'; +import showToast from '../utils/show-toast'; +import store from '../utils/store'; +import { getCurrentAccountNS } from '../utils/store-utils'; +import useTitle from '../utils/useTitle'; +import { + fetchYearPosts, + loadAvailableYears, + removeYear, +} from '../utils/year-in-posts'; + +const MIN_YEAR = 2005; // https://en.wikipedia.org/wiki/Microblogging#Origin + +function getDefaultYear() { + const now = new Date(); + const currentYear = now.getFullYear(); + const currentMonth = now.getMonth(); + const currentDay = now.getDate(); + + // Buffer 30 days before default showing current year + if (currentMonth === 0 && currentDay <= 30) { + return currentYear - 1; + } + + return currentYear; +} + +function formatTimezoneOffset(offset) { + // offset is in minutes, negative for east of UTC + const sign = offset <= 0 ? '+' : '-'; + const absOffset = Math.abs(offset); + const hours = Math.floor(absOffset / 60); + const minutes = absOffset % 60; + return `UTC${sign}${hours}${minutes > 0 ? `:${String(minutes).padStart(2, '0')}` : ''}`; +} + +function getCurrentTimezoneOffset() { + return new Date().getTimezoneOffset(); +} + +const FILTER_KEYS = { + all: 'All', + original: 'Original', + replies: 'Replies', + quotes: 'Quotes', + boosts: 'Boosts', + media: 'Media', +}; + +const SORT_OPTIONS = [ + { key: 'relevance', condition: 'searchQuery' }, + { key: 'createdAt' }, + { key: 'repliesCount' }, + { key: 'favouritesCount' }, + { key: 'reblogsCount' }, +]; + +function getMonthName(month, locale, format = 'short') { + const date = new Date(2000, month, 1); + return DateTimeFormat(locale, { month: format }).format(date); +} + +function getYear(year) { + year = parseInt(year, 10); + return year >= MIN_YEAR && year <= new Date().getFullYear() ? year : null; +} + +function getMonth(month) { + month = parseInt(month, 10); + return month >= 0 && month <= 11 ? month : null; +} + +const SEARCH_RESULT_PAGE_SIZE = 30; + +function YearInPosts() { + const { i18n } = useLingui(); + const [searchParams, setSearchParams] = useSearchParams(); + const yearParam = searchParams.get('year'); + const monthParam = searchParams.get('month'); + const [postType, setPostType] = useState('all'); + const [searchQuery, setSearchQuery] = useState(''); + const year = getYear(yearParam); + const month = getMonth(monthParam); + + useTitle( + searchQuery + ? `Year in Posts ${year} - Search: ${searchQuery}` + : year + ? month !== null + ? `Year in Posts ${year} - ${getMonthName(month, i18n.locale)}` + : `Year in Posts ${year}` + : 'Year in Posts', + '/yip', + ); + + const { instance } = api(); + const [uiState, setUIState] = useState('default'); + const [posts, setPosts] = useState([]); + const [availableYears, setAvailableYears] = useState([]); + const [searchEnabled, setSearchEnabled] = useState(true); + const [showSearchField, setShowSearchField] = useState(!!searchQuery); + const [searchLimit, setSearchLimit] = useState(SEARCH_RESULT_PAGE_SIZE); + const [sortBy, setSortBy] = useState(searchQuery ? 'relevance' : 'createdAt'); + const [sortOrder, setSortOrder] = useState('asc'); + const searchFieldRef = useRef(null); + const scrollableRef = useRef(null); + const NS = useMemo(() => getCurrentAccountNS(), []); + + // Intercept slash key to focus search field on this page + useHotkeys( + ['Slash', '/'], + (e) => { + if (!showSearchField) { + setShowSearchField(true); + setTimeout(() => { + searchFieldRef.current?.focus(); + }, 100); + } else { + // If search field is already shown, just focus it + searchFieldRef.current?.focus(); + } + }, + { + useKey: true, + preventDefault: true, + ignoreEventWhen: (e) => { + const hasModal = !!document.querySelector('#modal-container > *'); + const isInput = ['INPUT', 'TEXTAREA'].includes(e.target.tagName); + return ( + hasModal || + isInput || + e.metaKey || + e.ctrlKey || + e.altKey || + e.shiftKey + ); + }, + }, + ); + + const totalPosts = posts.length; + + useEffect(() => { + if (!searchQuery) { + // Only hide search field if it's not focused + const isSearchFieldFocused = searchFieldRef.current?.isFocused(); + if (!isSearchFieldFocused) { + setShowSearchField(false); + } + } + }, [searchQuery, monthParam, postType, sortBy, sortOrder]); + + function loadYears() { + const years = loadAvailableYears(); + setAvailableYears(years); + } + + useEffect(() => { + if (year) return; + loadYears(); + }, [year]); + + const handleGenerate = async (e) => { + e.preventDefault(); + const generateYear = getYear(e.target.elements.year.value); + if (generateYear) { + try { + const dataId = `${NS}-${generateYear}`; + const existingData = await db.yearInPosts.get(dataId); + + if (existingData && existingData.year === generateYear) { + // Year already generated, go straight to year view + setSearchParams({ year: generateYear }); + } else { + // Year not generated, show generating UI and fetch data + setUIState('generating'); + await fetchYearPosts(generateYear); + setSearchParams({ year: generateYear }); + } + } catch (error) { + setUIState('error'); + console.error('Failed to generate year posts:', error); + showToast('Unable to generate year posts. Please try again.'); + } finally { + if (uiState === 'generating') { + setUIState('default'); + } + } + } else { + showToast('Invalid year.'); + } + }; + + async function handleRegenerate(year) { + try { + setUIState('generating'); + await fetchYearPosts(year); + setSearchParams({ year }); + } catch (e) { + setUIState('error'); + console.error('Failed to regenerate year posts:', error); + showToast('Unable to regenerate year posts. Please try again.'); + } finally { + if (uiState === 'generating') { + setUIState('default'); + } + } + } + + async function handleRemoveYear(yearToRemove) { + if (!confirm(`Remove year ${yearToRemove} posts?`)) return; + try { + await removeYear(yearToRemove); + setAvailableYears((years) => + years.filter((y) => y.year !== yearToRemove), + ); + } catch (e) { + console.error(e); + alert('Failed to remove year data'); + } + } + + const monthHeatmaps = useMemo(() => { + const heatmaps = {}; + posts.forEach((post) => { + const date = new Date(post.createdAt); + const month = date.getMonth(); + const day = date.getDate(); + if (!heatmaps[month]) { + heatmaps[month] = {}; + } + if (!heatmaps[month][day]) { + heatmaps[month][day] = { + total: 0, + original: 0, + reply: 0, + quote: 0, + boost: 0, + }; + } + + // Categorize post type + const dayData = heatmaps[month][day]; + dayData.total++; + + if (post.reblog) { + dayData.boost++; + } else if ( + supportsNativeQuote() && + (post.quote?.id || post.quote?.quotedStatus?.id) + ) { + dayData.quote++; + } else if (post.inReplyToId) { + dayData.reply++; + } else { + dayData.original++; + } + }); + + const result = {}; + Object.keys(heatmaps).forEach((month) => { + const days = heatmaps[month]; + const maxCount = Math.max(...Object.values(days).map((d) => d.total)); + + const firstDayOfMonth = new Date(year, parseInt(month), 1); + const firstDayOfWeek = firstDayOfMonth.getDay(); + + const calendar = []; + + for (let i = 0; i < firstDayOfWeek; i++) { + calendar.push({ + day: null, + count: 0, + ratio: 0, + original: 0, + reply: 0, + quote: 0, + boost: 0, + }); + } + + for (let day = 1; day <= 31; day++) { + const dayData = days[day]; + const count = dayData?.total || 0; + const ratio = count && maxCount > 0 ? count / maxCount : 0; + calendar.push({ + day, + count, + ratio, + original: dayData?.original || 0, + reply: dayData?.reply || 0, + quote: dayData?.quote || 0, + boost: dayData?.boost || 0, + }); + } + + result[month] = calendar; + }); + + return result; + }, [posts, year]); + + const monthMediaGrids = useMemo(() => { + if (postType !== 'media') return {}; + const grids = {}; + posts.forEach((post) => { + const date = new Date(post.createdAt); + const m = date.getMonth(); + const d = date.getDate(); + if (!grids[m]) grids[m] = {}; + if (!grids[m][d]) grids[m][d] = []; + grids[m][d].push(post); + }); + + Object.keys(grids).forEach((month) => { + const days = grids[month]; + const firstDayOfMonth = new Date(year, parseInt(month), 1); + const firstDayOfWeek = firstDayOfMonth.getDay(); + + const calendar = []; + + for (let i = 0; i < firstDayOfWeek; i++) { + calendar.push(null); + } + + for (let day = 1; day <= 31; day++) { + const dayPosts = days[day] || []; + let bestPost = null; + let hasMedia = false; + if (dayPosts.length > 0) { + const postsWithMedia = dayPosts.filter((post) => { + const actualPost = post.reblog || post; + return ( + !post.reblog && + actualPost.mediaAttachments?.some( + (media) => + media.previewUrl || + media.url || + media.previewRemoteUrl || + media.remoteUrl, + ) + ); + }); + + if (postsWithMedia.length > 0) { + bestPost = postsWithMedia.reduce((topPost, post) => { + const actualPost = post; + const totalCount = + (actualPost.favouritesCount || 0) + + (actualPost.reblogsCount || 0) + + (actualPost.repliesCount || 0) + + (actualPost.quotesCount || 0); + + const topTotalCount = topPost + ? (topPost.favouritesCount || 0) + + (topPost.reblogsCount || 0) + + (topPost.repliesCount || 0) + + (topPost.quotesCount || 0) + : -1; + + if (totalCount > topTotalCount) return post; + if (totalCount === topTotalCount) return topPost || post; + return topPost; + }, null); + hasMedia = true; + } + } + calendar.push(bestPost ? { post: bestPost, hasMedia } : { hasMedia }); + } + + grids[month] = calendar; + }); + + return grids; + }, [posts, year, postType]); + + const monthsWithPosts = useMemo(() => { + const monthCounts = {}; + const monthTypes = {}; + posts.forEach((post) => { + const month = new Date(post.createdAt).getMonth(); + monthCounts[month] = (monthCounts[month] || 0) + 1; + + if (!monthTypes[month]) { + monthTypes[month] = { + original: 0, + reply: 0, + quote: 0, + boost: 0, + }; + } + + if (post.reblog) { + monthTypes[month].boost++; + } else if ( + supportsNativeQuote() && + (post.quote?.id || post.quote?.quotedStatus?.id) + ) { + monthTypes[month].quote++; + } else if (post.inReplyToId) { + monthTypes[month].reply++; + } else { + monthTypes[month].original++; + } + }); + return Object.entries(monthCounts) + .map(([month, count]) => { + const types = monthTypes[month]; + return { + month: parseInt(month), + count, + heatmap: monthHeatmaps[month] || [], + mediaGrid: monthMediaGrids[month] || [], + original: types.original, + reply: types.reply, + quote: types.quote, + boost: types.boost, + }; + }) + .sort((a, b) => a.month - b.month); + }, [posts, monthHeatmaps, monthMediaGrids]); + + const searchIndexRef = useRef(null); + useEffect(() => { + if (totalPosts > 0) { + const index = new FlexSearch.Document({ + preset: 'match', + document: { + id: 'id', + index: ['content', 'spoilerText', 'poll', 'media', 'card'], + }, + }); + posts.forEach((p) => { + const status = p.reblog || p; + const pollText = status.poll?.options?.map((o) => o.title).join(' '); + const mediaText = status.mediaAttachments + ?.map((m) => m.description) + .join(' '); + const cardText = status.card + ? `${status.card.title} ${status.card.description} ${status.card.url}` + : ''; + index.add({ + id: p.id, + content: getHTMLText(status.content), + spoilerText: status.spoilerText, + poll: pollText, + media: mediaText, + card: cardText, + }); + }); + searchIndexRef.current = index; + } + }, [posts]); + + const searchedPosts = useMemo(() => { + if (!searchQuery) return posts; + if (!searchIndexRef.current) return []; + console.time(`search: '${searchQuery}'`); + const allResults = searchIndexRef.current.search(searchQuery, { + limit: totalPosts, + }); + console.timeEnd(`search: '${searchQuery}'`); + const orderedIds = allResults.flatMap((r) => r.result); + const uniqueOrderedIds = [...new Set(orderedIds)]; + + const postsMap = new Map(posts.map((p) => [p.id, p])); + const postResults = uniqueOrderedIds + .map((id) => postsMap.get(id)) + .filter(Boolean); + return postResults; + }, [posts, searchQuery]); + + useEffect(() => { + setSearchLimit(SEARCH_RESULT_PAGE_SIZE); + if (searchQuery) { + if (!['relevance', 'createdAt'].includes(sortBy)) { + setSortBy('relevance'); + } + } else { + if (sortBy === 'relevance') { + setSortBy('createdAt'); + } + } + }, [searchQuery, sortBy]); + + const [filterCounts, monthPosts] = useMemo(() => { + const monthPosts = searchedPosts.filter((post) => { + if (searchQuery) return true; + const postMonth = new Date(post.createdAt).getMonth(); + return month !== null && postMonth === month; + }); + + const counts = { + all: monthPosts.length, + original: 0, + replies: 0, + quotes: 0, + boosts: 0, + media: 0, + }; + + monthPosts.forEach((post) => { + if (post.reblog) { + counts.boosts++; + } else if ( + supportsNativeQuote() && + (post.quote?.id || post.quote?.quotedStatus?.id) + ) { + counts.quotes++; + } else if (post.inReplyToId) { + counts.replies++; + } else { + counts.original++; + } + + const status = post.reblog || post; + if (!post.reblog && status.mediaAttachments?.length > 0) { + counts.media++; + } + }); + + return [counts, monthPosts]; + }, [searchedPosts, month, searchQuery]); + + const [filteredPosts, hasMore] = useMemo(() => { + const filtered = monthPosts.filter((post) => { + if (postType === 'boosts') { + return !!post.reblog; + } else if (postType === 'media') { + const status = post.reblog || post; + return !post.reblog && status.mediaAttachments?.length > 0; + } else if (postType === 'quotes') { + return ( + supportsNativeQuote() && + (post.quote?.id || post.quote?.quotedStatus?.id) + ); + } else if (postType === 'replies') { + return !!post.inReplyToId; + } else if (postType === 'original') { + return ( + !post.reblog && + !( + supportsNativeQuote() && + (post.quote?.id || post.quote?.quotedStatus?.id) + ) && + !post.inReplyToId + ); + } + + return true; + }); + + // Sort the filtered posts + let sorted = filtered; + if (sortBy !== 'relevance') { + sorted = [...filtered].sort((a, b) => { + const postA = a.reblog || a; + const postB = b.reblog || b; + let valueA, valueB; + + if (sortBy === 'createdAt') { + valueA = new Date(a.createdAt); + valueB = new Date(b.createdAt); + } else { + valueA = postA[sortBy] || 0; + valueB = postB[sortBy] || 0; + } + + if (sortOrder === 'asc') { + return valueA > valueB ? 1 : -1; + } else { + return valueB > valueA ? 1 : -1; + } + }); + } + + if (searchQuery) { + return [sorted.slice(0, searchLimit), sorted.length > searchLimit]; + } + return [sorted, false]; + }, [monthPosts, postType, searchQuery, searchLimit, sortBy, sortOrder]); + + // Auto-switch to 'all' when filtered results are empty but there are results in other categories + useEffect(() => { + if ( + searchQuery && + postType !== 'all' && + filteredPosts.length === 0 && + filterCounts.all > 0 + ) { + setPostType('all'); + } + }, [searchQuery, postType, filteredPosts.length, filterCounts.all]); + + const currentMonthIndex = monthsWithPosts.findIndex((m) => m.month === month); + const prevMonth = + currentMonthIndex > 0 ? monthsWithPosts[currentMonthIndex - 1] : null; + const nextMonth = + currentMonthIndex < monthsWithPosts.length - 1 + ? monthsWithPosts[currentMonthIndex + 1] + : null; + + useEffect(() => { + if (!year) { + setUIState('default'); + setPosts([]); + return; + } + + (async () => { + setUIState('loading'); + try { + const dataId = `${NS}-${year}`; + console.time(`fetchYearPosts-${year}`); + const data = await db.yearInPosts.get(dataId); + console.timeEnd(`fetchYearPosts-${year}`); + if (data && data.year === year) { + data.posts.sort( + (a, b) => new Date(a.createdAt) - new Date(b.createdAt), + ); + setPosts(data.posts); + setUIState('results'); + } else { + setUIState('no-data'); + } + } catch (e) { + console.error(e); + setUIState('error'); + } + })(); + }, [year]); + + useEffect(() => { + if (month !== null && uiState === 'results') { + const monthFilter = document.querySelector( + `.calendar-bar .month-filter[data-month="${month}"]`, + ); + monthFilter?.focus(); + monthFilter?.scrollIntoView({ + behavior: 'smooth', + block: 'nearest', + inline: 'nearest', + }); + } + }, [month, uiState === 'results']); + + return ( +
+
+ );
+}
+
+const IntersectionPostItem = ({ root, post, instance }) => {
+ const ref = useRef();
+ const [show, setShow] = useState(false);
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ (entries) => {
+ const entry = entries[0];
+ if (entry.isIntersecting) {
+ queueMicrotask(() => setShow(true));
+ observer.unobserve(ref.current);
+ }
+ },
+ {
+ root,
+ rootMargin: `${Math.max(320, screen.height * 0.75)}px`,
+ },
+ );
+ if (ref.current) observer.observe(ref.current);
+ return () => {
+ if (ref.current) observer.unobserve(ref.current);
+ };
+ }, []);
+
+ const statusId = post.reblog?.id || post.id;
+
+ return (
+
+ {
+ if (!e.target.closest('a, button')) {
+ scrollableRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
+ }
+ }}
+ >
+
+
+
+ {!year && (
+
+
+
+
+ {
+ setSearchQuery(val);
+ setSearchLimit(SEARCH_RESULT_PAGE_SIZE);
+ }}
+ onEscape={() => {
+ if (!searchQuery.trim()) {
+ setShowSearchField(false);
+ setSearchQuery('');
+ }
+ }}
+ />
+ ) : (
+
+ {year}
+ {uiState === 'results' && (
+
+ )}
+
+ )}
+
+
+
+ {year && (
+ <>
+ {showSearchField ? (
+
+ {year}
+ {uiState === 'results' && (
+
+ {/*
+ )}
+
+ )}
+
+ {year && (
+ <>
+
+
+
+
+ )}
+
+
+ {uiState !== 'generating' ? (
+ <>
+
+ )}
+
+ {year && uiState === 'loading' && (
+ + Year in Posts beta +
+A year-at-a-glance view of your posts.
+
+ 
+
+
+
+ What is this?
++ Year in Posts is a simple, searchable archive of your + posts, offering a year-at-a-glance view with calendar + visualizations and straight-forward interface to sort and + filter through posts. +
++ +
+
+
+
+ {!searchEnabled && (
+ + This downloads your posts (excluding media files) from + the server and saves them locally. It may take a longer + time and require more disk space. +
++ Once archived, updated or deleted posts are not + reflected in the archive until regenerated. +
+ ++ + ⚠️ Your server doesn't support advanced search, this will + make more requests to the server and take much longer + time. + +
+ )} + + ) : ( +
+
+ )}
+
+ {availableYears.length > 0 && uiState !== 'generating' && (
+ Generating Year in Posts…
+This might take a while.
+
+
+ )}
+ Archived Year in Posts:
+-
+ {availableYears.map(
+ ({ year, count, fetchedAt, size, timezoneOffset }) => {
+ const currentOffset = getCurrentTimezoneOffset();
+ const tzMismatch =
+ timezoneOffset !== undefined &&
+ timezoneOffset !== currentOffset;
+
+ return (
+
-
+
+
{year} + {' '} + + {/* */} + {count} posts{' '} + {/* TODO: Use Plural above when finalized */} + {' '} + {size && ( + + ~{prettyBytes(size)} + + )}{' '} + Regenerate {year} posts? + } + onClick={() => { + handleRegenerate(year); + }} + > + + + +
+ );
+ },
+ )}
+
+
+ )}
+
+ {year && uiState === 'results' && (
+ <>
+ {!searchQuery && monthsWithPosts.length > 0 && (
+
+ {Object.entries(FILTER_KEYS).map(
+ ([key, label]) =>
+ filterCounts[key] > 0 && (
+
+ ),
+ )}
+
+ )}
+
+ {(month !== null || searchQuery) && filteredPosts.length > 1 && (
+
+ Sort{' '}
+
+
+ )}
+
+ {(month !== null || searchQuery) && (
+ <>
+ -
+ {filteredPosts.length === 0 ? (
+
-
+
+ + {niceDateTime(post.createdAt, { + hideTime: true, + formatOpts: { + year: undefined, + }, + })} + {' '} + + {niceDateTime(post.createdAt, { + forceOpts: { + weekday: 'long', + }, + })} + +
+
+ )}
+ -
+ {totalPosts > 20 ? (
+
+ ) : ( + + + + )} +
+
+ );
+ })
+ )}
+
…
+ ) : ( + filteredPosts.map((post, index) => { + const currentDate = new Date(post.createdAt); + const previousPost = filteredPosts[index - 1]; + const previousDate = previousPost + ? new Date(previousPost.createdAt) + : null; + const showDateHeader = + sortBy === 'createdAt' && + (!previousDate || + currentDate.toDateString() !== + previousDate.toDateString()); + + return ( + <> + {showDateHeader && ( +
+
+
+ )}
+
+ {!searchQuery && (
+
+ {prevMonth ? (
+ {
+ scrollableRef.current?.scrollTo({
+ top: 0,
+ behavior: 'instant',
+ });
+ }}
+ >
+
+ )}
+
+ )}
+
+ )}
+
+ {monthsWithPosts.map(
+ ({
+ month: m,
+ count,
+ heatmap,
+ mediaGrid,
+ original,
+ reply,
+ quote,
+ boost,
+ }) => {
+ const originalRatio = count > 0 ? original / count : 0;
+ const replyRatio = count > 0 ? reply / count : 0;
+ const quoteRatio = count > 0 ? quote / count : 0;
+ const boostRatio = count > 0 ? boost / count : 0;
+
+ return (
+
+
+ );
+}
+
+const SearchField = forwardRef(
+ ({ searchQuery, onSearch, placeholder, onEscape }, ref) => {
+ const searchInputRef = useRef(null);
+
+ useImperativeHandle(ref, () => ({
+ focus: () => {
+ searchInputRef.current?.focus();
+ },
+ setValue: (val) => {
+ searchInputRef.current.value = val;
+ },
+ isFocused: () => {
+ return document.activeElement === searchInputRef.current;
+ },
+ }));
+
+ const throttledSearch = useThrottledCallback(onSearch, 150);
+
+ return (
+
+ );
+ },
+);
+
+export default YearInPosts;
diff --git a/src/utils/api.js b/src/utils/api.js
index 136e6aa460..7176d3346f 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -198,12 +198,12 @@ export async function initAccount(client, instance, accessToken, vapidKey) {
export const getPreferences = mem(
() => store.account.get('preferences') || {},
{
- maxAge: 60 * 1000, // 1 minute
+ expires: 60 * 1000, // 1 minute
},
);
export function setPreferences(preferences) {
- getPreferences.clear(); // clear memo cache
+ getPreferences.cache.clear(); // clear memo cache
store.account.set('preferences', preferences);
}
diff --git a/src/utils/auth.js b/src/utils/auth.js
index b103eff5b1..28e00cdd68 100644
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@@ -28,7 +28,7 @@ export async function registerApplication({ instanceURL }) {
client_name: CLIENT_NAME,
redirect_uris: REDIRECT_URI,
scopes: SCOPES,
- website: WEBSITE,
+ website: WEBSITE || REDIRECT_URI,
});
const registrationResponse = await fetch(
`https://${instanceURL}/api/v1/apps`,
@@ -41,7 +41,7 @@ export async function registerApplication({ instanceURL }) {
},
);
const registrationJSON = await registrationResponse.json();
- console.log({ registrationJSON });
+ if (DEV) console.log({ registrationJSON });
return registrationJSON;
}
@@ -112,7 +112,7 @@ export async function getAccessToken({
body: params.toString(),
});
const tokenJSON = await tokenResponse.json();
- console.log({ tokenJSON });
+ if (DEV) console.log({ tokenJSON });
return tokenJSON;
}
@@ -140,7 +140,7 @@ export async function revokeAccessToken({
return revokeResponse.ok;
} catch (error) {
- console.erro('Error revoking token', error);
+ console.error('Error revoking token', error);
return false;
}
}
diff --git a/src/utils/custom-emojis.js b/src/utils/custom-emojis.js
index 51b0c66d07..e8d84de004 100644
--- a/src/utils/custom-emojis.js
+++ b/src/utils/custom-emojis.js
@@ -15,8 +15,9 @@ async function _getCustomEmojis(instance, masto) {
const getCustomEmojis = pmem(_getCustomEmojis, {
// Limit by time to reduce memory usage
// Cached by instance
- matchesArg: (cacheKeyArg, keyArg) => cacheKeyArg.instance === keyArg.instance,
- maxAge: 30 * 60 * 1000, // 30 minutes
+ isKeyItemEqual: (cacheKeyArg, keyArg) =>
+ cacheKeyArg.instance === keyArg.instance,
+ expires: 30 * 60 * 1000, // 30 minutes
});
export { getCustomEmojis, _getCustomEmojis };
diff --git a/src/utils/db.js b/src/utils/db.js
index 589fa01650..c3bfddbc37 100644
--- a/src/utils/db.js
+++ b/src/utils/db.js
@@ -25,4 +25,5 @@ function initDB(dbName, storeName) {
export default {
drafts: initDB('drafts-db', 'drafts-store'),
catchup: initDB('catchup-db', 'catchup-store'),
+ yearInPosts: initDB('year-in-posts-db', 'year-in-posts-store'),
};
diff --git a/src/utils/group-notifications.js b/src/utils/group-notifications.js
index 068a5a9400..d946fd86a2 100644
--- a/src/utils/group-notifications.js
+++ b/src/utils/group-notifications.js
@@ -11,7 +11,7 @@ const notificationTypeKeys = {
update: ['status'],
};
-const GROUP_TYPES = ['favourite', 'reblog', 'follow'];
+const GROUP_TYPES = ['favourite', 'reblog', 'follow', 'mention', 'quote'];
const groupable = (type) => GROUP_TYPES.includes(type);
export function fixNotifications(notifications) {
@@ -102,6 +102,9 @@ export function groupNotifications2(groupNotifications) {
) {
virtualType = 'favourite+reblog';
}
+ if (type === 'mention' || type === 'quote') {
+ virtualType = 'mention+quote';
+ }
// const key = `${status?.id}-${virtualType}-${date}-${sameCount ? 1 : 0}`;
const key = `${status?.id}-${virtualType}-${date}`;
const mappedNotification = notificationsMap[key];
diff --git a/src/utils/is-search-enabled.js b/src/utils/is-search-enabled.js
new file mode 100644
index 0000000000..a0c2bfff5d
--- /dev/null
+++ b/src/utils/is-search-enabled.js
@@ -0,0 +1,14 @@
+import { api } from './api';
+import pmem from './pmem';
+
+async function _isSearchEnabled(instance) {
+ const { masto } = api({ instance });
+ const results = await masto.v2.search.list({
+ q: 'from:me',
+ type: 'statuses',
+ limit: 1,
+ });
+ return !!results?.statuses?.length;
+}
+
+export default pmem(_isSearchEnabled);
diff --git a/src/utils/lists.js b/src/utils/lists.js
index 1edc000cf7..ff2c7d7ea4 100644
--- a/src/utils/lists.js
+++ b/src/utils/lists.js
@@ -24,7 +24,7 @@ export const fetchLists = pmem(
return lists;
},
{
- maxAge: FETCH_MAX_AGE,
+ expires: FETCH_MAX_AGE,
},
);
@@ -49,7 +49,7 @@ export const fetchList = pmem(
return masto.v1.lists.$select(id).fetch();
},
{
- maxAge: FETCH_MAX_AGE,
+ expires: FETCH_MAX_AGE,
},
);
diff --git a/src/utils/mem.js b/src/utils/mem.js
index 543d06d3d9..1415f0ac17 100644
--- a/src/utils/mem.js
+++ b/src/utils/mem.js
@@ -1,14 +1,14 @@
-import moize from 'moize';
+import { memoize } from 'micro-memoize';
// Only assign to window if in browser environment
if (typeof window !== 'undefined') {
- window._moize = moize;
+ window._memoize = memoize;
}
export default function mem(fn, opts = {}) {
- return moize(fn, {
+ return memoize(fn, {
...opts,
maxSize: 30,
- isDeepEqual: true,
+ isKeyItemEqual: 'deep',
});
}
diff --git a/src/utils/pmem.js b/src/utils/pmem.js
index e8041c3cb5..debe0016d5 100644
--- a/src/utils/pmem.js
+++ b/src/utils/pmem.js
@@ -1,5 +1,5 @@
import mem from './mem';
export default function pmem(fn, opts = {}) {
- return mem(fn, { isPromise: true, ...opts });
+ return mem(fn, { async: true, ...opts });
}
diff --git a/src/utils/states.js b/src/utils/states.js
index 2b83973b33..6cf0bbf723 100644
--- a/src/utils/states.js
+++ b/src/utils/states.js
@@ -59,6 +59,7 @@ const states = proxy({
showQrCodeModal: false,
showQrScannerModal: false,
showImportExportAccounts: false,
+ showSearchCommand: false,
// Shortcuts
shortcuts: [],
// Settings
@@ -236,7 +237,7 @@ export function saveStatus(status, instance, opts) {
if (theQuote?.state) {
const { quotedStatus, state } = theQuote;
if (quotedStatus?.id) {
- const { id } = quotedStatus;
+ const { id, account } = quotedStatus;
const selfURL = `/${instance}/s/${id}`;
const sKey = statusKey(id, instance);
states.statuses[sKey] = quotedStatus;
@@ -246,6 +247,7 @@ export function saveStatus(status, instance, opts) {
instance,
url: selfURL,
state,
+ account,
native: true,
},
];
diff --git a/src/utils/store-utils.js b/src/utils/store-utils.js
index 9d669f1af5..bc47f5e291 100644
--- a/src/utils/store-utils.js
+++ b/src/utils/store-utils.js
@@ -59,7 +59,7 @@ export function getCurrentAccountID() {
// Memoized version of getCurrentAccountID for performance
export const getCurrentAccID = mem(getCurrentAccountID, {
- maxAge: 60 * 1000, // 1 minute
+ expires: 60 * 1000, // 1 minute
});
export function setCurrentAccountID(id) {
@@ -90,7 +90,7 @@ export function getCurrentAccount() {
// Memoized version of getCurrentAccount for performance
export const getCurrentAcc = mem(getCurrentAccount, {
- maxAge: 60 * 1000, // 1 minute
+ expires: 60 * 1000, // 1 minute
});
export function getCurrentAccountNS() {
diff --git a/src/utils/year-in-posts.js b/src/utils/year-in-posts.js
new file mode 100644
index 0000000000..0b90828139
--- /dev/null
+++ b/src/utils/year-in-posts.js
@@ -0,0 +1,237 @@
+import { api } from './api';
+import db from './db';
+import isSearchEnabled from './is-search-enabled';
+import store from './store';
+import { getCurrentAccount, getCurrentAccountNS } from './store-utils';
+
+const YEAR_IN_POSTS_LIST_KEY = 'year-in-posts-list';
+
+export function loadAvailableYears() {
+ try {
+ const list = store.account.get(YEAR_IN_POSTS_LIST_KEY) || {};
+ const sortedYears = Object.entries(list)
+ .map(([year, data]) => ({ year: parseInt(year), ...data }))
+ .sort((a, b) => b.year - a.year);
+ return sortedYears;
+ } catch (e) {
+ console.error(e);
+ return [];
+ }
+}
+
+export async function removeYear(yearToRemove) {
+ try {
+ const NS = getCurrentAccountNS();
+ const dataId = `${NS}-${yearToRemove}`;
+ await db.yearInPosts.del(dataId);
+
+ const list = store.account.get(YEAR_IN_POSTS_LIST_KEY) || {};
+ delete list[yearToRemove];
+ store.account.set(YEAR_IN_POSTS_LIST_KEY, list);
+
+ return true;
+ } catch (e) {
+ console.error(e);
+ throw e;
+ }
+}
+
+function isPostInYear(createdAt, year) {
+ const postDate = new Date(createdAt);
+ const startOfYear = new Date(year, 0, 1);
+ const endOfYear = new Date(year, 11, 31, 23, 59, 59, 999);
+ return postDate >= startOfYear && postDate <= endOfYear;
+}
+
+export async function fetchYearPosts(year) {
+ const { masto, instance } = api();
+ const allResults = [];
+ let gapsFilled = false;
+
+ const account = getCurrentAccount();
+ if (!account) {
+ throw new Error('No current account');
+ }
+ const accountId = account.info.id;
+ const accountAcct = account.info.acct;
+
+ const startOfYear = new Date(year, 0, 1);
+ const endOfYear = new Date(year, 11, 31, 23, 59, 59, 999);
+
+ const searchEnabled = await isSearchEnabled(instance);
+
+ // Use search strategies if available
+ let maxId = null;
+ if (searchEnabled) {
+ try {
+ const latestPostIterator = masto.v1.accounts
+ .$select(accountId)
+ .statuses.list({
+ limit: 1,
+ exclude_replies: false,
+ exclude_reblogs: false,
+ })
+ .values();
+ const latestResult = await latestPostIterator.next();
+
+ if (latestResult?.value?.length) {
+ const latestPost = latestResult.value[0];
+ if (!isPostInYear(latestPost.createdAt, year)) {
+ // Use "before" search to find last post before year ends
+ const beforeStr = `${year + 1}-01-02`;
+ try {
+ const beforeResults = await masto.v2.search.list({
+ q: `from:${accountAcct} before:${beforeStr}`,
+ type: 'statuses',
+ limit: 1,
+ });
+
+ if (beforeResults?.statuses?.length) {
+ maxId = beforeResults.statuses[0].id;
+ }
+ } catch (e) {
+ console.error('Before search failed', e);
+ }
+ }
+ }
+ } catch (e) {
+ console.error('Failed to fetch latest post', e);
+ }
+ }
+
+ const statusIterator = masto.v1.accounts
+ .$select(accountId)
+ .statuses.list({
+ limit: 40,
+ exclude_replies: false,
+ exclude_reblogs: false,
+ max_id: maxId || undefined,
+ })
+ .values();
+
+ fetchLoop: while (true) {
+ try {
+ const result = await statusIterator.next();
+ const { value, done } = result;
+
+ if (done || !value?.length) break fetchLoop;
+
+ let foundInYear = false;
+ for (const status of value) {
+ const createdAt = new Date(status.createdAt);
+ if (createdAt > endOfYear) {
+ continue;
+ }
+ if (createdAt >= startOfYear) {
+ allResults.push(status);
+ foundInYear = true;
+ }
+ }
+
+ // Only break if we didn't find any posts in the year in this batch
+ if (!foundInYear) break fetchLoop;
+
+ await new Promise((resolve) => setTimeout(resolve, 500));
+ } catch (e) {
+ console.error(e);
+ break fetchLoop;
+ }
+ }
+
+ allResults.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
+
+ // Forward verification to check for gaps
+ if (allResults.length > 0) {
+ try {
+ const earliestFetched = allResults[0];
+ const earliestId = earliestFetched.id;
+
+ // Loop to fetch all posts forward from earliest within the year
+ const gapCheckIterator = masto.v1.accounts
+ .$select(accountId)
+ .statuses.list({
+ limit: 40,
+ min_id: earliestId,
+ exclude_replies: false,
+ exclude_reblogs: false,
+ })
+ .values();
+
+ gapFillLoop: while (true) {
+ try {
+ const result = await gapCheckIterator.next();
+ const { value, done } = result;
+
+ if (done || !value?.length) break gapFillLoop;
+
+ let foundInYear = false;
+ for (const status of value) {
+ const createdAt = new Date(status.createdAt);
+ if (createdAt < startOfYear) {
+ continue;
+ }
+ if (createdAt <= endOfYear) {
+ if (!allResults.find((s) => s.id === status.id)) {
+ allResults.push(status);
+ gapsFilled = true;
+ }
+ foundInYear = true;
+ }
+ }
+
+ // Only break if we didn't find any posts in the year in this batch
+ if (!foundInYear) break gapFillLoop;
+
+ await new Promise((resolve) => setTimeout(resolve, 500));
+ } catch (e) {
+ console.error(e);
+ break gapFillLoop;
+ }
+ }
+
+ if (gapsFilled) {
+ allResults.sort(
+ (a, b) => new Date(a.createdAt) - new Date(b.createdAt),
+ );
+ }
+ } catch (e) {
+ console.error('Gap check failed', e);
+ }
+ }
+
+ let totalSize = 0;
+ try {
+ totalSize = new TextEncoder().encode(JSON.stringify(allResults)).length;
+ } catch (e) {
+ console.error('Error calculating total size:', e);
+ }
+
+ const NS = getCurrentAccountNS();
+ const dataId = `${NS}-${year}`;
+ const timezoneOffset = new Date().getTimezoneOffset();
+
+ await db.yearInPosts.set(dataId, {
+ id: dataId,
+ posts: allResults,
+ count: allResults.length,
+ year,
+ size: totalSize,
+ fetchedAt: Date.now(),
+ timezoneOffset,
+ });
+
+ const list = store.account.get(YEAR_IN_POSTS_LIST_KEY) || {};
+ list[year] = {
+ count: allResults.length,
+ size: totalSize,
+ fetchedAt: Date.now(),
+ timezoneOffset,
+ };
+ store.account.set(YEAR_IN_POSTS_LIST_KEY, list);
+
+ return {
+ posts: allResults,
+ searchEnabled,
+ gapsFilled,
+ };
+}
diff --git a/tests/locale-match.spec.js b/tests/locale-match.spec.js
index 60481d6062..da446f576a 100644
--- a/tests/locale-match.spec.js
+++ b/tests/locale-match.spec.js
@@ -2,11 +2,11 @@
import { test, expect } from '@playwright/test';
import { _localeMatch as localeMatch } from '../src/utils/locale-match.js';
-// https://github.com/formatjs/formatjs/blob/e11b9b57a5ed745584b169c13b0a1812ba9e6051/packages/intl-localematcher/tests/index.test.ts
+// https://github.com/formatjs/formatjs/blob/cacd3182a590b6f373ca726b011a026a241f4740/packages/intl-localematcher/tests/index.test.ts
test.describe('official formatjs test cases', () => {
test('zh-HK', () => {
expect(localeMatch(['zh-HK'], ['zh', 'zh-HANT', 'en'], 'en')).toBe(
- 'zh-HANT',
+ 'zh-Hant',
);
});
@@ -225,7 +225,7 @@ test.describe('official formatjs test cases', () => {
});
});
-// https://github.com/formatjs/formatjs/blob/e11b9b57a5ed745584b169c13b0a1812ba9e6051/packages/intl-localematcher/tests/BestFitMatcher.test.ts
+// https://github.com/formatjs/formatjs/blob/cacd3182a590b6f373ca726b011a026a241f4740/packages/intl-localematcher/tests/BestFitMatcher.test.ts
test.describe('BestFitMatcher test cases', () => {
test('BestFitMatcher basic', () => {
expect(localeMatch(['fr-XX', 'en'], ['fr', 'en'], 'en')).toBe('fr');
@@ -262,7 +262,7 @@ test.describe('BestFitMatcher test cases', () => {
});
test('bestFitMatcher testing zh-HK', () => {
- expect(localeMatch(['zh-HK'], ['zh-Hant', 'zh-MO'], 'en')).toBe('zh-MO');
+ expect(localeMatch(['zh-HK'], ['zh-Hant', 'zh-MO'], 'en')).toBe('zh-Hant');
});
test('bestFitMatcher testing en-CA', () => {
@@ -270,6 +270,6 @@ test.describe('BestFitMatcher test cases', () => {
});
test('bestFitMatcher testing es-KY Americas', () => {
- expect(localeMatch(['es-KY'], ['es', 'en', 'es-419'], 'en')).toBe('es-419');
+ expect(localeMatch(['es-KY'], ['es', 'en', 'es-419'], 'en')).toBe('es');
});
});
diff --git a/vite.config.js b/vite.config.js
index b56e40acbf..794fcc737e 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -123,22 +123,53 @@ export default defineConfig({
name: 'referrer',
content: REFERRER_POLICY || 'origin',
},
+ // Metacrap https://broken-links.com/2015/12/01/little-less-metacrap/
+ ...(WEBSITE
+ ? [
+ {
+ property: 'twitter:card',
+ content: 'summary_large_image',
+ },
+ {
+ property: 'og:url',
+ content: WEBSITE,
+ },
+ {
+ property: 'og:title',
+ content: CLIENT_NAME,
+ },
+ {
+ property: 'og:description',
+ content: 'Minimalistic opinionated Mastodon web client',
+ },
+ {
+ property: 'og:image',
+ content: `${WEBSITE}/og-image-2.jpg`,
+ },
+ ]
+ : []),
],
headScripts: ERROR_LOGGING ? [rollbarCode] : [],
- links: [
- ...ALL_LOCALES.map((lang) => ({
- rel: 'alternate',
- hreflang: lang,
- // *Fully-qualified* URLs
- href: `${WEBSITE}/?lang=${lang}`,
- })),
- // https://developers.google.com/search/docs/specialty/international/localized-versions#xdefault
- {
- rel: 'alternate',
- hreflang: 'x-default',
- href: `${WEBSITE}`,
- },
- ],
+ links: !!WEBSITE
+ ? [
+ {
+ rel: 'canonical',
+ href: WEBSITE,
+ },
+ ...ALL_LOCALES.map((lang) => ({
+ rel: 'alternate',
+ hreflang: lang,
+ // *Fully-qualified* URLs
+ href: `${WEBSITE}/?lang=${lang}`,
+ })),
+ // https://developers.google.com/search/docs/specialty/international/localized-versions#xdefault
+ {
+ rel: 'alternate',
+ hreflang: 'x-default',
+ href: `${WEBSITE}`,
+ },
+ ]
+ : [],
}),
generateFile([
{
@@ -176,6 +207,9 @@ export default defineConfig({
},
VitePWA({
manifest: {
+ id: './', // Cannot be empty string for Web Install API to work
+ start_url: './',
+ scope: './',
name: CLIENT_NAME,
short_name: CLIENT_NAME,
description: 'Minimalistic opinionated Mastodon web client',
{getMonthName(m, i18n.locale)}
+ {postType === 'media'
+ ? mediaGrid.length > 0 && (
+
+ {mediaGrid.map((item, i) => {
+ if (!item)
+ return ;
+ if (!item.hasMedia)
+ return ;
+ const status = item.post;
+ const media = status.mediaAttachments?.[0];
+ return (
+
+ 
{
+ const { src } = e.target;
+ if (
+ src === media.previewUrl ||
+ src === media.url
+ ) {
+ e.target.src =
+ media.previewRemoteUrl || media.remoteUrl;
+ } else {
+ e.target.remove();
+ }
+ }}
+ alt=""
+ />
+
+ );
+ })}
+
+ )
+ : heatmap.length > 0 && (
+
+ {heatmap.map((dayData, i) => {
+ const total = dayData.count || 0;
+ const originalRatio =
+ total > 0 ? dayData.original / total : 0;
+ const replyRatio =
+ total > 0 ? dayData.reply / total : 0;
+ const quoteRatio =
+ total > 0 ? dayData.quote / total : 0;
+ const boostRatio =
+ total > 0 ? dayData.boost / total : 0;
+
+ return (
+
+ );
+ })}
+
+ )}
+
+
+ );
+ },
+ )}
+