create-mikstack 0.1.15 → 0.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-mikstack",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "license": "MIT",
   "repository": {
     "type": "git",

package/templates/base/src/routes/(app)/+page.svelte

@@ -25,6 +25,17 @@
   const notesQuery = z.q(queries.note.mine());
   const notes = $derived(notesQuery.data);
 
+  const isMac = $derived(navigator.platform.startsWith("Mac") || navigator.platform === "iPhone");
+  const isMobile = $derived(/Android|iPhone|iPad|iPod/i.test(navigator.userAgent));
+  const modLabel = $derived(isMac ? "⌘" : "Ctrl");
+
+  function submitOnModEnter(e: KeyboardEvent) {
+    if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      (e.currentTarget as HTMLFormElement).requestSubmit();
+    }
+  }
+
   let editingId = $state<string | null>(null);
 
   const noteSchema = v.object({
@@ -107,7 +118,7 @@
 
   <section>
     <h2>New note</h2>
-    <form id={createNoteForm.id} onsubmit={createNoteForm.onsubmit} class="note-form">
+    <form id={createNoteForm.id} onsubmit={createNoteForm.onsubmit} onkeydown={submitOnModEnter} class="note-form">
       <FormField for={createNoteForm.fields.title.as("text").id}>
         {#snippet label(attrs)}
           <label {...attrs}>Title</label>
@@ -141,6 +152,7 @@
       <Button type="submit" disabled={createNoteForm.pending}>
         <Plus size={16} weight="bold" />
         {createNoteForm.pending ? "Creating..." : "Create note"}
+        {#if !isMobile}<kbd>{modLabel}+Enter</kbd>{/if}
       </Button>
     </form>
   </section>
@@ -156,7 +168,7 @@
         {#each notes as note (note.id)}
           <li class="note-card">
             {#if editingId === note.id}
-              <form id={editForm.id} onsubmit={editForm.onsubmit} class="note-form">
+              <form id={editForm.id} onsubmit={editForm.onsubmit} onkeydown={submitOnModEnter} class="note-form">
                 <FormField for={editForm.fields.title.as("text").id}>
                   {#snippet label(attrs)}
                     <label {...attrs}>Title</label>
@@ -179,6 +191,7 @@
                     oninput={(e) =>
                       editForm.fields.content.set((e.target as HTMLTextAreaElement).value)}
                     value={editForm.fields.content.value() as string}
+                    autofocus
                   />
                 </FormField>
 
@@ -189,6 +202,7 @@
                 <div class="actions">
                   <Button type="submit" disabled={editForm.pending}>
                     {editForm.pending ? "Saving..." : "Save"}
+                    {#if !isMobile}<kbd>{modLabel}+Enter</kbd>{/if}
                   </Button>
                   <Button variant="ghost" type="button" onclick={cancelEdit}>
                     <X size={16} weight="bold" /> Cancel