From 6bf8230fa3cd3af7536a392ad4cefd581d043f48 Mon Sep 17 00:00:00 2001
From: sanchezvem <mathys.sanchezvende@gmail.com>
Date: Thu, 16 Apr 2026 17:02:11 +0100
Subject: [PATCH] Added alternative if we are an empty gallery

---
 .../components/gallery/gallery.component.html | 61 ++++++++++++-------
 .../components/gallery/gallery.component.ts   |  5 +-
 src/app/pages/home/home.component.html        |  3 +-
 3 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/src/app/components/gallery/gallery.component.html b/src/app/components/gallery/gallery.component.html
index 1bfca86..73b33f5 100644
--- a/src/app/components/gallery/gallery.component.html
+++ b/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>
 }
\ No newline at end of file
diff --git a/src/app/components/gallery/gallery.component.ts b/src/app/components/gallery/gallery.component.ts
index 7e84f91..a936742 100644
--- a/src/app/components/gallery/gallery.component.ts
+++ b/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({
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index cd5bea9..638a0d0 100644
--- a/src/app/pages/home/home.component.html
+++ b/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>
                 }