feat(register): show eight facts on desktop (keep 5 on mobile)

Author: ccamel

src/components/SurfaceActStream.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
-import { onBeforeUnmount, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import ChainPollingStatus from './ChainPollingStatus.vue'
 import SurfaceActLine from './SurfaceActLine.vue'
 import type { SurfaceAct } from '../domain/surface-act'
+import {
+  compactRegisterActWindowSize,
+  desktopRegisterActWindowSize,
+} from '../domain/surface-act-window'
 
 const props = defineProps<{
   acts: SurfaceAct[]
@@ -13,15 +17,20 @@ const props = defineProps<{
   polling: boolean
 }>()
 
-const registerActWindowSize = 5
 const visibleActs = ref<SurfaceAct[]>([])
 const pendingActs = ref<SurfaceAct[]>([])
 const typingActId = ref<string | undefined>()
 const cursorActId = ref<string | undefined>()
 const knownActIds = new Set<string>()
+const compactViewport = ref(false)
+const registerActWindowSize = computed(() =>
+  compactViewport.value ? compactRegisterActWindowSize : desktopRegisterActWindowSize,
+)
 let drainResolver: (() => void) | undefined
 let draining = false
 let drainGeneration = 0
+let compactViewportQuery: MediaQueryList | undefined
+let compactViewportChangeHandler: ((event: MediaQueryListEvent) => void) | undefined
 
 function stopDrain() {
   drainGeneration += 1
@@ -34,7 +43,7 @@ function stopDrain() {
 }
 
 function currentActs() {
-  return props.acts.slice(0, registerActWindowSize).reverse()
+  return props.acts.slice(0, registerActWindowSize.value).reverse()
 }
 
 function pruneKnownActIds() {
@@ -80,7 +89,7 @@ async function drainVisibleActs() {
     while (generation === drainGeneration && pendingActs.value.length > 0) {
       const next = pendingActs.value[0]!
       pendingActs.value = pendingActs.value.slice(1)
-      visibleActs.value = [...visibleActs.value, next].slice(-registerActWindowSize)
+      visibleActs.value = [...visibleActs.value, next].slice(-registerActWindowSize.value)
 
       if (props.reducedMotion) {
         cursorActId.value = undefined
@@ -139,8 +148,32 @@ watch(
   },
 )
 
+watch(compactViewport, () => {
+  stopDrain()
+  visibleActs.value = []
+  pendingActs.value = []
+  knownActIds.clear()
+  enqueueMissingActs()
+})
+
+onMounted(() => {
+  if (typeof window.matchMedia !== 'function') {
+    return
+  }
+
+  compactViewportQuery = window.matchMedia('(max-width: 760px)')
+  compactViewport.value = compactViewportQuery.matches
+  compactViewportChangeHandler = (event) => {
+    compactViewport.value = event.matches
+  }
+  compactViewportQuery.addEventListener('change', compactViewportChangeHandler)
+})
+
 onBeforeUnmount(() => {
   stopDrain()
+  if (compactViewportChangeHandler) {
+    compactViewportQuery?.removeEventListener('change', compactViewportChangeHandler)
+  }
 })
 </script>
 

src/components/__tests__/SurfaceActStream.spec.ts

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils'
 import { nextTick } from 'vue'
-import { describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 
 import SurfaceActLine from '../SurfaceActLine.vue'
 import SurfaceActStream from '../SurfaceActStream.vue'
@@ -26,7 +26,11 @@ function makeAct(id: string, height: number, signer: string) {
 }
 
 describe('SurfaceActStream', () => {
-  it('renders the oldest-to-newest five-record window with assertions and limited proof', async () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('renders the oldest-to-newest desktop window with assertions and limited proof', async () => {
     const oldest = makeAct('TX-1', 1, 'axone1oldest')
     const newest = makeAct('TX-2', 2, 'axone1newest')
     const wrapper = mount(SurfaceActStream, {
@@ -73,13 +77,16 @@ describe('SurfaceActStream', () => {
     expect(wrapper.findAll('.surface-act-cursor')).toHaveLength(1)
   })
 
-  it('retains only the five latest records', async () => {
+  it('retains only the eight latest desktop records', async () => {
     const acts = [
-      makeAct('TX-6', 6, 'axone1newest'),
-      makeAct('TX-5', 5, 'axone1middle'),
-      makeAct('TX-4', 4, 'axone1older'),
-      makeAct('TX-3', 3, 'axone1old'),
-      makeAct('TX-2', 2, 'axone1earlier'),
+      makeAct('TX-9', 9, 'axone1newest'),
+      makeAct('TX-8', 8, 'axone1eight'),
+      makeAct('TX-7', 7, 'axone1seven'),
+      makeAct('TX-6', 6, 'axone1six'),
+      makeAct('TX-5', 5, 'axone1five'),
+      makeAct('TX-4', 4, 'axone1four'),
+      makeAct('TX-3', 3, 'axone1three'),
+      makeAct('TX-2', 2, 'axone1two'),
       makeAct('TX-1', 1, 'axone1oldest'),
     ]
     const wrapper = mount(SurfaceActStream, {
@@ -88,9 +95,35 @@ describe('SurfaceActStream', () => {
 
     await nextTick()
 
-    expect(wrapper.findAll('.surface-act-record')).toHaveLength(5)
+    expect(wrapper.findAll('.surface-act-record')).toHaveLength(8)
     expect(wrapper.text()).not.toContain('axone1oldest')
-    expect(wrapper.text()).toContain('axone1older')
+    expect(wrapper.text()).toContain('axone1two')
     expect(wrapper.text()).toContain('axone1newest')
   })
+
+  it('shows only the five latest records on compact viewports', async () => {
+    vi.stubGlobal(
+      'matchMedia',
+      vi.fn().mockReturnValue({
+        matches: true,
+        addEventListener: () => undefined,
+        removeEventListener: () => undefined,
+      }),
+    )
+    const acts = Array.from({ length: 8 }, (_, index) => {
+      const height = 8 - index
+      return makeAct(`TX-${height}`, height, `axone1${height}`)
+    })
+    const wrapper = mount(SurfaceActStream, {
+      props: { acts, loading: false, reducedMotion: true, polling: false },
+    })
+
+    await nextTick()
+    await nextTick()
+
+    expect(wrapper.findAll('.surface-act-record')).toHaveLength(5)
+    expect(wrapper.text()).not.toContain('axone11')
+    expect(wrapper.text()).toContain('axone14')
+    expect(wrapper.text()).toContain('axone18')
+  })
 })

src/composables/__tests__/useSurfaceActs.spec.ts

@@ -110,7 +110,7 @@ describe('useSurfaceActs', () => {
     )) {
       const searchParams = new URL(String(request)).searchParams
       expect(searchParams.get('page')).toBe('1')
-      expect(searchParams.get('limit')).toBe('5')
+      expect(searchParams.get('limit')).toBe('8')
       expect(searchParams.get('pagination.limit')).toBeNull()
     }
 

src/composables/useSurfaceActs.ts

@@ -7,6 +7,7 @@ import {
   moduleAdministratorsFromInstallations,
   sortSurfaceActs,
 } from '../domain/surface-act-mapper'
+import { desktopRegisterActWindowSize } from '../domain/surface-act-window'
 import {
   fetchExecuteContractTxs,
   fetchInstantiateContract2Txs,
@@ -24,12 +25,10 @@ type UseSurfaceActsState = {
 }
 
 const pollIntervalMs = 15000
-const registerActWindowSize = 5
-
 function normalizeActs(current: SurfaceAct[], incoming: SurfaceAct[]) {
   return sortSurfaceActs(dedupeSurfaceActs([...incoming, ...current])).slice(
     0,
-    registerActWindowSize,
+    desktopRegisterActWindowSize,
   )
 }
 
@@ -82,8 +81,8 @@ export function useSurfaceActs(): UseSurfaceActsState {
 
     try {
       const [instantiateTxs, executeTxs] = await Promise.all([
-        fetchInstantiateContract2Txs(),
-        fetchExecuteContractTxs(),
+        fetchInstantiateContract2Txs(undefined, desktopRegisterActWindowSize),
+        fetchExecuteContractTxs(undefined, desktopRegisterActWindowSize),
       ])
 
       const txResponses = [...instantiateTxs.txResponses, ...executeTxs.txResponses]

src/domain/surface-act-window.ts

@@ -0,0 +1,2 @@
+export const desktopRegisterActWindowSize = 8
+export const compactRegisterActWindowSize = 5

src/styles.css

@@ -979,7 +979,7 @@
 
   .surface-act-window {
     position: relative;
-    height: 480px;
+    height: 560px;
     overflow: hidden;
     mask-image: linear-gradient(
       to bottom,