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

@@ -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>

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>

src/screens/SettingsScreen.vue

@@ -1,22 +1,9 @@
 <script setup lang="ts">
-import { useSettings } from '../composables/useSettings.ts';
 
-const { settings } = useSettings();
 </script>
 
 <template>
-<div>
+  <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>
 </template>
 
 <style scoped>