From c273a8625af57112246450f01c2cbb6d81c50350 Mon Sep 17 00:00:00 2001
From: Connor Johnstone <connor.johnstone@arcfield.com>
Date: Fri, 29 Aug 2025 09:48:36 -0400
Subject: [PATCH] Add 'Today' button to calendar header for quick navigation to
 current month
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add go_to_today callback that navigates to first day of current month
- Position Today button between month title and next month arrow
- Center month/year title using absolute positioning
- Group Today button and next arrow in header-right container with 0.5rem gap
- Style Today button with pill shape, semi-transparent background, and hover effects
- Add responsive styling for mobile screens with smaller text and padding
- Maintain clean, balanced header layout on all screen sizes

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/calendar.rs | 14 +++++++++++++-
 styles.css                 | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/src/components/calendar.rs b/src/components/calendar.rs
index 9084626..68baa12 100644
--- a/src/components/calendar.rs
+++ b/src/components/calendar.rs
@@ -67,13 +67,25 @@ pub fn Calendar(props: &CalendarProps) -> Html {
             current_month.set(next);
         })
     };
+
+    let go_to_today = {
+        let current_month = current_month.clone();
+        Callback::from(move |_| {
+            let today = Local::now().date_naive();
+            let first_of_today_month = today.with_day(1).unwrap();
+            current_month.set(first_of_today_month);
+        })
+    };
     
     html! {
         <div class="calendar">
             <div class="calendar-header">
                 <button class="nav-button" onclick={prev_month}>{"‹"}</button>
                 <h2 class="month-year">{format!("{} {}", get_month_name(current_month.month()), current_month.year())}</h2>
-                <button class="nav-button" onclick={next_month}>{"›"}</button>
+                <div class="header-right">
+                    <button class="today-button" onclick={go_to_today}>{"Today"}</button>
+                    <button class="nav-button" onclick={next_month}>{"›"}</button>
+                </div>
             </div>
             
             <div class="calendar-grid">
diff --git a/styles.css b/styles.css
index 43ffa74..99ada49 100644
--- a/styles.css
+++ b/styles.css
@@ -405,6 +405,15 @@ body {
     font-size: 1.8rem;
     font-weight: 600;
     margin: 0;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
 .nav-button {
@@ -427,6 +436,25 @@ body {
     background: rgba(255,255,255,0.3);
 }
 
+.today-button {
+    background: rgba(255,255,255,0.2);
+    border: none;
+    color: white;
+    font-size: 0.9rem;
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s;
+}
+
+.today-button:hover {
+    background: rgba(255,255,255,0.3);
+}
+
 .calendar-grid {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
@@ -765,6 +793,11 @@ body {
         height: 35px;
         font-size: 1.2rem;
     }
+    
+    .today-button {
+        font-size: 0.8rem;
+        padding: 0.4rem 0.8rem;
+    }
 
     .weekday-header {
         padding: 0.5rem;