From d01e1cac586537a795460fb988faa0bf95376a38 Mon Sep 17 00:00:00 2001
From: GlooriousWalrus <glooriouswalrus@protonmail.com>
Date: Sun, 5 Nov 2023 23:17:56 +0200
Subject: [PATCH] WIP: button slide fix, select-all for output, navbar
 improvements, about tab

---
 Cargo.lock                                    |  77 +++++++++++++
 site/Cargo.toml                               |   3 +-
 site/src/app.rs                               |  84 +++++++-------
 site/src/pages/{example.rs => about.rs}       |  60 +++++-----
 site/src/pages/mod.rs                         |   4 +-
 site/src/pages/{home.rs => transliterator.rs} | 105 +++++++++++++-----
 6 files changed, 234 insertions(+), 99 deletions(-)
 rename site/src/pages/{example.rs => about.rs} (74%)
 rename site/src/pages/{home.rs => transliterator.rs} (58%)

diff --git a/Cargo.lock b/Cargo.lock
index 3461a9d..4866561 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -37,6 +37,21 @@ dependencies = [
  "memchr",
 ]
 
+[[package]]
+name = "android-tzdata"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e999941b234f3131b00bc13c22d06e8c5ff726d1b6318ac7eb276997bbb4fef0"
+
+[[package]]
+name = "android_system_properties"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "819e7219dbd41043ac279b19830f2efc897156490d7fd6ea916720117ee66311"
+dependencies = [
+ "libc",
+]
+
 [[package]]
 name = "anyhow"
 version = "1.0.75"
@@ -194,6 +209,20 @@ version = "1.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
 
+[[package]]
+name = "chrono"
+version = "0.4.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7f2c685bad3eb3d45a01354cedb7d5faa66194d1d58ba6e267a8de788f79db38"
+dependencies = [
+ "android-tzdata",
+ "iana-time-zone",
+ "js-sys",
+ "num-traits",
+ "wasm-bindgen",
+ "windows-targets",
+]
+
 [[package]]
 name = "ciborium"
 version = "0.2.1"
@@ -296,6 +325,12 @@ dependencies = [
  "unicode-segmentation",
 ]
 
+[[package]]
+name = "core-foundation-sys"
+version = "0.8.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e496a50fda8aacccc86d7529e2c1e0892dbd0f898a6b5645b5561b89c3210efa"
+
 [[package]]
 name = "derive-where"
 version = "1.2.5"
@@ -603,6 +638,29 @@ dependencies = [
  "want",
 ]
 
+[[package]]
+name = "iana-time-zone"
+version = "0.1.58"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8326b86b6cff230b97d0d312a6c40a60726df3332e721f72a1b035f451663b20"
+dependencies = [
+ "android_system_properties",
+ "core-foundation-sys",
+ "iana-time-zone-haiku",
+ "js-sys",
+ "wasm-bindgen",
+ "windows-core",
+]
+
+[[package]]
+name = "iana-time-zone-haiku"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f31827a206f56af32e590ba56d5d2d085f558508192593743f16b2306495269f"
+dependencies = [
+ "cc",
+]
+
 [[package]]
 name = "idna"
 version = "0.4.0"
@@ -714,6 +772,7 @@ dependencies = [
 name = "leptos-tw-site"
 version = "0.2.0"
 dependencies = [
+ "chrono",
  "console_error_panic_hook",
  "console_log",
  "leptos",
@@ -1004,6 +1063,15 @@ dependencies = [
  "minimal-lexical",
 ]
 
+[[package]]
+name = "num-traits"
+version = "0.2.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "39e3200413f237f41ab11ad6d161bc7239c84dcb631773ccd7de3dfe4b5c267c"
+dependencies = [
+ "autocfg",
+]
+
 [[package]]
 name = "object"
 version = "0.32.1"
@@ -1948,6 +2016,15 @@ version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
 
+[[package]]
+name = "windows-core"
+version = "0.51.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f1f8cf84f35d2db49a46868f947758c7a1138116f7fac3bc844f43ade1292e64"
+dependencies = [
+ "windows-targets",
+]
+
 [[package]]
 name = "windows-sys"
 version = "0.48.0"
diff --git a/site/Cargo.toml b/site/Cargo.toml
index d1cc043..c4c0570 100644
--- a/site/Cargo.toml
+++ b/site/Cargo.toml
@@ -12,6 +12,7 @@ leptos_meta = { version = "0.5", features = ["csr", "nightly"] }
 leptos_router = { version = "0.5", features = ["csr", "nightly"] }
 log = "0.4"
 wasm-bindgen = "0.2"
-web-sys = { version = "0.3", features = ["Window", "Clipboard", "Navigator", "Element"] }
+web-sys = { version = "0.3", features = ["Window", "Clipboard", "Navigator", "Element", "DateTimeValue"] }
 wana_kana = { path = "../wana_kana_rust" }
 wasm-bindgen-futures = "0.4"
+chrono = { version = "*", features = ["wasmbind"]}
\ No newline at end of file
diff --git a/site/src/app.rs b/site/src/app.rs
index 2c55d0c..91a1a10 100644
--- a/site/src/app.rs
+++ b/site/src/app.rs
@@ -1,3 +1,5 @@
+use chrono::prelude::*;
+
 use leptos::{logging::log, *};
 use leptos_meta::*;
 use leptos_router::*;
@@ -8,10 +10,10 @@ use leptos_tw_ui::components::{
 };
 
 use crate::{
-    pages::home::Home,
+    pages::{transliterator::Transliterator, about::ExamplePage},
     theme::{
         default_page_class, MenuBarVariant, MenuHeaderVariant,
-        ToggleSwitchClassVariant,
+        ToggleSwitchClassVariant, ButtonVariant,
     },
 };
 
@@ -25,9 +27,8 @@ pub fn App() -> impl IntoView {
             <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
             <Router>
                 <Routes>
-                    <Route path="/" view=move || view! { <Home/> }/>
-                    // <Route path="/counter" view=move || view! { <Counter/> }/>
-                    // <Route path="/example" view=move || view! { <ExamplePage/> }/>
+                    <Route path="/" view=move || view! { <Transliterator/> }/>
+                    <Route path="/about" view=move || view! { <ExamplePage/> }/>
                 </Routes>
             </Router>
         </Layout>
@@ -40,7 +41,7 @@ pub fn Layout(children: Children) -> impl IntoView {
         <LayoutWrapper>
             <Menu />
             {children()}
-            // <Footer />
+            <Footer />
         </LayoutWrapper>
     }
 }
@@ -65,23 +66,22 @@ fn Menu() -> impl IntoView {
         <MenuHeader variant={MenuHeaderVariant::Default.get()}>
             <MenuBar variant={MenuBarVariant::Default.get()}>
                     <div class="flex items-center justify-between">
-                        <span class="flex-none font-weight-20 text-3xl text-blue-800 dark:text-gray-200">Коваль</span>
+                        <span class="select-none flex-none font-weight-20 text-3xl text-blue-800 dark:text-gray-200">Коваль
+                            <span class="text-sm block">{"Транслітерація японськіх імен"}</span>
+                        </span>
                         <div class="sm:hidden">
                             <MenuToggleButton on_change=set_active class="focus:outline-none p-1"
                                 icon_class="w-7 h-7 fill-gray-700 hover:fill-gray-500 dark:fill-gray-300 dark:hover:fill-gray-100 dark:hover:outline rounded-2xl" />
                         </div>
                     </div>
                     <div class={move || match active(){ true => "transition-all duration-300 basis-full grow sm:block", false => "hidden transition-all duration-300 basis-full grow sm:block"}}>
-                        <div class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:pl-5">
-                            // <LinkButton href="/" variant={ButtonVariant::Ghost.get()}>
-                            //     Home
-                            // </LinkButton>
-                            // <LinkButton href="/counter" variant={ButtonVariant::Ghost.get()}>
-                            //     Counter
-                            // </LinkButton>
-                            // <LinkButton href="/example" variant={ButtonVariant::Ghost.get()}>
-                            //     Examples
-                            // </LinkButton>
+                        <div class="select-none flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:pl-5">
+                            <LinkButton href="/" variant={ButtonVariant::Ghost.get()}>
+                                Транслітерація
+                            </LinkButton>
+                            <LinkButton href="/about" variant={ButtonVariant::Ghost.get()}>
+                                Про Коваль
+                            </LinkButton>
                             <ThemeToggleSwitch mode_fn={theme_mode} class={ToggleSwitchClassVariant::Encased.get()} />
                         </div>
                     </div>
@@ -93,33 +93,37 @@ fn Menu() -> impl IntoView {
 // Sticky footer
 #[component]
 fn Footer() -> impl IntoView {
+
+    let year = Local::now().year();
+
     view! {
         <footer class="fixed bottom-0 left-0 z-20 w-full p-4 bg-white border-t border-gray-200 shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-slate-900 dark:border-gray-600">
-            <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">{"© 2023 "} <a href="https://example.com/" class="hover:underline">{"Footer™"}</a>. All Rights Reserved.
+            <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">{ format!("© {} ", year) } 
+                <a href="https://github.com/GlooriousWalrus" class="hover:underline">{"GlooriousWalrus"}</a>
             </span>
-            <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
-                <li>
-                    <LinkButton href="#" class="mr-4 hover:underline md:mr-6">
-                        About
-                    </LinkButton>
-                </li>
-                <li>
-                    <LinkButton href="#" class="mr-4 hover:underline md:mr-6">
-                        Privacy Policy
-                    </LinkButton>
-                </li>
-                <li>
-                    <LinkButton href="#" class="mr-4 hover:underline md:mr-6">
-                        Licensing
-                    </LinkButton>
-                </li>
-                <li>
-                    <LinkButton href="#" class="mr-4 hover:underline md:mr-6">
-                       Contact
-                    </LinkButton>
+            // <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
+            //     <li>
+            //         <LinkButton href="#" class="mr-4 hover:underline md:mr-6">
+            //             About
+            //         </LinkButton>
+            //     </li>
+            //     <li>
+            //         <LinkButton href="#" class="mr-4 hover:underline md:mr-6">
+            //             Privacy Policy
+            //         </LinkButton>
+            //     </li>
+            //     <li>
+            //         <LinkButton href="#" class="mr-4 hover:underline md:mr-6">
+            //             Licensing
+            //         </LinkButton>
+            //     </li>
+            //     <li>
+            //         <LinkButton href="#" class="mr-4 hover:underline md:mr-6">
+            //            Contact
+            //         </LinkButton>
 
-                </li>
-            </ul>
+            //     </li>
+            // </ul>
         </footer>
     }
 }
diff --git a/site/src/pages/example.rs b/site/src/pages/about.rs
similarity index 74%
rename from site/src/pages/example.rs
rename to site/src/pages/about.rs
index 9716c71..fbdc575 100644
--- a/site/src/pages/example.rs
+++ b/site/src/pages/about.rs
@@ -13,15 +13,15 @@ use std::ops::Not;
 #[component]
 pub fn ExamplePage() -> impl IntoView {
     view! {
-        <Title text="Leptos + Tailwindcss | Examples"/>
-        <Main id="main" class="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto pb-[100px] text-gray-900 dark:text-gray-400">
-            <div>
-                //   <!-- Announcement Banner -->
-                <Typography variant=TypographyVariant::H1 class={TypographyClass::H1.get()}>Examples with Explanations</Typography>
-                //   <!-- End Announcement Banner -->
-            </div>
-            <DarkModeSection/>
-            <ButtonSection/>
+        <Title text="Коваль | Про Коваль"/>
+        <Main id="main" class="max-w-[85rem] h-screen px-4 py-4 sm:px-6 lg:px-8 mx-auto text-gray-900 dark:text-gray-400">
+            // <div>
+            //     //   <!-- Announcement Banner -->
+            //     <Typography variant=TypographyVariant::H1 class={TypographyClass::H1.get()}>Examples with Explanations</Typography>
+            //     //   <!-- End Announcement Banner -->
+            // </div>
+            // <DarkModeSection/>
+            // <ButtonSection/>
             <TypographySection/>
         </Main>
         // An empty Fragment is not created on the DOM
@@ -78,28 +78,30 @@ fn ButtonSection() -> impl IntoView {
 #[component]
 fn TypographySection() -> impl IntoView {
     view! {
-        <section class="max-w-[70rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto">
-            <Typography variant=TypographyVariant::H2 class={TypographyClass::H2.get()}>Typography</Typography>
+        <section class="max-w-[70rem] sm:mt-16 px-4 py-4 sm:px-6 lg:px-8 mx-auto py-auto">
+            // <Typography variant=TypographyVariant::H2 class={TypographyClass::H2.get()}>Про Коваль</Typography>
             <div class="border rounded-xl shadow-sm  border-blue-600 dark:bg-slate-800 dark:border-slate-600 p-5 mt-3">
-                <Typography variant=TypographyVariant::H1 class={TypographyClass::H1.get()}>H1</Typography>
-                <Typography variant=TypographyVariant::H2 class={TypographyClass::H2.get()}>H2</Typography>
-                <Typography variant=TypographyVariant::H3 class={TypographyClass::H3.get()}>H3</Typography>
-                <Typography variant=TypographyVariant::H4 class={TypographyClass::H4.get()}>H4</Typography>
-                <Typography variant=TypographyVariant::H5 class={TypographyClass::H5.get()}>H5</Typography>
-                <Typography variant=TypographyVariant::H6 class={TypographyClass::H6.get()}>H6</Typography>
-                <Typography variant=TypographyVariant::Paragraph class={TypographyClass::Paragraph.get()}>This is a Paragraph</Typography>
-                <p>The word <Typography variant=TypographyVariant::SpanInline class={TypographyClass::Span.get()}>span</Typography> in this sentence is wrapped,
-                also the following code
-                <Typography variant=TypographyVariant::Code {inline:true} class={TypographyClass::Code.get()}>This is a Code block</Typography>
-                is wrapped.</p>
-                <p>The word <Typography variant={TypographyVariant::Span {inline:false}} class={TypographyClass::Span.get()}>span</Typography> in this sentence is wrapped,
-                also the following code
-                <Typography variant=TypographyVariant::Code {inline:false} class={TypographyClass::Code.get()}>This is a Code block</Typography>
-                is wrapped but they are not inline.</p>
-                <Typography variant=TypographyVariant::Code {inline:false} class={TypographyClass::Code.get()}>
-                    <Typography variant=TypographyVariant::Span {inline:false}>let num: i32 = 100;</Typography>
-                    <Typography variant=TypographyVariant::Span {inline:false}>"println!{""{}"", num};"</Typography>
+                <Typography variant=TypographyVariant::H1 class={TypographyClass::H1.get()}>Про Коваль</Typography>
+                // <Typography variant=TypographyVariant::H2 class={TypographyClass::H2.get()}>H2</Typography>
+                // <Typography variant=TypographyVariant::H3 class={TypographyClass::H3.get()}>H3</Typography>
+                // <Typography variant=TypographyVariant::H4 class={TypographyClass::H4.get()}>H4</Typography>
+                // <Typography variant=TypographyVariant::H5 class={TypographyClass::H5.get()}>H5</Typography>
+                // <Typography variant=TypographyVariant::H6 class={TypographyClass::H6.get()}>H6</Typography>
+                <Typography variant=TypographyVariant::Paragraph class={TypographyClass::Paragraph.get()}>
+                    {""}
                 </Typography>
+                // <p>The word <Typography variant=TypographyVariant::SpanInline class={TypographyClass::Span.get()}>span</Typography> in this sentence is wrapped,
+                // also the following code
+                // <Typography variant=TypographyVariant::Code {inline:true} class={TypographyClass::Code.get()}>This is a Code block</Typography>
+                // is wrapped.</p>
+                // <p>The word <Typography variant={TypographyVariant::Span {inline:false}} class={TypographyClass::Span.get()}>span</Typography> in this sentence is wrapped,
+                // also the following code
+                // <Typography variant=TypographyVariant::Code {inline:false} class={TypographyClass::Code.get()}>This is a Code block</Typography>
+                // is wrapped but they are not inline.</p>
+                // <Typography variant=TypographyVariant::Code {inline:false} class={TypographyClass::Code.get()}>
+                //     <Typography variant=TypographyVariant::Span {inline:false}>let num: i32 = 100;</Typography>
+                //     <Typography variant=TypographyVariant::Span {inline:false}>"println!{""{}"", num};"</Typography>
+                // </Typography>
             </div>
         </section>
     }
diff --git a/site/src/pages/mod.rs b/site/src/pages/mod.rs
index ad98b10..858b877 100644
--- a/site/src/pages/mod.rs
+++ b/site/src/pages/mod.rs
@@ -1,3 +1,3 @@
 // pub mod counter;
-pub mod example;
-pub mod home;
+pub mod about;
+pub mod transliterator;
diff --git a/site/src/pages/home.rs b/site/src/pages/transliterator.rs
similarity index 58%
rename from site/src/pages/home.rs
rename to site/src/pages/transliterator.rs
index 1a62f5f..821e2ef 100644
--- a/site/src/pages/home.rs
+++ b/site/src/pages/transliterator.rs
@@ -1,4 +1,5 @@
 use leptos::{*, svg::view};
+use leptos_meta::Title;
 use wana_kana::ConvertJapanese;
 use std::time::Duration;
 
@@ -19,7 +20,7 @@ pub fn copy_selected_text_to_clipboard(el: MouseEvent, content: String) {
 
 
 #[component]
-pub fn Home() -> impl IntoView {
+pub fn Transliterator() -> impl IntoView {
     // import the type for <input>
     use leptos::html::Input;
 
@@ -27,9 +28,11 @@ pub fn Home() -> impl IntoView {
     let input_element: NodeRef<Input> = create_node_ref();
     let (hide_modal, set_hide_modal) = create_signal(true);
 
+    let (capitalize_flag, set_capitalize_flag) = create_signal(false);
 
     // thanks to https://tailwindcomponents.com/component/blue-buttons-example for the showcase layout
     view! {
+        <Title text="Коваль | Транслітератор"/>
         <main>
             <div class="bg-gradient-to-tl from-purple-800 
             to-violet-500 text-white font-mono 
@@ -42,7 +45,7 @@ pub fn Home() -> impl IntoView {
                             md:max-w-lg lg:max-w-xl 
                             xl:max-w-2xl"
                 >
-                    <Outputfield name set_hide_modal/>
+                    <Outputfield name set_hide_modal capitalize_flag/>
                     <p 
                         class="text-lg w-full p-2.5"
                     >
@@ -50,6 +53,7 @@ pub fn Home() -> impl IntoView {
                     </p>
                     <Inputfield name set_name input_element/>
                     <Versionwarning />
+                    <SettingsSection capitalize_flag set_capitalize_flag />
                 </div>
             </div>
         </main>
@@ -62,32 +66,32 @@ fn Versionwarning() -> impl IntoView {
     let (hide_flag, set_hide_flag) = create_signal(false);
 
     view! {
-        <div class="flex flex-col p-4 bg-purple-800 shadow-md hover:shadow-lg rounded-2xl grow" class:hidden=hide_flag>
-        <div class="flex items-center justify-between">
-            <div class="flex items-center">
-                <svg xmlns="http://www.w3.org/2000/svg"
-                    class="w-24 h-14 md:w-16 md:h-16 rounded-2xl py-2 px-2 border border-gray-800 text-blue-400 bg-gray-900" fill="none"
-                    viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                </svg>
-                <div class="flex flex-col ml-3">
-                    <div class="font-medium leading-none text-gray-100">
-                        <b>{"Примітка: "}</b>
-                        {"Наразі підтримуються лише хіраґана та катакана!"}
+        <div class="flex flex-col mt-5 p-4 bg-purple-800 shadow-md hover:shadow-lg rounded-2xl grow" class:hidden=hide_flag>
+            <div class="flex items-center justify-between">
+                <div class="flex items-center">
+                    <svg xmlns="http://www.w3.org/2000/svg"
+                        class="w-24 h-14 md:w-16 md:h-16 rounded-2xl py-2 px-2 border border-gray-800 text-blue-400 bg-gray-900" fill="none"
+                        viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                    <div class="flex flex-col ml-3">
+                        <div class="font-medium leading-none text-gray-100">
+                            <b>{"Примітка: "}</b>
+                            {"Наразі підтримуються лише хіраґана та катакана!"}
+                        </div>
                     </div>
+                    <button 
+                        class="md:ml-6"
+                        on:click=move |_| {
+                            set_hide_flag(true);
+                        }
+                    >
+                        <svg xmlns="http://www.w3.org/2000/svg" class="fill-current text-white-700" viewBox="0 0 16 16" width="20" height="20"><path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path></svg>
+                    </button>
                 </div>
-                <button 
-                    class="md:ml-6"
-                    on:click=move |_| {
-                        set_hide_flag(true);
-                    }
-                >
-                    <svg xmlns="http://www.w3.org/2000/svg" class="fill-current text-white-700" viewBox="0 0 16 16" width="20" height="20"><path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path></svg>
-                </button>
             </div>
         </div>
-        </div>
     }
 }
 
@@ -123,7 +127,7 @@ fn Toast(hide_modal: ReadSignal<bool>) -> impl IntoView {
 }
 
 #[component]
-fn Outputfield(name: ReadSignal<String>, set_hide_modal: WriteSignal<bool>) -> impl IntoView {
+fn Outputfield(name: ReadSignal<String>, set_hide_modal: WriteSignal<bool>, capitalize_flag: ReadSignal<bool>) -> impl IntoView {
     view! {
         <div
             class="bg-gray-50 border border-gray-300 
@@ -137,7 +141,8 @@ fn Outputfield(name: ReadSignal<String>, set_hide_modal: WriteSignal<bool>) -> i
             no-scrollbar overflow-y-auto" 
         >
             <p 
-                class="text-3xl p-2.5 grow text-center self-center"
+                class="text-3xl select-all p-2.5 text-center w-11/12 self-center overflow-y-auto"
+                class:uppercase=capitalize_flag
             >
                     {name}
             </p>
@@ -213,9 +218,55 @@ fn Inputfield(name: ReadSignal<String>, set_name: WriteSignal<String>, input_ele
             dark:placeholder-gray-400 dark:text-white 
             dark:focus:ring-blue-500 
             dark:focus:border-blue-500
-            shadow-lg mb-5 min-w-fit" 
+            shadow-lg min-w-fit" 
             name="title"
             placeholder="Введіть ім'я..."
         />
     }
+}
+
+
+#[component]
+fn SettingsSection(capitalize_flag: ReadSignal<bool>, set_capitalize_flag: WriteSignal<bool>) -> impl IntoView {
+
+    view! {
+        <div class="mt-5">
+            <button
+                class=
+                    "bg-gray-50 border border-gray-300 
+                    text-gray-900 text-sm rounded-lg focus:ring-blue-500 
+                    focus:border-blue-500 block p-2.5 
+                    dark:bg-gray-700 dark:border-gray-600 
+                    dark:placeholder-gray-400 dark:text-white 
+                    dark:focus:ring-blue-500 
+                    dark:focus:border-blue-500
+                    shadow-lg h-12 my-auto
+                    transition dark:hover:bg-gray-600
+                    flex flex-row items-center justify-center"
+                on:click= move |evt: MouseEvent| {
+                    // evt.prevent_default();
+                    // evt.stop_propagation();
+
+                    set_capitalize_flag(!capitalize_flag.get());
+                }
+            >
+                <svg 
+                    class="h-full w-2/5"
+                    data-darkreader-inline-stroke="" 
+                    aria-hidden="true" 
+                    fill="none" 
+                    stroke="currentColor" 
+                    stroke-width="1.5" 
+                    viewBox="0 0 24 24" 
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round"></path>                  
+                </svg>
+                <p class="text-center pl-2 py-0">
+                    {"Налаштування"}
+                </p>
+            </button>
+            
+        </div>
+    }
 }
\ No newline at end of file