feat: ensure the different parts of the entries list are visible

src/components/Document/DocumentEntries/DocumentEntries.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { pickBy } from 'lodash'
-import { computed } from 'vue'
+import { computed, toValue, useTemplateRef } from 'vue'
 
 import DocumentEntriesHeader from './DocumentEntriesHeader'
 import DocumentEntriesList from './DocumentEntriesList'
@@ -39,6 +39,8 @@ const props = defineProps({
   }
 })
 
+const elementRef = useTemplateRef('element')
+
 const component = computed(() => {
   const layouts = {
     [LAYOUTS.LIST]: DocumentEntriesList,
@@ -54,10 +56,28 @@ const componentProps = computed(() => {
     return name in component.value.props
   })
 })
+
+defineExpose({
+  resetSize() {
+    return toValue(elementRef)?.resetSize?.()
+  },
+  resetListSize() {
+    return toValue(elementRef)?.resetListSize?.()
+  },
+  resetDocumentSize() {
+    return toValue(elementRef)?.resetDocumentSize?.()
+  }
+})
 </script>
 
 <template>
-  <component :is="component" v-model:selection="selection" v-bind="componentProps" class="document-entries">
+  <component
+    :is="component"
+    v-bind="componentProps"
+    ref="element"
+    v-model:selection="selection"
+    class="document-entries"
+  >
     <slot />
     <template #header>
       <document-entries-header

src/components/Document/DocumentEntries/DocumentEntriesList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useTemplateRef } from 'vue'
+import { toValue, useTemplateRef } from 'vue'
 
 import DocumentCard from '@/components/Document/DocumentCard/DocumentCard'
 import DocumentFloating from '@/components/Document/DocumentFloating'
@@ -27,14 +27,26 @@ defineProps({
 
 const scrollDocumentCardIntoView = function ({ id, index } = {}) {
   const selector = `.document-card[data-entry-id="${id}"][data-entry-index="${index}"]`
-  const card = elementRef?.value?.querySelector?.(selector)
+  const card = toValue(elementRef)?.querySelector?.(selector)
   if (card) {
     // Use nullish coalescing operator to prevent error when document card is not found
     card?.scrollIntoView({ behavior: 'auto', block: 'center' })
   }
 }
 
 watchDocument(scrollDocumentCardIntoView)
+
+defineExpose({
+  resetSize() {
+    return toValue(elementRef)?.resetSize?.()
+  },
+  resetListSize() {
+    return toValue(elementRef)?.resetStartSize?.()
+  },
+  resetDocumentSize() {
+    return toValue(elementRef)?.resetEndSize?.()
+  }
+})
 </script>
 
 <template>

src/components/Document/DocumentFloating.vue

@@ -82,15 +82,24 @@ function expand(left) {
   }
 }
 
-function reset() {
-  if (reachedZeroWidth.value || reachedFullWidth.value) {
+function resetSize() {
+  resetStartSize()
+  resetEndSize()
+}
+
+function resetStartSize() {
+  if (reachedZeroWidth.value) {
     separatorLineLeft.value = props.minWidth
   }
 }
 
-defineExpose({
-  reset
-})
+function resetEndSize() {
+  if (reachedFullWidth.value) {
+    separatorLineLeft.value = props.minWidth
+  }
+}
+
+defineExpose({ resetSize, resetStartSize, resetEndSize })
 </script>
 
 <template>

src/components/ScrollTracker.vue

@@ -42,7 +42,9 @@ export default {
     },
     scrollToTarget() {
       this.hide()
-      VueScrollTo.scrollTo(this.target, 200, { offset: this.offset, container: this.container })
+      if (this.target) {
+        VueScrollTo.scrollTo(this.target, 200, { offset: this.offset, container: this.container })
+      }
     },
     toggle(toggler = !this.visible) {
       return toggler ? this.show() : this.hide()

src/views/Search/Search.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, toValue, useTemplateRef } from 'vue'
 import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
 
@@ -21,8 +21,9 @@ import { useViews } from '@/composables/views'
 import { LAYOUTS } from '@/enums/layouts'
 
 const { toggleSettings, toggleFilters, toggleSidebar, isFiltersClosed } = useViews()
-const { provideDocumentViewFloatingId } = useDocument()
+const { provideDocumentViewFloatingId, watchDocument } = useDocument()
 const { refreshRoute, refreshSearchFromRoute, resetSearchResponse, watchProjects } = useSearchFilter()
+const entriesRef = useTemplateRef('entries')
 const store = useStore()
 const route = useRoute()
 
@@ -45,7 +46,7 @@ const entries = computed(() => store.state.search.response.hits)
 const properties = computed(() => store.getters['app/getSettings']('search', 'properties'))
 const layout = computed(() => store.getters['app/getSettings']('search', 'layout'))
 const loading = computed(() => !store.state.search.isReady)
-const hasNav = computed(() => layout.value === LAYOUTS.LIST)
+const hasNav = computed(() => toValue(layout) === LAYOUTS.LIST)
 const hasDocumentInModal = computed(() => layout.value !== LAYOUTS.LIST)
 
 const selection = ref([])
@@ -54,7 +55,7 @@ const selectMode = ref(false)
 const total = computed(() => parseInt(store.state.search.response.total))
 const perPage = computed(() => parseInt(store.getters['app/getSettings']('search', 'perPage')))
 const page = useUrlPageFromWithStore({
-  perPage: perPage.value,
+  perPage: toValue(perPage),
   // The "from" query parameter is updated to reflect the current state
   // which while force the route to redirect to "search".
   to: 'search',
@@ -66,6 +67,14 @@ const page = useUrlPageFromWithStore({
 
 const documentViewFloatingId = provideDocumentViewFloatingId()
 
+const resetEntriesListSize = () => toValue(entriesRef)?.resetListSize?.()
+const resetDocumentSize = () => toValue(entriesRef)?.resetDocumentSize?.()
+
+// The user might have resized the entries list or the document view. When the search is updated
+// or a new document is loaded, we need to reset original size to ensure that they are displayed.
+watch(() => route.query, whenIsRoute('search', resetEntriesListSize), { deep: true, immediate: true })
+watchDocument(resetDocumentSize)
+
 // Reset the search response when the component is mounted to ensure that the displayed search result
 // are always up-to-date with the current route query. This is important because the search response
 // can still be populated with the previous search results.
@@ -76,6 +85,7 @@ resetSearchResponse()
 // which mean that only route change can trigger a search.
 watch(() => route.query, whenIsRoute('search', refreshSearchFromRoute), { deep: true, immediate: true })
 
+
 // Refresh route query when filter values change
 watch(() => store.state.search.values, refreshRoute, { deep: true })
 // Refresh route query when reversed filters change
@@ -104,6 +114,7 @@ watchProjects(refreshRoute)
         </div>
         <div class="search__main__results">
           <document-entries
+            ref="entries"
             v-model:page="page"
             v-model:select-mode="selectMode"
             :entries="entries"