Merge branch 'main' into patch-1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "marketplace",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "homepage": "https://github.com/spicetify/marketplace",
   "repository": "github:spicetify/marketplace",
   "bugs": {

resources/snippets.json

@@ -14,7 +14,7 @@
   {
     "title": "Rounded Images",
     "description": "Adds rounded corners to the cover art, playlist covers, cards and other images",
-    "code": "/* Expanded Cover Art Image (+ position fix) */\n .main-navBar-navBar > :nth-child(3) {\n margin: 0 0 0 1px;\n border-radius: 6px;\n }\n \n /* Collapsed Cover Art Image */\n .cover-art-image,\n .artist-artistOverview-sideBlock > div > section > div:nth-child(3) > section:nth-child(2) > div > img,\n .view-homeShortcutsGrid-image {\n border-radius: 4px;\n }\n \n /*\n Playlist Header\n Search Category Card Image\n List Cards\n Local Files Card\n Placeholder Profile Card\n Artist Overview Side Block\n */\n .main-entityHeader-shadow,\n .x-categoryCard-image,\n .x-entityImage-circle, \n .main-image-image, \n .main-cardImage-image,\n .main-cardImage-imageWrapper,\n .main-entityHeader-imagePlaceholder > div,\n .artist-artistOverview-sideBlock > div > section {\n border-radius: 6px;\n }\n \n /* Circled Artist + Profile Cards (force) */\n .main-cardImage-circular,\n .main-entityHeader-imagePlaceholder,\n .main-entityHeader-circle {\n border-radius: 50% !important;\n }\n \n /* Track List Image */\n .main-trackList-rowImage {\n border-radius: 3px;\n }",
+    "code": "/* Expanded Cover Art Image (+ position fix) */\n .main-navBar-navBar > :nth-child(3) {\n margin: 0 0 0 1px;\n border-radius: 6px;\n }\n \n /* Collapsed Cover Art Image */\n .cover-art-image,\n .artist-artistOverview-sideBlock > div > section > div:nth-child(3) > section:nth-child(2) > div > img,\n .view-homeShortcutsGrid-image {\n border-radius: 4px;\n }\n \n /*\n Playlist Header\n Search Category Card Image\n List Cards\n Local Files Card\n Placeholder Profile Card\n Artist Overview Side Block\n */\n .main-entityHeader-shadow,\n .x-categoryCard-image,\n .x-entityImage-circle, \n .main-image-image, \n .kwzBRpFigKr1EP2d5qle, \n .main-cardImage-image,\n .main-cardImage-imageWrapper,\n .main-entityHeader-imagePlaceholder > div,\n .artist-artistOverview-sideBlock > div > section {\n border-radius: 6px;\n }\n \n /* Circled Artist + Profile Cards (force) */\n .main-cardImage-circular,\n .main-entityHeader-imagePlaceholder,\n .main-entityHeader-circle {\n border-radius: 50% !important;\n }\n \n /* Track List Image */\n .main-trackList-rowImage {\n border-radius: 3px;\n }\n \n /* Home Shortcuts Grid (force) */\n .view-homeShortcutsGrid-image,\n .view-homeShortcutsGrid-imageWrapper {\n border-radius: 4px !important;\n }\n \n /* Artist, Liked songs heart (force) */\n .T_JcGdJujSuj014SZfjl {\n border-radius: 20% !important;\n }",
     "preview": "resources/assets/snippets/rounded-images.png"
   },
   {
@@ -239,12 +239,6 @@
     "code": ".x-progressBar-progressBarBg { height: 100% !important; } .x-progressBar-sliderArea { height: 100% !important; } .x-progressBar-fillColor { height: 100% !important; }",
     "preview": "resources/assets/snippets/thicker-bars.png"
   },
-  {
-    "title": "Hide friends activity button",
-    "description": "Hides the friends activity button next to your profile picture",
-    "code": "button.encore-over-media-set.main-topBar-buddyFeed {display: none;}",
-    "preview": "resources/assets/snippets/hide-friends-activity-button.png"
-  },
   {
     "title": "Fullscreen hide playing from",
     "description": "Hides the playing from card while in fullscreen view",
@@ -366,10 +360,10 @@
     "preview": "resources/assets/snippets/pokemon-adventure.png"
   },
   {
-    "title": "Hide Friend Activity Button 2024",
+    "title": "Hide Friend Activity Button",
     "description": "Hides the Friend Activity button",
-    "code": "[aria-label='Friend Activity'] {display:none;}",
-    "preview": "resources/assets/snippets/Hide-Friend-Activity-Button.png"
+    "code": "[aria-label='Friend Activity'] {display:none!important;}",
+    "preview": "resources/assets/snippets/hide-friend-activity-button.png"
   },
   {
     "title": "Hide What's New Button",
@@ -446,7 +440,7 @@
   {
     "title": "Rounded Buttons",
     "description": "Add rounded coners to buttons and search bar",
-    "code": ".x-filterBox-expandButton, .main-avatar-avatar, .main-topBar-buddyFeed, .main-topBar-button, .Button-sc-1dqy6lx-0, .main-coverSlotCollapsed-expandButton, .NqzueDshzvgXEygqOGPG, .main-embedWidgetGenerator-themeRadio, .Psc33HXPyazZYAAr1tgz {border-radius: 15% !important;} .XNFZdOLgMlx491fEWdYJ, .ChipClear__ChipClearComponent-sc-zv5btm-0, .Button-sc-1dqy6lx-0, .Button-sc-y0gtbx-0, .main-nowPlayingView-aboutArtistV2FollowButton, .main-playPauseButton-button, .ButtonInner-sc-14ud5tc-0, .search-searchCategory-carouselButton, .ChipInnerComponent-sm, .ChipInnerComponent-sm-selected, .switch, .arrow-btn, .pSxFsY9Fgcj5f8Gf05mh, .qyKJPLjz8o4jnbk92JOn, .reset, .rdp-button, .btn, .TabItem__StyledTabItem-sc-2ani5y-0, .main-playlistEditDetailsModal-closeBtn, .main-embedWidgetGenerator-closeBtn, .Chip__ChipComponent-sc-ry3uox-0 {border-radius: 6px !important;} .view-homeShortcutsGrid-playButton, .ButtonInner-medium-iconOnly,  .button-module__button___hf2qg_marketplace {border-radius: 10px !important;} .ButtonInner-large-iconOnly {border-radius: 12px !important;} .main-globalNav-searchInputContainer, .SFAoASy0S_LZJmYZ3Fh9, .x-searchInput-searchInputInput,  .toggle-module__toggle-indicator-wrapper___6Lcp0_marketplace, .x-toggle-indicatorWrapper, .main-topBar-searchBar {border-collapse: separate; border-radius: 6px !important;}",
+    "code": ".x-filterBox-expandButton, .main-avatar-avatar, .main-topBar-buddyFeed, .main-topBar-button, .Button-sc-1dqy6lx-0, .main-coverSlotCollapsed-expandButton, .NqzueDshzvgXEygqOGPG {border-radius: 15% !important;} .XNFZdOLgMlx491fEWdYJ, .ChipClear__ChipClearComponent-sc-zv5btm-0, .Button-sc-1dqy6lx-0, .Button-sc-y0gtbx-0, .main-nowPlayingView-aboutArtistV2FollowButton, .main-playPauseButton-button, .ButtonInner-sc-14ud5tc-0, .search-searchCategory-carouselButton, .ChipInnerComponent-sm, .ChipInnerComponent-sm-selected, .switch, .arrow-btn, .pSxFsY9Fgcj5f8Gf05mh, .qyKJPLjz8o4jnbk92JOn, .reset, .rdp-button, .btn, .TabItem__StyledTabItem-sc-2ani5y-0, .main-embedWidgetGenerator-closeBtn, .main-playlistEditDetailsModal-closeBtn, .profile-userEditDetails-closeButton, .Chip__ChipComponent-sc-ry3uox-0, .LegacyChipInner__ChipInnerComponent-sc-1qguixk-0, .sHDdcNIw9AQLbLrpdcqO, .view-homeShortcutsGrid-playButton, .ButtonInner-medium-iconOnly,  .button-module__button___hf2qg_marketplace {border-radius: 6px !important;} .ButtonInner-large-iconOnly {border-radius: 12px !important;} .main-globalNav-searchInputContainer, .SFAoASy0S_LZJmYZ3Fh9, .x-searchInput-searchInputInput,  .toggle-module__toggle-indicator-wrapper___6Lcp0_marketplace, .x-toggle-indicatorWrapper, .main-topBar-searchBar {border-collapse: separate; border-radius: 6px !important;}",
     "preview": "resources/assets/snippets/rounded-buttons.png"
   },
   {

src/components/Card/TagsDiv.tsx

@@ -50,7 +50,7 @@ const TagsDiv = (props: {
     }, []);
   };
   // Sort tags so that externalJS and archived tags come first
-  let baseTags = props.tags.sort((a) => (a === t("grid.externalJS") || a === t("grid.archived") ? -1 : 1));
+  let baseTags = [...(props.tags ?? [])].sort((a) => (a === t("grid.externalJS") || a === t("grid.archived") ? -1 : 1));
   let extraTags: string[] = [];
   // If there are more than one extra tags, slice them and add an expand button
   if (baseTags.length - MAX_TAGS > 1) {

src/components/Modals/Settings/DnDList.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Component, useState, useEffect, useRef } from "react";
 import { DragDropContext, Draggable, type DropResult, Droppable } from "react-beautiful-dnd";
 import { LOCALSTORAGE_KEYS } from "../../../constants";
 import type { Config, TabItemConfig } from "../../../types/marketplace-types";
@@ -7,24 +7,48 @@ const DnDList = (props: {
   modalConfig: Config;
   updateConfig: (CONFIG: Config) => void;
 }) => {
-  // Get Value of CSS variable
   const colorVariable = getComputedStyle(document.body).getPropertyValue("--spice-button-disabled");
+  const [currentSize, setCurrentSize] = useState({ width: window.innerWidth });
 
-  const getItemStyle = (isDragging, draggableStyle, isEnabled) => ({
-    borderRadius: "5px",
-    border: isEnabled ? `2px solid ${colorVariable}` : "2px solid red",
-    userSelect: "none",
-    paddingTop: 12,
-    paddingBottom: 12,
-    width: "110px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    textDecoration: isEnabled ? "none" : "line-through",
-    ...draggableStyle
-  });
+  useEffect(() => {
+    const onResize = () => setCurrentSize({ width: window.innerWidth });
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+
+  const adjustTransform = (transform: string) => {
+    const match = transform.match(/translate\(([-\d.]+)px,\s*([-\d.]+)px\)/);
+    if (!match) return transform;
+    const isMaximized = currentSize.width >= window.screen.width * 0.95;
+    const offsetX = isMaximized ? 600 : 430;
+    const offsetY = isMaximized ? 120 : 70;
+    const x = Number.parseFloat(match[1]) - offsetX;
+    const y = Number.parseFloat(match[2]) - offsetY;
+    return `translate(${x}px, ${y}px)`;
+  };
+
+  const getItemStyle = (isDragging, draggableStyle, isEnabled) => {
+    const style = { ...draggableStyle };
+    if (isDragging && style.transform) {
+      style.transform = adjustTransform(style.transform);
+    }
+    return {
+      borderRadius: "5px",
+      border: isEnabled ? `2px solid ${colorVariable}` : "2px solid red",
+      userSelect: "none",
+      paddingTop: 12,
+      paddingBottom: 12,
+      width: "110px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      textDecoration: isEnabled ? "none" : "line-through",
+      cursor: "pointer",
+      ...style
+    };
+  };
 
-  const getListStyle = (isDraggingOver) => ({
+  const getListStyle = () => ({
     display: "flex",
     paddingTop: 8,
     paddingBottom: 8,
@@ -62,18 +86,16 @@ const DnDList = (props: {
     <DragDropContext onDragEnd={onDragEnd}>
       <Droppable droppableId="droppable" direction="horizontal">
         {(provided, snapshot) => (
-          <div ref={provided.innerRef} style={getListStyle(snapshot.isDraggingOver)} {...provided.droppableProps}>
+          <div ref={provided.innerRef} style={getListStyle()} {...provided.droppableProps}>
             {props.modalConfig.tabs.map((item, index) => (
               <Draggable key={item.name} draggableId={item.name} index={index}>
                 {(provided, snapshot) => (
                   <div
                     ref={provided.innerRef}
                     {...provided.draggableProps}
-                    {...provided.dragHandleProps}
                     style={getItemStyle(snapshot.isDragging, provided.draggableProps.style, item.enabled)}
-                    onClick={() => onToggleEnabled(item.name)}
                   >
-                    <div className="dnd-box">
+                    <div className="dnd-box" {...provided.dragHandleProps} onClick={() => onToggleEnabled(item.name)}>
                       <svg
                         className="dnd-icon"
                         fill="currentColor"