web: add graphic when search results are empty

web/src/view/mod.rs

@@ -263,81 +263,93 @@ fn search_results(
     } else {
         set_title(query);
     }
-    let rows = results.iter().map(|r| {
+    let rows: Vec<_> = results
-        let tid = r.thread.clone();
+        .iter()
-        let check_tid = r.thread.clone();
+        .map(|r| {
-        let datetime = human_age(r.timestamp as i64);
+            let tid = r.thread.clone();
-        let unread_idx = r.tags.iter().position(|e| e == &"unread");
+            let check_tid = r.thread.clone();
-        let mut tags = r.tags.clone();
+            let datetime = human_age(r.timestamp as i64);
-        if let Some(idx) = unread_idx {
+            let unread_idx = r.tags.iter().position(|e| e == &"unread");
-            tags.remove(idx);
+            let mut tags = r.tags.clone();
-        };
+            if let Some(idx) = unread_idx {
-        let is_unread = unread_idx.is_some();
+                tags.remove(idx);
-        let mut title_break = None;
+            };
-        const TITLE_LENGTH_WRAP_LIMIT: usize = 40;
+            let is_unread = unread_idx.is_some();
-        for w in r.subject.split_whitespace() {
+            let mut title_break = None;
-            if w.len() > TITLE_LENGTH_WRAP_LIMIT {
+            const TITLE_LENGTH_WRAP_LIMIT: usize = 40;
-                title_break = Some(C!["break-all", "text-pretty"]);
+            for w in r.subject.split_whitespace() {
+                if w.len() > TITLE_LENGTH_WRAP_LIMIT {
+                    title_break = Some(C!["break-all", "text-pretty"]);
+                }
             }
-        }
-        div![
-            C![
-                "flex",
-                "flex-nowrap",
-                "w-auto",
-                "flex-auto",
-                "py-4",
-                "border-b",
-                "border-neutral-800"
-            ],
             div![
-                C!["flex", "items-center", "mr-4"],
+                C![
-                input![
+                    "flex",
-                    C![&tw_classes::CHECKBOX],
+                    "flex-nowrap",
-                    attrs! {
+                    "w-auto",
-                        At::Type=>"checkbox",
+                    "flex-auto",
-                        At::Checked=>selected_threads.contains(&tid).as_at_value(),
+                    "py-4",
-                    }
+                    "border-b",
+                    "border-neutral-800"
                 ],
-                ev(Ev::Input, move |e| {
-                    if let Some(input) = e
-                        .target()
-                        .as_ref()
-                        .expect("failed to get reference to target")
-                        .dyn_ref::<web_sys::HtmlInputElement>()
-                    {
-                        if input.checked() {
-                            Msg::SelectionAddThread(check_tid)
-                        } else {
-                            Msg::SelectionRemoveThread(check_tid)
-                        }
-                    } else {
-                        Msg::Noop
-                    }
-                }),
-            ],
-            a![
-                C!["flex-grow"],
-                IF!(is_unread => C!["font-bold"]),
-                attrs! {
-                    At::Href => urls::thread(&tid)
-                },
-                div![title_break, &r.subject],
-                span![C!["text-xs"], pretty_authors(&r.authors)],
                 div![
-                    C!["flex", "flex-wrap", "justify-between"],
+                    C!["flex", "items-center", "mr-4"],
-                    span![tags_chiclet(&tags)],
+                    input![
-                    span![C!["text-sm"], datetime]
+                        C![&tw_classes::CHECKBOX],
+                        attrs! {
+                            At::Type=>"checkbox",
+                            At::Checked=>selected_threads.contains(&tid).as_at_value(),
+                        }
+                    ],
+                    ev(Ev::Input, move |e| {
+                        if let Some(input) = e
+                            .target()
+                            .as_ref()
+                            .expect("failed to get reference to target")
+                            .dyn_ref::<web_sys::HtmlInputElement>()
+                        {
+                            if input.checked() {
+                                Msg::SelectionAddThread(check_tid)
+                            } else {
+                                Msg::SelectionRemoveThread(check_tid)
+                            }
+                        } else {
+                            Msg::Noop
+                        }
+                    }),
+                ],
+                a![
+                    C!["flex-grow"],
+                    IF!(is_unread => C!["font-bold"]),
+                    attrs! {
+                        At::Href => urls::thread(&tid)
+                    },
+                    div![title_break, &r.subject],
+                    span![C!["text-xs"], pretty_authors(&r.authors)],
+                    div![
+                        C!["flex", "flex-wrap", "justify-between"],
+                        span![tags_chiclet(&tags)],
+                        span![C!["text-sm"], datetime]
+                    ]
                 ]
             ]
+        })
+        .collect();
+    let content = if rows.is_empty() {
+        div![
+            C!["text-center"],
+            h1![C!["text-9xl"], "🥳"],
+            p![C!["mt-8", "text-3xl", "font-semibold"], "All caught up!"]
         ]
-    });
+    } else {
+        div![rows]
+    };
     let show_bulk_edit = !selected_threads.is_empty();
     let all_selected = selected_threads.len() == results.len();
     div![
         C!["flex", "flex-col", "flex-auto", "p-4"],
         search_toolbar(count, pager, show_bulk_edit, all_selected),
-        div![rows],
+        content,
         search_toolbar(count, pager, show_bulk_edit, all_selected),
     ]
 }