pinakes-ui: streamline sidebar design
Signed-off-by: NotAShelf <raf@notashelf.dev> Change-Id: I0176fa480e5ba40eea5a39685a4f97896a6a6964
This commit is contained in:
parent
3e14bbe607
commit
278bcaa4b0
GPG key ID:
29D95B64378DB4BF
25 changed files with 1805 additions and 1686 deletions
|
|
@ -107,7 +107,9 @@ pub fn Library(
|
|||
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." }
|
||||
p { class: "empty-subtitle",
|
||||
"Import files or scan your root directories to get started."
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -153,12 +155,16 @@ pub fn Library(
|
|||
rsx! {
|
||||
// Confirmation dialog for single delete
|
||||
if confirm_delete.read().is_some() {
|
||||
div { class: "modal-overlay",
|
||||
div {
|
||||
class: "modal-overlay",
|
||||
onclick: move |_| confirm_delete.set(None),
|
||||
div { class: "modal",
|
||||
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." }
|
||||
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",
|
||||
|
|
@ -182,9 +188,11 @@ pub fn Library(
|
|||
|
||||
// Confirmation dialog for batch delete
|
||||
if *confirm_batch_delete.read() {
|
||||
div { class: "modal-overlay",
|
||||
div {
|
||||
class: "modal-overlay",
|
||||
onclick: move |_| confirm_batch_delete.set(false),
|
||||
div { class: "modal",
|
||||
div {
|
||||
class: "modal",
|
||||
onclick: move |e: Event<MouseData>| e.stop_propagation(),
|
||||
h3 { class: "modal-title", "Confirm Batch Delete" }
|
||||
p { class: "modal-body",
|
||||
|
|
@ -214,9 +222,11 @@ pub fn Library(
|
|||
|
||||
// Confirmation dialog for delete all
|
||||
if *confirm_delete_all.read() {
|
||||
div { class: "modal-overlay",
|
||||
div {
|
||||
class: "modal-overlay",
|
||||
onclick: move |_| confirm_delete_all.set(false),
|
||||
div { class: "modal",
|
||||
div {
|
||||
class: "modal",
|
||||
onclick: move |e: Event<MouseData>| e.stop_propagation(),
|
||||
h3 { class: "modal-title", "Delete All Media" }
|
||||
p { class: "modal-body",
|
||||
|
|
@ -248,12 +258,14 @@ pub fn Library(
|
|||
|
||||
// Batch tag dialog
|
||||
if *show_batch_tag.read() {
|
||||
div { class: "modal-overlay",
|
||||
div {
|
||||
class: "modal-overlay",
|
||||
onclick: move |_| {
|
||||
show_batch_tag.set(false);
|
||||
batch_tag_selection.set(Vec::new());
|
||||
},
|
||||
div { class: "modal",
|
||||
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",
|
||||
|
|
@ -322,12 +334,14 @@ pub fn Library(
|
|||
|
||||
// Batch collection dialog
|
||||
if *show_batch_collection.read() {
|
||||
div { class: "modal-overlay",
|
||||
div {
|
||||
class: "modal-overlay",
|
||||
onclick: move |_| {
|
||||
show_batch_collection.set(false);
|
||||
batch_collection_id.set(String::new());
|
||||
},
|
||||
div { class: "modal",
|
||||
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",
|
||||
|
|
@ -342,11 +356,7 @@ pub fn Library(
|
|||
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}"
|
||||
}
|
||||
option { key: "{col.id}", value: "{col.id}", "{col.name}" }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -497,9 +507,7 @@ pub fn Library(
|
|||
"Delete All"
|
||||
}
|
||||
}
|
||||
span { class: "text-muted text-sm",
|
||||
"{total_count} items"
|
||||
}
|
||||
span { class: "text-muted text-sm", "{total_count} items" }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -537,9 +545,7 @@ pub fn Library(
|
|||
"Showing {filtered_count} items"
|
||||
}
|
||||
}
|
||||
span { class: "text-muted text-sm",
|
||||
"Page {current_page + 1} of {total_pages}"
|
||||
}
|
||||
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
|
||||
|
|
@ -551,10 +557,13 @@ pub fn Library(
|
|||
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);
|
||||
}));
|
||||
handler
|
||||
.call(
|
||||
EventHandler::new(move |all_ids: Vec<String>| {
|
||||
selected_ids.set(all_ids);
|
||||
global_all_selected.set(true);
|
||||
}),
|
||||
);
|
||||
}
|
||||
},
|
||||
"Select all {total_count} items"
|
||||
|
|
@ -580,29 +589,45 @@ pub fn Library(
|
|||
match current_mode {
|
||||
ViewMode::Grid => rsx! {
|
||||
div { class: "media-grid",
|
||||
for (idx, item) in filtered_media.iter().enumerate() {
|
||||
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);
|
||||
|
||||
|
||||
|
||||
// Build a list of all visible IDs for shift+click range selection.
|
||||
|
||||
// Shift+click: select range from last_click_index to current idx.
|
||||
// No previous click, just toggle this one.
|
||||
|
||||
// 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.
|
||||
|
||||
// Thumbnail with CSS fallback: icon always
|
||||
// rendered, img overlays when available.
|
||||
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 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);
|
||||
|
|
@ -614,7 +639,6 @@ pub fn Library(
|
|||
}
|
||||
}
|
||||
} else {
|
||||
// No previous click, just toggle this one.
|
||||
if !ids.contains(&id) {
|
||||
ids.push(id.clone());
|
||||
}
|
||||
|
|
@ -624,12 +648,10 @@ pub fn Library(
|
|||
} 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 {
|
||||
|
|
@ -640,29 +662,15 @@ pub fn Library(
|
|||
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 { key: "{item.id}", class: "{card_class}", onclick: card_click,
|
||||
|
||||
div { class: "card-checkbox",
|
||||
input {
|
||||
r#type: "checkbox",
|
||||
checked: is_checked,
|
||||
onclick: toggle_id,
|
||||
}
|
||||
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)}"
|
||||
}
|
||||
div { class: "card-type-icon {badge_class}", "{type_icon(&media_type)}" }
|
||||
if has_thumb {
|
||||
img {
|
||||
class: "card-thumb-img",
|
||||
|
|
@ -674,18 +682,12 @@ pub fn Library(
|
|||
}
|
||||
|
||||
div { class: "card-info",
|
||||
div { class: "card-name", title: "{item.file_name}",
|
||||
"{item.file_name}"
|
||||
}
|
||||
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}"
|
||||
}
|
||||
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-artist text-muted text-xs", "{artist_text}" }
|
||||
}
|
||||
div { class: "card-meta",
|
||||
span { class: "type-badge {badge_class}", "{item.media_type}" }
|
||||
|
|
@ -751,7 +753,7 @@ pub fn Library(
|
|||
}
|
||||
}
|
||||
tbody {
|
||||
for (idx, item) in filtered_media.iter().enumerate() {
|
||||
for (idx , item) in filtered_media.iter().enumerate() {
|
||||
{
|
||||
let id = item.id.clone();
|
||||
let artist = item.artist.clone().unwrap_or_default();
|
||||
|
|
@ -759,15 +761,17 @@ pub fn Library(
|
|||
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 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);
|
||||
|
|
@ -789,17 +793,14 @@ pub fn Library(
|
|||
} 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>| {
|
||||
|
|
@ -807,7 +808,6 @@ pub fn Library(
|
|||
confirm_delete.set(Some(id.clone()));
|
||||
}
|
||||
};
|
||||
|
||||
let thumb_url = if item.has_thumbnail {
|
||||
format!("{}/api/v1/media/{}/thumbnail", server_url, item.id)
|
||||
} else {
|
||||
|
|
@ -815,24 +815,13 @@ pub fn Library(
|
|||
};
|
||||
let has_thumb = item.has_thumbnail;
|
||||
let media_type_str = item.media_type.clone();
|
||||
|
||||
rsx! {
|
||||
tr {
|
||||
key: "{item.id}",
|
||||
onclick: row_click,
|
||||
tr { key: "{item.id}", onclick: row_click,
|
||||
td {
|
||||
input {
|
||||
r#type: "checkbox",
|
||||
checked: is_checked,
|
||||
onclick: toggle_id,
|
||||
}
|
||||
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)}"
|
||||
}
|
||||
span { class: "table-type-icon {badge_class}", "{type_icon(&media_type_str)}" }
|
||||
if has_thumb {
|
||||
img {
|
||||
class: "table-thumb table-thumb-overlay",
|
||||
|
|
@ -849,11 +838,7 @@ pub fn Library(
|
|||
td { "{artist}" }
|
||||
td { "{size}" }
|
||||
td {
|
||||
button {
|
||||
class: "btn btn-danger btn-sm",
|
||||
onclick: delete_click,
|
||||
"Delete"
|
||||
}
|
||||
button { class: "btn btn-danger btn-sm", onclick: delete_click, "Delete" }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue