@ozdao/martyrs 0.2.494 → 0.2.496

package/dist/martyrs/src/modules/music/components/pages/Playlist.vue.js

@@ -1,22 +1,22 @@
-import { ref, computed, onMounted, resolveComponent, createElementBlock, openBlock, createCommentVNode, createVNode, createElementVNode, toDisplayString, withCtx, createTextVNode, Fragment, createBlock, unref, renderList } from "vue";
+import { ref, computed, onMounted, resolveComponent, createElementBlock, openBlock, createCommentVNode, createVNode, createElementVNode, toDisplayString, withCtx, createTextVNode, Fragment, createBlock, renderList } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import _sfc_main$1 from "../../../../components/Button/Button.vue.js";
 /* empty css                                       */
 import Media from "../../../../components/Media/Media.vue.js";
-import _sfc_main$4 from "../../../../components/Dropdown/Dropdown.vue.js";
-import _sfc_main$a from "../../../../components/Feed/Feed.vue.js";
-import _sfc_main$c from "../../../../components/Popup/Popup.vue.js";
+import _sfc_main$4 from "../../../../components/Dropdown/Dropdown.vue2.js";
+import _sfc_main$9 from "../../../../components/Feed/Feed.vue.js";
+import _sfc_main$b from "../../../../components/Popup/Popup.vue.js";
 import _sfc_main$2 from "../../../icons/navigation/IconPlay.vue.js";
 import _sfc_main$5 from "../../../icons/navigation/IconEllipsis.vue.js";
 import _sfc_main$3 from "../../../icons/navigation/IconShuffle.vue.js";
-import _sfc_main$7 from "../../../icons/entities/IconCalendar.vue.js";
+import _sfc_main$6 from "../../../icons/entities/IconCalendar.vue.js";
 import IconClock from "../../../icons/entities/IconTime.vue.js";
-import _sfc_main$9 from "../../../icons/actions/IconShow.vue.js";
-import _sfc_main$8 from "../../../icons/navigation/IconRefresh.vue.js";
-import _sfc_main$6 from "../../../icons/navigation/IconCheckmark.vue.js";
-import _sfc_main$b from "../cards/TrackListCard.vue.js";
+import _sfc_main$8 from "../../../icons/actions/IconShow.vue.js";
+import _sfc_main$7 from "../../../icons/navigation/IconRefresh.vue.js";
+import _sfc_main$a from "../cards/TrackListCard.vue.js";
 import PlaylistCard from "../cards/PlaylistCard.vue.js";
-import _sfc_main$d from "../forms/PlaylistForm.vue.js";
+import _sfc_main$c from "../forms/PlaylistForm.vue.js";
+import ArtistCardSmall from "../cards/ArtistCardSmall.vue.js";
 import { state, actions } from "../../store/playlists.js";
 import "../../store/tracks.js";
 import { actions as actions$1 } from "../../store/player.js";
@@ -31,7 +31,7 @@ const _hoisted_3 = {
   key: 1,
   class: "playlist-content cols-2-fit-content mobile:cols-1 gap-big"
 };
-const _hoisted_4 = { class: "pos-sticky pos-t-0 mobile:pos-relative playlist-cover-section" };
+const _hoisted_4 = { class: "pos-sticky w-max-30r pos-t-0 mobile:pos-relative playlist-cover-section" };
 const _hoisted_5 = { class: "cover-container relative mn-b-medium radius-big overflow-hidden shadow-big" };
 const _hoisted_6 = { class: "stats-grid grid cols-2 gap-small" };
 const _hoisted_7 = { class: "stat-card bg-light pd-medium radius-medium t-center" };
@@ -42,68 +42,60 @@ const _hoisted_11 = { class: "playlist-details-section" };
 const _hoisted_12 = { class: "flex items-center gap-small mn-b-small" };
 const _hoisted_13 = {
   key: 0,
-  class: "badge bg-secondary-transp-20 t-secondary pd-thin-big radius-small t-small"
+  class: "bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase"
 };
 const _hoisted_14 = {
   key: 1,
-  class: "badge bg-success-transp-20 t-success pd-thin-big radius-small t-small"
+  class: "bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase"
 };
 const _hoisted_15 = { class: "h1 mn-b-medium" };
 const _hoisted_16 = { class: "flex gap-small mn-b-medium" };
-const _hoisted_17 = { class: "dropdown-menu bg-dark pd-small radius-medium shadow-big mn-t-thin" };
-const _hoisted_18 = { class: "owner-section mn-b-big" };
-const _hoisted_19 = { class: "owner-card bg-light pd-medium radius-medium flex items-center gap-medium" };
-const _hoisted_20 = { class: "owner-avatar" };
-const _hoisted_21 = {
-  key: 1,
-  class: "w-4r h-4r radius-full bg-primary flex-center"
-};
-const _hoisted_22 = { class: "flex items-center gap-thin" };
-const _hoisted_23 = { class: "t-large" };
-const _hoisted_24 = { class: "t-small t-transp" };
-const _hoisted_25 = {
+const _hoisted_17 = { class: "dropdown-menu bg-white pd-small radius-medium shadow-big mn-t-thin" };
+const _hoisted_18 = { class: "artists-section mn-b-medium" };
+const _hoisted_19 = { class: "flex flex-col gap-small" };
+const _hoisted_20 = {
   key: 0,
   class: "collaborators-section mn-b-big"
 };
-const _hoisted_26 = { class: "flex flex-wrap gap-small" };
-const _hoisted_27 = { class: "t-small" };
-const _hoisted_28 = { class: "metadata-grid grid cols-2 gap-small mn-b-big" };
-const _hoisted_29 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
-const _hoisted_30 = { class: "t-medium" };
-const _hoisted_31 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
-const _hoisted_32 = { class: "t-medium" };
-const _hoisted_33 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
-const _hoisted_34 = { class: "t-medium" };
-const _hoisted_35 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
-const _hoisted_36 = { class: "t-medium" };
-const _hoisted_37 = {
+const _hoisted_21 = { class: "flex flex-wrap gap-small" };
+const _hoisted_22 = { class: "t-small" };
+const _hoisted_23 = { class: "metadata-grid grid cols-2 gap-small mn-b-medium" };
+const _hoisted_24 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_25 = { class: "t-medium" };
+const _hoisted_26 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_27 = { class: "t-medium" };
+const _hoisted_28 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_29 = { class: "t-medium" };
+const _hoisted_30 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_31 = { class: "t-medium" };
+const _hoisted_32 = {
   key: 1,
   class: "tags-section mn-b-medium"
 };
-const _hoisted_38 = { class: "flex gap-thin flex-wrap" };
-const _hoisted_39 = {
+const _hoisted_33 = { class: "flex gap-thin flex-wrap" };
+const _hoisted_34 = {
   key: 2,
   class: "description-section bg-light pd-medium radius-medium mn-b-medium"
 };
-const _hoisted_40 = { class: "t-transp" };
-const _hoisted_41 = {
+const _hoisted_35 = { class: "t-transp" };
+const _hoisted_36 = {
   key: 2,
   class: "tracks-section mn-t-big"
 };
-const _hoisted_42 = { class: "bg-light radius-medium o-hidden" };
-const _hoisted_43 = {
+const _hoisted_37 = { class: "bg-light radius-medium o-hidden" };
+const _hoisted_38 = {
   key: 3,
   class: "empty-section mn-t-big"
 };
-const _hoisted_44 = { class: "empty-tracks t-center pd-big bg-light radius-medium" };
-const _hoisted_45 = {
+const _hoisted_39 = { class: "empty-tracks t-center pd-big bg-light radius-medium" };
+const _hoisted_40 = {
   key: 4,
   class: "more-playlists-section mn-t-big"
 };
-const _hoisted_46 = { class: "flex justify-between items-center mn-b-medium" };
-const _hoisted_47 = { class: "flex flex-nowrap gap-small o-x-scroll overscroll-behavior-x-contain scroll-behavior-smooth scroll-snap-type-x-mandatory scroll-hide" };
-const _hoisted_48 = { class: "t-transp mn-b-medium" };
-const _hoisted_49 = { class: "flex justify-end gap-small" };
+const _hoisted_41 = { class: "flex justify-between items-center mn-b-medium" };
+const _hoisted_42 = { class: "flex flex-nowrap gap-small o-x-scroll overscroll-behavior-x-contain scroll-behavior-smooth scroll-snap-type-x-mandatory scroll-hide" };
+const _hoisted_43 = { class: "t-transp mn-b-medium" };
+const _hoisted_44 = { class: "flex justify-end gap-small" };
 const _sfc_main = {
   __name: "Playlist",
   emits: ["page-loading", "page-loaded"],
@@ -138,24 +130,6 @@ const _sfc_main = {
       const totalSeconds = playlistTracks.value.reduce((sum, track) => sum + (track.duration || 0), 0);
       return formatDuration(totalSeconds);
     });
-    const getOwnerData = (playlist2) => {
-      if (!playlist2) return null;
-      const owner = playlist2.creator?.target || playlist2.owner?.target;
-      return typeof owner === "object" ? owner : null;
-    };
-    const getOwnerId = (playlist2) => {
-      if (!playlist2) return null;
-      const owner = playlist2.creator?.target || playlist2.owner?.target;
-      return typeof owner === "object" ? owner._id : owner;
-    };
-    const getPlaylistOwnerName = (playlist2) => {
-      if (!playlist2) return "Unknown";
-      const owner = getOwnerData(playlist2);
-      if (owner) {
-        return owner.profile?.name || owner.name || "Unknown";
-      }
-      return "Unknown";
-    };
     const getOwnerProfileLink = (owner) => {
       if (!owner || !owner.target) return { name: "music-home" };
       const targetId = typeof owner.target === "object" ? owner.target._id : owner.target;
@@ -336,7 +310,7 @@ const _sfc_main = {
           ]),
           createElementVNode("div", _hoisted_11, [
             createElementVNode("div", _hoisted_12, [
-              _cache[10] || (_cache[10] = createElementVNode("span", { class: "badge bg-primary-transp-20 t-primary pd-thin-big radius-small t-small t-uppercase" }, " Playlist ", -1)),
+              _cache[10] || (_cache[10] = createElementVNode("span", { class: "bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase" }, " Playlist ", -1)),
               playlist.value.isCollaborative ? (openBlock(), createElementBlock("span", _hoisted_13, " Collaborative ")) : createCommentVNode("", true),
               playlist.value.status === "published" ? (openBlock(), createElementBlock("span", _hoisted_14, " Published ")) : createCommentVNode("", true)
             ]),
@@ -346,10 +320,13 @@ const _sfc_main = {
                 onClick: playPlaylist,
                 color: "primary",
                 size: "medium",
-                class: "flex-1 flex-center gap-thin"
+                class: "flex-1 t-white bg-black radius-thin flex-center gap-thin"
               }, {
                 default: withCtx(() => [
-                  createVNode(_sfc_main$2, { class: "i-medium" }),
+                  createVNode(_sfc_main$2, {
+                    fill: "rgb(var(--white))",
+                    class: "i-medium"
+                  }),
                   _cache[11] || (_cache[11] = createTextVNode(" Play All "))
                 ]),
                 _: 1
@@ -358,7 +335,7 @@ const _sfc_main = {
                 onClick: shufflePlay,
                 color: "primary",
                 size: "medium",
-                class: "flex-1 flex-center gap-thin"
+                class: "flex-1 bg-light radius-thin flex-center gap-thin"
               }, {
                 default: withCtx(() => [
                   createVNode(_sfc_main$3, { class: "i-medium" }),
@@ -370,7 +347,7 @@ const _sfc_main = {
                 onClick: toggleFollow,
                 color: "primary",
                 size: "medium",
-                class: "flex-1 flex-center gap-thin"
+                class: "flex-1 bg-light radius-thin flex-center gap-thin"
               }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(isFollowing.value ? "Follow" : "Unfollow"), 1)
@@ -378,7 +355,7 @@ const _sfc_main = {
                 _: 1
               }),
               createVNode(_sfc_main$4, {
-                label: { component: _sfc_main$5, class: "i-medium" },
+                label: { component: _sfc_main$5, class: "bg-light radius-thin pd-thin i-big" },
                 modelValue: showDropdown.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showDropdown.value = $event),
                 class: "relative"
@@ -401,7 +378,7 @@ const _sfc_main = {
                       onClick: addToQueue,
                       color: "transp",
                       size: "small",
-                      class: "w-100 justify-start"
+                      class: "w-100 t-nowrap justify-start"
                     }, {
                       default: withCtx(() => _cache[13] || (_cache[13] = [
                         createTextVNode(" Add to Queue ")
@@ -412,7 +389,7 @@ const _sfc_main = {
                       onClick: copyLink,
                       color: "transp",
                       size: "small",
-                      class: "w-100 justify-start"
+                      class: "w-100 t-nowrap justify-start"
                     }, {
                       default: withCtx(() => _cache[14] || (_cache[14] = [
                         createTextVNode(" Copy Link ")
@@ -425,7 +402,7 @@ const _sfc_main = {
                         onClick: editPlaylist,
                         color: "transp",
                         size: "small",
-                        class: "w-100 justify-start"
+                        class: "w-100 t-nowrap justify-start"
                       }, {
                         default: withCtx(() => _cache[15] || (_cache[15] = [
                           createTextVNode(" Edit Playlist ")
@@ -437,7 +414,7 @@ const _sfc_main = {
                         onClick: toggleCollaborative,
                         color: "transp",
                         size: "small",
-                        class: "w-100 justify-start"
+                        class: "t-nowrap w-100 justify-start"
                       }, {
                         default: withCtx(() => [
                           createTextVNode(toDisplayString(playlist.value.isCollaborative ? "Make Private" : "Make Collaborative"), 1)
@@ -449,7 +426,7 @@ const _sfc_main = {
                         onClick: deletePlaylist,
                         color: "danger",
                         size: "small",
-                        class: "w-100 justify-start"
+                        class: "t-nowrap w-100 justify-start"
                       }, {
                         default: withCtx(() => _cache[16] || (_cache[16] = [
                           createTextVNode(" Delete Playlist ")
@@ -465,48 +442,23 @@ const _sfc_main = {
             createElementVNode("div", _hoisted_18, [
               _cache[18] || (_cache[18] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Created by", -1)),
               createElementVNode("div", _hoisted_19, [
-                createVNode(_component_router_link, {
-                  to: getOwnerProfileLink(playlist.value.creator || playlist.value.owner),
-                  class: "flex items-center gap-medium flex-1 hover-opacity"
-                }, {
-                  default: withCtx(() => [
-                    createElementVNode("div", _hoisted_20, [
-                      getOwnerData(playlist.value)?.photoUrl ? (openBlock(), createBlock(Media, {
-                        key: 0,
-                        url: getOwnerData(playlist.value).photoUrl,
-                        alt: getOwnerData(playlist.value)?.name,
-                        class: "w-4r h-4r radius-full object-cover"
-                      }, null, 8, ["url", "alt"])) : (openBlock(), createElementBlock("div", _hoisted_21, toDisplayString(getPlaylistOwnerName(playlist.value).charAt(0)), 1))
-                    ]),
-                    createElementVNode("div", null, [
-                      createElementVNode("div", _hoisted_22, [
-                        createElementVNode("span", _hoisted_23, toDisplayString(getPlaylistOwnerName(playlist.value)), 1),
-                        getOwnerData(playlist.value)?.isVerified ? (openBlock(), createBlock(_sfc_main$6, {
-                          key: 0,
-                          class: "w-1r h-1r t-primary"
-                        })) : createCommentVNode("", true)
-                      ]),
-                      createElementVNode("span", _hoisted_24, toDisplayString(playlist.value.creator?.type || "User"), 1)
-                    ])
-                  ]),
-                  _: 1
-                }, 8, ["to"]),
-                !isOwner.value && unref(state$1).user ? (openBlock(), createBlock(_sfc_main$1, {
-                  key: 0,
-                  onClick: _cache[1] || (_cache[1] = () => toggleFollowUser(getOwnerId(playlist.value))),
-                  color: followedUsers.value.includes(getOwnerId(playlist.value)) ? "primary" : "transp",
-                  size: "small"
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(followedUsers.value.includes(getOwnerId(playlist.value)) ? "Following" : "Follow"), 1)
-                  ]),
-                  _: 1
-                }, 8, ["color"])) : createCommentVNode("", true)
+                createVNode(ArtistCardSmall, {
+                  artist: {
+                    _id: playlist.value.creator.target,
+                    to: { name: "User Profile", params: { _id: playlist.value.creator.target } },
+                    photoUrl: null,
+                    name: playlist.value.creator.target,
+                    isVerified: false
+                  },
+                  "is-following": followedUsers.value.includes(playlist.value.creator.target),
+                  "show-follow-button": !isOwner.value,
+                  onToggleFollow: _cache[1] || (_cache[1] = ($event) => toggleFollowUser(playlist.value.creator.target))
+                }, null, 8, ["artist", "is-following", "show-follow-button"])
               ])
             ]),
-            playlist.value.collaborators && playlist.value.collaborators.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_25, [
+            playlist.value.collaborators && playlist.value.collaborators.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_20, [
               _cache[19] || (_cache[19] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Collaborators", -1)),
-              createElementVNode("div", _hoisted_26, [
+              createElementVNode("div", _hoisted_21, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(playlist.value.collaborators, (collaborator) => {
                   return openBlock(), createElementBlock("div", {
                     key: collaborator._id || collaborator,
@@ -515,46 +467,47 @@ const _sfc_main = {
                     collaborator.photoUrl ? (openBlock(), createBlock(Media, {
                       key: 0,
                       url: collaborator.photoUrl,
-                      class: "w-1-5r h-1-5r radius-full object-cover"
+                      class: "i-regular radius-full object-cover"
                     }, null, 8, ["url"])) : createCommentVNode("", true),
-                    createElementVNode("span", _hoisted_27, toDisplayString(collaborator.name || collaborator.profile?.name || "User"), 1)
+                    createElementVNode("span", _hoisted_22, toDisplayString(collaborator.name || collaborator.profile?.name || "User"), 1)
                   ]);
                 }), 128))
               ])
             ])) : createCommentVNode("", true),
-            createElementVNode("div", _hoisted_28, [
-              createElementVNode("div", _hoisted_29, [
-                createVNode(_sfc_main$7, { class: "i-medium t-primary" }),
+            _cache[26] || (_cache[26] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Metadata", -1)),
+            createElementVNode("div", _hoisted_23, [
+              createElementVNode("div", _hoisted_24, [
+                createVNode(_sfc_main$6, { class: "i-medium t-primary" }),
                 createElementVNode("div", null, [
                   _cache[20] || (_cache[20] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Created", -1)),
-                  createElementVNode("div", _hoisted_30, toDisplayString(formatDate(playlist.value.createdAt)), 1)
+                  createElementVNode("div", _hoisted_25, toDisplayString(formatDate(playlist.value.createdAt)), 1)
                 ])
               ]),
-              createElementVNode("div", _hoisted_31, [
+              createElementVNode("div", _hoisted_26, [
                 createVNode(IconClock, { class: "i-medium t-primary" }),
                 createElementVNode("div", null, [
                   _cache[21] || (_cache[21] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Duration", -1)),
-                  createElementVNode("div", _hoisted_32, toDisplayString(totalDuration.value), 1)
+                  createElementVNode("div", _hoisted_27, toDisplayString(totalDuration.value), 1)
                 ])
               ]),
-              createElementVNode("div", _hoisted_33, [
-                createVNode(_sfc_main$8, { class: "i-medium t-primary" }),
+              createElementVNode("div", _hoisted_28, [
+                createVNode(_sfc_main$7, { class: "i-medium t-primary" }),
                 createElementVNode("div", null, [
                   _cache[22] || (_cache[22] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Updated", -1)),
-                  createElementVNode("div", _hoisted_34, toDisplayString(formatDate(playlist.value.updatedAt)), 1)
+                  createElementVNode("div", _hoisted_29, toDisplayString(formatDate(playlist.value.updatedAt)), 1)
                 ])
               ]),
-              createElementVNode("div", _hoisted_35, [
-                createVNode(_sfc_main$9, { class: "i-medium t-primary" }),
+              createElementVNode("div", _hoisted_30, [
+                createVNode(_sfc_main$8, { class: "i-medium t-primary" }),
                 createElementVNode("div", null, [
                   _cache[23] || (_cache[23] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Visibility", -1)),
-                  createElementVNode("div", _hoisted_36, toDisplayString(playlist.value.isPublic ? "Public" : "Private"), 1)
+                  createElementVNode("div", _hoisted_31, toDisplayString(playlist.value.isPublic ? "Public" : "Private"), 1)
                 ])
               ])
             ]),
-            playlist.value.tags && playlist.value.tags.length ? (openBlock(), createElementBlock("div", _hoisted_37, [
+            playlist.value.tags && playlist.value.tags.length ? (openBlock(), createElementBlock("div", _hoisted_32, [
               _cache[24] || (_cache[24] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Tags", -1)),
-              createElementVNode("div", _hoisted_38, [
+              createElementVNode("div", _hoisted_33, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(playlist.value.tags, (tag) => {
                   return openBlock(), createElementBlock("span", {
                     key: tag,
@@ -563,15 +516,15 @@ const _sfc_main = {
                 }), 128))
               ])
             ])) : createCommentVNode("", true),
-            playlist.value.description ? (openBlock(), createElementBlock("div", _hoisted_39, [
+            playlist.value.description ? (openBlock(), createElementBlock("div", _hoisted_34, [
               _cache[25] || (_cache[25] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "About", -1)),
-              createElementVNode("p", _hoisted_40, toDisplayString(playlist.value.description), 1)
+              createElementVNode("p", _hoisted_35, toDisplayString(playlist.value.description), 1)
             ])) : createCommentVNode("", true)
           ])
         ])) : createCommentVNode("", true),
-        !_ctx.isLoading && playlist.value && playlistTracks.value.length ? (openBlock(), createElementBlock("section", _hoisted_41, [
-          _cache[26] || (_cache[26] = createElementVNode("h2", { class: "h2 mn-b-medium" }, "Tracklist", -1)),
-          createVNode(_sfc_main$a, {
+        !_ctx.isLoading && playlist.value && playlistTracks.value.length ? (openBlock(), createElementBlock("section", _hoisted_36, [
+          _cache[27] || (_cache[27] = createElementVNode("h2", { class: "h2 mn-b-medium" }, "Tracklist", -1)),
+          createVNode(_sfc_main$9, {
             store: {
               read: () => _ctx.Promise.resolve(playlistTracks.value),
               state: { isLoading: false }
@@ -587,9 +540,9 @@ const _sfc_main = {
             }
           }, {
             default: withCtx(({ items }) => [
-              createElementVNode("div", _hoisted_42, [
+              createElementVNode("div", _hoisted_37, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(items, (track, index) => {
-                  return openBlock(), createBlock(_sfc_main$b, {
+                  return openBlock(), createBlock(_sfc_main$a, {
                     key: track._id,
                     track,
                     index: index + 1,
@@ -603,38 +556,38 @@ const _sfc_main = {
             ]),
             _: 1
           }, 8, ["store", "items"])
-        ])) : !_ctx.isLoading && playlist.value && !playlistTracks.value.length ? (openBlock(), createElementBlock("section", _hoisted_43, [
-          createElementVNode("div", _hoisted_44, [
-            _cache[28] || (_cache[28] = createElementVNode("h3", { class: "mn-b-small" }, "This playlist is empty", -1)),
-            _cache[29] || (_cache[29] = createElementVNode("p", { class: "t-transp t-medium mn-b-medium" }, "Add some tracks to get started", -1)),
+        ])) : !_ctx.isLoading && playlist.value && !playlistTracks.value.length ? (openBlock(), createElementBlock("section", _hoisted_38, [
+          createElementVNode("div", _hoisted_39, [
+            _cache[29] || (_cache[29] = createElementVNode("h3", { class: "mn-b-small" }, "This playlist is empty", -1)),
+            _cache[30] || (_cache[30] = createElementVNode("p", { class: "t-transp t-medium mn-b-medium" }, "Add some tracks to get started", -1)),
             isOwner.value || isCollaborator.value ? (openBlock(), createBlock(_sfc_main$1, {
               key: 0,
               onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$router.push({ name: "music-search" })),
               color: "primary",
               size: "medium"
             }, {
-              default: withCtx(() => _cache[27] || (_cache[27] = [
+              default: withCtx(() => _cache[28] || (_cache[28] = [
                 createTextVNode(" Find Tracks ")
               ])),
               _: 1
             })) : createCommentVNode("", true)
           ])
         ])) : createCommentVNode("", true),
-        !_ctx.isLoading && playlist.value && morePlaylists.value.length ? (openBlock(), createElementBlock("section", _hoisted_45, [
-          createElementVNode("div", _hoisted_46, [
-            _cache[31] || (_cache[31] = createElementVNode("h2", { class: "h2" }, "More Playlists", -1)),
+        !_ctx.isLoading && playlist.value && morePlaylists.value.length ? (openBlock(), createElementBlock("section", _hoisted_40, [
+          createElementVNode("div", _hoisted_41, [
+            _cache[32] || (_cache[32] = createElementVNode("h2", { class: "h2" }, "More Playlists", -1)),
             playlist.value.creator ? (openBlock(), createBlock(_component_router_link, {
               key: 0,
               to: getOwnerProfileLink(playlist.value.creator),
               class: "t-primary hover-opacity"
             }, {
-              default: withCtx(() => _cache[30] || (_cache[30] = [
+              default: withCtx(() => _cache[31] || (_cache[31] = [
                 createTextVNode(" See all ")
               ])),
               _: 1
             }, 8, ["to"])) : createCommentVNode("", true)
           ]),
-          createElementVNode("div", _hoisted_47, [
+          createElementVNode("div", _hoisted_42, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(morePlaylists.value, (relatedPlaylist) => {
               return openBlock(), createElementBlock("li", {
                 key: relatedPlaylist._id,
@@ -648,13 +601,13 @@ const _sfc_main = {
             }), 128))
           ])
         ])) : createCommentVNode("", true),
-        createVNode(_sfc_main$c, {
+        createVNode(_sfc_main$b, {
           isPopupOpen: showEditModal.value && (isOwner.value || isCollaborator.value),
           onClosePopup: _cache[4] || (_cache[4] = ($event) => showEditModal.value = false),
-          class: "bg-dark pd-medium w-m-30r radius-medium"
+          class: "bg-white pd-medium w-m-30r radius-medium"
         }, {
           default: withCtx(() => [
-            createVNode(_sfc_main$d, {
+            createVNode(_sfc_main$c, {
               editMode: true,
               url: playlist.value.url,
               onCancel: _cache[3] || (_cache[3] = ($event) => showEditModal.value = false),
@@ -663,21 +616,21 @@ const _sfc_main = {
           ]),
           _: 1
         }, 8, ["isPopupOpen"]),
-        createVNode(_sfc_main$c, {
+        createVNode(_sfc_main$b, {
           isPopupOpen: showDeleteModal.value,
           onClosePopup: _cache[6] || (_cache[6] = ($event) => showDeleteModal.value = false),
-          class: "bg-dark pd-medium w-m-25r radius-medium"
+          class: "bg-white pd-medium w-m-25r radius-medium"
         }, {
           default: withCtx(() => [
-            _cache[34] || (_cache[34] = createElementVNode("h3", { class: "mn-b-medium" }, "Delete Playlist", -1)),
-            createElementVNode("p", _hoisted_48, 'Are you sure you want to delete "' + toDisplayString(playlist.value.title) + '"? This action cannot be undone.', 1),
-            createElementVNode("div", _hoisted_49, [
+            _cache[35] || (_cache[35] = createElementVNode("h3", { class: "mn-b-medium" }, "Delete Playlist", -1)),
+            createElementVNode("p", _hoisted_43, 'Are you sure you want to delete "' + toDisplayString(playlist.value.title) + '"? This action cannot be undone.', 1),
+            createElementVNode("div", _hoisted_44, [
               createVNode(_sfc_main$1, {
                 onClick: _cache[5] || (_cache[5] = ($event) => showDeleteModal.value = false),
                 color: "transp",
                 size: "medium"
               }, {
-                default: withCtx(() => _cache[32] || (_cache[32] = [
+                default: withCtx(() => _cache[33] || (_cache[33] = [
                   createTextVNode(" Cancel ")
                 ])),
                 _: 1
@@ -687,7 +640,7 @@ const _sfc_main = {
                 color: "danger",
                 size: "medium"
               }, {
-                default: withCtx(() => _cache[33] || (_cache[33] = [
+                default: withCtx(() => _cache[34] || (_cache[34] = [
                   createTextVNode(" Delete Playlist ")
                 ])),
                 _: 1