timeline: focus on init (fix #932)

Signed-off-by: Varun Patil <radialapps@gmail.com>

src/components/ClusterGrid.vue

@@ -1,6 +1,7 @@
 <template>
   <RecycleScroller
     ref="recycler"
+    tabindex="1"
     type-field="cluster_type"
     key-field="cluster_id"
     class="grid-recycler hide-scrollbar-mobile"
@@ -14,7 +15,7 @@
     @resize="resize"
   >
     <template #before>
-      <slot name="before" />
+      <slot name="before"></slot>
     </template>
 
     <template v-slot="{ item }">
@@ -61,6 +62,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    focus: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: {
@@ -76,6 +81,15 @@ export default defineComponent({
     this.resize();
   },
 
+  watch: {
+    async items() {
+      if (this.focus) {
+        await this.$nextTick();
+        this.refs.recycler?.$el.focus();
+      }
+    },
+  },
+
   computed: {
     refs() {
       return this.$refs as {
@@ -160,10 +174,15 @@ export default defineComponent({
   flex: 1;
   max-height: 100%;
   overflow-y: scroll !important;
+
   &.empty {
     visibility: hidden;
   }
 
+  &:focus {
+    outline: none;
+  }
+
   margin: 1px;
   @media (max-width: 768px) {
     &.cluster--album {

src/components/ClusterView.vue

@@ -6,7 +6,7 @@
 
     <EmptyContent v-if="!items.length && !loading" />
 
-    <ClusterGrid :items="items" :minCols="minCols" :maxSize="maxSize">
+    <ClusterGrid :items="items" :minCols="minCols" :maxSize="maxSize" :focus="true">
       <template #before>
         <DynamicTopMatter class="cv-dtm" ref="dtm" />
       </template>
@@ -85,7 +85,7 @@ export default defineComponent({
   watch: {
     async $route(to: Route, from: Route) {
       if (to.path === from.path) return;
-      this.refresh();
+      await this.refresh();
     },
   },
 

src/components/Timeline.vue

@@ -19,6 +19,7 @@
     <RecycleScroller
       ref="recycler"
       class="recycler hide-scrollbar"
+      tabindex="1"
       :class="{ empty }"
       :items="list"
       :emit-update="true"
@@ -274,6 +275,9 @@ export default defineComponent({
       // Always do a hard refresh if the path changes
       if (from?.path !== to.path) {
         await this.refresh();
+
+        // Focus on the recycler (e.g. after navigation click)
+        this.refs.recycler?.$el.focus();
       }
 
       // Do a soft refresh if the query changes
@@ -1436,6 +1440,10 @@ export default defineComponent({
     transition: none;
     width: 0;
   }
+
+  &:focus {
+    outline: none;
+  }
 }
 
 .recycler .photo {