add

frontend/src/App.vue

@@ -8,7 +8,7 @@ const listUrl = ref('')
 const copied = ref(false)
 
 const items = ref([])
-const newName = ref('')
+const newItemNames = ref({})
 
 const editingId = ref(null)
 const editName = ref('')
@@ -16,7 +16,6 @@ const editName = ref('')
 const sublists = ref([])
 const newSublistName = ref('')
 const newSublistColor = ref('#16a34a')
-const newItemSublistId = ref('')
 const collapsed = ref(new Set())
 
 const recurring = ref([])
@@ -51,10 +50,6 @@ const groups = computed(() => {
   return [...bySublist.values()]
 })
 
-const newItemSublistColor = computed(() => {
-  return newItemSublistId.value ? colorOf(Number(newItemSublistId.value)) : 'transparent'
-})
-
 const openListInput = ref('')
 const openListError = ref('')
 
@@ -147,9 +142,6 @@ async function loadSublists() {
   sublists.value = await res.json()
 
   const defaultId = sublists.value[0]?.id ?? ''
-  if (!sublists.value.some((s) => s.id === newItemSublistId.value)) {
-    newItemSublistId.value = defaultId
-  }
   if (!sublists.value.some((s) => s.id === newRecurringSublistId.value)) {
     newRecurringSublistId.value = defaultId
   }
@@ -252,18 +244,20 @@ async function removeRecurring(recur) {
   recurring.value = recurring.value.filter((r) => r.id !== recur.id)
 }
 
-async function addItem() {
-  if (!newName.value.trim()) return
+async function addItem(group) {
+  const key = groupKey(group)
+  const name = (newItemNames.value[key] || '').trim()
+  if (!name) return
   const res = await fetch(`/api/lists/${listId.value}/items`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({
-      name: newName.value.trim(),
-      sublist_id: newItemSublistId.value ? Number(newItemSublistId.value) : null,
+      name,
+      sublist_id: group.sublist ? group.sublist.id : null,
     }),
   })
   items.value.push(await res.json())
-  newName.value = ''
+  newItemNames.value[key] = ''
 }
 
 async function toggleDone(item) {
@@ -669,15 +663,6 @@ onMounted(init)
   <main v-else>
     <h1>skeps</h1>
 
-    <form class="add-item-bar" @submit.prevent="addItem">
-      <input v-model="newName" type="text" placeholder="Add an item" />
-      <span class="dot" :style="{ background: newItemSublistColor }"></span>
-      <select class="item-sublist" v-model="newItemSublistId">
-        <option v-for="s in sublists" :key="s.id" :value="s.id">{{ s.name }}</option>
-      </select>
-      <button type="submit">Add</button>
-    </form>
-
     <template v-for="group in groups" :key="groupKey(group)">
       <div
         v-if="sublists.length"
@@ -730,6 +715,13 @@ onMounted(init)
             />
           </div>
         </li>
+
+        <li class="add-item-row">
+          <form class="add-item-bar" @submit.prevent="addItem(group)">
+            <input v-model="newItemNames[groupKey(group)]" type="text" placeholder="Add an item" />
+            <button type="submit">Add</button>
+          </form>
+        </li>
       </ul>
     </template>
 
@@ -958,20 +950,14 @@ body {
 main {
   max-width: 480px;
   margin: 2rem auto;
-  padding: calc(env(safe-area-inset-top) + 4.25rem) 1rem env(safe-area-inset-bottom);
+  padding: calc(env(safe-area-inset-top) + 1rem) 1rem env(safe-area-inset-bottom);
   font-family: sans-serif;
 }
+.add-item-row {
+  padding: 0.5rem 0.35rem;
+}
 .add-item-bar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 20;
-  max-width: 480px;
-  margin: 0 auto;
-  padding: calc(env(safe-area-inset-top) + 0.75rem) 1rem 0.75rem;
-  background: var(--bg);
-  border-bottom: 1px solid var(--border);
+  margin: 0;
 }
 .theme-picker {
   display: block;