initial commit

Signed-off-by: NotAShelf <raf@notashelf.dev>
Change-Id: I4a6b498153eccd5407510dd541b7f4816a6a6964

crates/pinakes-ui/src/components/audit.rs

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

crates/pinakes-ui/src/components/breadcrumb.rs

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

crates/pinakes-ui/src/components/collections.rs

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

crates/pinakes-ui/src/components/database.rs

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

crates/pinakes-ui/src/components/detail.rs

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

crates/pinakes-ui/src/components/duplicates.rs

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

crates/pinakes-ui/src/components/image_viewer.rs

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

crates/pinakes-ui/src/components/import.rs

@@ -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()
+}

crates/pinakes-ui/src/components/library.rs

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

crates/pinakes-ui/src/components/loading.rs

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

crates/pinakes-ui/src/components/login.rs

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

crates/pinakes-ui/src/components/markdown_viewer.rs

@@ -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
+}

crates/pinakes-ui/src/components/media_player.rs

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

crates/pinakes-ui/src/components/mod.rs

@@ -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;

crates/pinakes-ui/src/components/pagination.rs

@@ -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
+}

crates/pinakes-ui/src/components/search.rs

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

crates/pinakes-ui/src/components/settings.rs

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

crates/pinakes-ui/src/components/statistics.rs

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

crates/pinakes-ui/src/components/tags.rs

@@ -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! {}
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

crates/pinakes-ui/src/components/tasks.rs

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

crates/pinakes-ui/src/components/utils.rs

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

crates/pinakes-ui/src/main.rs

@@ -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);
+}

crates/pinakes-ui/src/state.rs

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