Add permalink highlighting - `?at=$xxx` (#123)

ex.
```
http://localhost:3050/r/test-room1:my.synapse.server/date/2022/07/28?at=$O9fDg42JoSh9VdcL820FDUS0Gi_CkPt_hrN1pK1fPEY
````

Fix https://github.com/matrix-org/matrix-public-archive/issues/4

Split out from https://github.com/matrix-org/matrix-public-archive/pull/121

package-lock.json

@@ -21,7 +21,7 @@
         "@opentelemetry/semantic-conventions": "^1.3.1",
         "dompurify": "^2.3.9",
         "express": "^4.17.2",
-        "hydrogen-view-sdk": "npm:@mlm/hydrogen-view-sdk@^0.21.0-scratch",
+        "hydrogen-view-sdk": "npm:@mlm/hydrogen-view-sdk@^0.22.0-scratch",
         "json5": "^2.2.1",
         "linkedom": "^0.14.17",
         "matrix-public-archive-shared": "file:./shared/",
@@ -3640,9 +3640,9 @@
     },
     "node_modules/hydrogen-view-sdk": {
       "name": "@mlm/hydrogen-view-sdk",
-      "version": "0.21.0-scratch",
+      "version": "0.22.0-scratch",
-      "resolved": "https://registry.npmjs.org/@mlm/hydrogen-view-sdk/-/hydrogen-view-sdk-0.21.0-scratch.tgz",
+      "resolved": "https://registry.npmjs.org/@mlm/hydrogen-view-sdk/-/hydrogen-view-sdk-0.22.0-scratch.tgz",
-      "integrity": "sha512-TxGl1AhzfCLkcea2wnVLGTW8pGZOlqFSLQK8nUCN/gRZQmMOWf60l5ZUCfR4HAZHZkUGW7VKR6XKkYMjojmOwg==",
+      "integrity": "sha512-jY0R2e9QLXcjtSFk33TGHOIkCuhv7QCGhbYFzSYzITCc7LVIhgeQ0GvPACn3Upt2QO+Oniay+umJkUhsyuHfbA==",
       "dependencies": {
         "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
         "another-json": "^0.2.0",
@@ -8091,9 +8091,9 @@
       }
     },
     "hydrogen-view-sdk": {
-      "version": "npm:@mlm/hydrogen-view-sdk@0.21.0-scratch",
+      "version": "npm:@mlm/hydrogen-view-sdk@0.22.0-scratch",
-      "resolved": "https://registry.npmjs.org/@mlm/hydrogen-view-sdk/-/hydrogen-view-sdk-0.21.0-scratch.tgz",
+      "resolved": "https://registry.npmjs.org/@mlm/hydrogen-view-sdk/-/hydrogen-view-sdk-0.22.0-scratch.tgz",
-      "integrity": "sha512-TxGl1AhzfCLkcea2wnVLGTW8pGZOlqFSLQK8nUCN/gRZQmMOWf60l5ZUCfR4HAZHZkUGW7VKR6XKkYMjojmOwg==",
+      "integrity": "sha512-jY0R2e9QLXcjtSFk33TGHOIkCuhv7QCGhbYFzSYzITCc7LVIhgeQ0GvPACn3Upt2QO+Oniay+umJkUhsyuHfbA==",
       "requires": {
         "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
         "another-json": "^0.2.0",

package.json

@@ -47,7 +47,7 @@
     "@opentelemetry/semantic-conventions": "^1.3.1",
     "dompurify": "^2.3.9",
     "express": "^4.17.2",
-    "hydrogen-view-sdk": "npm:@mlm/hydrogen-view-sdk@^0.21.0-scratch",
+    "hydrogen-view-sdk": "npm:@mlm/hydrogen-view-sdk@^0.22.0-scratch",
     "json5": "^2.2.1",
     "linkedom": "^0.14.17",
     "matrix-public-archive-shared": "file:./shared/",

shared/hydrogen-vm-render-script.js

@@ -56,7 +56,7 @@ async function mountHydrogen() {
   const appElement = document.querySelector('#app');
 
   const qs = new URLSearchParams(window?.location?.search);
-  const scrollStartPosition = qs.get('continue');
+  const scrollStartEventId = qs.get('at');
 
   const platformConfig = {};
   const assetPaths = {};
@@ -126,7 +126,7 @@ async function mountHydrogen() {
     // The timestamp from the URL that was originally visited
     dayTimestampFrom: fromTimestamp,
     dayTimestampTo: toTimestamp,
-    scrollStartPosition,
+    scrollStartEventId,
     events,
     stateEventMap,
     shouldIndex,

shared/lib/url-creator.js

@@ -65,7 +65,7 @@ class URLCreator {
     return `${urlJoin(this._basePath, `${urlPath}`)}${qsToUrlPiece(qs)}`;
   }
 
-  archiveUrlForDate(roomIdOrAlias, date, { viaServers = [], scrollStartPosition } = {}) {
+  archiveUrlForDate(roomIdOrAlias, date, { viaServers = [], scrollStartEventId } = {}) {
     assert(roomIdOrAlias);
     assert(date);
 
@@ -73,8 +73,8 @@ class URLCreator {
     [].concat(viaServers).forEach((viaServer) => {
       qs.append('via', viaServer);
     });
-    if (scrollStartPosition) {
+    if (scrollStartEventId) {
-      qs.append('continue', scrollStartPosition);
+      qs.append('at', scrollStartEventId);
     }
 
     const urlPath = this._getArchiveUrlPathForRoomIdOrAlias(roomIdOrAlias);
@@ -86,15 +86,7 @@ class URLCreator {
     return `${urlJoin(this._basePath, `${urlPath}/date/${urlDate}`)}${qsToUrlPiece(qs)}`;
   }
 
-  archiveJumpUrlForRoom(
+  archiveJumpUrlForRoom(roomIdOrAlias, { ts, dir }) {
-    roomIdOrAlias,
-    {
-      ts,
-      dir,
-      // where the scroll position should continue from ['top'|'bottom']
-      scrollStartPosition,
-    }
-  ) {
     assert(roomIdOrAlias);
     assert(ts);
     assert(dir);
@@ -102,9 +94,6 @@ class URLCreator {
     let qs = new URLSearchParams();
     qs.append('ts', ts);
     qs.append('dir', dir);
-    if (scrollStartPosition) {
-      qs.append('continue', scrollStartPosition);
-    }
 
     const urlPath = this._getArchiveUrlPathForRoomIdOrAlias(roomIdOrAlias);
 

shared/viewmodels/ArchiveRoomViewModel.js

@@ -64,7 +64,7 @@ class ArchiveRoomViewModel extends ViewModel {
       room,
       dayTimestampFrom,
       dayTimestampTo,
-      scrollStartPosition,
+      scrollStartEventId,
       events,
       stateEventMap,
       shouldIndex,
@@ -82,7 +82,6 @@ class ArchiveRoomViewModel extends ViewModel {
     this._room = room;
     this._dayTimestampFrom = dayTimestampFrom;
     this._dayTimestampTo = dayTimestampTo;
-    this._scrollStartPosition = scrollStartPosition === 'top' ? 'top' : 'bottom';
     this._currentTopPositionEventEntry = null;
     this._matrixPublicArchiveURLCreator = new MatrixPublicArchiveURLCreator(basePath);
     this._basePath = basePath;
@@ -142,9 +141,17 @@ class ArchiveRoomViewModel extends ViewModel {
 
     this._timelineViewModel = {
       showJumpDown: false,
-      setVisibleTileRange: () => {},
+      setVisibleTileRange() {},
       tiles,
+      // This will cause the event ID to be scrolled into view
+      get eventIdHighlighted() {
+        return scrollStartEventId;
+      },
     };
+    // Set the event highlight
+    if (scrollStartEventId) {
+      eventEntriesByEventId[scrollStartEventId].setIsHighlighted(true);
+    }
 
     // FIXME: Do we have to fake this?
     this.rightPanelModel = {
@@ -250,10 +257,6 @@ class ArchiveRoomViewModel extends ViewModel {
     return this._currentTopPositionEventEntry;
   }
 
-  get scrollStartPosition() {
-    return this._scrollStartPosition;
-  }
-
   get shouldShowRightPanel() {
     return this._shouldShowRightPanel;
   }

shared/viewmodels/JumpToNextActivitySummaryTileViewModel.js

@@ -38,7 +38,6 @@ class JumpToNextActivitySummaryTileViewModel extends SimpleTile {
       {
         ts: this.rangeEndTimestamp,
         dir: 'f',
-        scrollStartPosition: 'top',
       }
     );
   }

shared/views/ArchiveRoomView.js

@@ -146,12 +146,7 @@ class ArchiveRoomView extends TemplateView {
         t.main({ className: 'ArchiveRoomView_mainArea' }, [
           t.view(new RoomHeaderView(vm)),
           t.main({ className: 'ArchiveRoomView_mainBody' }, [
-            t.view(
+            t.view(new TimelineView(vm.timelineViewModel, customViewClassForTile)),
-              new TimelineView(vm.timelineViewModel, {
-                viewClassForTile: customViewClassForTile,
-                stickToBottom: vm.scrollStartPosition === 'bottom',
-              })
-            ),
             t.view(new DisabledComposerView(vm)),
           ]),
         ]),