schaefera/feedsignal
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions
feedsignal/crates/web/assets/app.css

21 lines
1.3 KiB
CSS
Raw Normal View History

Add feed sidebar navigation, built from Dioxus's component library Default view stays the all-feeds joined article list, now with a sidebar listing every subscribed feed so a reader can pin down to one feed's articles. Filtering happens server-side (list_ranked_articles now takes an optional feed_id). Pulled in the sidebar/badge/scroll_area (plus their sheet/skeleton/ tooltip/separator dependencies) components via `dx components add` instead of hand-rolling nav/tag/scroll markup, matching this project's existing pattern of using the Dioxus component library over raw elements (see button/input). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PqTJmazHBQK878vjQ4JnnF
2026-09-03 14:28:22 +00:00
body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; height: 100vh; }
.app-shell { display: flex; height: 100vh; }
.content-header { display: flex; align-items: center; gap: 0.75rem; padding: 1.5rem 1.5rem 0.5rem; }
.content-header h2 { margin: 0; }
.article-scroll-area { flex: 1; min-height: 0; padding: 0 1.5rem 1.5rem; }
.article-list { list-style: none; padding: 0; margin: 0; }
Fix article row layout: button overlapping title, uneven summary gaps article-row had no layout structure at all — title link, score badge, and the dismiss button were plain inline siblings in a block <li>, so a long title pushed the button flush against (or past) the row's edge. Group title+score into a header row and make the row itself a flex column so summary/topics/button always stack on their own line below, regardless of title length. Also stopped rendering the summary <p> and topics div at all when there's no content (many RSS entries have no description), instead of emitting empty elements — spacing was uneven because those still reserved a line's worth of height. Left this as an explicit Rust-side branch rather than CSS :empty: an empty <p> still contains a zero-length text node, and whether :empty matches that is inconsistent across engines, whereas the topics div (an empty `for` loop) has zero children and would be a safe :empty candidate — but kept both on the same explicit mechanism for consistency. Swapped the dismiss button from a raw <button> to the dx Button component, matching the rest of the row and the project's preference for the component library over raw elements. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PqTJmazHBQK878vjQ4JnnF
2026-09-03 16:08:14 +00:00
.article-row { border-bottom: 1px solid #ddd; padding: 1rem 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.article-row-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
Scaffold feedsignal: Rust workspace for LLM-filtered RSS reader Rust workspace with core (topic-affinity learning engine + relevance scoring), db (sqlite/sqlx schema + repo), feeds (RSS/Atom fetch), llm (rig + local Ollama embeddings/completion), and web (axum + Dioxus fullstack UI, no separate JS stack). Two-stage relevance filtering (embedding shortlist -> LLM judgment) and an engagement/surprise-based topic affinity engine with daily decay. All crates compile and core's affinity engine has passing unit tests; server and wasm client targets of feedsignal-web both check clean.
2026-08-20 15:04:14 +00:00
.article-row a { font-weight: 600; text-decoration: none; color: #0b5fff; }
Fix article row layout: button overlapping title, uneven summary gaps article-row had no layout structure at all — title link, score badge, and the dismiss button were plain inline siblings in a block <li>, so a long title pushed the button flush against (or past) the row's edge. Group title+score into a header row and make the row itself a flex column so summary/topics/button always stack on their own line below, regardless of title length. Also stopped rendering the summary <p> and topics div at all when there's no content (many RSS entries have no description), instead of emitting empty elements — spacing was uneven because those still reserved a line's worth of height. Left this as an explicit Rust-side branch rather than CSS :empty: an empty <p> still contains a zero-length text node, and whether :empty matches that is inconsistent across engines, whereas the topics div (an empty `for` loop) has zero children and would be a safe :empty candidate — but kept both on the same explicit mechanism for consistency. Swapped the dismiss button from a raw <button> to the dx Button component, matching the rest of the row and the project's preference for the component library over raw elements. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PqTJmazHBQK878vjQ4JnnF
2026-09-03 16:08:14 +00:00
.summary { color: #444; margin: 0; }
Add feed sidebar navigation, built from Dioxus's component library Default view stays the all-feeds joined article list, now with a sidebar listing every subscribed feed so a reader can pin down to one feed's articles. Filtering happens server-side (list_ranked_articles now takes an optional feed_id). Pulled in the sidebar/badge/scroll_area (plus their sheet/skeleton/ tooltip/separator dependencies) components via `dx components add` instead of hand-rolling nav/tag/scroll markup, matching this project's existing pattern of using the Dioxus component library over raw elements (see button/input). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PqTJmazHBQK878vjQ4JnnF
2026-09-03 14:28:22 +00:00
.topics { display: flex; flex-wrap: wrap; gap: 0.3rem; }
Scaffold feedsignal: Rust workspace for LLM-filtered RSS reader Rust workspace with core (topic-affinity learning engine + relevance scoring), db (sqlite/sqlx schema + repo), feeds (RSS/Atom fetch), llm (rig + local Ollama embeddings/completion), and web (axum + Dioxus fullstack UI, no separate JS stack). Two-stage relevance filtering (embedding shortlist -> LLM judgment) and an engagement/surprise-based topic affinity engine with daily decay. All crates compile and core's affinity engine has passing unit tests; server and wasm client targets of feedsignal-web both check clean.
2026-08-20 15:04:14 +00:00
.error { color: #b00020; }
Fix Subscribe button overflowing the sidebar's fixed width Not an article-row or hot-reload issue after all — the Subscribe button in the sidebar header was genuinely spilling past the sidebar's 16rem width into the main content column. The sidebar panel is position: fixed; z-index: 10 (dx-sidebar-container in the vendored sidebar CSS), so that overflow floated on top of whatever main content happened to sit at the same height, which was the first article row's button — hence it only ever looked broken there. Root cause: .subscribe-form .dx-input had flex: 1 but no min-width: 0, so flexbox's default min-width: auto stopped it shrinking below its content-based minimum once the Subscribe button took its share of the row — a classic flexbox overflow gotcha. Added min-width: 0 to both the input and the form row. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PqTJmazHBQK878vjQ4JnnF
2026-09-03 16:18:49 +00:00
.subscribe-form { display: flex; gap: 0.5rem; margin: 1rem 0; min-width: 0; }
Actually fix the Subscribe button overflow (previous fix was inert) The prior commit's .subscribe-form .dx-input selector never matched anything: dioxus's #[css_module] macro content-hashes Input's class at build time (e.g. rendered as class="dx-input-83f82cbc", confirmed by inspecting the live DOM), so a selector on the unhashed "dx-input" name was dead CSS from the start — hence the overflow persisting across rebuilds and hard refreshes. Select on the raw <input> tag within .subscribe-form instead, which doesn't depend on the module's per-build hash. Verified against the running dev server (not just visually): the Subscribe button now renders flush with the form's own right edge (both at x=247) instead of spilling to x=314, well inside the sidebar's x=256 boundary. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PqTJmazHBQK878vjQ4JnnF
2026-09-03 17:07:51 +00:00
/* Target the raw tag, not the component's own class: dioxus's #[css_module]
content-hashes Input's class per build (e.g. "dx-input-83f82cbc"), so a
selector on the unhashed name never matches anything. */
.subscribe-form input { flex: 1 1 0; min-width: 0; }
Add manual feed subscription Adds a URL input + Subscribe button (dx-components Input/Button) to the UI, wired to a new subscribe_feed server function that upserts the feed row and does an immediate first fetch so the reader isn't empty until the next scheduled poll. feedsignal_feeds::fetch_feed now also returns the feed's title, used to replace the URL placeholder once fetched. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XJJQb2DWZZwQ1yPiaAQQoY
2026-08-21 13:15:50 +00:00
.subscribe-status { margin: 0.25rem 0 1rem; font-size: 0.9rem; }
.subscribe-status.success { color: #1a7f37; }
.subscribe-status.error { color: #b00020; }
Reference in a new issue Copy permalink