From aad775d4f47a9bdbd7a212f7929d980162e379bd Mon Sep 17 00:00:00 2001
From: Julian Freeman <freemanjulian372@gmail.com>
Date: Sun, 22 Mar 2026 18:29:45 -0400
Subject: [PATCH] time auto scroll

---
 src/App.vue | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ab9b55c..0cb4397 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from "vue";
+import { ref, onMounted, onUnmounted, computed, nextTick } from "vue";
 import { load } from "@tauri-apps/plugin-store";
 import { open, save } from "@tauri-apps/plugin-dialog";
 import { invoke } from "@tauri-apps/api/core";
@@ -65,6 +65,26 @@ const calendarMonth = ref(new Date());
 const isStartTimeOpen = ref(false);
 const isEndTimeOpen = ref(false);
 
+const openStartTimePicker = async () => {
+  isStartTimeOpen.value = !isStartTimeOpen.value;
+  isEndTimeOpen.value = false;
+  if (isStartTimeOpen.value) {
+    await nextTick();
+    const activeItems = document.querySelectorAll('.z-\\[120\\] .bg-\\[\\#007AFF\\].text-white');
+    activeItems.forEach(el => el.scrollIntoView({ block: 'center' }));
+  }
+};
+
+const openEndTimePicker = async () => {
+  isEndTimeOpen.value = !isEndTimeOpen.value;
+  isStartTimeOpen.value = false;
+  if (isEndTimeOpen.value) {
+    await nextTick();
+    const activeItems = document.querySelectorAll('.z-\\[120\\] .bg-\\[\\#007AFF\\].text-white');
+    activeItems.forEach(el => el.scrollIntoView({ block: 'center' }));
+  }
+};
+
 const calendarDays = computed(() => {
   const y = calendarMonth.value.getFullYear();
   const m = calendarMonth.value.getMonth();
@@ -384,7 +404,7 @@ const isTagSelectOpen = ref(false);
             <!-- Start Time Custom Picker -->
             <div class="flex-1 space-y-1 relative">
               <label class="text-[10px] font-bold text-[#86868B]">开始时间</label>
-              <button @click="isStartTimeOpen = !isStartTimeOpen; isEndTimeOpen = false" 
+              <button @click="openStartTimePicker" 
                 class="w-full h-12 bg-[#F2F2F7] rounded-xl px-4 flex items-center justify-center gap-2 hover:bg-[#E5E5E7] transition-all border border-transparent focus:border-[#007AFF]/30">
                 <!-- <Clock :size="14" class="text-[#86868B] block" /> -->
                 <span class="text-sm font-bold leading-none">{{ startTimeInput }}</span>
@@ -412,7 +432,7 @@ const isTagSelectOpen = ref(false);
             <!-- End Time Custom Picker -->
             <div class="flex-1 space-y-1 relative">
               <label class="text-[10px] font-bold text-[#86868B]">结束时间</label>
-              <button @click="isEndTimeOpen = !isEndTimeOpen; isStartTimeOpen = false" 
+              <button @click="openEndTimePicker" 
                 class="w-full h-12 bg-[#F2F2F7] rounded-xl px-4 flex items-center justify-center gap-2 hover:bg-[#E5E5E7] transition-all border border-transparent focus:border-[#007AFF]/30">
                 <!-- <Clock :size="14" class="text-[#86868B] block" /> -->
                 <span class="text-sm font-bold leading-none">{{ endTimeInput }}</span>