chore: hiding entry details on history change

src/components/JournalView/JournalTimetables/EntryDetails.vue

@@ -165,6 +165,7 @@ export default defineComponent({
 .details-actions {
   display: flex;
   gap: 0.5em;
+  margin-top: 1em;
 
   button img {
     height: 1.25em;

src/components/JournalView/JournalTimetables/JournalTimetableEntry.vue

@@ -27,12 +27,13 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import { API } from '../../../typings/api';
-import trainCategoryMixin from '../../../mixins/trainCategoryMixin';
-import dateMixin from '../../../mixins/dateMixin';
 import { useApiStore } from '../../../store/apiStore';
 import { Journal } from '../typings';
 
+import trainCategoryMixin from '../../../mixins/trainCategoryMixin';
+import dateMixin from '../../../mixins/dateMixin';
 import styleMixin from '../../../mixins/styleMixin';
+
 import EntryGeneral from './EntryGeneral.vue';
 import EntryStatus from './EntryStatus.vue';
 import EntryDetails from './EntryDetails.vue';
@@ -126,7 +127,7 @@ export default defineComponent({
 
   methods: {
     toggleExtraInfo() {
-      this.$emit('toggleShowExtraInfo', this.timetableEntry.id);
+      this.$emit('toggleShowExtraInfo');
     }
   }
 });

src/components/JournalView/JournalTimetables/JournalTimetablesList.vue

@@ -19,10 +19,10 @@
         <ul v-else class="journal-list">
           <transition-group name="list-anim">
             <JournalTimetableEntry
-              v-for="timetableEntry in timetableHistory"
+              v-for="(timetableEntry, i) in timetableHistory"
               :key="timetableEntry.id"
               :timetableEntry="timetableEntry"
-              :onToggleShowExtraInfo="toggleExtraInfo"
+              :onToggleShowExtraInfo="() => toggleExtraInfo(timetableEntry.id)"
               :showExtraInfo="extraInfoIndexes.includes(timetableEntry.id)"
             />
           </transition-group>
@@ -90,6 +90,14 @@ export default defineComponent({
     };
   },
 
+  watch: {
+    timetableHistory: {
+      deep: true,
+      handler() {
+        this.extraInfoIndexes.length = 0;
+      }
+    }
+  },
   methods: {
     toggleExtraInfo(id: number) {
       const existingIdx = this.extraInfoIndexes.indexOf(id);