Add manual subreddit/YouTube channel configuration (manage.php)
Browser-based feed selection layered on top of config/feeds.php: - manage.php (password + CSRF gated, session based): add subreddits (name / r/name / URL) and YouTube channels (@handle / UC id / URL, handle resolved to channel_id once, youtube.com only); enable/disable toggles; remove manual feeds; config feeds are hidden, not deleted. - New feeds are validated with one immediate fetch (bypassing the per-refresh host cap): HTTP 404 rejects the entry, 429 keeps it for a later refresh. YouTube labels adopt the real channel title. - feeds table gains origin (config|manual) and enabled columns, with a guarded ALTER migration for existing databases. - Only enabled feeds are refreshed and served: getItems/countItems filter by feed_url in enabled feeds, so deselected feeds' cached stories are hidden, not deleted; re-adding a URL re-enables it. - Dashboard header gets a Manage link; manage page styled with the existing design tokens; README documents the feature.
This commit is contained in:
Harwinder Sekhon
@@ -0,0 +1,11 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
document.querySelectorAll('form[data-confirm]').forEach(function (form) {
|
||||
form.addEventListener('submit', function (event) {
|
||||
if (!window.confirm(form.dataset.confirm)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
@@ -419,6 +419,254 @@ main {
|
||||
color: #7a5a12;
|
||||
}
|
||||
|
||||
.alert-ok-soft {
|
||||
border: 1px solid #b7ecd2;
|
||||
border-radius: 14px;
|
||||
background: #ecfbf3;
|
||||
color: #14624a;
|
||||
}
|
||||
|
||||
/* ---------- Manage page ---------- */
|
||||
|
||||
.manage-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.38rem 0.85rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
color: var(--ink-soft);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.manage-link:hover {
|
||||
color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 8px 18px -12px var(--accent);
|
||||
}
|
||||
|
||||
.manage-title {
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
.manage-main {
|
||||
max-width: 920px;
|
||||
}
|
||||
|
||||
.manage-panel {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 18px;
|
||||
padding: 1.25rem 1.4rem;
|
||||
box-shadow: 0 1px 2px rgba(22, 11, 46, 0.04), 0 14px 34px -26px rgba(22, 11, 46, 0.5);
|
||||
}
|
||||
|
||||
.manage-notice {
|
||||
max-width: 560px;
|
||||
margin: 3rem auto;
|
||||
}
|
||||
|
||||
.manage-login {
|
||||
max-width: 460px;
|
||||
margin: 3rem auto;
|
||||
}
|
||||
|
||||
.manage-heading {
|
||||
font-family: var(--display);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.manage-subheading {
|
||||
font-family: var(--display);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.btn-compact {
|
||||
padding: 0.5rem 1.35rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.manage-group {
|
||||
margin-bottom: 1.9rem;
|
||||
}
|
||||
|
||||
.manage-group-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-family: var(--display);
|
||||
font-size: 1.02rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.manage-group-title .pill-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--src);
|
||||
}
|
||||
|
||||
.manage-group-title .count {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
color: var(--ink-soft);
|
||||
background: rgba(22, 11, 46, 0.06);
|
||||
padding: 0.12rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.feed-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.feed-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.6rem 0.9rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-left: 4px solid var(--src);
|
||||
border-radius: 14px;
|
||||
padding: 0.7rem 1rem;
|
||||
transition: box-shadow 0.15s ease, opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.feed-row:hover {
|
||||
box-shadow: 0 12px 26px -18px rgba(22, 11, 46, 0.55);
|
||||
}
|
||||
|
||||
.feed-row.is-off {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.feed-row-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem 0.6rem;
|
||||
min-width: 0;
|
||||
flex: 1 1 320px;
|
||||
}
|
||||
|
||||
.feed-row-label {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.origin-badge {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.09em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
background: rgba(22, 11, 46, 0.06);
|
||||
padding: 0.16rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.feed-row-url {
|
||||
font-size: 0.66rem;
|
||||
color: var(--ink-soft);
|
||||
text-decoration: none;
|
||||
max-width: 36ch;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.feed-row-url:hover {
|
||||
color: var(--accent);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.health {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.32rem;
|
||||
font-size: 0.64rem;
|
||||
letter-spacing: 0.03em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.health-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.health-ok {
|
||||
color: var(--rt);
|
||||
}
|
||||
|
||||
.health-err {
|
||||
color: var(--youtube);
|
||||
}
|
||||
|
||||
.health-idle {
|
||||
color: var(--ink-soft);
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.feed-row-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-mini {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
color: var(--ink-soft);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
padding: 0.3rem 0.85rem;
|
||||
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.btn-mini:hover,
|
||||
.btn-mini:focus {
|
||||
color: var(--ink);
|
||||
border-color: var(--ink-soft);
|
||||
}
|
||||
|
||||
.btn-mini-on {
|
||||
color: var(--accent);
|
||||
border-color: rgba(106, 61, 255, 0.45);
|
||||
background: rgba(106, 61, 255, 0.08);
|
||||
}
|
||||
|
||||
.btn-mini-on:hover,
|
||||
.btn-mini-on:focus {
|
||||
color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
background: rgba(106, 61, 255, 0.14);
|
||||
}
|
||||
|
||||
.btn-mini-danger:hover,
|
||||
.btn-mini-danger:focus {
|
||||
color: var(--youtube);
|
||||
border-color: rgba(255, 31, 75, 0.5);
|
||||
background: rgba(255, 31, 75, 0.07);
|
||||
}
|
||||
|
||||
/* ---------- Focus & motion ---------- */
|
||||
|
||||
a:focus-visible,
|
||||
|
||||
Reference in New Issue
Block a user