+13 -16

api.js

··· 130 130 throw new URLError(`${error}`); 131 131 } 132 132 133 133 - if (url.protocol != 'https:') { 134 134 - throw new URLError('URL must start with https://'); 133 133 + if (url.protocol != 'https:' && url.protocol != 'http:') { 134 134 + throw new URLError('URL must start with http(s)://'); 135 135 } 136 136 137 137 let parts = url.pathname.split('/'); ··· 197 197 this.cacheProfile(profile); 198 198 return profile; 199 199 } 200 200 + } 201 201 + 202 202 + /** @param {string} query, @returns {Promise<json[]>} */ 203 203 + 204 204 + async autocompleteUsers(query) { 205 205 + let json = await this.getRequest('app.bsky.actor.searchActorsTypeahead', { q: query }); 206 206 + return json.actors; 200 207 } 201 208 202 209 /** @returns {Promise<json | undefined>} */ ··· 315 322 let timeLimit = now.getTime() - days * 86400 * 1000; 316 323 317 324 return await this.fetchAll('app.bsky.feed.getTimeline', { 318 318 - params: { 319 319 - limit: 100 320 320 - }, 325 325 + params: { limit: 100 }, 321 326 field: 'feed', 322 322 - breakWhen: (x) => { 323 323 - let timestamp = x.reason ? x.reason.indexedAt : x.post.record.createdAt; 324 324 - return Date.parse(timestamp) < timeLimit; 325 325 - }, 327 327 + breakWhen: (x) => (feedPostTime(x) < timeLimit), 326 328 onPageLoad: options.onPageLoad, 327 329 keepLastPage: options.keepLastPage 328 330 }); ··· 359 361 limit: 100 360 362 }, 361 363 field: 'feed', 362 362 - breakWhen: (x) => { 363 363 - let timestamp = x.reason ? x.reason.indexedAt : x.post.record.createdAt; 364 364 - return Date.parse(timestamp) < timeLimit; 365 365 - }, 364 364 + breakWhen: (x) => (feedPostTime(x) < timeLimit), 366 365 onPageLoad: options.onPageLoad, 367 366 keepLastPage: options.keepLastPage 368 367 }); ··· 399 398 limit: 100 400 399 }, 401 400 field: 'feed', 402 402 - breakWhen: (x) => { 403 403 - return Date.parse(x.post.record.createdAt) < timeLimit; 404 404 - }, 401 401 + breakWhen: (x) => (feedPostTime(x) < timeLimit), 405 402 onPageLoad: options.onPageLoad, 406 403 keepLastPage: options.keepLastPage 407 404 });

+61 -19

index.html

··· 10 10 font-src 'self'; 11 11 script-src-attr 'none'; 12 12 style-src-attr 'none'; 13 13 - connect-src https:; 13 13 + connect-src https: http://localhost:3000; 14 14 base-uri 'none'; 15 15 form-action 'none';"> 16 16 ··· 49 49 50 50 <li><a href="#" data-action="login">Log in</a></li> 51 51 <li><a href="#" data-action="logout">Log out</a></li> 52 52 + 53 53 + <li class="link"><a href="?">Home</a></li> 54 54 + <li class="link"><a href="?page=posting_stats">Posting stats</a></li> 55 55 + <li class="link"><a href="?page=like_stats">Like stats</a></li> 56 56 + <li class="link"><a href="?page=search">Timeline search</a></li> 57 57 + <li class="link"><a href="?page=search&mode=likes">Archive search</a></li> 52 58 </ul> 53 59 </div> 54 60 ··· 116 122 <select name="scan_list"></select> 117 123 </p> 118 124 119 119 - <p class="user-choice"> 120 120 - <textarea name="scan_users"></textarea> 121 121 - </p> 125 125 + <div class="user-choice"> 126 126 + <input type="text" placeholder="Add user" autocomplete="off"> 127 127 + <div class="autocomplete"></div> 128 128 + <div class="selected-users"></div> 129 129 + </div> 122 130 123 131 <p> 124 132 <input type="submit" value="Start scan"> <progress></progress> ··· 128 136 <p class="scan-info"></p> 129 137 130 138 <table class="scan-result"> 131 131 - <thead> 132 132 - </thead> 133 133 - <tbody> 134 134 - </tbody> 139 139 + <thead></thead> 140 140 + <tbody></tbody> 135 141 </table> 136 142 </div> 137 143 ··· 164 170 </div> 165 171 166 172 <div id="private_search_page"> 167 167 - <h2>Archive search *Beta*</h2> 173 173 + <h2>Archive search</h2> 168 174 169 169 - <form> 170 170 - <p> 171 171 - Fetch timeline posts: <input type="range" min="1" max="60" value="7"> <label>7 days</label> 172 172 - </p> 175 175 + <div class="timeline-search"> 176 176 + <form> 177 177 + <p> 178 178 + Fetch timeline posts: <input type="range" min="1" max="60" value="7"> <label>7 days</label> 179 179 + </p> 173 180 174 174 - <p> 175 175 - <input type="submit" value="Fetch timeline"> <progress></progress> 176 176 - </p> 181 181 + <p> 182 182 + <input type="submit" value="Fetch timeline"> <progress></progress> 183 183 + </p> 184 184 + </form> 185 185 + 186 186 + <p class="archive-status"></p> 187 187 + 188 188 + <hr> 189 189 + </div> 190 190 + 191 191 + <form class="search-form"> 192 192 + <p class="search">Search: <input type="text" class="search-query" autocomplete="off"></p> 193 193 + 194 194 + <div class="search-collections"> 195 195 + <input type="radio" name="collection" value="likes" id="collection-likes" checked> <label for="collection-likes">Likes</label> 196 196 + <input type="radio" name="collection" value="reposts" id="collection-reposts"> <label for="collection-reposts">Reposts</label> 197 197 + <input type="radio" name="collection" value="quotes" id="collection-quotes"> <label for="collection-quotes">Quotes</label> 198 198 + <input type="radio" name="collection" value="pins" id="collection-pins"> <label for="collection-pins">Pins</label> 199 199 + </div> 177 200 </form> 178 201 179 179 - <p class="archive-status"></p> 202 202 + <div class="lycan-import"> 203 203 + <form> 204 204 + <h4>Data not imported yet</h4> 180 205 181 181 - <hr> 206 206 + <p> 207 207 + In order to search within your likes and bookmarks, the posts you've liked or saved need to be imported into a database. 208 208 + This is a one-time process, but it can take several minutes or more, depending on the age of your account. 209 209 + </p> 210 210 + <p> 211 211 + To start the import, press the button below. You can then wait until it finishes, or close this tab and come back a bit later. 212 212 + After the import is complete, the database will be kept up to date automatically going forward. 213 213 + </p> 214 214 + <p> 215 215 + <input type="submit" value="Start import"> 216 216 + </p> 217 217 + </form> 182 218 183 183 - <p class="search">Search: <input type="text" class="search-query"></p> 219 219 + <div class="import-progress"> 220 220 + <h4>Import in progress</h4> 221 221 + 222 222 + <p class="import-status"></p> 223 223 + <p><progress></progress> <output></output></p> 224 224 + </div> 225 225 + </div> 184 226 185 227 <div class="results"> 186 228 </div>

+3 -4

like_stats_page.js

··· 27 27 e.preventDefault(); 28 28 29 29 if (!this.scanStartTime) { 30 30 - this.findLikes(); 30 30 + this.findLikes(); 31 31 } else { 32 32 this.stopScan(); 33 33 } ··· 134 134 135 135 if (!last) { return } 136 136 137 137 - let lastTimestamp = last.reason ? last.reason.indexedAt : last.post.record.createdAt; 138 138 - let lastDate = Date.parse(lastTimestamp); 137 137 + let lastDate = feedPostTime(last); 139 138 let daysBack = (startTime - lastDate) / 86400 / 1000; 140 139 141 140 this.updateProgress({ posts: Math.min(1.0, daysBack / requestedDays) }); ··· 229 228 tr.append( 230 229 $tag('td.no', { text: i + 1 }), 231 230 $tag('td.handle', { 232 232 - html: `<img class="avatar" src="${user.avatar}"> ` + 231 231 + html: `<img class="avatar" src="${user.avatar}"> ` + 233 232 `<a href="https://bsky.app/profile/${user.handle}" target="_blank">${user.handle}</a>` 234 233 }), 235 234 $tag('td.count', { text: user.count })

+9 -2

menu.js

··· 11 11 12 12 html.addEventListener('click', (e) => { 13 13 this.menuElement.style.visibility = 'hidden'; 14 14 + this.icon.classList.remove('active'); 14 15 }); 16 16 + 17 17 + let homeLink = $(this.menuElement.querySelector('a[href="?"]'), HTMLLinkElement); 18 18 + homeLink.href = location.origin + location.pathname; 15 19 16 20 this.icon.addEventListener('click', (e) => { 17 21 e.stopPropagation(); ··· 66 70 } 67 71 68 72 toggleAccountMenu() { 69 69 - this.menuElement.style.visibility = (this.menuElement.style.visibility == 'visible') ? 'hidden' : 'visible'; 73 73 + let isVisible = (this.menuElement.style.visibility == 'visible'); 74 74 + 75 75 + this.menuElement.style.visibility = isVisible ? 'hidden' : 'visible'; 76 76 + this.icon.classList.toggle('active', !isVisible); 70 77 } 71 78 72 79 /** @param {string} buttonName */ ··· 124 131 async loadCurrentUserAvatar() { 125 132 try { 126 133 let url = await api.loadCurrentUserAvatar(); 127 127 - this.showLoggedInStatus(true, url); 134 134 + this.showLoggedInStatus(true, url); 128 135 } catch (error) { 129 136 console.log(error); 130 137 this.showLoggedInStatus(true, null);

+1 -1

minisky.js

··· 301 301 let text = await response.text(); 302 302 let json = text.trim().length > 0 ? JSON.parse(text) : undefined; 303 303 304 304 - if (response.status == 200) { 304 304 + if (response.status >= 200 && response.status < 300) { 305 305 return json; 306 306 } else { 307 307 throw new APIError(response.status, json);

+5

models.js

··· 322 322 return this.record.bridgyOriginalText; 323 323 } 324 324 325 325 + /** @returns {string | undefined} */ 326 326 + get originalFediURL() { 327 327 + return this.record.bridgyOriginalUrl; 328 328 + } 329 329 + 325 330 /** @returns {boolean} */ 326 331 get isRoot() { 327 332 // I AM ROOOT

+1 -1

notifications_page.js

··· 13 13 let finished = false; 14 14 let cursor; 15 15 16 16 - loadInPages((next) => { 16 16 + Paginator.loadInPages((next) => { 17 17 if (isLoading || finished) { return; } 18 18 isLoading = true; 19 19

+73

post_component.js

··· 162 162 if (this.post.embed) { 163 163 let embed = new EmbedComponent(this.post, this.post.embed).buildElement(); 164 164 wrapper.appendChild(embed); 165 165 + 166 166 + if (this.post.originalFediURL) { 167 167 + if (this.post.embed instanceof InlineLinkEmbed && this.post.embed.title.startsWith('Original post on ')) { 168 168 + embed.remove(); 169 169 + } 170 170 + } 171 171 + } 172 172 + 173 173 + if (this.post.originalFediURL) { 174 174 + let link = this.buildFediSourceLink(this.post.originalFediURL); 175 175 + if (link) { 176 176 + wrapper.appendChild(link); 177 177 + } 165 178 } 166 179 167 180 if (this.post.likeCount !== undefined && this.post.repostCount !== undefined) { ··· 301 314 return p; 302 315 } 303 316 317 317 + /** @param {string[]} terms */ 318 318 + 319 319 + highlightSearchResults(terms) { 320 320 + let regexp = new RegExp(`\\b(${terms.join('|')})\\b`, 'gi'); 321 321 + 322 322 + let root = this.rootElement; 323 323 + let body = $(root.querySelector(':scope > .content > .body, :scope > .content > details .body')); 324 324 + let walker = document.createTreeWalker(body, NodeFilter.SHOW_TEXT); 325 325 + let textNodes = []; 326 326 + 327 327 + while (walker.nextNode()) { 328 328 + textNodes.push(walker.currentNode); 329 329 + } 330 330 + 331 331 + for (let node of textNodes) { 332 332 + if (!node.textContent) { continue; } 333 333 + 334 334 + let markedText = document.createDocumentFragment(); 335 335 + let currentPosition = 0; 336 336 + 337 337 + for (;;) { 338 338 + let match = regexp.exec(node.textContent); 339 339 + if (match === null) break; 340 340 + 341 341 + if (match.index > currentPosition) { 342 342 + let earlierText = node.textContent.slice(currentPosition, match.index); 343 343 + markedText.appendChild(document.createTextNode(earlierText)); 344 344 + } 345 345 + 346 346 + let span = $tag('span.highlight', { text: match[0] }); 347 347 + markedText.appendChild(span); 348 348 + 349 349 + currentPosition = match.index + match[0].length; 350 350 + } 351 351 + 352 352 + if (currentPosition < node.textContent.length) { 353 353 + let remainingText = node.textContent.slice(currentPosition); 354 354 + markedText.appendChild(document.createTextNode(remainingText)); 355 355 + } 356 356 + 357 357 + $(node.parentNode).replaceChild(markedText, node); 358 358 + } 359 359 + } 360 360 + 304 361 /** @param {string[]} tags, @returns {HTMLElement} */ 305 362 306 363 buildTagsRow(tags) { ··· 433 490 loadHiddenReplies(loadMoreButton) { 434 491 loadMoreButton.innerHTML = `<img class="loader" src="icons/sunny.png">`; 435 492 this.loadHiddenSubtree(this.post, this.rootElement); 493 493 + } 494 494 + 495 495 + /** @param {string} url, @returns {HTMLElement | undefined} */ 496 496 + 497 497 + buildFediSourceLink(url) { 498 498 + try { 499 499 + let hostname = new URL(url).hostname; 500 500 + let a = $tag('a.fedi-link', { href: url, target: '_blank' }); 501 501 + 502 502 + let box = $tag('div', { html: `<i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i> View on ${hostname}` }); 503 503 + a.append(box); 504 504 + return a; 505 505 + } catch (error) { 506 506 + console.log("Invalid Fedi URL:" + error); 507 507 + return undefined; 508 508 + } 436 509 } 437 510 438 511 /** @param {HTMLLinkElement} authorLink */

+297 -92

posting_stats_page.js

··· 10 10 /** @type {Record<string, { pages: number, progress: number }>} */ 11 11 userProgress; 12 12 13 13 + /** @type {number | undefined} */ 14 14 + autocompleteTimer; 15 15 + 16 16 + /** @type {number} */ 17 17 + autocompleteIndex = -1; 18 18 + 19 19 + /** @type {json[]} */ 20 20 + autocompleteResults = []; 21 21 + 22 22 + /** @type {Record<string, json>} */ 23 23 + selectedUsers = {}; 24 24 + 13 25 constructor() { 14 26 this.pageElement = $id('posting_stats_page'); 15 27 this.form = $(this.pageElement.querySelector('form'), HTMLFormElement); ··· 18 30 this.submitButton = $(this.pageElement.querySelector('input[type="submit"]'), HTMLInputElement); 19 31 this.progressBar = $(this.pageElement.querySelector('input[type=submit] + progress'), HTMLProgressElement); 20 32 this.table = $(this.pageElement.querySelector('table.scan-result')); 33 33 + this.tableHead = $(this.table.querySelector('thead')); 34 34 + this.tableBody = $(this.table.querySelector('tbody')); 35 35 + this.listSelect = $(this.pageElement.querySelector('.list-choice select'), HTMLSelectElement); 36 36 + this.scanInfo = $(this.pageElement.querySelector('.scan-info')); 37 37 + this.scanType = this.form.elements['scan_type']; 21 38 22 22 - this.setupEvents(); 39 39 + this.userField = $(this.pageElement.querySelector('.user-choice input'), HTMLInputElement); 40 40 + this.userList = $(this.pageElement.querySelector('.selected-users')); 41 41 + this.autocomplete = $(this.pageElement.querySelector('.autocomplete')); 23 42 24 43 this.userProgress = {}; 25 44 this.appView = new BlueskyAPI('public.api.bsky.app', false); 45 45 + 46 46 + this.setupEvents(); 26 47 } 27 48 28 49 setupEvents() { 29 29 - $(this.pageElement.querySelector('form')).addEventListener('submit', (e) => { 50 50 + let html = $(document.body.parentNode); 51 51 + 52 52 + html.addEventListener('click', (e) => { 53 53 + this.hideAutocomplete(); 54 54 + }); 55 55 + 56 56 + this.form.addEventListener('submit', (e) => { 30 57 e.preventDefault(); 31 58 32 59 if (!this.scanStartTime) { 33 33 - this.scanPostingStats(); 60 60 + this.scanPostingStats(); 34 61 } else { 35 62 this.stopScan(); 36 63 } ··· 38 65 39 66 this.rangeInput.addEventListener('input', (e) => { 40 67 let days = parseInt(this.rangeInput.value, 10); 41 41 - this.configurePostingStats({ days }); 68 68 + let label = $(this.pageElement.querySelector('input[type=range] + label')); 69 69 + label.innerText = (days == 1) ? '1 day' : `${days} days`; 42 70 }); 43 71 44 44 - this.pageElement.querySelectorAll('input[type="radio"]').forEach(r => { 72 72 + this.scanType.forEach(r => { 45 73 r.addEventListener('click', (e) => { 46 74 let value = $(r, HTMLInputElement).value; 47 75 48 76 $(this.pageElement.querySelector('.list-choice')).style.display = (value == 'list') ? 'block' : 'none'; 49 77 $(this.pageElement.querySelector('.user-choice')).style.display = (value == 'users') ? 'block' : 'none'; 50 78 79 79 + if (value == 'users') { 80 80 + this.userField.focus(); 81 81 + } 82 82 + 51 83 this.table.style.display = 'none'; 52 84 }); 53 85 }); 86 86 + 87 87 + this.userField.addEventListener('input', () => { 88 88 + this.onUserInput(); 89 89 + }); 90 90 + 91 91 + this.userField.addEventListener('keydown', (e) => { 92 92 + this.onUserKeyDown(e); 93 93 + }); 54 94 } 55 95 56 96 show() { ··· 67 107 /** @returns {Promise<void>} */ 68 108 69 109 async fetchLists() { 70 70 - let select = $(this.pageElement.querySelector('.list-choice select')); 71 110 let lists = await accountAPI.loadUserLists(); 72 111 73 112 let sorted = lists.sort((a, b) => { ··· 78 117 }); 79 118 80 119 for (let list of lists) { 81 81 - let opt = $tag('option', { value: list.uri, text: list.name + ' ' }); 82 82 - select.append(opt); 120 120 + this.listSelect.append( 121 121 + $tag('option', { value: list.uri, text: list.name + ' ' }) 122 122 + ); 123 123 + } 124 124 + } 125 125 + 126 126 + onUserInput() { 127 127 + if (this.autocompleteTimer) { 128 128 + clearTimeout(this.autocompleteTimer); 129 129 + } 130 130 + 131 131 + let query = this.userField.value.trim(); 132 132 + 133 133 + if (query.length == 0) { 134 134 + this.hideAutocomplete(); 135 135 + this.autocompleteTimer = undefined; 136 136 + return; 137 137 + } 138 138 + 139 139 + this.autocompleteTimer = setTimeout(() => this.fetchAutocomplete(query), 100); 140 140 + } 141 141 + 142 142 + /** @param {KeyboardEvent} e */ 143 143 + 144 144 + onUserKeyDown(e) { 145 145 + if (e.key == 'Enter') { 146 146 + e.preventDefault(); 147 147 + 148 148 + if (this.autocompleteIndex >= 0) { 149 149 + this.selectUser(this.autocompleteIndex); 150 150 + } 151 151 + } else if (e.key == 'Escape') { 152 152 + this.hideAutocomplete(); 153 153 + } else if (e.key == 'ArrowDown' && this.autocompleteResults.length > 0) { 154 154 + e.preventDefault(); 155 155 + this.moveAutocomplete(1); 156 156 + } else if (e.key == 'ArrowUp' && this.autocompleteResults.length > 0) { 157 157 + e.preventDefault(); 158 158 + this.moveAutocomplete(-1); 159 159 + } 160 160 + } 161 161 + 162 162 + /** @param {string} query, @returns {Promise<void>} */ 163 163 + 164 164 + async fetchAutocomplete(query) { 165 165 + let users = await accountAPI.autocompleteUsers(query); 166 166 + 167 167 + let selectedDIDs = new Set(Object.keys(this.selectedUsers)); 168 168 + users = users.filter(u => !selectedDIDs.has(u.did)); 169 169 + 170 170 + this.autocompleteResults = users; 171 171 + this.autocompleteIndex = -1; 172 172 + this.showAutocomplete(); 173 173 + } 174 174 + 175 175 + showAutocomplete() { 176 176 + this.autocomplete.innerHTML = ''; 177 177 + this.autocomplete.scrollTop = 0; 178 178 + 179 179 + if (this.autocompleteResults.length == 0) { 180 180 + this.hideAutocomplete(); 181 181 + return; 182 182 + } 183 183 + 184 184 + for (let [i, user] of this.autocompleteResults.entries()) { 185 185 + let row = this.makeUserRow(user); 186 186 + 187 187 + row.addEventListener('mouseenter', () => { 188 188 + this.highlightAutocomplete(i); 189 189 + }); 190 190 + 191 191 + row.addEventListener('mousedown', (e) => { 192 192 + e.preventDefault(); 193 193 + this.selectUser(i); 194 194 + }); 195 195 + 196 196 + this.autocomplete.append(row); 197 197 + }; 198 198 + 199 199 + this.autocomplete.style.top = this.userField.offsetHeight + 'px'; 200 200 + this.autocomplete.style.display = 'block'; 201 201 + this.highlightAutocomplete(0); 202 202 + } 203 203 + 204 204 + hideAutocomplete() { 205 205 + this.autocomplete.style.display = 'none'; 206 206 + this.autocompleteResults = []; 207 207 + this.autocompleteIndex = -1; 208 208 + } 209 209 + 210 210 + /** @param {number} change */ 211 211 + 212 212 + moveAutocomplete(change) { 213 213 + if (this.autocompleteResults.length == 0) { 214 214 + return; 215 215 + } 216 216 + 217 217 + let newIndex = this.autocompleteIndex + change; 218 218 + 219 219 + if (newIndex < 0) { 220 220 + newIndex = this.autocompleteResults.length - 1; 221 221 + } else if (newIndex >= this.autocompleteResults.length) { 222 222 + newIndex = 0; 83 223 } 224 224 + 225 225 + this.highlightAutocomplete(newIndex); 84 226 } 85 227 86 86 - /** @param {{ days: number }} args */ 228 228 + /** @param {number} index */ 87 229 88 88 - configurePostingStats(args) { 89 89 - if (args.days) { 90 90 - let label = $(this.pageElement.querySelector('input[type=range] + label')); 91 91 - label.innerText = (args.days == 1) ? '1 day' : `${args.days} days`; 230 230 + highlightAutocomplete(index) { 231 231 + this.autocompleteIndex = index; 232 232 + 233 233 + let rows = this.autocomplete.querySelectorAll('.user-row'); 234 234 + 235 235 + rows.forEach((row, i) => { 236 236 + row.classList.toggle('hover', i == index); 237 237 + }); 238 238 + } 239 239 + 240 240 + /** @param {number} index */ 241 241 + 242 242 + selectUser(index) { 243 243 + let user = this.autocompleteResults[index]; 244 244 + 245 245 + if (!user) { 246 246 + return; 92 247 } 248 248 + 249 249 + this.selectedUsers[user.did] = user; 250 250 + 251 251 + let row = this.makeUserRow(user, true); 252 252 + this.userList.append(row); 253 253 + 254 254 + this.userField.value = ''; 255 255 + this.hideAutocomplete(); 93 256 } 94 257 95 95 - /** @returns {Promise<void>} */ 258 258 + /** @param {json} user, @param {boolean} [withRemove], @returns HTMLElement */ 96 259 97 97 - async scanPostingStats() { 98 98 - this.submitButton.value = 'Cancel'; 260 260 + makeUserRow(user, withRemove = false) { 261 261 + let row = $tag('div.user-row'); 262 262 + row.dataset.did = user.did; 263 263 + row.append( 264 264 + $tag('img.avatar', { src: user.avatar }), 265 265 + $tag('span.name', { text: user.displayName || '–' }), 266 266 + $tag('span.handle', { text: user.handle }) 267 267 + ); 99 268 100 100 - let requestedDays = this.selectedDaysRange(); 269 269 + if (withRemove) { 270 270 + let remove = $tag('a.remove', { href: '#', text: '✕' }); 101 271 102 102 - this.progressBar.max = requestedDays; 103 103 - this.progressBar.value = 0; 104 104 - this.progressBar.style.display = 'inline'; 272 272 + remove.addEventListener('click', (e) => { 273 273 + e.preventDefault(); 274 274 + row.remove(); 275 275 + delete this.selectedUsers[user.did]; 276 276 + }); 105 277 106 106 - this.table.style.display = 'none'; 278 278 + row.append(remove); 279 279 + } 107 280 108 108 - let tbody = $(this.table.querySelector('tbody')); 109 109 - tbody.innerHTML = ''; 281 281 + return row; 282 282 + } 110 283 111 111 - let thead = $(this.table.querySelector('thead')); 112 112 - thead.innerHTML = ''; 284 284 + /** @returns {Promise<void>} */ 113 285 286 286 + async scanPostingStats() { 114 287 let startTime = new Date().getTime(); 115 115 - this.scanStartTime = startTime; 116 116 - 117 117 - let scanInfo = $(this.pageElement.querySelector('.scan-info')); 118 118 - scanInfo.style.display = 'none'; 288 288 + let requestedDays = this.selectedDaysRange(); 289 289 + let scanType = this.scanType.value; 119 290 120 291 /** @type {FetchAllOnPageLoad} */ 121 292 let onPageLoad = (data) => { ··· 126 297 this.updateProgress(data, startTime); 127 298 }; 128 299 129 129 - let scanType = this.form.elements['scan_type'].value; 130 130 - 131 300 if (scanType == 'home') { 132 132 - let items = await accountAPI.loadHomeTimeline(requestedDays, { 301 301 + this.startScan(startTime, requestedDays); 302 302 + 303 303 + let posts = await accountAPI.loadHomeTimeline(requestedDays, { 133 304 onPageLoad: onPageLoad, 134 305 keepLastPage: true 135 306 }); 136 307 137 137 - if (this.scanStartTime != startTime) { 308 308 + this.updateResultsTable(posts, startTime, requestedDays); 309 309 + } else if (scanType == 'list') { 310 310 + let list = this.listSelect.value; 311 311 + 312 312 + if (!list) { 138 313 return; 139 314 } 140 315 141 141 - this.updateResultsTable(items, startTime, requestedDays); 142 142 - } else if (scanType == 'list') { 143 143 - let select = $(this.pageElement.querySelector('.list-choice select'), HTMLSelectElement); 144 144 - let list = select.value; 145 145 - let items = await accountAPI.loadListTimeline(list, requestedDays, { 316 316 + this.startScan(startTime, requestedDays); 317 317 + 318 318 + let posts = await accountAPI.loadListTimeline(list, requestedDays, { 146 319 onPageLoad: onPageLoad, 147 320 keepLastPage: true 148 321 }); 149 322 150 150 - if (this.scanStartTime != startTime) { 323 323 + this.updateResultsTable(posts, startTime, requestedDays, { showReposts: false }); 324 324 + } else if (scanType == 'users') { 325 325 + let dids = Object.keys(this.selectedUsers); 326 326 + 327 327 + if (dids.length == 0) { 151 328 return; 152 329 } 153 330 154 154 - this.updateResultsTable(items, startTime, requestedDays, { showReposts: false }); 155 155 - } else if (scanType == 'users') { 156 156 - let textarea = $(this.pageElement.querySelector('textarea'), HTMLTextAreaElement); 157 157 - let users = textarea.value.split(/\n/).map(x => x.trim()).filter(x => x.length > 0); 158 158 - let dids = await Promise.all(users.map(u => accountAPI.resolveHandle(u))); 159 159 - 331 331 + this.startScan(startTime, requestedDays); 160 332 this.resetUserProgress(dids); 161 333 162 334 let requests = dids.map(did => this.appView.loadUserTimeline(did, requestedDays, { 163 163 - filter: 'posts_no_replies', 335 335 + filter: 'posts_and_author_threads', 164 336 onPageLoad: (data) => { 165 337 if (this.scanStartTime != startTime) { 166 338 return { cancel: true }; ··· 172 344 })); 173 345 174 346 let datasets = await Promise.all(requests); 175 175 - 176 176 - if (this.scanStartTime != startTime) { 177 177 - return; 178 178 - } 179 179 - 180 180 - let items = datasets.flat(); 347 347 + let posts = datasets.flat(); 181 348 182 182 - this.updateResultsTable(items, startTime, requestedDays, { 183 183 - showTotal: false, showPercentages: false, countFetchedDays: false 349 349 + this.updateResultsTable(posts, startTime, requestedDays, { 350 350 + showTotal: false, 351 351 + showPercentages: false, 352 352 + countFetchedDays: false, 353 353 + users: Object.values(this.selectedUsers) 184 354 }); 185 355 } else { 186 186 - let items = await accountAPI.loadUserTimeline(accountAPI.user.did, requestedDays, { 356 356 + this.startScan(startTime, requestedDays); 357 357 + 358 358 + let posts = await accountAPI.loadUserTimeline(accountAPI.user.did, requestedDays, { 187 359 filter: 'posts_no_replies', 188 360 onPageLoad: onPageLoad, 189 361 keepLastPage: true 190 362 }); 191 363 192 192 - if (this.scanStartTime != startTime) { 193 193 - return; 194 194 - } 195 195 - 196 196 - this.updateResultsTable(items, startTime, requestedDays, { showTotal: false, showPercentages: false }); 364 364 + this.updateResultsTable(posts, startTime, requestedDays, { showTotal: false, showPercentages: false }); 197 365 } 198 366 } 199 367 ··· 204 372 205 373 if (!last) { return } 206 374 207 207 - let lastTimestamp = last.reason ? last.reason.indexedAt : last.post.record.createdAt; 208 208 - let lastDate = Date.parse(lastTimestamp); 375 375 + let lastDate = feedPostTime(last); 209 376 let daysBack = (startTime - lastDate) / 86400 / 1000; 210 377 211 211 - this.progressBar.value = daysBack; 378 378 + this.progressBar.value = daysBack; 212 379 } 213 213 - 214 380 215 381 /** @param {string[]} dids */ 216 382 ··· 229 395 230 396 if (!last) { return } 231 397 232 232 - let lastTimestamp = last.reason ? last.reason.indexedAt : last.post.record.createdAt; 233 233 - let lastDate = Date.parse(lastTimestamp); 398 398 + let lastDate = feedPostTime(last); 234 399 let daysBack = (startTime - lastDate) / 86400 / 1000; 235 400 236 401 this.userProgress[did].pages += 1; ··· 260 425 } 261 426 262 427 /** 263 263 - * @param {json[]} items 428 428 + * @param {json[]} posts 264 429 * @param {number} startTime 265 430 * @param {number} requestedDays 266 266 - * @param {{ showTotal?: boolean, showPercentages?: boolean, showReposts?: boolean, countFetchedDays?: boolean }} [options] 431 431 + * @param {{ 432 432 + * showTotal?: boolean, 433 433 + * showPercentages?: boolean, 434 434 + * showReposts?: boolean, 435 435 + * countFetchedDays?: boolean, 436 436 + * users?: json[] 437 437 + * }} [options] 438 438 + * @returns {Promise<void>} 267 439 */ 268 440 269 269 - updateResultsTable(items, startTime, requestedDays, options = {}) { 441 441 + async updateResultsTable(posts, startTime, requestedDays, options = {}) { 442 442 + if (this.scanStartTime != startTime) { 443 443 + return; 444 444 + } 445 445 + 446 446 + let now = new Date().getTime(); 447 447 + 448 448 + if (now - startTime < 100) { 449 449 + // artificial UI delay in case scan finishes immediately 450 450 + await new Promise(resolve => setTimeout(resolve, 100)); 451 451 + } 452 452 + 270 453 let users = {}; 271 454 let total = 0; 272 455 let allReposts = 0; 273 456 let allNormalPosts = 0; 274 457 275 275 - let last = items.at(-1); 458 458 + let last = posts.at(-1); 276 459 277 460 if (!last) { 278 461 this.stopScan(); ··· 282 465 let daysBack; 283 466 284 467 if (options.countFetchedDays !== false) { 285 285 - let lastTimestamp = last.reason ? last.reason.indexedAt : last.post.record.createdAt; 286 286 - let lastDate = Date.parse(lastTimestamp); 468 468 + let lastDate = feedPostTime(last); 287 469 let fetchedDays = (startTime - lastDate) / 86400 / 1000; 288 470 289 471 if (Math.ceil(fetchedDays) < requestedDays) { 290 290 - let scanInfo = $(this.pageElement.querySelector('.scan-info')); 291 291 - scanInfo.innerText = `🕓 Showing data from ${Math.round(fetchedDays)} days (the timeline only goes that far):`; 292 292 - scanInfo.style.display = 'block'; 472 472 + this.scanInfo.innerText = `🕓 Showing data from ${Math.round(fetchedDays)} days (the timeline only goes that far):`; 473 473 + this.scanInfo.style.display = 'block'; 293 474 } 294 475 295 476 daysBack = Math.min(requestedDays, fetchedDays); ··· 297 478 daysBack = requestedDays; 298 479 } 299 480 300 300 - items = items.filter(x => { 301 301 - let timestamp = x.reason ? x.reason.indexedAt : x.post.record.createdAt; 302 302 - return Date.parse(timestamp) > startTime - requestedDays * 86400 * 1000; 303 303 - }); 481 481 + let timeLimit = startTime - requestedDays * 86400 * 1000; 482 482 + posts = posts.filter(x => (feedPostTime(x) > timeLimit)); 483 483 + posts.reverse(); 484 484 + 485 485 + if (options.users) { 486 486 + for (let user of options.users) { 487 487 + users[user.handle] = { handle: user.handle, own: 0, reposts: 0, avatar: user.avatar }; 488 488 + } 489 489 + } 490 490 + 491 491 + let ownThreads = new Set(); 304 492 305 305 - for (let item of items) { 306 306 - if (item.reply) { continue; } 493 493 + for (let item of posts) { 494 494 + if (item.reply) { 495 495 + if (!ownThreads.has(item.reply.parent.uri)) { 496 496 + continue; 497 497 + } 498 498 + } 307 499 308 500 let user = item.reason ? item.reason.by : item.post.author; 309 501 let handle = user.handle; ··· 316 508 } else { 317 509 users[handle].own += 1; 318 510 allNormalPosts += 1; 511 511 + ownThreads.add(item.post.uri); 319 512 } 320 513 } 321 514 322 322 - let thead = $(this.table.querySelector('thead')); 323 515 let headRow = $tag('tr'); 324 516 325 517 if (options.showReposts !== false) { ··· 339 531 } 340 532 341 533 if (options.showPercentages !== false) { 342 342 - headRow.append($tag('th', { text: '% of all' })); 534 534 + headRow.append($tag('th', { text: '% of timeline' })); 343 535 } 344 536 345 345 - thead.append(headRow); 346 346 - 347 347 - let tbody = $(this.table.querySelector('tbody')); 537 537 + this.tableHead.append(headRow); 348 538 349 539 if (options.showTotal !== false) { 350 540 let tr = $tag('tr.total'); ··· 366 556 tr.append($tag('td.percent', { text: '' })); 367 557 } 368 558 369 369 - tbody.append(tr); 559 559 + this.tableBody.append(tr); 370 560 } 371 561 372 562 let sorted = Object.values(users).sort(this.sortUserRows); ··· 378 568 tr.append( 379 569 $tag('td.no', { text: i + 1 }), 380 570 $tag('td.handle', { 381 381 - html: `<img class="avatar" src="${user.avatar}"> ` + 571 571 + html: `<img class="avatar" src="${user.avatar}"> ` + 382 572 `<a href="https://bsky.app/profile/${user.handle}" target="_blank">${user.handle}</a>` 383 573 }), 384 574 ··· 395 585 tr.append($tag('td.percent', { text: ((user.own + user.reposts) * 100 / total).toFixed(1) + '%' })); 396 586 } 397 587 398 398 - tbody.append(tr); 588 588 + this.tableBody.append(tr); 399 589 } 400 590 401 591 this.table.style.display = 'table'; 402 402 - this.submitButton.value = 'Start scan'; 403 403 - this.progressBar.style.display = 'none'; 404 404 - this.scanStartTime = undefined; 592 592 + this.stopScan(); 593 593 + } 594 594 + 595 595 + /** @param {number} startTime, @param {number} requestedDays */ 596 596 + 597 597 + startScan(startTime, requestedDays) { 598 598 + this.submitButton.value = 'Cancel'; 599 599 + 600 600 + this.progressBar.max = requestedDays; 601 601 + this.progressBar.value = 0; 602 602 + this.progressBar.style.display = 'inline'; 603 603 + 604 604 + this.table.style.display = 'none'; 605 605 + this.tableHead.innerHTML = ''; 606 606 + this.tableBody.innerHTML = ''; 607 607 + 608 608 + this.scanStartTime = startTime; 609 609 + this.scanInfo.style.display = 'none'; 405 610 } 406 611 407 612 stopScan() {

+293 -14

private_search_page.js

··· 3 3 /** @type {number | undefined} */ 4 4 fetchStartTime; 5 5 6 6 + /** @type {number | undefined} */ 7 7 + importTimer; 8 8 + 9 9 + /** @type {string | undefined} */ 10 10 + lycanImportStatus; 11 11 + 6 12 constructor() { 7 13 this.pageElement = $id('private_search_page'); 14 14 + 15 15 + this.header = $(this.pageElement.querySelector('h2')); 8 16 9 17 this.rangeInput = $(this.pageElement.querySelector('input[type="range"]'), HTMLInputElement); 10 18 this.submitButton = $(this.pageElement.querySelector('input[type="submit"]'), HTMLInputElement); ··· 13 21 14 22 this.searchLine = $(this.pageElement.querySelector('.search')); 15 23 this.searchField = $(this.pageElement.querySelector('.search-query'), HTMLInputElement); 24 24 + this.searchForm = $(this.pageElement.querySelector('.search-form'), HTMLFormElement); 16 25 this.results = $(this.pageElement.querySelector('.results')); 17 26 27 27 + this.timelineSearch = $(this.pageElement.querySelector('.timeline-search')); 28 28 + this.timelineSearchForm = $(this.pageElement.querySelector('.timeline-search form'), HTMLFormElement); 29 29 + this.searchCollections = $(this.pageElement.querySelector('.search-collections')); 30 30 + 31 31 + this.lycanImportSection = $(this.pageElement.querySelector('.lycan-import')); 32 32 + this.lycanImportForm = $(this.pageElement.querySelector('.lycan-import form'), HTMLFormElement); 33 33 + this.importProgress = $(this.pageElement.querySelector('.import-progress')); 34 34 + this.importProgressBar = $(this.pageElement.querySelector('.import-progress progress'), HTMLProgressElement); 35 35 + this.importStatusLabel = $(this.pageElement.querySelector('.import-status')); 36 36 + this.importStatusPosition = $(this.pageElement.querySelector('.import-progress output')); 37 37 + 38 38 + this.isCheckingStatus = false; 18 39 this.timelinePosts = []; 19 40 20 41 this.setupEvents(); 42 42 + 43 43 + let params = new URLSearchParams(location.search); 44 44 + this.mode = params.get('mode'); 45 45 + let lycan = params.get('lycan'); 46 46 + 47 47 + if (lycan == 'local') { 48 48 + this.localLycan = new BlueskyAPI('http://localhost:3000', false); 49 49 + } else if (lycan) { 50 50 + this.lycanAddress = `did:web:${lycan}#lycan`; 51 51 + } else { 52 52 + this.lycanAddress = 'did:web:lycan.feeds.blue#lycan'; 53 53 + } 21 54 } 22 55 23 56 setupEvents() { 24 24 - $(this.pageElement.querySelector('form')).addEventListener('submit', (e) => { 57 57 + this.timelineSearchForm.addEventListener('submit', (e) => { 25 58 e.preventDefault(); 26 59 27 60 if (!this.fetchStartTime) { 28 28 - this.fetchTimeline(); 61 61 + this.fetchTimeline(); 29 62 } else { 30 63 this.stopFetch(); 31 64 } ··· 37 70 label.innerText = (days == 1) ? '1 day' : `${days} days`; 38 71 }); 39 72 40 40 - this.searchField.addEventListener('input', (e) => { 41 41 - let query = this.searchField.value.trim().toLowerCase(); 73 73 + this.searchField.addEventListener('keydown', (e) => { 74 74 + if (e.key == 'Enter') { 75 75 + e.preventDefault(); 76 76 + 77 77 + let query = this.searchField.value.trim().toLowerCase(); 42 78 43 43 - if (this.searchTimer) { 44 44 - clearTimeout(this.searchTimer); 79 79 + if (this.mode == 'likes') { 80 80 + this.searchInLycan(query); 81 81 + } else { 82 82 + this.searchInTimeline(query); 83 83 + } 45 84 } 85 85 + }); 46 86 47 47 - this.searchTimer = setTimeout(() => this.searchInTimeline(query), 100); 87 87 + this.lycanImportForm.addEventListener('submit', (e) => { 88 88 + e.preventDefault(); 89 89 + this.startLycanImport(); 48 90 }); 49 91 } 50 92 ··· 56 98 57 99 show() { 58 100 this.pageElement.style.display = 'block'; 101 101 + 102 102 + if (this.mode == 'likes') { 103 103 + this.header.innerText = 'Archive search'; 104 104 + this.timelineSearch.style.display = 'none'; 105 105 + this.searchCollections.style.display = 'block'; 106 106 + this.searchLine.style.display = 'block'; 107 107 + this.lycanImportSection.style.display = 'none'; 108 108 + this.checkLycanImportStatus(); 109 109 + } else { 110 110 + this.header.innerText = 'Timeline search'; 111 111 + this.timelineSearch.style.display = 'block'; 112 112 + this.searchCollections.style.display = 'none'; 113 113 + this.lycanImportSection.style.display = 'none'; 114 114 + } 115 115 + } 116 116 + 117 117 + /** @returns {Promise<void>} */ 118 118 + 119 119 + async checkLycanImportStatus() { 120 120 + if (this.isCheckingStatus) { 121 121 + return; 122 122 + } 123 123 + 124 124 + this.isCheckingStatus = true; 125 125 + 126 126 + try { 127 127 + let response = await this.getImportStatus(); 128 128 + this.showImportStatus(response); 129 129 + } catch (error) { 130 130 + this.showImportError(`Couldn't check import status: ${error}`); 131 131 + } finally { 132 132 + this.isCheckingStatus = false; 133 133 + } 134 134 + } 135 135 + 136 136 + /** @returns {Promise<json>} */ 137 137 + 138 138 + async getImportStatus() { 139 139 + if (this.localLycan) { 140 140 + return await this.localLycan.getRequest('blue.feeds.lycan.getImportStatus', { user: accountAPI.user.did }); 141 141 + } else { 142 142 + return await accountAPI.getRequest('blue.feeds.lycan.getImportStatus', null, { 143 143 + headers: { 'atproto-proxy': this.lycanAddress } 144 144 + }); 145 145 + } 146 146 + } 147 147 + 148 148 + /** @param {json} info */ 149 149 + 150 150 + showImportStatus(info) { 151 151 + console.log(info); 152 152 + 153 153 + if (!info.status) { 154 154 + this.showImportError("Error checking import status"); 155 155 + return; 156 156 + } 157 157 + 158 158 + this.lycanImportStatus = info.status; 159 159 + 160 160 + if (info.status == 'not_started') { 161 161 + this.lycanImportSection.style.display = 'block'; 162 162 + this.lycanImportForm.style.display = 'block'; 163 163 + this.importProgress.style.display = 'none'; 164 164 + this.searchField.disabled = true; 165 165 + 166 166 + this.stopImportTimer(); 167 167 + } else if (info.status == 'in_progress' || info.status == 'scheduled' || info.status == 'requested') { 168 168 + this.lycanImportSection.style.display = 'block'; 169 169 + this.lycanImportForm.style.display = 'none'; 170 170 + this.importProgress.style.display = 'block'; 171 171 + this.searchField.disabled = true; 172 172 + 173 173 + this.showImportProgress(info); 174 174 + this.startImportTimer(); 175 175 + } else if (info.status == 'finished') { 176 176 + this.lycanImportForm.style.display = 'none'; 177 177 + this.importProgress.style.display = 'block'; 178 178 + this.searchField.disabled = false; 179 179 + 180 180 + this.showImportProgress({ status: 'finished', progress: 1.0 }); 181 181 + this.stopImportTimer(); 182 182 + } else { 183 183 + this.showImportError("Error checking import status"); 184 184 + this.stopImportTimer(); 185 185 + } 186 186 + } 187 187 + 188 188 + /** @param {json} info */ 189 189 + 190 190 + showImportProgress(info) { 191 191 + let progress = Math.max(0, Math.min(info.progress || 0)); 192 192 + this.importProgressBar.value = progress; 193 193 + this.importProgressBar.style.display = 'inline'; 194 194 + 195 195 + let percent = Math.round(progress * 100); 196 196 + this.importStatusPosition.innerText = `${percent}%`; 197 197 + 198 198 + if (info.progress == 1.0) { 199 199 + this.importStatusLabel.innerText = `Import complete ✓`; 200 200 + } else if (info.position) { 201 201 + let date = new Date(info.position).toLocaleString(window.dateLocale, { day: 'numeric', month: 'short', year: 'numeric' }); 202 202 + this.importStatusLabel.innerText = `Downloaded data until: ${date}`; 203 203 + } else if (info.status == 'requested') { 204 204 + this.importStatusLabel.innerText = 'Requesting import…'; 205 205 + } else { 206 206 + this.importStatusLabel.innerText = 'Import started…'; 207 207 + } 208 208 + } 209 209 + 210 210 + /** @param {string} message */ 211 211 + 212 212 + showImportError(message) { 213 213 + this.lycanImportSection.style.display = 'block'; 214 214 + this.lycanImportForm.style.display = 'none'; 215 215 + this.importProgress.style.display = 'block'; 216 216 + this.searchField.disabled = true; 217 217 + 218 218 + this.importStatusLabel.innerText = message; 219 219 + this.stopImportTimer(); 220 220 + } 221 221 + 222 222 + startImportTimer() { 223 223 + if (this.importTimer) { 224 224 + return; 225 225 + } 226 226 + 227 227 + this.importTimer = setInterval(() => { 228 228 + this.checkLycanImportStatus(); 229 229 + }, 3000); 230 230 + } 231 231 + 232 232 + stopImportTimer() { 233 233 + if (this.importTimer) { 234 234 + clearInterval(this.importTimer); 235 235 + this.importTimer = undefined; 236 236 + } 237 237 + } 238 238 + 239 239 + /** @returns {Promise<void>} */ 240 240 + 241 241 + async startLycanImport() { 242 242 + this.showImportStatus({ status: 'requested' }); 243 243 + 244 244 + try { 245 245 + if (this.localLycan) { 246 246 + await this.localLycan.postRequest('blue.feeds.lycan.startImport', { 247 247 + user: accountAPI.user.did 248 248 + }); 249 249 + } else { 250 250 + await accountAPI.postRequest('blue.feeds.lycan.startImport', null, { 251 251 + headers: { 'atproto-proxy': this.lycanAddress } 252 252 + }); 253 253 + } 254 254 + 255 255 + this.startImportTimer(); 256 256 + } catch (err) { 257 257 + console.error('Failed to start Lycan import', err); 258 258 + this.showImportError(`Import failed: ${err}`); 259 259 + } 59 260 } 60 261 61 262 /** @returns {Promise<void>} */ ··· 90 291 let daysBack; 91 292 92 293 if (last) { 93 93 - let lastTimestamp = last.reason ? last.reason.indexedAt : last.post.record.createdAt; 94 94 - let lastDate = Date.parse(lastTimestamp); 294 294 + let lastDate = feedPostTime(last); 95 295 daysBack = Math.round((startTime - lastDate) / 86400 / 1000); 96 296 } else { 97 297 daysBack = 0; 98 298 } 99 299 100 100 - this.timelinePosts = timeline.map(x => Post.parseFeedPost(x)); 300 300 + this.timelinePosts = timeline; 101 301 102 302 this.archiveStatus.innerText = "Timeline archive fetched: " + ((daysBack == 1) ? '1 day' : `${daysBack} days`); 103 303 this.searchLine.style.display = 'block'; ··· 106 306 this.progressBar.style.display = 'none'; 107 307 this.fetchStartTime = undefined; 108 308 } 309 309 + 310 310 + /** @param {string} query */ 109 311 110 312 searchInTimeline(query) { 111 313 this.results.innerHTML = ''; ··· 114 316 return; 115 317 } 116 318 117 117 - let matching = this.timelinePosts.filter(x => x.lowercaseText.includes(query)); 319 319 + let matching = this.timelinePosts 320 320 + .filter(x => x.post.record.text.toLowerCase().includes(query)) 321 321 + .map(x => Post.parseFeedPost(x)); 118 322 119 323 for (let post of matching) { 120 324 let postView = new PostComponent(post, 'feed').buildElement(); ··· 122 326 } 123 327 } 124 328 329 329 + /** @param {string} query */ 330 330 + 331 331 + searchInLycan(query) { 332 332 + if (query.length == 0 || this.lycanImportStatus != 'finished') { 333 333 + return; 334 334 + } 335 335 + 336 336 + this.results.innerHTML = ''; 337 337 + this.lycanImportSection.style.display = 'none'; 338 338 + 339 339 + let collection = this.searchForm.elements['collection'].value; 340 340 + 341 341 + let loading = $tag('p', { text: "..." }); 342 342 + this.results.append(loading); 343 343 + 344 344 + let isLoading = false; 345 345 + let firstPageLoaded = false; 346 346 + let cursor; 347 347 + let finished = false; 348 348 + 349 349 + Paginator.loadInPages(async () => { 350 350 + if (isLoading || finished) { return; } 351 351 + isLoading = true; 352 352 + 353 353 + let response; 354 354 + 355 355 + if (this.localLycan) { 356 356 + let params = { collection, query, user: accountAPI.user.did }; 357 357 + if (cursor) params.cursor = cursor; 358 358 + 359 359 + response = await this.localLycan.getRequest('blue.feeds.lycan.searchPosts', params); 360 360 + } else { 361 361 + let params = { collection, query }; 362 362 + if (cursor) params.cursor = cursor; 363 363 + 364 364 + response = await accountAPI.getRequest('blue.feeds.lycan.searchPosts', params, { 365 365 + headers: { 'atproto-proxy': this.lycanAddress } 366 366 + }); 367 367 + } 368 368 + 369 369 + if (response.posts.length == 0) { 370 370 + let p = $tag('p.results-end', { text: firstPageLoaded ? "No more results." : "No results." }); 371 371 + loading.remove(); 372 372 + this.results.append(p); 373 373 + 374 374 + isLoading = false; 375 375 + finished = true; 376 376 + return; 377 377 + } 378 378 + 379 379 + let records = await accountAPI.loadPosts(response.posts); 380 380 + let posts = records.map(x => new Post(x)); 381 381 + 382 382 + if (!firstPageLoaded) { 383 383 + loading.remove(); 384 384 + firstPageLoaded = true; 385 385 + } 386 386 + 387 387 + for (let post of posts) { 388 388 + let component = new PostComponent(post, 'feed'); 389 389 + let postView = component.buildElement(); 390 390 + this.results.appendChild(postView); 391 391 + 392 392 + component.highlightSearchResults(response.terms); 393 393 + } 394 394 + 395 395 + isLoading = false; 396 396 + cursor = response.cursor; 397 397 + 398 398 + if (!cursor) { 399 399 + finished = true; 400 400 + this.results.append("No more results."); 401 401 + } 402 402 + }); 403 403 + } 404 404 + 125 405 /** @param {json[]} dataPage, @param {number} startTime */ 126 406 127 407 updateProgress(dataPage, startTime) { ··· 129 409 130 410 if (!last) { return } 131 411 132 132 - let lastTimestamp = last.reason ? last.reason.indexedAt : last.post.record.createdAt; 133 133 - let lastDate = Date.parse(lastTimestamp); 412 412 + let lastDate = feedPostTime(last); 134 413 let daysBack = (startTime - lastDate) / 86400 / 1000; 135 414 136 136 - this.progressBar.value = daysBack; 415 415 + this.progressBar.value = daysBack; 137 416 } 138 417 139 418 stopFetch() {

+5 -19

skythread.js

··· 188 188 } 189 189 } 190 190 191 191 - function toggleLoginInfo(event) { 191 191 + function toggleLoginInfo() { 192 192 $id('login').classList.toggle('expanded'); 193 193 } 194 194 ··· 304 304 } 305 305 } 306 306 307 307 + /** @param {string} page */ 308 308 + 307 309 function openPage(page) { 308 310 if (!accountAPI.isLoggedIn) { 309 311 showDialog(loginDialog); ··· 339 341 let finished = false; 340 342 let cursor; 341 343 342 342 - loadInPages(() => { 344 344 + Paginator.loadInPages(() => { 343 345 if (isLoading || finished) { return; } 344 346 isLoading = true; 345 347 ··· 387 389 let cursor; 388 390 let finished = false; 389 391 390 390 - loadInPages(() => { 392 392 + Paginator.loadInPages(() => { 391 393 if (isLoading || finished) { return; } 392 394 isLoading = true; 393 395 ··· 438 440 }); 439 441 }); 440 442 } 441 441 - 442 442 - /** @param {Function} callback */ 443 443 - 444 444 - function loadInPages(callback) { 445 445 - let loadIfNeeded = () => { 446 446 - if (window.pageYOffset + window.innerHeight > document.body.offsetHeight - 500) { 447 447 - callback(loadIfNeeded); 448 448 - } 449 449 - }; 450 450 - 451 451 - callback(loadIfNeeded); 452 452 - 453 453 - document.addEventListener('scroll', loadIfNeeded); 454 454 - const resizeObserver = new ResizeObserver(loadIfNeeded); 455 455 - resizeObserver.observe(document.body); 456 456 - }

+279 -9

style.css

··· 127 127 padding: 6px 11px; 128 128 } 129 129 130 130 - #account_menu li a { 130 130 + #account_menu li a[data-action] { 131 131 display: inline-block; 132 132 color: #333; 133 133 font-size: 11pt; ··· 138 138 background-color: hsla(210, 100%, 4%, 0.12); 139 139 } 140 140 141 141 - #account_menu li a:hover { 141 141 + #account_menu li a[data-action]:hover { 142 142 background-color: hsla(210, 100%, 4%, 0.2); 143 143 text-decoration: none; 144 144 + } 145 145 + 146 146 + #account_menu li:not(.link) + li.link { 147 147 + margin-top: 16px; 148 148 + padding-top: 10px; 149 149 + border-top: 1px solid #ccc; 150 150 + } 151 151 + 152 152 + #account_menu li.link { 153 153 + margin-top: 8px; 154 154 + margin-left: 2px; 155 155 + } 156 156 + 157 157 + #account_menu li.link a { 158 158 + font-size: 11pt; 159 159 + color: #333; 144 160 } 145 161 146 162 #account_menu li .check { ··· 486 502 margin-top: 18px; 487 503 } 488 504 505 505 + .post .body .highlight { 506 506 + background-color: rgba(255, 255, 0, 0.75); 507 507 + padding: 1px 2px; 508 508 + margin-left: -1px; 509 509 + margin-right: -1px; 510 510 + } 511 511 + 489 512 .post .quote-embed { 490 513 border: 1px solid #ddd; 491 514 border-radius: 8px; ··· 640 663 color: #aaa; 641 664 } 642 665 666 666 + .post a.fedi-link { 667 667 + display: inline-block; 668 668 + margin-bottom: 6px; 669 669 + margin-top: 2px; 670 670 + } 671 671 + 672 672 + .post a.fedi-link:hover { 673 673 + text-decoration: none; 674 674 + } 675 675 + 676 676 + .post a.fedi-link > div { 677 677 + border: 1px solid #d0d0d0; 678 678 + border-radius: 8px; 679 679 + padding: 5px 9px; 680 680 + color: #555; 681 681 + font-size: 10pt; 682 682 + } 683 683 + 684 684 + .post a.fedi-link i { 685 685 + margin-right: 3px; 686 686 + } 687 687 + 688 688 + .post a.fedi-link:hover > div { 689 689 + background-color: #f6f7f8; 690 690 + border: 1px solid #c8c8c8; 691 691 + } 692 692 + 643 693 .post div.gif img { 644 694 user-select: none; 645 695 -webkit-user-select: none; ··· 780 830 781 831 #posting_stats_page .user-choice { 782 832 display: none; 833 833 + position: relative; 783 834 } 784 835 785 785 - #posting_stats_page .user-choice textarea { 786 786 - width: 250px; 787 787 - height: 100px; 836 836 + #posting_stats_page .user-choice input { 837 837 + width: 260px; 838 838 + font-size: 11pt; 839 839 + } 840 840 + 841 841 + #posting_stats_page .user-choice .autocomplete { 842 842 + display: none; 843 843 + position: absolute; 844 844 + left: 0; 845 845 + top: 0; 846 846 + margin-top: 4px; 847 847 + width: 350px; 848 848 + max-height: 250px; 849 849 + overflow-y: auto; 850 850 + background-color: white; 851 851 + border: 1px solid #ccc; 852 852 + z-index: 10; 853 853 + } 854 854 + 855 855 + #posting_stats_page .user-choice .selected-users { 856 856 + width: 275px; 857 857 + height: 150px; 858 858 + overflow-y: auto; 859 859 + border: 1px solid #aaa; 860 860 + padding: 4px; 861 861 + margin-top: 20px; 862 862 + } 863 863 + 864 864 + #posting_stats_page .user-choice .user-row { 865 865 + position: relative; 866 866 + padding: 2px 4px 2px 37px; 867 867 + cursor: pointer; 868 868 + } 869 869 + 870 870 + #posting_stats_page .user-choice .user-row .avatar { 871 871 + position: absolute; 872 872 + left: 6px; 873 873 + top: 8px; 874 874 + width: 24px; 875 875 + border-radius: 12px; 876 876 + } 877 877 + 878 878 + #posting_stats_page .user-choice .user-row span { 879 879 + display: block; 880 880 + overflow-x: hidden; 881 881 + text-overflow: ellipsis; 882 882 + } 883 883 + 884 884 + #posting_stats_page .user-choice .user-row .name { 885 885 + font-size: 11pt; 886 886 + margin-top: 1px; 887 887 + margin-bottom: 1px; 888 888 + } 889 889 + 890 890 + #posting_stats_page .user-choice .user-row .handle { 788 891 font-size: 10pt; 892 892 + margin-bottom: 2px; 893 893 + color: #666; 894 894 + } 895 895 + 896 896 + #posting_stats_page .user-choice .autocomplete .user-row { 897 897 + cursor: pointer; 898 898 + } 899 899 + 900 900 + #posting_stats_page .user-choice .autocomplete .user-row.hover { 901 901 + background-color: hsl(207, 100%, 85%); 902 902 + } 903 903 + 904 904 + #posting_stats_page .user-choice .selected-users .user-row span { 905 905 + padding-right: 14px; 906 906 + } 907 907 + 908 908 + #posting_stats_page .user-choice .selected-users .user-row .remove { 909 909 + position: absolute; 910 910 + right: 4px; 911 911 + top: 11px; 912 912 + padding: 0px 4px; 913 913 + color: #333; 914 914 + line-height: 17px; 915 915 + } 916 916 + 917 917 + #posting_stats_page .user-choice .selected-users .user-row .remove:hover { 918 918 + text-decoration: none; 919 919 + background-color: #ddd; 920 920 + border-radius: 8px; 789 921 } 790 922 791 923 #posting_stats_page .scan-info { ··· 837 969 838 970 #posting_stats_page .scan-result .avatar { 839 971 width: 24px; 972 972 + height: 24px; 840 973 border-radius: 14px; 841 974 vertical-align: middle; 842 975 margin-right: 2px; 843 843 - padding: 2px; 976 976 + padding: 2px; 844 977 } 845 978 846 979 #posting_stats_page .scan-result td.no { ··· 912 1045 913 1046 #like_stats_page .scan-result .avatar { 914 1047 width: 24px; 1048 1048 + height: 24px; 915 1049 border-radius: 14px; 916 1050 vertical-align: middle; 917 1051 margin-right: 2px; 918 918 - padding: 2px; 1052 1052 + padding: 2px; 919 1053 } 920 1054 921 1055 #private_search_page { ··· 952 1086 margin-left: 8px; 953 1087 } 954 1088 1089 1089 + #private_search_page .search-collections label { 1090 1090 + vertical-align: middle; 1091 1091 + } 1092 1092 + 1093 1093 + #private_search_page .lycan-import { 1094 1094 + display: none; 1095 1095 + 1096 1096 + margin-top: 30px; 1097 1097 + border-top: 1px solid #ccc; 1098 1098 + padding-top: 5px; 1099 1099 + } 1100 1100 + 1101 1101 + #private_search_page .lycan-import form p { 1102 1102 + line-height: 135%; 1103 1103 + } 1104 1104 + 1105 1105 + #private_search_page .lycan-import .import-progress progress { 1106 1106 + margin-left: 0; 1107 1107 + margin-right: 6px; 1108 1108 + } 1109 1109 + 1110 1110 + #private_search_page .lycan-import .import-progress progress + output { 1111 1111 + font-size: 11pt; 1112 1112 + } 1113 1113 + 1114 1114 + #private_search_page .results { 1115 1115 + margin-top: 30px; 1116 1116 + } 1117 1117 + 1118 1118 + #private_search_page .results > .post { 1119 1119 + margin-left: -15px; 1120 1120 + padding-left: 15px; 1121 1121 + border-bottom: 1px solid #ddd; 1122 1122 + padding-bottom: 10px; 1123 1123 + margin-top: 24px; 1124 1124 + } 1125 1125 + 1126 1126 + #private_search_page .results-end { 1127 1127 + font-size: 12pt; 1128 1128 + color: #333; 1129 1129 + } 1130 1130 + 1131 1131 + #private_search_page .post + .results-end { 1132 1132 + font-size: 11pt; 1133 1133 + } 1134 1134 + 955 1135 @media (prefers-color-scheme: dark) { 956 1136 body { 957 1137 background-color: rgb(39, 39, 37); ··· 976 1156 977 1157 #search form input { 978 1158 background-color: transparent; 1159 1159 + } 1160 1160 + 1161 1161 + #account.active { 1162 1162 + color: #333; 979 1163 } 980 1164 981 1165 #account_menu { ··· 983 1167 border-color: #ccc; 984 1168 } 985 1169 986 986 - #account_menu li a { 1170 1170 + #account_menu li a[data-action] { 987 1171 color: #333; 988 1172 border-color: #bbb; 989 1173 background-color: hsla(210, 100%, 4%, 0.12); 990 1174 } 991 1175 992 992 - #account_menu li a:hover { 1176 1176 + #account_menu li a[data-action]:hover { 993 1177 background-color: hsla(210, 100%, 4%, 0.2); 994 1178 } 995 1179 ··· 1071 1255 color: #888; 1072 1256 } 1073 1257 1258 1258 + .post .body .highlight { 1259 1259 + background-color: rgba(255, 255, 0, 0.35); 1260 1260 + } 1261 1261 + 1074 1262 .post .quote-embed { 1075 1263 background-color: #303030; 1076 1264 border-color: #606060; ··· 1120 1308 color: #ff7070; 1121 1309 } 1122 1310 1311 1311 + .post a.link-card > div { 1312 1312 + background-color: #303030; 1313 1313 + border-color: #606060; 1314 1314 + } 1315 1315 + 1316 1316 + .post a.link-card:hover > div { 1317 1317 + background-color: #383838; 1318 1318 + border-color: #707070; 1319 1319 + } 1320 1320 + 1321 1321 + .post a.link-card p.domain { 1322 1322 + color: #666; 1323 1323 + } 1324 1324 + 1325 1325 + .post a.link-card h2 { 1326 1326 + color: #ccc; 1327 1327 + } 1328 1328 + 1329 1329 + .post a.link-card p.description { 1330 1330 + color: #888; 1331 1331 + } 1332 1332 + 1333 1333 + .post a.link-card.record .handle { 1334 1334 + color: #666; 1335 1335 + } 1336 1336 + 1337 1337 + .post a.link-card.record .avatar { 1338 1338 + border-color: #888; 1339 1339 + } 1340 1340 + 1341 1341 + .post a.link-card.record .stats i.fa-heart:hover { 1342 1342 + color: #eee; 1343 1343 + } 1344 1344 + 1345 1345 + .post a.fedi-link > div { 1346 1346 + border-color: #606060; 1347 1347 + color: #909090; 1348 1348 + } 1349 1349 + 1350 1350 + .post a.fedi-link:hover > div { 1351 1351 + background-color: #444; 1352 1352 + border-color: #909090; 1353 1353 + } 1354 1354 + 1123 1355 #posting_stats_page input:disabled + label { 1124 1356 color: #777; 1125 1357 } 1126 1358 1359 1359 + #posting_stats_page .user-choice .autocomplete { 1360 1360 + background-color: hsl(210, 5%, 18%); 1361 1361 + border-color: #4b4b4b; 1362 1362 + } 1363 1363 + 1364 1364 + #posting_stats_page .user-choice .selected-users { 1365 1365 + border-color: #666; 1366 1366 + } 1367 1367 + 1368 1368 + #posting_stats_page .user-choice .user-row .handle { 1369 1369 + color: #888; 1370 1370 + } 1371 1371 + 1372 1372 + #posting_stats_page .user-choice .autocomplete .user-row.hover { 1373 1373 + background-color: hsl(207, 90%, 25%); 1374 1374 + } 1375 1375 + 1376 1376 + #posting_stats_page .user-choice .selected-users .user-row .remove { 1377 1377 + color: #aaa; 1378 1378 + } 1379 1379 + 1380 1380 + #posting_stats_page .user-choice .selected-users .user-row .remove:hover { 1381 1381 + background-color: #555; 1382 1382 + color: #bbb; 1383 1383 + } 1384 1384 + 1127 1385 #posting_stats_page .scan-result, #posting_stats_page .scan-result td, #posting_stats_page .scan-result th { 1128 1386 border-color: #888; 1129 1387 } ··· 1146 1404 1147 1405 #private_search_page .search-query { 1148 1406 border: 1px solid #666; 1407 1407 + } 1408 1408 + 1409 1409 + #private_search_page .lycan-import { 1410 1410 + border-top-color: #888; 1411 1411 + } 1412 1412 + 1413 1413 + #private_search_page .results-end { 1414 1414 + color: #888; 1415 1415 + } 1416 1416 + 1417 1417 + #private_search_page .results > .post { 1418 1418 + border-bottom: 1px solid #555; 1149 1419 } 1150 1420 }

+1 -1

test/ts_test.js

··· 19 19 /** @type {never} */ let x3 = html; 20 20 21 21 document.addEventListener('click', (e) => { 22 22 - let target = $(e.target); 22 22 + let target = $(e.target); 23 23 /** @type {never} */ let x4 = target; 24 24 }); 25 25

+10 -1

thread_page.js

··· 23 23 } 24 24 25 25 return p; 26 26 - } 26 26 + } 27 27 28 28 /** @param {string} url, @returns {Promise<void>} */ 29 29 ··· 64 64 65 65 if (root.parent) { 66 66 let p = this.buildParentLink(root.parent); 67 67 + $id('thread').appendChild(p); 68 68 + } else if (root.parentReference) { 69 69 + let { repo, rkey } = atURI(root.parentReference.uri); 70 70 + let url = linkToPostById(repo, rkey); 71 71 + 72 72 + let handle = api.findHandleByDid(repo); 73 73 + let link = handle ? `See parent post (@${handle})` : "See parent post"; 74 74 + 75 75 + let p = $tag('p.back', { html: `<i class="fa-solid fa-reply"></i><a href="${url}">${link}</a>` }); 67 76 $id('thread').appendChild(p); 68 77 } 69 78 }

+2

types.d.ts

··· 20 20 declare var notificationsPage: NotificationsPage; 21 21 declare var privateSearchPage: PrivateSearchPage; 22 22 23 23 + declare var Paginator: PaginatorType; 24 24 + 23 25 type json = Record<string, any>; 24 26 25 27 function $tag(tag: string): HTMLElement;

+41

utils.js

··· 18 18 } 19 19 20 20 /** 21 21 + * @typedef {object} PaginatorType 22 22 + * @property {(callback: (boolean) => void) => void} loadInPages 23 23 + * @property {(() => void)=} scrollHandler 24 24 + * @property {ResizeObserver=} resizeObserver 25 25 + */ 26 26 + 27 27 + window.Paginator = { 28 28 + loadInPages(callback) { 29 29 + if (this.scrollHandler) { 30 30 + document.removeEventListener('scroll', this.scrollHandler); 31 31 + } 32 32 + 33 33 + if (this.resizeObserver) { 34 34 + this.resizeObserver.disconnect(); 35 35 + } 36 36 + 37 37 + let loadIfNeeded = () => { 38 38 + if (window.pageYOffset + window.innerHeight > document.body.offsetHeight - 500) { 39 39 + callback(loadIfNeeded); 40 40 + } 41 41 + }; 42 42 + 43 43 + callback(loadIfNeeded); 44 44 + 45 45 + document.addEventListener('scroll', loadIfNeeded); 46 46 + const resizeObserver = new ResizeObserver(loadIfNeeded); 47 47 + resizeObserver.observe(document.body); 48 48 + 49 49 + this.scrollHandler = loadIfNeeded; 50 50 + this.resizeObserver = resizeObserver; 51 51 + } 52 52 + }; 53 53 + 54 54 + /** 21 55 * @template T 22 56 * @param {string} tag 23 57 * @param {string | object} params ··· 96 130 return html.replace(/&/g, '&amp;') 97 131 .replace(/</g, '&lt;') 98 132 .replace(/>/g,'&gt;'); 133 133 + } 134 134 + 135 135 + /** @param {json} feedPost, @returns {number} */ 136 136 + 137 137 + function feedPostTime(feedPost) { 138 138 + let timestamp = feedPost.reason ? feedPost.reason.indexedAt : feedPost.post.record.createdAt; 139 139 + return Date.parse(timestamp); 99 140 } 100 141 101 142 /** @param {string} html, @returns {string} */