Add video numbering to playlists (#2811)

src/renderer/views/Playlist/Playlist.css

@@ -23,7 +23,18 @@
   width: 60%;
 }
 
-@media only screen and (max-width: 800px) {
+.playlistItem {
+  display: grid;
+  grid-template-columns: max-content auto;
+  column-gap: 8px;
+  align-items: center;
+}
+
+.videoIndex {
+  color: var(--tertiary-text-color);
+}
+
+@media only screen and (max-width: 850px) {
   .routerView {
     flex-direction: column;
   }

src/renderer/views/Playlist/Playlist.vue

@@ -15,15 +15,24 @@
       v-if="!isLoading"
       class="playlistItems"
     >
-      <ft-list-video
+      <div
         v-for="(item, index) in playlistItems"
         :key="index"
-        :data="item"
-        :playlist-id="playlistId"
-        :playlist-index="index"
-        appearance="result"
-        force-list-type="list"
-      />
+        class="playlistItem"
+      >
+        <p
+          class="videoIndex"
+        >
+          {{ index + 1 }}
+        </p>
+        <ft-list-video
+          :data="item"
+          :playlist-id="playlistId"
+          :playlist-index="index"
+          appearance="result"
+          force-list-type="list"
+        />
+      </div>
     </ft-card>
   </div>
 </template>