From 5c23661a396d010aea8cf0eb19e08cf09a571b43 Mon Sep 17 00:00:00 2001
From: Paul Spenke <paul@spenke-nordic.com>
Date: Mon, 23 Feb 2026 20:03:04 +0100
Subject: [PATCH] Add `SettingsModal` component and integrate with `App.vue`

- Introduced `SettingsModal.vue` for managing user settings with a responsive dialog interface.
- Updated `App.vue` to include `SettingsModal` and support easy access to settings.
- Removed outdated form implementation in `SettingsScreen.vue` to streamline settings handling.
---
 src/App.vue                      |  2 ++
 src/components/SettingsModal.vue | 56 ++++++++++++++++++++++++++++++++
 src/screens/SettingsScreen.vue   | 15 +--------
 3 files changed, 59 insertions(+), 14 deletions(-)
 create mode 100644 src/components/SettingsModal.vue

diff --git a/src/App.vue b/src/App.vue
index 8a87a96..a9a2d1e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,6 +5,7 @@ import { useRouter } from 'vue-router'
 import CreateInput from './components/CreateInput.vue'
 import CreateModal from './components/CreateModal.vue'
 
+import SettingsModal from './components/SettingsModal.vue'
 import { useTasks } from './composables/useTasks.ts'
 
 const isMobile = useMediaQuery('(pointer: coarse)')
@@ -24,5 +25,6 @@ onMounted(fetchTasks)
       <CreateModal v-if="isMobile" />
       <CreateInput v-else />
     </template>
+    <SettingsModal />
   </div>
 </template>
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
new file mode 100644
index 0000000..c7b431d
--- /dev/null
+++ b/src/components/SettingsModal.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { PhX } from '@phosphor-icons/vue'
+import { onKeyStroke, useMagicKeys, whenever } from '@vueuse/core'
+
+import { useTemplateRef } from 'vue'
+import { useSettings } from '../composables/useSettings.ts'
+
+const { settings } = useSettings()
+
+const settingsModal = useTemplateRef('settingsModal')
+
+const keys = useMagicKeys()
+
+whenever(keys.meta_slash, () => {
+  settingsModal?.value?.showModal()
+})
+
+onKeyStroke('Escape', (e) => {
+  if (settingsModal?.value?.open) {
+    e.preventDefault()
+    settingsModal?.value?.close()
+  }
+})
+</script>
+
+<template>
+  <div>
+    <dialog ref="settingsModal" class="modal">
+      <div class="modal-box">
+        <form method="dialog">
+          <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
+            <PhX size="24" />
+          </button>
+        </form>
+        <form @submit.prevent>
+          <fieldset class="fieldset">
+            <legend class="fieldset-legend">
+              Username
+            </legend>
+            <input v-model="settings.username" type="text" class="input" name="username">
+          </fieldset>
+          <fieldset class="fieldset">
+            <legend class="fieldset-legend">
+              Password
+            </legend>
+            <input v-model="settings.password" type="text" class="input" name="password">
+          </fieldset>
+        </form>
+      </div>
+    </dialog>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/screens/SettingsScreen.vue b/src/screens/SettingsScreen.vue
index a6316f0..5f6ea40 100644
--- a/src/screens/SettingsScreen.vue
+++ b/src/screens/SettingsScreen.vue
@@ -1,22 +1,9 @@
 <script setup lang="ts">
-import { useSettings } from '../composables/useSettings.ts';
 
-const { settings } = useSettings();
 </script>
 
 <template>
-<div>
-  <form>
-    <fieldset class="fieldset">
-      <legend class="fieldset-legend">Username</legend>
-      <input v-model="settings.username" type="text" class="input" name="username" />
-    </fieldset>
-    <fieldset class="fieldset">
-      <legend class="fieldset-legend">Password</legend>
-      <input v-model="settings.password" type="text" class="input" name="password" />
-    </fieldset>
-  </form>
-</div>
+  <div />
 </template>
 
 <style scoped>