start at 3am

src/App.vue

@@ -10,11 +10,13 @@ import { FolderOpen, Settings, Play, Pause, Maximize2, X, RefreshCw } from "luci
 interface TimelineItem {
   time: string; // "HH:mm:ss"
   path: string;
+  isNextDay?: boolean;
 }
 
 const PIXELS_PER_MINUTE = 1.5; // Controls the vertical stretch of the timeline
 const TOTAL_MINUTES = 24 * 60;
 const RULER_HEIGHT = TOTAL_MINUTES * PIXELS_PER_MINUTE;
+const TIME_OFFSET_MINUTES = 3 * 60; // 03:00 logical day start
 
 // --- State ---
 const isSetupComplete = ref(false);
@@ -23,7 +25,7 @@ const isPaused = ref(false);
 const currentDate = ref(new Date().toISOString().split("T")[0]);
 const timelineImages = ref<TimelineItem[]>([]);
 const selectedImage = ref<TimelineItem | null>(null);
-const lockedImage = ref<TimelineItem | null>(null); // State for the clicked/locked point
+const lockedImage = ref<TimelineItem | null>(null);
 const previewSrc = ref("");
 const isFullscreen = ref(false);
 const isSettingsOpen = ref(false);
@@ -47,10 +49,7 @@ onMounted(async () => {
     mergeScreens.value = (await store.get("mergeScreens")) as boolean || false;
     retainDays.value = (await store.get("retainDays")) as number || 30;
     captureInterval.value = (await store.get("captureInterval")) as number || 30;
-    
-    // Sync initial interval to Rust
     await invoke("update_interval", { seconds: captureInterval.value });
-    
     isPaused.value = await invoke("get_pause_state");
     await loadTimeline();
   }
@@ -59,7 +58,6 @@ onMounted(async () => {
     isPaused.value = event.payload;
   });
 
-  // Listen for refresh triggers if any
   captureUnlisten = await listen("refresh-timeline", () => {
     loadTimeline();
   });
@@ -85,8 +83,6 @@ const updateSettings = async () => {
   await store.set("retainDays", retainDays.value);
   await store.set("captureInterval", captureInterval.value);
   await store.save();
-  
-  // Sync interval to Rust
   await invoke("update_interval", { seconds: captureInterval.value });
 };
 
@@ -102,16 +98,13 @@ const loadTimeline = async () => {
   });
 };
 
-// Internal function to update preview with caching/optimization
 const updatePreview = async (img: TimelineItem | null) => {
   if (!img) {
     selectedImage.value = null;
     previewSrc.value = "";
     return;
   }
-  
   if (selectedImage.value?.path === img.path && previewSrc.value) return;
-  
   selectedImage.value = img;
   try {
     const base64 = await invoke("get_image_base64", { path: img.path });
@@ -121,23 +114,30 @@ const updatePreview = async (img: TimelineItem | null) => {
   }
 };
 
-// --- Timeline Helper Functions ---
-const timeToMinutes = (timeStr: string) => {
+// --- Helper Functions for Logical Day ---
+
+// Converts absolute HH:mm to minutes relative to 03:00 start
+const timeToLogicalMinutes = (timeStr: string, isNextDay = false) => {
   const [h, m] = timeStr.split(":").map(Number);
-  return h * 60 + m;
+  let total = h * 60 + m;
+  if (isNextDay) total += 24 * 60;
+  return total - TIME_OFFSET_MINUTES;
 };
 
-const minutesToTime = (totalMinutes: number) => {
-  const h = Math.floor(totalMinutes / 60);
-  const m = Math.floor(totalMinutes % 60);
+// Converts logical minutes (0 to 1439) back to HH:mm
+const logicalMinutesToTime = (logicalMinutes: number) => {
+  let total = logicalMinutes + TIME_OFFSET_MINUTES;
+  total = total % (24 * 60);
+  const h = Math.floor(total / 60);
+  const m = Math.floor(total % 60);
   return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
 };
 
-const findClosestImage = (minutes: number) => {
+const findClosestImage = (logicalMin: number) => {
   if (timelineImages.value.length === 0) return null;
   return timelineImages.value.reduce((prev, curr) => {
-    const prevDiff = Math.abs(timeToMinutes(prev.time) - minutes);
-    const currDiff = Math.abs(timeToMinutes(curr.time) - minutes);
+    const prevDiff = Math.abs(timeToLogicalMinutes(prev.time, prev.isNextDay) - logicalMin);
+    const currDiff = Math.abs(timeToLogicalMinutes(curr.time, curr.isNextDay) - logicalMin);
     return currDiff < prevDiff ? curr : prev;
   }, timelineImages.value[0]);
 };
@@ -146,32 +146,27 @@ const handleTimelineMouseMove = (e: MouseEvent) => {
   if (!timelineRef.value) return;
   const rect = timelineRef.value.getBoundingClientRect();
   const y = e.clientY - rect.top + timelineRef.value.scrollTop;
-  const minutes = Math.floor(y / PIXELS_PER_MINUTE);
+  const logicalMin = Math.floor(y / PIXELS_PER_MINUTE);
   
-  if (minutes >= 0 && minutes < TOTAL_MINUTES) {
-    hoveredTime.value = minutesToTime(minutes);
-    const closest = findClosestImage(minutes);
-    if (closest) {
-      updatePreview(closest);
-    }
+  if (logicalMin >= 0 && logicalMin < TOTAL_MINUTES) {
+    hoveredTime.value = logicalMinutesToTime(logicalMin);
+    const closest = findClosestImage(logicalMin);
+    if (closest) updatePreview(closest);
   }
 };
 
 const handleTimelineMouseLeave = () => {
   hoveredTime.value = null;
-  // Revert to locked image if exists, otherwise keep current
-  if (lockedImage.value) {
-    updatePreview(lockedImage.value);
-  }
+  if (lockedImage.value) updatePreview(lockedImage.value);
 };
 
 const handleTimelineClick = (e: MouseEvent) => {
   if (!timelineRef.value) return;
   const rect = timelineRef.value.getBoundingClientRect();
   const y = e.clientY - rect.top + timelineRef.value.scrollTop;
-  const minutes = Math.floor(y / PIXELS_PER_MINUTE);
+  const logicalMin = Math.floor(y / PIXELS_PER_MINUTE);
   
-  const closest = findClosestImage(minutes);
+  const closest = findClosestImage(logicalMin);
   if (closest) {
     lockedImage.value = closest;
     updatePreview(closest);
@@ -229,13 +224,13 @@ const handleTimelineClick = (e: MouseEvent) => {
         >
           <!-- Ruler Canvas -->
           <div :style="{ height: RULER_HEIGHT + 'px' }" class="relative ml-16">
-            <!-- Hour Markers -->
+            <!-- Hour Markers (Starting from 03:00) -->
             <div v-for="h in 24" :key="h" 
               class="absolute left-0 w-full border-t border-[#E5E5E7]/60 flex items-start"
               :style="{ top: (h-1) * 60 * PIXELS_PER_MINUTE + 'px' }"
             >
               <span class="absolute -left-12 -top-2.5 text-[10px] font-bold text-[#86868B] tracking-tighter">
-                {{ String(h-1).padStart(2, '0') }}:00
+                {{ String((h - 1 + 3) % 24).padStart(2, '0') }}:00
               </span>
             </div>
 
@@ -248,14 +243,14 @@ const handleTimelineClick = (e: MouseEvent) => {
                 selectedImage?.path === img.path ? 'bg-[#007AFF]/60 h-2 shadow-sm z-10' : '',
                 lockedImage?.path === img.path ? 'bg-[#007AFF] h-2.5 ring-2 ring-[#007AFF]/20 z-20' : ''
               ]"
-              :style="{ top: timeToMinutes(img.time) * PIXELS_PER_MINUTE + 'px' }"
+              :style="{ top: timeToLogicalMinutes(img.time, img.isNextDay) * PIXELS_PER_MINUTE + 'px' }"
             ></div>
 
             <!-- Hover Cursor Line -->
             <div 
               v-if="hoveredTime"
               class="absolute left-0 right-0 border-t-2 border-[#007AFF] z-30 pointer-events-none"
-              :style="{ top: timeToMinutes(hoveredTime) * PIXELS_PER_MINUTE + 'px' }"
+              :style="{ top: timeToLogicalMinutes(hoveredTime, hoveredTime < '03:00' && hoveredTime >= '00:00' && hoveredTime !== '03:00') * PIXELS_PER_MINUTE + 'px' }"
             >
                <div class="absolute -left-14 -top-3 bg-[#007AFF] text-white text-[10px] px-1.5 py-0.5 rounded font-bold shadow-sm">
                  {{ hoveredTime }}