feat: implement interactive calendar view grids and confirmation action patterns

templates/components/macros.html

@@ -97,6 +97,12 @@
 </div>
 {% endmacro %}
 
+{% macro modal_close_only() %}
+    </div>
+</div>
+{% endmacro %}
+
+
 {% macro sheet_open(id, title, max_width_class="max-w-sm") %}
 <div id="{{ id }}" class="sheet-dialog fixed inset-0 z-50 overflow-hidden hidden" role="dialog" aria-modal="true">
     <div class="sheet-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm opacity-0 transition-opacity duration-300 animate-fade-in"></div>
@@ -278,12 +284,13 @@
                 <button type="button" class="datepicker-prev p-1.5 rounded-lg hover:bg-secondary text-muted-foreground/90 hover:text-white transition">
                     <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
                 </button>
-                <span class="datepicker-month-year text-xs font-bold text-slate-200"></span>
+                <button type="button" class="datepicker-month-year text-xs font-bold text-slate-200 hover:bg-secondary/40 px-2 py-1 rounded-lg transition outline-none">
+                </button>
                 <button type="button" class="datepicker-next p-1.5 rounded-lg hover:bg-secondary text-muted-foreground/90 hover:text-white transition">
                     <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
                 </button>
             </div>
-            <div class="grid grid-cols-7 gap-1 text-center text-[10px] font-bold text-slate-500 mb-2">
+            <div class="datepicker-weekdays grid grid-cols-7 gap-1 text-center text-[10px] font-bold text-slate-500 mb-2">
                 <span>Su</span><span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span>
             </div>
             <div class="datepicker-days grid grid-cols-7 gap-1 text-center"></div>