+42

src/app.css

reviewed

··· 2127 2127 pointer-events: none; 2128 2128 opacity: 0.5; 2129 2129 } 2130 2130 + 2131 2131 + .filter-field { 2132 2132 + flex-shrink: 0; 2133 2133 + padding: 8px 16px; 2134 2134 + border-radius: 999px; 2135 2135 + color: var(--text-color); 2136 2136 + background-color: var(--bg-color); 2137 2137 + border: 2px solid transparent; 2138 2138 + margin: 0; 2139 2139 + appearance: none; 2140 2140 + line-height: 1; 2141 2141 + font-size: 90%; 2142 2142 + 2143 2143 + &:placeholder-shown { 2144 2144 + color: var(--text-insignificant-color); 2145 2145 + } 2146 2146 + 2147 2147 + &:is(:hover, :focus-visible) { 2148 2148 + border-color: var(--link-light-color); 2149 2149 + } 2150 2150 + &:focus { 2151 2151 + outline-color: var(--link-light-color); 2152 2152 + } 2153 2153 + &.is-active { 2154 2154 + border-color: var(--link-color); 2155 2155 + box-shadow: inset 0 0 8px var(--link-faded-color); 2156 2156 + } 2157 2157 + 2158 2158 + :is(input, select) { 2159 2159 + background-color: transparent; 2160 2160 + border: 0; 2161 2161 + padding: 0; 2162 2162 + margin: 0; 2163 2163 + color: inherit; 2164 2164 + font-size: inherit; 2165 2165 + line-height: inherit; 2166 2166 + appearance: none; 2167 2167 + border-radius: 0; 2168 2168 + box-shadow: none; 2169 2169 + outline: none; 2170 2170 + } 2171 2171 + } 2130 2172 } 2131 2173 .filter-bar.centered { 2132 2174 justify-content: center;

+217 -7

src/pages/account-statuses.jsx

reviewed

··· 17 17 18 18 const LIMIT = 20; 19 19 20 20 + const supportsInputMonth = (() => { 21 21 + try { 22 22 + const input = document.createElement('input'); 23 23 + input.setAttribute('type', 'month'); 24 24 + return input.type === 'month'; 25 25 + } catch (e) { 26 26 + return false; 27 27 + } 28 28 + })(); 29 29 + 20 30 function AccountStatuses() { 21 31 const snapStates = useSnapshot(states); 22 32 const { id, ...params } = useParams(); 23 33 const [searchParams, setSearchParams] = useSearchParams(); 34 34 + const month = searchParams.get('month'); 24 35 const excludeReplies = !searchParams.get('replies'); 25 36 const excludeBoosts = !!searchParams.get('boosts'); 26 37 const tagged = searchParams.get('tagged'); 27 38 const media = !!searchParams.get('media'); 28 39 const { masto, instance, authenticated } = api({ instance: params.instance }); 29 40 const accountStatusesIterator = useRef(); 41 41 + 42 42 + const allSearchParams = [month, excludeReplies, excludeBoosts, tagged, media]; 43 43 + const [account, setAccount] = useState(); 44 44 + const searchOffsetRef = useRef(0); 45 45 + useEffect(() => { 46 46 + searchOffsetRef.current = 0; 47 47 + }, allSearchParams); 48 48 + 49 49 + const sameCurrentInstance = useMemo( 50 50 + () => instance === api().instance, 51 51 + [instance], 52 52 + ); 53 53 + const [searchEnabled, setSearchEnabled] = useState(false); 54 54 + useEffect(() => { 55 55 + // Only enable for current logged-in instance 56 56 + // Most remote instances don't allow unauthenticated searches 57 57 + if (!sameCurrentInstance) return; 58 58 + if (!account?.acct) return; 59 59 + (async () => { 60 60 + const results = await masto.v2.search.fetch({ 61 61 + q: `from:${account?.acct}`, 62 62 + type: 'statuses', 63 63 + limit: 1, 64 64 + }); 65 65 + setSearchEnabled(!!results?.statuses?.length); 66 66 + })(); 67 67 + }, [sameCurrentInstance, account?.acct]); 68 68 + 30 69 async function fetchAccountStatuses(firstLoad) { 70 70 + if (/^\d{4}-[01]\d$/.test(month)) { 71 71 + if (!account) { 72 72 + return { 73 73 + value: [], 74 74 + done: true, 75 75 + }; 76 76 + } 77 77 + const [_year, _month] = month.split('-'); 78 78 + const monthIndex = parseInt(_month, 10) - 1; 79 79 + // YYYY-MM (no day) 80 80 + // Search options: 81 81 + // - from:account 82 82 + // - after:YYYY-MM-DD (non-inclusive) 83 83 + // - before:YYYY-MM-DD (non-inclusive) 84 84 + 85 85 + // Last day of previous month 86 86 + const after = new Date(_year, monthIndex, 0); 87 87 + const afterStr = `${after.getFullYear()}-${(after.getMonth() + 1) 88 88 + .toString() 89 89 + .padStart(2, '0')}-${after.getDate().toString().padStart(2, '0')}`; 90 90 + // First day of next month 91 91 + const before = new Date(_year, monthIndex + 1, 1); 92 92 + const beforeStr = `${before.getFullYear()}-${(before.getMonth() + 1) 93 93 + .toString() 94 94 + .padStart(2, '0')}-${before.getDate().toString().padStart(2, '0')}`; 95 95 + console.log({ 96 96 + month, 97 97 + _year, 98 98 + _month, 99 99 + monthIndex, 100 100 + after, 101 101 + before, 102 102 + afterStr, 103 103 + beforeStr, 104 104 + }); 105 105 + 106 106 + let limit; 107 107 + if (firstLoad) { 108 108 + limit = LIMIT + 1; 109 109 + searchOffsetRef.current = 0; 110 110 + } else { 111 111 + limit = LIMIT + searchOffsetRef.current + 1; 112 112 + searchOffsetRef.current += LIMIT; 113 113 + } 114 114 + 115 115 + const searchResults = await masto.v2.search.fetch({ 116 116 + q: `from:${account.acct} after:${afterStr} before:${beforeStr}`, 117 117 + type: 'statuses', 118 118 + limit, 119 119 + offset: searchOffsetRef.current, 120 120 + }); 121 121 + if (searchResults?.statuses?.length) { 122 122 + const value = searchResults.statuses.slice(0, LIMIT); 123 123 + value.forEach((item) => { 124 124 + saveStatus(item, instance); 125 125 + }); 126 126 + const done = searchResults.statuses.length <= LIMIT; 127 127 + return { value, done }; 128 128 + } else { 129 129 + return { value: [], done: true }; 130 130 + } 131 131 + } 132 132 + 31 133 const results = []; 32 134 if (firstLoad) { 33 135 const { value: pinnedStatuses } = await masto.v1.accounts ··· 78 180 }; 79 181 } 80 182 81 81 - const [account, setAccount] = useState(); 82 183 const [featuredTags, setFeaturedTags] = useState([]); 83 184 useTitle( 84 185 `${account?.displayName ? account.displayName + ' ' : ''}@${ ··· 112 213 const filterBarRef = useRef(); 113 214 const TimelineStart = useMemo(() => { 114 215 const cachedAccount = snapStates.accounts[`${id}@${instance}`]; 115 115 - const filtered = !excludeReplies || excludeBoosts || tagged || media; 216 216 + const filtered = 217 217 + !excludeReplies || excludeBoosts || tagged || media || !!month; 116 218 return ( 117 219 <> 118 220 <AccountInfo ··· 170 272 </Link> 171 273 {featuredTags.map((tag) => ( 172 274 <Link 275 275 + key={tag.id} 173 276 to={`/${instance}/a/${id}${ 174 277 tagged === tag.name 175 278 ? '' ··· 192 295 {/* <span class="filter-count">{tag.statusesCount}</span> */} 193 296 </Link> 194 297 ))} 298 298 + {searchEnabled && 299 299 + (supportsInputMonth ? ( 300 300 + <input 301 301 + type="month" 302 302 + class={`filter-field ${month ? 'is-active' : ''}`} 303 303 + disabled={!account?.acct} 304 304 + value={month || ''} 305 305 + min="1983-01" // Birth of the Internet 306 306 + max={new Date().toISOString().slice(0, 7)} 307 307 + onInput={(e) => { 308 308 + const { value } = e.currentTarget; 309 309 + setSearchParams( 310 310 + value 311 311 + ? { 312 312 + month: value, 313 313 + } 314 314 + : {}, 315 315 + ); 316 316 + }} 317 317 + /> 318 318 + ) : ( 319 319 + // Fallback to <select> for month and <input type="number"> for year 320 320 + <MonthPicker 321 321 + class={`filter-field ${month ? 'is-active' : ''}`} 322 322 + disabled={!account?.acct} 323 323 + value={month || ''} 324 324 + min="1983-01" // Birth of the Internet 325 325 + max={new Date().toISOString().slice(0, 7)} 326 326 + onInput={(e) => { 327 327 + const { value } = e; 328 328 + setSearchParams( 329 329 + value 330 330 + ? { 331 331 + month: value, 332 332 + } 333 333 + : {}, 334 334 + ); 335 335 + }} 336 336 + /> 337 337 + ))} 195 338 </div> 196 339 </> 197 340 ); ··· 199 342 id, 200 343 instance, 201 344 authenticated, 202 202 - excludeReplies, 203 203 - excludeBoosts, 204 345 featuredTags, 205 205 - tagged, 206 206 - media, 346 346 + searchEnabled, 347 347 + ...allSearchParams, 207 348 ]); 208 349 209 350 useEffect(() => { ··· 258 399 useItemID 259 400 boostsCarousel={snapStates.settings.boostsCarousel} 260 401 timelineStart={TimelineStart} 261 261 - refresh={[excludeReplies, excludeBoosts, tagged, media].toString()} 402 402 + refresh={[ 403 403 + excludeReplies, 404 404 + excludeBoosts, 405 405 + tagged, 406 406 + media, 407 407 + month + account?.acct, 408 408 + ].toString()} 262 409 headerEnd={ 263 410 <Menu2 264 411 portal ··· 300 447 </Menu2> 301 448 } 302 449 /> 450 450 + ); 451 451 + } 452 452 + 453 453 + function MonthPicker(props) { 454 454 + const { 455 455 + class: className, 456 456 + disabled, 457 457 + value, 458 458 + min, 459 459 + max, 460 460 + onInput = () => {}, 461 461 + } = props; 462 462 + const [_year, _month] = value?.split('-') || []; 463 463 + const monthFieldRef = useRef(); 464 464 + const yearFieldRef = useRef(); 465 465 + 466 466 + return ( 467 467 + <div class={className}> 468 468 + <select 469 469 + ref={monthFieldRef} 470 470 + disabled={disabled} 471 471 + value={_month || ''} 472 472 + onInput={(e) => { 473 473 + const { value } = e.currentTarget; 474 474 + onInput({ 475 475 + value: value ? `${yearFieldRef.current.value}-${value}` : '', 476 476 + }); 477 477 + }} 478 478 + > 479 479 + <option value="">Month</option> 480 480 + <option disabled>-----</option> 481 481 + {Array.from({ length: 12 }, (_, i) => ( 482 482 + <option 483 483 + value={ 484 484 + // Month is 1-indexed 485 485 + (i + 1).toString().padStart(2, '0') 486 486 + } 487 487 + key={i} 488 488 + > 489 489 + {new Date(0, i).toLocaleString('default', { 490 490 + month: 'long', 491 491 + })} 492 492 + </option> 493 493 + ))} 494 494 + </select>{' '} 495 495 + <input 496 496 + ref={yearFieldRef} 497 497 + type="number" 498 498 + disabled={disabled} 499 499 + value={_year || new Date().getFullYear()} 500 500 + min={min?.slice(0, 4) || '1983'} 501 501 + max={max?.slice(0, 4) || new Date().getFullYear()} 502 502 + onInput={(e) => { 503 503 + const { value } = e.currentTarget; 504 504 + onInput({ 505 505 + value: value ? `${value}-${monthFieldRef.current.value}` : '', 506 506 + }); 507 507 + }} 508 508 + style={{ 509 509 + width: '4.5em', 510 510 + }} 511 511 + /> 512 512 + </div> 303 513 ); 304 514 } 305 515