day timeline transitions

Author: gregdev

src/components/ActivityBlockItem.vue

@@ -98,6 +98,24 @@
     filter: brightness(1.07);
   }
 
+  .activity-leave-active {
+    transition: opacity 0.2s ease;
+    pointer-events: none;
+  }
+
+  .activity-leave-to {
+    opacity: 0;
+  }
+
+  .activity-enter-active {
+    transition: opacity 0.3s ease;
+    transition-delay: calc(0.2s + min(calc(var(--i, 0) * 20ms), 280ms));
+  }
+
+  .activity-enter-from {
+    opacity: 0;
+  }
+
   .app-name {
     display: block;
     font-size: 11px;

src/components/TimelineCanvas.vue

@@ -9,6 +9,8 @@
   import EntryTrack from './EntryTrack.vue'
   import ProjectPickerModal from './ProjectPickerModal.vue'
 
+  defineOptions({ inheritAttrs: false })
+
   const dayStore = useDayStore()
   const { totalHeight, hours, minuteToY } = useTimeline()
   const { pendingCreate, editingEntry } = useEntryModal()
@@ -71,7 +73,7 @@
 </script>
 
 <template>
-  <div class="timeline-canvas">
+  <div class="timeline-canvas" v-bind="$attrs">
     <!-- Column headers -->
     <div class="col-headers">
       <div class="ruler-spacer" />
@@ -97,11 +99,14 @@
 
         <!-- Activity track (left, read-only) -->
         <div class="activity-track" :style="{ height: totalHeight + 'px' }">
-          <ActivityBlockItem
-            v-for="(block, i) in dayStore.activityBlocks"
-            :key="i"
-            :block="block"
-          />
+          <TransitionGroup name="activity">
+            <ActivityBlockItem
+              v-for="(block, i) in dayStore.activityBlocks"
+              :key="block.startedAt"
+              :style="{ '--i': i }"
+              :block="block"
+            />
+          </TransitionGroup>
           <div v-if="!dayStore.loading && dayStore.activityBlocks.length === 0" class="empty-track">
             No activity recorded
           </div>
@@ -200,6 +205,7 @@
   .activity-track {
     position: relative;
     flex: 1;
+    overflow: hidden;
     border-left: 1px solid var(--border);
     min-width: 0;
   }

src/views/TimelineView.vue

@@ -90,11 +90,10 @@
     </div>
 
     <div class="main-area">
-      <div v-if="dayStore.loading" class="loading">Loading…</div>
-      <div v-else-if="dayStore.loadError" class="load-error">
+      <TimelineCanvas class="timeline-col" />
+      <div v-if="dayStore.loadError" class="load-error">
         Error loading data: {{ dayStore.loadError }}
       </div>
-      <TimelineCanvas v-show="!dayStore.loading && !dayStore.loadError" class="timeline-col" />
       <WindowSummary />
       <ProjectSummary />
     </div>
@@ -134,29 +133,25 @@
     display: flex;
     flex: 1;
     overflow: hidden;
+    position: relative;
   }
 
   .timeline-col {
     flex: 1;
     min-width: 0;
   }
 
-  .loading {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--text-muted);
-  }
-
   .load-error {
-    flex: 1;
+    position: absolute;
+    inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #ef4444;
     padding: 16px;
     text-align: center;
     white-space: pre-wrap;
+    background: var(--bg);
+    z-index: 20;
   }
 </style>