this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Add "context" toggles

+128 -3
+14 -1
src/pages/sandbox.css
··· 58 58 justify-content: center; 59 59 overflow-anchor: auto; 60 60 61 + > [class^='status-'], 61 62 > .status, 62 - > *:not(.status-card-link) > .status { 63 + > *:not(.status-card-link, [class^='status-']) > .status { 63 64 min-width: 320px; 64 65 max-width: 40em; 65 66 background-color: var(--bg-color); ··· 68 69 0 4px 16px var(--drop-shadow-color), 69 70 0 8px 32px -4px var(--drop-shadow-color); 70 71 view-transition-name: status; 72 + 73 + > .status-pre-meta { 74 + view-transition-name: status-pre-meta; 75 + } 76 + } 77 + 78 + > .status, 79 + > *:not(.status-card-link) > .status { 80 + button, 81 + a { 82 + pointer-events: none; 83 + } 71 84 72 85 > .container > .meta { 73 86 view-transition-name: status-meta;
+114 -2
src/pages/sandbox.jsx
··· 313 313 filters: [false, false, false], // hide, blur, warn 314 314 mediaPreference: 'default', 315 315 expandWarnings: false, 316 + contextType: 'none', // Default context type 316 317 }); 317 318 318 319 // Update function with view transitions ··· 368 369 }; 369 370 }, [toggleState.mediaPreference, toggleState.expandWarnings]); 370 371 371 - // Generate status with current toggle values 372 - const mockStatus = MOCK_STATUS({ 372 + // Generate status with current toggle values and context 373 + let mockStatus = MOCK_STATUS({ 373 374 toggles: { 374 375 loading: toggleState.loading, 375 376 mediaFirst: toggleState.mediaFirst, ··· 391 392 filters: toggleState.filters, 392 393 }, 393 394 }); 395 + 396 + if (toggleState.contextType === 'reblog') { 397 + const rebloggedStatus = { ...mockStatus }; 398 + mockStatus = { 399 + id: 'reblog-' + mockStatus.id, 400 + account: mockStatus.account, // Same account for simplicity 401 + reblog: rebloggedStatus, 402 + visibility: mockStatus.visibility, 403 + createdAt: new Date().toISOString(), 404 + }; 405 + } else if (toggleState.contextType === 'group') { 406 + const groupStatus = { ...mockStatus }; 407 + mockStatus.account = { ...mockStatus.account, group: true }; 408 + mockStatus.reblog = groupStatus; 409 + } else if (toggleState.contextType === 'followed-tags') { 410 + const concreteId = 'followed-tags-status-123'; 411 + mockStatus.id = concreteId; 412 + 413 + const sKey = statusKey(concreteId, DEFAULT_INSTANCE); 414 + console.log('Setting followed tags for key:', sKey); 415 + 416 + // Clear any existing tags for this status 417 + Object.keys(states.statusFollowedTags).forEach((key) => { 418 + delete states.statusFollowedTags[key]; 419 + }); 420 + 421 + states.statusFollowedTags[sKey] = ['hashtag', 'test']; 422 + } else if (toggleState.contextType === 'reply-to') { 423 + // Generate a unique ID 424 + const parentID = Math.random().toString(36).substring(2, 15); 425 + const parentAcct = 'parent_user@example.social'; 426 + 427 + mockStatus.inReplyToId = parentID; 428 + mockStatus.inReplyToAccountId = parentID; 429 + 430 + const parentAccount = { 431 + id: parentID, 432 + username: 'parent_user', 433 + displayName: 'Parent User', 434 + name: 'Parent User', 435 + url: 'https://example.social/@parent_user', 436 + acct: parentAcct, 437 + }; 438 + 439 + mockStatus.mentions = [parentAccount]; 440 + 441 + mockStatus.id = 'reply-' + Math.random().toString(36).substring(2, 15); 442 + } 394 443 395 444 // Directly observe the statusQuotes object for debugging 396 445 useEffect(() => { ··· 651 700 } 652 701 instance={DEFAULT_INSTANCE} 653 702 allowFilters={true} 703 + showFollowedTags 654 704 // Prevent opening as URL 655 705 onMediaClick={(e, i, media, status) => { 656 706 e.preventDefault(); ··· 1147 1197 onChange={() => updateToggles({ size: 'large' })} 1148 1198 /> 1149 1199 <span>Large</span> 1200 + </label> 1201 + </li> 1202 + </ul> 1203 + </li> 1204 + <li> 1205 + <b>Context</b> 1206 + <ul> 1207 + <li> 1208 + <label> 1209 + <input 1210 + type="radio" 1211 + name="contextType" 1212 + checked={toggleState.contextType === 'none'} 1213 + onChange={() => updateToggles({ contextType: 'none' })} 1214 + /> 1215 + <span>None</span> 1216 + </label> 1217 + </li> 1218 + <li> 1219 + <label> 1220 + <input 1221 + type="radio" 1222 + name="contextType" 1223 + checked={toggleState.contextType === 'reblog'} 1224 + onChange={() => updateToggles({ contextType: 'reblog' })} 1225 + /> 1226 + <span>Boost</span> 1227 + </label> 1228 + </li> 1229 + <li> 1230 + <label> 1231 + <input 1232 + type="radio" 1233 + name="contextType" 1234 + checked={toggleState.contextType === 'group'} 1235 + onChange={() => updateToggles({ contextType: 'group' })} 1236 + /> 1237 + <span>Group</span> 1238 + </label> 1239 + </li> 1240 + <li> 1241 + <label> 1242 + <input 1243 + type="radio" 1244 + name="contextType" 1245 + checked={toggleState.contextType === 'followed-tags'} 1246 + onChange={() => 1247 + updateToggles({ contextType: 'followed-tags' }) 1248 + } 1249 + /> 1250 + <span>Followed tags</span> 1251 + </label> 1252 + </li> 1253 + <li> 1254 + <label> 1255 + <input 1256 + type="radio" 1257 + name="contextType" 1258 + checked={toggleState.contextType === 'reply-to'} 1259 + onChange={() => updateToggles({ contextType: 'reply-to' })} 1260 + /> 1261 + <span>Reply-to</span> 1150 1262 </label> 1151 1263 </li> 1152 1264 </ul>