add scroll to top button

app.py

@@ -19,16 +19,51 @@ css_content = open("styles.css").read()
 app, rt = fast_app(hdrs=(Style(css_content),))
 
 
-md_exts='codehilite', 'smarty', 'extra', 'sane_lists'
-def Markdown(s, exts=md_exts, **kw): return Div(NotStr(markdown(s, extensions=exts)), **kw)
+md_exts = "codehilite", "smarty", "extra", "sane_lists"
+
+
+def Markdown(s, exts=md_exts, **kw):
+    return Div(NotStr(markdown(s, extensions=exts)), **kw)
+
+
+scroll_script = Script("""
+document.addEventListener('DOMContentLoaded', function() {
+    var scrollButton = document.getElementById('scroll-top-btn');
+    
+    window.onscroll = function() {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            scrollButton.style.display = "block";
+        } else {
+            scrollButton.style.display = "none";
+        }
+    };
+
+    scrollButton.onclick = function() {
+        document.body.scrollTop = 0; // For Safari
+        document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+    };
+});
+""")
+
 
 def date_range_inputs(start_date, end_date):
     return Div(
-        Input(type="date", name="start_date", value=start_date.strftime("%Y-%m-%d"), title="Start date"),
-        Input(type="date", name="end_date", value=end_date.strftime("%Y-%m-%d"), title="End date"),
-        cls="date-range"
+        Input(
+            type="date",
+            name="start_date",
+            value=start_date.strftime("%Y-%m-%d"),
+            title="Start date",
+        ),
+        Input(
+            type="date",
+            name="end_date",
+            value=end_date.strftime("%Y-%m-%d"),
+            title="End date",
+        ),
+        cls="date-range",
     )
 
+
 def search_form(start_date, end_date):
     return Form(
         Input(type="text", name="query", placeholder="Enter search query"),
@@ -36,24 +71,28 @@ def search_form(start_date, end_date):
         Button("Search", type="submit"),
         hx_post="/search",
         hx_target="#search-results",
-        hx_trigger="submit"
+        hx_trigger="submit",
+        id="search-form",
     )
 
+
 def iso_to_unix_timestamp(iso_string):
     dt = datetime.fromisoformat(iso_string)
     return int(dt.timestamp())
 
+
 def unix_timestamp_to_nice_format(timestamp):
     dt = datetime.fromtimestamp(timestamp)
     return dt.strftime("%b %d, %Y")
 
+
 def make_query(query, start_date, end_date, page=1, limit=10):
     url = f"{API_URL}/indexes/comments/search"
     headers = {
         "Content-Type": "application/json",
         "Authorization": f"Bearer {API_KEY}",
     }
-    
+
     after_timestamp = iso_to_unix_timestamp(start_date)
     before_timestamp = iso_to_unix_timestamp(end_date)
 
@@ -62,36 +101,41 @@ def make_query(query, start_date, end_date, page=1, limit=10):
         "limit": limit,
         "offset": (page - 1) * limit,
         "filter": f"comment_updatedAt_timestamp >= {after_timestamp} AND comment_updatedAt_timestamp < {before_timestamp}",
-        "attributesToCrop": ['comment_text'],
+        "attributesToCrop": ["comment_text"],
         "cropLength": 30,
         "attributesToHighlight": ["comment_text", "discussion_title"],
-        "highlightPreTag": "<span class=\"highlight\">",
-        "highlightPostTag": "</span>"
+        "highlightPreTag": '<span class="highlight">',
+        "highlightPostTag": "</span>",
     }
 
     response = requests.post(url, headers=headers, json=query)
 
     return response.json()
 
+
 def search_results(query, start_date, end_date, page=1):
     raw_results = make_query(query, start_date, end_date, page)
 
     return Div(
         make_results_bar(raw_results),
         Div(*[make_card(r) for r in raw_results["hits"]]),
-        make_pagination(query, start_date, end_date, page, raw_results["estimatedTotalHits"]),
-        id="search-results"
+        make_pagination(
+            query, start_date, end_date, page, raw_results["estimatedTotalHits"]
+        ),
+        id="search-results",
     )
 
+
 def make_results_bar(results):
     processing_time = results["processingTimeMs"]
     estimated_hits = results["estimatedTotalHits"]
     return Div(
         Div(f"Processing time: {processing_time}ms"),
         Div(f"Estimated total hits: {estimated_hits}"),
-        cls="results-bar"
+        cls="results-bar",
     )
 
+
 def make_card(result):
     result = result["_formatted"]
     url = f"https://hf.co/{result['repo_id']}/discussions/{result['discussion_num']}"
@@ -104,35 +148,55 @@ def make_card(result):
             Div(Span(date)),
             A(url, href=url, target="_blank"),
         ),
-        cls="card-item"
+        cls="card-item",
     )
 
+
 def make_pagination(query, start_date, end_date, current_page, total_hits, limit=10):
     total_pages = -(-total_hits // limit)  # Ceiling division
 
     children = []
-    
+
     if current_page > 1:
         children.append(
-            Button("Previous", 
-                   hx_post=f"/search?page={current_page-1}",
-                   hx_target="#search-results",
-                   hx_include="[name='query'], [name='start_date'], [name='end_date']")
-    )
-    
+                Button(
+                "Previous",
+                hx_post=f"/search?page={current_page-1}",
+                hx_target="#search-results",
+                hx_include="[name='query'], [name='start_date'], [name='end_date']",
+            )
+        )
+
     children.append(Span(f"Page {current_page} of {total_pages}"))
-    
+
     if current_page < total_pages:
         children.append(
-            Button("Next", 
-                   hx_post=f"/search?page={current_page+1}",
-                   hx_target="#search-results",
-                   hx_include="[name='query'], [name='start_date'], [name='end_date']",
-                   )
+            Button(
+                "Next",
+                hx_post=f"/search?page={current_page+1}",
+                hx_target="#search-results",
+                hx_include="[name='query'], [name='start_date'], [name='end_date']",
+            )
         )
-    
+
     return Div(*children, cls="pagination")
 
+scroll_button = Button("Scroll to Top", 
+    id="scroll-top-btn", 
+    style="""
+        position: fixed; 
+        bottom: 20px; 
+        right: 20px; 
+        display: none;
+        background-color: #007bff;
+        color: white;
+        border: none;
+        border-radius: 5px;
+        padding: 10px 15px;
+        cursor: pointer;
+    """
+)
+
 @rt("/")
 def get():
     end_date = datetime.now()
@@ -142,12 +206,16 @@ def get():
         Div(
             search_form(start_date, end_date),
             Div(id="search-results"),
-            cls="container"
-        )
+            scroll_button,
+            scroll_script,
+            cls="container",
+        ),
     )
 
+
 @rt("/search")
 def post(query: str, start_date: str, end_date: str, page: int = 1):
     return search_results(query, start_date, end_date, page)
 
+
 serve()