✨ show image when folder is empty

Author: marcode24

src/app/features/home/home.component.html

@@ -1,15 +1,19 @@
 <div class="fluid-container">
   <app-actions [folder]="root"></app-actions>
-  <div class="files">
-    <section class="group">
+  <div class="not-items" *ngIf="!root.folders?.length && !root.files?.length">
+    <img src="assets/images/no-files.svg" alt="no-files-image">
+    <span class="description">Agrega tu primer archivo o carpeta</span>
+  </div>
+  <div class="files" *ngIf="root.folders.length && root.folders.length">
+    <section class="group" *ngIf="root.folders.length > 0">
       <span class="title">Folders</span>
       <div class="items">
         <app-folder *ngFor="let folder of root.folders" class="item"
           [folder]="folder"
         ></app-folder>
       </div>
     </section>
-    <section class="group">
+    <section class="group" *ngIf="root.files.length > 0">
       <span class="title">Files</span>
       <div class="items">
         <app-file *ngFor="let file of root.files" class="item"

src/assets/images/no-files.svg

@@ -68,6 +68,7 @@ body.modal-open {
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  min-height: calc(100vh - 75px);
 }
 
 
@@ -355,3 +356,24 @@ input {
     min-height: 100vh;
   }
 }
+
+.not-items {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1.5rem;
+  flex: 1;
+
+  & .description {
+    @include fs-4;
+    @include fw-500;
+    color: var(--fc-secondary);
+    text-align: center;
+  }
+
+  & img {
+    width: 100%;
+    max-width: 20rem;
+  }
+}