From 7bff22756beec82b4a1470e2d325b706dc56e5f2 Mon Sep 17 00:00:00 2001
From: Benedikt Peetz <benedikt.peetz@b-peetz.de>
Date: Thu, 23 Oct 2025 01:36:39 +0200
Subject: feat(buy): Provide basic buy interface

---
 src/components/input_placeholder.rs | 154 +++++++++++++++++++++++++++++++++---
 1 file changed, 141 insertions(+), 13 deletions(-)

(limited to 'src/components/input_placeholder.rs')

diff --git a/src/components/input_placeholder.rs b/src/components/input_placeholder.rs
index aeef838..99b3196 100644
--- a/src/components/input_placeholder.rs
+++ b/src/components/input_placeholder.rs
@@ -1,27 +1,40 @@
 use leptos::{
     IntoView, component,
+    error::Error,
     html::Input,
-    prelude::{ClassAttribute, ElementChild, GlobalAttributes, NodeRef, NodeRefAttribute},
+    prelude::{
+        ClassAttribute, CollectView, ElementChild, Get, GlobalAttributes, LocalResource, NodeRef,
+        NodeRefAttribute, OnAttribute, OnTargetAttribute, PropAttribute, Set, Show, WriteSignal,
+        signal,
+    },
     view,
 };
+use log::{error, info};
 
 use crate::components::get_id;
 
-
 #[component]
+#[expect(clippy::too_many_lines)]
 pub fn InputPlaceholder(
     input_type: &'static str,
     label: &'static str,
     node_ref: NodeRef<Input>,
     #[prop(default = None)] initial_value: Option<String>,
+    #[prop(default = None)] reactive: Option<WriteSignal<Option<String>>>,
+    #[prop(default = None)] auto_complete: Option<
+        LocalResource<Result<Option<Vec<String>>, Error>>,
+    >,
 ) -> impl IntoView {
     let id = get_id();
 
+    let (autocomplete_signal, autocomplete_set) = signal(String::new());
+
     view! {
         <div class="relative h-14">
             <input
                 id=id.to_string()
                 type=input_type
+                autocomplete="off"
                 class="\
                 absolute \
                 bottom-0 \
@@ -32,7 +45,8 @@ pub fn InputPlaceholder(
                 border-gray-200 \
                 focus:outline-none \
                 h-10 \
-                peer \
+                peer/input \
+                group/input \
                 placeholder-transparent \
                 rounded-t-lg \
                 text-gray-900 \
@@ -41,16 +55,23 @@ pub fn InputPlaceholder(
                 placeholder="sentinel value"
                 node_ref=node_ref
                 value=initial_value
+                on:input:target=move |ev| {
+                    if let Some(signal) = reactive {
+                        signal.set(Some(ev.target().value()));
+                        autocomplete_set.set(ev.target().value());
+                    }
+                }
+                prop:value=autocomplete_signal
             />
 
             // TODO: Reference `var(--tw-border-2)` instead of the `2 px` <2025-10-01>
-            <div class="
+            <div class="\
             absolute \
             bottom-0 \
             h-[2px] \
             w-full \
             bg-gray-300 \
-            peer-focus:bg-indigo-600 \
+            peer-focus/input:bg-indigo-600 \
             " />
 
             <label
@@ -62,18 +83,125 @@ pub fn InputPlaceholder(
                 text-gray-700 \
                 text-sm \
                 transition-all \
-                peer-focus:bottom-10 \
-                peer-focus:left-0 \
-                peer-focus:text-gray-700 \
-                peer-focus:text-sm \
-                peer-placeholder-shown:text-base \
-                peer-placeholder-shown:text-gray-400 \
-                peer-placeholder-shown:bottom-2 \
-                peer-placeholder-shown:left-2 \
+                peer-focus/input:bottom-10 \
+                peer-focus/input:left-0 \
+                peer-focus/input:text-gray-700 \
+                peer-focus/input:text-sm \
+                peer-placeholder-shown/input:text-base \
+                peer-placeholder-shown/input:text-gray-400 \
+                peer-placeholder-shown/input:bottom-2 \
+                peer-placeholder-shown/input:left-2 \
                 "
             >
                 {label}
             </label>
+
+            <Show
+                when=move || {
+                    !autocomplete_signal.get().is_empty()
+                }
+                fallback=move || ()
+            >
+                <div class="\
+                absolute \
+                top-0 \
+                left-0 \
+                invisible \
+                peer-focus/input:visible \
+                in-focus:visible \
+                ">
+                    <div class="\
+                    flex \
+                    flex-row \
+                    g-0 \
+                    ">
+                        // TODO: Reference `var(--tw-border-8)` instead of the `8 px` <2025-10-11>
+                        <div class="w-[8px] h-full" />
+                        <div class="\
+                        flex \
+                        flex-col \
+                        g-0 \
+                        ">
+                            <div class="h-14 w-full peer/div" />
+                            <div class="\
+                            bg-white \
+                            shadow \
+                            outline \
+                            outline-black/5 \
+                            rounded-lg \
+                            z-50 \
+                            p-2 \
+                            visible \
+                            ">
+                                {move || {
+                                    auto_complete
+                                        .map(|auto_complete| {
+                                            provide_auto_completion(
+                                                auto_complete,
+                                                autocomplete_set,
+                                                reactive
+                                            )
+                                        })
+                                }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Show>
         </div>
     }
 }
+
+fn provide_auto_completion(
+    auto_complete: LocalResource<Result<Option<Vec<String>>, Error>>,
+    autocomplete_set: WriteSignal<String>,
+    reactive: Option<WriteSignal<Option<String>>>,
+) -> impl IntoView {
+    match auto_complete.get() {
+        Some(resource_result) => match resource_result {
+            Ok(resource_fetch) => resource_fetch.map(|_| {
+                view! {
+                    <div class="flex flex-col g-1">
+                        {move || {
+                            auto_complete
+                                .get()
+                                .expect("Worked before")
+                                .unwrap()
+                                .unwrap()
+                                .into_iter()
+                                .map(|item| {
+                                    let item2 = item.clone();
+                                    view! {
+                                        <button
+                                            type="button"
+                                            on:click=move |_| {
+                                                autocomplete_set.set(item2.clone());
+                                                reactive
+                                                    .expect(
+                                                    "Should be set, \
+                                                    when autocomplete is used")
+                                                    .set(Some(item2.clone()));
+
+                                                info!("Set autocomplete to {item2}.");
+                                            }
+                                        >
+                                            {item}
+                                        </button>
+                                    }
+                                })
+                                .collect_view()
+                        }}
+                    </div>
+                }
+            }),
+            Err(err) => {
+                error!(
+                    "Error while loading \
+                    autocompletion: {err}"
+                );
+                None
+            }
+        },
+        None => None,
+    }
+}
-- 
cgit 1.4.1