From 5cc4bfec1ff8be878b60500917278419c7fb881e Mon Sep 17 00:00:00 2001
From: Francesco <tomaselli.fr@gmail.com>
Date: Fri, 26 Jan 2024 17:37:58 +0100
Subject: [PATCH] web client

---
 server/src/main.rs          |  6 +++---
 server/templates/index.html | 30 +++++++++++++++++++++++++-----
 server/templates/query.html |  3 ++-
 3 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/server/src/main.rs b/server/src/main.rs
index a05623d..d12f3a2 100644
--- a/server/src/main.rs
+++ b/server/src/main.rs
@@ -1,11 +1,11 @@
 use askama::Template;
 use axum::{
     debug_handler,
-    extract::{Json, State},
+    extract::State,
     http::StatusCode,
     response::{Html, IntoResponse, Response},
     routing::{get, post},
-    Router,
+    Form, Router,
 };
 use log::info;
 use search::query::Processor;
@@ -115,7 +115,7 @@ struct Document {
 #[debug_handler]
 async fn post_query(
     State(state): State<Arc<AppState>>,
-    Json(payload): Json<QueryRequest>,
+    Form(payload): Form<QueryRequest>,
 ) -> impl IntoResponse {
     info!("Query request: {}", payload.query);
 
diff --git a/server/templates/index.html b/server/templates/index.html
index 2eebb47..15036e1 100644
--- a/server/templates/index.html
+++ b/server/templates/index.html
@@ -5,11 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <!-- htmx -->
     <script src="https://unpkg.com/htmx.org@1.9.9"></script>
-    <script src="https://unpkg.com/htmx.org/dist/ext/json-enc.js"></script>
-
-    <!-- css -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -42,6 +39,24 @@
                 });
             });
         });
+
+        document.addEventListener('DOMContentLoaded', function () {
+            var goToTopBtn = document.getElementById('to-top');
+
+            // Show/hide the "Go to Top" button based on scroll position
+            window.addEventListener('scroll', function () {
+                if (window.scrollY > 500) {
+                    goToTopBtn.classList.remove('hidden');
+                } else {
+                    goToTopBtn.classList.add('hidden');
+                }
+            });
+
+            // Scroll to the top when the button is clicked
+            goToTopBtn.addEventListener('click', function () {
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+            });
+        });
     </script>
 
     <title>search-rs</title>
@@ -68,7 +83,7 @@
             <h1 class="text-3xl font-medium mb-10">Index on {{index_path}}</h1>
             <input type="text"
                 class="outline-neutral-300 dark:outline-neutral-900 w-full p-4 rounded-md bg-neutral-100 dark:bg-neutral-800"
-                placeholder="Enter your search query..." autofocus name="query" hx-post="/query" hx-ext='json-enc'
+                placeholder="Enter your search query..." autofocus name="query" hx-post="/query"
                 hx-target=".search-results" hx-trigger="keyup[keyCode==13]">
         </div>
 
@@ -78,6 +93,11 @@ <h1 class="text-3xl font-medium mb-10">Index on {{index_path}}</h1>
         </div>
     </div>
 
+    <div id="to-top"
+        class="hidden fixed flex bottom-16 right-16 h-16 w-16 rounded-full justify-center items-center hover:cursor-pointer bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-700 ">
+        <i class="fas fa-caret-up text-2xl"></i>
+    </div>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/server/templates/query.html b/server/templates/query.html
index 825a3b4..3874da4 100644
--- a/server/templates/query.html
+++ b/server/templates/query.html
@@ -23,7 +23,8 @@ <h1 class=" font-light text-md mb-6">
     {% for doc in documents %}
 
 
-    <div id="{{doc.path}}" class="toggle-container bg-neutral-100 dark:bg-neutral-800 p-6 rounded-md mb-6">
+    <div id="{{doc.path}}"
+        class="toggle-container hover:cursor-pointer bg-neutral-100 dark:bg-neutral-800 hover:bg-neutral-200 hover:dark:bg-neutral-700 p-6 rounded-md mb-6">
         <div id="{{doc.path}}_closed">
             <h2 class="text-xl font-semibold mb-4">
                 {{ doc.path }}