feat: localize notifications & app name (#678)

package.json

@@ -6,7 +6,7 @@
   "bugs": {
     "url": "https://github.com/spicetify/spicetify-marketplace/issues"
   },
-  "packageManager": "pnpm@8.10.5",
+  "packageManager": "pnpm@8.14.2",
   "scripts": {
     "build": "spicetify-creator",
     "build:local": "spicetify-creator --out=dist --minify",

src/components/Card/Card.tsx

@@ -177,7 +177,7 @@ class Card extends React.Component<CardProps, {
     // Add to localstorage (this stores a copy of all the card props in the localstorage)
     // TODO: can I clean this up so it's less repetition?
     if (!this.props.item) {
-      Spicetify.showNotification("There was an error installing extension", true);
+      Spicetify.showNotification(t("notifications.extensionInstallationError"), true);
       return;
     }
     const { manifest, title, subtitle, authors, user, repo, branch, imageURL, extensionURL, readmeURL, lastUpdated, created } = this.props.item;
@@ -229,7 +229,7 @@ class Card extends React.Component<CardProps, {
   async installTheme(update = false) {
     const { item } = this.props;
     if (!item) {
-      Spicetify.showNotification("There was an error installing theme", true);
+      Spicetify.showNotification(t("notifications.themeInstallationError"), true);
       return;
     }
     console.debug(`Installing theme ${this.localStorageKey}`);
@@ -407,7 +407,7 @@ class Card extends React.Component<CardProps, {
   }
 
   openReadme() {
-    if (this.props.item?.manifest && this.props.item?.manifest?.readme) {
+    if (this.props.item?.manifest?.readme) {
       Spicetify.Platform.History.push({
         pathname: `${CUSTOM_APP_PATH}/readme`,
         state: {
@@ -424,7 +424,7 @@ class Card extends React.Component<CardProps, {
         },
       });
     } else {
-      Spicetify.showNotification("No page was found", true);
+      Spicetify.showNotification(t("notifications.noReadmeFile"), true);
     }
   }
 

src/components/Modals/Snippet/index.tsx

@@ -33,7 +33,7 @@ const SnippetModal = (props: { content?: CardProps, type: ModalType, callback?:
     const processedDescription = description.trim();
 
     if (isInstalled && props.type !== "EDIT_SNIPPET") {
-      Spicetify.showNotification("That name is already taken!", true);
+      Spicetify.showNotification(t("snippets.duplicateName"), true);
       return;
     }
 

src/extensions/extension.tsx

@@ -30,8 +30,9 @@ import {
 } from "../logic/FetchRemotes";
 
 (async function init() {
-  while (!(Spicetify?.LocalStorage && Spicetify?.showNotification)) {
-    await new Promise(resolve => setTimeout(resolve, 10));
+  if (!Spicetify.LocalStorage || !Spicetify.showNotification) {
+    setTimeout(init, 100);
+    return;
   }
 
   // https://github.com/satya164/react-simple-code-editor/issues/86
@@ -159,7 +160,7 @@ import {
   if (!tld) {
     if (window.navigator.onLine) {
       console.error(new Error("Unable to connect to the CDN, please check your Internet configuration."));
-      Spicetify.showNotification("Marketplace is unable to connect to the CDN. Please check your Internet configuration.", true, 5000);
+      Spicetify.showNotification(t("notifications.noCdnConnection"), true, 5000);
     } else {
       // Reload Marketplace extension in case the user couldn't connect to the CDN because they were offline
       window.addEventListener("online", init, { once: true });
@@ -178,11 +179,7 @@ import {
   const installedTheme = localStorage.getItem(LOCALSTORAGE_KEYS.themeInstalled);
   if (installedTheme) {
     if (localTheme.toLocaleLowerCase() !== "marketplace") {
-      Spicetify.showNotification(
-        t("notifications.wrongLocalTheme"),
-        true,
-        5000,
-      );
+      Spicetify.showNotification(t("notifications.wrongLocalTheme"), true, 5000);
       return;
     }
     initializeTheme(installedTheme);
@@ -206,7 +203,7 @@ async function queryRepos(type: RepoType, pageNum = 1) {
     .catch(() => null);
 
   if (!allRepos?.items) {
-    Spicetify.showNotification?.("Too Many Requests, Cool Down.", true);
+    Spicetify.showNotification(t("notifications.tooManyRequests"), true, 5000);
     return { items: [] };
   }
 

src/logic/FetchRemotes.ts

@@ -1,8 +1,8 @@
+import { t } from "i18next";
+
 import { BLACKLIST_URL, ITEMS_PER_REQUEST } from "../constants";
-import { CardItem, Snippet } from "../types/marketplace-types";
 import { addToSessionStorage, processAuthors } from "./Utils";
-
-import { RepoTopic } from "../types/marketplace-types";
+import { RepoTopic, CardItem, Snippet } from "../types/marketplace-types";
 import snippetsJSON from "../resources/snippets";
 
 // TODO: add sort type, order, etc?
@@ -30,7 +30,7 @@ export async function getTaggedRepos(tag: RepoTopic, page = 1, BLACKLIST:string[
     .catch(() => null);
 
   if (!allRepos?.items) {
-    Spicetify.showNotification("Too Many Requests, Cool Down.", true);
+    Spicetify.showNotification(t("notifications.tooManyRequests"), true, 5000);
     return { items: [] };
   }
 

src/logic/Utils.ts

@@ -1,7 +1,10 @@
+import Chroma from "chroma-js";
+import { t } from "i18next";
+
 import { CardProps } from "../components/Card/Card";
 import { Author, CardItem, ColourScheme, SchemeIni, Snippet, SortBoxOption, ResetCategory } from "../types/marketplace-types";
-import Chroma from "chroma-js";
 import { LOCALSTORAGE_KEYS } from "../constants";
+
 /**
  * Get localStorage data (or fallback value), given a key
  * @param key The localStorage key
@@ -562,7 +565,10 @@ export async function getMarkdownHTML(markdown: string, user: string, repo: stri
       method: "POST",
       body: JSON.stringify(postBody),
     });
-    if (!response.ok) throw Spicetify.showNotification(`Error parsing markdown (HTTP ${response.status})`, true);
+    if (!response.ok) throw Spicetify.showNotification(
+      t("notifications.markdownParsingError", { status: response.status }),
+      true,
+    );
 
     const html = await response.text();
 

src/resources/locales/en.json

@@ -33,6 +33,7 @@
     },
     "snippets": {
       "addTitle": "Add Snippet",
+      "duplicateName": "That name is already taken!",
       "editTitle": "Edit Snippet",
       "viewTitle": "View Snippet",
       "customCSS": "Custom CSS",
@@ -80,7 +81,7 @@
       "whatsChanged": "What's Changed",
       "seeChangelog": "See changelog",
       "howToUpgrade": "How to upgrade",
-      "viewGuide": "View install guide"
+      "viewGuide": "View guide"
     },
     "grid": {
       "spicetifyMarketplace": "Spicetify Marketplace",
@@ -116,7 +117,13 @@
     "colour_other": "colours",
     "favourite": "favourite",
     "notifications": {
-      "wrongLocalTheme": "Please set current_theme in config-xpui.ini to 'marketplace' to install themes using the Marketplace."
+      "wrongLocalTheme": "Please set current_theme in config-xpui.ini to 'marketplace' to install themes using the Marketplace",
+      "tooManyRequests": "Too many requests, cool down",
+      "noCdnConnection": "Marketplace is unable to connect to the CDN. Please check your Internet configuration",
+      "markdownParsingError": "Error parsing markdown (HTTP {{status}})",
+      "noReadmeFile": "No README was found",
+      "themeInstallationError": "There was an error installing theme",
+      "extensionInstallationError": "There was an error installing extension"
     }
   }
 }

src/resources/locales/ru.json

@@ -33,6 +33,7 @@
     },
     "snippets": {
       "addTitle": "Добавление сниппета",
+      "duplicateName": "Сниппет с таким названием уже существует",
       "editTitle": "Редактирование сниппета",
       "viewTitle": "Просмотр сниппета",
       "customCSS": "CSS",
@@ -116,7 +117,13 @@
     "colour_other": "цвета",
     "favourite": "избранное",
     "notifications": {
-      "wrongLocalTheme": "Пожалуйста, измените значение current_theme в config-xpui.ini на 'marketplace', чтобы устанавливать темы из Маркетплейса"
+      "wrongLocalTheme": "Пожалуйста, измените значение current_theme в config-xpui.ini на 'marketplace', чтобы использовать темы из Маркетплейса",
+      "tooManyRequests": "Слишком много запросов. Пожалуйста, попробуйте позже",
+      "noCdnConnection": "Маркетплейс не может подключиться к CDN. Пожалуйста, попробуйте позже",
+      "markdownParsingError": "Ошибка при парсинге Markdown (HTTP {{status}})",
+      "noReadmeFile": "README не найден",
+      "themeInstallationError": "Ошибка при установке темы",
+      "extensionInstallationError": "Ошибка при установке расширения"
     }
   }
 }

src/settings.json

@@ -1,5 +1,8 @@
 {
-  "displayName": "Marketplace",
+  "displayName": {
+    "en": "Marketplace",
+    "ru": "Маркетплейс"
+  },
   "nameId": "marketplace",
   "icon": "assets/icon.svg",
   "activeIcon": "assets/icon-filled.svg"