Refactor to use BaseDialog, implement also SettingsDialog on it.

src/components/BaseDialog.vue

@@ -0,0 +1,170 @@
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  title: { type: String, default: '' },
+  draggable: { type: Boolean, default: true },
+  autoFocus: { type: Boolean, default: true },
+})
+
+const emit = defineEmits(['update:modelValue', 'opened', 'closed', 'submit'])
+
+const modalRef = ref(null)
+const isDragging = ref(false)
+const dragOffset = ref({ x: 0, y: 0 })
+const modalPosition = ref({ x: 0, y: 0 })
+const dialogWidth = ref(null)
+const dialogHeight = ref(null)
+const hasMoved = ref(false)
+
+function startDrag(event) {
+  if (!props.draggable || !modalRef.value) return
+  const rect = modalRef.value.getBoundingClientRect()
+  // Lock current size so moving doesn't cause reflow / resize
+  dialogWidth.value = rect.width
+  dialogHeight.value = rect.height
+  // Initialize position to current on-screen coordinates BEFORE enabling moved mode
+  modalPosition.value = { x: rect.left, y: rect.top }
+  isDragging.value = true
+  hasMoved.value = true
+  dragOffset.value = { x: event.clientX - rect.left, y: event.clientY - rect.top }
+  if (event.pointerId !== undefined) {
+    try {
+      event.target.setPointerCapture(event.pointerId)
+    } catch {}
+  }
+  document.addEventListener('pointermove', handleDrag, { passive: false })
+  document.addEventListener('pointerup', stopDrag)
+  document.addEventListener('pointercancel', stopDrag)
+  event.preventDefault()
+}
+function handleDrag(event) {
+  if (!isDragging.value) return
+  modalPosition.value = {
+    x: event.clientX - dragOffset.value.x,
+    y: event.clientY - dragOffset.value.y,
+  }
+  event.preventDefault()
+}
+function stopDrag() {
+  isDragging.value = false
+  document.removeEventListener('pointermove', handleDrag)
+  document.removeEventListener('pointerup', stopDrag)
+  document.removeEventListener('pointercancel', stopDrag)
+}
+
+const modalStyle = computed(() => {
+  if (hasMoved.value) {
+    return {
+      transform: 'none',
+      left: `${modalPosition.value.x}px`,
+      top: `${modalPosition.value.y}px`,
+      bottom: 'auto',
+      right: 'auto',
+      width: dialogWidth.value ? dialogWidth.value + 'px' : undefined,
+      height: dialogHeight.value ? dialogHeight.value + 'px' : undefined,
+    }
+  }
+  return {}
+})
+
+function close() {
+  emit('update:modelValue', false)
+  emit('closed')
+}
+
+function handleKeydown(e) {
+  if (e.key === 'Escape' && props.modelValue) close()
+}
+
+onMounted(() => document.addEventListener('keydown', handleKeydown))
+onUnmounted(() => document.removeEventListener('keydown', handleKeydown))
+
+watch(
+  () => props.modelValue,
+  async (v) => {
+    if (v) {
+      emit('opened')
+      await nextTick()
+      if (props.autoFocus) {
+        const el = modalRef.value?.querySelector('[autofocus]')
+        if (el) el.focus()
+      }
+    }
+  },
+)
+</script>
+
+<template>
+  <div v-if="modelValue" class="ec-modal" ref="modalRef" :style="modalStyle">
+    <form class="ec-form" @submit.prevent="emit('submit')">
+      <header class="ec-header" @pointerdown="startDrag">
+        <h2 class="ec-title">
+          <slot name="title">{{ title }}</slot>
+        </h2>
+        <div class="ec-header-extra"><slot name="header-extra" /></div>
+      </header>
+      <div class="ec-body">
+        <slot />
+      </div>
+      <footer v-if="$slots.footer" class="ec-footer">
+        <slot name="footer" />
+      </footer>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.ec-modal {
+  position: fixed;
+  bottom: 3em;
+  right: 2em;
+  background: color-mix(in srgb, var(--panel) 85%, transparent);
+  backdrop-filter: blur(0.625em);
+  -webkit-backdrop-filter: blur(0.625em);
+  color: var(--ink);
+  border-radius: 0.6em;
+  min-height: 23em;
+  min-width: 26em;
+  max-width: min(34em, 90vw);
+  box-shadow: 0 0.6em 1.8em rgba(0, 0, 0, 0.35);
+  border: 0.0625em solid color-mix(in srgb, var(--muted) 40%, transparent);
+  z-index: 1000;
+  overflow: hidden;
+}
+.ec-form {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 23em;
+  height: 100%;
+  width: 100%;
+}
+.ec-header {
+  cursor: move;
+  user-select: none;
+  padding: 0.75em 1em 0.5em 1em;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1em;
+}
+.ec-title {
+  margin: 0;
+  font-size: 1.1em;
+}
+.ec-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  padding: 0 1em 0.5em 1em;
+  overflow: auto;
+}
+.ec-footer {
+  padding: 0.5em 1em 1em 1em;
+  display: flex;
+  justify-content: space-between;
+  gap: 1em;
+  flex-wrap: wrap;
+}
+</style>

src/components/Calendar.vue

@@ -1,24 +1,36 @@
 <template>
   <div class="wrap">
-    <AppHeader />
+    <!-- AppHeader component reference removed (file missing); add inline header with Settings button -->
+    <div class="inline-header">
+      <h1 class="app-title">Calendar</h1>
+      <div class="header-actions">
+        <button type="button" class="settings-btn" @click="openSettings">Settings</button>
+      </div>
+    </div>
     <div class="calendar-container" ref="containerEl">
       <CalendarGrid />
       <Jogwheel />
     </div>
     <EventDialog />
+    <SettingsDialog ref="settingsDialog" />
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from 'vue'
-import AppHeader from './AppHeader.vue'
 import CalendarGrid from './CalendarGrid.vue'
 import Jogwheel from './Jogwheel.vue'
 import EventDialog from './EventDialog.vue'
+import SettingsDialog from './SettingsDialog.vue'
 import { useCalendarStore } from '@/stores/CalendarStore'
 
 const calendarStore = useCalendarStore()
 const containerEl = ref(null)
+const settingsDialog = ref(null)
+
+function openSettings() {
+  settingsDialog.value?.open()
+}
 
 let intervalId
 
@@ -33,3 +45,29 @@ onBeforeUnmount(() => {
   clearInterval(intervalId)
 })
 </script>
+
+<style scoped>
+.inline-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+}
+.app-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+.settings-btn {
+  border: 1px solid var(--muted);
+  background: var(--panel-alt, transparent);
+  color: var(--ink);
+  padding: 0.4rem 0.75rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  font-size: 0.75rem;
+}
+.settings-btn:hover {
+  background: var(--muted);
+}
+</style>

src/components/EventDialog.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { useCalendarStore } from '@/stores/CalendarStore'
 import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import BaseDialog from './BaseDialog.vue'
 import WeekdaySelector from './WeekdaySelector.vue'
 import Numeric from './Numeric.vue'
 import { addDaysStr, getMondayOfISOWeek } from '@/utils/date'
@@ -572,165 +573,105 @@ const recurrenceSummary = computed(() => {
 </script>
 
 <template>
-  <div class="ec-modal" v-if="showDialog" ref="modalRef" :style="modalStyle">
+  <BaseDialog v-model="showDialog" @submit="saveEvent">
-    <form class="ec-form" @submit.prevent="saveEvent">
+    <template #title>
-      <header class="ec-header" @pointerdown="startDrag">
+      {{ dialogMode === 'create' ? 'Create Event' : 'Edit Event'
-        <h2 id="ec-modal-title">
+      }}<template v-if="headerDateShort"> · {{ headerDateShort }}</template>
-          {{ dialogMode === 'create' ? 'Create Event' : 'Edit Event' }}
+    </template>
-          <template v-if="headerDateShort">· {{ headerDateShort }}</template>
+    <label class="ec-field" ref="modalRef">
-        </h2>
+      <input type="text" v-model="title" autocomplete="off" ref="titleInput" />
-      </header>
+    </label>
-      <div class="ec-body">
+    <div class="ec-color-swatches">
-        <label class="ec-field">
+      <label v-for="i in 8" :key="i - 1" class="swatch-label">
-          <span>Title</span>
+        <input
-          <input type="text" v-model="title" autocomplete="off" ref="titleInput" />
+          class="swatch"
+          :class="'event-color-' + (i - 1)"
+          type="radio"
+          name="colorId"
+          :value="i - 1"
+          v-model="selectedColor"
+        />
+      </label>
+    </div>
+    <div class="recurrence-block">
+      <div class="recurrence-header">
+        <label class="switch">
+          <input type="checkbox" v-model="recurrenceEnabled" />
+          <span>Repeat</span>
         </label>
-        <div class="ec-color-swatches">
+        <span class="recurrence-summary" v-if="recurrenceEnabled">
-          <label v-for="i in 8" :key="i - 1" class="swatch-label">
+          {{ recurrenceSummary }}
-            <input
+          <template v-if="recurrenceOccurrences > 0">
-              class="swatch"
+            until {{ formattedFinalOccurrence }}</template
-              :class="'event-color-' + (i - 1)"
+          >
-              type="radio"
+        </span>
-              name="colorId"
+        <span class="recurrence-summary muted" v-else>Does not recur</span>
-              :value="i - 1"
+      </div>
-              v-model="selectedColor"
+      <div v-if="recurrenceEnabled" class="recurrence-form">
-            />
+        <div class="line compact">
-          </label>
+          <Numeric
+            v-model="recurrenceInterval"
+            :prefix-values="[{ value: 1, display: 'Every' }]"
+            :min="2"
+            number-prefix="Every "
+            aria-label="Interval"
+          />
+          <select v-model="recurrenceFrequency" class="freq-select">
+            <option value="weeks">{{ recurrenceInterval === 1 ? 'week' : 'weeks' }}</option>
+            <option value="months">{{ recurrenceInterval === 1 ? 'month' : 'months' }}</option>
+          </select>
+          <Numeric
+            class="occ-stepper"
+            v-model="recurrenceOccurrences"
+            :min="2"
+            :prefix-values="[{ value: 0, display: '∞' }]"
+            number-postfix=" times"
+            aria-label="Occurrences (0 = no end)"
+            extra-class="occ"
+          />
         </div>
-        <div class="recurrence-block">
+        <div v-if="recurrenceFrequency === 'weeks'" @click.stop>
-          <div class="recurrence-header">
+          <WeekdaySelector
-            <label class="switch">
+            v-model="recurrenceWeekdays"
-              <input type="checkbox" v-model="recurrenceEnabled" />
+            :fallback="fallbackWeekdays"
-              <span>Repeat</span>
+            :first-day="calendarStore.config.first_day"
-            </label>
+          />
-            <span class="recurrence-summary" v-if="recurrenceEnabled">
-              {{ recurrenceSummary }}
-              <template v-if="recurrenceOccurrences > 0">
-                until {{ formattedFinalOccurrence }}</template
-              >
-            </span>
-            <span class="recurrence-summary muted" v-else>Does not recur</span>
-          </div>
-          <div v-if="recurrenceEnabled" class="recurrence-form">
-            <div class="line compact">
-              <Numeric
-                v-model="recurrenceInterval"
-                :prefix-values="[{ value: 1, display: 'Every' }]"
-                :min="2"
-                number-prefix="Every "
-                aria-label="Interval"
-              />
-              <select v-model="recurrenceFrequency" class="freq-select">
-                <option value="weeks">{{ recurrenceInterval === 1 ? 'week' : 'weeks' }}</option>
-                <option value="months">
-                  {{ recurrenceInterval === 1 ? 'month' : 'months' }}
-                </option>
-              </select>
-              <Numeric
-                class="occ-stepper"
-                v-model="recurrenceOccurrences"
-                :min="2"
-                :prefix-values="[{ value: 0, display: '∞' }]"
-                number-postfix=" times"
-                aria-label="Occurrences (0 = no end)"
-                extra-class="occ"
-              />
-            </div>
-            <div v-if="recurrenceFrequency === 'weeks'" @click.stop>
-              <WeekdaySelector
-                v-model="recurrenceWeekdays"
-                :fallback="fallbackWeekdays"
-                :first-day="calendarStore.config.first_day"
-              />
-            </div>
-          </div>
         </div>
       </div>
-      <footer class="ec-footer">
+    </div>
-        <template v-if="dialogMode === 'create'">
+    <template #footer>
-          <button type="button" class="ec-btn delete-btn" @click="deleteEventAll">Delete</button>
+      <template v-if="dialogMode === 'create'">
-          <button type="submit" class="ec-btn save-btn">Save</button>
+        <button type="button" class="ec-btn delete-btn" @click="deleteEventAll">Delete</button>
+        <button type="submit" class="ec-btn save-btn">Save</button>
+      </template>
+      <template v-else>
+        <template v-if="showDeleteVariants">
+          <div class="ec-delete-group">
+            <button type="button" class="ec-btn delete-btn" @click="deleteEventOne">
+              Delete {{ formattedOccurrenceShort }}
+            </button>
+            <button type="button" class="ec-btn delete-btn" @click="deleteEventFrom">Rest</button>
+            <button type="button" class="ec-btn delete-btn" @click="deleteEventAll">All</button>
+          </div>
+        </template>
+        <template v-else-if="isRepeatingBaseEdit">
+          <div class="ec-delete-group">
+            <button type="button" class="ec-btn delete-btn" @click="deleteEventOne">
+              Delete {{ formattedOccurrenceShort }}
+            </button>
+            <button type="button" class="ec-btn delete-btn" @click="deleteEventAll">All</button>
+          </div>
         </template>
         <template v-else>
-          <template v-if="showDeleteVariants">
+          <button type="button" class="ec-btn delete-btn" @click="deleteEventAll">Delete</button>
-            <div class="ec-delete-group">
-              <button type="button" class="ec-btn delete-btn" @click="deleteEventOne">
-                Delete {{ formattedOccurrenceShort }}
-              </button>
-              <button type="button" class="ec-btn delete-btn" @click="deleteEventFrom">Rest</button>
-              <button type="button" class="ec-btn delete-btn" @click="deleteEventAll">All</button>
-            </div>
-          </template>
-          <template v-else-if="isRepeatingBaseEdit">
-            <div class="ec-delete-group">
-              <button type="button" class="ec-btn delete-btn" @click="deleteEventOne">
-                Delete {{ formattedOccurrenceShort }}
-              </button>
-              <button type="button" class="ec-btn delete-btn" @click="deleteEventAll">All</button>
-            </div>
-          </template>
-          <template v-else>
-            <button type="button" class="ec-btn delete-btn" @click="deleteEventAll">Delete</button>
-          </template>
-          <button type="button" class="ec-btn close-btn" @click="closeDialog">Close</button>
         </template>
-      </footer>
+        <button type="button" class="ec-btn close-btn" @click="closeDialog">Close</button>
-    </form>
+      </template>
-  </div>
+    </template>
+  </BaseDialog>
 </template>
 
 <style scoped>
-/* Modal dialog */
-.ec-modal {
-  position: fixed;
-  /* Position near bottom-right by default */
-  top: auto;
-  bottom: 5%;
-  right: 2em;
-  left: auto;
-  transform: none;
-  background: color-mix(in srgb, var(--panel) 85%, transparent);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  color: var(--ink);
-  border-radius: 0.6rem;
-  min-width: 320px;
-  max-width: min(520px, 90vw);
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
-  border: 1px solid color-mix(in srgb, var(--muted) 40%, transparent);
-  z-index: 1000;
-}
-
-.ec-form {
-  padding: 1rem;
-  display: grid;
-  gap: 0.75rem;
-}
-
-.ec-header {
-  cursor: move;
-  user-select: none;
-  padding: 0.5rem 0;
-  touch-action: none;
-}
-
-.ec-header h2 {
-  margin: 0;
-  font-size: 1.1rem;
-}
-
-.ec-body {
-  display: grid;
-  gap: 0.75rem;
-  margin-bottom: 1.5rem;
-}
-
-.ec-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.75rem;
-}
-
 .ec-field {
   display: grid;
   gap: 0.25rem;
@@ -755,18 +696,16 @@ const recurrenceSummary = computed(() => {
 
 .ec-color-swatches {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(8, 1fr);
-  gap: 0.3rem;
-  margin-bottom: 1rem;
 }
 
 .ec-color-swatches .swatch {
   display: grid;
   place-items: center;
-  border-radius: 0.4rem;
+  border-radius: 0.4em;
-  padding: 0.25rem;
+  padding: 0.25em;
-  outline: 2px solid transparent;
+  outline: 0.125em solid transparent;
-  outline-offset: 2px;
+  outline-offset: 0.125em;
   cursor: pointer;
   appearance: none;
   width: 3em;
@@ -780,15 +719,15 @@ const recurrenceSummary = computed(() => {
 .ec-footer {
   display: flex;
   justify-content: space-between;
-  gap: 0.5rem;
+  gap: 0.75em;
 }
 
 .ec-btn {
-  border: 1px solid var(--muted);
+  border: 0.0625em solid var(--muted);
   background: transparent;
   color: var(--ink);
-  padding: 0.5rem 0.8rem;
+  padding: 0.5em 0.8em;
-  border-radius: 0.4rem;
+  border-radius: 0.4em;
   cursor: pointer;
   transition: all 0.2s ease;
 }
@@ -820,7 +759,7 @@ const recurrenceSummary = computed(() => {
 
 .ec-btn.delete-btn {
   background: hsl(0, 70%, 50%);
-  color: white;
+  color: #fff;
   border-color: transparent;
   font-weight: 500;
 }
@@ -831,7 +770,7 @@ const recurrenceSummary = computed(() => {
 
 .ec-weekday-selector {
   display: grid;
-  gap: 0.5rem;
+  gap: 0.5em;
 }
 
 .ec-field-label {
@@ -842,7 +781,7 @@ const recurrenceSummary = computed(() => {
 .ec-weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  gap: 0.25rem;
+  gap: 0.25em;
 }
 
 .ec-weekday-label {
@@ -873,12 +812,12 @@ const recurrenceSummary = computed(() => {
 /* New recurrence block */
 .recurrence-block {
   display: grid;
-  gap: 0.6rem;
+  gap: 0.6em;
 }
 .recurrence-header {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.75em;
 }
 .recurrence-header .recurrence-summary {
   font-size: 0.75rem;
@@ -901,18 +840,18 @@ const recurrenceSummary = computed(() => {
 }
 .recurrence-form {
   display: grid;
-  gap: 0.6rem;
+  gap: 0.6em;
-  padding: 0.6rem 0.75rem 0.75rem;
+  padding: 0.6em 0.75em 0.75em;
-  border: 1px solid var(--muted);
+  border: 0.0625em solid var(--muted);
-  border-radius: 0.5rem;
+  border-radius: 0.5em;
   background: color-mix(in srgb, var(--muted) 15%, transparent);
 }
 .line.compact {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.5em;
   flex-wrap: wrap;
-  font-size: 0.75rem;
+  font-size: 0.75em;
 }
 .freq-select {
   padding: 0.4rem 0.55rem;

src/components/SettingsDialog.vue

@@ -0,0 +1,133 @@
+<script setup>
+import { ref, watch } from 'vue'
+import BaseDialog from './BaseDialog.vue'
+import { useCalendarStore } from '@/stores/CalendarStore'
+
+const show = ref(false)
+const calendarStore = useCalendarStore()
+
+// Local copies for editing
+const firstDay = ref(calendarStore.config.first_day)
+const weekend = ref([...calendarStore.weekend])
+
+function open() {
+  firstDay.value = calendarStore.config.first_day
+  weekend.value = [...calendarStore.weekend]
+  show.value = true
+}
+function close() {
+  show.value = false
+}
+function save() {
+  calendarStore.config.first_day = firstDay.value
+  calendarStore.weekend = [...weekend.value]
+  show.value = false
+}
+
+function toggleWeekend(idx) {
+  weekend.value[idx] = !weekend.value[idx]
+}
+
+defineExpose({ open })
+</script>
+
+<template>
+  <BaseDialog v-model="show" title="Settings">
+    <div class="setting-group">
+      <label class="ec-field">
+        <span>First day of week</span>
+        <select v-model.number="firstDay">
+          <option :value="0">Sunday</option>
+          <option :value="1">Monday</option>
+          <option :value="2">Tuesday</option>
+          <option :value="3">Wednesday</option>
+          <option :value="4">Thursday</option>
+          <option :value="5">Friday</option>
+          <option :value="6">Saturday</option>
+        </select>
+      </label>
+      <div class="weekend-select ec-field">
+        <span>Weekend days</span>
+        <div class="weekday-pills">
+          <button
+            v-for="(isW, i) in weekend"
+            :key="i"
+            type="button"
+            @click="toggleWeekend(i)"
+            :class="['pill', { active: isW }]"
+          >
+            {{ ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'][i] }}
+          </button>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="footer-row">
+        <button type="button" class="ec-btn" @click="close">Cancel</button>
+        <button type="button" class="ec-btn save-btn" @click="save">Save</button>
+      </div>
+    </template>
+  </BaseDialog>
+</template>
+
+<style scoped>
+.setting-group {
+  display: grid;
+  gap: 1rem;
+}
+.ec-field {
+  display: grid;
+  gap: 0.25rem;
+}
+.ec-field > span {
+  font-size: 0.75rem;
+  color: var(--muted);
+}
+select {
+  border: 1px solid var(--muted);
+  background: var(--panel-alt, transparent);
+  color: var(--ink);
+  padding: 0.4rem 0.5rem;
+  border-radius: 0.4rem;
+}
+.weekday-pills {
+  display: flex;
+  gap: 0.35rem;
+  flex-wrap: wrap;
+}
+.pill {
+  border: 1px solid var(--muted);
+  background: var(--panel-alt, transparent);
+  color: var(--ink);
+  padding: 0.35rem 0.6rem;
+  border-radius: 0.5rem;
+  font-size: 0.7rem;
+  cursor: pointer;
+}
+.pill.active {
+  background: var(--today);
+  color: #000;
+  border-color: var(--today);
+  font-weight: 600;
+}
+.footer-row {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  width: 100%;
+}
+.ec-btn {
+  border: 1px solid var(--muted);
+  background: transparent;
+  color: var(--ink);
+  padding: 0.5rem 0.8rem;
+  border-radius: 0.4rem;
+  cursor: pointer;
+}
+.ec-btn.save-btn {
+  background: var(--today);
+  color: #000;
+  border-color: transparent;
+  font-weight: 500;
+}
+</style>