From b6a09eb0775a9e14a0df4d2f5fe17386a21b8a44 Mon Sep 17 00:00:00 2001
From: BrewingWeasel <weeaseled@gmail.com>
Date: Sun, 5 Nov 2023 17:09:34 -0500
Subject: [PATCH 1/2] feat: show grammatical info of word

---
 src-ui/src/reader.rs | 60 ++++++++++++++++++++++++++++++++------------
 src-ui/style.css     |  2 +-
 2 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/src-ui/src/reader.rs b/src-ui/src/reader.rs
index 1f4bb27..80dbccf 100644
--- a/src-ui/src/reader.rs
+++ b/src-ui/src/reader.rs
@@ -131,17 +131,29 @@ pub fn ReaderView(settings: Resource<(), Settings>) -> impl IntoView {
             </form>
         </div>
         <div class="sentence">
-             {move || conts.get().map_or_else(|| view! { <p>"Loading..."</p> }.into_view(), |data| data.into_iter()
-                         .enumerate()
-                         .map(|(i, d)| view! { <Word word=d i=i word_selector=set_selected_word/> })
-                         .collect::<Vec<_>>()
-                         .into_view())}
+            {move || {
+                conts
+                    .get()
+                    .map_or_else(
+                        || view! { <p>"Loading..."</p> }.into_view(),
+                        |data| {
+                            data.into_iter()
+                                .enumerate()
+                                .map(|(i, d)| {
+                                    view! { <Word word=d i=i word_selector=set_selected_word/> }
+                                })
+                                .collect::<Vec<_>>()
+                                .into_view()
+                        },
+                    )
+            }}
+
         </div>
         <br/>
-        <div class="wordinfo">
-            {move || {
-                if selected_word().is_some() {
-                    view! {
+        {move || {
+            if selected_word().is_some() {
+                view! {
+                    <div class="wordinfo">
                         <input
                             class="selectedword"
                             type="text"
@@ -168,14 +180,30 @@ pub fn ReaderView(settings: Resource<(), Settings>) -> impl IntoView {
                                     .map(|v| v.lemma)
                             }
                         />
-                    }
-                        .into_view()
-                } else {
-                    view! {}.into_view()
-                }
-            }}
+                    </div>
 
-        </div>
+                    <br/>
+
+                    <div class="grammarinfo">
+                        {move || {
+                            conts
+                                .get()
+                                .unwrap()[selected_word().unwrap()]
+                                .morph
+                                .iter()
+                                .map(|(k, v)| {
+                                    view! { <span class=k>{k}</span><span>: </span><span class=v>{v}</span> }
+                                })
+                                .collect_view()
+                        }}
+
+                    </div>
+                }
+                    .into_view()
+            } else {
+                view! {}.into_view()
+            }
+        }}
 
         <Suspense fallback=move || {
             view! { <p>"Loading..."</p> }
diff --git a/src-ui/style.css b/src-ui/style.css
index 18ddb67..937a34b 100644
--- a/src-ui/style.css
+++ b/src-ui/style.css
@@ -151,7 +151,7 @@ select {
 /* GENERAL STUFF */
 
 
-.sentence, .wordinfo, .definition, .export {
+.sentence, .wordinfo, .definition, .export, .grammarinfo {
   display: flex;
   justify-content: center;
 }

From 1aa556b5a313e214403b40193185b22cf67d7cb7 Mon Sep 17 00:00:00 2001
From: BrewingWeasel <weeaseled@gmail.com>
Date: Sun, 5 Nov 2023 17:30:27 -0500
Subject: [PATCH 2/2] feat: add styling to grammar features

---
 src-ui/src/reader.rs |  5 ++---
 src-ui/style.css     | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src-ui/src/reader.rs b/src-ui/src/reader.rs
index 80dbccf..be58106 100644
--- a/src-ui/src/reader.rs
+++ b/src-ui/src/reader.rs
@@ -182,8 +182,6 @@ pub fn ReaderView(settings: Resource<(), Settings>) -> impl IntoView {
                         />
                     </div>
 
-                    <br/>
-
                     <div class="grammarinfo">
                         {move || {
                             conts
@@ -192,12 +190,13 @@ pub fn ReaderView(settings: Resource<(), Settings>) -> impl IntoView {
                                 .morph
                                 .iter()
                                 .map(|(k, v)| {
-                                    view! { <span class=k>{k}</span><span>: </span><span class=v>{v}</span> }
+                                    view! { <div class="grammarfeature"><span class=k>{k}</span><span class="seperator">:</span><span class=v>{v}</span></div> }
                                 })
                                 .collect_view()
                         }}
 
                     </div>
+                    <hr/>
                 }
                     .into_view()
             } else {
diff --git a/src-ui/style.css b/src-ui/style.css
index 937a34b..3da13cc 100644
--- a/src-ui/style.css
+++ b/src-ui/style.css
@@ -156,6 +156,20 @@ select {
   justify-content: center;
 }
 
+.grammarinfo {
+  font-size: 18px;
+  font-style: italic;
+  color: #908caa;
+}
+
+.seperator {
+  padding-right: 0.3em;
+}
+
+.grammarfeature {
+  padding: 0em 0.4em;
+}
+
 .sentsubmit {
   width: 80%;
   height: 3em;