Settings dialog inside the settings button.

src/components/HeaderControls.vue

@@ -25,12 +25,14 @@
       <button
         type="button"
         class="settings-btn"
-        @click="$emit('open-settings')"
+        @click="openSettings"
         aria-label="Open settings"
         title="Settings"
       >
         ⚙
       </button>
+      <!-- Settings dialog now lives here -->
+      <SettingsDialog ref="settingsDialog" />
     </div>
   </Transition>
   <button
@@ -48,6 +50,7 @@
 import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
 import { useCalendarStore } from '@/stores/CalendarStore'
 import { formatTodayString } from '@/utils/date'
+import SettingsDialog from '@/components/SettingsDialog.vue'
 
 const calendarStore = useCalendarStore()
 
@@ -56,7 +59,7 @@ const todayString = computed(() => {
   return formatTodayString(d)
 })
 
-const emit = defineEmits(['open-settings', 'go-to-today'])
+const emit = defineEmits(['go-to-today'])
 
 function goToToday() {
   // Emit the event so the parent can handle the viewport scrolling logic
@@ -77,6 +80,12 @@ function toggleVisibility() {
   isVisible.value = !isVisible.value
 }
 
+// Settings dialog integration
+const settingsDialog = ref(null)
+function openSettings() {
+  settingsDialog.value?.open()
+}
+
 onMounted(() => {
   checkScreenSize()
   window.addEventListener('resize', checkScreenSize)