this repo has no description
Add "context" toggles
+128
-3
+14
-1
src/pages/sandbox.css
+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
+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>