NotAShelf/pinakes
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

treewide: fix various UI bugs; optimize crypto dependencies & format

Browse source 
Signed-off-by: NotAShelf <raf@notashelf.dev>
Change-Id: If8fe8b38c1d9c4fecd40ff71f88d2ae06a6a6964
This commit is contained in:
raf 2026-02-10 12:56:05 +03:00
commit 3ccddce7fd
Signed by: NotAShelf
GPG key ID: 29D95B64378DB4BF
178 changed files with 58342 additions and 54241 deletions
Download patch file Download diff file Expand all files Collapse all files

216
crates/pinakes-ui/src/components/audit.rs
View file

@ -1,124 +1,126 @@
use dioxus::prelude::*;
use super::pagination::Pagination as PaginationControls;
use super::utils::format_timestamp;
use super::{
pagination::Pagination as PaginationControls,
utils::format_timestamp,
};
use crate::client::AuditEntryResponse;
const ACTION_OPTIONS: &[&str] = &[
"All",
"imported",
"deleted",
"tagged",
"untagged",
"updated",
"added_to_collection",
"removed_from_collection",
"opened",
"scanned",
"All",
"imported",
"deleted",
"tagged",
"untagged",
"updated",
"added_to_collection",
"removed_from_collection",
"opened",
"scanned",
];
#[component]
pub fn AuditLog(
entries: Vec<AuditEntryResponse>,
on_select: EventHandler<String>,
audit_page: u64,
total_pages: u64,
on_page_change: EventHandler<u64>,
audit_filter: String,
on_filter_change: EventHandler<String>,
entries: Vec<AuditEntryResponse>,
on_select: EventHandler<String>,
audit_page: u64,
total_pages: u64,
on_page_change: EventHandler<u64>,
audit_filter: String,
on_filter_change: EventHandler<String>,
) -> Element {
if entries.is_empty() {
return rsx! {
div { class: "empty-state",
h3 { class: "empty-title", "No audit entries" }
p { class: "empty-subtitle", "Activity will appear here as you use the application." }
}
};
}
rsx! {
div { class: "audit-controls",
select {
class: "filter-select",
value: "{audit_filter}",
onchange: move |evt: Event<FormData>| {
on_filter_change.call(evt.value().to_string());
},
for option in ACTION_OPTIONS.iter() {
option {
key: "{option}",
value: "{option}",
selected: audit_filter == *option,
"{option}"
}
}
}
if entries.is_empty() {
return rsx! {
div { class: "empty-state",
h3 { class: "empty-title", "No audit entries" }
p { class: "empty-subtitle", "Activity will appear here as you use the application." }
}
};
}
table { class: "data-table",
thead {
tr {
th { "Action" }
th { "Media ID" }
th { "Details" }
th { "Timestamp" }
}
}
tbody {
for entry in entries.iter() {
{
let media_id = entry.media_id.clone().unwrap_or_default();
let truncated_id = if media_id.len() > 8 {
format!("{}...", &media_id[..8])
} else {
media_id.clone()
};
let details = entry.details.clone().unwrap_or_default();
let action_class = action_badge_class(&entry.action);
let timestamp = format_timestamp(&entry.timestamp);
let click_id = media_id.clone();
let has_media_id = !media_id.is_empty();
rsx! {
tr { key: "{entry.id}",
td {
span { class: "type-badge {action_class}", "{entry.action}" }
}
td {
if has_media_id {
span {
class: "mono clickable",
onclick: move |_| {
on_select.call(click_id.clone());
},
"{truncated_id}"
}
} else {
span { class: "mono", "{truncated_id}" }
}
}
td { "{details}" }
td { "{timestamp}" }
}
}
}
}
}
}
rsx! {
div { class: "audit-controls",
select {
class: "filter-select",
value: "{audit_filter}",
onchange: move |evt: Event<FormData>| {
on_filter_change.call(evt.value().to_string());
},
for option in ACTION_OPTIONS.iter() {
option {
key: "{option}",
value: "{option}",
selected: audit_filter == *option,
"{option}"
}
}
}
}
PaginationControls { current_page: audit_page, total_pages, on_page_change }
}
table { class: "data-table",
thead {
tr {
th { "Action" }
th { "Media ID" }
th { "Details" }
th { "Timestamp" }
}
}
tbody {
for entry in entries.iter() {
{
let media_id = entry.media_id.clone().unwrap_or_default();
let truncated_id = if media_id.len() > 8 {
format!("{}...", &media_id[..8])
} else {
media_id.clone()
};
let details = entry.details.clone().unwrap_or_default();
let action_class = action_badge_class(&entry.action);
let timestamp = format_timestamp(&entry.timestamp);
let click_id = media_id.clone();
let has_media_id = !media_id.is_empty();
rsx! {
tr { key: "{entry.id}",
td {
span { class: "type-badge {action_class}", "{entry.action}" }
}
td {
if has_media_id {
span {
class: "mono clickable",
onclick: move |_| {
on_select.call(click_id.clone());
},
"{truncated_id}"
}
} else {
span { class: "mono", "{truncated_id}" }
}
}
td { "{details}" }
td { "{timestamp}" }
}
}
}
}
}
}
PaginationControls { current_page: audit_page, total_pages, on_page_change }
}
}
fn action_badge_class(action: &str) -> &'static str {
match action {
"imported" => "type-image",
"deleted" => "action-danger",
"tagged" | "untagged" => "tag-badge",
"updated" => "action-updated",
"added_to_collection" => "action-collection",
"removed_from_collection" => "action-collection-remove",
"opened" => "action-opened",
"scanned" => "action-scanned",
_ => "type-other",
}
match action {
"imported" => "type-image",
"deleted" => "action-danger",
"tagged" | "untagged" => "tag-badge",
"updated" => "action-updated",
"added_to_collection" => "action-collection",
"removed_from_collection" => "action-collection-remove",
"opened" => "action-opened",
"scanned" => "action-scanned",
_ => "type-other",
}
}

696
crates/pinakes-ui/src/components/backlinks_panel.rs
View file

@ -7,374 +7,384 @@ use crate::client::{ApiClient, BacklinkItem, BacklinksResponse};
/// Panel displaying backlinks (incoming links) to a media item.
#[component]
pub fn BacklinksPanel(
media_id: String,
client: ApiClient,
on_navigate: EventHandler<String>,
media_id: String,
client: ApiClient,
on_navigate: EventHandler<String>,
) -> Element {
let mut backlinks = use_signal(|| Option::<BacklinksResponse>::None);
let mut loading = use_signal(|| true);
let mut error = use_signal(|| Option::<String>::None);
let mut collapsed = use_signal(|| false);
let mut reindexing = use_signal(|| false);
let mut reindex_message = use_signal(|| Option::<(String, bool)>::None); // (message, is_error)
let mut backlinks = use_signal(|| Option::<BacklinksResponse>::None);
let mut loading = use_signal(|| true);
let mut error = use_signal(|| Option::<String>::None);
let mut collapsed = use_signal(|| false);
let mut reindexing = use_signal(|| false);
let mut reindex_message = use_signal(|| Option::<(String, bool)>::None); // (message, is_error)
// Clone values for manual fetch function (used after reindex)
let fetch_client = client.clone();
let fetch_media_id = media_id.clone();
// Clone values for manual fetch function (used after reindex)
let fetch_client = client.clone();
let fetch_media_id = media_id.clone();
// Clone for reindex handler
let reindex_client = client.clone();
let reindex_media_id = media_id.clone();
// Clone for reindex handler
let reindex_client = client.clone();
let reindex_media_id = media_id.clone();
// Fetch backlinks using use_resource to automatically track media_id changes
// This ensures the backlinks are reloaded whenever we navigate to a different note
let backlinks_resource = use_resource(move || {
let client = client.clone();
let id = media_id.clone();
async move { client.get_backlinks(&id).await }
});
// Fetch backlinks using use_resource to automatically track media_id changes
// This ensures the backlinks are reloaded whenever we navigate to a different
// note
let backlinks_resource = use_resource(move || {
let client = client.clone();
let id = media_id.clone();
async move { client.get_backlinks(&id).await }
});
// Update local state based on resource state
use_effect(move || match &*backlinks_resource.read_unchecked() {
Some(Ok(resp)) => {
backlinks.set(Some(resp.clone()));
loading.set(false);
error.set(None);
}
Some(Err(e)) => {
error.set(Some(format!("Failed to load backlinks: {e}")));
loading.set(false);
}
None => {
loading.set(true);
}
});
// Fetch backlinks function for manual refresh (like after reindex)
let fetch_backlinks = {
let client = fetch_client;
let id = fetch_media_id;
move || {
let client = client.clone();
let id = id.clone();
spawn(async move {
loading.set(true);
error.set(None);
match client.get_backlinks(&id).await {
Ok(resp) => {
backlinks.set(Some(resp));
}
Err(e) => {
error.set(Some(format!("Failed to load backlinks: {e}")));
}
}
loading.set(false);
});
}
};
// Reindex links handler
let on_reindex = {
let client = reindex_client;
let id = reindex_media_id;
let fetch_backlinks = fetch_backlinks.clone();
move |evt: MouseEvent| {
evt.stop_propagation(); // Don't toggle collapse
let client = client.clone();
let id = id.clone();
let fetch_backlinks = fetch_backlinks.clone();
spawn(async move {
reindexing.set(true);
reindex_message.set(None);
match client.reindex_links(&id).await {
Ok(resp) => {
reindex_message.set(Some((
format!("Reindexed: {} links extracted", resp.links_extracted),
false,
)));
// Refresh backlinks after reindex
fetch_backlinks();
}
Err(e) => {
reindex_message.set(Some((format!("Reindex failed: {e}"), true)));
}
}
reindexing.set(false);
});
}
};
let is_loading = *loading.read();
let is_collapsed = *collapsed.read();
let is_reindexing = *reindexing.read();
let backlink_data = backlinks.read();
let count = backlink_data.as_ref().map(|b| b.count).unwrap_or(0);
rsx! {
div { class: "backlinks-panel",
// Header with toggle
div {
class: "backlinks-header",
onclick: move |_| {
let current = *collapsed.read();
collapsed.set(!current);
},
span { class: "backlinks-toggle",
if is_collapsed {
"\u{25b6}"
} else {
"\u{25bc}"
}
}
span { class: "backlinks-title", "Backlinks" }
span { class: "backlinks-count", "({count})" }
// Reindex button
button {
class: "backlinks-reindex-btn",
title: "Re-extract links from this note",
disabled: is_reindexing,
onclick: on_reindex,
if is_reindexing {
span { class: "spinner-tiny" }
} else {
"\u{21bb}" // Refresh symbol
}
}
}
if !is_collapsed {
div { class: "backlinks-content",
// Show reindex message if present
if let Some((ref msg, is_err)) = *reindex_message.read() {
div { class: if is_err { "backlinks-message error" } else { "backlinks-message success" },
"{msg}"
}
}
if is_loading {
div { class: "backlinks-loading",
div { class: "spinner-small" }
"Loading backlinks..."
}
}
if let Some(ref err) = *error.read() {
div { class: "backlinks-error", "{err}" }
}
if !is_loading && error.read().is_none() {
if let Some(ref data) = *backlink_data {
if data.backlinks.is_empty() {
div { class: "backlinks-empty", "No other notes link to this one." }
} else {
ul { class: "backlinks-list",
for backlink in &data.backlinks {
BacklinkItemView {
backlink: backlink.clone(),
on_navigate: on_navigate.clone(),
}
}
}
}
}
}
}
}
}
// Update local state based on resource state
use_effect(move || {
match &*backlinks_resource.read_unchecked() {
Some(Ok(resp)) => {
backlinks.set(Some(resp.clone()));
loading.set(false);
error.set(None);
},
Some(Err(e)) => {
error.set(Some(format!("Failed to load backlinks: {e}")));
loading.set(false);
},
None => {
loading.set(true);
},
}
});
// Fetch backlinks function for manual refresh (like after reindex)
let fetch_backlinks = {
let client = fetch_client;
let id = fetch_media_id;
move || {
let client = client.clone();
let id = id.clone();
spawn(async move {
loading.set(true);
error.set(None);
match client.get_backlinks(&id).await {
Ok(resp) => {
backlinks.set(Some(resp));
},
Err(e) => {
error.set(Some(format!("Failed to load backlinks: {e}")));
},
}
loading.set(false);
});
}
};
// Reindex links handler
let on_reindex = {
let client = reindex_client;
let id = reindex_media_id;
let fetch_backlinks = fetch_backlinks.clone();
move |evt: MouseEvent| {
evt.stop_propagation(); // Don't toggle collapse
let client = client.clone();
let id = id.clone();
let fetch_backlinks = fetch_backlinks.clone();
spawn(async move {
reindexing.set(true);
reindex_message.set(None);
match client.reindex_links(&id).await {
Ok(resp) => {
reindex_message.set(Some((
format!("Reindexed: {} links extracted", resp.links_extracted),
false,
)));
// Refresh backlinks after reindex
fetch_backlinks();
},
Err(e) => {
reindex_message.set(Some((format!("Reindex failed: {e}"), true)));
},
}
reindexing.set(false);
});
}
};
let is_loading = *loading.read();
let is_collapsed = *collapsed.read();
let is_reindexing = *reindexing.read();
let backlink_data = backlinks.read();
let count = backlink_data.as_ref().map(|b| b.count).unwrap_or(0);
rsx! {
div { class: "backlinks-panel",
// Header with toggle
div {
class: "backlinks-header",
onclick: move |_| {
let current = *collapsed.read();
collapsed.set(!current);
},
span { class: "backlinks-toggle",
if is_collapsed {
"\u{25b6}"
} else {
"\u{25bc}"
}
}
span { class: "backlinks-title", "Backlinks" }
span { class: "backlinks-count", "({count})" }
// Reindex button
button {
class: "backlinks-reindex-btn",
title: "Re-extract links from this note",
disabled: is_reindexing,
onclick: on_reindex,
if is_reindexing {
span { class: "spinner-tiny" }
} else {
"\u{21bb}" // Refresh symbol
}
}
}
if !is_collapsed {
div { class: "backlinks-content",
// Show reindex message if present
if let Some((ref msg, is_err)) = *reindex_message.read() {
div { class: if is_err { "backlinks-message error" } else { "backlinks-message success" },
"{msg}"
}
}
if is_loading {
div { class: "backlinks-loading",
div { class: "spinner-small" }
"Loading backlinks..."
}
}
if let Some(ref err) = *error.read() {
div { class: "backlinks-error", "{err}" }
}
if !is_loading && error.read().is_none() {
if let Some(ref data) = *backlink_data {
if data.backlinks.is_empty() {
div { class: "backlinks-empty", "No other notes link to this one." }
} else {
ul { class: "backlinks-list",
for backlink in &data.backlinks {
BacklinkItemView {
backlink: backlink.clone(),
on_navigate: on_navigate.clone(),
}
}
}
}
}
}
}
}
}
}
}
/// Individual backlink item view.
#[component]
fn BacklinkItemView(backlink: BacklinkItem, on_navigate: EventHandler<String>) -> Element {
let source_id = backlink.source_id.clone();
let title = backlink
.source_title
.clone()
.unwrap_or_else(|| backlink.source_path.clone());
let context = backlink.context.clone();
let line_number = backlink.line_number;
let link_type = backlink.link_type.clone();
fn BacklinkItemView(
backlink: BacklinkItem,
on_navigate: EventHandler<String>,
) -> Element {
let source_id = backlink.source_id.clone();
let title = backlink
.source_title
.clone()
.unwrap_or_else(|| backlink.source_path.clone());
let context = backlink.context.clone();
let line_number = backlink.line_number;
let link_type = backlink.link_type.clone();
rsx! {
li {
class: "backlink-item",
onclick: move |_| on_navigate.call(source_id.clone()),
div { class: "backlink-source",
span { class: "backlink-title", "{title}" }
span { class: "backlink-type-badge backlink-type-{link_type}", "{link_type}" }
}
if let Some(ref ctx) = context {
div { class: "backlink-context",
if let Some(ln) = line_number {
span { class: "backlink-line", "L{ln}: " }
}
"\"{ctx}\""
}
}
}
}
rsx! {
li {
class: "backlink-item",
onclick: move |_| on_navigate.call(source_id.clone()),
div { class: "backlink-source",
span { class: "backlink-title", "{title}" }
span { class: "backlink-type-badge backlink-type-{link_type}", "{link_type}" }
}
if let Some(ref ctx) = context {
div { class: "backlink-context",
if let Some(ln) = line_number {
span { class: "backlink-line", "L{ln}: " }
}
"\"{ctx}\""
}
}
}
}
}
/// Outgoing links panel showing what this note links to.
#[component]
pub fn OutgoingLinksPanel(
media_id: String,
client: ApiClient,
on_navigate: EventHandler<String>,
media_id: String,
client: ApiClient,
on_navigate: EventHandler<String>,
) -> Element {
let mut links = use_signal(|| Option::<crate::client::OutgoingLinksResponse>::None);
let mut loading = use_signal(|| true);
let mut error = use_signal(|| Option::<String>::None);
let mut collapsed = use_signal(|| true); // Collapsed by default
let mut global_unresolved = use_signal(|| Option::<u64>::None);
let mut links =
use_signal(|| Option::<crate::client::OutgoingLinksResponse>::None);
let mut loading = use_signal(|| true);
let mut error = use_signal(|| Option::<String>::None);
let mut collapsed = use_signal(|| true); // Collapsed by default
let mut global_unresolved = use_signal(|| Option::<u64>::None);
// Fetch outgoing links using use_resource to automatically track media_id changes
// This ensures the links are reloaded whenever we navigate to a different note
let links_resource = use_resource(move || {
let client = client.clone();
let id = media_id.clone();
async move {
let links_result = client.get_outgoing_links(&id).await;
let unresolved_count = client.get_unresolved_links_count().await.ok();
(links_result, unresolved_count)
}
});
// Update local state based on resource state
use_effect(move || match &*links_resource.read_unchecked() {
Some((Ok(resp), unresolved_count)) => {
links.set(Some(resp.clone()));
loading.set(false);
error.set(None);
if let Some(count) = unresolved_count {
global_unresolved.set(Some(*count));
}
}
Some((Err(e), _)) => {
error.set(Some(format!("Failed to load links: {e}")));
loading.set(false);
}
None => {
loading.set(true);
}
});
let is_loading = *loading.read();
let is_collapsed = *collapsed.read();
let link_data = links.read();
let count = link_data.as_ref().map(|l| l.count).unwrap_or(0);
let unresolved_in_note = link_data
.as_ref()
.map(|l| l.links.iter().filter(|link| !link.is_resolved).count())
.unwrap_or(0);
rsx! {
div { class: "outgoing-links-panel",
// Header with toggle
div {
class: "outgoing-links-header",
onclick: move |_| {
let current = *collapsed.read();
collapsed.set(!current);
},
span { class: "outgoing-links-toggle",
if is_collapsed {
"\u{25b6}"
} else {
"\u{25bc}"
}
}
span { class: "outgoing-links-title", "Outgoing Links" }
span { class: "outgoing-links-count", "({count})" }
if unresolved_in_note > 0 {
span {
class: "outgoing-links-unresolved-badge",
title: "Unresolved links in this note",
"{unresolved_in_note} unresolved"
}
}
}
if !is_collapsed {
div { class: "outgoing-links-content",
if is_loading {
div { class: "outgoing-links-loading",
div { class: "spinner-small" }
"Loading links..."
}
}
if let Some(ref err) = *error.read() {
div { class: "outgoing-links-error", "{err}" }
}
if !is_loading && error.read().is_none() {
if let Some(ref data) = *link_data {
if data.links.is_empty() {
div { class: "outgoing-links-empty", "This note has no outgoing links." }
} else {
ul { class: "outgoing-links-list",
for link in &data.links {
OutgoingLinkItemView {
link: link.clone(),
on_navigate: on_navigate.clone(),
}
}
}
}
}
// Show global unresolved count if any
if let Some(global_count) = *global_unresolved.read() {
if global_count > 0 {
div { class: "outgoing-links-global-unresolved",
span { class: "unresolved-icon", "\u{26a0}" }
" {global_count} unresolved links across all notes"
}
}
}
}
}
}
}
// Fetch outgoing links using use_resource to automatically track media_id
// changes This ensures the links are reloaded whenever we navigate to a
// different note
let links_resource = use_resource(move || {
let client = client.clone();
let id = media_id.clone();
async move {
let links_result = client.get_outgoing_links(&id).await;
let unresolved_count = client.get_unresolved_links_count().await.ok();
(links_result, unresolved_count)
}
});
// Update local state based on resource state
use_effect(move || {
match &*links_resource.read_unchecked() {
Some((Ok(resp), unresolved_count)) => {
links.set(Some(resp.clone()));
loading.set(false);
error.set(None);
if let Some(count) = unresolved_count {
global_unresolved.set(Some(*count));
}
},
Some((Err(e), _)) => {
error.set(Some(format!("Failed to load links: {e}")));
loading.set(false);
},
None => {
loading.set(true);
},
}
});
let is_loading = *loading.read();
let is_collapsed = *collapsed.read();
let link_data = links.read();
let count = link_data.as_ref().map(|l| l.count).unwrap_or(0);
let unresolved_in_note = link_data
.as_ref()
.map(|l| l.links.iter().filter(|link| !link.is_resolved).count())
.unwrap_or(0);
rsx! {
div { class: "outgoing-links-panel",
// Header with toggle
div {
class: "outgoing-links-header",
onclick: move |_| {
let current = *collapsed.read();
collapsed.set(!current);
},
span { class: "outgoing-links-toggle",
if is_collapsed {
"\u{25b6}"
} else {
"\u{25bc}"
}
}
span { class: "outgoing-links-title", "Outgoing Links" }
span { class: "outgoing-links-count", "({count})" }
if unresolved_in_note > 0 {
span {
class: "outgoing-links-unresolved-badge",
title: "Unresolved links in this note",
"{unresolved_in_note} unresolved"
}
}
}
if !is_collapsed {
div { class: "outgoing-links-content",
if is_loading {
div { class: "outgoing-links-loading",
div { class: "spinner-small" }
"Loading links..."
}
}
if let Some(ref err) = *error.read() {
div { class: "outgoing-links-error", "{err}" }
}
if !is_loading && error.read().is_none() {
if let Some(ref data) = *link_data {
if data.links.is_empty() {
div { class: "outgoing-links-empty", "This note has no outgoing links." }
} else {
ul { class: "outgoing-links-list",
for link in &data.links {
OutgoingLinkItemView {
link: link.clone(),
on_navigate: on_navigate.clone(),
}
}
}
}
}
// Show global unresolved count if any
if let Some(global_count) = *global_unresolved.read() {
if global_count > 0 {
div { class: "outgoing-links-global-unresolved",
span { class: "unresolved-icon", "\u{26a0}" }
" {global_count} unresolved links across all notes"
}
}
}
}
}
}
}
}
}
/// Individual outgoing link item view.
#[component]
fn OutgoingLinkItemView(
link: crate::client::OutgoingLinkItem,
on_navigate: EventHandler<String>,
link: crate::client::OutgoingLinkItem,
on_navigate: EventHandler<String>,
) -> Element {
let target_id = link.target_id.clone();
let target_path = link.target_path.clone();
let link_text = link.link_text.clone();
let is_resolved = link.is_resolved;
let link_type = link.link_type.clone();
let target_id = link.target_id.clone();
let target_path = link.target_path.clone();
let link_text = link.link_text.clone();
let is_resolved = link.is_resolved;
let link_type = link.link_type.clone();
let display_text = link_text.unwrap_or_else(|| target_path.clone());
let resolved_class = if is_resolved {
"resolved"
} else {
"unresolved"
};
let display_text = link_text.unwrap_or_else(|| target_path.clone());
let resolved_class = if is_resolved {
"resolved"
} else {
"unresolved"
};
rsx! {
li {
class: "outgoing-link-item {resolved_class}",
onclick: move |_| {
if let Some(ref id) = target_id {
on_navigate.call(id.clone());
}
},
div { class: "outgoing-link-target",
span { class: "outgoing-link-text", "{display_text}" }
span { class: "outgoing-link-type-badge link-type-{link_type}", "{link_type}" }
if !is_resolved {
span { class: "unresolved-badge", "unresolved" }
}
}
}
}
rsx! {
li {
class: "outgoing-link-item {resolved_class}",
onclick: move |_| {
if let Some(ref id) = target_id {
on_navigate.call(id.clone());
}
},
div { class: "outgoing-link-target",
span { class: "outgoing-link-text", "{display_text}" }
span { class: "outgoing-link-type-badge link-type-{link_type}", "{link_type}" }
if !is_resolved {
span { class: "unresolved-badge", "unresolved" }
}
}
}
}
}

64
crates/pinakes-ui/src/components/breadcrumb.rs
View file

@ -2,41 +2,41 @@ use dioxus::prelude::*;
#[derive(Debug, Clone, PartialEq)]
pub struct BreadcrumbItem {
pub label: String,
pub view: Option<String>,
pub label: String,
pub view: Option<String>,
}
#[component]
pub fn Breadcrumb(
items: Vec<BreadcrumbItem>,
on_navigate: EventHandler<Option<String>>,
items: Vec<BreadcrumbItem>,
on_navigate: EventHandler<Option<String>>,
) -> Element {
rsx! {
nav { class: "breadcrumb",
for (i , item) in items.iter().enumerate() {
if i > 0 {
span { class: "breadcrumb-sep", " > " }
}
if i < items.len() - 1 {
{
let view = item.view.clone();
let label = item.label.clone();
rsx! {
a {
class: "breadcrumb-link",
href: "#",
onclick: move |e: Event<MouseData>| {
e.prevent_default();
on_navigate.call(view.clone());
},
"{label}"
}
}
}
} else {
span { class: "breadcrumb-current", "{item.label}" }
}
}
}
}
rsx! {
nav { class: "breadcrumb",
for (i , item) in items.iter().enumerate() {
if i > 0 {
span { class: "breadcrumb-sep", " > " }
}
if i < items.len() - 1 {
{
let view = item.view.clone();
let label = item.label.clone();
rsx! {
a {
class: "breadcrumb-link",
href: "#",
onclick: move |e: Event<MouseData>| {
e.prevent_default();
on_navigate.call(view.clone());
},
"{label}"
}
}
}
} else {
span { class: "breadcrumb-current", "{item.label}" }
}
}
}
}
}

551
crates/pinakes-ui/src/components/collections.rs
View file

@ -5,101 +5,101 @@ use crate::client::{CollectionResponse, MediaResponse};
#[component]
pub fn Collections(
collections: Vec<CollectionResponse>,
collection_members: Vec<MediaResponse>,
viewing_collection: Option<String>,
on_create: EventHandler<(String, String, Option<String>, Option<String>)>,
on_delete: EventHandler<String>,
on_view_members: EventHandler<String>,
on_back_to_list: EventHandler<()>,
on_remove_member: EventHandler<(String, String)>,
on_select: EventHandler<String>,
on_add_member: EventHandler<(String, String)>,
all_media: Vec<MediaResponse>,
collections: Vec<CollectionResponse>,
collection_members: Vec<MediaResponse>,
viewing_collection: Option<String>,
on_create: EventHandler<(String, String, Option<String>, Option<String>)>,
on_delete: EventHandler<String>,
on_view_members: EventHandler<String>,
on_back_to_list: EventHandler<()>,
on_remove_member: EventHandler<(String, String)>,
on_select: EventHandler<String>,
on_add_member: EventHandler<(String, String)>,
all_media: Vec<MediaResponse>,
) -> Element {
let mut new_name = use_signal(String::new);
let mut new_kind = use_signal(|| String::from("manual"));
let mut new_description = use_signal(String::new);
let mut new_filter_query = use_signal(String::new);
let mut confirm_delete: Signal<Option<String>> = use_signal(|| None);
let mut show_add_modal = use_signal(|| false);
let mut new_name = use_signal(String::new);
let mut new_kind = use_signal(|| String::from("manual"));
let mut new_description = use_signal(String::new);
let mut new_filter_query = use_signal(String::new);
let mut confirm_delete: Signal<Option<String>> = use_signal(|| None);
let mut show_add_modal = use_signal(|| false);
// Detail view: viewing a specific collection's members
if let Some(ref col_id) = viewing_collection {
let col_name = collections
.iter()
.find(|c| &c.id == col_id)
.map(|c| c.name.clone())
.unwrap_or_else(|| col_id.clone());
// Detail view: viewing a specific collection's members
if let Some(ref col_id) = viewing_collection {
let col_name = collections
.iter()
.find(|c| &c.id == col_id)
.map(|c| c.name.clone())
.unwrap_or_else(|| col_id.clone());
let back_click = move |_| on_back_to_list.call(());
let back_click = move |_| on_back_to_list.call(());
// Collect IDs of current members to filter available media
let member_ids: Vec<String> = collection_members.iter().map(|m| m.id.clone()).collect();
let available_media: Vec<&MediaResponse> = all_media
.iter()
.filter(|m| !member_ids.contains(&m.id))
.collect();
// Collect IDs of current members to filter available media
let member_ids: Vec<String> =
collection_members.iter().map(|m| m.id.clone()).collect();
let available_media: Vec<&MediaResponse> = all_media
.iter()
.filter(|m| !member_ids.contains(&m.id))
.collect();
let modal_col_id = col_id.clone();
let modal_col_id = col_id.clone();
return rsx! {
button { class: "btn btn-ghost mb-16", onclick: back_click, "\u{2190} Back to Collections" }
return rsx! {
button { class: "btn btn-ghost mb-16", onclick: back_click, "\u{2190} Back to Collections" }
h3 { class: "mb-16", "{col_name}" }
h3 { class: "mb-16", "{col_name}" }
div { class: "form-row mb-16",
button {
class: "btn btn-primary",
onclick: move |_| show_add_modal.set(true),
"Add Media"
}
div { class: "form-row mb-16",
button {
class: "btn btn-primary",
onclick: move |_| show_add_modal.set(true),
"Add Media"
}
}
if collection_members.is_empty() {
div { class: "empty-state",
p { class: "empty-subtitle", "This collection has no members." }
}
} else {
table { class: "data-table",
thead {
tr {
th { "Name" }
th { "Type" }
th { "Artist" }
th { "Size" }
th { "" }
}
if collection_members.is_empty() {
div { class: "empty-state",
p { class: "empty-subtitle", "This collection has no members." }
}
} else {
table { class: "data-table",
thead {
tr {
th { "Name" }
th { "Type" }
th { "Artist" }
th { "Size" }
th { "" }
}
tbody {
for item in collection_members.iter() {
{
let artist = item.artist.clone().unwrap_or_default();
let size = format_size(item.file_size);
let badge_class = type_badge_class(&item.media_type);
let remove_cid = col_id.clone();
let remove_mid = item.id.clone();
let row_click = {
let mid = item.id.clone();
move |_| on_select.call(mid.clone())
};
rsx! {
tr { key: "{item.id}", class: "clickable-row", onclick: row_click,
td { "{item.file_name}" }
td {
span { class: "type-badge {badge_class}", "{item.media_type}" }
}
td { "{artist}" }
td { "{size}" }
td {
button {
class: "btn btn-danger btn-sm",
onclick: move |e: Event<MouseData>| {
e.stop_propagation();
on_remove_member.call((remove_cid.clone(), remove_mid.clone()));
},
"Remove"
}
}
tbody {
for item in collection_members.iter() {
{
let artist = item.artist.clone().unwrap_or_default();
let size = format_size(item.file_size);
let badge_class = type_badge_class(&item.media_type);
let remove_cid = col_id.clone();
let remove_mid = item.id.clone();
let row_click = {
let mid = item.id.clone();
move |_| on_select.call(mid.clone())
};
rsx! {
tr { key: "{item.id}", class: "clickable-row", onclick: row_click,
td { "{item.file_name}" }
td {
span { class: "type-badge {badge_class}", "{item.media_type}" }
}
td { "{artist}" }
td { "{size}" }
td {
button {
class: "btn btn-danger btn-sm",
onclick: move |e: Event<MouseData>| {
e.stop_propagation();
on_remove_member.call((remove_cid.clone(), remove_mid.clone()));
},
"Remove"
}
}
}
@ -108,56 +108,56 @@ pub fn Collections(
}
}
}
}
// Add Media modal
if *show_add_modal.read() {
// Add Media modal
if *show_add_modal.read() {
div {
class: "modal-overlay",
onclick: move |_| show_add_modal.set(false),
div {
class: "modal-overlay",
onclick: move |_| show_add_modal.set(false),
div {
class: "modal",
onclick: move |e: Event<MouseData>| e.stop_propagation(),
div { class: "modal-header",
h3 { "Add Media to Collection" }
button {
class: "btn btn-ghost",
onclick: move |_| show_add_modal.set(false),
"\u{2715}"
}
class: "modal",
onclick: move |e: Event<MouseData>| e.stop_propagation(),
div { class: "modal-header",
h3 { "Add Media to Collection" }
button {
class: "btn btn-ghost",
onclick: move |_| show_add_modal.set(false),
"\u{2715}"
}
div { class: "modal-body",
if available_media.is_empty() {
p { "No media available to add." }
} else {
table { class: "data-table",
thead {
tr {
th { "Name" }
th { "Type" }
th { "Artist" }
}
}
div { class: "modal-body",
if available_media.is_empty() {
p { "No media available to add." }
} else {
table { class: "data-table",
thead {
tr {
th { "Name" }
th { "Type" }
th { "Artist" }
}
tbody {
for media in available_media.iter() {
{
let artist = media.artist.clone().unwrap_or_default();
let badge_class = type_badge_class(&media.media_type);
let add_click = {
let cid = modal_col_id.clone();
let mid = media.id.clone();
move |_| {
on_add_member.call((cid.clone(), mid.clone()));
show_add_modal.set(false);
}
};
rsx! {
tr { key: "{media.id}", class: "clickable-row", onclick: add_click,
td { "{media.file_name}" }
td {
span { class: "type-badge {badge_class}", "{media.media_type}" }
}
td { "{artist}" }
}
tbody {
for media in available_media.iter() {
{
let artist = media.artist.clone().unwrap_or_default();
let badge_class = type_badge_class(&media.media_type);
let add_click = {
let cid = modal_col_id.clone();
let mid = media.id.clone();
move |_| {
on_add_member.call((cid.clone(), mid.clone()));
show_add_modal.set(false);
}
};
rsx! {
tr { key: "{media.id}", class: "clickable-row", onclick: add_click,
td { "{media.file_name}" }
td {
span { class: "type-badge {badge_class}", "{media.media_type}" }
}
td { "{artist}" }
}
}
}
@ -168,155 +168,156 @@ pub fn Collections(
}
}
}
};
}
// List view: show all collections with create form
let is_virtual = *new_kind.read() == "virtual";
let create_click = move |_| {
let name = new_name.read().clone();
if name.is_empty() {
return;
}
let kind = new_kind.read().clone();
let desc = {
let d = new_description.read().clone();
if d.is_empty() { None } else { Some(d) }
};
let filter = {
let f = new_filter_query.read().clone();
if f.is_empty() { None } else { Some(f) }
};
on_create.call((name, kind, desc, filter));
new_name.set(String::new());
new_kind.set(String::from("manual"));
new_description.set(String::new());
new_filter_query.set(String::new());
};
}
rsx! {
div { class: "card",
div { class: "card-header",
h3 { class: "card-title", "Collections" }
}
// List view: show all collections with create form
let is_virtual = *new_kind.read() == "virtual";
div { class: "form-row mb-16",
input {
r#type: "text",
placeholder: "Collection name...",
value: "{new_name}",
oninput: move |e| new_name.set(e.value()),
}
select {
value: "{new_kind}",
onchange: move |e| new_kind.set(e.value()),
option { value: "manual", "Manual" }
option { value: "virtual", "Virtual" }
}
input {
r#type: "text",
placeholder: "Description (optional)...",
value: "{new_description}",
oninput: move |e| new_description.set(e.value()),
}
}
if is_virtual {
div { class: "form-row mb-16",
input {
r#type: "text",
placeholder: "Filter query for virtual collection...",
value: "{new_filter_query}",
oninput: move |e| new_filter_query.set(e.value()),
}
}
}
div { class: "form-row mb-16",
button { class: "btn btn-primary", onclick: create_click, "Create" }
}
if collections.is_empty() {
div { class: "empty-state",
p { class: "empty-subtitle", "No collections yet. Create one above." }
}
} else {
table { class: "data-table",
thead {
tr {
th { "Name" }
th { "Kind" }
th { "Description" }
th { "" }
th { "" }
}
}
tbody {
for col in collections.iter() {
{
let desc = col.description.clone().unwrap_or_default();
let kind_class = if col.kind == "virtual" {
"type-document"
} else {
"type-other"
};
let view_click = {
let id = col.id.clone();
move |_| on_view_members.call(id.clone())
};
let col_id_for_delete = col.id.clone();
let is_confirming = confirm_delete
.read()
.as_ref()
.map(|id| id == &col.id)
.unwrap_or(false);
rsx! {
tr { key: "{col.id}",
td { "{col.name}" }
td {
span { class: "type-badge {kind_class}", "{col.kind}" }
}
td { "{desc}" }
td {
button { class: "btn btn-sm btn-secondary", onclick: view_click, "View" }
}
td {
if is_confirming {
button {
class: "btn btn-danger btn-sm",
onclick: {
let id = col_id_for_delete.clone();
move |_| {
on_delete.call(id.clone());
confirm_delete.set(None);
}
},
"Confirm"
}
button {
class: "btn btn-ghost btn-sm",
onclick: move |_| confirm_delete.set(None),
"Cancel"
}
} else {
button {
class: "btn btn-danger btn-sm",
onclick: {
let id = col_id_for_delete.clone();
move |_| confirm_delete.set(Some(id.clone()))
},
"Delete"
}
}
}
}
}
}
}
}
}
}
}
let create_click = move |_| {
let name = new_name.read().clone();
if name.is_empty() {
return;
}
let kind = new_kind.read().clone();
let desc = {
let d = new_description.read().clone();
if d.is_empty() { None } else { Some(d) }
};
let filter = {
let f = new_filter_query.read().clone();
if f.is_empty() { None } else { Some(f) }
};
on_create.call((name, kind, desc, filter));
new_name.set(String::new());
new_kind.set(String::from("manual"));
new_description.set(String::new());
new_filter_query.set(String::new());
};
rsx! {
div { class: "card",
div { class: "card-header",
h3 { class: "card-title", "Collections" }
}
div { class: "form-row mb-16",
input {
r#type: "text",
placeholder: "Collection name...",
value: "{new_name}",
oninput: move |e| new_name.set(e.value()),
}
select {
value: "{new_kind}",
onchange: move |e| new_kind.set(e.value()),
option { value: "manual", "Manual" }
option { value: "virtual", "Virtual" }
}
input {
r#type: "text",
placeholder: "Description (optional)...",
value: "{new_description}",
oninput: move |e| new_description.set(e.value()),
}
}
if is_virtual {
div { class: "form-row mb-16",
input {
r#type: "text",
placeholder: "Filter query for virtual collection...",
value: "{new_filter_query}",
oninput: move |e| new_filter_query.set(e.value()),
}
}
}
div { class: "form-row mb-16",
button { class: "btn btn-primary", onclick: create_click, "Create" }
}
if collections.is_empty() {
div { class: "empty-state",
p { class: "empty-subtitle", "No collections yet. Create one above." }
}
} else {
table { class: "data-table",
thead {
tr {
th { "Name" }
th { "Kind" }
th { "Description" }
th { "" }
th { "" }
}
}
tbody {
for col in collections.iter() {
{
let desc = col.description.clone().unwrap_or_default();
let kind_class = if col.kind == "virtual" {
"type-document"
} else {
"type-other"
};
let view_click = {
let id = col.id.clone();
move |_| on_view_members.call(id.clone())
};
let col_id_for_delete = col.id.clone();
let is_confirming = confirm_delete
.read()
.as_ref()
.map(|id| id == &col.id)
.unwrap_or(false);
rsx! {
tr { key: "{col.id}",
td { "{col.name}" }
td {
span { class: "type-badge {kind_class}", "{col.kind}" }
}
td { "{desc}" }
td {
button { class: "btn btn-sm btn-secondary", onclick: view_click, "View" }
}
td {
if is_confirming {
button {
class: "btn btn-danger btn-sm",
onclick: {
let id = col_id_for_delete.clone();
move |_| {
on_delete.call(id.clone());
confirm_delete.set(None);
}
},
"Confirm"
}
button {
class: "btn btn-ghost btn-sm",
onclick: move |_| confirm_delete.set(None),
"Cancel"
}
} else {
button {
class: "btn btn-danger btn-sm",
onclick: {
let id = col_id_for_delete.clone();
move |_| confirm_delete.set(Some(id.clone()))
},
"Delete"
}
}
}
}
}
}
}
}
}
}
}
}
}

358
crates/pinakes-ui/src/components/database.rs
View file

@ -5,191 +5,191 @@ use crate::client::DatabaseStatsResponse;
#[component]
pub fn Database(
stats: Option<DatabaseStatsResponse>,
on_refresh: EventHandler<()>,
on_vacuum: EventHandler<()>,
on_clear: EventHandler<()>,
on_backup: EventHandler<String>,
stats: Option<DatabaseStatsResponse>,
on_refresh: EventHandler<()>,
on_vacuum: EventHandler<()>,
on_clear: EventHandler<()>,
on_backup: EventHandler<String>,
) -> Element {
let mut confirm_clear = use_signal(|| false);
let mut confirm_vacuum = use_signal(|| false);
let mut backup_path = use_signal(String::new);
let mut confirm_clear = use_signal(|| false);
let mut confirm_vacuum = use_signal(|| false);
let mut backup_path = use_signal(String::new);
rsx! {
div { class: "card mb-16",
div { class: "card-header",
h3 { class: "card-title", "Database Overview" }
button {
class: "btn btn-sm btn-secondary",
onclick: move |_| on_refresh.call(()),
"\u{21bb} Refresh"
}
}
rsx! {
div { class: "card mb-16",
div { class: "card-header",
h3 { class: "card-title", "Database Overview" }
button {
class: "btn btn-sm btn-secondary",
onclick: move |_| on_refresh.call(()),
"\u{21bb} Refresh"
}
}
match stats.as_ref() {
Some(s) => {
let size_str = format_size(s.database_size_bytes);
rsx! {
div { class: "stats-grid",
div { class: "stat-card",
div { class: "stat-value", "{s.media_count}" }
div { class: "stat-label", "Media Items" }
}
div { class: "stat-card",
div { class: "stat-value", "{s.tag_count}" }
div { class: "stat-label", "Tags" }
}
div { class: "stat-card",
div { class: "stat-value", "{s.collection_count}" }
div { class: "stat-label", "Collections" }
}
div { class: "stat-card",
div { class: "stat-value", "{s.audit_count}" }
div { class: "stat-label", "Audit Entries" }
}
div { class: "stat-card",
div { class: "stat-value", "{size_str}" }
div { class: "stat-label", "Database Size" }
}
div { class: "stat-card",
div { class: "stat-value", "{s.backend_name}" }
div { class: "stat-label", "Backend" }
}
}
}
}
None => rsx! {
div { class: "empty-state",
p { class: "text-muted", "Loading database stats..." }
}
},
}
}
match stats.as_ref() {
Some(s) => {
let size_str = format_size(s.database_size_bytes);
rsx! {
div { class: "stats-grid",
div { class: "stat-card",
div { class: "stat-value", "{s.media_count}" }
div { class: "stat-label", "Media Items" }
}
div { class: "stat-card",
div { class: "stat-value", "{s.tag_count}" }
div { class: "stat-label", "Tags" }
}
div { class: "stat-card",
div { class: "stat-value", "{s.collection_count}" }
div { class: "stat-label", "Collections" }
}
div { class: "stat-card",
div { class: "stat-value", "{s.audit_count}" }
div { class: "stat-label", "Audit Entries" }
}
div { class: "stat-card",
div { class: "stat-value", "{size_str}" }
div { class: "stat-label", "Database Size" }
}
div { class: "stat-card",
div { class: "stat-value", "{s.backend_name}" }
div { class: "stat-label", "Backend" }
}
}
}
}
None => rsx! {
div { class: "empty-state",
p { class: "text-muted", "Loading database stats..." }
}
},
}
}
// Maintenance actions
div { class: "card mb-16",
div { class: "card-header",
h3 { class: "card-title", "Maintenance" }
}
// Maintenance actions
div { class: "card mb-16",
div { class: "card-header",
h3 { class: "card-title", "Maintenance" }
}
div { class: "db-actions",
// Vacuum
div { class: "db-action-row",
div { class: "db-action-info",
h4 { "Vacuum Database" }
p { class: "text-muted text-sm",
"Reclaim unused disk space and optimize the database. "
"This is safe to run at any time but may briefly lock the database."
}
}
if *confirm_vacuum.read() {
div { class: "db-action-confirm",
span { class: "text-sm", "Run vacuum?" }
button {
class: "btn btn-sm btn-primary",
onclick: move |_| {
confirm_vacuum.set(false);
on_vacuum.call(());
},
"Confirm"
}
button {
class: "btn btn-sm btn-ghost",
onclick: move |_| confirm_vacuum.set(false),
"Cancel"
}
}
} else {
button {
class: "btn btn-secondary",
onclick: move |_| confirm_vacuum.set(true),
"Vacuum"
}
}
}
div { class: "db-actions",
// Vacuum
div { class: "db-action-row",
div { class: "db-action-info",
h4 { "Vacuum Database" }
p { class: "text-muted text-sm",
"Reclaim unused disk space and optimize the database. "
"This is safe to run at any time but may briefly lock the database."
}
}
if *confirm_vacuum.read() {
div { class: "db-action-confirm",
span { class: "text-sm", "Run vacuum?" }
button {
class: "btn btn-sm btn-primary",
onclick: move |_| {
confirm_vacuum.set(false);
on_vacuum.call(());
},
"Confirm"
}
button {
class: "btn btn-sm btn-ghost",
onclick: move |_| confirm_vacuum.set(false),
"Cancel"
}
}
} else {
button {
class: "btn btn-secondary",
onclick: move |_| confirm_vacuum.set(true),
"Vacuum"
}
}
}
// Backup
div { class: "db-action-row",
div { class: "db-action-info",
h4 { "Backup Database" }
p { class: "text-muted text-sm",
"Create a copy of the database at the specified path. "
"The backup is a full snapshot of the current state."
}
}
div { class: "form-row",
input {
r#type: "text",
placeholder: "/path/to/backup.db",
value: "{backup_path}",
oninput: move |e| backup_path.set(e.value()),
style: "max-width: 300px;",
}
button {
class: "btn btn-secondary",
disabled: backup_path.read().is_empty(),
onclick: {
let mut backup_path = backup_path;
move |_| {
let path = backup_path.read().clone();
if !path.is_empty() {
on_backup.call(path);
backup_path.set(String::new());
}
}
},
"Backup"
}
}
}
}
}
// Backup
div { class: "db-action-row",
div { class: "db-action-info",
h4 { "Backup Database" }
p { class: "text-muted text-sm",
"Create a copy of the database at the specified path. "
"The backup is a full snapshot of the current state."
}
}
div { class: "form-row",
input {
r#type: "text",
placeholder: "/path/to/backup.db",
value: "{backup_path}",
oninput: move |e| backup_path.set(e.value()),
style: "max-width: 300px;",
}
button {
class: "btn btn-secondary",
disabled: backup_path.read().is_empty(),
onclick: {
let mut backup_path = backup_path;
move |_| {
let path = backup_path.read().clone();
if !path.is_empty() {
on_backup.call(path);
backup_path.set(String::new());
}
}
},
"Backup"
}
}
}
}
}
// Danger zone
div { class: "card mb-16 danger-card",
div { class: "card-header",
h3 { class: "card-title", style: "color: var(--danger);", "Danger Zone" }
}
// Danger zone
div { class: "card mb-16 danger-card",
div { class: "card-header",
h3 { class: "card-title", style: "color: var(--danger);", "Danger Zone" }
}
div { class: "db-actions",
div { class: "db-action-row",
div { class: "db-action-info",
h4 { "Clear All Data" }
p { class: "text-muted text-sm",
"Permanently delete all media records, tags, collections, and audit entries. "
"This cannot be undone. Files on disk are not affected."
}
}
if *confirm_clear.read() {
div { class: "db-action-confirm",
span {
class: "text-sm",
style: "color: var(--danger);",
"This will delete everything. Are you sure?"
}
button {
class: "btn btn-sm btn-danger",
onclick: move |_| {
confirm_clear.set(false);
on_clear.call(());
},
"Yes, Delete Everything"
}
button {
class: "btn btn-sm btn-ghost",
onclick: move |_| confirm_clear.set(false),
"Cancel"
}
}
} else {
button {
class: "btn btn-danger",
onclick: move |_| confirm_clear.set(true),
"Clear All Data"
}
}
}
}
}
}
div { class: "db-actions",
div { class: "db-action-row",
div { class: "db-action-info",
h4 { "Clear All Data" }
p { class: "text-muted text-sm",
"Permanently delete all media records, tags, collections, and audit entries. "
"This cannot be undone. Files on disk are not affected."
}
}
if *confirm_clear.read() {
div { class: "db-action-confirm",
span {
class: "text-sm",
style: "color: var(--danger);",
"This will delete everything. Are you sure?"
}
button {
class: "btn btn-sm btn-danger",
onclick: move |_| {
confirm_clear.set(false);
on_clear.call(());
},
"Yes, Delete Everything"
}
button {
class: "btn btn-sm btn-ghost",
onclick: move |_| confirm_clear.set(false),
"Cancel"
}
}
} else {
button {
class: "btn btn-danger",
onclick: move |_| confirm_clear.set(true),
"Clear All Data"
}
}
}
}
}
}
}

1604
crates/pinakes-ui/src/components/detail.rs
View file

File diff suppressed because it is too large Load diff

303
crates/pinakes-ui/src/components/duplicates.rs
View file

@ -5,177 +5,178 @@ use crate::client::DuplicateGroupResponse;
#[component]
pub fn Duplicates(
groups: Vec<DuplicateGroupResponse>,
server_url: String,
on_delete: EventHandler<String>,
on_refresh: EventHandler<()>,
groups: Vec<DuplicateGroupResponse>,
server_url: String,
on_delete: EventHandler<String>,
on_refresh: EventHandler<()>,
) -> Element {
let mut expanded_group = use_signal(|| Option::<String>::None);
let mut confirm_delete = use_signal(|| Option::<String>::None);
let mut expanded_group = use_signal(|| Option::<String>::None);
let mut confirm_delete = use_signal(|| Option::<String>::None);
let total_groups = groups.len();
let total_duplicates: usize = groups.iter().map(|g| g.items.len().saturating_sub(1)).sum();
let total_groups = groups.len();
let total_duplicates: usize =
groups.iter().map(|g| g.items.len().saturating_sub(1)).sum();
rsx! {
div { class: "duplicates-view",
div { class: "duplicates-header",
h3 { "Duplicates" }
div { class: "duplicates-summary",
span { class: "text-muted",
"{total_groups} group(s), {total_duplicates} duplicate(s)"
}
button {
class: "btn btn-sm btn-secondary",
onclick: move |_| on_refresh.call(()),
"Refresh"
}
}
}
rsx! {
div { class: "duplicates-view",
div { class: "duplicates-header",
h3 { "Duplicates" }
div { class: "duplicates-summary",
span { class: "text-muted",
"{total_groups} group(s), {total_duplicates} duplicate(s)"
}
button {
class: "btn btn-sm btn-secondary",
onclick: move |_| on_refresh.call(()),
"Refresh"
}
}
}
if groups.is_empty() {
div { class: "empty-state",
p { class: "text-muted", "No duplicate files found." }
}
}
if groups.is_empty() {
div { class: "empty-state",
p { class: "text-muted", "No duplicate files found." }
}
}
for group in groups.iter() {
{
let hash = group.content_hash.clone();
let is_expanded = expanded_group.read().as_ref() == Some(&hash);
let hash_for_toggle = hash.clone();
let item_count = group.items.len();
let first_name = group
.items
for group in groups.iter() {
{
let hash = group.content_hash.clone();
let is_expanded = expanded_group.read().as_ref() == Some(&hash);
let hash_for_toggle = hash.clone();
let item_count = group.items.len();
let first_name = group
.items
// Group header
// Group header
// Expanded: show items
// Expanded: show items
// Thumbnail
// Thumbnail
// Info
// Info
// Actions
// Actions
.first()
.map(|i| i.file_name.clone())
.unwrap_or_default();
let total_size: u64 = group.items.iter().map(|i| i.file_size).sum();
let short_hash = if hash.len() > 12 {
format!("{}...", &hash[..12])
} else {
hash.clone()
};
rsx! {
div { class: "duplicate-group", key: "{hash}",
.first()
.map(|i| i.file_name.clone())
.unwrap_or_default();
let total_size: u64 = group.items.iter().map(|i| i.file_size).sum();
let short_hash = if hash.len() > 12 {
format!("{}...", &hash[..12])
} else {
hash.clone()
};
rsx! {
div { class: "duplicate-group", key: "{hash}",
button {
class: "duplicate-group-header",
onclick: move |_| {
let current = expanded_group.read().clone();
if current.as_ref() == Some(&hash_for_toggle) {
expanded_group.set(None);
} else {
expanded_group.set(Some(hash_for_toggle.clone()));
}
},
span { class: "expand-icon",
if is_expanded {
"\u{25bc}"
} else {
"\u{25b6}"
}
}
span { class: "group-name", "{first_name}" }
span { class: "group-badge", "{item_count} files" }
span { class: "group-size text-muted", "{format_size(total_size)}" }
span { class: "group-hash mono text-muted", "{short_hash}" }
}
button {
class: "duplicate-group-header",
onclick: move |_| {
let current = expanded_group.read().clone();
if current.as_ref() == Some(&hash_for_toggle) {
expanded_group.set(None);
} else {
expanded_group.set(Some(hash_for_toggle.clone()));
}
},
span { class: "expand-icon",
if is_expanded {
"\u{25bc}"
} else {
"\u{25b6}"
}
}
span { class: "group-name", "{first_name}" }
span { class: "group-badge", "{item_count} files" }
span { class: "group-size text-muted", "{format_size(total_size)}" }
span { class: "group-hash mono text-muted", "{short_hash}" }
}
if is_expanded {
div { class: "duplicate-items",
for (idx , item) in group.items.iter().enumerate() {
{
let item_id = item.id.clone();
let is_first = idx == 0;
let is_confirming = confirm_delete.read().as_ref() == Some(&item_id);
let thumb_url = format!("{}/api/v1/media/{}/thumbnail", server_url, item.id);
let has_thumb = item.has_thumbnail;
if is_expanded {
div { class: "duplicate-items",
for (idx , item) in group.items.iter().enumerate() {
{
let item_id = item.id.clone();
let is_first = idx == 0;
let is_confirming = confirm_delete.read().as_ref() == Some(&item_id);
let thumb_url = format!("{}/api/v1/media/{}/thumbnail", server_url, item.id);
let has_thumb = item.has_thumbnail;
rsx! {
div {
class: if is_first { "duplicate-item duplicate-item-keep" } else { "duplicate-item" },
key: "{item_id}",
rsx! {
div {
class: if is_first { "duplicate-item duplicate-item-keep" } else { "duplicate-item" },
key: "{item_id}",
div { class: "dup-thumb",
if has_thumb {
img {
src: "{thumb_url}",
alt: "{item.file_name}",
class: "dup-thumb-img",
}
} else {
div { class: "dup-thumb-placeholder", "\u{1f5bc}" }
}
}
div { class: "dup-thumb",
if has_thumb {
img {
src: "{thumb_url}",
alt: "{item.file_name}",
class: "dup-thumb-img",
}
} else {
div { class: "dup-thumb-placeholder", "\u{1f5bc}" }
}
}
div { class: "dup-info",
div { class: "dup-filename", "{item.file_name}" }
div { class: "dup-path mono text-muted", "{item.path}" }
div { class: "dup-meta",
span { "{format_size(item.file_size)}" }
span { class: "text-muted", " | " }
span { "{format_timestamp(&item.created_at)}" }
}
}
div { class: "dup-info",
div { class: "dup-filename", "{item.file_name}" }
div { class: "dup-path mono text-muted", "{item.path}" }
div { class: "dup-meta",
span { "{format_size(item.file_size)}" }
span { class: "text-muted", " | " }
span { "{format_timestamp(&item.created_at)}" }
}
}
div { class: "dup-actions",
if is_first {
span { class: "keep-badge", "Keep" }
}
div { class: "dup-actions",
if is_first {
span { class: "keep-badge", "Keep" }
}
if is_confirming {
button {
class: "btn btn-sm btn-danger",
onclick: {
let id = item_id.clone();
move |_| {
confirm_delete.set(None);
on_delete.call(id.clone());
}
},
"Confirm"
}
button {
class: "btn btn-sm btn-ghost",
onclick: move |_| confirm_delete.set(None),
"Cancel"
}
} else if !is_first {
button {
class: "btn btn-sm btn-danger",
onclick: {
let id = item_id.clone();
move |_| confirm_delete.set(Some(id.clone()))
},
"Delete"
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
if is_confirming {
button {
class: "btn btn-sm btn-danger",
onclick: {
let id = item_id.clone();
move |_| {
confirm_delete.set(None);
on_delete.call(id.clone());
}
},
"Confirm"
}
button {
class: "btn btn-sm btn-ghost",
onclick: move |_| confirm_delete.set(None),
"Cancel"
}
} else if !is_first {
button {
class: "btn btn-sm btn-danger",
onclick: {
let id = item_id.clone();
move |_| confirm_delete.set(Some(id.clone()))
},
"Delete"
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}

1236
crates/pinakes-ui/src/components/graph_view.rs
View file

File diff suppressed because it is too large Load diff

452
crates/pinakes-ui/src/components/image_viewer.rs
View file

@ -2,243 +2,251 @@ use dioxus::prelude::*;
#[derive(Debug, Clone, Copy, PartialEq)]
enum FitMode {
FitScreen,
FitWidth,
Actual,
FitScreen,
FitWidth,
Actual,
}
impl FitMode {
fn next(self) -> Self {
match self {
Self::FitScreen => Self::FitWidth,
Self::FitWidth => Self::Actual,
Self::Actual => Self::FitScreen,
}
fn next(self) -> Self {
match self {
Self::FitScreen => Self::FitWidth,
Self::FitWidth => Self::Actual,
Self::Actual => Self::FitScreen,
}
}
fn label(self) -> &'static str {
match self {
Self::FitScreen => "Fit",
Self::FitWidth => "Width",
Self::Actual => "100%",
}
fn label(self) -> &'static str {
match self {
Self::FitScreen => "Fit",
Self::FitWidth => "Width",
Self::Actual => "100%",
}
}
}
#[component]
pub fn ImageViewer(
src: String,
alt: String,
on_close: EventHandler<()>,
#[props(default)] on_prev: Option<EventHandler<()>>,
#[props(default)] on_next: Option<EventHandler<()>>,
src: String,
alt: String,
on_close: EventHandler<()>,
#[props(default)] on_prev: Option<EventHandler<()>>,
#[props(default)] on_next: Option<EventHandler<()>>,
) -> Element {
let mut zoom = use_signal(|| 1.0f64);
let mut offset_x = use_signal(|| 0.0f64);
let mut offset_y = use_signal(|| 0.0f64);
let mut dragging = use_signal(|| false);
let mut drag_start_x = use_signal(|| 0.0f64);
let mut drag_start_y = use_signal(|| 0.0f64);
let mut fit_mode = use_signal(|| FitMode::FitScreen);
let mut zoom = use_signal(|| 1.0f64);
let mut offset_x = use_signal(|| 0.0f64);
let mut offset_y = use_signal(|| 0.0f64);
let mut dragging = use_signal(|| false);
let mut drag_start_x = use_signal(|| 0.0f64);
let mut drag_start_y = use_signal(|| 0.0f64);
let mut fit_mode = use_signal(|| FitMode::FitScreen);
let z = *zoom.read();
let ox = *offset_x.read();
let oy = *offset_y.read();
let is_dragging = *dragging.read();
let zoom_pct = (z * 100.0) as u32;
let current_fit = *fit_mode.read();
let z = *zoom.read();
let ox = *offset_x.read();
let oy = *offset_y.read();
let is_dragging = *dragging.read();
let zoom_pct = (z * 100.0) as u32;
let current_fit = *fit_mode.read();
let transform = format!("translate({ox}px, {oy}px) scale({z})");
let cursor = if z > 1.0 {
if is_dragging { "grabbing" } else { "grab" }
} else {
"default"
};
let transform = format!("translate({ox}px, {oy}px) scale({z})");
let cursor = if z > 1.0 {
if is_dragging { "grabbing" } else { "grab" }
} else {
"default"
};
// Compute image style based on fit mode
let img_style = match current_fit {
FitMode::FitScreen => format!(
"transform: {transform}; cursor: {cursor}; max-width: 100%; max-height: 100%; object-fit: contain;"
),
FitMode::FitWidth => {
format!("transform: {transform}; cursor: {cursor}; width: 100%; object-fit: contain;")
}
FitMode::Actual => format!("transform: {transform}; cursor: {cursor};"),
};
// Compute image style based on fit mode
let img_style = match current_fit {
FitMode::FitScreen => {
format!(
"transform: {transform}; cursor: {cursor}; max-width: 100%; \
max-height: 100%; object-fit: contain;"
)
},
FitMode::FitWidth => {
format!(
"transform: {transform}; cursor: {cursor}; width: 100%; object-fit: \
contain;"
)
},
FitMode::Actual => format!("transform: {transform}; cursor: {cursor};"),
};
let on_wheel = move |e: WheelEvent| {
e.prevent_default();
let delta = e.delta().strip_units();
let factor = if delta.y < 0.0 { 1.1 } else { 1.0 / 1.1 };
let new_zoom = (*zoom.read() * factor).clamp(0.1, 20.0);
zoom.set(new_zoom);
};
let on_wheel = move |e: WheelEvent| {
e.prevent_default();
let delta = e.delta().strip_units();
let factor = if delta.y < 0.0 { 1.1 } else { 1.0 / 1.1 };
let new_zoom = (*zoom.read() * factor).clamp(0.1, 20.0);
zoom.set(new_zoom);
};
let on_mouse_down = move |e: MouseEvent| {
if *zoom.read() > 1.0 {
dragging.set(true);
let coords = e.client_coordinates();
drag_start_x.set(coords.x - *offset_x.read());
drag_start_y.set(coords.y - *offset_y.read());
}
};
let on_mouse_move = move |e: MouseEvent| {
if *dragging.read() {
let coords = e.client_coordinates();
offset_x.set(coords.x - *drag_start_x.read());
offset_y.set(coords.y - *drag_start_y.read());
}
};
let on_mouse_up = move |_: MouseEvent| {
dragging.set(false);
};
let on_keydown = {
move |evt: KeyboardEvent| match evt.key() {
Key::Escape => on_close.call(()),
Key::Character(ref c) if c == "+" || c == "=" => {
let new_zoom = (*zoom.read() * 1.2).min(20.0);
zoom.set(new_zoom);
}
Key::Character(ref c) if c == "-" => {
let new_zoom = (*zoom.read() / 1.2).max(0.1);
zoom.set(new_zoom);
}
Key::Character(ref c) if c == "0" => {
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
fit_mode.set(FitMode::FitScreen);
}
Key::ArrowLeft => {
if let Some(ref prev) = on_prev {
prev.call(());
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
}
}
Key::ArrowRight => {
if let Some(ref next) = on_next {
next.call(());
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
}
}
_ => {}
}
};
let zoom_in = move |_| {
let new_zoom = (*zoom.read() * 1.2).min(20.0);
zoom.set(new_zoom);
};
let zoom_out = move |_| {
let new_zoom = (*zoom.read() / 1.2).max(0.1);
zoom.set(new_zoom);
};
let cycle_fit = move |_| {
let next = fit_mode.read().next();
fit_mode.set(next);
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
};
let has_prev = on_prev.is_some();
let has_next = on_next.is_some();
rsx! {
div {
class: "image-viewer-overlay",
tabindex: "0",
onkeydown: on_keydown,
// Toolbar
div { class: "image-viewer-toolbar",
div { class: "image-viewer-toolbar-left",
if has_prev {
button {
class: "iv-btn",
onclick: move |_| {
if let Some(ref prev) = on_prev {
prev.call(());
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
}
},
title: "Previous",
"\u{25c0}"
}
}
if has_next {
button {
class: "iv-btn",
onclick: move |_| {
if let Some(ref next) = on_next {
next.call(());
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
}
},
title: "Next",
"\u{25b6}"
}
}
}
div { class: "image-viewer-toolbar-center",
button {
class: "iv-btn",
onclick: cycle_fit,
title: "Cycle fit mode",
"{current_fit.label()}"
}
button {
class: "iv-btn",
onclick: zoom_out,
title: "Zoom out",
"\u{2212}"
}
span { class: "iv-zoom-label", "{zoom_pct}%" }
button { class: "iv-btn", onclick: zoom_in, title: "Zoom in", "+" }
}
div { class: "image-viewer-toolbar-right",
button {
class: "iv-btn iv-close",
onclick: move |_| on_close.call(()),
title: "Close",
"\u{2715}"
}
}
}
// Image canvas
div {
class: "image-viewer-canvas",
onwheel: on_wheel,
onmousedown: on_mouse_down,
onmousemove: on_mouse_move,
onmouseup: on_mouse_up,
onclick: move |e: MouseEvent| {
// Close on background click (not on image)
e.stop_propagation();
},
img {
src: "{src}",
alt: "{alt}",
style: "{img_style}",
draggable: "false",
onclick: move |e: MouseEvent| e.stop_propagation(),
}
}
}
let on_mouse_down = move |e: MouseEvent| {
if *zoom.read() > 1.0 {
dragging.set(true);
let coords = e.client_coordinates();
drag_start_x.set(coords.x - *offset_x.read());
drag_start_y.set(coords.y - *offset_y.read());
}
};
let on_mouse_move = move |e: MouseEvent| {
if *dragging.read() {
let coords = e.client_coordinates();
offset_x.set(coords.x - *drag_start_x.read());
offset_y.set(coords.y - *drag_start_y.read());
}
};
let on_mouse_up = move |_: MouseEvent| {
dragging.set(false);
};
let on_keydown = {
move |evt: KeyboardEvent| {
match evt.key() {
Key::Escape => on_close.call(()),
Key::Character(ref c) if c == "+" || c == "=" => {
let new_zoom = (*zoom.read() * 1.2).min(20.0);
zoom.set(new_zoom);
},
Key::Character(ref c) if c == "-" => {
let new_zoom = (*zoom.read() / 1.2).max(0.1);
zoom.set(new_zoom);
},
Key::Character(ref c) if c == "0" => {
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
fit_mode.set(FitMode::FitScreen);
},
Key::ArrowLeft => {
if let Some(ref prev) = on_prev {
prev.call(());
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
}
},
Key::ArrowRight => {
if let Some(ref next) = on_next {
next.call(());
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
}
},
_ => {},
}
}
};
let zoom_in = move |_| {
let new_zoom = (*zoom.read() * 1.2).min(20.0);
zoom.set(new_zoom);
};
let zoom_out = move |_| {
let new_zoom = (*zoom.read() / 1.2).max(0.1);
zoom.set(new_zoom);
};
let cycle_fit = move |_| {
let next = fit_mode.read().next();
fit_mode.set(next);
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
};
let has_prev = on_prev.is_some();
let has_next = on_next.is_some();
rsx! {
div {
class: "image-viewer-overlay",
tabindex: "0",
onkeydown: on_keydown,
// Toolbar
div { class: "image-viewer-toolbar",
div { class: "image-viewer-toolbar-left",
if has_prev {
button {
class: "iv-btn",
onclick: move |_| {
if let Some(ref prev) = on_prev {
prev.call(());
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
}
},
title: "Previous",
"\u{25c0}"
}
}
if has_next {
button {
class: "iv-btn",
onclick: move |_| {
if let Some(ref next) = on_next {
next.call(());
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
}
},
title: "Next",
"\u{25b6}"
}
}
}
div { class: "image-viewer-toolbar-center",
button {
class: "iv-btn",
onclick: cycle_fit,
title: "Cycle fit mode",
"{current_fit.label()}"
}
button {
class: "iv-btn",
onclick: zoom_out,
title: "Zoom out",
"\u{2212}"
}
span { class: "iv-zoom-label", "{zoom_pct}%" }
button { class: "iv-btn", onclick: zoom_in, title: "Zoom in", "+" }
}
div { class: "image-viewer-toolbar-right",
button {
class: "iv-btn iv-close",
onclick: move |_| on_close.call(()),
title: "Close",
"\u{2715}"
}
}
}
// Image canvas
div {
class: "image-viewer-canvas",
onwheel: on_wheel,
onmousedown: on_mouse_down,
onmousemove: on_mouse_move,
onmouseup: on_mouse_up,
onclick: move |e: MouseEvent| {
// Close on background click (not on image)
e.stop_propagation();
},
img {
src: "{src}",
alt: "{alt}",
style: "{img_style}",
draggable: "false",
onclick: move |e: MouseEvent| e.stop_propagation(),
}
}
}
}
}

1542
crates/pinakes-ui/src/components/import.rs
View file

File diff suppressed because it is too large Load diff

1648
crates/pinakes-ui/src/components/library.rs
View file

File diff suppressed because it is too large Load diff

76
crates/pinakes-ui/src/components/loading.rs
View file

@ -2,58 +2,58 @@ use dioxus::prelude::*;
#[component]
pub fn SkeletonCard() -> Element {
rsx! {
div { class: "skeleton-card",
div { class: "skeleton-thumb skeleton-pulse" }
div { class: "skeleton-text skeleton-pulse" }
div { class: "skeleton-text skeleton-text-short skeleton-pulse" }
}
}
rsx! {
div { class: "skeleton-card",
div { class: "skeleton-thumb skeleton-pulse" }
div { class: "skeleton-text skeleton-pulse" }
div { class: "skeleton-text skeleton-text-short skeleton-pulse" }
}
}
}
#[component]
pub fn SkeletonRow() -> Element {
rsx! {
div { class: "skeleton-row",
div { class: "skeleton-cell skeleton-cell-icon skeleton-pulse" }
div { class: "skeleton-cell skeleton-cell-wide skeleton-pulse" }
div { class: "skeleton-cell skeleton-pulse" }
div { class: "skeleton-cell skeleton-pulse" }
}
}
rsx! {
div { class: "skeleton-row",
div { class: "skeleton-cell skeleton-cell-icon skeleton-pulse" }
div { class: "skeleton-cell skeleton-cell-wide skeleton-pulse" }
div { class: "skeleton-cell skeleton-pulse" }
div { class: "skeleton-cell skeleton-pulse" }
}
}
}
#[component]
pub fn LoadingOverlay(message: Option<String>) -> Element {
let msg = message.unwrap_or_else(|| "Loading...".to_string());
rsx! {
div { class: "loading-overlay",
div { class: "loading-spinner" }
span { class: "loading-message", "{msg}" }
}
}
let msg = message.unwrap_or_else(|| "Loading...".to_string());
rsx! {
div { class: "loading-overlay",
div { class: "loading-spinner" }
span { class: "loading-message", "{msg}" }
}
}
}
#[component]
pub fn SkeletonGrid(count: Option<usize>) -> Element {
let n = count.unwrap_or(12);
rsx! {
div { class: "media-grid",
for i in 0..n {
SkeletonCard { key: "skel-{i}" }
}
}
}
let n = count.unwrap_or(12);
rsx! {
div { class: "media-grid",
for i in 0..n {
SkeletonCard { key: "skel-{i}" }
}
}
}
}
#[component]
pub fn SkeletonList(count: Option<usize>) -> Element {
let n = count.unwrap_or(10);
rsx! {
div { class: "media-list",
for i in 0..n {
SkeletonRow { key: "skel-row-{i}" }
}
}
}
let n = count.unwrap_or(10);
rsx! {
div { class: "media-list",
for i in 0..n {
SkeletonRow { key: "skel-row-{i}" }
}
}
}
}

142
crates/pinakes-ui/src/components/login.rs
View file

@ -2,78 +2,78 @@ use dioxus::prelude::*;
#[component]
pub fn Login(
on_login: EventHandler<(String, String)>,
#[props(default)] error: Option<String>,
#[props(default = false)] loading: bool,
on_login: EventHandler<(String, String)>,
#[props(default)] error: Option<String>,
#[props(default = false)] loading: bool,
) -> Element {
let mut username = use_signal(String::new);
let mut password = use_signal(String::new);
let mut username = use_signal(String::new);
let mut password = use_signal(String::new);
let on_submit = {
move |_| {
let u = username.read().clone();
let p = password.read().clone();
if !u.is_empty() && !p.is_empty() {
on_login.call((u, p));
}
}
};
let on_key = move |e: KeyboardEvent| {
if e.key() == Key::Enter {
let u = username.read().clone();
let p = password.read().clone();
if !u.is_empty() && !p.is_empty() {
on_login.call((u, p));
}
}
};
rsx! {
div { class: "login-container",
div { class: "login-card",
h2 { class: "login-title", "Pinakes" }
p { class: "login-subtitle", "Sign in to continue" }
if let Some(ref err) = error {
div { class: "login-error", "{err}" }
}
div { class: "login-form",
div { class: "form-group",
label { class: "form-label", "Username" }
input {
r#type: "text",
placeholder: "Enter username",
value: "{username}",
disabled: loading,
oninput: move |e: Event<FormData>| username.set(e.value()),
onkeypress: on_key,
}
}
div { class: "form-group",
label { class: "form-label", "Password" }
input {
r#type: "password",
placeholder: "Enter password",
value: "{password}",
disabled: loading,
oninput: move |e: Event<FormData>| password.set(e.value()),
onkeypress: on_key,
}
}
button {
class: "btn btn-primary login-btn",
disabled: loading,
onclick: on_submit,
if loading {
"Signing in..."
} else {
"Sign In"
}
}
}
}
}
let on_submit = {
move |_| {
let u = username.read().clone();
let p = password.read().clone();
if !u.is_empty() && !p.is_empty() {
on_login.call((u, p));
}
}
};
let on_key = move |e: KeyboardEvent| {
if e.key() == Key::Enter {
let u = username.read().clone();
let p = password.read().clone();
if !u.is_empty() && !p.is_empty() {
on_login.call((u, p));
}
}
};
rsx! {
div { class: "login-container",
div { class: "login-card",
h2 { class: "login-title", "Pinakes" }
p { class: "login-subtitle", "Sign in to continue" }
if let Some(ref err) = error {
div { class: "login-error", "{err}" }
}
div { class: "login-form",
div { class: "form-group",
label { class: "form-label", "Username" }
input {
r#type: "text",
placeholder: "Enter username",
value: "{username}",
disabled: loading,
oninput: move |e: Event<FormData>| username.set(e.value()),
onkeypress: on_key,
}
}
div { class: "form-group",
label { class: "form-label", "Password" }
input {
r#type: "password",
placeholder: "Enter password",
value: "{password}",
disabled: loading,
oninput: move |e: Event<FormData>| password.set(e.value()),
onkeypress: on_key,
}
}
button {
class: "btn btn-primary login-btn",
disabled: loading,
onclick: on_submit,
if loading {
"Signing in..."
} else {
"Sign In"
}
}
}
}
}
}
}

620
crates/pinakes-ui/src/components/markdown_viewer.rs
View file

@ -1,73 +1,75 @@
use dioxus::document::eval;
use dioxus::prelude::*;
use dioxus::{document::eval, prelude::*};
/// Event handler for wikilink clicks. Called with the target note name.
pub type WikilinkClickHandler = EventHandler<String>;
#[component]
pub fn MarkdownViewer(
content_url: String,
media_type: String,
#[props(default)] on_wikilink_click: Option<WikilinkClickHandler>,
content_url: String,
media_type: String,
#[props(default)] on_wikilink_click: Option<WikilinkClickHandler>,
) -> Element {
let mut rendered_html = use_signal(String::new);
let mut frontmatter_html = use_signal(|| Option::<String>::None);
let mut raw_content = use_signal(String::new);
let mut loading = use_signal(|| true);
let mut error = use_signal(|| Option::<String>::None);
let mut show_preview = use_signal(|| true);
let mut rendered_html = use_signal(String::new);
let mut frontmatter_html = use_signal(|| Option::<String>::None);
let mut raw_content = use_signal(String::new);
let mut loading = use_signal(|| true);
let mut error = use_signal(|| Option::<String>::None);
let mut show_preview = use_signal(|| true);
// Fetch content on mount
let url = content_url.clone();
let mtype = media_type.clone();
use_effect(move || {
let url = url.clone();
let mtype = mtype.clone();
spawn(async move {
loading.set(true);
error.set(None);
match reqwest::get(&url).await {
Ok(resp) => match resp.text().await {
Ok(text) => {
raw_content.set(text.clone());
if mtype == "md" || mtype == "markdown" {
let (fm_html, body_html) = render_markdown_with_frontmatter(&text);
frontmatter_html.set(fm_html);
rendered_html.set(body_html);
} else {
frontmatter_html.set(None);
rendered_html.set(render_plaintext(&text));
};
}
Err(e) => error.set(Some(format!("Failed to read content: {e}"))),
},
Err(e) => error.set(Some(format!("Failed to fetch: {e}"))),
}
loading.set(false);
});
// Fetch content on mount
let url = content_url.clone();
let mtype = media_type.clone();
use_effect(move || {
let url = url.clone();
let mtype = mtype.clone();
spawn(async move {
loading.set(true);
error.set(None);
match reqwest::get(&url).await {
Ok(resp) => {
match resp.text().await {
Ok(text) => {
raw_content.set(text.clone());
if mtype == "md" || mtype == "markdown" {
let (fm_html, body_html) =
render_markdown_with_frontmatter(&text);
frontmatter_html.set(fm_html);
rendered_html.set(body_html);
} else {
frontmatter_html.set(None);
rendered_html.set(render_plaintext(&text));
};
},
Err(e) => error.set(Some(format!("Failed to read content: {e}"))),
}
},
Err(e) => error.set(Some(format!("Failed to fetch: {e}"))),
}
loading.set(false);
});
});
// Set up global wikilink click handler that the inline onclick attributes will call
// This bridges JavaScript → Rust communication
use_effect(move || {
if let Some(handler) = on_wikilink_click {
spawn(async move {
// Set up a global function that wikilink onclick handlers can call
// The function stores the clicked target in localStorage
let setup_js = r#"
// Set up global wikilink click handler that the inline onclick attributes
// will call This bridges JavaScript → Rust communication
use_effect(move || {
if let Some(handler) = on_wikilink_click {
spawn(async move {
// Set up a global function that wikilink onclick handlers can call
// The function stores the clicked target in localStorage
let setup_js = r#"
window.__dioxus_wikilink_click = function(target) {
console.log('Wikilink clicked:', target);
localStorage.setItem('__wikilink_clicked', target);
};
"#;
let _ = eval(setup_js).await;
let _ = eval(setup_js).await;
// Poll localStorage to detect wikilink clicks
loop {
tokio::time::sleep(tokio::time::Duration::from_millis(100)).await;
// Poll localStorage to detect wikilink clicks
loop {
tokio::time::sleep(tokio::time::Duration::from_millis(100)).await;
let check_js = r#"
let check_js = r#"
(function() {
const target = localStorage.getItem('__wikilink_clicked');
if (target) {
@ -78,313 +80,321 @@ pub fn MarkdownViewer(
})();
"#;
if let Ok(result) = eval(check_js).await {
if let Some(target) = result.as_str() {
if !target.is_empty() {
handler.call(target.to_string());
}
}
}
}
});
}
});
let is_loading = *loading.read();
let is_preview = *show_preview.read();
rsx! {
div { class: "markdown-viewer",
// View toggle toolbar
if !is_loading && error.read().is_none() {
div { class: "markdown-toolbar",
button {
class: if is_preview { "toolbar-btn active" } else { "toolbar-btn" },
onclick: move |_| show_preview.set(true),
title: "Preview Mode",
"Preview"
}
button {
class: if !is_preview { "toolbar-btn active" } else { "toolbar-btn" },
onclick: move |_| show_preview.set(false),
title: "Source Mode",
"Source"
}
}
}
if is_loading {
div { class: "loading-overlay",
div { class: "spinner" }
"Loading content..."
}
}
if let Some(ref err) = *error.read() {
div { class: "error-banner",
span { class: "error-icon", "\u{26a0}" }
"{err}"
}
}
if !is_loading && error.read().is_none() {
if is_preview {
// Preview mode - show rendered markdown
if let Some(ref fm) = *frontmatter_html.read() {
div {
class: "frontmatter-card",
dangerous_inner_html: "{fm}",
}
}
div {
class: "markdown-content",
dangerous_inner_html: "{rendered_html}",
}
} else {
// Source mode - show raw markdown
pre { class: "markdown-source",
code { "{raw_content}" }
}
}
}
if let Ok(result) = eval(check_js).await {
if let Some(target) = result.as_str() {
if !target.is_empty() {
handler.call(target.to_string());
}
}
}
}
});
}
});
let is_loading = *loading.read();
let is_preview = *show_preview.read();
rsx! {
div { class: "markdown-viewer",
// View toggle toolbar
if !is_loading && error.read().is_none() {
div { class: "markdown-toolbar",
button {
class: if is_preview { "toolbar-btn active" } else { "toolbar-btn" },
onclick: move |_| show_preview.set(true),
title: "Preview Mode",
"Preview"
}
button {
class: if !is_preview { "toolbar-btn active" } else { "toolbar-btn" },
onclick: move |_| show_preview.set(false),
title: "Source Mode",
"Source"
}
}
}
if is_loading {
div { class: "loading-overlay",
div { class: "spinner" }
"Loading content..."
}
}
if let Some(ref err) = *error.read() {
div { class: "error-banner",
span { class: "error-icon", "\u{26a0}" }
"{err}"
}
}
if !is_loading && error.read().is_none() {
if is_preview {
// Preview mode - show rendered markdown
if let Some(ref fm) = *frontmatter_html.read() {
div {
class: "frontmatter-card",
dangerous_inner_html: "{fm}",
}
}
div {
class: "markdown-content",
dangerous_inner_html: "{rendered_html}",
}
} else {
// Source mode - show raw markdown
pre { class: "markdown-source",
code { "{raw_content}" }
}
}
}
}
}
}
/// Parse frontmatter and render markdown body. Returns (frontmatter_html, body_html).
/// Parse frontmatter and render markdown body. Returns (frontmatter_html,
/// body_html).
fn render_markdown_with_frontmatter(text: &str) -> (Option<String>, String) {
use gray_matter::Matter;
use gray_matter::engine::YAML;
use gray_matter::{Matter, engine::YAML};
let matter = Matter::<YAML>::new();
let Ok(result) = matter.parse(text) else {
// If frontmatter parsing fails, just render the whole text as markdown
return (None, render_markdown(text));
};
let matter = Matter::<YAML>::new();
let Ok(result) = matter.parse(text) else {
// If frontmatter parsing fails, just render the whole text as markdown
return (None, render_markdown(text));
};
let fm_html = result.data.and_then(|data| render_frontmatter_card(&data));
let fm_html = result.data.and_then(|data| render_frontmatter_card(&data));
let body_html = render_markdown(&result.content);
(fm_html, body_html)
let body_html = render_markdown(&result.content);
(fm_html, body_html)
}
/// Render frontmatter fields as an HTML card.
fn render_frontmatter_card(data: &gray_matter::Pod) -> Option<String> {
let gray_matter::Pod::Hash(map) = data else {
return None;
};
let gray_matter::Pod::Hash(map) = data else {
return None;
};
if map.is_empty() {
return None;
}
if map.is_empty() {
return None;
}
let mut html = String::from("<dl class=\"frontmatter-fields\">");
let mut html = String::from("<dl class=\"frontmatter-fields\">");
for (key, value) in map {
let display_value = pod_to_display(value);
let escaped_key = escape_html(key);
html.push_str(&format!("<dt>{escaped_key}</dt><dd>{display_value}</dd>"));
}
for (key, value) in map {
let display_value = pod_to_display(value);
let escaped_key = escape_html(key);
html.push_str(&format!("<dt>{escaped_key}</dt><dd>{display_value}</dd>"));
}
html.push_str("</dl>");
Some(html)
html.push_str("</dl>");
Some(html)
}
fn pod_to_display(pod: &gray_matter::Pod) -> String {
match pod {
gray_matter::Pod::String(s) => escape_html(s),
gray_matter::Pod::Integer(n) => n.to_string(),
gray_matter::Pod::Float(f) => f.to_string(),
gray_matter::Pod::Boolean(b) => b.to_string(),
gray_matter::Pod::Array(arr) => {
let items: Vec<String> = arr.iter().map(pod_to_display).collect();
items.join(", ")
}
gray_matter::Pod::Hash(map) => {
let items: Vec<String> = map
.iter()
.map(|(k, v)| format!("{}: {}", escape_html(k), pod_to_display(v)))
.collect();
items.join("; ")
}
gray_matter::Pod::Null => String::new(),
}
match pod {
gray_matter::Pod::String(s) => escape_html(s),
gray_matter::Pod::Integer(n) => n.to_string(),
gray_matter::Pod::Float(f) => f.to_string(),
gray_matter::Pod::Boolean(b) => b.to_string(),
gray_matter::Pod::Array(arr) => {
let items: Vec<String> = arr.iter().map(pod_to_display).collect();
items.join(", ")
},
gray_matter::Pod::Hash(map) => {
let items: Vec<String> = map
.iter()
.map(|(k, v)| format!("{}: {}", escape_html(k), pod_to_display(v)))
.collect();
items.join("; ")
},
gray_matter::Pod::Null => String::new(),
}
}
fn render_markdown(text: &str) -> String {
use pulldown_cmark::{Options, Parser, html};
use pulldown_cmark::{Options, Parser, html};
// First, convert wikilinks to standard markdown links
let text_with_links = convert_wikilinks(text);
// First, convert wikilinks to standard markdown links
let text_with_links = convert_wikilinks(text);
let mut options = Options::empty();
options.insert(Options::ENABLE_TABLES);
options.insert(Options::ENABLE_STRIKETHROUGH);
options.insert(Options::ENABLE_TASKLISTS);
options.insert(Options::ENABLE_FOOTNOTES);
options.insert(Options::ENABLE_HEADING_ATTRIBUTES);
let mut options = Options::empty();
options.insert(Options::ENABLE_TABLES);
options.insert(Options::ENABLE_STRIKETHROUGH);
options.insert(Options::ENABLE_TASKLISTS);
options.insert(Options::ENABLE_FOOTNOTES);
options.insert(Options::ENABLE_HEADING_ATTRIBUTES);
let parser = Parser::new_ext(&text_with_links, options);
let mut html_output = String::new();
html::push_html(&mut html_output, parser);
let parser = Parser::new_ext(&text_with_links, options);
let mut html_output = String::new();
html::push_html(&mut html_output, parser);
// Sanitize HTML using ammonia with a safe allowlist
sanitize_html(&html_output)
// Sanitize HTML using ammonia with a safe allowlist
sanitize_html(&html_output)
}
/// Convert wikilinks [[target]] and [[target|display]] to styled HTML links.
/// Uses a special URL scheme that can be intercepted by click handlers.
fn convert_wikilinks(text: &str) -> String {
use regex::Regex;
use regex::Regex;
// Match embeds ![[target]] first, convert to a placeholder image/embed span
let embed_re = Regex::new(r"!\[\[([^\]|]+)(?:\|([^\]]+))?\]\]").unwrap();
let text = embed_re.replace_all(text, |caps: &regex::Captures| {
let target = caps.get(1).unwrap().as_str().trim();
let alt = caps.get(2).map(|m| m.as_str().trim()).unwrap_or(target);
format!(
"<span class=\"wikilink-embed\" data-target=\"{}\" title=\"Embed: {}\">[Embed: {}]</span>",
escape_html_attr(target),
escape_html_attr(target),
escape_html(alt)
)
});
// Match embeds ![[target]] first, convert to a placeholder image/embed span
let embed_re = Regex::new(r"!\[\[([^\]|]+)(?:\|([^\]]+))?\]\]").unwrap();
let text = embed_re.replace_all(text, |caps: &regex::Captures| {
let target = caps.get(1).unwrap().as_str().trim();
let alt = caps.get(2).map(|m| m.as_str().trim()).unwrap_or(target);
format!(
"<span class=\"wikilink-embed\" data-target=\"{}\" title=\"Embed: \
{}\">[Embed: {}]</span>",
escape_html_attr(target),
escape_html_attr(target),
escape_html(alt)
)
});
// Match wikilinks [[target]] or [[target|display]]
let wikilink_re = Regex::new(r"\[\[([^\]|]+)(?:\|([^\]]+))?\]\]").unwrap();
let text = wikilink_re.replace_all(&text, |caps: &regex::Captures| {
let target = caps.get(1).unwrap().as_str().trim();
let display = caps.get(2).map(|m| m.as_str().trim()).unwrap_or(target);
// Create a styled link that uses a special pseudo-protocol scheme
// This makes it easier to intercept clicks via JavaScript
format!(
"<a href=\"javascript:void(0)\" class=\"wikilink\" data-wikilink-target=\"{target}\" onclick=\"if(window.__dioxus_wikilink_click){{window.__dioxus_wikilink_click('{target_escaped}')}}\">{display}</a>",
target = escape_html_attr(target),
target_escaped = escape_html_attr(&target.replace('\\', "\\\\").replace('\'', "\\'")),
display = escape_html(display)
)
});
// Match wikilinks [[target]] or [[target|display]]
let wikilink_re = Regex::new(r"\[\[([^\]|]+)(?:\|([^\]]+))?\]\]").unwrap();
let text = wikilink_re.replace_all(&text, |caps: &regex::Captures| {
let target = caps.get(1).unwrap().as_str().trim();
let display = caps.get(2).map(|m| m.as_str().trim()).unwrap_or(target);
// Create a styled link that uses a special pseudo-protocol scheme
// This makes it easier to intercept clicks via JavaScript
format!(
"<a href=\"javascript:void(0)\" class=\"wikilink\" \
data-wikilink-target=\"{target}\" \
onclick=\"if(window.__dioxus_wikilink_click){{window.\
__dioxus_wikilink_click('{target_escaped}')}}\">{display}</a>",
target = escape_html_attr(target),
target_escaped =
escape_html_attr(&target.replace('\\', "\\\\").replace('\'', "\\'")),
display = escape_html(display)
)
});
text.to_string()
text.to_string()
}
fn render_plaintext(text: &str) -> String {
let escaped = escape_html(text);
format!("<pre><code>{escaped}</code></pre>")
let escaped = escape_html(text);
format!("<pre><code>{escaped}</code></pre>")
}
/// Escape text for display in HTML content.
fn escape_html(text: &str) -> String {
text.replace('&', "&amp;")
.replace('<', "&lt;")
.replace('>', "&gt;")
.replace('"', "&quot;")
text
.replace('&', "&amp;")
.replace('<', "&lt;")
.replace('>', "&gt;")
.replace('"', "&quot;")
}
/// Escape text for use in HTML attributes (includes single quotes).
fn escape_html_attr(text: &str) -> String {
text.replace('&', "&amp;")
.replace('<', "&lt;")
.replace('>', "&gt;")
.replace('"', "&quot;")
.replace('\'', "&#x27;")
text
.replace('&', "&amp;")
.replace('<', "&lt;")
.replace('>', "&gt;")
.replace('"', "&quot;")
.replace('\'', "&#x27;")
}
/// Sanitize HTML using ammonia with a safe allowlist.
/// This prevents XSS attacks by removing dangerous elements and attributes.
fn sanitize_html(html: &str) -> String {
use ammonia::Builder;
use std::collections::HashSet;
use std::collections::HashSet;
// Build a custom sanitizer that allows safe markdown elements
// but strips all event handlers and dangerous elements
let mut builder = Builder::default();
use ammonia::Builder;
// Allow common markdown elements
let allowed_tags: HashSet<&str> = [
"a",
"abbr",
"acronym",
"b",
"blockquote",
"br",
"code",
"dd",
"del",
"details",
"div",
"dl",
"dt",
"em",
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"hr",
"i",
"img",
"ins",
"kbd",
"li",
"mark",
"ol",
"p",
"pre",
"q",
"s",
"samp",
"small",
"span",
"strong",
"sub",
"summary",
"sup",
"table",
"tbody",
"td",
"tfoot",
"th",
"thead",
"tr",
"u",
"ul",
"var",
// Task list support
"input",
]
.into_iter()
.collect();
// Build a custom sanitizer that allows safe markdown elements
// but strips all event handlers and dangerous elements
let mut builder = Builder::default();
// Allow safe attributes
let allowed_attrs: HashSet<&str> = [
"href",
"src",
"alt",
"title",
"class",
"id",
"name",
"width",
"height",
"align",
"valign",
"colspan",
"rowspan",
"scope",
// Data attributes for wikilinks (safe - no code execution)
"data-target",
"data-wikilink-target",
// Task list checkbox support
"type",
"checked",
"disabled",
]
.into_iter()
.collect();
// Allow common markdown elements
let allowed_tags: HashSet<&str> = [
"a",
"abbr",
"acronym",
"b",
"blockquote",
"br",
"code",
"dd",
"del",
"details",
"div",
"dl",
"dt",
"em",
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"hr",
"i",
"img",
"ins",
"kbd",
"li",
"mark",
"ol",
"p",
"pre",
"q",
"s",
"samp",
"small",
"span",
"strong",
"sub",
"summary",
"sup",
"table",
"tbody",
"td",
"tfoot",
"th",
"thead",
"tr",
"u",
"ul",
"var",
// Task list support
"input",
]
.into_iter()
.collect();
builder
// Allow safe attributes
let allowed_attrs: HashSet<&str> = [
"href",
"src",
"alt",
"title",
"class",
"id",
"name",
"width",
"height",
"align",
"valign",
"colspan",
"rowspan",
"scope",
// Data attributes for wikilinks (safe - no code execution)
"data-target",
"data-wikilink-target",
// Task list checkbox support
"type",
"checked",
"disabled",
]
.into_iter()
.collect();
builder
.tags(allowed_tags)
.generic_attributes(allowed_attrs)
// Allow relative URLs and fragment-only URLs for internal links

1235
crates/pinakes-ui/src/components/media_player.rs
View file

File diff suppressed because it is too large Load diff

162
crates/pinakes-ui/src/components/pagination.rs
View file

@ -2,101 +2,101 @@ use dioxus::prelude::*;
#[component]
pub fn Pagination(
current_page: u64,
total_pages: u64,
on_page_change: EventHandler<u64>,
current_page: u64,
total_pages: u64,
on_page_change: EventHandler<u64>,
) -> Element {
if total_pages <= 1 {
return rsx! {};
}
if total_pages <= 1 {
return rsx! {};
}
let pages = pagination_range(current_page, total_pages);
let pages = pagination_range(current_page, total_pages);
rsx! {
div { class: "pagination",
button {
class: "btn btn-sm btn-secondary",
disabled: current_page == 0,
onclick: move |_| {
if current_page > 0 {
on_page_change.call(current_page - 1);
}
},
"Prev"
}
rsx! {
div { class: "pagination",
button {
class: "btn btn-sm btn-secondary",
disabled: current_page == 0,
onclick: move |_| {
if current_page > 0 {
on_page_change.call(current_page - 1);
}
},
"Prev"
}
for page in pages {
if page == u64::MAX {
span { class: "page-ellipsis", "..." }
} else {
{
let btn_class = if page == current_page {
"btn btn-sm btn-primary page-btn"
} else {
"btn btn-sm btn-ghost page-btn"
};
rsx! {
button {
key: "page-{page}",
class: "{btn_class}",
onclick: move |_| on_page_change.call(page),
"{page + 1}"
}
}
}
}
}
for page in pages {
if page == u64::MAX {
span { class: "page-ellipsis", "..." }
} else {
{
let btn_class = if page == current_page {
"btn btn-sm btn-primary page-btn"
} else {
"btn btn-sm btn-ghost page-btn"
};
rsx! {
button {
key: "page-{page}",
class: "{btn_class}",
onclick: move |_| on_page_change.call(page),
"{page + 1}"
}
}
}
}
}
button {
class: "btn btn-sm btn-secondary",
disabled: current_page >= total_pages - 1,
onclick: move |_| {
if current_page < total_pages - 1 {
on_page_change.call(current_page + 1);
}
},
"Next"
}
}
}
button {
class: "btn btn-sm btn-secondary",
disabled: current_page >= total_pages - 1,
onclick: move |_| {
if current_page < total_pages - 1 {
on_page_change.call(current_page + 1);
}
},
"Next"
}
}
}
}
/// Compute a range of page numbers to display (with ellipsis as u64::MAX).
pub fn pagination_range(current: u64, total: u64) -> Vec<u64> {
let mut pages = Vec::new();
if total <= 7 {
for i in 0..total {
pages.push(i);
}
return pages;
let mut pages = Vec::new();
if total <= 7 {
for i in 0..total {
pages.push(i);
}
return pages;
}
pages.push(0);
pages.push(0);
if current > 2 {
pages.push(u64::MAX);
if current > 2 {
pages.push(u64::MAX);
}
let start = if current <= 2 { 1 } else { current - 1 };
let end = if current >= total - 3 {
total - 1
} else {
current + 2
};
for i in start..end {
if !pages.contains(&i) {
pages.push(i);
}
}
let start = if current <= 2 { 1 } else { current - 1 };
let end = if current >= total - 3 {
total - 1
} else {
current + 2
};
if current < total - 3 {
pages.push(u64::MAX);
}
for i in start..end {
if !pages.contains(&i) {
pages.push(i);
}
}
if !pages.contains(&(total - 1)) {
pages.push(total - 1);
}
if current < total - 3 {
pages.push(u64::MAX);
}
if !pages.contains(&(total - 1)) {
pages.push(total - 1);
}
pages
pages
}

202
crates/pinakes-ui/src/components/pdf_viewer.rs
View file

@ -2,111 +2,111 @@ use dioxus::prelude::*;
#[component]
pub fn PdfViewer(
src: String,
#[props(default = 1)] initial_page: usize,
#[props(default = 100)] initial_zoom: usize,
src: String,
#[props(default = 1)] initial_page: usize,
#[props(default = 100)] initial_zoom: usize,
) -> Element {
let current_page = use_signal(|| initial_page);
let mut zoom_level = use_signal(|| initial_zoom);
let mut loading = use_signal(|| true);
let mut error = use_signal(|| Option::<String>::None);
let current_page = use_signal(|| initial_page);
let mut zoom_level = use_signal(|| initial_zoom);
let mut loading = use_signal(|| true);
let mut error = use_signal(|| Option::<String>::None);
// For navigation controls
let zoom = *zoom_level.read();
let page = *current_page.read();
// For navigation controls
let zoom = *zoom_level.read();
let page = *current_page.read();
rsx! {
div { class: "pdf-viewer",
// Toolbar
div { class: "pdf-toolbar",
div { class: "pdf-toolbar-group",
button {
class: "pdf-toolbar-btn",
title: "Zoom out",
disabled: zoom <= 50,
onclick: move |_| {
let new_zoom = (*zoom_level.read()).saturating_sub(25).max(50);
zoom_level.set(new_zoom);
},
"\u{2212}" // minus
}
span { class: "pdf-zoom-label", "{zoom}%" }
button {
class: "pdf-toolbar-btn",
title: "Zoom in",
disabled: zoom >= 200,
onclick: move |_| {
let new_zoom = (*zoom_level.read() + 25).min(200);
zoom_level.set(new_zoom);
},
"+" // plus
}
}
div { class: "pdf-toolbar-group",
button {
class: "pdf-toolbar-btn",
title: "Fit to width",
onclick: move |_| zoom_level.set(100),
"\u{2194}" // left-right arrow
}
}
}
rsx! {
div { class: "pdf-viewer",
// Toolbar
div { class: "pdf-toolbar",
div { class: "pdf-toolbar-group",
button {
class: "pdf-toolbar-btn",
title: "Zoom out",
disabled: zoom <= 50,
onclick: move |_| {
let new_zoom = (*zoom_level.read()).saturating_sub(25).max(50);
zoom_level.set(new_zoom);
},
"\u{2212}" // minus
}
span { class: "pdf-zoom-label", "{zoom}%" }
button {
class: "pdf-toolbar-btn",
title: "Zoom in",
disabled: zoom >= 200,
onclick: move |_| {
let new_zoom = (*zoom_level.read() + 25).min(200);
zoom_level.set(new_zoom);
},
"+" // plus
}
}
div { class: "pdf-toolbar-group",
button {
class: "pdf-toolbar-btn",
title: "Fit to width",
onclick: move |_| zoom_level.set(100),
"\u{2194}" // left-right arrow
}
}
}
// PDF embed container
div { class: "pdf-container",
if *loading.read() {
div { class: "pdf-loading",
div { class: "spinner" }
span { "Loading PDF..." }
}
}
// PDF embed container
div { class: "pdf-container",
if *loading.read() {
div { class: "pdf-loading",
div { class: "spinner" }
span { "Loading PDF..." }
}
}
if let Some(ref err) = *error.read() {
div { class: "pdf-error",
p { "{err}" }
a {
href: "{src}",
target: "_blank",
class: "btn btn-primary",
"Download PDF"
}
}
}
if let Some(ref err) = *error.read() {
div { class: "pdf-error",
p { "{err}" }
a {
href: "{src}",
target: "_blank",
class: "btn btn-primary",
"Download PDF"
}
}
}
// Use object/embed for PDF rendering
// The webview should handle PDF rendering natively
object {
class: "pdf-object",
r#type: "application/pdf",
data: "{src}#zoom={zoom}&page={page}",
width: "100%",
height: "100%",
onload: move |_| {
loading.set(false);
error.set(None);
},
onerror: move |_| {
loading.set(false);
error
.set(
Some(
"Unable to display PDF. Your browser may not support embedded PDF viewing."
.to_string(),
),
);
},
// Fallback content
div { class: "pdf-fallback",
p { "PDF preview is not available in this browser." }
a {
href: "{src}",
target: "_blank",
class: "btn btn-primary",
"Download PDF"
}
}
}
}
}
}
// Use object/embed for PDF rendering
// The webview should handle PDF rendering natively
object {
class: "pdf-object",
r#type: "application/pdf",
data: "{src}#zoom={zoom}&page={page}",
width: "100%",
height: "100%",
onload: move |_| {
loading.set(false);
error.set(None);
},
onerror: move |_| {
loading.set(false);
error
.set(
Some(
"Unable to display PDF. Your browser may not support embedded PDF viewing."
.to_string(),
),
);
},
// Fallback content
div { class: "pdf-fallback",
p { "PDF preview is not available in this browser." }
a {
href: "{src}",
target: "_blank",
class: "btn btn-primary",
"Download PDF"
}
}
}
}
}
}
}

840
crates/pinakes-ui/src/components/search.rs
View file

@ -1,427 +1,433 @@
use dioxus::prelude::*;
use super::pagination::Pagination as PaginationControls;
use super::utils::{format_size, type_badge_class, type_icon};
use super::{
pagination::Pagination as PaginationControls,
utils::{format_size, type_badge_class, type_icon},
};
use crate::client::{MediaResponse, SavedSearchResponse};
#[component]
pub fn Search(
results: Vec<MediaResponse>,
total_count: u64,
search_page: u64,
page_size: u64,
on_search: EventHandler<(String, Option<String>)>,
on_select: EventHandler<String>,
on_page_change: EventHandler<u64>,
server_url: String,
#[props(default)] saved_searches: Vec<SavedSearchResponse>,
#[props(default)] on_save_search: Option<EventHandler<(String, String, Option<String>)>>,
#[props(default)] on_delete_saved_search: Option<EventHandler<String>>,
#[props(default)] on_load_saved_search: Option<EventHandler<SavedSearchResponse>>,
results: Vec<MediaResponse>,
total_count: u64,
search_page: u64,
page_size: u64,
on_search: EventHandler<(String, Option<String>)>,
on_select: EventHandler<String>,
on_page_change: EventHandler<u64>,
server_url: String,
#[props(default)] saved_searches: Vec<SavedSearchResponse>,
#[props(default)] on_save_search: Option<
EventHandler<(String, String, Option<String>)>,
>,
#[props(default)] on_delete_saved_search: Option<EventHandler<String>>,
#[props(default)] on_load_saved_search: Option<
EventHandler<SavedSearchResponse>,
>,
) -> Element {
let mut query = use_signal(String::new);
let mut sort_by = use_signal(|| String::from("relevance"));
let mut show_help = use_signal(|| false);
let mut show_save_dialog = use_signal(|| false);
let mut save_name = use_signal(String::new);
let mut show_saved_list = use_signal(|| false);
// 0 = table, 1 = grid
let mut view_mode = use_signal(|| 0u8);
let mut query = use_signal(String::new);
let mut sort_by = use_signal(|| String::from("relevance"));
let mut show_help = use_signal(|| false);
let mut show_save_dialog = use_signal(|| false);
let mut save_name = use_signal(String::new);
let mut show_saved_list = use_signal(|| false);
// 0 = table, 1 = grid
let mut view_mode = use_signal(|| 0u8);
let do_search = {
let query = query;
let sort_by = sort_by;
move |_| {
let q = query.read().clone();
let s = sort_by.read().clone();
let sort = if s == "relevance" || s.is_empty() {
None
} else {
Some(s)
};
on_search.call((q, sort));
}
};
let on_key = {
let query = query;
let sort_by = sort_by;
move |e: KeyboardEvent| {
if e.key() == Key::Enter {
let q = query.read().clone();
let s = sort_by.read().clone();
let sort = if s == "relevance" || s.is_empty() {
None
} else {
Some(s)
};
on_search.call((q, sort));
}
}
};
let toggle_help = move |_| {
let current = *show_help.read();
show_help.set(!current);
};
let help_visible = *show_help.read();
let current_mode = *view_mode.read();
let total_pages = if page_size > 0 {
total_count.div_ceil(page_size)
} else {
1
};
rsx! {
div { class: "form-row mb-16",
input {
r#type: "text",
placeholder: "Search media...",
value: "{query}",
oninput: move |e| query.set(e.value()),
onkeypress: on_key,
}
select { value: "{sort_by}", onchange: move |e| sort_by.set(e.value()),
option { value: "relevance", "Relevance" }
option { value: "date_desc", "Newest" }
option { value: "date_asc", "Oldest" }
option { value: "name_asc", "Name A-Z" }
option { value: "name_desc", "Name Z-A" }
option { value: "size_desc", "Size (largest)" }
option { value: "size_asc", "Size (smallest)" }
}
button { class: "btn btn-primary", onclick: do_search, "Search" }
button { class: "btn btn-ghost", onclick: toggle_help, "Syntax Help" }
// Save/Load search buttons
if on_save_search.is_some() {
button {
class: "btn btn-secondary",
disabled: query.read().is_empty(),
onclick: move |_| show_save_dialog.set(true),
"Save"
}
}
if !saved_searches.is_empty() {
button {
class: "btn btn-ghost",
onclick: move |_| show_saved_list.toggle(),
"Saved ({saved_searches.len()})"
}
}
// View mode toggle
div { class: "view-toggle",
button {
class: if current_mode == 1 { "view-btn active" } else { "view-btn" },
onclick: move |_| view_mode.set(1),
title: "Grid view",
"\u{25a6}"
}
button {
class: if current_mode == 0 { "view-btn active" } else { "view-btn" },
onclick: move |_| view_mode.set(0),
title: "Table view",
"\u{2630}"
}
}
}
if help_visible {
div { class: "card mb-16",
h4 { "Search Syntax" }
ul {
li {
code { "hello world" }
" -- full text search (implicit AND)"
}
li {
code { "artist:Beatles" }
" -- field match"
}
li {
code { "type:pdf" }
" -- filter by media type"
}
li {
code { "tag:music" }
" -- filter by tag"
}
li {
code { "hello OR world" }
" -- OR operator"
}
li {
code { "-excluded" }
" -- NOT (exclude term)"
}
li {
code { "hel*" }
" -- prefix search"
}
li {
code { "hello~" }
" -- fuzzy search"
}
li {
code { "\"exact phrase\"" }
" -- quoted exact match"
}
}
}
}
// Save search dialog
if *show_save_dialog.read() {
div {
class: "modal-overlay",
onclick: move |_| show_save_dialog.set(false),
div {
class: "modal-content",
onclick: move |evt: MouseEvent| evt.stop_propagation(),
h3 { "Save Search" }
div { class: "form-field",
label { "Name" }
input {
r#type: "text",
placeholder: "Enter a name for this search...",
value: "{save_name}",
oninput: move |e| save_name.set(e.value()),
onkeypress: {
let query = query.read().clone();
let sort = sort_by.read().clone();
let handler = on_save_search;
move |e: KeyboardEvent| {
if e.key() == Key::Enter {
let name = save_name.read().clone();
if !name.is_empty() {
let sort_opt = if sort == "relevance" {
None
} else {
Some(sort.clone())
};
if let Some(ref h) = handler {
h.call((name, query.clone(), sort_opt));
}
show_save_dialog.set(false);
save_name.set(String::new());
}
}
}
},
}
}
p { class: "text-muted text-sm", "Query: {query}" }
div { class: "modal-actions",
button {
class: "btn btn-ghost",
onclick: move |_| {
show_save_dialog.set(false);
save_name.set(String::new());
},
"Cancel"
}
button {
class: "btn btn-primary",
disabled: save_name.read().is_empty(),
onclick: {
let query_val = query.read().clone();
let sort_val = sort_by.read().clone();
let handler = on_save_search;
move |_| {
let name = save_name.read().clone();
if !name.is_empty() {
let sort_opt = if sort_val == "relevance" {
None
} else {
Some(sort_val.clone())
};
if let Some(ref h) = handler {
h.call((name, query_val.clone(), sort_opt));
}
show_save_dialog.set(false);
save_name.set(String::new());
}
}
},
"Save"
}
}
}
}
}
// Saved searches list
if *show_saved_list.read() && !saved_searches.is_empty() {
div { class: "card mb-16",
div { class: "card-header",
h4 { "Saved Searches" }
button {
class: "btn btn-ghost btn-sm",
onclick: move |_| show_saved_list.set(false),
"Close"
}
}
div { class: "saved-searches-list",
for search in saved_searches.iter() {
{
let search_clone = search.clone();
let id_for_delete = search.id.clone();
let load_handler = on_load_saved_search;
let delete_handler = on_delete_saved_search;
rsx! {
div { class: "saved-search-item", key: "{search.id}",
div {
class: "saved-search-info",
onclick: {
let sc = search_clone.clone();
move |_| {
if let Some(ref h) = load_handler {
h.call(sc.clone());
}
query.set(sc.query.clone());
if let Some(ref s) = sc.sort_order {
sort_by.set(s.clone());
} else {
sort_by.set("relevance".to_string());
}
show_saved_list.set(false);
}
},
span { class: "saved-search-name", "{search.name}" }
span { class: "saved-search-query text-muted", "{search.query}" }
}
button {
class: "btn btn-danger btn-sm",
onclick: {
let id = id_for_delete.clone();
move |evt: MouseEvent| {
evt.stop_propagation();
if let Some(ref h) = delete_handler {
h.call(id.clone());
}
}
},
"Delete"
}
}
}
}
}
}
}
}
p { class: "text-muted text-sm mb-8", "Results: {total_count}" }
if results.is_empty() && query.read().is_empty() {
div { class: "empty-state",
h3 { class: "empty-title", "Search your media" }
p { class: "empty-subtitle",
"Enter a query above to find files by name, metadata, tags, or type."
}
}
}
if results.is_empty() && !query.read().is_empty() {
div { class: "empty-state",
h3 { class: "empty-title", "No results found" }
p { class: "empty-subtitle", "Try a different query or check the syntax help." }
}
}
// Content: grid or table
match current_mode {
1 => rsx! {
div { class: "media-grid",
for item in results.iter() {
{
let badge_class = type_badge_class(&item.media_type);
let card_click = {
let id = item.id.clone();
move |_| on_select.call(id.clone())
};
let thumb_url = if item.has_thumbnail {
format!("{}/api/v1/media/{}/thumbnail", server_url, item.id)
} else {
String::new()
};
let has_thumb = item.has_thumbnail;
let media_type = item.media_type.clone();
rsx! {
div { key: "{item.id}", class: "media-card", onclick: card_click,
div { class: "card-thumbnail",
if has_thumb {
img {
src: "{thumb_url}",
alt: "{item.file_name}",
loading: "lazy",
}
} else {
div { class: "card-type-icon {badge_class}", "{type_icon(&media_type)}" }
}
}
div { class: "card-info",
div { class: "card-name", title: "{item.file_name}", "{item.file_name}" }
div { class: "card-meta",
span { class: "type-badge {badge_class}", "{item.media_type}" }
span { class: "card-size", "{format_size(item.file_size)}" }
}
}
}
}
}
}
}
},
_ => rsx! {
table { class: "data-table",
thead {
tr {
th { "Name" }
th { "Type" }
th { "Artist" }
th { "Size" }
}
}
tbody {
for item in results.iter() {
{
let artist = item.artist.clone().unwrap_or_default();
let size = format_size(item.file_size);
let badge_class = type_badge_class(&item.media_type);
let row_click = {
let id = item.id.clone();
move |_| on_select.call(id.clone())
};
rsx! {
tr { key: "{item.id}", onclick: row_click,
td { "{item.file_name}" }
td {
span { class: "type-badge {badge_class}", "{item.media_type}" }
}
td { "{artist}" }
td { "{size}" }
}
}
}
}
}
}
},
}
// Pagination controls
PaginationControls { current_page: search_page, total_pages, on_page_change }
let do_search = {
let query = query;
let sort_by = sort_by;
move |_| {
let q = query.read().clone();
let s = sort_by.read().clone();
let sort = if s == "relevance" || s.is_empty() {
None
} else {
Some(s)
};
on_search.call((q, sort));
}
};
let on_key = {
let query = query;
let sort_by = sort_by;
move |e: KeyboardEvent| {
if e.key() == Key::Enter {
let q = query.read().clone();
let s = sort_by.read().clone();
let sort = if s == "relevance" || s.is_empty() {
None
} else {
Some(s)
};
on_search.call((q, sort));
}
}
};
let toggle_help = move |_| {
let current = *show_help.read();
show_help.set(!current);
};
let help_visible = *show_help.read();
let current_mode = *view_mode.read();
let total_pages = if page_size > 0 {
total_count.div_ceil(page_size)
} else {
1
};
rsx! {
div { class: "form-row mb-16",
input {
r#type: "text",
placeholder: "Search media...",
value: "{query}",
oninput: move |e| query.set(e.value()),
onkeypress: on_key,
}
select { value: "{sort_by}", onchange: move |e| sort_by.set(e.value()),
option { value: "relevance", "Relevance" }
option { value: "date_desc", "Newest" }
option { value: "date_asc", "Oldest" }
option { value: "name_asc", "Name A-Z" }
option { value: "name_desc", "Name Z-A" }
option { value: "size_desc", "Size (largest)" }
option { value: "size_asc", "Size (smallest)" }
}
button { class: "btn btn-primary", onclick: do_search, "Search" }
button { class: "btn btn-ghost", onclick: toggle_help, "Syntax Help" }
// Save/Load search buttons
if on_save_search.is_some() {
button {
class: "btn btn-secondary",
disabled: query.read().is_empty(),
onclick: move |_| show_save_dialog.set(true),
"Save"
}
}
if !saved_searches.is_empty() {
button {
class: "btn btn-ghost",
onclick: move |_| show_saved_list.toggle(),
"Saved ({saved_searches.len()})"
}
}
// View mode toggle
div { class: "view-toggle",
button {
class: if current_mode == 1 { "view-btn active" } else { "view-btn" },
onclick: move |_| view_mode.set(1),
title: "Grid view",
"\u{25a6}"
}
button {
class: if current_mode == 0 { "view-btn active" } else { "view-btn" },
onclick: move |_| view_mode.set(0),
title: "Table view",
"\u{2630}"
}
}
}
if help_visible {
div { class: "card mb-16",
h4 { "Search Syntax" }
ul {
li {
code { "hello world" }
" -- full text search (implicit AND)"
}
li {
code { "artist:Beatles" }
" -- field match"
}
li {
code { "type:pdf" }
" -- filter by media type"
}
li {
code { "tag:music" }
" -- filter by tag"
}
li {
code { "hello OR world" }
" -- OR operator"
}
li {
code { "-excluded" }
" -- NOT (exclude term)"
}
li {
code { "hel*" }
" -- prefix search"
}
li {
code { "hello~" }
" -- fuzzy search"
}
li {
code { "\"exact phrase\"" }
" -- quoted exact match"
}
}
}
}
// Save search dialog
if *show_save_dialog.read() {
div {
class: "modal-overlay",
onclick: move |_| show_save_dialog.set(false),
div {
class: "modal-content",
onclick: move |evt: MouseEvent| evt.stop_propagation(),
h3 { "Save Search" }
div { class: "form-field",
label { "Name" }
input {
r#type: "text",
placeholder: "Enter a name for this search...",
value: "{save_name}",
oninput: move |e| save_name.set(e.value()),
onkeypress: {
let query = query.read().clone();
let sort = sort_by.read().clone();
let handler = on_save_search;
move |e: KeyboardEvent| {
if e.key() == Key::Enter {
let name = save_name.read().clone();
if !name.is_empty() {
let sort_opt = if sort == "relevance" {
None
} else {
Some(sort.clone())
};
if let Some(ref h) = handler {
h.call((name, query.clone(), sort_opt));
}
show_save_dialog.set(false);
save_name.set(String::new());
}
}
}
},
}
}
p { class: "text-muted text-sm", "Query: {query}" }
div { class: "modal-actions",
button {
class: "btn btn-ghost",
onclick: move |_| {
show_save_dialog.set(false);
save_name.set(String::new());
},
"Cancel"
}
button {
class: "btn btn-primary",
disabled: save_name.read().is_empty(),
onclick: {
let query_val = query.read().clone();
let sort_val = sort_by.read().clone();
let handler = on_save_search;
move |_| {
let name = save_name.read().clone();
if !name.is_empty() {
let sort_opt = if sort_val == "relevance" {
None
} else {
Some(sort_val.clone())
};
if let Some(ref h) = handler {
h.call((name, query_val.clone(), sort_opt));
}
show_save_dialog.set(false);
save_name.set(String::new());
}
}
},
"Save"
}
}
}
}
}
// Saved searches list
if *show_saved_list.read() && !saved_searches.is_empty() {
div { class: "card mb-16",
div { class: "card-header",
h4 { "Saved Searches" }
button {
class: "btn btn-ghost btn-sm",
onclick: move |_| show_saved_list.set(false),
"Close"
}
}
div { class: "saved-searches-list",
for search in saved_searches.iter() {
{
let search_clone = search.clone();
let id_for_delete = search.id.clone();
let load_handler = on_load_saved_search;
let delete_handler = on_delete_saved_search;
rsx! {
div { class: "saved-search-item", key: "{search.id}",
div {
class: "saved-search-info",
onclick: {
let sc = search_clone.clone();
move |_| {
if let Some(ref h) = load_handler {
h.call(sc.clone());
}
query.set(sc.query.clone());
if let Some(ref s) = sc.sort_order {
sort_by.set(s.clone());
} else {
sort_by.set("relevance".to_string());
}
show_saved_list.set(false);
}
},
span { class: "saved-search-name", "{search.name}" }
span { class: "saved-search-query text-muted", "{search.query}" }
}
button {
class: "btn btn-danger btn-sm",
onclick: {
let id = id_for_delete.clone();
move |evt: MouseEvent| {
evt.stop_propagation();
if let Some(ref h) = delete_handler {
h.call(id.clone());
}
}
},
"Delete"
}
}
}
}
}
}
}
}
p { class: "text-muted text-sm mb-8", "Results: {total_count}" }
if results.is_empty() && query.read().is_empty() {
div { class: "empty-state",
h3 { class: "empty-title", "Search your media" }
p { class: "empty-subtitle",
"Enter a query above to find files by name, metadata, tags, or type."
}
}
}
if results.is_empty() && !query.read().is_empty() {
div { class: "empty-state",
h3 { class: "empty-title", "No results found" }
p { class: "empty-subtitle", "Try a different query or check the syntax help." }
}
}
// Content: grid or table
match current_mode {
1 => rsx! {
div { class: "media-grid",
for item in results.iter() {
{
let badge_class = type_badge_class(&item.media_type);
let card_click = {
let id = item.id.clone();
move |_| on_select.call(id.clone())
};
let thumb_url = if item.has_thumbnail {
format!("{}/api/v1/media/{}/thumbnail", server_url, item.id)
} else {
String::new()
};
let has_thumb = item.has_thumbnail;
let media_type = item.media_type.clone();
rsx! {
div { key: "{item.id}", class: "media-card", onclick: card_click,
div { class: "card-thumbnail",
if has_thumb {
img {
src: "{thumb_url}",
alt: "{item.file_name}",
loading: "lazy",
}
} else {
div { class: "card-type-icon {badge_class}", "{type_icon(&media_type)}" }
}
}
div { class: "card-info",
div { class: "card-name", title: "{item.file_name}", "{item.file_name}" }
div { class: "card-meta",
span { class: "type-badge {badge_class}", "{item.media_type}" }
span { class: "card-size", "{format_size(item.file_size)}" }
}
}
}
}
}
}
}
},
_ => rsx! {
table { class: "data-table",
thead {
tr {
th { "Name" }
th { "Type" }
th { "Artist" }
th { "Size" }
}
}
tbody {
for item in results.iter() {
{
let artist = item.artist.clone().unwrap_or_default();
let size = format_size(item.file_size);
let badge_class = type_badge_class(&item.media_type);
let row_click = {
let id = item.id.clone();
move |_| on_select.call(id.clone())
};
rsx! {
tr { key: "{item.id}", onclick: row_click,
td { "{item.file_name}" }
td {
span { class: "type-badge {badge_class}", "{item.media_type}" }
}
td { "{artist}" }
td { "{size}" }
}
}
}
}
}
}
},
}
// Pagination controls
PaginationControls { current_page: search_page, total_pages, on_page_change }
}
}

1090
crates/pinakes-ui/src/components/settings.rs
View file

File diff suppressed because it is too large Load diff

506
crates/pinakes-ui/src/components/statistics.rs
View file

@ -1,7 +1,15 @@
use dioxus::prelude::*;
use dioxus_free_icons::Icon;
use dioxus_free_icons::icons::fa_solid_icons::{
FaChartBar, FaCircle, FaClock, FaDatabase, FaFolder, FaLink, FaTags,
use dioxus_free_icons::{
Icon,
icons::fa_solid_icons::{
FaChartBar,
FaCircle,
FaClock,
FaDatabase,
FaFolder,
FaLink,
FaTags,
},
};
use super::utils::format_size;
@ -9,262 +17,262 @@ use crate::client::LibraryStatisticsResponse;
#[component]
pub fn Statistics(
stats: Option<LibraryStatisticsResponse>,
#[props(default)] error: Option<String>,
on_refresh: EventHandler<()>,
stats: Option<LibraryStatisticsResponse>,
#[props(default)] error: Option<String>,
on_refresh: EventHandler<()>,
) -> Element {
rsx! {
div { class: "statistics-page",
div { class: "card",
div { class: "card-header",
h3 { class: "card-title", "Library Statistics" }
button {
class: "btn btn-sm btn-secondary",
onclick: move |_| on_refresh.call(()),
"\u{21bb} Refresh"
}
}
rsx! {
div { class: "statistics-page",
div { class: "card",
div { class: "card-header",
h3 { class: "card-title", "Library Statistics" }
button {
class: "btn btn-sm btn-secondary",
onclick: move |_| on_refresh.call(()),
"\u{21bb} Refresh"
}
}
if let Some(ref err) = error {
div { class: "alert alert-error mb-8",
span { "{err}" }
button {
class: "btn btn-sm btn-secondary ml-8",
onclick: move |_| on_refresh.call(()),
"Retry"
}
}
}
if let Some(ref err) = error {
div { class: "alert alert-error mb-8",
span { "{err}" }
button {
class: "btn btn-sm btn-secondary ml-8",
onclick: move |_| on_refresh.call(()),
"Retry"
}
}
}
match stats.as_ref() {
Some(s) => {
let total_size = format_size(s.total_size_bytes);
let avg_size = format_size(s.avg_file_size_bytes);
rsx! {
div { class: "stats-overview",
div { class: "stat-card stat-primary",
div { class: "stat-icon",
Icon { icon: FaFolder, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{s.total_media}" }
div { class: "stat-label", "Total Media" }
}
}
div { class: "stat-card stat-success",
div { class: "stat-icon",
Icon { icon: FaDatabase, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{total_size}" }
div { class: "stat-label", "Total Size" }
}
}
div { class: "stat-card stat-info",
div { class: "stat-icon",
Icon { icon: FaChartBar, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{avg_size}" }
div { class: "stat-label", "Average Size" }
}
}
div { class: "stat-card stat-warning",
div { class: "stat-icon",
Icon { icon: FaTags, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{s.total_tags}" }
div { class: "stat-label", "Tags" }
}
}
div { class: "stat-card stat-purple",
div { class: "stat-icon",
Icon { icon: FaCircle, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{s.total_collections}" }
div { class: "stat-label", "Collections" }
}
}
div { class: "stat-card stat-danger",
div { class: "stat-icon",
Icon { icon: FaLink, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{s.total_duplicates}" }
div { class: "stat-label", "Duplicates" }
}
}
}
match stats.as_ref() {
Some(s) => {
let total_size = format_size(s.total_size_bytes);
let avg_size = format_size(s.avg_file_size_bytes);
rsx! {
div { class: "stats-overview",
div { class: "stat-card stat-primary",
div { class: "stat-icon",
Icon { icon: FaFolder, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{s.total_media}" }
div { class: "stat-label", "Total Media" }
}
}
div { class: "stat-card stat-success",
div { class: "stat-icon",
Icon { icon: FaDatabase, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{total_size}" }
div { class: "stat-label", "Total Size" }
}
}
div { class: "stat-card stat-info",
div { class: "stat-icon",
Icon { icon: FaChartBar, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{avg_size}" }
div { class: "stat-label", "Average Size" }
}
}
div { class: "stat-card stat-warning",
div { class: "stat-icon",
Icon { icon: FaTags, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{s.total_tags}" }
div { class: "stat-label", "Tags" }
}
}
div { class: "stat-card stat-purple",
div { class: "stat-icon",
Icon { icon: FaCircle, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{s.total_collections}" }
div { class: "stat-label", "Collections" }
}
}
div { class: "stat-card stat-danger",
div { class: "stat-icon",
Icon { icon: FaLink, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{s.total_duplicates}" }
div { class: "stat-label", "Duplicates" }
}
}
}
if !s.media_by_type.is_empty() {
{
let max_count = s.media_by_type.iter().map(|i| i.count).max().unwrap_or(1)
if !s.media_by_type.is_empty() {
{
let max_count = s.media_by_type.iter().map(|i| i.count).max().unwrap_or(1)
as f64;
rsx! {
div { class: "stats-section",
h4 { class: "section-title",
Icon {
icon: FaChartBar,
width: 16,
height: 16,
style: "margin-right: 8px; vertical-align: middle;",
}
"Media by Type"
}
div { class: "chart-bars",
for item in s.media_by_type.iter() {
{
let percentage = (item.count as f64 / max_count) * 100.0;
let name = item.name.clone();
let count = item.count;
rsx! {
div { key: "{name}", class: "bar-item",
div { class: "bar-label", "{name}" }
div { class: "bar-track",
div { class: "bar-fill bar-primary", style: "width: {percentage}%" }
}
div { class: "bar-value", "{count}" }
}
}
}
}
}
}
}
}
}
as f64;
rsx! {
div { class: "stats-section",
h4 { class: "section-title",
Icon {
icon: FaChartBar,
width: 16,
height: 16,
style: "margin-right: 8px; vertical-align: middle;",
}
"Media by Type"
}
div { class: "chart-bars",
for item in s.media_by_type.iter() {
{
let percentage = (item.count as f64 / max_count) * 100.0;
let name = item.name.clone();
let count = item.count;
rsx! {
div { key: "{name}", class: "bar-item",
div { class: "bar-label", "{name}" }
div { class: "bar-track",
div { class: "bar-fill bar-primary", style: "width: {percentage}%" }
}
div { class: "bar-value", "{count}" }
}
}
}
}
}
}
}
}
}
if !s.storage_by_type.is_empty() {
{
let max_size = s.storage_by_type.iter().map(|i| i.count).max().unwrap_or(1)
if !s.storage_by_type.is_empty() {
{
let max_size = s.storage_by_type.iter().map(|i| i.count).max().unwrap_or(1)
as f64;
rsx! {
div { class: "stats-section",
h4 { class: "section-title",
Icon {
icon: FaDatabase,
width: 16,
height: 16,
style: "margin-right: 8px; vertical-align: middle;",
}
"Storage by Type"
}
div { class: "chart-bars",
for item in s.storage_by_type.iter() {
{
let percentage = (item.count as f64 / max_size) * 100.0;
let name = item.name.clone();
let size_str = format_size(item.count);
rsx! {
div { key: "{name}", class: "bar-item",
div { class: "bar-label", "{name}" }
div { class: "bar-track",
div { class: "bar-fill bar-success", style: "width: {percentage}%" }
}
div { class: "bar-value", "{size_str}" }
}
}
}
}
}
}
}
}
}
as f64;
rsx! {
div { class: "stats-section",
h4 { class: "section-title",
Icon {
icon: FaDatabase,
width: 16,
height: 16,
style: "margin-right: 8px; vertical-align: middle;",
}
"Storage by Type"
}
div { class: "chart-bars",
for item in s.storage_by_type.iter() {
{
let percentage = (item.count as f64 / max_size) * 100.0;
let name = item.name.clone();
let size_str = format_size(item.count);
rsx! {
div { key: "{name}", class: "bar-item",
div { class: "bar-label", "{name}" }
div { class: "bar-track",
div { class: "bar-fill bar-success", style: "width: {percentage}%" }
}
div { class: "bar-value", "{size_str}" }
}
}
}
}
}
}
}
}
}
if !s.top_tags.is_empty() {
div { class: "stats-section",
h4 { class: "section-title",
Icon {
icon: FaTags,
width: 16,
height: 16,
style: "margin-right: 8px; vertical-align: middle;",
}
"Top Tags"
}
div { class: "tag-list",
for item in s.top_tags.iter() {
div { class: "tag-item",
span { class: "tag-badge", "{item.name}" }
span { class: "tag-count", "{item.count}" }
}
}
}
}
}
if !s.top_tags.is_empty() {
div { class: "stats-section",
h4 { class: "section-title",
Icon {
icon: FaTags,
width: 16,
height: 16,
style: "margin-right: 8px; vertical-align: middle;",
}
"Top Tags"
}
div { class: "tag-list",
for item in s.top_tags.iter() {
div { class: "tag-item",
span { class: "tag-badge", "{item.name}" }
span { class: "tag-count", "{item.count}" }
}
}
}
}
}
if !s.top_collections.is_empty() {
div { class: "stats-section",
h4 { class: "section-title",
Icon {
icon: FaCircle,
width: 16,
height: 16,
style: "margin-right: 8px; vertical-align: middle;",
}
"Top Collections"
}
div { class: "collection-list",
for item in s.top_collections.iter() {
div { class: "collection-item",
Icon {
icon: FaFolder,
width: 16,
height: 16,
class: "collection-icon",
}
span { class: "collection-name", "{item.name}" }
span { class: "collection-count", "{item.count}" }
}
}
}
}
}
if !s.top_collections.is_empty() {
div { class: "stats-section",
h4 { class: "section-title",
Icon {
icon: FaCircle,
width: 16,
height: 16,
style: "margin-right: 8px; vertical-align: middle;",
}
"Top Collections"
}
div { class: "collection-list",
for item in s.top_collections.iter() {
div { class: "collection-item",
Icon {
icon: FaFolder,
width: 16,
height: 16,
class: "collection-icon",
}
span { class: "collection-name", "{item.name}" }
span { class: "collection-count", "{item.count}" }
}
}
}
}
}
div { class: "stats-section",
h4 { class: "section-title",
Icon {
icon: FaClock,
width: 16,
height: 16,
style: "margin-right: 8px; vertical-align: middle;",
}
"Date Range"
}
div { class: "date-range",
div { class: "date-item",
Icon { icon: FaClock, width: 16, height: 16 }
div { class: "date-content",
div { class: "date-label", "Oldest Item" }
div { class: "date-value", "{s.oldest_item.as_deref().unwrap_or(\"N/A\")}" }
}
}
div { class: "date-item",
Icon { icon: FaClock, width: 16, height: 16 }
div { class: "date-content",
div { class: "date-label", "Newest Item" }
div { class: "date-value", "{s.newest_item.as_deref().unwrap_or(\"N/A\")}" }
}
}
}
}
}
}
None => rsx! {
div { class: "empty-state",
div { class: "spinner" }
p { "Loading statistics..." }
}
},
}
}
}
}
div { class: "stats-section",
h4 { class: "section-title",
Icon {
icon: FaClock,
width: 16,
height: 16,
style: "margin-right: 8px; vertical-align: middle;",
}
"Date Range"
}
div { class: "date-range",
div { class: "date-item",
Icon { icon: FaClock, width: 16, height: 16 }
div { class: "date-content",
div { class: "date-label", "Oldest Item" }
div { class: "date-value", "{s.oldest_item.as_deref().unwrap_or(\"N/A\")}" }
}
}
div { class: "date-item",
Icon { icon: FaClock, width: 16, height: 16 }
div { class: "date-content",
div { class: "date-label", "Newest Item" }
div { class: "date-value", "{s.newest_item.as_deref().unwrap_or(\"N/A\")}" }
}
}
}
}
}
}
None => rsx! {
div { class: "empty-state",
div { class: "spinner" }
p { "Loading statistics..." }
}
},
}
}
}
}
}

534
crates/pinakes-ui/src/components/tags.rs
View file

@ -4,273 +4,275 @@ use crate::client::TagResponse;
#[component]
pub fn Tags(
tags: Vec<TagResponse>,
on_create: EventHandler<(String, Option<String>)>,
on_delete: EventHandler<String>,
tags: Vec<TagResponse>,
on_create: EventHandler<(String, Option<String>)>,
on_delete: EventHandler<String>,
) -> Element {
let mut new_tag_name = use_signal(String::new);
let mut parent_tag = use_signal(String::new);
let mut confirm_delete: Signal<Option<String>> = use_signal(|| None);
let mut new_tag_name = use_signal(String::new);
let mut parent_tag = use_signal(String::new);
let mut confirm_delete: Signal<Option<String>> = use_signal(|| None);
let create_click = move |_| {
let name = new_tag_name.read().clone();
if name.is_empty() {
return;
}
let parent = {
let p = parent_tag.read().clone();
if p.is_empty() { None } else { Some(p) }
};
on_create.call((name, parent));
new_tag_name.set(String::new());
parent_tag.set(String::new());
};
let create_key = move |e: KeyboardEvent| {
if e.key() == Key::Enter {
let name = new_tag_name.read().clone();
if name.is_empty() {
return;
}
let parent = {
let p = parent_tag.read().clone();
if p.is_empty() { None } else { Some(p) }
};
on_create.call((name, parent));
new_tag_name.set(String::new());
parent_tag.set(String::new());
}
};
// Separate root tags and child tags
let root_tags: Vec<&TagResponse> = tags.iter().filter(|t| t.parent_id.is_none()).collect();
let child_tags: Vec<&TagResponse> = tags.iter().filter(|t| t.parent_id.is_some()).collect();
rsx! {
div { class: "card",
div { class: "card-header",
h3 { class: "card-title", "Tags" }
}
div { class: "form-row mb-16",
input {
r#type: "text",
placeholder: "New tag name...",
value: "{new_tag_name}",
oninput: move |e| new_tag_name.set(e.value()),
onkeypress: create_key,
}
select {
value: "{parent_tag}",
onchange: move |e| parent_tag.set(e.value()),
option { value: "", "No Parent" }
for tag in tags.iter() {
option { key: "{tag.id}", value: "{tag.id}", "{tag.name}" }
}
}
button { class: "btn btn-primary", onclick: create_click, "Create" }
}
if tags.is_empty() {
div { class: "empty-state",
p { class: "empty-subtitle", "No tags yet. Create one above." }
}
} else {
div { class: "tag-list",
// Root tags
for tag in root_tags.iter() {
{
let tag_id = tag.id.clone();
let tag_name = tag.name.clone();
let children: Vec<&TagResponse> = child_tags
.iter()
.filter(|c| c.parent_id.as_deref() == Some(tag_id.as_str()))
.copied()
.collect();
let is_confirming = confirm_delete.read().as_deref() == Some(tag_id.as_str());
rsx! {
div { key: "{tag_id}", class: "tag-group",
span { class: "tag-badge",
"{tag_name}"
if is_confirming {
{
let confirm_id = tag_id.clone();
rsx! {
span { class: "tag-confirm-delete",
" Are you sure? "
span {
class: "tag-confirm-yes",
onclick: move |_| {
on_delete.call(confirm_id.clone());
confirm_delete.set(None);
},
"Confirm"
}
" "
span {
class: "tag-confirm-no",
onclick: move |_| {
confirm_delete.set(None);
},
"Cancel"
}
}
}
}
} else {
{
let remove_id = tag_id.clone();
rsx! {
span {
class: "tag-remove",
onclick: move |_| {
confirm_delete.set(Some(remove_id.clone()));
},
"\u{00d7}"
}
}
}
}
}
if !children.is_empty() {
div {
class: "tag-children",
style: "margin-left: 16px; margin-top: 4px;",
for child in children.iter() {
{
let child_id = child.id.clone();
let child_name = child.name.clone();
let child_is_confirming = confirm_delete.read().as_deref()
== Some(child_id.as_str());
rsx! {
span { key: "{child_id}", class: "tag-badge",
"{child_name}"
if child_is_confirming {
{
let confirm_id = child_id.clone();
rsx! {
span { class: "tag-confirm-delete",
" Are you sure? "
span {
class: "tag-confirm-yes",
onclick: move |_| {
on_delete.call(confirm_id.clone());
confirm_delete.set(None);
},
"Confirm"
}
" "
span {
class: "tag-confirm-no",
onclick: move |_| {
confirm_delete.set(None);
},
"Cancel"
}
}
}
}
} else {
{
let remove_id = child_id.clone();
rsx! {
span {
class: "tag-remove",
onclick: move |_| {
confirm_delete.set(Some(remove_id.clone()));
},
"\u{00d7}"
}
}
}
}
}
}
}
}
}
}
}
}
}
}
// Orphan child tags (parent not found in current list)
for tag in child_tags.iter() {
{
let parent_exists = root_tags
.iter()
.any(|r| Some(r.id.as_str()) == tag.parent_id.as_deref())
|| child_tags
.iter()
.any(|c| {
c.id != tag.id && Some(c.id.as_str()) == tag.parent_id.as_deref()
});
if !parent_exists {
let orphan_id = tag.id.clone();
let orphan_name = tag.name.clone();
let parent_label = tag.parent_id.clone().unwrap_or_default();
let is_confirming = confirm_delete.read().as_deref()
== Some(orphan_id.as_str());
rsx! {
span { key: "{orphan_id}", class: "tag-badge",
"{orphan_name}"
span { class: "text-muted text-sm", " (parent: {parent_label})" }
if is_confirming {
{
let confirm_id = orphan_id.clone();
rsx! {
span { class: "tag-confirm-delete",
" Are you sure? "
span {
class: "tag-confirm-yes",
onclick: move |_| {
on_delete.call(confirm_id.clone());
confirm_delete.set(None);
},
"Confirm"
}
" "
span {
class: "tag-confirm-no",
onclick: move |_| {
confirm_delete.set(None);
},
"Cancel"
}
}
}
}
} else {
{
let remove_id = orphan_id.clone();
rsx! {
span {
class: "tag-remove",
onclick: move |_| {
confirm_delete.set(Some(remove_id.clone()));
},
"\u{00d7}"
}
}
}
}
}
}
} else {
rsx! {}
}
}
}
}
}
}
let create_click = move |_| {
let name = new_tag_name.read().clone();
if name.is_empty() {
return;
}
let parent = {
let p = parent_tag.read().clone();
if p.is_empty() { None } else { Some(p) }
};
on_create.call((name, parent));
new_tag_name.set(String::new());
parent_tag.set(String::new());
};
let create_key = move |e: KeyboardEvent| {
if e.key() == Key::Enter {
let name = new_tag_name.read().clone();
if name.is_empty() {
return;
}
let parent = {
let p = parent_tag.read().clone();
if p.is_empty() { None } else { Some(p) }
};
on_create.call((name, parent));
new_tag_name.set(String::new());
parent_tag.set(String::new());
}
};
// Separate root tags and child tags
let root_tags: Vec<&TagResponse> =
tags.iter().filter(|t| t.parent_id.is_none()).collect();
let child_tags: Vec<&TagResponse> =
tags.iter().filter(|t| t.parent_id.is_some()).collect();
rsx! {
div { class: "card",
div { class: "card-header",
h3 { class: "card-title", "Tags" }
}
div { class: "form-row mb-16",
input {
r#type: "text",
placeholder: "New tag name...",
value: "{new_tag_name}",
oninput: move |e| new_tag_name.set(e.value()),
onkeypress: create_key,
}
select {
value: "{parent_tag}",
onchange: move |e| parent_tag.set(e.value()),
option { value: "", "No Parent" }
for tag in tags.iter() {
option { key: "{tag.id}", value: "{tag.id}", "{tag.name}" }
}
}
button { class: "btn btn-primary", onclick: create_click, "Create" }
}
if tags.is_empty() {
div { class: "empty-state",
p { class: "empty-subtitle", "No tags yet. Create one above." }
}
} else {
div { class: "tag-list",
// Root tags
for tag in root_tags.iter() {
{
let tag_id = tag.id.clone();
let tag_name = tag.name.clone();
let children: Vec<&TagResponse> = child_tags
.iter()
.filter(|c| c.parent_id.as_deref() == Some(tag_id.as_str()))
.copied()
.collect();
let is_confirming = confirm_delete.read().as_deref() == Some(tag_id.as_str());
rsx! {
div { key: "{tag_id}", class: "tag-group",
span { class: "tag-badge",
"{tag_name}"
if is_confirming {
{
let confirm_id = tag_id.clone();
rsx! {
span { class: "tag-confirm-delete",
" Are you sure? "
span {
class: "tag-confirm-yes",
onclick: move |_| {
on_delete.call(confirm_id.clone());
confirm_delete.set(None);
},
"Confirm"
}
" "
span {
class: "tag-confirm-no",
onclick: move |_| {
confirm_delete.set(None);
},
"Cancel"
}
}
}
}
} else {
{
let remove_id = tag_id.clone();
rsx! {
span {
class: "tag-remove",
onclick: move |_| {
confirm_delete.set(Some(remove_id.clone()));
},
"\u{00d7}"
}
}
}
}
}
if !children.is_empty() {
div {
class: "tag-children",
style: "margin-left: 16px; margin-top: 4px;",
for child in children.iter() {
{
let child_id = child.id.clone();
let child_name = child.name.clone();
let child_is_confirming = confirm_delete.read().as_deref()
== Some(child_id.as_str());
rsx! {
span { key: "{child_id}", class: "tag-badge",
"{child_name}"
if child_is_confirming {
{
let confirm_id = child_id.clone();
rsx! {
span { class: "tag-confirm-delete",
" Are you sure? "
span {
class: "tag-confirm-yes",
onclick: move |_| {
on_delete.call(confirm_id.clone());
confirm_delete.set(None);
},
"Confirm"
}
" "
span {
class: "tag-confirm-no",
onclick: move |_| {
confirm_delete.set(None);
},
"Cancel"
}
}
}
}
} else {
{
let remove_id = child_id.clone();
rsx! {
span {
class: "tag-remove",
onclick: move |_| {
confirm_delete.set(Some(remove_id.clone()));
},
"\u{00d7}"
}
}
}
}
}
}
}
}
}
}
}
}
}
}
// Orphan child tags (parent not found in current list)
for tag in child_tags.iter() {
{
let parent_exists = root_tags
.iter()
.any(|r| Some(r.id.as_str()) == tag.parent_id.as_deref())
|| child_tags
.iter()
.any(|c| {
c.id != tag.id && Some(c.id.as_str()) == tag.parent_id.as_deref()
});
if !parent_exists {
let orphan_id = tag.id.clone();
let orphan_name = tag.name.clone();
let parent_label = tag.parent_id.clone().unwrap_or_default();
let is_confirming = confirm_delete.read().as_deref()
== Some(orphan_id.as_str());
rsx! {
span { key: "{orphan_id}", class: "tag-badge",
"{orphan_name}"
span { class: "text-muted text-sm", " (parent: {parent_label})" }
if is_confirming {
{
let confirm_id = orphan_id.clone();
rsx! {
span { class: "tag-confirm-delete",
" Are you sure? "
span {
class: "tag-confirm-yes",
onclick: move |_| {
on_delete.call(confirm_id.clone());
confirm_delete.set(None);
},
"Confirm"
}
" "
span {
class: "tag-confirm-no",
onclick: move |_| {
confirm_delete.set(None);
},
"Cancel"
}
}
}
}
} else {
{
let remove_id = orphan_id.clone();
rsx! {
span {
class: "tag-remove",
onclick: move |_| {
confirm_delete.set(Some(remove_id.clone()));
},
"\u{00d7}"
}
}
}
}
}
}
} else {
rsx! {}
}
}
}
}
}
}
}
}

307
crates/pinakes-ui/src/components/tasks.rs
View file

@ -1,166 +1,175 @@
use dioxus::prelude::*;
use dioxus_free_icons::Icon;
use dioxus_free_icons::icons::fa_solid_icons::{
FaArrowsRotate, FaCalendar, FaCircleCheck, FaClock, FaPause, FaPlay,
use dioxus_free_icons::{
Icon,
icons::fa_solid_icons::{
FaArrowsRotate,
FaCalendar,
FaCircleCheck,
FaClock,
FaPause,
FaPlay,
},
};
use crate::client::ScheduledTaskResponse;
#[component]
pub fn Tasks(
tasks: Vec<ScheduledTaskResponse>,
#[props(default)] error: Option<String>,
on_refresh: EventHandler<()>,
on_toggle: EventHandler<String>,
on_run_now: EventHandler<String>,
tasks: Vec<ScheduledTaskResponse>,
#[props(default)] error: Option<String>,
on_refresh: EventHandler<()>,
on_toggle: EventHandler<String>,
on_run_now: EventHandler<String>,
) -> Element {
rsx! {
div { class: "tasks-container",
div { class: "card mb-16",
div { class: "card-header",
h3 { class: "card-title", "Scheduled Tasks" }
button {
class: "btn btn-sm btn-secondary",
onclick: move |_| on_refresh.call(()),
Icon { icon: FaArrowsRotate, width: 14, height: 14 }
" Refresh"
}
}
rsx! {
div { class: "tasks-container",
div { class: "card mb-16",
div { class: "card-header",
h3 { class: "card-title", "Scheduled Tasks" }
button {
class: "btn btn-sm btn-secondary",
onclick: move |_| on_refresh.call(()),
Icon { icon: FaArrowsRotate, width: 14, height: 14 }
" Refresh"
}
}
if let Some(ref err) = error {
div { class: "alert alert-error mb-8",
span { "{err}" }
button {
class: "btn btn-sm btn-secondary ml-8",
onclick: move |_| on_refresh.call(()),
"Retry"
}
}
}
if let Some(ref err) = error {
div { class: "alert alert-error mb-8",
span { "{err}" }
button {
class: "btn btn-sm btn-secondary ml-8",
onclick: move |_| on_refresh.call(()),
"Retry"
}
}
}
if tasks.is_empty() {
div { class: "empty-state",
div { class: "empty-icon",
Icon { icon: FaCalendar, width: 48, height: 48 }
}
p { "No scheduled tasks configured." }
p { class: "text-muted",
"Tasks will appear here once configured on the server."
}
}
} else {
div { class: "tasks-grid",
for task in tasks.iter() {
{
let task_id_toggle = task.id.clone();
let task_id_run = task.id.clone();
let last_run = task.last_run.clone().unwrap_or_else(|| "Never".to_string());
let next_run = task
if tasks.is_empty() {
div { class: "empty-state",
div { class: "empty-icon",
Icon { icon: FaCalendar, width: 48, height: 48 }
}
p { "No scheduled tasks configured." }
p { class: "text-muted",
"Tasks will appear here once configured on the server."
}
}
} else {
div { class: "tasks-grid",
for task in tasks.iter() {
{
let task_id_toggle = task.id.clone();
let task_id_run = task.id.clone();
let last_run = task.last_run.clone().unwrap_or_else(|| "Never".to_string());
let next_run = task
// Header with status and actions
// Header with status and actions
// Task info grid
// Task info grid
// Actions
.next_run
.clone()
.unwrap_or_else(|| "Not scheduled".to_string());
let last_status = task
.last_status
.clone()
.unwrap_or_else(|| "No runs yet".to_string());
let is_enabled = task.enabled;
let task_name = task.name.clone();
let schedule = task.schedule.clone();
rsx! {
div { class: if is_enabled { "task-card task-card-enabled" } else { "task-card task-card-disabled" },
// Actions
.next_run
.clone()
.unwrap_or_else(|| "Not scheduled".to_string());
let last_status = task
.last_status
.clone()
.unwrap_or_else(|| "No runs yet".to_string());
let is_enabled = task.enabled;
let task_name = task.name.clone();
let schedule = task.schedule.clone();
rsx! {
div { class: if is_enabled { "task-card task-card-enabled" } else { "task-card task-card-disabled" },
div { class: "task-card-header",
div { class: "task-header-left",
div { class: "task-name", "{task_name}" }
div { class: "task-schedule",
span { class: "schedule-icon",
Icon { icon: FaClock, width: 14, height: 14 }
}
"{schedule}"
}
}
div { class: "task-status-badge",
if is_enabled {
span { class: "status-badge status-enabled",
span { class: "status-dot" }
"Active"
}
} else {
span { class: "status-badge status-disabled",
span { class: "status-dot" }
"Disabled"
}
}
}
}
div { class: "task-info-grid",
div { class: "task-info-item",
div { class: "task-info-icon",
Icon { icon: FaClock, width: 16, height: 16 }
}
div { class: "task-info-content",
div { class: "task-info-label", "Last Run" }
div { class: "task-info-value", "{last_run}" }
}
}
div { class: "task-info-item",
div { class: "task-info-icon",
Icon { icon: FaClock, width: 16, height: 16 }
}
div { class: "task-info-content",
div { class: "task-info-label", "Next Run" }
div { class: "task-info-value", "{next_run}" }
}
}
div { class: "task-info-item",
div { class: "task-info-icon",
Icon { icon: FaCircleCheck, width: 16, height: 16 }
}
div { class: "task-info-content",
div { class: "task-info-label", "Last Status" }
div { class: "task-info-value", "{last_status}" }
}
}
}
div { class: "task-card-actions",
button {
class: if is_enabled { "btn btn-sm btn-secondary" } else { "btn btn-sm btn-primary" },
onclick: move |_| on_toggle.call(task_id_toggle.clone()),
if is_enabled {
span {
Icon { icon: FaPause, width: 14, height: 14 }
" Disable"
}
} else {
span {
Icon { icon: FaPlay, width: 14, height: 14 }
" Enable"
}
}
}
button {
class: "btn btn-sm btn-primary",
onclick: move |_| on_run_now.call(task_id_run.clone()),
disabled: !is_enabled,
Icon { icon: FaPlay, width: 14, height: 14 }
" Run Now"
}
}
}
}
}
}
}
}
}
}
}
div { class: "task-card-header",
div { class: "task-header-left",
div { class: "task-name", "{task_name}" }
div { class: "task-schedule",
span { class: "schedule-icon",
Icon { icon: FaClock, width: 14, height: 14 }
}
"{schedule}"
}
}
div { class: "task-status-badge",
if is_enabled {
span { class: "status-badge status-enabled",
span { class: "status-dot" }
"Active"
}
} else {
span { class: "status-badge status-disabled",
span { class: "status-dot" }
"Disabled"
}
}
}
}
div { class: "task-info-grid",
div { class: "task-info-item",
div { class: "task-info-icon",
Icon { icon: FaClock, width: 16, height: 16 }
}
div { class: "task-info-content",
div { class: "task-info-label", "Last Run" }
div { class: "task-info-value", "{last_run}" }
}
}
div { class: "task-info-item",
div { class: "task-info-icon",
Icon { icon: FaClock, width: 16, height: 16 }
}
div { class: "task-info-content",
div { class: "task-info-label", "Next Run" }
div { class: "task-info-value", "{next_run}" }
}
}
div { class: "task-info-item",
div { class: "task-info-icon",
Icon { icon: FaCircleCheck, width: 16, height: 16 }
}
div { class: "task-info-content",
div { class: "task-info-label", "Last Status" }
div { class: "task-info-value", "{last_status}" }
}
}
}
div { class: "task-card-actions",
button {
class: if is_enabled { "btn btn-sm btn-secondary" } else { "btn btn-sm btn-primary" },
onclick: move |_| on_toggle.call(task_id_toggle.clone()),
if is_enabled {
span {
Icon { icon: FaPause, width: 14, height: 14 }
" Disable"
}
} else {
span {
Icon { icon: FaPlay, width: 14, height: 14 }
" Enable"
}
}
}
button {
class: "btn btn-sm btn-primary",
onclick: move |_| on_run_now.call(task_id_run.clone()),
disabled: !is_enabled,
Icon { icon: FaPlay, width: 14, height: 14 }
" Run Now"
}
}
}
}
}
}
}
}
}
}
}
}

104
crates/pinakes-ui/src/components/utils.rs
View file

@ -1,69 +1,69 @@
pub fn format_size(bytes: u64) -> String {
if bytes < 1024 {
format!("{bytes} B")
} else if bytes < 1024 * 1024 {
format!("{:.1} KB", bytes as f64 / 1024.0)
} else if bytes < 1024 * 1024 * 1024 {
format!("{:.1} MB", bytes as f64 / (1024.0 * 1024.0))
} else {
format!("{:.2} GB", bytes as f64 / (1024.0 * 1024.0 * 1024.0))
}
if bytes < 1024 {
format!("{bytes} B")
} else if bytes < 1024 * 1024 {
format!("{:.1} KB", bytes as f64 / 1024.0)
} else if bytes < 1024 * 1024 * 1024 {
format!("{:.1} MB", bytes as f64 / (1024.0 * 1024.0))
} else {
format!("{:.2} GB", bytes as f64 / (1024.0 * 1024.0 * 1024.0))
}
}
pub fn type_badge_class(media_type: &str) -> &'static str {
match media_type {
"mp3" | "flac" | "ogg" | "wav" => "type-audio",
"mp4" | "mkv" | "avi" | "webm" => "type-video",
"jpeg" | "jpg" | "png" | "gif" | "webp" | "avif" => "type-image",
"pdf" | "epub" | "djvu" => "type-document",
"md" | "markdown" => "type-text",
_ => "type-other",
}
match media_type {
"mp3" | "flac" | "ogg" | "wav" => "type-audio",
"mp4" | "mkv" | "avi" | "webm" => "type-video",
"jpeg" | "jpg" | "png" | "gif" | "webp" | "avif" => "type-image",
"pdf" | "epub" | "djvu" => "type-document",
"md" | "markdown" => "type-text",
_ => "type-other",
}
}
pub fn type_icon(media_type: &str) -> &'static str {
match media_type {
"mp3" | "flac" | "ogg" | "wav" => "\u{266b}",
"mp4" | "mkv" | "avi" | "webm" => "\u{25b6}",
"jpeg" | "jpg" | "png" | "gif" | "webp" | "avif" => "\u{1f5bc}",
"pdf" | "epub" | "djvu" => "\u{1f4c4}",
"md" | "markdown" => "\u{270e}",
_ => "\u{1f4c1}",
}
match media_type {
"mp3" | "flac" | "ogg" | "wav" => "\u{266b}",
"mp4" | "mkv" | "avi" | "webm" => "\u{25b6}",
"jpeg" | "jpg" | "png" | "gif" | "webp" | "avif" => "\u{1f5bc}",
"pdf" | "epub" | "djvu" => "\u{1f4c4}",
"md" | "markdown" => "\u{270e}",
_ => "\u{1f4c1}",
}
}
pub fn format_timestamp(ts: &str) -> String {
let trimmed = ts.replace('T', " ");
if let Some(dot_pos) = trimmed.find('.') {
trimmed[..dot_pos].to_string()
} else if let Some(z_pos) = trimmed.find('Z') {
trimmed[..z_pos].to_string()
} else if trimmed.len() > 19 {
trimmed[..19].to_string()
} else {
trimmed
}
let trimmed = ts.replace('T', " ");
if let Some(dot_pos) = trimmed.find('.') {
trimmed[..dot_pos].to_string()
} else if let Some(z_pos) = trimmed.find('Z') {
trimmed[..z_pos].to_string()
} else if trimmed.len() > 19 {
trimmed[..19].to_string()
} else {
trimmed
}
}
pub fn media_category(media_type: &str) -> &'static str {
match media_type {
"mp3" | "flac" | "ogg" | "wav" => "audio",
"mp4" | "mkv" | "avi" | "webm" => "video",
"jpeg" | "jpg" | "png" | "gif" | "webp" | "avif" => "image",
"pdf" | "epub" | "djvu" => "document",
"md" | "markdown" => "text",
_ => "other",
}
match media_type {
"mp3" | "flac" | "ogg" | "wav" => "audio",
"mp4" | "mkv" | "avi" | "webm" => "video",
"jpeg" | "jpg" | "png" | "gif" | "webp" | "avif" => "image",
"pdf" | "epub" | "djvu" => "document",
"md" | "markdown" => "text",
_ => "other",
}
}
pub fn format_duration(secs: f64) -> String {
let total = secs as u64;
let hours = total / 3600;
let mins = (total % 3600) / 60;
let s = total % 60;
if hours > 0 {
format!("{hours}:{mins:02}:{s:02}")
} else {
format!("{mins:02}:{s:02}")
}
let total = secs as u64;
let hours = total / 3600;
let mins = (total % 3600) / 60;
let s = total % 60;
if hours > 0 {
format!("{hours}:{mins:02}:{s:02}")
} else {
format!("{mins:02}:{s:02}")
}
}