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
61 lines
1.6 KiB
Rust
61 lines
1.6 KiB
Rust
use dioxus::prelude::*;
|
|
use dioxus_primitives::dioxus_attributes::attributes;
|
|
use dioxus_primitives::merge_attributes;
|
|
use dioxus_primitives::tooltip::{self, TooltipContentProps, TooltipProps, TooltipTriggerProps};
|
|
|
|
#[css_module("/src/components/tooltip/style.css")]
|
|
struct Styles;
|
|
|
|
#[component]
|
|
pub fn Tooltip(props: TooltipProps) -> Element {
|
|
let base = attributes!(div {
|
|
class: Styles::dx_tooltip,
|
|
});
|
|
let merged = merge_attributes(vec![base, props.attributes]);
|
|
|
|
rsx! {
|
|
tooltip::Tooltip {
|
|
disabled: props.disabled,
|
|
open: props.open,
|
|
default_open: props.default_open,
|
|
on_open_change: props.on_open_change,
|
|
attributes: merged,
|
|
{props.children}
|
|
}
|
|
}
|
|
}
|
|
|
|
#[component]
|
|
pub fn TooltipTrigger(props: TooltipTriggerProps) -> Element {
|
|
let base = attributes!(button {
|
|
class: Styles::dx_tooltip_trigger,
|
|
});
|
|
let merged = merge_attributes(vec![base, props.attributes]);
|
|
|
|
rsx! {
|
|
tooltip::TooltipTrigger {
|
|
id: props.id,
|
|
as: props.r#as,
|
|
attributes: merged,
|
|
{props.children}
|
|
}
|
|
}
|
|
}
|
|
|
|
#[component]
|
|
pub fn TooltipContent(props: TooltipContentProps) -> Element {
|
|
let base = attributes!(div {
|
|
class: Styles::dx_tooltip_content,
|
|
});
|
|
let merged = merge_attributes(vec![base, props.attributes]);
|
|
|
|
rsx! {
|
|
tooltip::TooltipContent {
|
|
id: props.id,
|
|
side: props.side,
|
|
align: props.align,
|
|
attributes: merged,
|
|
{props.children}
|
|
}
|
|
}
|
|
}
|