+1 -1

package.json

Reviewed

··· 1 1 { 2 2 "name": "impro", 3 3 - "version": "0.17.189", 3 3 + "version": "0.17.190", 4 4 "type": "module", 5 5 "scripts": { 6 6 "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve",

+47 -27

src/css/style.css

Reviewed

··· 552 552 } 553 553 } 554 554 555 555 - .inbox-button { 556 556 - position: relative; 555 555 + .header-icon-button { 557 556 display: flex; 558 557 align-items: center; 559 558 justify-content: center; 559 559 + background: transparent; 560 560 + border: none; 561 561 + padding: 0; 560 562 cursor: pointer; 561 563 color: var(--text-color-muted); 562 562 - height: 30px; 563 563 - width: 30px; 564 564 border-radius: var(--icon-button-border-radius); 565 565 transition: background-color 0.2s; 566 566 } 567 567 568 568 @media (hover: hover) { 569 569 - .inbox-button:hover { 569 569 + .header-icon-button:not(:disabled):hover { 570 570 background-color: var(--back-button-hover-color); 571 571 } 572 572 } 573 573 574 574 + .header-icon-button:disabled { 575 575 + opacity: 0.5; 576 576 + cursor: default; 577 577 + } 578 578 + 579 579 + .inbox-button { 580 580 + position: relative; 581 581 + height: 30px; 582 582 + width: 30px; 583 583 + } 584 584 + 574 585 .inbox-button .icon { 575 586 width: 24px; 576 587 height: 24px; 577 588 } 578 589 579 590 .feeds-button { 580 580 - display: flex; 581 581 - align-items: center; 582 582 - justify-content: center; 583 583 - cursor: pointer; 584 584 - color: var(--text-color-muted); 585 591 height: 30px; 586 592 width: 30px; 587 587 - border-radius: var(--icon-button-border-radius); 588 588 - transition: background-color 0.2s; 589 589 - } 590 590 - 591 591 - @media (hover: hover) { 592 592 - .feeds-button:hover { 593 593 - background-color: var(--back-button-hover-color); 594 594 - } 595 593 } 596 594 597 595 .feeds-button .icon { ··· 5617 5615 .feeds-list-item { 5618 5616 display: flex; 5619 5617 align-items: flex-start; 5620 5620 - gap: 12px; 5621 5618 padding: 16px; 5622 5619 border-bottom: var(--hair) solid var(--post-border-color); 5623 5620 text-decoration: none; ··· 5648 5645 .feeds-list-item-content { 5649 5646 flex: 1; 5650 5647 min-width: 0; 5648 5648 + padding-left: 12px; 5651 5649 } 5652 5650 5653 5651 .feeds-list-item-title { ··· 5660 5658 .feeds-list-item-creator { 5661 5659 font-size: 14px; 5662 5660 color: var(--text-color-muted); 5663 5663 - margin-bottom: 6px; 5664 5661 white-space: nowrap; 5665 5662 overflow: hidden; 5666 5663 text-overflow: ellipsis; ··· 5689 5686 user-select: none; 5690 5687 } 5691 5688 5689 5689 + .feeds-list-item-unpin-button { 5690 5690 + flex-shrink: 0; 5691 5691 + width: 40px; 5692 5692 + height: 40px; 5693 5693 + display: flex; 5694 5694 + align-items: center; 5695 5695 + justify-content: center; 5696 5696 + background: transparent; 5697 5697 + border: none; 5698 5698 + padding: 0; 5699 5699 + color: var(--highlight-color); 5700 5700 + cursor: pointer; 5701 5701 + } 5702 5702 + 5703 5703 + .feeds-list-item-unpin-button:disabled { 5704 5704 + cursor: default; 5705 5705 + opacity: 0.5; 5706 5706 + } 5707 5707 + 5708 5708 + .feeds-list-item-unpin-button svg { 5709 5709 + width: 20px; 5710 5710 + height: 20px; 5711 5711 + } 5712 5712 + 5692 5713 .feeds-list-item-drag-handle:active { 5693 5714 cursor: grabbing; 5694 5715 } ··· 5728 5749 } 5729 5750 5730 5751 .header-edit-button { 5731 5731 - background: transparent; 5732 5732 - border: none; 5733 5752 padding: 8px; 5734 5734 - display: flex; 5735 5735 - align-items: center; 5736 5736 - justify-content: center; 5737 5737 - cursor: pointer; 5738 5738 - color: var(--text-color-muted); 5739 5753 } 5740 5754 5741 5755 .header-edit-button svg { 5742 5756 width: 24px; 5743 5757 height: 24px; 5758 5758 + } 5759 5759 + 5760 5760 + .new-chat-button:disabled { 5761 5761 + opacity: 0.5; 5762 5762 + cursor: default; 5744 5763 } 5745 5764 5746 5765 .header svg { ··· 5853 5872 5854 5873 .feeds-list-item-skeleton { 5855 5874 pointer-events: none; 5875 5875 + min-height: 75px; 5856 5876 } 5857 5877 5858 5878 .feeds-list-item-skeleton-avatar {

+1

src/img/icons/custom/hashtag-solid.svg

Reviewed

··· 1 1 + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M4 8h16M4 16h16M9 4 7 20M17 4l-2 16"/></svg>

+6 -9

src/js/dataLayer/mutations.js

Reviewed

··· 435 435 } 436 436 } 437 437 438 438 - async reorderPinnedItems(orderedValues) { 438 438 + async setPinnedItems(values) { 439 439 const preferences = this.preferencesProvider.requirePreferences(); 440 440 - const newPreferences = preferences.reorderPinnedItems(orderedValues); 440 440 + const newPreferences = preferences.setPinnedItems(values); 441 441 try { 442 442 await this.preferencesProvider.updatePreferences(newPreferences); 443 443 } catch (error) { ··· 448 448 // Update pinned items in memory 449 449 const pinnedItems = untrack(() => this.dataStore.$pinnedItems.get()); 450 450 if (pinnedItems) { 451 451 - const indexOf = (item) => { 452 452 - const idx = orderedValues.indexOf(valueForPinnedItem(item)); 453 453 - return idx === -1 ? orderedValues.length : idx; 454 454 - }; 455 455 - const reordered = [...pinnedItems].sort( 456 456 - (a, b) => indexOf(a) - indexOf(b), 451 451 + const byValue = new Map( 452 452 + pinnedItems.map((item) => [valueForPinnedItem(item), item]), 457 453 ); 458 458 - this.dataStore.$pinnedItems.set(reordered); 454 454 + const next = values.map((value) => byValue.get(value)).filter(Boolean); 455 455 + this.dataStore.$pinnedItems.set(next); 459 456 } 460 457 } 461 458

+11 -6

src/js/preferences.js

Reviewed

··· 135 135 return clone; 136 136 } 137 137 138 138 - reorderPinnedItems(orderedValues) { 138 138 + setPinnedItems(values) { 139 139 const clone = this.clone(); 140 140 const savedFeedsPreference = Preferences.getSavedFeedsPreference(clone.obj); 141 141 if (!savedFeedsPreference) { 142 142 throw new Error("Saved feeds preference not found"); 143 143 } 144 144 + const valueSet = new Set(values); 145 145 + for (const item of savedFeedsPreference.items) { 146 146 + item.pinned = valueSet.has(item.value); 147 147 + } 144 148 const byValue = new Map( 145 149 savedFeedsPreference.items.map((item) => [item.value, item]), 146 150 ); 147 147 - const reordered = orderedValues 148 148 - .map((value) => byValue.get(value)) 149 149 - .filter((item) => item && item.pinned); 150 150 - const unpinned = savedFeedsPreference.items.filter((item) => !item.pinned); 151 151 - savedFeedsPreference.items = [...reordered, ...unpinned]; 151 151 + const reordered = values.map((value) => byValue.get(value)).filter(Boolean); 152 152 + const reorderedSet = new Set(reordered); 153 153 + const rest = savedFeedsPreference.items.filter( 154 154 + (item) => !reorderedSet.has(item), 155 155 + ); 156 156 + savedFeedsPreference.items = [...reordered, ...rest]; 152 157 return clone; 153 158 } 154 159

+89

src/js/signals.js

Reviewed

··· 310 310 } 311 311 } 312 312 313 313 + export class SignalArray { 314 314 + __debugName = "<SignalArray>"; 315 315 + 316 316 + #collection = new Signal.State(null, { equals: () => false }); 317 317 + #array; 318 318 + 319 319 + constructor(values = []) { 320 320 + this.#array = [...values]; 321 321 + } 322 322 + 323 323 + get length() { 324 324 + this.#collection.get(); 325 325 + return this.#array.length; 326 326 + } 327 327 + 328 328 + at(index) { 329 329 + this.#collection.get(); 330 330 + return this.#array.at(index); 331 331 + } 332 332 + 333 333 + indexOf(value, fromIndex) { 334 334 + this.#collection.get(); 335 335 + return this.#array.indexOf(value, fromIndex); 336 336 + } 337 337 + 338 338 + includes(value, fromIndex) { 339 339 + this.#collection.get(); 340 340 + return this.#array.includes(value, fromIndex); 341 341 + } 342 342 + 343 343 + slice(start, end) { 344 344 + this.#collection.get(); 345 345 + return this.#array.slice(start, end); 346 346 + } 347 347 + 348 348 + map(fn, thisArg) { 349 349 + this.#collection.get(); 350 350 + return this.#array.map(fn, thisArg); 351 351 + } 352 352 + 353 353 + filter(fn, thisArg) { 354 354 + this.#collection.get(); 355 355 + return this.#array.filter(fn, thisArg); 356 356 + } 357 357 + 358 358 + forEach(callback, thisArg) { 359 359 + this.#collection.get(); 360 360 + this.#array.forEach(callback, thisArg); 361 361 + } 362 362 + 363 363 + [Symbol.iterator]() { 364 364 + this.#collection.get(); 365 365 + return this.#array[Symbol.iterator](); 366 366 + } 367 367 + 368 368 + set(index, value) { 369 369 + this.#array[index] = value; 370 370 + this.#collection.set(null); 371 371 + } 372 372 + 373 373 + push(...values) { 374 374 + this.#array.push(...values); 375 375 + this.#collection.set(null); 376 376 + return this.#array.length; 377 377 + } 378 378 + 379 379 + pop() { 380 380 + const value = this.#array.pop(); 381 381 + this.#collection.set(null); 382 382 + return value; 383 383 + } 384 384 + 385 385 + splice(start, deleteCount, ...items) { 386 386 + const removed = this.#array.splice(start, deleteCount, ...items); 387 387 + this.#collection.set(null); 388 388 + return removed; 389 389 + } 390 390 + 391 391 + replace(values) { 392 392 + this.#array = [...values]; 393 393 + this.#collection.set(null); 394 394 + } 395 395 + 396 396 + clear() { 397 397 + this.#array.length = 0; 398 398 + this.#collection.set(null); 399 399 + } 400 400 + } 401 401 + 313 402 export class ComputedMap { 314 403 __debugName = "<ComputedMap>"; 315 404

+2 -2

src/js/templates/icons/feedIcon.template.js src/js/templates/icons/listIcon.template.js

Reviewed

··· 1 1 import { html } from "/js/lib/lit-html.js"; 2 2 import { classnames } from "/js/utils.js"; 3 3 4 4 - export function feedIconTemplate({ filled = false } = {}) { 5 5 - return html`<div class=${classnames("icon feed-icon", { filled })}> 4 4 + export function listIconTemplate({ filled = false } = {}) { 5 5 + return html`<div class=${classnames("icon list-icon", { filled })}> 6 6 ${filled 7 7 ? html`<svg 8 8 xmlns="http://www.w3.org/2000/svg"

+31 -12

src/js/templates/icons/hashtagIcon.template.js

Reviewed

··· 1 1 import { html } from "/js/lib/lit-html.js"; 2 2 + import { classnames } from "/js/utils.js"; 2 3 3 3 - // Source: src/img/icons/custom/hashtag-line.svg 4 4 - export function hashtagIconTemplate() { 5 5 - return html`<div class="icon hashtag-icon"> 6 6 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"> 7 7 - <path 8 8 - stroke="currentColor" 9 9 - stroke-linecap="round" 10 10 - stroke-linejoin="round" 11 11 - stroke-width="2" 12 12 - d="M4 8h16M4 16h16M9 4 7 20M17 4l-2 16" 13 13 - /> 14 14 - </svg> 4 4 + // Source: src/img/icons/custom/hashtag-line.svg, src/img/icons/custom/hashtag-solid.svg 5 5 + export function hashtagIconTemplate({ filled = false } = {}) { 6 6 + return html`<div class=${classnames("icon hashtag-icon", { filled })}> 7 7 + ${filled 8 8 + ? html`<svg 9 9 + xmlns="http://www.w3.org/2000/svg" 10 10 + viewBox="0 0 24 24" 11 11 + fill="none" 12 12 + > 13 13 + <path 14 14 + stroke="currentColor" 15 15 + stroke-linecap="round" 16 16 + stroke-linejoin="round" 17 17 + stroke-width="3" 18 18 + d="M4 8h16M4 16h16M9 4 7 20M17 4l-2 16" 19 19 + /> 20 20 + </svg>` 21 21 + : html`<svg 22 22 + xmlns="http://www.w3.org/2000/svg" 23 23 + viewBox="0 0 24 24" 24 24 + fill="none" 25 25 + > 26 26 + <path 27 27 + stroke="currentColor" 28 28 + stroke-linecap="round" 29 29 + stroke-linejoin="round" 30 30 + stroke-width="2" 31 31 + d="M4 8h16M4 16h16M9 4 7 20M17 4l-2 16" 32 32 + /> 33 33 + </svg>`} 15 34 </div>`; 16 35 }

+2 -2

src/js/templates/sidebar.template.js

Reviewed

··· 12 12 import { chatIconTemplate } from "/js/templates/icons/chatIcon.template.js"; 13 13 import { settingsIconTemplate } from "/js/templates/icons/settingsIcon.template.js"; 14 14 import { notificationsIconTemplate } from "/js/templates/icons/notificationsIcon.template.js"; 15 15 - import { feedIconTemplate } from "/js/templates/icons/feedIcon.template.js"; 15 15 + import { hashtagIconTemplate } from "/js/templates/icons/hashtagIcon.template.js"; 16 16 import { bookmarkIconTemplate } from "/js/templates/icons/bookmarkIcon.template.js"; 17 17 import { avatarTemplate } from "/js/templates/avatar.template.js"; 18 18 import { editIconTemplate } from "/js/templates/icons/editIcon.template.js"; ··· 197 197 }, 198 198 { 199 199 id: "feeds", 200 200 - icon: feedIconTemplate, 200 200 + icon: hashtagIconTemplate, 201 201 label: "Feeds", 202 202 url: "/feeds", 203 203 },

+1 -1

src/js/views/chat.view.js

Reviewed

··· 136 136 function inboxButtonTemplate({ hasUnreadRequests }) { 137 137 return html` 138 138 <a 139 139 - class="inbox-button" 139 139 + class="header-icon-button inbox-button" 140 140 href="/messages/inbox" 141 141 aria-label=${hasUnreadRequests ? "Requests (unread)" : "Requests"} 142 142 data-testid="inbox-button"

+68 -29

src/js/views/feeds.view.js

Reviewed

··· 5 5 import { headerTemplate } from "/js/templates/header.template.js"; 6 6 import { feedGeneratorListItemSkeletonTemplate } from "/js/templates/feedGeneratorListItemSkeleton.template.js"; 7 7 import { menuIconTemplate } from "/js/templates/icons/menuIcon.template.js"; 8 8 + import { pinIconTemplate } from "/js/templates/icons/pinIcon.template.js"; 8 9 import { settingsIconTemplate } from "/js/templates/icons/settingsIcon.template.js"; 9 10 import { homeIconTemplate } from "/js/templates/icons/homeIcon.template.js"; 10 11 import { linkToList, linkToFeed } from "/js/navigation.js"; 11 11 - import { Signal, ReactiveStore } from "/js/signals.js"; 12 12 + import { Signal, ReactiveStore, SignalSet, SignalArray } from "/js/signals.js"; 12 13 import { enableReorder } from "/js/utils.js"; 13 14 import { showToast } from "/js/toasts.js"; 14 15 import { valueForPinnedItem } from "/js/dataHelpers.js"; ··· 19 20 await auth.requireAuth(); 20 21 21 22 const state = new ReactiveStore("feedsView"); 22 22 - state.$draftOrder = new Signal.State(null); 23 23 + state.$draftOrder = new SignalArray(); 24 24 + state.$draftUnpinned = new SignalSet(); 23 25 state.$isEditing = new Signal.State(false); 24 26 state.$isSaving = new Signal.State(false); 25 27 ··· 33 35 34 36 async function handleSave() { 35 37 if (state.$isSaving.get()) return; 36 36 - const draft = state.$draftOrder.get(); 37 37 - if (draft) { 38 38 + const draftOrder = state.$draftOrder; 39 39 + const draftUnpinned = state.$draftUnpinned; 40 40 + if (draftOrder.length > 0 || draftUnpinned.size > 0) { 41 41 + const pinnedItems = dataLayer.derived.$hydratedPinnedItems.get(); 42 42 + if (!pinnedItems) return; 43 43 + const baseOrder = 44 44 + draftOrder.length > 0 45 45 + ? [...draftOrder] 46 46 + : pinnedItems.map(valueForPinnedItem); 47 47 + const nextValues = 48 48 + draftUnpinned.size > 0 49 49 + ? baseOrder.filter((value) => !draftUnpinned.has(value)) 50 50 + : baseOrder; 38 51 state.$isSaving.set(true); 39 52 try { 40 40 - await dataLayer.mutations.reorderPinnedItems(draft); 53 53 + await dataLayer.mutations.setPinnedItems(nextValues); 41 54 } catch { 42 42 - showToast("Couldn't save feed order"); 55 55 + showToast("Couldn't save changes"); 43 56 return; 44 57 } finally { 45 58 state.$isSaving.set(false); 46 59 } 47 60 } 48 48 - state.$draftOrder.set(null); 61 61 + state.$draftOrder.clear(); 62 62 + state.$draftUnpinned.clear(); 49 63 state.$isEditing.set(false); 50 64 } 51 65 52 66 function cancelEditing() { 53 67 if (state.$isSaving.get()) return; 54 54 - state.$draftOrder.set(null); 68 68 + state.$draftOrder.clear(); 69 69 + state.$draftUnpinned.clear(); 55 70 state.$isEditing.set(false); 56 71 } 57 72 73 73 + function editControlsTemplate({ value, isSaving }) { 74 74 + return html`<button 75 75 + class="feeds-list-item-unpin-button" 76 76 + data-testid="feeds-list-item-unpin-button" 77 77 + aria-label="Unpin" 78 78 + ?disabled=${isSaving} 79 79 + @click=${(e) => { 80 80 + e.preventDefault(); 81 81 + e.stopPropagation(); 82 82 + state.$draftUnpinned.add(value); 83 83 + }} 84 84 + > 85 85 + ${pinIconTemplate({ filled: true })} 86 86 + </button> 87 87 + <button 88 88 + class="feeds-list-item-drag-handle" 89 89 + data-testid="feeds-list-item-drag-handle" 90 90 + aria-label="Drag to reorder" 91 91 + ?disabled=${isSaving} 92 92 + > 93 93 + ${menuIconTemplate()} 94 94 + </button>`; 95 95 + } 96 96 + 58 97 function rowTemplate({ item, currentUser, isEditing, isSaving }) { 59 59 - const dragHandle = isEditing 60 60 - ? html`<button 61 61 - class="feeds-list-item-drag-handle" 62 62 - data-testid="feeds-list-item-drag-handle" 63 63 - aria-label="Drag to reorder" 64 64 - ?disabled=${isSaving} 65 65 - > 66 66 - ${menuIconTemplate()} 67 67 - </button>` 68 68 - : ""; 69 98 const value = valueForPinnedItem(item); 99 99 + const editControls = isEditing 100 100 + ? editControlsTemplate({ value, isSaving }) 101 101 + : ""; 70 102 if (item.type === "timeline") { 71 103 return html`<div 72 104 class="feeds-list-item" ··· 80 112 <div class="feeds-list-item-title">Following</div> 81 113 <div class="feeds-list-item-creator">Feed by @bsky.app</div> 82 114 </div> 83 83 - ${dragHandle} 115 115 + ${editControls} 84 116 </div>`; 85 117 } 86 118 if (item.type === "list") { ··· 108 140 </div>` 109 141 : ""} 110 142 </div> 111 111 - ${dragHandle} 143 143 + ${editControls} 112 144 </container-link>`; 113 145 } 114 146 const feedGenerator = item.data; ··· 136 168 </div>` 137 169 : ""} 138 170 </div> 139 139 - ${dragHandle} 171 171 + ${editControls} 140 172 </container-link>`; 141 173 } 142 174 143 175 pageEffect(root, () => { 144 176 const currentUser = dataLayer.derived.$currentUser.get(); 145 177 const pinnedItems = dataLayer.derived.$hydratedPinnedItems.get(); 146 146 - const draftOrder = state.$draftOrder.get(); 178 178 + const draftOrder = state.$draftOrder; 179 179 + const draftUnpinned = state.$draftUnpinned; 147 180 const isEditing = state.$isEditing.get(); 148 181 const isSaving = state.$isSaving.get(); 149 182 ··· 151 184 let persistedOrder = null; 152 185 if (pinnedItems) { 153 186 persistedOrder = pinnedItems.map(valueForPinnedItem); 154 154 - if (draftOrder) { 187 187 + if (draftOrder.length > 0) { 155 188 const byValue = new Map( 156 189 pinnedItems.map((it) => [valueForPinnedItem(it), it]), 157 190 ); ··· 159 192 .map((value) => byValue.get(value)) 160 193 .filter(Boolean); 161 194 } 195 195 + if (draftUnpinned.size > 0) { 196 196 + orderedItems = orderedItems.filter( 197 197 + (it) => !draftUnpinned.has(valueForPinnedItem(it)), 198 198 + ); 199 199 + } 162 200 } 163 201 164 202 const canEdit = (pinnedItems?.length ?? 0) >= 2; ··· 169 207 title: "Feeds", 170 208 subtitle: "", 171 209 rightItemTemplate: () => { 172 172 - if (!canEdit) return null; 173 210 if (isEditing) { 174 211 return html`<div class="header-actions"> 175 212 <button ··· 193 230 </div>`; 194 231 } 195 232 return html`<button 196 196 - class="header-edit-button" 233 233 + class="header-icon-button header-edit-button" 197 234 data-testid="feeds-edit-button" 198 198 - aria-label="Reorder feeds" 235 235 + aria-label="Edit feeds" 199 236 @click=${() => state.$isEditing.set(true)} 237 237 + ?disabled=${!canEdit} 200 238 > 201 239 ${settingsIconTemplate()} 202 240 </button>`; ··· 236 274 const nextOrder = elements.map((el) => el.dataset.pinnedValue); 237 275 const baseline = persistedOrder ?? []; 238 276 if (orderMatches(nextOrder, baseline)) { 239 239 - state.$draftOrder.set(null); 277 277 + state.$draftOrder.clear(); 240 278 } else { 241 241 - state.$draftOrder.set(nextOrder); 279 279 + state.$draftOrder.replace(nextOrder); 242 280 } 243 281 }, 244 282 }); ··· 248 286 }); 249 287 250 288 function resetEditingState() { 251 251 - state.$draftOrder.set(null); 289 289 + state.$draftOrder.clear(); 290 290 + state.$draftUnpinned.clear(); 252 291 state.$isEditing.set(false); 253 292 } 254 293

+1 -1

src/js/views/home.view.js

Reviewed

··· 228 228 onClickMenuButton: () => handleMenuClick(), 229 229 rightItemTemplate: () => html` 230 230 <a 231 231 - class="feeds-button" 231 231 + class="header-icon-button feeds-button" 232 232 href="/feeds" 233 233 aria-label="Feeds" 234 234 data-testid="feeds-button"

+258 -2

tests/e2e/specs/views/feeds.view.test.js

Reviewed

··· 156 156 await page.mouse.up(); 157 157 } 158 158 159 159 - test("gear button is hidden when there is only one pinned item", async ({ 159 159 + test("gear button is disabled when there is only one pinned item", async ({ 160 160 page, 161 161 }) => { 162 162 const mockServer = new MockServer(); ··· 170 170 }); 171 171 await expect( 172 172 feedsView.locator('[data-testid="feeds-edit-button"]'), 173 173 - ).toHaveCount(0); 173 173 + ).toBeDisabled(); 174 174 }); 175 175 176 176 test("drag handles are hidden until entering edit mode via the gear", async ({ ··· 244 244 const feedBRow = feedsView.locator(`[data-pinned-value="${feedB.uri}"]`); 245 245 await dragRow(page, followingRow, feedBRow); 246 246 247 247 + await expect( 248 248 + feedsView.locator(".feeds-list-item").first(), 249 249 + ).toHaveAttribute("data-pinned-value", feedA.uri); 247 250 const titlesAfterDrag = await feedsView 248 251 .locator(".feeds-list-item-title") 249 252 .allTextContents(); ··· 370 373 .allTextContents(); 371 374 expect(titlesAfterCancel).toEqual(["Following", "Feed A", "Feed B"]); 372 375 expect(sawPut).toBe(false); 376 376 + }); 377 377 + 378 378 + test("unpin buttons are hidden until entering edit mode", async ({ 379 379 + page, 380 380 + }) => { 381 381 + const mockServer = new MockServer(); 382 382 + const feedA = createFeedGenerator({ 383 383 + uri: "at://did:plc:a/app.bsky.feed.generator/a", 384 384 + displayName: "Feed A", 385 385 + creatorHandle: "creator-a.bsky.social", 386 386 + }); 387 387 + const feedB = createFeedGenerator({ 388 388 + uri: "at://did:plc:b/app.bsky.feed.generator/b", 389 389 + displayName: "Feed B", 390 390 + creatorHandle: "creator-b.bsky.social", 391 391 + }); 392 392 + mockServer.addFeedGenerators([feedA, feedB]); 393 393 + mockServer.setPinnedFeeds([feedA.uri, feedB.uri]); 394 394 + await mockServer.setup(page); 395 395 + await login(page); 396 396 + await page.goto("/feeds"); 397 397 + 398 398 + const feedsView = page.locator("#feeds-view"); 399 399 + await expect(feedsView.locator(".feeds-list-item")).toHaveCount(3, { 400 400 + timeout: 10000, 401 401 + }); 402 402 + await expect( 403 403 + feedsView.locator('[data-testid="feeds-list-item-unpin-button"]'), 404 404 + ).toHaveCount(0); 405 405 + 406 406 + await feedsView.locator('[data-testid="feeds-edit-button"]').click(); 407 407 + await expect( 408 408 + feedsView.locator('[data-testid="feeds-list-item-unpin-button"]'), 409 409 + ).toHaveCount(3); 410 410 + }); 411 411 + 412 412 + test("clicking a row's unpin button hides it visually without a request", async ({ 413 413 + page, 414 414 + }) => { 415 415 + const mockServer = new MockServer(); 416 416 + const feedA = createFeedGenerator({ 417 417 + uri: "at://did:plc:a/app.bsky.feed.generator/a", 418 418 + displayName: "Feed A", 419 419 + creatorHandle: "creator-a.bsky.social", 420 420 + }); 421 421 + const feedB = createFeedGenerator({ 422 422 + uri: "at://did:plc:b/app.bsky.feed.generator/b", 423 423 + displayName: "Feed B", 424 424 + creatorHandle: "creator-b.bsky.social", 425 425 + }); 426 426 + mockServer.addFeedGenerators([feedA, feedB]); 427 427 + mockServer.setPinnedFeeds([feedA.uri, feedB.uri]); 428 428 + await mockServer.setup(page); 429 429 + await login(page); 430 430 + await page.goto("/feeds"); 431 431 + 432 432 + const feedsView = page.locator("#feeds-view"); 433 433 + await expect(feedsView.locator(".feeds-list-item")).toHaveCount(3, { 434 434 + timeout: 10000, 435 435 + }); 436 436 + 437 437 + let sawPut = false; 438 438 + page.on("request", (req) => { 439 439 + if (req.url().includes("/xrpc/app.bsky.actor.putPreferences")) { 440 440 + sawPut = true; 441 441 + } 442 442 + }); 443 443 + 444 444 + await feedsView.locator('[data-testid="feeds-edit-button"]').click(); 445 445 + 446 446 + const feedARow = feedsView.locator(`[data-pinned-value="${feedA.uri}"]`); 447 447 + await feedARow 448 448 + .locator('[data-testid="feeds-list-item-unpin-button"]') 449 449 + .click(); 450 450 + 451 451 + const titlesAfterUnpin = await feedsView 452 452 + .locator(".feeds-list-item-title") 453 453 + .allTextContents(); 454 454 + expect(titlesAfterUnpin).toEqual(["Following", "Feed B"]); 455 455 + expect(sawPut).toBe(false); 456 456 + }); 457 457 + 458 458 + test("unpin + Save persists via putPreferences and exits edit mode", async ({ 459 459 + page, 460 460 + }) => { 461 461 + const mockServer = new MockServer(); 462 462 + const feedA = createFeedGenerator({ 463 463 + uri: "at://did:plc:a/app.bsky.feed.generator/a", 464 464 + displayName: "Feed A", 465 465 + creatorHandle: "creator-a.bsky.social", 466 466 + }); 467 467 + const feedB = createFeedGenerator({ 468 468 + uri: "at://did:plc:b/app.bsky.feed.generator/b", 469 469 + displayName: "Feed B", 470 470 + creatorHandle: "creator-b.bsky.social", 471 471 + }); 472 472 + mockServer.addFeedGenerators([feedA, feedB]); 473 473 + mockServer.setPinnedFeeds([feedA.uri, feedB.uri]); 474 474 + await mockServer.setup(page); 475 475 + await login(page); 476 476 + await page.goto("/feeds"); 477 477 + 478 478 + const feedsView = page.locator("#feeds-view"); 479 479 + await expect(feedsView.locator(".feeds-list-item")).toHaveCount(3, { 480 480 + timeout: 10000, 481 481 + }); 482 482 + 483 483 + await feedsView.locator('[data-testid="feeds-edit-button"]').click(); 484 484 + 485 485 + const feedARow = feedsView.locator(`[data-pinned-value="${feedA.uri}"]`); 486 486 + await feedARow 487 487 + .locator('[data-testid="feeds-list-item-unpin-button"]') 488 488 + .click(); 489 489 + 490 490 + const putRequest = page.waitForRequest( 491 491 + (req) => 492 492 + req.url().includes("/xrpc/app.bsky.actor.putPreferences") && 493 493 + req.method() === "POST", 494 494 + ); 495 495 + await feedsView.locator('[data-testid="feeds-save-button"]').click(); 496 496 + const request = await putRequest; 497 497 + const body = request.postDataJSON(); 498 498 + const savedFeedsPref = body.preferences.find( 499 499 + (p) => p.$type === "app.bsky.actor.defs#savedFeedsPrefV2", 500 500 + ); 501 501 + const pinnedValues = savedFeedsPref.items 502 502 + .filter((it) => it.pinned) 503 503 + .map((it) => it.value); 504 504 + expect(pinnedValues).toEqual(["following", feedB.uri]); 505 505 + 506 506 + await expect( 507 507 + feedsView.locator('[data-testid="feeds-edit-button"]'), 508 508 + ).toBeVisible(); 509 509 + await expect( 510 510 + feedsView.locator('[data-testid="feeds-save-button"]'), 511 511 + ).toHaveCount(0); 512 512 + }); 513 513 + 514 514 + test("Cancel discards the unsaved unpin and restores the row", async ({ 515 515 + page, 516 516 + }) => { 517 517 + const mockServer = new MockServer(); 518 518 + const feedA = createFeedGenerator({ 519 519 + uri: "at://did:plc:a/app.bsky.feed.generator/a", 520 520 + displayName: "Feed A", 521 521 + creatorHandle: "creator-a.bsky.social", 522 522 + }); 523 523 + const feedB = createFeedGenerator({ 524 524 + uri: "at://did:plc:b/app.bsky.feed.generator/b", 525 525 + displayName: "Feed B", 526 526 + creatorHandle: "creator-b.bsky.social", 527 527 + }); 528 528 + mockServer.addFeedGenerators([feedA, feedB]); 529 529 + mockServer.setPinnedFeeds([feedA.uri, feedB.uri]); 530 530 + await mockServer.setup(page); 531 531 + await login(page); 532 532 + await page.goto("/feeds"); 533 533 + 534 534 + const feedsView = page.locator("#feeds-view"); 535 535 + await expect(feedsView.locator(".feeds-list-item")).toHaveCount(3, { 536 536 + timeout: 10000, 537 537 + }); 538 538 + 539 539 + let sawPut = false; 540 540 + page.on("request", (req) => { 541 541 + if (req.url().includes("/xrpc/app.bsky.actor.putPreferences")) { 542 542 + sawPut = true; 543 543 + } 544 544 + }); 545 545 + 546 546 + await feedsView.locator('[data-testid="feeds-edit-button"]').click(); 547 547 + 548 548 + const feedARow = feedsView.locator(`[data-pinned-value="${feedA.uri}"]`); 549 549 + await feedARow 550 550 + .locator('[data-testid="feeds-list-item-unpin-button"]') 551 551 + .click(); 552 552 + 553 553 + await expect(feedsView.locator(".feeds-list-item")).toHaveCount(2); 554 554 + 555 555 + await feedsView.locator('[data-testid="feeds-cancel-button"]').click(); 556 556 + 557 557 + await expect( 558 558 + feedsView.locator('[data-testid="feeds-edit-button"]'), 559 559 + ).toBeVisible(); 560 560 + const titlesAfterCancel = await feedsView 561 561 + .locator(".feeds-list-item-title") 562 562 + .allTextContents(); 563 563 + expect(titlesAfterCancel).toEqual(["Following", "Feed A", "Feed B"]); 564 564 + expect(sawPut).toBe(false); 565 565 + }); 566 566 + 567 567 + test("unpin + drag reorder + Save persists the combined change", async ({ 568 568 + page, 569 569 + }) => { 570 570 + const mockServer = new MockServer(); 571 571 + const feedA = createFeedGenerator({ 572 572 + uri: "at://did:plc:a/app.bsky.feed.generator/a", 573 573 + displayName: "Feed A", 574 574 + creatorHandle: "creator-a.bsky.social", 575 575 + }); 576 576 + const feedB = createFeedGenerator({ 577 577 + uri: "at://did:plc:b/app.bsky.feed.generator/b", 578 578 + displayName: "Feed B", 579 579 + creatorHandle: "creator-b.bsky.social", 580 580 + }); 581 581 + mockServer.addFeedGenerators([feedA, feedB]); 582 582 + mockServer.setPinnedFeeds([feedA.uri, feedB.uri]); 583 583 + await mockServer.setup(page); 584 584 + await login(page); 585 585 + await page.goto("/feeds"); 586 586 + 587 587 + const feedsView = page.locator("#feeds-view"); 588 588 + await expect(feedsView.locator(".feeds-list-item")).toHaveCount(3, { 589 589 + timeout: 10000, 590 590 + }); 591 591 + 592 592 + await feedsView.locator('[data-testid="feeds-edit-button"]').click(); 593 593 + 594 594 + const feedARow = feedsView.locator(`[data-pinned-value="${feedA.uri}"]`); 595 595 + await feedARow 596 596 + .locator('[data-testid="feeds-list-item-unpin-button"]') 597 597 + .click(); 598 598 + 599 599 + const followingRow = feedsView.locator( 600 600 + '[data-testid="feeds-list-item-following"]', 601 601 + ); 602 602 + const feedBRow = feedsView.locator(`[data-pinned-value="${feedB.uri}"]`); 603 603 + await dragRow(page, followingRow, feedBRow); 604 604 + 605 605 + const putRequests = []; 606 606 + page.on("request", (req) => { 607 607 + if ( 608 608 + req.url().includes("/xrpc/app.bsky.actor.putPreferences") && 609 609 + req.method() === "POST" 610 610 + ) { 611 611 + putRequests.push(req); 612 612 + } 613 613 + }); 614 614 + 615 615 + await feedsView.locator('[data-testid="feeds-save-button"]').click(); 616 616 + await expect( 617 617 + feedsView.locator('[data-testid="feeds-edit-button"]'), 618 618 + ).toBeVisible(); 619 619 + 620 620 + expect(putRequests.length).toBeGreaterThanOrEqual(1); 621 621 + const lastBody = putRequests[putRequests.length - 1].postDataJSON(); 622 622 + const savedFeedsPref = lastBody.preferences.find( 623 623 + (p) => p.$type === "app.bsky.actor.defs#savedFeedsPrefV2", 624 624 + ); 625 625 + const pinnedValues = savedFeedsPref.items 626 626 + .filter((it) => it.pinned) 627 627 + .map((it) => it.value); 628 628 + expect(pinnedValues).toEqual([feedB.uri, "following"]); 373 629 }); 374 630 375 631 test("navigating away discards the unsaved draft order", async ({

+4 -4

tests/unit/specs/dataLayer/mutations.test.js

Reviewed

··· 2036 2036 }); 2037 2037 }); 2038 2038 2039 2039 - describe("reorderPinnedItems", () => { 2039 2039 + describe("setPinnedItems", () => { 2040 2040 const feedA = "at://did:plc:x/app.bsky.feed.generator/a"; 2041 2041 const feedB = "at://did:plc:x/app.bsky.feed.generator/b"; 2042 2042 const listA = "at://did:plc:x/app.bsky.graph.list/a"; ··· 2102 2102 const before = dataStore.$pinnedItems 2103 2103 .get() 2104 2104 .map((it) => (it.type === "timeline" ? "following" : it.data.uri)); 2105 2105 - const promise = mutations.reorderPinnedItems([listA, "following", feedA]); 2105 2105 + const promise = mutations.setPinnedItems([listA, "following", feedA]); 2106 2106 const during = dataStore.$pinnedItems 2107 2107 .get() 2108 2108 .map((it) => (it.type === "timeline" ? "following" : it.data.uri)); ··· 2117 2117 2118 2118 it("sends the reordered preferences to updatePreferences", async () => { 2119 2119 const { mutations, resolveUpdate, getUpdatedPreferences } = setup(); 2120 2120 - const promise = mutations.reorderPinnedItems([feedA, listA, "following"]); 2120 2120 + const promise = mutations.setPinnedItems([feedA, listA, "following"]); 2121 2121 resolveUpdate(); 2122 2122 await promise; 2123 2123 const items = getUpdatedPreferences().obj[0].items; ··· 2163 2163 console.error = () => {}; 2164 2164 try { 2165 2165 await assert.rejects( 2166 2166 - () => mutations.reorderPinnedItems([listA, feedA]), 2166 2166 + () => mutations.setPinnedItems([listA, feedA]), 2167 2167 (err) => err === error, 2168 2168 ); 2169 2169 } finally {

+27 -7

tests/unit/specs/preferences.test.js

Reviewed

··· 255 255 }); 256 256 }); 257 257 258 258 - describe("Preferences.reorderPinnedItems", () => { 258 258 + describe("Preferences.setPinnedItems", () => { 259 259 const buildObj = () => [ 260 260 { 261 261 $type: "app.bsky.actor.defs#savedFeedsPrefV2", ··· 270 270 271 271 it("reorders the pinned slice and preserves unpinned entries at the end", () => { 272 272 const preferences = new Preferences(buildObj(), []); 273 273 - const newPreferences = preferences.reorderPinnedItems([ 273 273 + const newPreferences = preferences.setPinnedItems([ 274 274 "list-a", 275 275 "following", 276 276 "feed-a", ··· 284 284 285 285 it("does not mutate the original preferences", () => { 286 286 const preferences = new Preferences(buildObj(), []); 287 287 - preferences.reorderPinnedItems(["feed-a", "following", "list-a"]); 287 287 + preferences.setPinnedItems(["feed-a", "following", "list-a"]); 288 288 const items = Preferences.getSavedFeedsPreference(preferences.obj).items; 289 289 assert.deepEqual( 290 290 items.map((it) => it.value), ··· 292 292 ); 293 293 }); 294 294 295 295 - it("drops unknown values and unpinned values silently", () => { 295 295 + it("drops unknown values silently and pins listed unpinned items", () => { 296 296 const preferences = new Preferences(buildObj(), []); 297 297 - const newPreferences = preferences.reorderPinnedItems([ 297 297 + const newPreferences = preferences.setPinnedItems([ 298 298 "feed-a", 299 299 "unknown-value", 300 300 "feed-unpinned", ··· 303 303 ]); 304 304 const items = Preferences.getSavedFeedsPreference(newPreferences.obj).items; 305 305 assert.deepEqual( 306 306 - items.map((it) => it.value), 307 307 - ["feed-a", "following", "list-a", "feed-unpinned"], 306 306 + items.map((it) => ({ value: it.value, pinned: it.pinned })), 307 307 + [ 308 308 + { value: "feed-a", pinned: true }, 309 309 + { value: "feed-unpinned", pinned: true }, 310 310 + { value: "following", pinned: true }, 311 311 + { value: "list-a", pinned: true }, 312 312 + ], 313 313 + ); 314 314 + }); 315 315 + 316 316 + it("unpins currently-pinned items that are omitted from the target list", () => { 317 317 + const preferences = new Preferences(buildObj(), []); 318 318 + const newPreferences = preferences.setPinnedItems(["following", "list-a"]); 319 319 + const items = Preferences.getSavedFeedsPreference(newPreferences.obj).items; 320 320 + assert.deepEqual( 321 321 + items.map((it) => ({ value: it.value, pinned: it.pinned })), 322 322 + [ 323 323 + { value: "following", pinned: true }, 324 324 + { value: "list-a", pinned: true }, 325 325 + { value: "feed-a", pinned: false }, 326 326 + { value: "feed-unpinned", pinned: false }, 327 327 + ], 308 328 ); 309 329 }); 310 330 });

+208 -1

tests/unit/specs/signals.test.js

Reviewed

··· 1 1 import { describe, it } from "node:test"; 2 2 import assert from "node:assert/strict"; 3 3 - import { Signal, SignalSet, SignalMap } from "/js/signals.js"; 3 3 + import { Signal, SignalSet, SignalMap, SignalArray } from "/js/signals.js"; 4 4 5 5 describe("SignalSet - Set behavior", () => { 6 6 it("starts empty by default", () => { ··· 306 306 assert.deepEqual(runs, 3); 307 307 }); 308 308 }); 309 309 + 310 310 + describe("SignalArray - Array behavior", () => { 311 311 + it("starts empty by default", () => { 312 312 + const arr = new SignalArray(); 313 313 + assert.deepEqual(arr.length, 0); 314 314 + assert.deepEqual([...arr], []); 315 315 + }); 316 316 + 317 317 + it("seeds from an iterable passed to the constructor", () => { 318 318 + const arr = new SignalArray(["a", "b", "c"]); 319 319 + assert.deepEqual(arr.length, 3); 320 320 + assert.deepEqual([...arr], ["a", "b", "c"]); 321 321 + }); 322 322 + 323 323 + it("does not share the backing storage with the seed array", () => { 324 324 + const seed = ["a", "b"]; 325 325 + const arr = new SignalArray(seed); 326 326 + seed.push("c"); 327 327 + assert.deepEqual([...arr], ["a", "b"]); 328 328 + }); 329 329 + 330 330 + it("at() returns the element at the given index", () => { 331 331 + const arr = new SignalArray(["a", "b", "c"]); 332 332 + assert.deepEqual(arr.at(0), "a"); 333 333 + assert.deepEqual(arr.at(-1), "c"); 334 334 + assert.deepEqual(arr.at(99), undefined); 335 335 + }); 336 336 + 337 337 + it("indexOf and includes work like a native Array", () => { 338 338 + const arr = new SignalArray(["a", "b", "c"]); 339 339 + assert.deepEqual(arr.indexOf("b"), 1); 340 340 + assert.deepEqual(arr.indexOf("missing"), -1); 341 341 + assert(arr.includes("c")); 342 342 + assert.deepEqual(arr.includes("missing"), false); 343 343 + }); 344 344 + 345 345 + it("push appends and returns the new length", () => { 346 346 + const arr = new SignalArray(["a"]); 347 347 + assert.deepEqual(arr.push("b", "c"), 3); 348 348 + assert.deepEqual([...arr], ["a", "b", "c"]); 349 349 + }); 350 350 + 351 351 + it("pop removes and returns the last element", () => { 352 352 + const arr = new SignalArray(["a", "b"]); 353 353 + assert.deepEqual(arr.pop(), "b"); 354 354 + assert.deepEqual([...arr], ["a"]); 355 355 + assert.deepEqual(new SignalArray().pop(), undefined); 356 356 + }); 357 357 + 358 358 + it("set replaces the element at an index", () => { 359 359 + const arr = new SignalArray(["a", "b", "c"]); 360 360 + arr.set(1, "B"); 361 361 + assert.deepEqual([...arr], ["a", "B", "c"]); 362 362 + }); 363 363 + 364 364 + it("splice inserts, removes, and returns removed items", () => { 365 365 + const arr = new SignalArray(["a", "b", "c", "d"]); 366 366 + const removed = arr.splice(1, 2, "X", "Y", "Z"); 367 367 + assert.deepEqual(removed, ["b", "c"]); 368 368 + assert.deepEqual([...arr], ["a", "X", "Y", "Z", "d"]); 369 369 + }); 370 370 + 371 371 + it("replace swaps the whole contents in one shot", () => { 372 372 + const arr = new SignalArray(["a", "b"]); 373 373 + arr.replace(["x", "y", "z"]); 374 374 + assert.deepEqual([...arr], ["x", "y", "z"]); 375 375 + arr.replace([]); 376 376 + assert.deepEqual([...arr], []); 377 377 + }); 378 378 + 379 379 + it("clear empties the array", () => { 380 380 + const arr = new SignalArray(["a", "b"]); 381 381 + arr.clear(); 382 382 + assert.deepEqual(arr.length, 0); 383 383 + assert.deepEqual([...arr], []); 384 384 + }); 385 385 + 386 386 + it("map/filter/slice return plain arrays", () => { 387 387 + const arr = new SignalArray([1, 2, 3, 4]); 388 388 + const doubled = arr.map((n) => n * 2); 389 389 + assert.deepEqual(doubled, [2, 4, 6, 8]); 390 390 + assert(Array.isArray(doubled)); 391 391 + assert.deepEqual( 392 392 + arr.filter((n) => n % 2 === 0), 393 393 + [2, 4], 394 394 + ); 395 395 + assert.deepEqual(arr.slice(1, 3), [2, 3]); 396 396 + }); 397 397 + 398 398 + it("forEach visits each element in order", () => { 399 399 + const arr = new SignalArray(["a", "b", "c"]); 400 400 + const seen = []; 401 401 + arr.forEach((value, index) => seen.push([index, value])); 402 402 + assert.deepEqual(seen, [ 403 403 + [0, "a"], 404 404 + [1, "b"], 405 405 + [2, "c"], 406 406 + ]); 407 407 + }); 408 408 + }); 409 409 + 410 410 + describe("SignalArray - reactivity", () => { 411 411 + it("a length reader recomputes on push, pop, splice, replace, and clear", () => { 412 412 + const arr = new SignalArray(); 413 413 + let runs = 0; 414 414 + const $length = new Signal.Computed(() => { 415 415 + runs++; 416 416 + return arr.length; 417 417 + }); 418 418 + 419 419 + assert.deepEqual($length.get(), 0); 420 420 + assert.deepEqual(runs, 1); 421 421 + 422 422 + arr.push("a"); 423 423 + assert.deepEqual($length.get(), 1); 424 424 + assert.deepEqual(runs, 2); 425 425 + 426 426 + arr.pop(); 427 427 + assert.deepEqual($length.get(), 0); 428 428 + assert.deepEqual(runs, 3); 429 429 + 430 430 + arr.splice(0, 0, "a", "b"); 431 431 + assert.deepEqual($length.get(), 2); 432 432 + assert.deepEqual(runs, 4); 433 433 + 434 434 + arr.replace(["x"]); 435 435 + assert.deepEqual($length.get(), 1); 436 436 + assert.deepEqual(runs, 5); 437 437 + 438 438 + arr.clear(); 439 439 + assert.deepEqual($length.get(), 0); 440 440 + assert.deepEqual(runs, 6); 441 441 + }); 442 442 + 443 443 + it("an iteration reader recomputes on mutation", () => { 444 444 + const arr = new SignalArray(["a"]); 445 445 + let runs = 0; 446 446 + const $joined = new Signal.Computed(() => { 447 447 + runs++; 448 448 + return [...arr].join(","); 449 449 + }); 450 450 + 451 451 + assert.deepEqual($joined.get(), "a"); 452 452 + assert.deepEqual(runs, 1); 453 453 + 454 454 + arr.push("b"); 455 455 + assert.deepEqual($joined.get(), "a,b"); 456 456 + assert.deepEqual(runs, 2); 457 457 + 458 458 + arr.replace(["z"]); 459 459 + assert.deepEqual($joined.get(), "z"); 460 460 + assert.deepEqual(runs, 3); 461 461 + }); 462 462 + 463 463 + it("set(index, value) notifies iteration and length readers", () => { 464 464 + const arr = new SignalArray(["a", "b"]); 465 465 + let runs = 0; 466 466 + const $joined = new Signal.Computed(() => { 467 467 + runs++; 468 468 + return [...arr].join(","); 469 469 + }); 470 470 + 471 471 + assert.deepEqual($joined.get(), "a,b"); 472 472 + arr.set(1, "B"); 473 473 + assert.deepEqual($joined.get(), "a,B"); 474 474 + assert.deepEqual(runs, 2); 475 475 + }); 476 476 + 477 477 + it("map/filter/indexOf/at/includes readers all subscribe to the collection", () => { 478 478 + const cases = [ 479 479 + { name: "map", read: (arr) => arr.map((v) => v).join(",") }, 480 480 + { name: "filter", read: (arr) => arr.filter(() => true).join(",") }, 481 481 + { name: "indexOf", read: (arr) => arr.indexOf("b") }, 482 482 + { name: "at", read: (arr) => arr.at(0) }, 483 483 + { name: "includes", read: (arr) => arr.includes("a") }, 484 484 + ]; 485 485 + for (const { name, read } of cases) { 486 486 + const arr = new SignalArray(["a", "b"]); 487 487 + let runs = 0; 488 488 + const $c = new Signal.Computed(() => { 489 489 + runs++; 490 490 + return read(arr); 491 491 + }); 492 492 + $c.get(); 493 493 + assert.deepEqual(runs, 1, `${name}: initial run`); 494 494 + arr.push("c"); 495 495 + $c.get(); 496 496 + assert.deepEqual(runs, 2, `${name}: refires after push`); 497 497 + } 498 498 + }); 499 499 + 500 500 + it("replacing with an equal-content array still notifies (no dedup, signal-utils semantics)", () => { 501 501 + const arr = new SignalArray(["a", "b"]); 502 502 + let runs = 0; 503 503 + const $length = new Signal.Computed(() => { 504 504 + runs++; 505 505 + return arr.length; 506 506 + }); 507 507 + 508 508 + assert.deepEqual($length.get(), 2); 509 509 + assert.deepEqual(runs, 1); 510 510 + 511 511 + arr.replace(["a", "b"]); 512 512 + assert.deepEqual($length.get(), 2); 513 513 + assert.deepEqual(runs, 2); 514 514 + }); 515 515 + });