fix(ui): prevent panic on unwrap when selected torrent is None

frontend/src/components/demos/mod.rs

@@ -0,0 +1 @@
+pub mod demo_shimmer;

frontend/src/components/hooks/use_random.rs

@@ -1,5 +1,31 @@
-use leptos::prelude::*;
+use std::collections::hash_map::DefaultHasher;
+use std::hash::{Hash, Hasher};
+use std::sync::atomic::{AtomicUsize, Ordering};
 
-pub fn use_random_id_for(prefix: &str) -> String {
-    format!("{}_{}", prefix, js_sys::Math::random().to_string().replace(".", ""))
+const PREFIX: &str = "rust_ui"; // Must NOT contain "/" or "-"
+
+pub fn use_random_id() -> String {
+    format!("_{PREFIX}_{}", generate_hash())
+}
+
+pub fn use_random_id_for(element: &str) -> String {
+    format!("{}_{PREFIX}_{}", element, generate_hash())
+}
+
+pub fn use_random_transition_name() -> String {
+    let random_id = use_random_id();
+    format!("view-transition-name: {random_id}")
+}
+
+/* ========================================================== */
+/*                     ✨ FUNCTIONS ✨                        */
+/* ========================================================== */
+
+static COUNTER: AtomicUsize = AtomicUsize::new(1);
+
+fn generate_hash() -> u64 {
+    let mut hasher = DefaultHasher::new();
+    let counter = COUNTER.fetch_add(1, Ordering::SeqCst);
+    counter.hash(&mut hasher);
+    hasher.finish()
 }

frontend/src/components/mod.rs

@@ -5,3 +5,4 @@ pub mod torrent;
 pub mod auth;
 // pub mod toast; (Removed)
 pub mod ui;
+pub mod demos;

frontend/src/components/torrent/details.rs

@@ -35,13 +35,13 @@ pub fn TorrentDetailsSheet() -> impl IntoView {
                     <div class="flex flex-col gap-1 min-w-0">
                         <Show when=move || selected_torrent.get().is_some() fallback=move || view! { <Skeleton class="h-6 w-48" /> }>
                             <h2 class="font-bold text-lg truncate">
-                                {move || selected_torrent.get().unwrap().name}
+                                {move || selected_torrent.get().map(|t| t.name).unwrap_or_default()}
                             </h2>
                         </Show>
                         <Show when=move || selected_torrent.get().is_some() fallback=move || view! { <Skeleton class="h-4 w-24" /> }>
                             <p class="text-xs text-muted-foreground uppercase tracking-widest font-semibold flex items-center gap-2">
-                                {move || format!("{:?}", selected_torrent.get().unwrap().status)}
-                                <span class="bg-primary/20 text-primary px-1.5 py-0.5 rounded text-[10px] lowercase">{move || format!("{:.1}%", selected_torrent.get().unwrap().percent_complete)}</span>
+                                {move || selected_torrent.get().map(|t| format!("{:?}", t.status)).unwrap_or_default()}
+                                <span class="bg-primary/20 text-primary px-1.5 py-0.5 rounded text-[10px] lowercase">{move || selected_torrent.get().map(|t| format!("{:.1}%", t.percent_complete)).unwrap_or_default()}</span>
                             </p>
                         </Show>
                     </div>

frontend/src/components/ui/card.rs

@@ -3,13 +3,17 @@ use leptos_ui::clx;
 
 mod components {
     use super::*;
-
     clx! {Card, div, "bg-card text-card-foreground flex flex-col gap-4 rounded-xl border py-6 shadow-sm"}
-    clx! {CardHeader, div, "@container/card-header flex flex-col items-start gap-1.5 px-6 [.border-b]:pb-6"}
+    // TODO. Change data-slot=card-action by data-name="CardAction".
+    clx! {CardHeader, div, "@container/card-header flex flex-col items-start gap-1.5 px-6 [.border-b]:pb-6 sm:grid sm:auto-rows-min sm:grid-rows-[auto_auto] has-data-[slot=card-action]:sm:grid-cols-[1fr_auto]"}
     clx! {CardTitle, h2, "leading-none font-semibold"}
     clx! {CardContent, div, "px-6"}
     clx! {CardDescription, p, "text-muted-foreground text-sm"}
     clx! {CardFooter, footer, "flex items-center px-6 [.border-t]:pt-6", "gap-2"}
+
+    clx! {CardAction, div, "self-start sm:col-start-2 sm:row-span-2 sm:row-start-1 sm:justify-self-end"}
+    clx! {CardList, ul, "flex flex-col gap-4"}
+    clx! {CardItem, li, "flex items-center [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0"}
 }
 
 pub use components::*;