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

initial commit

Browse source 
Signed-off-by: NotAShelf <raf@notashelf.dev>
Change-Id: I4a6b498153eccd5407510dd541b7f4816a6a6964
This commit is contained in:
raf 2026-01-30 22:05:46 +03:00
commit 6a73d11c4b
Signed by: NotAShelf
GPG key ID: 29D95B64378DB4BF
124 changed files with 34856 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

21
crates/pinakes-ui/Cargo.toml Normal file
View file

@ -0,0 +1,21 @@
[package]
name = "pinakes-ui"
edition.workspace = true
version.workspace = true
license.workspace = true
[dependencies]
serde = { workspace = true }
serde_json = { workspace = true }
chrono = { workspace = true }
uuid = { workspace = true }
anyhow = { workspace = true }
clap = { workspace = true }
tracing = { workspace = true }
tracing-subscriber = { workspace = true }
reqwest = { workspace = true }
dioxus = { workspace = true }
tokio = { workspace = true }
rfd = "0.17"
pulldown-cmark = { workspace = true }
gray_matter = { workspace = true }

1577
crates/pinakes-ui/src/app.rs Normal file
View file

File diff suppressed because it is too large Load diff

1066
crates/pinakes-ui/src/client.rs Normal file
View file

File diff suppressed because it is too large Load diff

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

@ -0,0 +1,128 @@
use dioxus::prelude::*;
use super::pagination::Pagination as PaginationControls;
use super::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",
];
#[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>,
) -> 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}"
}
}
}
}
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: total_pages,
on_page_change: 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",
}
}

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

@ -0,0 +1,42 @@
use dioxus::prelude::*;
#[derive(Debug, Clone, PartialEq)]
pub struct BreadcrumbItem {
pub label: String,
pub view: Option<String>,
}
#[component]
pub fn Breadcrumb(
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}" }
}
}
}
}
}

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

@ -0,0 +1,334 @@
use dioxus::prelude::*;
use super::utils::{format_size, type_badge_class};
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>,
) -> 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);
// 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(());
// 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();
return rsx! {
button {
class: "btn btn-ghost mb-16",
onclick: back_click,
"\u{2190} Back to Collections"
}
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"
}
}
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"
}
}
}
}
}
}
}
}
}
// Add Media modal
if *show_add_modal.read() {
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}"
}
}
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}" }
}
}
}
}
}
}
}
}
}
}
}
};
}
// 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" }
}
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"
}
}
}
}
}
}
}
}
}
}
}
}
}

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

@ -0,0 +1,193 @@
use dioxus::prelude::*;
use super::utils::format_size;
use crate::client::DatabaseStatsResponse;
#[component]
pub fn Database(
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);
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..." }
}
},
}
}
// 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"
}
}
}
// 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" }
}
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"
}
}
}
}
}
}
}

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

@ -0,0 +1,663 @@
use dioxus::prelude::*;
use super::image_viewer::ImageViewer;
use super::markdown_viewer::MarkdownViewer;
use super::media_player::MediaPlayer;
use super::utils::{format_duration, format_size, media_category, type_badge_class};
use crate::client::{MediaResponse, MediaUpdateEvent, TagResponse};
#[component]
pub fn Detail(
media: MediaResponse,
media_tags: Vec<TagResponse>,
all_tags: Vec<TagResponse>,
server_url: String,
#[props(default = false)] autoplay: bool,
on_back: EventHandler<()>,
on_open: EventHandler<String>,
on_update: EventHandler<MediaUpdateEvent>,
on_tag: EventHandler<(String, String)>,
on_untag: EventHandler<(String, String)>,
on_set_custom_field: EventHandler<(String, String, String, String)>,
on_delete_custom_field: EventHandler<(String, String)>,
on_delete: EventHandler<String>,
) -> Element {
let mut editing = use_signal(|| false);
let mut show_image_viewer = use_signal(|| false);
let mut edit_title = use_signal(String::new);
let mut edit_artist = use_signal(String::new);
let mut edit_album = use_signal(String::new);
let mut edit_genre = use_signal(String::new);
let mut edit_year = use_signal(String::new);
let mut edit_description = use_signal(String::new);
let mut add_tag_id = use_signal(String::new);
let mut new_field_name = use_signal(String::new);
let mut new_field_type = use_signal(|| "text".to_string());
let mut new_field_value = use_signal(String::new);
let mut confirm_delete = use_signal(|| false);
let id = media.id.clone();
let title = media.title.clone().unwrap_or_default();
let artist = media.artist.clone().unwrap_or_default();
let album = media.album.clone().unwrap_or_default();
let genre = media.genre.clone().unwrap_or_default();
let year_str = media.year.map(|y| y.to_string()).unwrap_or_default();
let duration_str = media.duration_secs.map(format_duration).unwrap_or_default();
let description = media.description.clone().unwrap_or_default();
let size = format_size(media.file_size);
let badge_class = type_badge_class(&media.media_type);
let custom_fields: Vec<(String, String, String)> = media
.custom_fields
.iter()
.map(|(k, v)| (k.clone(), v.field_type.clone(), v.value.clone()))
.collect();
let is_editing = editing();
// Separate system-extracted metadata from user-defined custom fields.
// System fields are those set by extractors (camera info, dimensions, etc.)
let system_field_names: &[&str] = &[
"width",
"height",
"camera_make",
"camera_model",
"date_taken",
"gps_latitude",
"gps_longitude",
"iso",
"exposure_time",
"f_number",
"focal_length",
"software",
"lens_model",
"flash",
"orientation",
"track_number",
"disc_number",
"comment",
"bitrate",
"sample_rate",
"channels",
"resolution",
"video_codec",
"audio_codec",
"audio_bitrate",
];
let system_fields: Vec<(String, String, String)> = custom_fields
.iter()
.filter(|(k, _, _)| system_field_names.contains(&k.as_str()))
.cloned()
.collect();
let user_fields: Vec<(String, String, String)> = custom_fields
.iter()
.filter(|(k, _, _)| !system_field_names.contains(&k.as_str()))
.cloned()
.collect();
let has_system_fields = !system_fields.is_empty();
let has_user_fields = !user_fields.is_empty();
// Media preview URLs
let stream_url = format!("{}/api/v1/media/{}/stream", server_url, media.id);
let thumbnail_url = format!("{}/api/v1/media/{}/thumbnail", server_url, media.id);
let category = media_category(&media.media_type);
let has_thumbnail = media.has_thumbnail;
// Compute available tags (all_tags minus media_tags)
let media_tag_ids: Vec<String> = media_tags.iter().map(|t| t.id.clone()).collect();
let available_tags: Vec<TagResponse> = all_tags
.iter()
.filter(|t| !media_tag_ids.contains(&t.id))
.cloned()
.collect();
// Clone values needed for closures
let id_for_open = id.clone();
let id_for_save = id.clone();
let id_for_tag = id.clone();
let id_for_field = id.clone();
let id_for_delete = id.clone();
// Clone media field values for the edit button
let title_for_edit = media.title.clone().unwrap_or_default();
let artist_for_edit = media.artist.clone().unwrap_or_default();
let album_for_edit = media.album.clone().unwrap_or_default();
let genre_for_edit = media.genre.clone().unwrap_or_default();
let year_for_edit = media.year.map(|y| y.to_string()).unwrap_or_default();
let description_for_edit = media.description.clone().unwrap_or_default();
let on_edit_click = move |_| {
edit_title.set(title_for_edit.clone());
edit_artist.set(artist_for_edit.clone());
edit_album.set(album_for_edit.clone());
edit_genre.set(genre_for_edit.clone());
edit_year.set(year_for_edit.clone());
edit_description.set(description_for_edit.clone());
editing.set(true);
};
let on_save_click = {
let id_save = id_for_save.clone();
move |_| {
let t = edit_title();
let ar = edit_artist();
let al = edit_album();
let g = edit_genre();
let y_str = edit_year();
let d = edit_description();
let title_opt = if t.is_empty() { None } else { Some(t) };
let artist_opt = if ar.is_empty() { None } else { Some(ar) };
let album_opt = if al.is_empty() { None } else { Some(al) };
let genre_opt = if g.is_empty() { None } else { Some(g) };
let year_opt = if y_str.is_empty() {
None
} else {
y_str.parse::<i32>().ok()
};
let desc_opt = if d.is_empty() { None } else { Some(d) };
on_update.call(MediaUpdateEvent {
id: id_save.clone(),
title: title_opt,
artist: artist_opt,
album: album_opt,
genre: genre_opt,
year: year_opt,
description: desc_opt,
});
editing.set(false);
}
};
let on_cancel_click = move |_| {
editing.set(false);
};
let on_tag_add_click = {
let id_tag = id_for_tag.clone();
move |_| {
let tag_id = add_tag_id();
if !tag_id.is_empty() {
on_tag.call((id_tag.clone(), tag_id));
add_tag_id.set(String::new());
}
}
};
let on_add_field_click = {
let id_field = id_for_field.clone();
move |_| {
let name = new_field_name();
let ft = new_field_type();
let val = new_field_value();
if !name.is_empty() && !val.is_empty() {
on_set_custom_field.call((id_field.clone(), name, ft, val));
new_field_name.set(String::new());
new_field_type.set("text".to_string());
new_field_value.set(String::new());
}
}
};
let on_delete_click = move |_| {
confirm_delete.set(true);
};
let on_confirm_delete = {
let id_del = id_for_delete.clone();
move |_| {
on_delete.call(id_del.clone());
confirm_delete.set(false);
}
};
let on_cancel_delete = move |_| {
confirm_delete.set(false);
};
let stream_url_for_viewer = stream_url.clone();
let thumb_for_player = thumbnail_url.clone();
let file_name_for_viewer = media.file_name.clone();
rsx! {
// Media preview
div { class: "detail-preview",
if category == "audio" {
MediaPlayer {
src: stream_url.clone(),
media_type: "audio".to_string(),
title: media.title.clone(),
thumbnail_url: if has_thumbnail { Some(thumb_for_player.clone()) } else { None },
autoplay: autoplay,
}
} else if category == "video" {
MediaPlayer {
src: stream_url.clone(),
media_type: "video".to_string(),
title: media.title.clone(),
autoplay: autoplay,
}
} else if category == "image" {
if has_thumbnail {
img {
src: "{thumbnail_url}",
alt: "{media.file_name}",
class: "detail-preview-image clickable",
onclick: move |_| show_image_viewer.set(true),
}
} else {
img {
src: "{stream_url}",
alt: "{media.file_name}",
class: "detail-preview-image clickable",
onclick: move |_| show_image_viewer.set(true),
}
}
} else if category == "text" {
MarkdownViewer {
content_url: stream_url.clone(),
media_type: media.media_type.clone(),
}
} else if category == "document" {
div { class: "detail-no-preview",
p { class: "text-muted", "Preview not available for this document type." }
button {
class: "btn btn-primary",
onclick: {
let id_open = id.clone();
move |_| on_open.call(id_open.clone())
},
"Open Externally"
}
}
} else if has_thumbnail {
img {
src: "{thumbnail_url}",
alt: "Thumbnail",
class: "detail-thumbnail",
}
}
}
// Action bar
div { class: "detail-actions",
button {
class: "btn btn-secondary",
onclick: move |_| on_back.call(()),
"Back"
}
button {
class: "btn btn-primary",
onclick: {
let id_open = id_for_open.clone();
move |_| on_open.call(id_open.clone())
},
"Open"
}
if is_editing {
button {
class: "btn btn-primary",
onclick: on_save_click,
"Save"
}
button {
class: "btn btn-ghost",
onclick: on_cancel_click,
"Cancel"
}
} else {
button {
class: "btn btn-secondary",
onclick: on_edit_click,
"Edit"
}
}
if confirm_delete() {
button {
class: "btn btn-danger",
onclick: on_confirm_delete,
"Confirm Delete"
}
button {
class: "btn btn-ghost",
onclick: on_cancel_delete,
"Cancel"
}
} else {
button {
class: "btn btn-danger",
onclick: on_delete_click,
"Delete"
}
}
}
// Info / Edit section
if is_editing {
div { class: "detail-grid",
// Read-only file info
div { class: "detail-field",
span { class: "detail-label", "File Name" }
span { class: "detail-value", "{media.file_name}" }
}
div { class: "detail-field",
span { class: "detail-label", "Path" }
span { class: "detail-value mono", "{media.path}" }
}
div { class: "detail-field",
span { class: "detail-label", "Type" }
span { class: "detail-value",
span { class: "type-badge {badge_class}", "{media.media_type}" }
}
}
div { class: "detail-field",
span { class: "detail-label", "Size" }
span { class: "detail-value", "{size}" }
}
div { class: "detail-field",
span { class: "detail-label", "Hash" }
span { class: "detail-value mono", "{media.content_hash}" }
}
// Editable fields — conditional by media category
div { class: "detail-field",
label { class: "detail-label", "Title" }
input {
r#type: "text",
value: "{edit_title}",
oninput: move |e: Event<FormData>| edit_title.set(e.value()),
}
}
div { class: "detail-field",
label { class: "detail-label",
{match category {
"image" => "Photographer",
"document" | "text" => "Author",
_ => "Artist",
}}
}
input {
r#type: "text",
value: "{edit_artist}",
oninput: move |e: Event<FormData>| edit_artist.set(e.value()),
}
}
if category == "audio" {
div { class: "detail-field",
label { class: "detail-label", "Album" }
input {
r#type: "text",
value: "{edit_album}",
oninput: move |e: Event<FormData>| edit_album.set(e.value()),
}
}
}
if category == "audio" || category == "video" {
div { class: "detail-field",
label { class: "detail-label", "Genre" }
input {
r#type: "text",
value: "{edit_genre}",
oninput: move |e: Event<FormData>| edit_genre.set(e.value()),
}
}
}
if category == "audio" || category == "video" || category == "document" {
div { class: "detail-field",
label { class: "detail-label", "Year" }
input {
r#type: "text",
value: "{edit_year}",
oninput: move |e: Event<FormData>| edit_year.set(e.value()),
}
}
}
div { class: "detail-field full-width",
label { class: "detail-label", "Description" }
textarea {
value: "{edit_description}",
oninput: move |e: Event<FormData>| edit_description.set(e.value()),
}
}
}
} else {
div { class: "detail-grid",
div { class: "detail-field",
span { class: "detail-label", "File Name" }
span { class: "detail-value", "{media.file_name}" }
}
div { class: "detail-field",
span { class: "detail-label", "Path" }
span { class: "detail-value mono", "{media.path}" }
}
div { class: "detail-field",
span { class: "detail-label", "Type" }
span { class: "detail-value",
span { class: "type-badge {badge_class}", "{media.media_type}" }
}
}
div { class: "detail-field",
span { class: "detail-label", "Size" }
span { class: "detail-value", "{size}" }
}
div { class: "detail-field",
span { class: "detail-label", "Hash" }
span { class: "detail-value mono", "{media.content_hash}" }
}
// Title: only shown when non-empty
if !title.is_empty() {
div { class: "detail-field",
span { class: "detail-label", "Title" }
span { class: "detail-value", "{title}" }
}
}
// Artist/Author/Photographer: only shown when non-empty
if !artist.is_empty() {
div { class: "detail-field",
span { class: "detail-label",
{match category {
"image" => "Photographer",
"document" | "text" => "Author",
_ => "Artist",
}}
}
span { class: "detail-value", "{artist}" }
}
}
// Album: audio only, when non-empty
if category == "audio" && !album.is_empty() {
div { class: "detail-field",
span { class: "detail-label", "Album" }
span { class: "detail-value", "{album}" }
}
}
// Genre: audio and video, when non-empty
if (category == "audio" || category == "video") && !genre.is_empty() {
div { class: "detail-field",
span { class: "detail-label", "Genre" }
span { class: "detail-value", "{genre}" }
}
}
// Year: audio, video, document, when non-empty
if (category == "audio" || category == "video" || category == "document") && !year_str.is_empty() {
div { class: "detail-field",
span { class: "detail-label", "Year" }
span { class: "detail-value", "{year_str}" }
}
}
// Duration: audio and video
if (category == "audio" || category == "video") && media.duration_secs.is_some() {
div { class: "detail-field",
span { class: "detail-label", "Duration" }
span { class: "detail-value", "{duration_str}" }
}
}
// Description: only shown when non-empty
if !description.is_empty() {
div { class: "detail-field full-width",
span { class: "detail-label", "Description" }
span { class: "detail-value", "{description}" }
}
}
div { class: "detail-field",
span { class: "detail-label", "Created" }
span { class: "detail-value", "{media.created_at}" }
}
div { class: "detail-field",
span { class: "detail-label", "Updated" }
span { class: "detail-value", "{media.updated_at}" }
}
}
}
// Tags section
div { class: "card mb-16",
div { class: "card-header",
h4 { class: "card-title", "Tags" }
}
div { class: "tag-list mb-8",
for tag in media_tags.iter() {
{
let tag_id = tag.id.clone();
let media_id_untag = id.clone();
rsx! {
span {
class: "tag-badge",
key: "{tag_id}",
"{tag.name}"
span {
class: "tag-remove",
onclick: {
let tid = tag_id.clone();
let mid = media_id_untag.clone();
move |_| on_untag.call((mid.clone(), tid.clone()))
},
"x"
}
}
}
}
}
}
div { class: "form-row",
select {
value: "{add_tag_id}",
onchange: move |e: Event<FormData>| add_tag_id.set(e.value()),
option { value: "", "Add tag..." }
for tag in available_tags.iter() {
{
let tid = tag.id.clone();
let tname = tag.name.clone();
rsx! {
option {
key: "{tid}",
value: "{tid}",
"{tname}"
}
}
}
}
}
button {
class: "btn btn-sm btn-primary",
onclick: on_tag_add_click,
"Add"
}
}
}
// Technical Metadata section (system-extracted fields)
if has_system_fields {
div { class: "card mb-16",
div { class: "card-header",
h4 { class: "card-title", "Technical Metadata" }
}
div { class: "detail-grid",
for (key, _field_type, value) in system_fields.iter() {
div {
class: "detail-field",
key: "{key}",
span { class: "detail-label", "{key}" }
span { class: "detail-value", "{value}" }
}
}
}
}
}
// Custom Fields section (user-defined)
div { class: "card",
div { class: "card-header",
h4 { class: "card-title", "Custom Fields" }
}
if has_user_fields {
div { class: "detail-grid",
for (key, field_type, value) in user_fields.iter() {
{
let field_name = key.clone();
let media_id_del = id.clone();
rsx! {
div {
class: "detail-field",
key: "{field_name}",
span { class: "detail-label", "{key} ({field_type})" }
div { class: "flex-row",
span { class: "detail-value", "{value}" }
button {
class: "btn-icon",
onclick: {
let fname = field_name.clone();
let mid = media_id_del.clone();
move |_| on_delete_custom_field.call((mid.clone(), fname.clone()))
},
"x"
}
}
}
}
}
}
}
}
div { class: "form-row",
input {
r#type: "text",
placeholder: "Field name",
value: "{new_field_name}",
oninput: move |e: Event<FormData>| new_field_name.set(e.value()),
}
select {
value: "{new_field_type}",
onchange: move |e: Event<FormData>| new_field_type.set(e.value()),
option { value: "text", "text" }
option { value: "number", "number" }
option { value: "date", "date" }
option { value: "boolean", "boolean" }
}
input {
r#type: "text",
placeholder: "Value",
value: "{new_field_value}",
oninput: move |e: Event<FormData>| new_field_value.set(e.value()),
}
button {
class: "btn btn-sm btn-primary",
onclick: on_add_field_click,
"Add"
}
}
}
// Image viewer overlay
if *show_image_viewer.read() {
ImageViewer {
src: stream_url_for_viewer.clone(),
alt: file_name_for_viewer.clone(),
on_close: move |_| show_image_viewer.set(false),
}
}
}
}

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

@ -0,0 +1,170 @@
use dioxus::prelude::*;
use super::utils::{format_size, format_timestamp};
use crate::client::DuplicateGroupResponse;
#[component]
pub fn Duplicates(
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 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"
}
}
}
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.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}",
// Group header
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}"
}
}
// Expanded: show items
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}",
// Thumbnail
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}" }
}
}
// Info
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)}" }
}
}
// Actions
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"
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}

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

@ -0,0 +1,236 @@
use dioxus::prelude::*;
#[derive(Debug, Clone, Copy, PartialEq)]
enum FitMode {
FitScreen,
FitWidth,
Actual,
}
impl FitMode {
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%",
}
}
}
#[component]
pub fn ImageViewer(
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 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"
};
// 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_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(),
}
}
}
}
}

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

@ -0,0 +1,717 @@
use std::collections::HashSet;
use dioxus::prelude::*;
use super::utils::{format_size, type_badge_class};
use crate::client::{
CollectionResponse, DirectoryPreviewFile, ImportEvent, ScanStatusResponse, TagResponse,
};
/// Import event for batch: (paths, tag_ids, new_tags, collection_id)
pub type BatchImportEvent = (Vec<String>, Vec<String>, Vec<String>, Option<String>);
#[component]
pub fn Import(
tags: Vec<TagResponse>,
collections: Vec<CollectionResponse>,
on_import_file: EventHandler<ImportEvent>,
on_import_directory: EventHandler<ImportEvent>,
on_import_batch: EventHandler<BatchImportEvent>,
on_scan: EventHandler<()>,
on_preview_directory: EventHandler<(String, bool)>,
preview_files: Vec<DirectoryPreviewFile>,
preview_total_size: u64,
scan_progress: Option<ScanStatusResponse>,
) -> Element {
let mut import_mode = use_signal(|| 0usize);
let mut file_path = use_signal(String::new);
let mut dir_path = use_signal(String::new);
let selected_tags = use_signal(Vec::<String>::new);
let new_tags_input = use_signal(String::new);
let selected_collection = use_signal(|| Option::<String>::None);
// Recursive toggle for directory preview
let mut recursive = use_signal(|| true);
// Filter state for directory preview
let mut filter_types = use_signal(|| vec![true, true, true, true, true, true]); // audio, video, image, document, text, other
let mut filter_min_size = use_signal(|| 0u64);
let mut filter_max_size = use_signal(|| 0u64); // 0 means no limit
// File selection state
let mut selected_file_paths = use_signal(HashSet::<String>::new);
let current_mode = *import_mode.read();
rsx! {
// Tab bar
div { class: "import-tabs",
button {
class: if current_mode == 0 { "import-tab active" } else { "import-tab" },
onclick: move |_| import_mode.set(0),
"Single File"
}
button {
class: if current_mode == 1 { "import-tab active" } else { "import-tab" },
onclick: move |_| import_mode.set(1),
"Directory"
}
button {
class: if current_mode == 2 { "import-tab active" } else { "import-tab" },
onclick: move |_| import_mode.set(2),
"Scan Roots"
}
}
// Mode 0: Single File
if current_mode == 0 {
div { class: "card mb-16",
div { class: "card-header",
h3 { class: "card-title", "Import Single File" }
}
div { class: "form-group",
label { class: "form-label", "File Path" }
div { class: "form-row",
input {
r#type: "text",
placeholder: "/path/to/file...",
value: "{file_path}",
oninput: move |e| file_path.set(e.value()),
onkeypress: {
let mut file_path = file_path;
let mut selected_tags = selected_tags;
let mut new_tags_input = new_tags_input;
let mut selected_collection = selected_collection;
move |e: KeyboardEvent| {
if e.key() == Key::Enter {
let path = file_path.read().clone();
if !path.is_empty() {
let tag_ids = selected_tags.read().clone();
let new_tags = parse_new_tags(&new_tags_input.read());
let col_id = selected_collection.read().clone();
on_import_file.call((path, tag_ids, new_tags, col_id));
file_path.set(String::new());
selected_tags.set(Vec::new());
new_tags_input.set(String::new());
selected_collection.set(None);
}
}
}
},
}
button {
class: "btn btn-secondary",
onclick: move |_| {
let mut file_path = file_path;
spawn(async move {
if let Some(handle) = rfd::AsyncFileDialog::new().pick_file().await {
file_path.set(handle.path().to_string_lossy().to_string());
}
});
},
"Browse..."
}
button {
class: "btn btn-primary",
onclick: {
let mut file_path = file_path;
let mut selected_tags = selected_tags;
let mut new_tags_input = new_tags_input;
let mut selected_collection = selected_collection;
move |_| {
let path = file_path.read().clone();
if !path.is_empty() {
let tag_ids = selected_tags.read().clone();
let new_tags = parse_new_tags(&new_tags_input.read());
let col_id = selected_collection.read().clone();
on_import_file.call((path, tag_ids, new_tags, col_id));
file_path.set(String::new());
selected_tags.set(Vec::new());
new_tags_input.set(String::new());
selected_collection.set(None);
}
}
},
"Import"
}
}
}
}
ImportOptions {
tags: tags.clone(),
collections: collections.clone(),
selected_tags: selected_tags,
new_tags_input: new_tags_input,
selected_collection: selected_collection,
}
}
// Mode 1: Directory
if current_mode == 1 {
div { class: "card mb-16",
div { class: "card-header",
h3 { class: "card-title", "Import Directory" }
}
div { class: "form-group",
label { class: "form-label", "Directory Path" }
div { class: "form-row",
input {
r#type: "text",
placeholder: "/path/to/directory...",
value: "{dir_path}",
oninput: move |e| dir_path.set(e.value()),
onkeypress: {
let dir_path = dir_path;
let recursive = recursive;
move |e: KeyboardEvent| {
if e.key() == Key::Enter {
let path = dir_path.read().clone();
if !path.is_empty() {
on_preview_directory.call((path, *recursive.read()));
}
}
}
},
}
button {
class: "btn btn-secondary",
onclick: move |_| {
let mut dir_path = dir_path;
let recursive = recursive;
spawn(async move {
if let Some(handle) = rfd::AsyncFileDialog::new().pick_folder().await {
let path = handle.path().to_string_lossy().to_string();
dir_path.set(path.clone());
on_preview_directory.call((path, *recursive.read()));
}
});
},
"Browse..."
}
button {
class: "btn btn-secondary",
onclick: {
let dir_path = dir_path;
let recursive = recursive;
move |_| {
let path = dir_path.read().clone();
if !path.is_empty() {
on_preview_directory.call((path, *recursive.read()));
}
}
},
"Preview"
}
}
}
// Recursive toggle
div { class: "form-group",
label { class: "form-row",
input {
r#type: "checkbox",
checked: *recursive.read(),
onchange: move |_| recursive.toggle(),
}
span { style: "margin-left: 6px;", "Recursive (include subdirectories)" }
}
}
}
// Preview results
if !preview_files.is_empty() {
{
// Read filter signals once before the loop to avoid per-item reads
let types_snapshot = filter_types.read().clone();
let min = *filter_min_size.read();
let max = *filter_max_size.read();
let filtered: Vec<&DirectoryPreviewFile> = preview_files.iter().filter(|f| {
let type_idx = match type_badge_class(&f.media_type) {
"type-audio" => 0,
"type-video" => 1,
"type-image" => 2,
"type-document" => 3,
"type-text" => 4,
_ => 5,
};
if !types_snapshot[type_idx] { return false; }
if min > 0 && f.file_size < min { return false; }
if max > 0 && f.file_size > max { return false; }
true
}).collect();
let filtered_count = filtered.len();
let total_count = preview_files.len();
// Read selection once for display
let selection = selected_file_paths.read().clone();
let selected_count = selection.len();
let all_filtered_selected = !filtered.is_empty()
&& filtered.iter().all(|f| selection.contains(&f.path));
let filtered_paths: Vec<String> = filtered.iter().map(|f| f.path.clone()).collect();
rsx! {
div { class: "card mb-16",
div { class: "card-header",
h3 { class: "card-title", "Preview" }
p { class: "text-muted text-sm",
"{filtered_count} of {total_count} files shown, {format_size(preview_total_size)} total"
}
}
// Filter bar
div { class: "filter-bar",
div { class: "flex-row mb-8",
label {
input {
r#type: "checkbox",
checked: types_snapshot[0],
onchange: move |_| {
let mut types = filter_types.read().clone();
types[0] = !types[0];
filter_types.set(types);
},
}
" Audio"
}
label {
input {
r#type: "checkbox",
checked: types_snapshot[1],
onchange: move |_| {
let mut types = filter_types.read().clone();
types[1] = !types[1];
filter_types.set(types);
},
}
" Video"
}
label {
input {
r#type: "checkbox",
checked: types_snapshot[2],
onchange: move |_| {
let mut types = filter_types.read().clone();
types[2] = !types[2];
filter_types.set(types);
},
}
" Image"
}
label {
input {
r#type: "checkbox",
checked: types_snapshot[3],
onchange: move |_| {
let mut types = filter_types.read().clone();
types[3] = !types[3];
filter_types.set(types);
},
}
" Document"
}
label {
input {
r#type: "checkbox",
checked: types_snapshot[4],
onchange: move |_| {
let mut types = filter_types.read().clone();
types[4] = !types[4];
filter_types.set(types);
},
}
" Text"
}
label {
input {
r#type: "checkbox",
checked: types_snapshot[5],
onchange: move |_| {
let mut types = filter_types.read().clone();
types[5] = !types[5];
filter_types.set(types);
},
}
" Other"
}
}
div { class: "flex-row",
label { class: "form-label", "Min size (MB): " }
input {
r#type: "number",
value: "{min / (1024 * 1024)}",
oninput: move |e| {
if let Ok(mb) = e.value().parse::<u64>() {
filter_min_size.set(mb * 1024 * 1024);
} else {
filter_min_size.set(0);
}
},
}
label { class: "form-label", "Max size (MB): " }
input {
r#type: "number",
value: "{max / (1024 * 1024)}",
oninput: move |e| {
if let Ok(mb) = e.value().parse::<u64>() {
filter_max_size.set(mb * 1024 * 1024);
} else {
filter_max_size.set(0);
}
},
}
}
}
// Selection toolbar
div { class: "flex-row mb-8", style: "gap: 8px; align-items: center; padding: 0 8px;",
button {
class: "btn btn-sm btn-secondary",
onclick: {
let filtered_paths = filtered_paths.clone();
move |_| {
let mut sel = selected_file_paths.read().clone();
for p in &filtered_paths {
sel.insert(p.clone());
}
selected_file_paths.set(sel);
}
},
"Select All ({filtered_count})"
}
button {
class: "btn btn-sm btn-ghost",
onclick: move |_| {
selected_file_paths.set(HashSet::new());
},
"Deselect All"
}
if selected_count > 0 {
span { class: "text-muted text-sm",
"{selected_count} files selected"
}
}
}
div { style: "max-height: 400px; overflow-y: auto;",
table { class: "data-table",
thead {
tr {
th { style: "width: 32px;",
input {
r#type: "checkbox",
checked: all_filtered_selected,
onclick: {
let filtered_paths = filtered_paths.clone();
move |_| {
if all_filtered_selected {
// Deselect all filtered
let filtered_set: HashSet<String> = filtered_paths.iter().cloned().collect();
let sel = selected_file_paths.read().clone();
let new_sel: HashSet<String> = sel.difference(&filtered_set).cloned().collect();
selected_file_paths.set(new_sel);
} else {
// Select all filtered
let mut sel = selected_file_paths.read().clone();
for p in &filtered_paths {
sel.insert(p.clone());
}
selected_file_paths.set(sel);
}
}
},
}
}
th { "File Name" }
th { "Type" }
th { "Size" }
}
}
tbody {
for file in filtered.iter() {
{
let size = format_size(file.file_size);
let badge_class = type_badge_class(&file.media_type);
let is_selected = selection.contains(&file.path);
let file_path_clone = file.path.clone();
rsx! {
tr {
key: "{file.path}",
class: if is_selected { "row-selected" } else { "" },
td {
input {
r#type: "checkbox",
checked: is_selected,
onclick: {
let path = file_path_clone.clone();
move |_| {
let mut sel = selected_file_paths.read().clone();
if sel.contains(&path) {
sel.remove(&path);
} else {
sel.insert(path.clone());
}
selected_file_paths.set(sel);
}
},
}
}
td { "{file.file_name}" }
td {
span { class: "type-badge {badge_class}", "{file.media_type}" }
}
td { "{size}" }
}
}
}
}
}
}
}
}
}
}
}
ImportOptions {
tags: tags.clone(),
collections: collections.clone(),
selected_tags: selected_tags,
new_tags_input: new_tags_input,
selected_collection: selected_collection,
}
div { class: "flex-row mb-16", style: "gap: 8px;",
// Import selected files only (batch import)
{
let sel_count = selected_file_paths.read().len();
let has_selected = sel_count > 0;
rsx! {
button {
class: "btn btn-primary",
disabled: !has_selected,
onclick: {
let mut selected_file_paths = selected_file_paths;
let mut selected_tags = selected_tags;
let mut new_tags_input = new_tags_input;
let mut selected_collection = selected_collection;
move |_| {
let paths: Vec<String> = selected_file_paths.read().iter().cloned().collect();
if !paths.is_empty() {
let tag_ids = selected_tags.read().clone();
let new_tags = parse_new_tags(&new_tags_input.read());
let col_id = selected_collection.read().clone();
on_import_batch.call((paths, tag_ids, new_tags, col_id));
selected_file_paths.set(HashSet::new());
selected_tags.set(Vec::new());
new_tags_input.set(String::new());
selected_collection.set(None);
}
}
},
if has_selected {
"Import Selected ({sel_count})"
} else {
"Import Selected"
}
}
}
}
// Import entire directory
button {
class: "btn btn-secondary",
onclick: {
let mut dir_path = dir_path;
let mut selected_tags = selected_tags;
let mut new_tags_input = new_tags_input;
let mut selected_collection = selected_collection;
let mut selected_file_paths = selected_file_paths;
move |_| {
let path = dir_path.read().clone();
if !path.is_empty() {
let tag_ids = selected_tags.read().clone();
let new_tags = parse_new_tags(&new_tags_input.read());
let col_id = selected_collection.read().clone();
on_import_directory.call((path, tag_ids, new_tags, col_id));
dir_path.set(String::new());
selected_tags.set(Vec::new());
new_tags_input.set(String::new());
selected_collection.set(None);
selected_file_paths.set(HashSet::new());
}
}
},
"Import Entire Directory"
}
}
}
// Mode 2: Scan Roots
if current_mode == 2 {
div { class: "card mb-16",
div { class: "card-header",
h3 { class: "card-title", "Scan Root Directories" }
}
div { class: "empty-state",
p { class: "empty-subtitle",
"Scan all configured root directories for media files. "
"This will discover and import any new files found in your root paths."
}
}
div { class: "mb-16", style: "text-align: center;",
button {
class: "btn btn-primary",
onclick: move |_| on_scan.call(()),
"Scan All Roots"
}
}
if let Some(ref progress) = scan_progress {
{
let pct = (progress.files_processed * 100).checked_div(progress.files_found).unwrap_or(0);
rsx! {
div { class: "mb-16",
div { class: "progress-bar",
div {
class: "progress-fill",
style: "width: {pct}%;",
}
}
p { class: "text-muted text-sm",
"{progress.files_processed} / {progress.files_found} files processed"
}
if progress.error_count > 0 {
p { class: "text-muted text-sm",
"{progress.error_count} errors"
}
}
if progress.scanning {
p { class: "text-muted text-sm", "Scanning..." }
} else {
p { class: "text-muted text-sm", "Scan complete" }
}
}
}
}
}
}
}
}
}
#[component]
fn ImportOptions(
tags: Vec<TagResponse>,
collections: Vec<CollectionResponse>,
selected_tags: Signal<Vec<String>>,
new_tags_input: Signal<String>,
selected_collection: Signal<Option<String>>,
) -> Element {
let selected_tags = selected_tags;
let mut new_tags_input = new_tags_input;
let selected_collection = selected_collection;
rsx! {
div { class: "card mb-16",
div { class: "card-header",
h4 { class: "card-title", "Import Options" }
}
div { class: "form-group",
label { class: "form-label", "Tags" }
if tags.is_empty() {
p { class: "text-muted text-sm", "No tags available. Create tags from the Tags page." }
} else {
div { class: "tag-list",
for tag in tags.iter() {
{
let tag_id = tag.id.clone();
let tag_name = tag.name.clone();
let is_selected = selected_tags.read().contains(&tag_id);
let badge_class = if is_selected {
"tag-badge selected"
} else {
"tag-badge"
};
rsx! {
span {
class: "{badge_class}",
onclick: {
let tag_id = tag_id.clone();
let mut selected_tags = selected_tags;
move |_| {
let mut current = selected_tags.read().clone();
if let Some(pos) = current.iter().position(|t| t == &tag_id) {
current.remove(pos);
} else {
current.push(tag_id.clone());
}
selected_tags.set(current);
}
},
"{tag_name}"
}
}
}
}
}
}
}
div { class: "form-group",
label { class: "form-label", "Create New Tags" }
input {
r#type: "text",
placeholder: "tag1, tag2, tag3...",
value: "{new_tags_input}",
oninput: move |e| new_tags_input.set(e.value()),
}
p { class: "text-muted text-sm", "Comma-separated. Will be created if they don't exist." }
}
div { class: "form-group",
label { class: "form-label", "Add to Collection" }
select {
value: "{selected_collection.read().clone().unwrap_or_default()}",
onchange: {
let mut selected_collection = selected_collection;
move |e: Event<FormData>| {
let val = e.value();
if val.is_empty() {
selected_collection.set(None);
} else {
selected_collection.set(Some(val));
}
}
},
option { value: "", "None" }
for col in collections.iter() {
{
let col_id = col.id.clone();
let col_name = col.name.clone();
rsx! {
option { value: "{col_id}", "{col_name}" }
}
}
}
}
}
}
}
}
fn parse_new_tags(input: &str) -> Vec<String> {
input
.split(',')
.map(|s| s.trim().to_string())
.filter(|s| !s.is_empty())
.collect()
}

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

@ -0,0 +1,874 @@
use dioxus::prelude::*;
use super::pagination::Pagination as PaginationControls;
use super::utils::{format_size, media_category, type_badge_class, type_icon};
use crate::client::{CollectionResponse, MediaResponse, TagResponse};
#[derive(Debug, Clone, Copy, PartialEq)]
pub enum ViewMode {
Grid,
Table,
}
/// The set of type filter categories available to the user.
const TYPE_FILTERS: &[&str] = &["all", "audio", "video", "image", "document", "text"];
/// Human-readable label for a type filter value.
fn filter_label(f: &str) -> &str {
match f {
"all" => "All",
"audio" => "Audio",
"video" => "Video",
"image" => "Image",
"document" => "Document",
"text" => "Text",
_ => f,
}
}
/// Parse the current sort field string into (column, direction) so table
/// headers can show the correct arrow indicator.
fn parse_sort(sort: &str) -> (&str, &str) {
if let Some(col) = sort.strip_suffix("_asc") {
(col, "asc")
} else if let Some(col) = sort.strip_suffix("_desc") {
(col, "desc")
} else {
(sort, "asc")
}
}
/// Return the sort arrow indicator for a table column header. Returns an empty
/// string when the column is not the active sort column.
fn sort_arrow(current_sort: &str, column: &str) -> &'static str {
let (col, dir) = parse_sort(current_sort);
if col == column {
if dir == "asc" {
" \u{25b2}"
} else {
" \u{25bc}"
}
} else {
""
}
}
/// Compute the next sort value when a table column header is clicked. If the
/// column is already sorted ascending, flip to descending and vice-versa.
/// Otherwise default to ascending.
fn next_sort(current_sort: &str, column: &str) -> String {
let (col, dir) = parse_sort(current_sort);
if col == column {
let new_dir = if dir == "asc" { "desc" } else { "asc" };
format!("{column}_{new_dir}")
} else {
format!("{column}_asc")
}
}
#[component]
pub fn Library(
media: Vec<MediaResponse>,
tags: Vec<TagResponse>,
collections: Vec<CollectionResponse>,
total_count: u64,
current_page: u64,
page_size: u64,
server_url: String,
on_select: EventHandler<String>,
on_delete: EventHandler<String>,
on_batch_delete: EventHandler<Vec<String>>,
on_batch_tag: EventHandler<(Vec<String>, Vec<String>)>,
on_batch_collection: EventHandler<(Vec<String>, String)>,
on_page_change: EventHandler<u64>,
on_page_size_change: EventHandler<u64>,
on_sort_change: EventHandler<String>,
#[props(default)] on_select_all_global: Option<EventHandler<EventHandler<Vec<String>>>>,
#[props(default)] on_delete_all: Option<EventHandler<()>>,
) -> Element {
let mut selected_ids = use_signal(Vec::<String>::new);
let mut select_all = use_signal(|| false);
let mut confirm_delete = use_signal(|| Option::<String>::None);
let mut confirm_batch_delete = use_signal(|| false);
let mut confirm_delete_all = use_signal(|| false);
let mut show_batch_tag = use_signal(|| false);
let mut batch_tag_selection = use_signal(Vec::<String>::new);
let mut show_batch_collection = use_signal(|| false);
let mut batch_collection_id = use_signal(String::new);
let mut view_mode = use_signal(|| ViewMode::Grid);
let mut sort_field = use_signal(|| "created_at_desc".to_string());
let mut type_filter = use_signal(|| "all".to_string());
// Track the last-clicked index for shift+click range selection.
let mut last_click_index = use_signal(|| Option::<usize>::None);
// True when all items across all pages have been selected.
let mut global_all_selected = use_signal(|| false);
if media.is_empty() && total_count == 0 {
return rsx! {
div { class: "empty-state",
h3 { class: "empty-title", "No media found" }
p { class: "empty-subtitle", "Import files or scan your root directories to get started." }
}
};
}
// Apply client-side type filter.
let active_filter = type_filter.read().clone();
let filtered_media: Vec<MediaResponse> = if active_filter == "all" {
media.clone()
} else {
media
.iter()
.filter(|m| media_category(&m.media_type) == active_filter.as_str())
.cloned()
.collect()
};
let filtered_count = filtered_media.len();
let all_ids: Vec<String> = filtered_media.iter().map(|m| m.id.clone()).collect();
// Read selection once to avoid repeated signal reads in loops
let current_selection: Vec<String> = selected_ids.read().clone();
let selection_count = current_selection.len();
let has_selection = selection_count > 0;
let total_pages = total_count.div_ceil(page_size);
let toggle_select_all = {
let all_ids = all_ids.clone();
move |_| {
let new_val = !*select_all.read();
select_all.set(new_val);
global_all_selected.set(false);
if new_val {
selected_ids.set(all_ids.clone());
} else {
selected_ids.set(Vec::new());
}
}
};
let is_all_selected = *select_all.read();
let current_mode = *view_mode.read();
let current_sort = sort_field.read().clone();
rsx! {
// Confirmation dialog for single delete
if confirm_delete.read().is_some() {
div { class: "modal-overlay",
onclick: move |_| confirm_delete.set(None),
div { class: "modal",
onclick: move |e: Event<MouseData>| e.stop_propagation(),
h3 { class: "modal-title", "Confirm Delete" }
p { class: "modal-body", "Are you sure you want to delete this media item? This cannot be undone." }
div { class: "modal-actions",
button {
class: "btn btn-ghost",
onclick: move |_| confirm_delete.set(None),
"Cancel"
}
button {
class: "btn btn-danger",
onclick: move |_| {
if let Some(id) = confirm_delete.read().clone() {
on_delete.call(id);
}
confirm_delete.set(None);
},
"Delete"
}
}
}
}
}
// Confirmation dialog for batch delete
if *confirm_batch_delete.read() {
div { class: "modal-overlay",
onclick: move |_| confirm_batch_delete.set(false),
div { class: "modal",
onclick: move |e: Event<MouseData>| e.stop_propagation(),
h3 { class: "modal-title", "Confirm Batch Delete" }
p { class: "modal-body",
"Are you sure you want to delete {selection_count} selected items? This cannot be undone."
}
div { class: "modal-actions",
button {
class: "btn btn-ghost",
onclick: move |_| confirm_batch_delete.set(false),
"Cancel"
}
button {
class: "btn btn-danger",
onclick: move |_| {
let ids = selected_ids.read().clone();
on_batch_delete.call(ids);
selected_ids.set(Vec::new());
select_all.set(false);
confirm_batch_delete.set(false);
},
"Delete All"
}
}
}
}
}
// Confirmation dialog for delete all
if *confirm_delete_all.read() {
div { class: "modal-overlay",
onclick: move |_| confirm_delete_all.set(false),
div { class: "modal",
onclick: move |e: Event<MouseData>| e.stop_propagation(),
h3 { class: "modal-title", "Delete All Media" }
p { class: "modal-body",
"Are you sure you want to delete ALL {total_count} items? This cannot be undone."
}
div { class: "modal-actions",
button {
class: "btn btn-ghost",
onclick: move |_| confirm_delete_all.set(false),
"Cancel"
}
button {
class: "btn btn-danger",
onclick: move |_| {
if let Some(handler) = on_delete_all {
handler.call(());
}
selected_ids.set(Vec::new());
select_all.set(false);
global_all_selected.set(false);
confirm_delete_all.set(false);
},
"Delete Everything"
}
}
}
}
}
// Batch tag dialog
if *show_batch_tag.read() {
div { class: "modal-overlay",
onclick: move |_| {
show_batch_tag.set(false);
batch_tag_selection.set(Vec::new());
},
div { class: "modal",
onclick: move |e: Event<MouseData>| e.stop_propagation(),
h3 { class: "modal-title", "Tag Selected Items" }
p { class: "modal-body text-muted text-sm",
"Select tags to apply to {selection_count} items:"
}
if tags.is_empty() {
p { class: "text-muted", "No tags available. Create tags first." }
} else {
div { class: "tag-list", style: "margin: 12px 0;",
for tag in tags.iter() {
{
let tag_id = tag.id.clone();
let tag_name = tag.name.clone();
let is_selected = batch_tag_selection.read().contains(&tag_id);
let badge_class = if is_selected { "tag-badge selected" } else { "tag-badge" };
rsx! {
span {
class: "{badge_class}",
onclick: {
let tag_id = tag_id.clone();
move |_| {
let mut current = batch_tag_selection.read().clone();
if let Some(pos) = current.iter().position(|t| t == &tag_id) {
current.remove(pos);
} else {
current.push(tag_id.clone());
}
batch_tag_selection.set(current);
}
},
"{tag_name}"
}
}
}
}
}
}
div { class: "modal-actions",
button {
class: "btn btn-ghost",
onclick: move |_| {
show_batch_tag.set(false);
batch_tag_selection.set(Vec::new());
},
"Cancel"
}
button {
class: "btn btn-primary",
onclick: move |_| {
let ids = selected_ids.read().clone();
let tag_ids = batch_tag_selection.read().clone();
if !tag_ids.is_empty() {
on_batch_tag.call((ids, tag_ids));
selected_ids.set(Vec::new());
select_all.set(false);
}
show_batch_tag.set(false);
batch_tag_selection.set(Vec::new());
},
"Apply Tags"
}
}
}
}
}
// Batch collection dialog
if *show_batch_collection.read() {
div { class: "modal-overlay",
onclick: move |_| {
show_batch_collection.set(false);
batch_collection_id.set(String::new());
},
div { class: "modal",
onclick: move |e: Event<MouseData>| e.stop_propagation(),
h3 { class: "modal-title", "Add to Collection" }
p { class: "modal-body text-muted text-sm",
"Choose a collection for {selection_count} items:"
}
if collections.is_empty() {
p { class: "text-muted", "No collections available. Create one first." }
} else {
select {
style: "width: 100%; margin: 12px 0;",
value: "{batch_collection_id}",
onchange: move |e: Event<FormData>| batch_collection_id.set(e.value()),
option { value: "", "Select a collection..." }
for col in collections.iter() {
option {
key: "{col.id}",
value: "{col.id}",
"{col.name}"
}
}
}
}
div { class: "modal-actions",
button {
class: "btn btn-ghost",
onclick: move |_| {
show_batch_collection.set(false);
batch_collection_id.set(String::new());
},
"Cancel"
}
button {
class: "btn btn-primary",
onclick: move |_| {
let ids = selected_ids.read().clone();
let col_id = batch_collection_id.read().clone();
if !col_id.is_empty() {
on_batch_collection.call((ids, col_id));
selected_ids.set(Vec::new());
select_all.set(false);
}
show_batch_collection.set(false);
batch_collection_id.set(String::new());
},
"Add to Collection"
}
}
}
}
}
// Toolbar: view toggle, sort, batch actions
div { class: "library-toolbar",
div { class: "toolbar-left",
// View mode toggle
div { class: "view-toggle",
button {
class: if current_mode == ViewMode::Grid { "view-btn active" } else { "view-btn" },
onclick: move |_| view_mode.set(ViewMode::Grid),
title: "Grid view",
"\u{25a6}"
}
button {
class: if current_mode == ViewMode::Table { "view-btn active" } else { "view-btn" },
onclick: move |_| view_mode.set(ViewMode::Table),
title: "Table view",
"\u{2630}"
}
}
// Sort selector
div { class: "sort-control",
select {
value: "{sort_field}",
onchange: move |e: Event<FormData>| {
let val = e.value();
sort_field.set(val.clone());
on_sort_change.call(val);
},
option { value: "created_at_desc", "Newest first" }
option { value: "created_at_asc", "Oldest first" }
option { value: "file_name_asc", "Name A-Z" }
option { value: "file_name_desc", "Name Z-A" }
option { value: "file_size_desc", "Largest first" }
option { value: "file_size_asc", "Smallest first" }
option { value: "media_type_asc", "Type" }
}
}
// Page size
div { class: "page-size-control",
span { class: "text-muted text-sm", "Show:" }
select {
value: "{page_size}",
onchange: move |e: Event<FormData>| {
if let Ok(size) = e.value().parse::<u64>() {
on_page_size_change.call(size);
}
},
option { value: "24", "24" }
option { value: "48", "48" }
option { value: "96", "96" }
option { value: "200", "200" }
}
}
}
div { class: "toolbar-right",
// Select All / Deselect All toggle (works in both grid and table)
{
let all_ids2 = all_ids.clone();
rsx! {
button {
class: "btn btn-sm btn-ghost",
onclick: move |_| {
if is_all_selected {
selected_ids.set(Vec::new());
select_all.set(false);
global_all_selected.set(false);
} else {
selected_ids.set(all_ids2.clone());
select_all.set(true);
}
},
if is_all_selected {
"Deselect All"
} else {
"Select All"
}
}
}
}
if has_selection {
div { class: "batch-actions",
span { "{selection_count} selected" }
button {
class: "btn btn-sm btn-secondary",
onclick: move |_| show_batch_tag.set(true),
"Tag"
}
button {
class: "btn btn-sm btn-secondary",
onclick: move |_| show_batch_collection.set(true),
"Collection"
}
button {
class: "btn btn-sm btn-danger",
onclick: move |_| confirm_batch_delete.set(true),
"Delete"
}
button {
class: "btn btn-sm btn-ghost",
onclick: move |_| {
selected_ids.set(Vec::new());
select_all.set(false);
global_all_selected.set(false);
},
"Clear"
}
}
}
if on_delete_all.is_some() && total_count > 0 {
button {
class: "btn btn-sm btn-danger",
onclick: move |_| confirm_delete_all.set(true),
"Delete All"
}
}
span { class: "text-muted text-sm",
"{total_count} items"
}
}
}
// Type filter chips
div { class: "type-filter-row",
for filter in TYPE_FILTERS.iter() {
{
let f = (*filter).to_string();
let is_active = active_filter == f;
let chip_class = if is_active { "filter-chip active" } else { "filter-chip" };
let label = filter_label(filter);
rsx! {
button {
key: "{f}",
class: "{chip_class}",
onclick: {
let f = f.clone();
move |_| {
type_filter.set(f.clone());
}
},
"{label}"
}
}
}
}
}
// Stats summary row
div { class: "library-stats",
span { class: "text-muted text-sm",
if active_filter != "all" {
"Showing {filtered_count} of {total_count} items (filtered: {active_filter})"
} else {
"Showing {filtered_count} items"
}
}
span { class: "text-muted text-sm",
"Page {current_page + 1} of {total_pages}"
}
}
// Select-all banner: when all items on this page are selected and there
// are more pages, offer to select everything across all pages.
if is_all_selected && total_count > page_size && !*global_all_selected.read() {
div { class: "select-all-banner",
"All {filtered_count} items on this page are selected."
if on_select_all_global.is_some() {
button {
onclick: move |_| {
if let Some(handler) = on_select_all_global {
handler.call(EventHandler::new(move |all_ids: Vec<String>| {
selected_ids.set(all_ids);
global_all_selected.set(true);
}));
}
},
"Select all {total_count} items"
}
}
}
}
if *global_all_selected.read() {
div { class: "select-all-banner",
"All {selection_count} items across all pages are selected."
button {
onclick: move |_| {
selected_ids.set(Vec::new());
select_all.set(false);
global_all_selected.set(false);
},
"Clear selection"
}
}
}
// Content: grid or table
match current_mode {
ViewMode::Grid => rsx! {
div { class: "media-grid",
for (idx, item) in filtered_media.iter().enumerate() {
{
let id = item.id.clone();
let badge_class = type_badge_class(&item.media_type);
let is_checked = current_selection.contains(&id);
let card_click = {
let id = item.id.clone();
move |_| on_select.call(id.clone())
};
// Build a list of all visible IDs for shift+click range selection.
let visible_ids: Vec<String> = filtered_media.iter().map(|m| m.id.clone()).collect();
let toggle_id = {
let id = id.clone();
move |e: Event<MouseData>| {
e.stop_propagation();
let shift = e.modifiers().shift();
let mut ids = selected_ids.read().clone();
if shift {
// Shift+click: select range from last_click_index to current idx.
if let Some(last) = *last_click_index.read() {
let start = last.min(idx);
let end = last.max(idx);
for i in start..=end {
if let Some(range_id) = visible_ids.get(i)
&& !ids.contains(range_id)
{
ids.push(range_id.clone());
}
}
} else {
// No previous click, just toggle this one.
if !ids.contains(&id) {
ids.push(id.clone());
}
}
} else if ids.contains(&id) {
ids.retain(|x| x != &id);
} else {
ids.push(id.clone());
}
last_click_index.set(Some(idx));
selected_ids.set(ids);
}
};
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();
let card_class = if is_checked { "media-card selected" } else { "media-card" };
let title_text = item.title.clone().unwrap_or_default();
let artist_text = item.artist.clone().unwrap_or_default();
rsx! {
div {
key: "{item.id}",
class: "{card_class}",
onclick: card_click,
div { class: "card-checkbox",
input {
r#type: "checkbox",
checked: is_checked,
onclick: toggle_id,
}
}
// Thumbnail with CSS fallback: both the icon and img
// are rendered. The img is absolutely positioned on
// top. If the image fails to load, the icon beneath
// shows through.
div { class: "card-thumbnail",
div { class: "card-type-icon {badge_class}",
"{type_icon(&media_type)}"
}
if has_thumb {
img {
class: "card-thumb-img",
src: "{thumb_url}",
alt: "{item.file_name}",
loading: "lazy",
}
}
}
div { class: "card-info",
div { class: "card-name", title: "{item.file_name}",
"{item.file_name}"
}
if !title_text.is_empty() {
div { class: "card-title text-muted text-xs",
"{title_text}"
}
}
if !artist_text.is_empty() {
div { class: "card-artist text-muted text-xs",
"{artist_text}"
}
}
div { class: "card-meta",
span { class: "type-badge {badge_class}", "{item.media_type}" }
span { class: "card-size", "{format_size(item.file_size)}" }
}
}
}
}
}
}
}
},
ViewMode::Table => rsx! {
table { class: "data-table",
thead {
tr {
th {
input {
r#type: "checkbox",
checked: is_all_selected,
onclick: toggle_select_all,
}
}
th { "" }
th {
class: "sortable-header",
onclick: {
let cs = current_sort.clone();
move |_| {
let val = next_sort(&cs, "file_name");
sort_field.set(val.clone());
on_sort_change.call(val);
}
},
"Name{sort_arrow(&current_sort, \"file_name\")}"
}
th {
class: "sortable-header",
onclick: {
let cs = current_sort.clone();
move |_| {
let val = next_sort(&cs, "media_type");
sort_field.set(val.clone());
on_sort_change.call(val);
}
},
"Type{sort_arrow(&current_sort, \"media_type\")}"
}
th { "Artist" }
th {
class: "sortable-header",
onclick: {
let cs = current_sort.clone();
move |_| {
let val = next_sort(&cs, "file_size");
sort_field.set(val.clone());
on_sort_change.call(val);
}
},
"Size{sort_arrow(&current_sort, \"file_size\")}"
}
th { "" }
}
}
tbody {
for (idx, item) in filtered_media.iter().enumerate() {
{
let id = item.id.clone();
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 is_checked = current_selection.contains(&id);
let visible_ids: Vec<String> = filtered_media.iter().map(|m| m.id.clone()).collect();
let toggle_id = {
let id = id.clone();
move |e: Event<MouseData>| {
e.stop_propagation();
let shift = e.modifiers().shift();
let mut ids = selected_ids.read().clone();
if shift {
if let Some(last) = *last_click_index.read() {
let start = last.min(idx);
let end = last.max(idx);
for i in start..=end {
if let Some(range_id) = visible_ids.get(i)
&& !ids.contains(range_id)
{
ids.push(range_id.clone());
}
}
} else {
if !ids.contains(&id) {
ids.push(id.clone());
}
}
} else if ids.contains(&id) {
ids.retain(|x| x != &id);
} else {
ids.push(id.clone());
}
last_click_index.set(Some(idx));
selected_ids.set(ids);
}
};
let row_click = {
let id = item.id.clone();
move |_| on_select.call(id.clone())
};
let delete_click = {
let id = item.id.clone();
move |e: Event<MouseData>| {
e.stop_propagation();
confirm_delete.set(Some(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_str = item.media_type.clone();
rsx! {
tr {
key: "{item.id}",
onclick: row_click,
td {
input {
r#type: "checkbox",
checked: is_checked,
onclick: toggle_id,
}
}
td { class: "table-thumb-cell",
// Thumbnail with CSS fallback: icon always
// rendered, img overlays when available.
span { class: "table-type-icon {badge_class}",
"{type_icon(&media_type_str)}"
}
if has_thumb {
img {
class: "table-thumb table-thumb-overlay",
src: "{thumb_url}",
alt: "",
loading: "lazy",
}
}
}
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: delete_click,
"Delete"
}
}
}
}
}
}
}
}
},
}
// Pagination controls
PaginationControls {
current_page,
total_pages,
on_page_change: move |page: u64| on_page_change.call(page),
}
}
}

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

@ -0,0 +1,59 @@
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" }
}
}
}
#[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" }
}
}
}
#[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}" }
}
}
}
#[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}" }
}
}
}
}
#[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}" }
}
}
}
}

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

@ -0,0 +1,75 @@
use dioxus::prelude::*;
#[component]
pub fn Login(
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 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" }
}
}
}
}
}
}

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

@ -0,0 +1,180 @@
use dioxus::prelude::*;
#[component]
pub fn MarkdownViewer(content_url: String, media_type: String) -> Element {
let mut rendered_html = use_signal(String::new);
let mut frontmatter_html = use_signal(|| Option::<String>::None);
let mut loading = use_signal(|| true);
let mut error = use_signal(|| Option::<String>::None);
// 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) => {
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);
});
});
let is_loading = *loading.read();
rsx! {
div { class: "markdown-viewer",
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 let Some(ref fm) = *frontmatter_html.read() {
div {
class: "frontmatter-card",
dangerous_inner_html: "{fm}",
}
}
div {
class: "markdown-content",
dangerous_inner_html: "{rendered_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;
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 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;
};
if map.is_empty() {
return None;
}
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>"));
}
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(),
}
}
fn render_markdown(text: &str) -> String {
use pulldown_cmark::{Options, Parser, html};
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, options);
let mut html_output = String::new();
html::push_html(&mut html_output, parser);
// Strip script tags for safety
strip_script_tags(&html_output)
}
fn render_plaintext(text: &str) -> String {
let escaped = escape_html(text);
format!("<pre><code>{escaped}</code></pre>")
}
fn escape_html(text: &str) -> String {
text.replace('&', "&amp;")
.replace('<', "&lt;")
.replace('>', "&gt;")
.replace('"', "&quot;")
}
fn strip_script_tags(html: &str) -> String {
// Simple removal of <script> tags
let mut result = html.to_string();
while let Some(start) = result.to_lowercase().find("<script") {
if let Some(end) = result.to_lowercase()[start..].find("</script>") {
result = format!(
"{}{}",
&result[..start],
&result[start + end + "</script>".len()..]
);
} else {
// Malformed script tag - remove to end
result = result[..start].to_string();
break;
}
}
result
}

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

@ -0,0 +1,516 @@
use dioxus::document::eval;
use dioxus::prelude::*;
use super::utils::format_duration;
#[derive(Debug, Clone, PartialEq, serde::Serialize, serde::Deserialize)]
pub struct QueueItem {
pub media_id: String,
pub title: String,
pub artist: Option<String>,
pub duration_secs: Option<f64>,
pub media_type: String,
pub stream_url: String,
pub thumbnail_url: Option<String>,
}
#[derive(Debug, Clone, Copy, PartialEq, serde::Serialize, serde::Deserialize)]
pub enum RepeatMode {
Off,
One,
All,
}
#[derive(Debug, Clone, PartialEq, serde::Serialize, serde::Deserialize)]
pub struct PlayQueue {
pub items: Vec<QueueItem>,
pub current_index: usize,
pub repeat: RepeatMode,
pub shuffle: bool,
}
impl Default for PlayQueue {
fn default() -> Self {
Self {
items: Vec::new(),
current_index: 0,
repeat: RepeatMode::Off,
shuffle: false,
}
}
}
impl PlayQueue {
pub fn is_empty(&self) -> bool {
self.items.is_empty()
}
pub fn current(&self) -> Option<&QueueItem> {
self.items.get(self.current_index)
}
pub fn next(&mut self) -> Option<&QueueItem> {
if self.items.is_empty() {
return None;
}
match self.repeat {
RepeatMode::One => self.items.get(self.current_index),
RepeatMode::All => {
self.current_index = (self.current_index + 1) % self.items.len();
self.items.get(self.current_index)
}
RepeatMode::Off => {
if self.current_index + 1 < self.items.len() {
self.current_index += 1;
self.items.get(self.current_index)
} else {
None
}
}
}
}
pub fn previous(&mut self) -> Option<&QueueItem> {
if self.items.is_empty() {
return None;
}
if self.current_index > 0 {
self.current_index -= 1;
} else if self.repeat == RepeatMode::All {
self.current_index = self.items.len() - 1;
}
self.items.get(self.current_index)
}
pub fn add(&mut self, item: QueueItem) {
self.items.push(item);
}
pub fn remove(&mut self, index: usize) {
if index < self.items.len() {
self.items.remove(index);
if self.current_index >= self.items.len() && !self.items.is_empty() {
self.current_index = self.items.len() - 1;
}
}
}
pub fn clear(&mut self) {
self.items.clear();
self.current_index = 0;
}
pub fn toggle_repeat(&mut self) {
self.repeat = match self.repeat {
RepeatMode::Off => RepeatMode::All,
RepeatMode::All => RepeatMode::One,
RepeatMode::One => RepeatMode::Off,
};
}
pub fn toggle_shuffle(&mut self) {
self.shuffle = !self.shuffle;
}
}
#[component]
pub fn MediaPlayer(
src: String,
media_type: String,
#[props(default)] title: Option<String>,
#[props(default)] thumbnail_url: Option<String>,
#[props(default = false)] autoplay: bool,
#[props(default)] on_track_ended: Option<EventHandler<()>>,
) -> Element {
let mut playing = use_signal(|| false);
let mut current_time = use_signal(|| 0.0f64);
let mut duration = use_signal(|| 0.0f64);
let mut volume = use_signal(|| 1.0f64);
let mut muted = use_signal(|| false);
let is_video = media_type == "video";
let is_playing = *playing.read();
let cur_time = *current_time.read();
let dur = *duration.read();
let vol = *volume.read();
let is_muted = *muted.read();
let time_str = format_duration(cur_time);
let dur_str = format_duration(dur);
let vol_pct = (vol * 100.0) as u32;
// Poll playback state every 250ms
let src_clone = src.clone();
let on_ended = on_track_ended;
use_effect(move || {
let _ = &src_clone;
let on_ended = on_ended;
spawn(async move {
loop {
tokio::time::sleep(std::time::Duration::from_millis(250)).await;
let result = eval(
r#"
let el = document.getElementById('pinakes-player');
if (el) {
return JSON.stringify({
currentTime: el.currentTime,
duration: el.duration || 0,
paused: el.paused,
volume: el.volume,
muted: el.muted,
ended: el.ended
});
}
return "null";
"#,
)
.await;
if let Ok(val) = result
&& let Some(s) = val.as_str()
&& s != "null"
&& let Ok(state) = serde_json::from_str::<serde_json::Value>(s)
{
if let Some(ct) = state["currentTime"].as_f64() {
current_time.set(ct);
}
if let Some(d) = state["duration"].as_f64()
&& d.is_finite()
{
duration.set(d);
}
if let Some(p) = state["paused"].as_bool() {
playing.set(!p);
}
if let Some(true) = state["ended"].as_bool()
&& let Some(ref handler) = on_ended
{
handler.call(());
}
}
}
});
});
// Autoplay on mount
if autoplay {
let src_auto = src.clone();
use_effect(move || {
let _ = &src_auto;
spawn(async move {
tokio::time::sleep(std::time::Duration::from_millis(100)).await;
let _ = eval("document.getElementById('pinakes-player')?.play()").await;
});
});
}
let toggle_play = move |_| {
spawn(async move {
if *playing.read() {
let _ = eval("document.getElementById('pinakes-player')?.pause()").await;
} else {
let _ = eval("document.getElementById('pinakes-player')?.play()").await;
}
});
};
let toggle_mute = move |_| {
let new_muted = !*muted.read();
muted.set(new_muted);
let js = format!(
"let e = document.getElementById('pinakes-player'); if(e) e.muted = {};",
new_muted
);
spawn(async move {
let _ = eval(&js).await;
});
};
let on_seek = move |e: Event<FormData>| {
if let Ok(t) = e.value().parse::<f64>() {
current_time.set(t);
let js = format!(
"let e = document.getElementById('pinakes-player'); if(e) e.currentTime = {};",
t
);
spawn(async move {
let _ = eval(&js).await;
});
}
};
let on_volume = move |e: Event<FormData>| {
if let Ok(v) = e.value().parse::<f64>() {
let vol_val = v / 100.0;
volume.set(vol_val);
let js = format!(
"let e = document.getElementById('pinakes-player'); if(e) e.volume = {};",
vol_val
);
spawn(async move {
let _ = eval(&js).await;
});
}
};
let on_fullscreen = move |_| {
spawn(async move {
let _ = eval(
"let e = document.getElementById('pinakes-player'); if(e) { if(document.fullscreenElement) document.exitFullscreen(); else e.requestFullscreen(); }",
).await;
});
};
// Keyboard controls
let on_keydown = move |evt: KeyboardEvent| {
let key = evt.key();
match key {
Key::Character(ref c) if c == " " => {
evt.prevent_default();
spawn(async move {
if *playing.read() {
let _ = eval("document.getElementById('pinakes-player')?.pause()").await;
} else {
let _ = eval("document.getElementById('pinakes-player')?.play()").await;
}
});
}
Key::ArrowLeft => {
evt.prevent_default();
spawn(async move {
let _ = eval("let e = document.getElementById('pinakes-player'); if(e) e.currentTime = Math.max(0, e.currentTime - 5);").await;
});
}
Key::ArrowRight => {
evt.prevent_default();
spawn(async move {
let _ = eval("let e = document.getElementById('pinakes-player'); if(e) e.currentTime = Math.min(e.duration || 0, e.currentTime + 5);").await;
});
}
Key::ArrowUp => {
evt.prevent_default();
let new_vol = (vol + 0.1).min(1.0);
volume.set(new_vol);
let js = format!(
"let e = document.getElementById('pinakes-player'); if(e) e.volume = {};",
new_vol
);
spawn(async move {
let _ = eval(&js).await;
});
}
Key::ArrowDown => {
evt.prevent_default();
let new_vol = (vol - 0.1).max(0.0);
volume.set(new_vol);
let js = format!(
"let e = document.getElementById('pinakes-player'); if(e) e.volume = {};",
new_vol
);
spawn(async move {
let _ = eval(&js).await;
});
}
Key::Character(ref c) if c == "m" || c == "M" => {
let new_muted = !*muted.read();
muted.set(new_muted);
let js = format!(
"let e = document.getElementById('pinakes-player'); if(e) e.muted = {};",
new_muted
);
spawn(async move {
let _ = eval(&js).await;
});
}
Key::Character(ref c) if c == "f" || c == "F" => {
spawn(async move {
let _ = eval("let e = document.getElementById('pinakes-player'); if(e) { if(document.fullscreenElement) document.exitFullscreen(); else e.requestFullscreen(); }").await;
});
}
_ => {}
}
};
let play_icon = if is_playing { "\u{23f8}" } else { "\u{25b6}" };
let mute_icon = if is_muted { "\u{1f507}" } else { "\u{1f50a}" };
rsx! {
div {
class: if is_video { "media-player media-player-video" } else { "media-player media-player-audio" },
tabindex: "0",
onkeydown: on_keydown,
// Hidden native element
if is_video {
video {
id: "pinakes-player",
src: "{src}",
style: if is_video { "width: 100%; display: block;" } else { "display: none;" },
preload: "metadata",
}
} else {
audio {
id: "pinakes-player",
src: "{src}",
style: "display: none;",
preload: "metadata",
}
}
// Album art for audio
if !is_video {
div { class: "player-artwork",
if let Some(ref thumb) = thumbnail_url {
img { src: "{thumb}", alt: "Cover art" }
} else {
div { class: "player-artwork-placeholder", "\u{266b}" }
}
if let Some(ref t) = title {
div { class: "player-title", "{t}" }
}
}
}
// Custom controls
div { class: "player-controls",
button {
class: "play-btn",
onclick: toggle_play,
title: if is_playing { "Pause" } else { "Play" },
"{play_icon}"
}
span { class: "player-time", "{time_str}" }
input {
r#type: "range",
class: "seek-bar",
min: "0",
max: "{dur}",
step: "0.1",
value: "{cur_time}",
oninput: on_seek,
}
span { class: "player-time", "{dur_str}" }
button {
class: "mute-btn",
onclick: toggle_mute,
title: if is_muted { "Unmute" } else { "Mute" },
"{mute_icon}"
}
input {
r#type: "range",
class: "volume-slider",
min: "0",
max: "100",
value: "{vol_pct}",
oninput: on_volume,
}
if is_video {
button {
class: "fullscreen-btn",
onclick: on_fullscreen,
title: "Fullscreen",
"\u{26f6}"
}
}
}
}
}
}
#[component]
pub fn QueuePanel(
queue: PlayQueue,
on_select: EventHandler<usize>,
on_remove: EventHandler<usize>,
on_clear: EventHandler<()>,
on_toggle_repeat: EventHandler<()>,
on_toggle_shuffle: EventHandler<()>,
on_next: EventHandler<()>,
on_previous: EventHandler<()>,
) -> Element {
let repeat_label = match queue.repeat {
RepeatMode::Off => "Repeat: Off",
RepeatMode::One => "Repeat: One",
RepeatMode::All => "Repeat: All",
};
let shuffle_label = if queue.shuffle {
"Shuffle: On"
} else {
"Shuffle: Off"
};
let current_idx = queue.current_index;
rsx! {
div { class: "queue-panel",
div { class: "queue-header",
h3 { "Play Queue ({queue.items.len()})" }
div { class: "queue-controls",
button {
class: "btn btn-sm btn-ghost",
onclick: move |_| on_previous.call(()),
title: "Previous (P)",
"\u{23ee}"
}
button {
class: "btn btn-sm btn-ghost",
onclick: move |_| on_next.call(()),
title: "Next (N)",
"\u{23ed}"
}
button {
class: "btn btn-sm btn-ghost",
onclick: move |_| on_toggle_repeat.call(()),
title: "{repeat_label}",
"\u{1f501}"
}
button {
class: "btn btn-sm btn-ghost",
onclick: move |_| on_toggle_shuffle.call(()),
title: "{shuffle_label}",
"\u{1f500}"
}
button {
class: "btn btn-sm btn-ghost",
onclick: move |_| on_clear.call(()),
title: "Clear Queue",
"\u{1f5d1}"
}
}
}
if queue.items.is_empty() {
div { class: "queue-empty", "Queue is empty. Add items from the library." }
} else {
div { class: "queue-list",
for (i, item) in queue.items.iter().enumerate() {
{
let is_current = i == current_idx;
let item_class = if is_current { "queue-item queue-item-active" } else { "queue-item" };
let title = item.title.clone();
let artist = item.artist.clone().unwrap_or_default();
rsx! {
div {
key: "q-{i}",
class: "{item_class}",
onclick: move |_| on_select.call(i),
div { class: "queue-item-info",
span { class: "queue-item-title", "{title}" }
if !artist.is_empty() {
span { class: "queue-item-artist", "{artist}" }
}
}
button {
class: "btn btn-sm btn-ghost queue-item-remove",
onclick: move |e: Event<MouseData>| {
e.stop_propagation();
on_remove.call(i);
},
"\u{2715}"
}
}
}
}
}
}
}
}
}
}

20
crates/pinakes-ui/src/components/mod.rs Normal file
View file

@ -0,0 +1,20 @@
pub mod audit;
pub mod breadcrumb;
pub mod collections;
pub mod database;
pub mod detail;
pub mod duplicates;
pub mod image_viewer;
pub mod import;
pub mod library;
pub mod loading;
pub mod login;
pub mod markdown_viewer;
pub mod media_player;
pub mod pagination;
pub mod search;
pub mod settings;
pub mod statistics;
pub mod tags;
pub mod tasks;
pub mod utils;

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

@ -0,0 +1,102 @@
use dioxus::prelude::*;
#[component]
pub fn Pagination(
current_page: u64,
total_pages: u64,
on_page_change: EventHandler<u64>,
) -> Element {
if total_pages <= 1 {
return rsx! {};
}
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"
}
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"
}
}
}
}
/// 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;
}
pages.push(0);
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);
}
}
if current < total - 3 {
pages.push(u64::MAX);
}
if !pages.contains(&(total - 1)) {
pages.push(total - 1);
}
pages
}

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

@ -0,0 +1,251 @@
use dioxus::prelude::*;
use super::pagination::Pagination as PaginationControls;
use super::utils::{format_size, type_badge_class, type_icon};
use crate::client::MediaResponse;
#[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,
) -> Element {
let mut query = use_signal(String::new);
let mut sort_by = use_signal(|| String::from("relevance"));
let mut show_help = 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"
}
// 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" }
}
}
}
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: total_pages,
on_page_change: on_page_change,
}
}
}

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

@ -0,0 +1,545 @@
use dioxus::prelude::*;
use crate::client::ConfigResponse;
#[component]
pub fn Settings(
config: ConfigResponse,
on_add_root: EventHandler<String>,
on_remove_root: EventHandler<String>,
on_toggle_watch: EventHandler<bool>,
on_update_poll_interval: EventHandler<u64>,
on_update_ignore_patterns: EventHandler<Vec<String>>,
#[props(default)] on_update_ui_config: Option<EventHandler<serde_json::Value>>,
) -> Element {
let mut new_root = use_signal(String::new);
let mut editing_poll = use_signal(|| false);
let mut poll_input = use_signal(String::new);
let mut poll_error = use_signal(|| Option::<String>::None);
let mut editing_patterns = use_signal(|| false);
let mut patterns_input = use_signal(String::new);
let writable = config.config_writable;
let watch_enabled = config.scanning.watch;
let host_port = format!("{}:{}", config.server.host, config.server.port);
let db_path = config.database_path.clone().unwrap_or_default();
let root_count = config.roots.len();
rsx! {
div { class: "settings-layout",
// ── Configuration Source ──
div { class: "settings-card",
div { class: "settings-card-header",
h3 { class: "settings-card-title", "Configuration Source" }
if writable {
span { class: "badge badge-success", "Writable" }
} else {
span { class: "badge badge-warning", "Read-only" }
}
}
div { class: "settings-card-body",
if let Some(ref path) = config.config_path {
div { class: "info-row",
label { class: "form-label", "Config Path" }
span { class: "info-value mono", "{path}" }
}
}
if !writable {
div { class: "settings-notice settings-notice-warning",
"Configuration is read-only. Changes cannot be persisted to disk. "
"To enable editing, ensure the config file exists and is writable by the server process."
}
}
}
}
// ── Server Health ──
div { class: "settings-card",
div { class: "settings-card-header",
h3 { class: "settings-card-title", "Server Info" }
}
div { class: "settings-card-body",
div { class: "info-row",
div { class: "form-label-row",
label { class: "form-label", "Backend" }
span { class: "tooltip-trigger",
"?"
span { class: "tooltip-text", "The storage backend used by the server (SQLite or PostgreSQL)." }
}
}
span { class: "info-value badge badge-neutral", "{config.backend}" }
}
div { class: "info-row",
div { class: "form-label-row",
label { class: "form-label", "Server Address" }
span { class: "tooltip-trigger",
"?"
span { class: "tooltip-text", "The address and port the server is listening on." }
}
}
span { class: "info-value mono", "{host_port}" }
}
div { class: "info-row",
div { class: "form-label-row",
label { class: "form-label", "Database Path" }
span { class: "tooltip-trigger",
"?"
span { class: "tooltip-text", "File path to the SQLite database, or connection info for PostgreSQL." }
}
}
span { class: "info-value mono", "{db_path}" }
}
}
}
// ── Root Directories ──
div { class: "settings-card",
div { class: "settings-card-header",
div { class: "form-label-row",
h3 { class: "settings-card-title", "Root Directories" }
span { class: "badge badge-neutral", "{root_count}" }
}
span { class: "tooltip-trigger",
"?"
span { class: "tooltip-text", "Directories that Pinakes scans for media files. Only existing directories can be added." }
}
}
div { class: "settings-card-body",
if config.roots.is_empty() {
p { class: "text-muted", "No root directories configured." }
} else {
div { class: "root-list",
for root in config.roots.iter() {
div { class: "root-item", key: "{root}",
span { class: "mono root-path", "{root}" }
button {
class: "btn btn-danger btn-sm",
disabled: !writable,
onclick: {
let root = root.clone();
move |_| {
if writable {
on_remove_root.call(root.clone());
}
}
},
"Remove"
}
}
}
}
}
div { class: "form-row",
input {
r#type: "text",
placeholder: "/path/to/root...",
value: "{new_root}",
disabled: !writable,
oninput: move |e| new_root.set(e.value()),
onkeypress: move |e: KeyboardEvent| {
if writable && e.key() == Key::Enter {
let path = new_root.read().clone();
if !path.is_empty() {
on_add_root.call(path);
new_root.set(String::new());
}
}
},
}
button {
class: "btn btn-secondary",
disabled: !writable,
onclick: move |_| {
if writable {
let mut new_root = new_root;
spawn(async move {
if let Some(handle) = rfd::AsyncFileDialog::new().pick_folder().await {
new_root.set(handle.path().to_string_lossy().to_string());
}
});
}
},
"Browse..."
}
button {
class: "btn btn-primary",
disabled: !writable,
onclick: move |_| {
if writable {
let path = new_root.read().clone();
if !path.is_empty() {
on_add_root.call(path);
new_root.set(String::new());
}
}
},
"Add Root"
}
}
}
}
// ── Scanning ──
div { class: "settings-card",
div { class: "settings-card-header",
h3 { class: "settings-card-title", "Scanning" }
}
div { class: "settings-card-body",
// File watching toggle
div { class: "settings-field",
div { class: "form-label-row",
label { class: "form-label", "File Watching" }
span { class: "tooltip-trigger",
"?"
span { class: "tooltip-text", "When enabled, Pinakes monitors root directories for new, modified, or deleted files in real time using filesystem events." }
}
}
div {
class: if writable { "toggle" } else { "toggle toggle-disabled" },
onclick: move |_| {
if writable {
on_toggle_watch.call(!watch_enabled);
}
},
div {
class: if watch_enabled { "toggle-track active" } else { "toggle-track" },
div { class: "toggle-thumb" }
}
}
}
// Poll interval
div { class: "settings-field",
div { class: "form-label-row",
label { class: "form-label", "Poll Interval" }
span { class: "tooltip-trigger",
"?"
span { class: "tooltip-text", "How often (in seconds) Pinakes polls for file changes when watch mode is not available or as a fallback." }
}
}
if *editing_poll.read() {
div { class: "settings-inline-edit",
input {
r#type: "number",
min: "1",
value: "{poll_input}",
class: "input-sm",
oninput: move |e| {
poll_input.set(e.value());
// Clear error on new input
poll_error.set(None);
},
onkeypress: move |e: KeyboardEvent| {
if e.key() == Key::Enter {
let raw = poll_input.read().clone();
match raw.parse::<u64>() {
Ok(secs) if secs > 0 => {
on_update_poll_interval.call(secs);
editing_poll.set(false);
poll_error.set(None);
}
_ => {
poll_error.set(Some("Enter a positive integer (seconds).".to_string()));
}
}
}
},
}
span { class: "input-suffix", "seconds" }
button {
class: "btn btn-primary btn-sm",
onclick: move |_| {
let raw = poll_input.read().clone();
match raw.parse::<u64>() {
Ok(secs) if secs > 0 => {
on_update_poll_interval.call(secs);
editing_poll.set(false);
poll_error.set(None);
}
_ => {
poll_error.set(Some("Enter a positive integer (seconds).".to_string()));
}
}
},
"Save"
}
button {
class: "btn btn-ghost btn-sm",
onclick: move |_| {
editing_poll.set(false);
poll_error.set(None);
},
"Cancel"
}
}
if let Some(ref err) = *poll_error.read() {
p { class: "field-error", "{err}" }
}
} else {
div { class: "flex-row",
span { class: "info-value", "{config.scanning.poll_interval_secs}s" }
button {
class: "btn btn-ghost btn-sm",
disabled: !writable,
onclick: {
let current = config.scanning.poll_interval_secs;
move |_| {
if writable {
poll_input.set(current.to_string());
poll_error.set(None);
editing_poll.set(true);
}
}
},
"Edit"
}
}
}
}
// Ignore patterns
div { class: "settings-field",
div { class: "settings-field-header",
div { class: "form-label-row",
label { class: "form-label", "Ignore Patterns" }
span { class: "tooltip-trigger",
"?"
span { class: "tooltip-text", "Glob patterns for files and directories to skip during scanning. One pattern per line." }
}
}
if *editing_patterns.read() {
div { class: "flex-row",
button {
class: "btn btn-primary btn-sm",
onclick: move |_| {
let input = patterns_input.read().clone();
let patterns: Vec<String> = input
.lines()
.map(|l| l.trim().to_string())
.filter(|l| !l.is_empty())
.collect();
on_update_ignore_patterns.call(patterns);
editing_patterns.set(false);
},
"Save"
}
button {
class: "btn btn-ghost btn-sm",
onclick: move |_| editing_patterns.set(false),
"Cancel"
}
}
} else {
button {
class: "btn btn-ghost btn-sm",
disabled: !writable,
onclick: {
let patterns = config.scanning.ignore_patterns.clone();
move |_| {
if writable {
patterns_input.set(patterns.join("\n"));
editing_patterns.set(true);
}
}
},
"Edit"
}
}
}
if *editing_patterns.read() {
div { class: "settings-patterns-edit",
textarea {
value: "{patterns_input}",
oninput: move |e| patterns_input.set(e.value()),
rows: "8",
class: "patterns-textarea",
placeholder: "One pattern per line, e.g.:\n*.tmp\n.git/**\nnode_modules/**",
}
p { class: "text-muted text-sm", "Enter one glob pattern per line. Empty lines are ignored." }
}
} else {
if config.scanning.ignore_patterns.is_empty() {
p { class: "text-muted text-sm", "No ignore patterns configured." }
} else {
div { class: "patterns-list",
for pattern in config.scanning.ignore_patterns.iter() {
span { class: "pattern-chip mono", "{pattern}" }
}
}
}
}
}
}
}
// ── UI Preferences ──
div { class: "settings-card",
div { class: "settings-card-header",
h3 { class: "settings-card-title", "UI Preferences" }
}
div { class: "settings-card-body",
// Theme
div { class: "settings-field",
div { class: "form-label-row",
label { class: "form-label", "Theme" }
span { class: "tooltip-trigger",
"?"
span { class: "tooltip-text", "Choose between dark and light themes." }
}
}
select {
value: "{config.ui.theme}",
onchange: {
let handler = on_update_ui_config;
move |e: Event<FormData>| {
if let Some(ref h) = handler {
h.call(serde_json::json!({"theme": e.value()}));
}
}
},
option { value: "dark", "Dark" }
option { value: "light", "Light" }
}
}
// Default view
div { class: "settings-field",
div { class: "form-label-row",
label { class: "form-label", "Default View" }
span { class: "tooltip-trigger",
"?"
span { class: "tooltip-text", "The view shown when the application starts." }
}
}
select {
value: "{config.ui.default_view}",
onchange: {
let handler = on_update_ui_config;
move |e: Event<FormData>| {
if let Some(ref h) = handler {
h.call(serde_json::json!({"default_view": e.value()}));
}
}
},
option { value: "library", "Library" }
option { value: "search", "Search" }
}
}
// Default page size
div { class: "settings-field",
div { class: "form-label-row",
label { class: "form-label", "Default Page Size" }
span { class: "tooltip-trigger",
"?"
span { class: "tooltip-text", "Number of items shown per page by default." }
}
}
select {
value: "{config.ui.default_page_size}",
onchange: {
let handler = on_update_ui_config;
move |e: Event<FormData>| {
if let Some(ref h) = handler
&& let Ok(size) = e.value().parse::<usize>() {
h.call(serde_json::json!({"default_page_size": size}));
}
}
},
option { value: "24", "24" }
option { value: "48", "48" }
option { value: "96", "96" }
option { value: "200", "200" }
}
}
// Default view mode
div { class: "settings-field",
div { class: "form-label-row",
label { class: "form-label", "Default View Mode" }
span { class: "tooltip-trigger",
"?"
span { class: "tooltip-text", "Whether to show items in a grid or table layout." }
}
}
select {
value: "{config.ui.default_view_mode}",
onchange: {
let handler = on_update_ui_config;
move |e: Event<FormData>| {
if let Some(ref h) = handler {
h.call(serde_json::json!({"default_view_mode": e.value()}));
}
}
},
option { value: "grid", "Grid" }
option { value: "table", "Table" }
}
}
// Auto-play media
div { class: "settings-field",
div { class: "form-label-row",
label { class: "form-label", "Auto-play Media" }
span { class: "tooltip-trigger",
"?"
span { class: "tooltip-text", "Automatically start playback when opening audio or video." }
}
}
{
let autoplay = config.ui.auto_play_media;
let handler = on_update_ui_config;
rsx! {
div {
class: "toggle",
onclick: move |_| {
if let Some(ref h) = handler {
h.call(serde_json::json!({"auto_play_media": !autoplay}));
}
},
div {
class: if autoplay { "toggle-track active" } else { "toggle-track" },
div { class: "toggle-thumb" }
}
}
}
}
}
// Show thumbnails
div { class: "settings-field",
div { class: "form-label-row",
label { class: "form-label", "Show Thumbnails" }
span { class: "tooltip-trigger",
"?"
span { class: "tooltip-text", "Display thumbnail previews in library and search views." }
}
}
{
let show_thumbs = config.ui.show_thumbnails;
let handler = on_update_ui_config;
rsx! {
div {
class: "toggle",
onclick: move |_| {
if let Some(ref h) = handler {
h.call(serde_json::json!({"show_thumbnails": !show_thumbs}));
}
},
div {
class: if show_thumbs { "toggle-track active" } else { "toggle-track" },
div { class: "toggle-thumb" }
}
}
}
}
}
}
}
}
}
}

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

@ -0,0 +1,183 @@
use dioxus::prelude::*;
use super::utils::format_size;
use crate::client::LibraryStatisticsResponse;
#[component]
pub fn Statistics(
stats: Option<LibraryStatisticsResponse>,
#[props(default)] error: Option<String>,
on_refresh: EventHandler<()>,
) -> Element {
rsx! {
div { class: "card mb-16",
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"
}
}
}
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! {
// Overview
div { class: "stats-grid",
div { class: "stat-card",
div { class: "stat-value", "{s.total_media}" }
div { class: "stat-label", "Total Media" }
}
div { class: "stat-card",
div { class: "stat-value", "{total_size}" }
div { class: "stat-label", "Total Size" }
}
div { class: "stat-card",
div { class: "stat-value", "{avg_size}" }
div { class: "stat-label", "Avg File Size" }
}
div { class: "stat-card",
div { class: "stat-value", "{s.total_tags}" }
div { class: "stat-label", "Tags" }
}
div { class: "stat-card",
div { class: "stat-value", "{s.total_collections}" }
div { class: "stat-label", "Collections" }
}
div { class: "stat-card",
div { class: "stat-value", "{s.total_duplicates}" }
div { class: "stat-label", "Duplicate Hashes" }
}
}
// Media by Type
if !s.media_by_type.is_empty() {
div { class: "card mt-16",
h4 { class: "card-title", "Media by Type" }
table { class: "table",
thead {
tr {
th { "Type" }
th { "Count" }
}
}
tbody {
for item in s.media_by_type.iter() {
tr {
td { "{item.name}" }
td { "{item.count}" }
}
}
}
}
}
}
// Storage by Type
if !s.storage_by_type.is_empty() {
div { class: "card mt-16",
h4 { class: "card-title", "Storage by Type" }
table { class: "table",
thead {
tr {
th { "Type" }
th { "Size" }
}
}
tbody {
for item in s.storage_by_type.iter() {
tr {
td { "{item.name}" }
td { "{format_size(item.count)}" }
}
}
}
}
}
}
// Top Tags
if !s.top_tags.is_empty() {
div { class: "card mt-16",
h4 { class: "card-title", "Top Tags" }
table { class: "table",
thead {
tr {
th { "Tag" }
th { "Count" }
}
}
tbody {
for item in s.top_tags.iter() {
tr {
td { "{item.name}" }
td { "{item.count}" }
}
}
}
}
}
}
// Top Collections
if !s.top_collections.is_empty() {
div { class: "card mt-16",
h4 { class: "card-title", "Top Collections" }
table { class: "table",
thead {
tr {
th { "Collection" }
th { "Members" }
}
}
tbody {
for item in s.top_collections.iter() {
tr {
td { "{item.name}" }
td { "{item.count}" }
}
}
}
}
}
}
// Date Range
div { class: "card mt-16",
h4 { class: "card-title", "Date Range" }
div { class: "stats-grid",
div { class: "stat-card",
div { class: "stat-value", "{s.oldest_item.as_deref().unwrap_or(\"N/A\")}" }
div { class: "stat-label", "Oldest Item" }
}
div { class: "stat-card",
div { class: "stat-value", "{s.newest_item.as_deref().unwrap_or(\"N/A\")}" }
div { class: "stat-label", "Newest Item" }
}
}
}
}
},
None => rsx! {
div { class: "empty-state",
p { "Loading statistics..." }
}
},
}
}
}
}

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

@ -0,0 +1,273 @@
use dioxus::prelude::*;
use crate::client::TagResponse;
#[component]
pub fn Tags(
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 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! {}
}
}
}
}
}
}
}
}

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

@ -0,0 +1,95 @@
use dioxus::prelude::*;
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>,
) -> Element {
rsx! {
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(()),
"\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 tasks.is_empty() {
div { class: "empty-state",
p { "No scheduled tasks configured." }
}
} else {
table { class: "table",
thead {
tr {
th { "Enabled" }
th { "Name" }
th { "Schedule" }
th { "Last Run" }
th { "Next Run" }
th { "Status" }
th { "Actions" }
}
}
tbody {
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(|| "-".to_string());
let next_run = task.next_run.clone().unwrap_or_else(|| "-".to_string());
let last_status = task.last_status.clone().unwrap_or_else(|| "-".to_string());
rsx! {
tr {
td {
if task.enabled {
span { class: "badge badge-success", "\u{2713}" }
} else {
span { class: "badge badge-muted", "\u{2715}" }
}
}
td { "{task.name}" }
td { "{task.schedule}" }
td { "{last_run}" }
td { "{next_run}" }
td { "{last_status}" }
td {
button {
class: "btn btn-sm btn-secondary mr-8",
onclick: move |_| on_toggle.call(task_id_toggle.clone()),
if task.enabled { "Disable" } else { "Enable" }
}
button {
class: "btn btn-sm btn-primary",
onclick: move |_| on_run_now.call(task_id_run.clone()),
"Run Now"
}
}
}
}
}
}
}
}
}
}
}
}

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

@ -0,0 +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))
}
}
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",
}
}
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}",
}
}
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
}
}
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",
}
}
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}")
}
}

46
crates/pinakes-ui/src/main.rs Normal file
View file

@ -0,0 +1,46 @@
use clap::Parser;
use tracing_subscriber::EnvFilter;
mod app;
mod client;
mod components;
mod state;
mod styles;
use dioxus::prelude::*;
/// Pinakes desktop UI client
#[derive(Parser)]
#[command(name = "pinakes-ui", version, about)]
struct Cli {
/// Server URL to connect to
#[arg(
short,
long,
env = "PINAKES_SERVER_URL",
default_value = "http://localhost:3000"
)]
server: String,
/// Set log level (trace, debug, info, warn, error)
#[arg(long, default_value = "warn")]
log_level: String,
}
fn main() {
let cli = Cli::parse();
let env_filter = EnvFilter::try_new(&cli.log_level).unwrap_or_else(|_| EnvFilter::new("warn"));
tracing_subscriber::fmt()
.with_env_filter(env_filter)
.compact()
.init();
// SAFETY: Called before any threads are spawned (single-threaded at this point).
unsafe { std::env::set_var("PINAKES_SERVER_URL", &cli.server) };
tracing::info!(server = %cli.server, "starting pinakes desktop UI");
launch(app::App);
}

1
crates/pinakes-ui/src/state.rs Normal file
View file

@ -0,0 +1 @@
// Reserved for future shared state utilities.

2628
crates/pinakes-ui/src/styles.rs Normal file
View file

File diff suppressed because it is too large Load diff