feat: scroll by post hotkey

packages/frontend/src/app/components/post-list/post-list.component.html

···
 @for (post of posts(); track $index) {
-  <app-post [post]="post"></app-post>
+  <app-post [post]="post" [active]="$index === selectedPost"></app-post>
 }
 @if (loading()) {
   <app-loader>posts</app-loader>

packages/frontend/src/app/components/post-list/post-list.component.ts

···
 import { ProcessedPost } from 'src/app/interfaces/processed-post'
 import { PostModule } from '../post/post.module'
 import { LoaderComponent } from '../loader/loader.component'
+import { HotkeyService, HotkeyType } from 'src/app/services/hotkey.service'
 
 @Component({
   selector: 'app-post-list',
···
   bottomPageElement = computed(() => this.bottomPageElementRef()?.nativeElement)
   bottomPageObserver: IntersectionObserver | undefined
 
-  constructor() {}
+  selectedPost: number | null = null // null means no hotkeys pressed yet
+
+  constructor(hotkeyService: HotkeyService) {
+    hotkeyService.hotkeySubscription.subscribe((type) => this.handleHotkeys(type))
+  }
 
   ngOnInit() {
     this.bottomPageObserver = new IntersectionObserver((entries) => {
···
       this.loadPosts.emit()
     })
     this.bottomPageObserver.observe(this.bottomPageElement()!)
+  }
+
+  postElementAt(index: number): HTMLElement | null {
+    return document.getElementById('post-element-' + this.posts().at(index)?.at(-1)?.id)
+  }
+
+  handleHotkeys(type: HotkeyType) {
+    if (!this.visible()) return
+
+    switch (type) {
+      case HotkeyType.nextPost:
+        this.nextPost()
+        break
+      case HotkeyType.previousPost:
+        this.previousPost()
+        break
+      default:
+        break
+    }
+  }
+
+  previousPost() {
+    if (this.selectedPost === null) {
+      this.selectedPost = 0
+      this.scrollToSelectedPost()
+      return
+    }
+    if (this.selectedPost > 0) {
+      this.selectedPost -= 1
+    }
+    this.scrollToSelectedPost()
+  }
+
+  nextPost() {
+    if (this.selectedPost === null) {
+      this.selectedPost = 0
+      this.scrollToSelectedPost()
+      return
+    }
+    if (this.selectedPost < this.posts().length - 1) {
+      this.selectedPost += 1
+    }
+    if (this.selectedPost === this.posts().length - 1) {
+      this.loadPosts.emit()
+      this.scrollToLoader()
+      return
+    }
+    this.scrollToSelectedPost()
+  }
+
+  scrollToLoader() {
+    this.bottomPageElement()?.scrollIntoView()
+  }
+
+  scrollToSelectedPost() {
+    const nextPost = this.postElementAt(this.selectedPost ?? 0)
+    if (nextPost === null) return
+    nextPost?.scrollIntoView({ behavior: 'instant' })
+  }
+
+  test() {
+    console.log('hi')
   }
 }

packages/frontend/src/app/styles/post-card.scss

···
   padding: 1rem;
   padding-bottom: 0.75rem;
   content-visibility: auto;
+  scroll-margin: 1rem;
   & hr {
     margin: 0.75rem -1rem;
   }