3.0 Beta 5

src/app/chat/picture/see/see.html

@@ -1,10 +1,14 @@
+<ng-template [(tuiDialog)]="viewerOpen">
+  <oimg [src]="viewedPicture!.path" height="100%" width="100%" [radius]="0"></oimg>
+</ng-template>
+
 <main>
   @defer (when store) {
     <navbar backButtonDest="/chat">
       <div class="data">
         <oimg [src]="store.uploaderData().pfp" height="50px" width="50px" [radius]="15"></oimg>
         <div class="uploader-data">
-          @if (store.uploaderData().displayName == "") {
+          @if (!store.uploaderData().displayName) {
             <span class="main-name">{{'@'+store.uploaderData().username}}</span>
           } @else {
             <span class="main-name">{{store.uploaderData().displayName}}</span>
@@ -18,17 +22,39 @@
     </navbar>
 
     <main>
-      @for (album of store.albums(); track album) {
-        <div class="album">
-          <masonry [maxColSize]="3" style="height: 300px; pointer-events: none;">
-            @for (file of album.images; track file) {
-              <img [src]="file.path+'_thumbnail.png'" style="filter: blur(5px)"/>
-            }
-          </masonry>
-          <div class="album-name">
-            <h2>{{album.name}}</h2>
-          </div>
+      @if (openedAlbum) {
+        <div style="display: flex; align-items: center; gap: 10px">
+          <button tuiButton appearance="flat" iconStart="@tui.chevron-left" (click)="exitAlbum()"></button>
+          <h1 style="padding: 0; margin: 0">{{openedAlbum.name}}</h1>
         </div>
+
+        <div id="pictureList">
+          @for (picture of openedAlbum.images; track picture) {
+            <oimg (click)="viewPicture(picture)" [src]="picture.path" height="200px" width="200px" [radius]="25" objectFit="none"></oimg>
+          }
+        </div>
+      } @else {
+        @if (store.albums().length == 0) {
+          <tui-block-status style="height: 300px">
+            <tui-icon icon="@tui.frown" tuiSlot="top" style="font-size: 150px"></tui-icon>
+            <h4>{{"chat.pictures.albumList.noAlbum"|translate}}</h4>
+          </tui-block-status>
+        } @else {
+          <div id="albumList">
+            @for (album of store.albums(); track album) {
+              <div class="album" (click)="enterAlbum(album.albumId)">
+                <masonry [maxColSize]="3" style="height: 300px; pointer-events: none;">
+                  @for (file of album.images; track file) {
+                    <img [src]="file.path+'_thumbnail.png'" style="filter: blur(5px)"/>
+                  }
+                </masonry>
+                <div class="album-name">
+                  <h2>{{album.name}}</h2>
+                </div>
+              </div>
+            }
+          </div>
+        }
       }
     </main>
   }