Settings dialog UX

src/components/SettingsDialog.vue

@@ -18,16 +18,38 @@ const weekend = computed({
 })
 
 function open() {
-  show.value = true
+  // Toggle behavior: if already open, close instead
+  show.value = !show.value
 }
 function close() {
   show.value = false
 }
+function resetAll() {
+  if (confirm('Delete ALL events and reset settings? This cannot be undone.')) {
+    if (typeof calendarStore.$reset === 'function') {
+      calendarStore.$reset()
+    } else {
+      // Fallback manual reset if $reset not available
+      calendarStore.today = new Date().toISOString().slice(0, 10)
+      calendarStore.now = new Date().toISOString()
+      calendarStore.events = new Map()
+      calendarStore.weekend = [6, 0] // common default (Sat/Sun) if locale helper not accessible here
+      calendarStore.config.first_day = 1
+    }
+    // Optional: close dialog after reset
+    close()
+  }
+}
 defineExpose({ open })
 </script>
 
 <template>
-  <BaseDialog v-model="show" title="Settings">
+  <BaseDialog
+    v-model="show"
+    title="Settings"
+    class="settings-modal"
+    :style="{ top: '4.5rem', right: '2rem', bottom: 'auto', left: 'auto', transform: 'none' }"
+  >
     <div class="setting-group">
       <label class="ec-field">
         <span>First day of week</span>
@@ -47,9 +69,14 @@ defineExpose({ open })
       </div>
     </div>
     <template #footer>
-      <div class="footer-row">
+      <div class="footer-row split">
+        <div class="left">
+          <button type="button" class="ec-btn delete-btn" @click="resetAll">Clear All Data</button>
+        </div>
+        <div class="right">
           <button type="button" class="ec-btn close-btn" @click="close">Close</button>
         </div>
+      </div>
     </template>
   </BaseDialog>
 </template>
@@ -81,6 +108,14 @@ select {
   gap: 0.5rem;
   width: 100%;
 }
+.footer-row.split {
+  justify-content: space-between;
+}
+.footer-row.split .left,
+.footer-row.split .right {
+  display: flex;
+  gap: 0.5rem;
+}
 .ec-btn {
   border: 1px solid var(--muted);
   background: transparent;
@@ -94,6 +129,15 @@ select {
   border-color: var(--muted);
   font-weight: 500;
 }
+.ec-btn.delete-btn {
+  background: hsl(0, 70%, 50%);
+  color: #fff;
+  border-color: transparent;
+  font-weight: 500;
+}
+.ec-btn.delete-btn:hover {
+  background: hsl(0, 70%, 45%);
+}
 
 /* Adjust WeekdaySelector size inside settings */
 ::v-deep(.weekgrid) {
@@ -110,4 +154,14 @@ select {
   background: var(--strong);
 }
 </style>
+<style>
+/* Global override to ensure settings dialog appears near top by default */
+.ec-modal.settings-modal {
+  top: 4.5rem !important;
+  right: 2rem !important;
+  bottom: auto !important;
+  left: auto !important;
+  transform: none !important;
+}
+</style>
 <!-- settings dialog -->