From f5b7a3eeba77d957368e1f379475bab52f7895dc Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Tue, 19 May 2026 10:37:08 +0100
Subject: [PATCH] feat(natural-date-input): hide raw input once date is parsed

The natural-language input box kept its placeholder visible after a
date was parsed, with the green confirmation pill rendering below.
Several admins read this as "the input is empty." Hide the input once
parsedDate is set; show only the green pill with an Edit link that
clears the parse and re-opens the input.
---
 app/components/NaturalDateInput.vue | 50 ++++++++++++++++++++++++++---
 1 file changed, 46 insertions(+), 4 deletions(-)

diff --git a/app/components/NaturalDateInput.vue b/app/components/NaturalDateInput.vue
index 4e97e05..a1f814c 100644
--- a/app/components/NaturalDateInput.vue
+++ b/app/components/NaturalDateInput.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="space-y-2">
-    <div class="relative">
+    <div v-if="!parsedDate || hasError" class="relative">
       <UInput
         v-model="naturalInput"
         :placeholder="placeholder"
@@ -36,9 +36,18 @@
       class="text-sm px-3 py-2"
       style="color: var(--candle); background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
     >
-      <div class="flex items-center gap-2">
-        <Icon name="heroicons:calendar" class="w-4 h-4" />
-        <span>{{ formatParsedDate(parsedDate) }}</span>
+      <div class="flex items-center justify-between gap-2">
+        <div class="flex items-center gap-2">
+          <Icon name="heroicons:calendar" class="w-4 h-4" />
+          <span>{{ formatParsedDate(parsedDate) }}</span>
+        </div>
+        <button
+          type="button"
+          class="edit-link"
+          @click="clearAndEdit"
+        >
+          Edit
+        </button>
       </div>
     </div>
 
@@ -203,6 +212,23 @@ const setError = (message) => {
   parsedDate.value = null;
 };
 
+const clearAndEdit = () => {
+  // Pre-fill the input with a readable string so the user doesn't start over.
+  naturalInput.value = parsedDate.value
+    ? parsedDate.value.toLocaleString("en-US", {
+        month: "long",
+        day: "numeric",
+        year: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+        hour12: true,
+      })
+    : "";
+  parsedDate.value = null;
+  isValidParse.value = false;
+  hasError.value = false;
+};
+
 const formatForDatetimeLocal = (date) => {
   if (!date) return "";
   // Format as YYYY-MM-DDTHH:MM for datetime-local input
@@ -246,3 +272,19 @@ const formatParsedDate = (date) => {
   }
 };
 </script>
+
+<style scoped>
+.edit-link {
+  background: none;
+  border: none;
+  color: var(--candle);
+  cursor: pointer;
+  font-family: "Commit Mono", monospace;
+  font-size: 11px;
+  padding: 0;
+  text-decoration: underline;
+}
+.edit-link:hover {
+  color: var(--ember);
+}
+</style>