Added alternative if we are an empty gallery

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

@@ -1,4 +1,5 @@
-@if (!modal) {
+@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) {
@@ -10,7 +11,7 @@
                 }
             </div>
         </div>
-} @else {
+    } @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()">
@@ -23,4 +24,18 @@
             />
 
         </div>
+    }
+} @else {
+    <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>
                 }