node page

3 files changed, 87 insertions, 0 deletions

diff --git a/ui/src/components/mod.rs b/ui/src/components/mod.rs
index cb9ec1b..3c51535 100644
--- a/ui/src/components/mod.rs
+++ b/ui/src/components/mod.rs
@@ -7,6 +7,8 @@
 pub mod admin;
 pub mod login;
 pub mod message;
+pub mod node_card;
+pub mod node_list;
 pub mod node_page;
 pub mod props;
 pub mod stats;
@@ -17,6 +19,7 @@ use crate::{
         admin::{AdminDashboard, AdminImport},
         login::{AccountLogin, AccountLogout, AccountSetPassword},
         message::Message,
+        node_list::NodeList,
         node_page::NodePage,
     },
 };
@@ -31,6 +34,9 @@ define! {
         @if let Some(nku) = view.get(VIEW_NODE_PAGE) {
             @NodePage { ri, nku }
         }
+        @if let Some(nl) = view.get(VIEW_NODE_LIST) {
+            @NodeList { ri, nl }
+        }
         @if let Some(()) = view.get(VIEW_ACCOUNT_LOGIN) {
             @AccountLogin { ri }
         }
diff --git a/ui/src/components/node_card.rs b/ui/src/components/node_card.rs
new file mode 100644
index 0000000..00382c8
--- /dev/null
+++ b/ui/src/components/node_card.rs
@@ -0,0 +1,65 @@
+/*
+    This file is part of jellything (https://codeberg.org/metamuffin/jellything)
+    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+    Copyright (C) 2026 metamuffin <metamuffin.org>
+*/
+
+use crate::{
+    RenderInfo,
+    components::{node_page::aspect_class, props::Props},
+};
+use jellycommon::{
+    jellyobject::Object,
+    routes::{u_image, u_node_slug, u_node_slug_player},
+    *,
+};
+
+markup::define! {
+    NodeCard<'a>(ri: &'a RenderInfo<'a>, nku: Object<'a>) {
+        @let node = nku.get(NKU_NODE).unwrap_or_default();
+        @let slug = node.get(NO_SLUG).unwrap_or_default();
+        @let cls = format!("node card poster {}", aspect_class(node));
+        div[class=cls] {
+            .poster {
+                a[href=u_node_slug(&slug)] {
+                    img[src=u_image(node.get(NO_PICTURES).unwrap_or_default().get(PICT_COVER).unwrap_or_default(), 512), loading="lazy"];
+                }
+                .cardhover.item {
+                    // @if node.media.is_some() {
+                        a.play.icon[href=u_node_slug_player(&slug)] { "play_arrow" }
+                    // }
+                    @Props { ri, nku: *nku, full: false }
+                }
+            }
+            div.title {
+                a[href=u_node_slug(&slug)] {
+                    @node.get(NO_TITLE)
+                }
+            }
+            div.subtitle {
+                span {
+                    @node.get(NO_SUBTITLE)
+                }
+            }
+        }
+    }
+    NodeCardWide<'a>(ri: &'a RenderInfo<'a>, nku: Object<'a>) {
+        div[class="node card widecard poster"] {
+            // div[class=&format!("poster {}", aspect_class(node.kind))] {
+            //     a[href=u_node_slug(&node.slug)] {
+            //         img[src=u_node_image(&node.slug, PictureSlot::Cover, 512), loading="lazy"];
+            //     }
+            //     .cardhover.item {
+            //         @if node.media.is_some() {
+            //             a.play.icon[href=u_node_slug_player(&node.slug)] { "play_arrow" }
+            //         }
+            //     }
+            // }
+            // div.details {
+            //     a.title[href=u_node_slug(&node.slug)] { @node.title }
+            //     @Props { node, udata, full: false, lang }
+            //     span.overview { @node.description }
+            // }
+        }
+    }
+}
diff --git a/ui/src/components/node_list.rs b/ui/src/components/node_list.rs
index e69de29..c3571de 100644
--- a/ui/src/components/node_list.rs
+++ b/ui/src/components/node_list.rs
@@ -0,0 +1,16 @@
+/*
+    This file is part of jellything (https://codeberg.org/metamuffin/jellything)
+    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+    Copyright (C) 2026 metamuffin <metamuffin.org>
+*/
+
+use crate::{RenderInfo, components::node_card::NodeCard};
+use jellycommon::{jellyobject::Object, *};
+
+markup::define! {
+    NodeList<'a>(ri: &'a RenderInfo<'a>, nl: Object<'a>) {
+        ul.nodelist { @for nku in nl.iter(NODELIST_ITEM) {
+            li { @NodeCard { ri, nku } }
+        }}
+    }
+}