Maintenance: Desktop view - Show ticket header details on initial load

app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/useArticleContainerScroll.ts

@@ -1,7 +1,15 @@
 // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
 
 import { useScroll, useThrottleFn, whenever } from '@vueuse/core'
-import { computed, type Ref, ref, type ShallowRef, watch } from 'vue'
+import {
+  computed,
+  onMounted,
+  onActivated,
+  type Ref,
+  ref,
+  type ShallowRef,
+  watch,
+} from 'vue'
 
 import type { TicketById } from '#shared/entities/ticket/types.ts'
 
@@ -20,6 +28,8 @@ export const useArticleContainerScroll = (
 ) => {
   const THROTTLE_TIME = 250
 
+  let hasMounted = false
+
   const { arrivedState } = useScroll(contentContainerElement, {
     eventListenerOptions: { passive: true },
   })
@@ -49,6 +59,12 @@ export const useArticleContainerScroll = (
   })
 
   const handleScroll = useThrottleFn((event: Event) => {
+    // Makes sure we always show the details on initial render and reactivated component.
+    if (!hasMounted) {
+      hasMounted = true
+      return
+    }
+
     const container = event.target! as HTMLDivElement
 
     const { scrollHeight, clientHeight } = container
@@ -70,17 +86,6 @@ export const useArticleContainerScroll = (
     previousPosition.value = scrollTop
   }, THROTTLE_TIME)
 
-  watch(
-    () => arrivedState.bottom,
-    (value) => {
-      isReachingBottom.value = !value
-
-      if (isHoveringOnTopBar.value) return
-
-      isHidingTicketDetails.value = true
-    },
-  )
-
   whenever(
     () => arrivedState.top,
     () => {
@@ -90,6 +95,13 @@ export const useArticleContainerScroll = (
     },
   )
 
+  watch(
+    () => arrivedState.bottom,
+    (value) => {
+      isReachingBottom.value = !value
+    },
+  )
+
   watch(
     () => ticket.value?.id,
     () => {
@@ -127,6 +139,16 @@ export const useArticleContainerScroll = (
     },
   )
 
+  onMounted(() => {
+    hasMounted = false
+    isHidingTicketDetails.value = false
+  })
+
+  onActivated(() => {
+    hasMounted = false
+    isHidingTicketDetails.value = false
+  })
+
   return {
     handleScroll,
     isHoveringOnTopBar,

i18n/zammad.pot

@@ -7634,7 +7634,7 @@ msgid "Including private key."
 msgstr ""
 
 #: app/assets/javascripts/app/controllers/ticket_zoom/checklist_modal.coffee:10
-#: app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/TicketDetailViewContent.vue:362
+#: app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/TicketDetailViewContent.vue:367
 msgid "Incomplete Ticket Checklist"
 msgstr ""
 
@@ -10078,7 +10078,7 @@ msgid "No x-zammad-session-user-id, no sender set!"
 msgstr ""
 
 #: app/assets/javascripts/app/controllers/ticket_zoom/checklist_modal.coffee:8
-#: app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/TicketDetailViewContent.vue:365
+#: app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/TicketDetailViewContent.vue:370
 msgid "No, just close the ticket"
 msgstr ""
 
@@ -15995,7 +15995,7 @@ msgid "Ticket update failed."
 msgstr ""
 
 #: app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/TicketDetailTopBar/useTicketEditTitle.ts:27
-#: app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/TicketDetailViewContent.vue:460
+#: app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/TicketDetailViewContent.vue:463
 #: app/frontend/apps/mobile/pages/ticket/views/TicketDetailView.vue:174
 msgid "Ticket updated successfully."
 msgstr ""
@@ -17746,7 +17746,7 @@ msgid "Yes, add attachments now"
 msgstr ""
 
 #: app/assets/javascripts/app/controllers/ticket_zoom/checklist_modal.coffee:5
-#: app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/TicketDetailViewContent.vue:364
+#: app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/TicketDetailViewContent.vue:369
 msgid "Yes, open the checklist"
 msgstr ""
 
@@ -17964,7 +17964,7 @@ msgstr ""
 msgid "You have unchecked items in the checklist."
 msgstr ""
 
-#: app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/TicketDetailViewContent.vue:359
+#: app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/TicketDetailViewContent.vue:364
 msgid "You have unchecked items in the checklist. Do you want to handle them before closing this ticket?"
 msgstr ""