Added alternative if we are an empty gallery

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

@@ -1,26 +1,41 @@
-@if (!modal) {
-    <div class="bg-white rounded-lg p-2 shadow-sm border border-gray-200 overflow-scroll max-h-full">
-        <div class="grid grid-cols-4 gap-3">
-            @for (p of proofs(); track p) {
-                <img [src]="'data:image/jpeg;base64,' + p.proof"
-                     class="w-20 h-20 object-cover"
-                     alt=""
-                     (click)="openProof(p.proof)"
-                />
-            }
+@if (proofs().length > 0) {
+    @if (!modal) {
+        <div class="bg-white rounded-lg p-2 shadow-sm border border-gray-200 overflow-scroll max-h-full">
+            <div class="grid grid-cols-4 gap-3">
+                @for (p of proofs(); track p) {
+                    <img [src]="'data:image/jpeg;base64,' + p.proof"
+                         class="w-20 h-20 object-cover"
+                         alt=""
+                         (click)="openProof(p.proof)"
+                    />
+                }
+            </div>
         </div>
-    </div>
+    } @else {
+        <div class="fixed inset-0 flex items-center justify-center z-50" (click)="closeProof()">
+            <button class="absolute top-15 right-1 text-gray-300 text-4xl font-bold p-5 bg-transparent"
+                    (click)="closeProof()">
+                <ion-icon name="close-circle-outline"></ion-icon>
+            </button>
+
+            <img [src]="'data:image/jpeg;base64,' + selectedProof()"
+                 class="w-[90%] h-[90%] object-cover rounded-md mt-10"
+                 alt=""
+            />
+
+        </div>
+    }
 } @else {
-    <div class="fixed inset-0 flex items-center justify-center z-50" (click)="closeProof()">
-        <button class="absolute top-15 right-1 text-gray-300 text-4xl font-bold p-5 bg-transparent"
-                (click)="closeProof()">
-            <ion-icon name="close-circle-outline"></ion-icon>
-        </button>
-
-        <img [src]="'data:image/jpeg;base64,' + selectedProof()"
-             class="w-[90%] h-[90%] object-cover rounded-md mt-10"
-             alt=""
-        />
-
-    </div>
+    <ion-item lines="none" class="border border-stone-200 rounded-xl m-3" style="--background: #fafaf8;">
+        <div class="flex flex-col items-center w-full px-5 py-8 gap-3">
+            <div class="w-10 h-10 rounded-full bg-stone-100 border border-stone-200 flex items-center justify-center">
+                <ion-icon name="image" style="color:#a8a090; font-size:20px;"></ion-icon>
+            </div>
+            <div class="text-center">
+                <p class="m-0 text-sm font-medium text-stone-400">C'est bien vide par ici...</p>
+                <p class="m-0 mt-1 text-xs text-stone-300 leading-relaxed">Participe à des défis pour remplir ta galerie
+                    !</p>
+            </div>
+        </div>
+    </ion-item>
 }

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

@@ -3,10 +3,11 @@ import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
 import {GetUserProofDto, UsersService} from "../../services/api";
 import {firstValueFrom} from "rxjs";
 import {addIcons} from "ionicons";
-import {closeCircleOutline} from "ionicons/icons";
+import {closeCircleOutline, imageOutline} from "ionicons/icons";
 
 addIcons({
-    'close-circle-outline': closeCircleOutline
+    'close-circle-outline': closeCircleOutline,
+    'image': imageOutline,
 })
 
 @Component({

src/app/pages/home/home.component.html

@@ -103,7 +103,8 @@
                     <app-modal>
                         <div class="p-4">
                             <app-designation-form [user]="user()"
-                                                  (userDesignation)="user.set($event)"></app-designation-form>
+                                                  (userDesignation)="user.set($event)">
+                            </app-designation-form>
                         </div>
                     </app-modal>
                 }