feat: image viewer

src/app/components/cards/notification-card/notification-card.component.html

···
           <div
             class="flex gap-2"
           >
-            @for (image of attachedPost.embed.images; track image.thumb) {
+            @for (image of attachedPost.embed.images; track $index) {
               <img
                 [src]="image.thumb"
                 [alt]="image.alt"
+                (click)="openImage($event, attachedPost.embed.images, $index)"
                 class="h-16 w-16 object-cover"
               />
             }
···
             <div
               class="flex gap-2"
             >
-              @for (image of attachedPost.embed.media.images; track image.thumb) {
+              @for (image of attachedPost.embed.media.images; track $index) {
                 <img
                   [src]="image.thumb"
                   [alt]="image.alt"
+                  (click)="openImage($event, attachedPost.embed.media.images, $index)"
                   class="h-16 w-16 object-cover"
                 />
               }

src/app/components/cards/notification-card/notification-card.component.ts

···
 import {IsStarterPackNotificationPipe} from '@shared/pipes/type-guards/notifications/is-starterpack-notification.pipe';
 import {NgTemplateOutlet, SlicePipe} from '@angular/common';
 import {DisplayNamePipe} from '@shared/pipes/display-name.pipe';
-import {AppBskyFeedDefs} from '@atproto/api';
+import {AppBskyEmbedImages, AppBskyFeedDefs} from '@atproto/api';
 import {IsEmbedImagesViewPipe} from '@shared/pipes/type-guards/is-embed-images-view.pipe';
 import {IsEmbedVideoViewPipe} from '@shared/pipes/type-guards/is-embed-video-view.pipe';
 import {IsEmbedRecordWithMediaViewPipe} from '@shared/pipes/type-guards/is-embed-recordwithmedia-view.pipe';
+import {DialogService} from '@services/dialog.service';
 
 @Component({
   selector: 'notification-card',
···
   post: WritableSignal<AppBskyFeedDefs.PostView>;
 
   constructor(
+    private dialogService: DialogService,
     private cdRef: ChangeDetectorRef
   ) {}
 
···
 
   openAuthor(event: Event, did: string) {
     //TODO: OpenAuthor
+  }
+
+  openImage(event: Event, images: AppBskyEmbedImages.ViewImage[], index: number) {
+    event.stopPropagation();
+    this.dialogService.openImage(images, index);
   }
 }

src/app/components/cards/post-card/post-card.component.html

···
   @if (embed | isEmbedRecordView) {
     <record-embed
       [record]="embed.record"
+      (onImgClick)="openImage($event.images, $event.index)"
       class="mt-2 p-2 hover:bg-primary/2"
     />
   }
···
   @if (embed | isEmbedImagesView) {
     <images-embed
       [images]="embed.images"
+      (onClick)="openImage(embed.images, $event)"
       class="mb-1"
       [class]="$any(post().record).text.length ? 'mt-2' : 'mt-3'"
     />
···
         [images]="embed.media.images"
         class="mb-1"
         [class]="$any(post().record).text.length ? 'mt-2' : 'mt-3'"
+        (onClick)="openImage(embed.media.images, $event)"
       />
     }
 
···
 
     <record-embed
       [record]="embed.record.record"
+      (onImgClick)="openImage($event.images, $event.index)"
       class="mt-2 p-2 hover:bg-primary/2"
     />
   }

src/app/components/cards/post-card/post-card.component.ts

···
   OnDestroy,
   OnInit
 } from '@angular/core';
-import {AppBskyFeedDefs} from '@atproto/api';
+import {AppBskyEmbedImages, AppBskyFeedDefs} from '@atproto/api';
 import {AvatarComponent} from '@components/shared/avatar/avatar.component';
 import {DisplayNamePipe} from '@shared/pipes/display-name.pipe';
 import {IsFeedPostRecordPipe} from '@shared/pipes/type-guards/is-feed-post-record';
···
 import {ExternalEmbedComponent} from '@components/embeds/external-embed/external-embed.component';
 import {IsEmbedExternalViewPipe} from '@shared/pipes/type-guards/is-embed-external-view.pipe';
 import {MessageService} from '@services/message.service';
+import {DialogService} from '@services/dialog.service';
 
 @Component({
   selector: 'post-card',
···
   constructor(
     private postService: PostService,
     private messageService: MessageService,
+    private dialogService: DialogService,
     private cdRef: ChangeDetectorRef
   ) {
     effect(() => {
···
   quotePost() {
     this.postService.quotePost(this.post().uri);
     this.rtMenuVisible = false;
+  }
+
+  openImage(images: AppBskyEmbedImages.ViewImage[], index: number) {
+    this.dialogService.openImage(images, index);
   }
 }

src/app/components/dialogs/gallery/gallery.component.html

···
+<div
+  class="flex flex-col gap-4 items-center justify-center absolute top-[1rem] left-[5rem] h-[calc(100%_-_4rem)] w-[calc(100%_-_10rem)] pointer-events-none"
+  [class]="{'h-[calc(100%_-_4rem)]': images.length > 1, 'h-[calc(100%_-_2rem)]': images.length == 1}"
+>
+  <img
+    [src]="images[index].fullsize"
+    class="flex-1 min-h-0 min-w-0 w-fit pointer-events-auto"
+  />
+
+  @if (images[index].alt) {
+    <span
+      class="bg-primary text-bg py-2 px-3 pointer-events-auto"
+    >{{ images[index].alt }}</span>
+  }
+</div>
+
+@if (images.length > 1) {
+  <button
+    class="flex items-center justify-center absolute h-12 w-12 left-[1rem] top-[50%] -translate-y-[50%] btn-primary"
+    (click)="prevImage()"
+  >
+  <span
+    class="material-icons !text-4xl"
+  >chevron_left</span>
+  </button>
+
+  <button
+    class="flex items-center justify-center absolute h-12 w-12 right-[1rem] top-[50%] -translate-y-[50%] btn-primary"
+    (click)="nextImage()"
+  >
+  <span
+    class="material-icons !text-4xl"
+  >chevron_right</span>
+  </button>
+
+  <div
+    class="absolute bottom-[1rem] left-[50%] -translate-x-[50%] flex gap-2"
+  >
+    @for (image of images; track $index) {
+      <button
+        class="h-4 w-4 p-0 bg-bg border border-primary"
+        [class.bg-primary]="$index == index"
+        [class.cursor-pointer]="$index !== index"
+        (click)="index = $index"
+      ></button>
+    }
+  </div>
+}

src/app/components/dialogs/gallery/gallery.component.ts

···
+import {ChangeDetectionStrategy, Component, HostListener, inject} from '@angular/core';
+import {AppBskyEmbedImages} from '@atproto/api';
+import {DIALOG_DATA, DialogRef} from '@angular/cdk/dialog';
+
+@Component({
+  selector: 'gallery',
+  templateUrl: './gallery.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class GalleryComponent {
+  images: AppBskyEmbedImages.ViewImage[];
+  index: number;
+
+  dialogRef = inject<DialogRef<string>>(DialogRef<string>);
+  data = inject(DIALOG_DATA);
+
+  constructor() {
+    this.images = this.data.images;
+    this.index = this.data.index;
+  }
+
+  @HostListener('keydown.arrowLeft', ['$event'])
+  prevImage() {
+    if (this.index == 0) {
+      this.index = this.images.length - 1;
+    } else {
+      this.index = this.index - 1;
+    }
+  }
+
+  @HostListener('keydown.arrowRight', ['$event'])
+  nextImage() {
+    if (this.index + 1 == this.images.length) {
+      this.index = 0;
+    } else {
+      this.index = this.index + 1;
+    }
+  }
+}

src/app/components/embeds/images-embed/images-embed.component.ts

···
   onClick = output<number>();
 
   imgClick(index: number, event: Event) {
-
+    event.stopPropagation();
+    this.onClick.emit(index);
   }
 }

src/app/components/embeds/record-embed/record-embed.component.html

···
 
 <div
   class="flex"
+  (click)="recordClick($event)"
 >
   <div
     class="overflow-hidden shrink-0 h-5 w-9 flex items-center justify-center"
···
     <images-embed
       [images]="media.images"
       [class]="margin"
+      (onClick)="onImgClick.emit({images: media.images, index: $event})"
     />
   }
 
···
       <images-embed
         [images]="media.media.images"
         [class]="margin"
+        (onClick)="onImgClick.emit({images: media.media.images, index: $event})"
       />
     }
 

src/app/components/embeds/record-embed/record-embed.component.ts

···
-import {ChangeDetectionStrategy, Component, input} from '@angular/core';
-import {$Typed, AppBskyEmbedRecord, AppBskyFeedDefs, AppBskyGraphDefs, AppBskyLabelerDefs} from '@atproto/api';
+import {ChangeDetectionStrategy, Component, input, output} from '@angular/core';
+import {
+  $Typed,
+  AppBskyEmbedImages,
+  AppBskyEmbedRecord,
+  AppBskyFeedDefs,
+  AppBskyGraphDefs,
+  AppBskyLabelerDefs
+} from '@atproto/api';
 import {DisplayNamePipe} from '@shared/pipes/display-name.pipe';
 import {IsEmbedRecordViewRecordPipe} from '@shared/pipes/type-guards/is-embed-record-viewrecord.pipe';
 import {NgTemplateOutlet} from '@angular/common';
···
   >();
   protected readonly AppBskyFeedDefs = AppBskyFeedDefs;
   protected readonly AppBskyGraphDefs = AppBskyGraphDefs;
+
+  onClick = output();
+  onImgClick = output<{images: AppBskyEmbedImages.ViewImage[], index: number}>();
+
+  recordClick(event: Event) {
+    event.stopPropagation();
+    this.onClick.emit();
+  }
 }

src/app/components/shared/logger/logger.component.ts

···
-import { Component } from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MessageService} from '@services/message.service';
 import {NgClass} from '@angular/common';
 
···
     NgClass
   ],
   templateUrl: './logger.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LoggerComponent {
 

src/app/services/dialog.service.ts

···
+import {Injectable} from '@angular/core';
+import {Dialog} from '@angular/cdk/dialog';
+import {GalleryComponent} from '@components/dialogs/gallery/gallery.component';
+import {AppBskyEmbedImages} from '@atproto/api';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DialogService {
+
+  constructor(
+    private dialog: Dialog
+  ) {}
+
+  openImage(images: AppBskyEmbedImages.ViewImage[], index: number) {
+    const dialogRef = this.dialog.open(GalleryComponent, {
+      data: {images: images, index: index},
+      hasBackdrop: true
+    });
+  }
+}

src/app/views/dashboard/dashboard.component.ts

···
 import {PostComposerComponent} from '@components/navigation/post-composer/post-composer.component';
 import {PostService} from '@services/post.service';
 import {AuxbarComponent} from '@components/navigation/auxbar/auxbar.component';
-// import {MskyDialogService} from '@services/msky-dialog.service';
-// import {PostService} from '@services/post.service';
 
 @Component({
   selector: 'app-dashboard',
···
 })
 export class DashboardComponent {
   constructor(
-    // protected dialogService: MskyDialogService,
     protected postService: PostService
   ) {}
 }

src/styles.css

···
   color: var(--color-primary);
 }
 
-* {
+app-root * {
   box-sizing: border-box;
   scrollbar-width: thin;
   scrollbar-gutter: stable;