Jamie BruntonandClaude Opus 5
c43e534cf1
The settings page had accumulated five tabs whose names no longer matched their contents, three different save models, and the whole subreddit configuration buried under a tab named after a checkbox. Structure: - Subreddits becomes its own page: a list showing each community's mode, tone, computed share of polling, and live sent/reply stats, with one subreddit edited at a time in a drawer. - Accounts becomes its own page. It is session lifecycle, not config. - Settings collapses to one scrolling page: Safety, Pacing (Monitoring and Rate limits merged), Targeting, Notifications, Advanced. - The sidebar is grouped, having gone from 9 to 11 destinations. Saving: - Every section owns its own draft, validation, risk gate and save via useConfigCard, submitting only the keys it owns. A syntax error in the advanced JSON can no longer block a rate-limit change, and enabling an autonomous policy is its own deliberate commit. - UnsavedChangesProvider restores the leave-page guard across cards that no longer share a draft. Subreddit editing: - Errors are keyed by field name instead of array index, removing the defensive invalidation that existed because row indices shifted on add and remove. Confirming an autonomous mode can no longer be attributed to the wrong row. - Weight is shown as the share it actually produces, live while editing. - Bulk actions cover start/pause polling, tone, policy and removal, because production runs 30-40 subreddits and per-row editing does not scale. Bulk policy changes name every subreddit turning autonomous, and normalise the hybrid mode's turn budget, which has no form to catch it. Physique targeting moves into its own Targeting card. It sends only reddit.physiqueTargeting, which the config route applies independently, so it cannot clobber the pacing card's fields. Turning screening on now warns that it will reduce how many posts qualify. Also surfaces the effective sending rate, since the hourly limit and the minimum delay both throttle and only the binding one matters. Legacy ?section= links redirect or resolve to anchors. Fixes found while verifying in a browser: a radio-card rule was shrinking nested number inputs; .share-preview had no styles; the throughput readout reported a rate from a blank field; and the reconcile logic warned about a server change whenever a sibling card saved. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
63 lines
4.8 KiB
CSS
63 lines
4.8 KiB
CSS
.subreddits-page { max-width: 68rem; }
|
|
|
|
.subreddit-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; padding: 1rem 1.1rem; margin-bottom: 1rem; background: linear-gradient(110deg, #13221b, #0f1915); border: 1px solid var(--border); border-radius: .9rem; }
|
|
.subreddit-summary > div { display: flex; align-items: baseline; gap: .5rem; }
|
|
.subreddit-summary strong { font-size: 1.6rem; letter-spacing: -.04em; }
|
|
.subreddit-summary span { color: var(--muted); font-size: .85rem; }
|
|
.subreddit-summary .save-error { flex: 1 0 100%; margin: 0; font-size: .85rem; font-weight: 700; }
|
|
|
|
.subreddit-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-bottom: 1rem; }
|
|
.inline-field { flex: 1 1 12rem; max-width: 18rem; }
|
|
|
|
/* Live share readout beside the weight input in the editor. */
|
|
.share-preview { display: grid; align-content: start; gap: .15rem; padding: .5rem .7rem; background: var(--surface-raised); border: 1px solid var(--border); border-radius: .6rem; }
|
|
.share-preview strong { color: var(--accent); font-size: 1.35rem; line-height: 1.1; letter-spacing: -.03em; }
|
|
.share-preview small { color: var(--muted); font-size: .72rem; }
|
|
|
|
.subreddit-cards { display: grid; gap: .65rem; padding: 0; margin: 0; list-style: none; }
|
|
.subreddit-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .85rem; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: .85rem; }
|
|
.subreddit-card.is-disabled { background: #0d1512; border-style: dashed; }
|
|
.subreddit-card.is-disabled .subreddit-identity h3 { color: var(--muted); }
|
|
|
|
.subreddit-card.is-selected { border-color: var(--accent); background: var(--accent-dark); }
|
|
.subreddit-select { display: flex; align-self: start; align-items: center; padding-top: .15rem; cursor: pointer; }
|
|
.subreddit-select input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }
|
|
.subreddit-select:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: .3rem; }
|
|
.select-all { align-self: center; }
|
|
|
|
/* Sticks to the bottom so the selection stays actionable while scrolling a
|
|
long list. */
|
|
.bulk-bar { position: sticky; bottom: 1rem; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; margin-top: 1rem; background: rgba(23, 35, 30, .97); border: 1px solid var(--accent); border-radius: .8rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .45); backdrop-filter: blur(8px); }
|
|
.bulk-bar-count { display: grid; gap: .1rem; }
|
|
.bulk-bar-count small { color: var(--muted); font-size: .75rem; }
|
|
/* Two columns while narrow keeps the bar to three rows instead of five, so it
|
|
does not swallow the list it acts on. */
|
|
.bulk-bar-actions { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: .5rem; width: 100%; }
|
|
.bulk-bar-actions .button { min-height: 2.3rem; padding: .4rem .75rem; font-size: .82rem; }
|
|
.bulk-select select { width: 100%; min-height: 2.3rem; padding: .35rem .6rem; color: #e9f1ec; background: var(--surface-raised); border: 1px solid var(--border); border-radius: .65rem; font-size: .82rem; font-weight: 700; }
|
|
.bulk-select select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
|
|
.subreddit-card-main { display: grid; gap: .85rem; }
|
|
.subreddit-identity { display: grid; gap: .45rem; min-width: 0; }
|
|
.subreddit-identity h3 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
|
|
.subreddit-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
|
|
.subreddit-tags .pill { font-size: .68rem; }
|
|
|
|
.subreddit-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem 1rem; margin: 0; }
|
|
.subreddit-metrics dt { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
|
|
.subreddit-metrics dd { display: grid; gap: .05rem; margin: 0; font-weight: 750; }
|
|
.subreddit-metrics dd small { color: var(--muted); font-size: .7rem; font-weight: 650; }
|
|
|
|
.subreddit-card-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-top: .85rem; border-top: 1px solid var(--border); }
|
|
.subreddit-card-actions .button { min-height: 2.3rem; padding: .4rem .75rem; font-size: .82rem; }
|
|
.subreddit-card-actions .inline-switch { margin-right: auto; }
|
|
|
|
@media (min-width: 52rem) {
|
|
.bulk-bar-actions { display: flex; flex-wrap: wrap; width: auto; }
|
|
.bulk-select select { width: auto; }
|
|
.subreddit-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
|
|
.subreddit-card-main { grid-template-columns: minmax(11rem, 1fr) minmax(0, 1.1fr); align-items: center; gap: 1.5rem; }
|
|
.subreddit-card-actions { grid-column: 3; padding-top: 0; padding-left: 1.25rem; border-top: 0; border-left: 1px solid var(--border); }
|
|
.subreddit-card-actions .inline-switch { margin-right: 0; }
|
|
}
|