Rework article list

src/frontend/components/editor.rs

@@ -15,18 +15,16 @@ pub fn EditorView(
     view! {
         <div class="my-4">
             <textarea
-                value=content
+                prop:value=content
                 placeholder="Article text..."
-                class="textarea textarea-primary min-w-full min-h-80 resize-none"
+                class="textarea textarea-primary min-w-full min-h-80 resize-none text-base"
                 on:input=move |evt| {
                     let val = event_target_value(&evt);
                     set_preview.set(render_markdown(&val));
                     set_content.set(val);
                 }
                 node_ref=textarea_ref
-            >
+            ></textarea>
-                {content.get()}
-            </textarea>
             <button
                 class="btn btn-secondary my-4"
                 on:click=move |_| { set_show_preview.update(|s| *s = !*s) }
@@ -34,7 +32,7 @@ pub fn EditorView(
                 Preview
             </button>
             <Show when=move || { show_preview.get() }>
-                <div id="preview" inner_html=move || preview.get()></div>
+                <div class="prose prose-slate" inner_html=move || preview.get()></div>
             </Show>
             <div>
                 <a class="link link-secondary" href="https://commonmark.org/help/" target="blank_">

src/frontend/pages/article/list.rs

@@ -2,12 +2,14 @@ use crate::{
     common::ListArticlesForm,
     frontend::{app::GlobalState, article_link, article_title},
 };
+use html::Input;
 use leptos::*;
-use web_sys::wasm_bindgen::JsCast;
 
 #[component]
 pub fn ListArticles() -> impl IntoView {
     let (only_local, set_only_local) = create_signal(false);
+    let button_only_local = create_node_ref::<Input>();
+    let button_all = create_node_ref::<Input>();
     let articles = create_resource(
         move || only_local.get(),
         |only_local| async move {
@@ -23,33 +25,31 @@ pub fn ListArticles() -> impl IntoView {
     view! {
         <h1 class="text-4xl font-bold font-serif my-4">Most recently edited Articles</h1>
         <Suspense fallback=|| view! { "Loading..." }>
-            <fieldset
+            <div class="divide-x">
-                class="flex flex-row"
-                on:input=move |ev| {
-                    let val = ev
-                        .target()
-                        .unwrap()
-                        .unchecked_into::<web_sys::HtmlInputElement>()
-                        .id();
-                    let is_local_only = val == "only-local";
-                    set_only_local.update(|p| *p = is_local_only);
-                }
-            >
-                <label class="label cursor-pointer max-w-32">
-                    <span>Only Local</span>
-                    <input type="radio" name="listing-type" class="radio checked:bg-primary" />
-                </label>
-                <label class="label cursor-pointer max-w-32">
-                    <span>All</span>
                 <input
-                        type="radio"
+                    type="button"
-                        name="listing-type"
+                    value="Only Local"
-                        class="radio checked:bg-primary"
+                    class="btn rounded-r-none"
-                        checked="checked"
+                    node_ref=button_only_local
+                    on:click=move |_| {
+                        button_all.get().map(|c| c.class("btn-primary", false));
+                        button_only_local.get().map(|c| c.class("btn-primary", true));
+                        set_only_local.set(true);
+                    }
                 />
-                </label>
+                <input
-            </fieldset>
+                    type="button"
-            <ul class="list-disc">
+                    value="All"
+                    class="btn btn-primary rounded-l-none"
+                    node_ref=button_all
+                    on:click=move |_| {
+                        button_all.get().map(|c| c.class("btn-primary", true));
+                        button_only_local.get().map(|c| c.class("btn-primary", false));
+                        set_only_local.set(false);
+                    }
+                />
+            </div>
+            <ul class="list-none my-4">
                 {move || {
                     articles
                         .get()
@@ -58,7 +58,7 @@ pub fn ListArticles() -> impl IntoView {
                                 .map(|a| {
                                     view! {
                                         <li>
-                                            <a class="link link-secondary" href=article_link(&a)>
+                                            <a class="link text-lg" href=article_link(&a)>
                                                 {article_title(&a)}
                                             </a>
                                         </li>