fixed several issues and added features

	- fixed the month view in mobile
	- fixed the scroll to focus from calendar picker
	- added dark mode
	- added scroll to top button

Author: M

index.html

@@ -20,6 +20,17 @@
             --accent-4: #00aaff;
         }
 
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --bg: #2a2a2a;
+                --surface: #383838;
+                --surface-2: #4a4a4a;
+                --border: #555555;
+                --text: #d4d4d4;
+                --text-dim: #9a9a9a;
+            }
+        }
+
         * {
             margin: 0;
             padding: 0;
@@ -414,19 +425,38 @@
             margin-top: 0.1rem;
         }
 
-        @media (max-width: 900px) {
-            .month-grid {
-                grid-template-columns: repeat(2, minmax(0, 1fr));
-            }
+        .scroll-top-btn {
+            position: fixed;
+            right: 1.25rem;
+            bottom: 1.25rem;
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            background: var(--text);
+            color: var(--bg);
+            border: 1px solid var(--border);
+            font-size: 1.4rem;
+            line-height: 1;
+            cursor: pointer;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 100;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+            transition: transform 0.2s, opacity 0.2s;
+        }
 
-            .month-grid-header {
-                display: none;
-            }
+        .scroll-top-btn.visible {
+            display: flex;
+        }
+
+        .scroll-top-btn:hover {
+            transform: translateY(-2px);
         }
 
         @media (max-width: 768px) {
             .container {
-                padding: 1rem;
+                padding: 0.75rem;
             }
 
             h1 {
@@ -435,6 +465,7 @@
 
             .controls {
                 flex-direction: column;
+                padding: 1rem;
             }
 
             .view-controls {
@@ -445,8 +476,59 @@
                 flex: 1;
             }
 
+            .month-grid-header {
+                gap: 2px;
+            }
+
+            .month-weekday {
+                font-size: 0.6rem;
+                padding: 0.15rem 0;
+                letter-spacing: 0;
+            }
+
             .month-grid {
-                grid-template-columns: 1fr;
+                grid-template-columns: repeat(7, minmax(0, 1fr));
+                gap: 2px;
+            }
+
+            .month-cell {
+                min-height: 56px;
+                padding: 0.2rem;
+            }
+
+            .month-cell-day {
+                font-size: 0.7rem;
+                margin-bottom: 0.2rem;
+            }
+
+            .month-cell-events {
+                gap: 0.15rem;
+            }
+
+            .month-event {
+                font-size: 0.6rem;
+                gap: 0.15rem;
+            }
+
+            .month-event-text {
+                display: none;
+            }
+
+            .month-event-dot {
+                width: 6px;
+                height: 6px;
+                margin-top: 0;
+            }
+
+            .month-more {
+                font-size: 0.55rem;
+            }
+
+            .scroll-top-btn {
+                right: 0.75rem;
+                bottom: 0.75rem;
+                width: 42px;
+                height: 42px;
             }
         }
     </style>
@@ -472,6 +554,8 @@ <h1>Codam Calendar</h1>
         </div>
     </div>
 
+    <button id="scrollTopBtn" class="scroll-top-btn" aria-label="Scroll to top" title="Scroll to top">↑</button>
+
     <script>
         const CALENDARS = [
             {
@@ -504,7 +588,8 @@ <h1>Codam Calendar</h1>
             events: [],
             monthCursor: new Date(),
             agendaStart: new Date(),
-            agendaFocusDate: null
+            agendaFocusDate: null,
+            agendaFocusScrolled: false
         };
 
         function initToggles() {
@@ -530,6 +615,7 @@ <h1>Codam Calendar</h1>
             state.view = 'agenda';
             state.agendaStart = date || new Date();
             state.agendaFocusDate = date || null;
+            state.agendaFocusScrolled = false;
             document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
             document.querySelector('.view-btn[data-view="agenda"]').classList.add('active');
             fetchEvents();
@@ -546,6 +632,7 @@ <h1>Codam Calendar</h1>
                     } else if (state.view === 'agenda') {
                         state.agendaStart = new Date();
                         state.agendaFocusDate = null;
+                        state.agendaFocusScrolled = false;
                     }
                     fetchEvents();
                 });
@@ -752,23 +839,27 @@ <h1>Codam Calendar</h1>
                 state.agendaStart = new Date(weekStart);
                 state.agendaStart.setDate(state.agendaStart.getDate() - 7);
                 state.agendaFocusDate = null;
+                state.agendaFocusScrolled = false;
                 fetchEvents();
             };
             document.getElementById('agendaTodayBtn').onclick = () => {
                 state.agendaStart = new Date();
                 state.agendaFocusDate = new Date();
+                state.agendaFocusScrolled = false;
                 fetchEvents();
             };
             document.getElementById('nextWeekBtn').onclick = () => {
                 state.agendaStart = new Date(weekStart);
                 state.agendaStart.setDate(state.agendaStart.getDate() + 7);
                 state.agendaFocusDate = null;
+                state.agendaFocusScrolled = false;
                 fetchEvents();
             };
 
-            if (focusKey) {
+            if (focusKey && !state.agendaFocusScrolled) {
                 const el = document.getElementById(`day-${focusKey}`);
                 if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                state.agendaFocusScrolled = true;
             }
         }
 
@@ -876,10 +967,28 @@ <h1>Codam Calendar</h1>
             } else {
                 renderAgendaView(eventsByDay);
             }
+
+            updateScrollTopBtn();
+        }
+
+        function updateScrollTopBtn() {
+            const btn = document.getElementById('scrollTopBtn');
+            if (!btn) return;
+            const shouldShow = state.view === 'agenda' && window.scrollY > 200;
+            btn.classList.toggle('visible', shouldShow);
+        }
+
+        function initScrollTopBtn() {
+            const btn = document.getElementById('scrollTopBtn');
+            btn.addEventListener('click', () => {
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+            });
+            window.addEventListener('scroll', updateScrollTopBtn, { passive: true });
         }
 
         initToggles();
         initViewControls();
+        initScrollTopBtn();
         fetchEvents();
     </script>
 </body>