added autofocus on status in thread

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "sengi",
-  "version": "0.12.2",
+  "version": "0.14.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -129,7 +129,9 @@
             "category": "Network"
         },
         "snap": {
-            "publish": ["github"]
+            "publish": [
+                "github"
+            ]
         }
     }
 }

src/app/components/stream/status/status.component.html

@@ -1,4 +1,4 @@
-<div class="status-wrapper" [class.direct-message]="isDirectMessage">
+<div class="status-wrapper" [class.direct-message]="isDirectMessage" [class.status-selected]="isSelected">
     <div class="reblog" *ngIf="reblog">
         <a class="reblog__profile-link" href title="{{ status.account.acct }}" 
             (click)="openAccount(status.account)"

src/app/components/stream/status/status.component.scss

@@ -33,6 +33,11 @@
     background-color: $direct-message-background;
 }
 
+.status-selected {
+    background-color: #0f111a;
+    background-color: desaturate(lighten(#0f111a, 5%), 4%);
+}
+
 .status {
     margin: 0;
     padding: 0;

src/app/components/stream/status/status.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from "@angular/core";
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef } from "@angular/core";
 import { faStar, faRetweet, faList, faThumbtack } from "@fortawesome/free-solid-svg-icons";
 
 import { Status, Account } from "../../../services/models/mastodon.interfaces";
@@ -36,6 +36,7 @@ export class StatusComponent implements OnInit {
     hasReply: boolean;
     contentWarningText: string;
     isDirectMessage: boolean;
+    isSelected: boolean;
 
     @Output() browseAccountEvent = new EventEmitter<string>();
     @Output() browseHashtagEvent = new EventEmitter<string>();
@@ -49,6 +50,7 @@ export class StatusComponent implements OnInit {
 
     private _statusWrapper: StatusWrapper;
     status: Status;
+    
     @Input('statusWrapper')
     set statusWrapper(value: StatusWrapper) {
         this._statusWrapper = value;
@@ -85,6 +87,7 @@ export class StatusComponent implements OnInit {
     }
 
     constructor(
+        public elem: ElementRef,
         private readonly toolsService: ToolsService) { }
 
     ngOnInit() {

src/app/components/stream/thread/thread.component.ts

@@ -53,24 +53,24 @@ export class ThreadComponent implements OnInit, OnDestroy {
         private readonly mastodonService: MastodonService) { }
 
     ngOnInit() {
-        if(this.refreshEventEmitter) {
+        if (this.refreshEventEmitter) {
             this.refreshSubscription = this.refreshEventEmitter.subscribe(() => {
                 this.refresh();
             })
         }
 
-        if(this.goToTopEventEmitter) {
+        if (this.goToTopEventEmitter) {
             this.goToTopSubscription = this.goToTopEventEmitter.subscribe(() => {
                 this.goToTop();
             })
         }
 
         this.newPostSub = this.notificationService.newRespondPostedStream.subscribe((replyData: NewReplyData) => {
-            if(replyData){
+            if (replyData) {
                 const repondingStatus = this.statuses.find(x => x.status.id === replyData.uiStatusId);
                 const responseStatus = replyData.response;
-                if(repondingStatus && this.statuses[0]){
+                if (repondingStatus && this.statuses[0]) {
-                    this.statuses.push(responseStatus);                    
+                    this.statuses.push(responseStatus);
                 }
             }
         });
@@ -78,7 +78,7 @@ export class ThreadComponent implements OnInit, OnDestroy {
         this.hideAccountSubscription = this.notificationService.hideAccountUrlStream.subscribe((accountUrl: string) => {
             if (accountUrl) {
                 this.statuses = this.statuses.filter(x => {
-                    if(x.status.reblog){
+                    if (x.status.reblog) {
                         return x.status.reblog.account.url != accountUrl;
                     } else {
                         return x.status.account.url != accountUrl;
@@ -88,9 +88,9 @@ export class ThreadComponent implements OnInit, OnDestroy {
         });
 
         this.deleteStatusSubscription = this.notificationService.deletedStatusStream.subscribe((status: StatusWrapper) => {
-            if(status){
+            if (status) {
                 this.statuses = this.statuses.filter(x => {
-                    return !(x.status.url.replace('https://','').split('/')[0] === status.provider.instance && x.status.id === status.status.id);
+                    return !(x.status.url.replace('https://', '').split('/')[0] === status.provider.instance && x.status.id === status.status.id);
                 });
             }
         });
@@ -155,6 +155,7 @@ export class ThreadComponent implements OnInit, OnDestroy {
                 return this.mastodonService.getStatusContext(currentAccount, status.id)
                     .then((context: Context) => {
                         let contextStatuses = [...context.ancestors, status, ...context.descendants]
+                        const position = context.ancestors.length;
 
                         for (const s of contextStatuses) {
                             const wrapper = new StatusWrapper(s, currentAccount);
@@ -162,9 +163,19 @@ export class ThreadComponent implements OnInit, OnDestroy {
                         }
 
                         this.hasContentWarnings = this.statuses.filter(x => x.status.sensitive || x.status.spoiler_text).length > 1;
+
+                        return position;
                     });
 
             })
+            .then((position: number) => {
+                setTimeout(() => {
+                    const el = this.statusChildren.toArray()[position];
+                    el.isSelected = true;
+                    // el.elem.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+                    el.elem.nativeElement.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'start' });
+                }, 0);
+            })
             .catch((err: HttpErrorResponse) => {
                 this.notificationService.notifyHttpError(err);
             })