feat: add time selection for steps in itinerary with improved styling

Author: soranjiro

apps/web/src/lib/themes/minimal/ItineraryView.svelte

@@ -54,6 +54,13 @@
     notes: "",
   });
 
+  let newStepHour = $state("09");
+  let newStepMinute = $state("00");
+
+  $effect(() => {
+    newStep.time = `${newStepHour}:${newStepMinute}`;
+  });
+
   async function handleTitleUpdate() {
     if (!editedTitle.trim() || editedTitle === itinerary.title) {
       isEditingTitle = false;
@@ -93,12 +100,16 @@
 
       // フォームをリセット
       newStep = { title: "", date: "", time: "", location: "", notes: "" };
+      newStepHour = "09";
+      newStepMinute = "00";
       isAddingStep = false;
     }
   }
 
   function cancelAddStep() {
     newStep = { title: "", date: "", time: "", location: "", notes: "" };
+    newStepHour = "09";
+    newStepMinute = "00";
     isAddingStep = false;
   }
 </script>
@@ -161,12 +172,20 @@
             class="minimal-input"
             required
           />
-          <input
-            type="time"
-            bind:value={newStep.time}
-            class="minimal-input"
-            required
-          />
+          <div class="minimal-time-picker">
+            <select bind:value={newStepHour} class="minimal-select" required>
+              {#each Array.from( { length: 24 }, (_, i) => String(i).padStart(2, "0"), ) as hour}
+                <option value={hour}>{hour}</option>
+              {/each}
+            </select>
+            <span class="minimal-time-separator">:</span>
+            <select bind:value={newStepMinute} class="minimal-select" required>
+              <option value="00">00</option>
+              <option value="15">15</option>
+              <option value="30">30</option>
+              <option value="45">45</option>
+            </select>
+          </div>
         </div>
         <input
           type="text"

apps/web/src/lib/themes/minimal/StepList.svelte

@@ -20,6 +20,14 @@
 
   let editingStepId = $state<string | null>(null);
   let editedStep = $state<Partial<Step>>({});
+  let editStepHour = $state("09");
+  let editStepMinute = $state("00");
+
+  $effect(() => {
+    if (editingStepId && editStepHour && editStepMinute) {
+      editedStep.time = `${editStepHour}:${editStepMinute}`;
+    }
+  });
 
   function formatDate(dateStr: string): string {
     const date = new Date(dateStr);
@@ -33,11 +41,16 @@
   function startEdit(step: Step) {
     editingStepId = step.id;
     editedStep = { ...step };
+    const [hour, minute] = step.time.split(":");
+    editStepHour = hour;
+    editStepMinute = minute;
   }
 
   function cancelEdit() {
     editingStepId = null;
     editedStep = {};
+    editStepHour = "09";
+    editStepMinute = "00";
   }
 
   async function handleUpdate() {
@@ -63,6 +76,8 @@
 
     editingStepId = null;
     editedStep = {};
+    editStepHour = "09";
+    editStepMinute = "00";
   }
 
   async function handleDelete(stepId: string) {
@@ -95,11 +110,20 @@
               bind:value={editedStep.date}
               class="minimal-input"
             />
-            <input
-              type="time"
-              bind:value={editedStep.time}
-              class="minimal-input"
-            />
+            <div class="minimal-time-picker">
+              <select bind:value={editStepHour} class="minimal-select">
+                {#each Array.from( { length: 24 }, (_, i) => String(i).padStart(2, "0"), ) as hour}
+                  <option value={hour}>{hour}</option>
+                {/each}
+              </select>
+              <span class="minimal-time-separator">:</span>
+              <select bind:value={editStepMinute} class="minimal-select">
+                <option value="00">00</option>
+                <option value="15">15</option>
+                <option value="30">30</option>
+                <option value="45">45</option>
+              </select>
+            </div>
           </div>
           <input
             type="text"

apps/web/src/lib/themes/minimal/theme.css

@@ -103,6 +103,28 @@
   gap: 0.5rem;
 }
 
+.minimal-time-picker {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.minimal-select {
+  padding: 0.5rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 0.875rem;
+  background: #fff;
+  cursor: pointer;
+  flex: 1;
+}
+
+.minimal-time-separator {
+  font-weight: 600;
+  color: #666;
+}
+
 .minimal-form-actions,
 .minimal-step-actions {
   display: flex;