#56 Add track empty state and fix compare button style and content on click

src/assets/css/src/2.blocks.track.css

@@ -11,6 +11,8 @@
   position: relative;
   margin: var(--space-16) auto;
   border-radius: var(--rounded-lg);
+  display: flex;
+  gap: var(--gap);
 }
 
 .track figure {
@@ -108,3 +110,10 @@
 .grabbing {
   cursor: grabbing;
 }
+
+/* Empty */
+.track-empty {
+  display: grid;
+  place-items: center;
+  border: 1px dashed var(--color-black-20);
+}

src/components/project/virtual-sample/DynamicView.vue

@@ -15,9 +15,10 @@
       </div>
       <button
         class="btn | ml-auto"
+        :class="{ 'btn--secondary': isCompareModeEnabled }"
         @click="isCompareModeEnabled = !isCompareModeEnabled"
       >
-        <span>Comparer les pistes</span>
+        <span>{{ isCompareModeEnabled ? 'Quitter le mode comparer' : 'Comparer les pistes' }}</span>
       </button>
     </header>
 
@@ -31,6 +32,9 @@
           <img :src="activeTrack.files[0].url" alt="" />
         </figure>
       </template>
+      <div v-if="isCompareModeEnabled && activeTracks.length < 2" class="track-empty | bg-white rounded-xl w-full p-32">
+        <p>Cliquez sur la piste que vous souhaitez comparer</p>
+      </div>
     </div>
   </div>
 </template>