better support section in about

- added status page to support section
- updated order of items
- clean up

src/config.json

@@ -8,37 +8,37 @@
         "contact": "https://wukko.me/contacts",
         "support": {
             "default": {
+                "email": {
+                    "emoji": "📧",
+                    "url": "mailto:support@cobalt.tools",
+                    "name": "support@cobalt.tools"
+                },
                 "twitter": {
                     "emoji": "🐦",
                     "url": "https://twitter.com/justusecobalt",
-                    "handle": "@justusecobalt"
+                    "name": "@justusecobalt"
                 },
                 "discord": {
                     "emoji": "👾",
                     "url": "https://discord.gg/pQPt8HBUPu",
-                    "handle": "cobalt community server"
+                    "name": "cobalt discord server"
                 },
                 "mastodon": {
                     "emoji": "🐘",
                     "url": "https://wetdry.world/@cobalt",
-                    "handle": "@cobalt@wetdry.world"
+                    "name": "@cobalt@wetdry.world"
-                },
-                "support email": {
-                    "emoji": "📧",
-                    "url": "mailto:support@cobalt.tools",
-                    "handle": "support@cobalt.tools"
                 }
             },
             "ru": {
-                "канал в telegram": {
+                "telegram": {
                     "emoji": "📬",
                     "url": "https://t.me/justusecobalt_ru",
-                    "handle": "@justusecobalt_ru"
+                    "name": "канал в telegram"
                 },
-                "поддержка по почте": {
+                "email": {
                     "emoji": "📧",
                     "url": "mailto:support@cobalt.tools",
-                    "handle": "support@cobalt.tools"
+                    "name": "support@cobalt.tools"
                 }
             }
         }
@@ -58,7 +58,9 @@
         }
     },
     "links": {
-        "saveToGalleryShortcut": "https://www.icloud.com/shortcuts/b401917928fd407daf1db0fd07eb7e78"
+        "saveToGalleryShortcut": "https://www.icloud.com/shortcuts/b401917928fd407daf1db0fd07eb7e78",
+        "statusPage": "https://status.cobalt.tools/",
+        "troubleshootingGuide": "https://github.com/wukko/cobalt/blob/current/docs/troubleshooting.md"
     },
     "celebrations": {
         "01-01": "🎄",

src/front/cobalt.css

@@ -797,6 +797,7 @@ button:active,
 .collapse-body {
     display: none;
     padding: var(--padding-1);
+    padding-bottom: 1rem;
     user-select: text;
     -webkit-user-select: text;
 }

src/front/emoji/loudspeaker.svg

@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.18 19.61C28.2345 19.61 29.9 17.9445 29.9 15.89C29.9 13.8355 28.2345 12.17 26.18 12.17C24.1255 12.17 22.46 13.8355 22.46 15.89C22.46 17.9445 24.1255 19.61 26.18 19.61Z" fill="#212121"/>
+<path d="M10.9999 11L11.6799 9.99997C12.9299 9.99997 14.1699 9.70997 15.2899 9.16997L21.5499 6.08997V25.71L15.2899 22.63C14.1699 22.08 12.9299 21.79 11.6799 21.79L10.9999 20V11ZM6.21586 29.0083H8.78989C9.45989 29.0083 9.99989 28.4683 9.99989 27.7983V19.89H5.00586V27.7983C5.00586 28.4683 5.54586 29.0083 6.21586 29.0083Z" fill="#D3D3D3"/>
+<path d="M24.07 3C22.38 3 21 4.37 21 6.07V25.72C21 27.41 22.37 28.79 24.07 28.79C25.76 28.79 27.14 27.42 27.14 25.72V6.07C27.13 4.37 25.76 3 24.07 3Z" fill="#F8312F"/>
+<path d="M3.72662 10H12V21.78H3.72662C2.77081 21.78 2 21.03 2 20.11V11.68C2 10.75 2.77081 10 3.72662 10Z" fill="#CA0B4A"/>
+</svg>

src/front/emoji/wrench.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.2359 5.89697L6.00835 8.66735C6.26317 8.92198 6.66069 8.92198 6.91551 8.66735L8.66867 6.91549C8.92349 6.66086 8.92349 6.26364 8.66867 6.00901L5.89623 3.23862C5.53948 2.88214 5.71276 2.28121 6.19182 2.15899C7.96537 1.72102 9.92239 2.18954 11.329 3.54418C12.8928 5.05575 13.3617 7.28456 12.7243 9.22843L22.7212 19.2909C24.6418 18.6406 26.8528 19.0802 28.387 20.6132C29.7936 22.0188 30.2828 24.0049 29.8445 25.8178C29.7222 26.2864 29.1208 26.4595 28.7641 26.103L25.9917 23.3326C25.7368 23.078 25.3393 23.078 25.0845 23.3326L23.3313 25.0845C23.0765 25.3391 23.0765 25.7364 23.3313 25.991L26.1038 28.7614C26.4605 29.1179 26.2872 29.7188 25.8082 29.841C24.0346 30.279 22.0776 29.8105 20.671 28.4558C19.1243 26.9608 18.6487 24.7642 19.2552 22.8355L9.2093 12.7321C7.30512 13.3486 5.12872 12.9014 3.61304 11.3868C2.20643 9.98124 1.71717 7.99512 2.15546 6.18215C2.27778 5.71363 2.87915 5.54048 3.2359 5.89697Z" fill="#B4ACBC"/>
+</svg>

src/localization/languages/en.json

@@ -1,7 +1,7 @@
 {
     "name": "english",
     "substrings": {
-        "ContactLink": "<a class=\"text-backdrop link\" href=\"{repo}\" target=\"_blank\">create an issue on github</a>"
+        "ContactLink": "check the <a class=\"text-backdrop link\" href=\"{statusPage}\" target=\"_blank\">status page</a> or <a class=\"text-backdrop link\" href=\"{repo}\" target=\"_blank\">create an issue on github</a>."
     },
     "strings": {
         "AppTitleCobalt": "cobalt",
@@ -45,7 +45,6 @@
         "SettingsEnableDownloadPopup": "ask how to save",
         "AccessibilityEnableDownloadPopup": "ask what to do with downloads",
         "SettingsQualityDescription": "if selected quality isn't available, closest one is used instead.",
-        "LinkGitHubChanges": "&gt;&gt; see previous commits and contribute on github",
         "NoScriptMessage": "cobalt uses javascript for api requests and interactive interface. you have to allow javascript to use this site. there are no pesty scripts, pinky promise.",
         "DownloadPopupDescriptionIOS": "easiest way to save videos on ios:\n1. add <a class=\"text-backdrop link\" href=\"{saveToGalleryShortcut}\" target=\"_blank\">this siri shortcut</a>.\n2. press \"share\" above and select \"save to photos\" in appeared share sheet.\nif asked, review the permission request, and press \"always allow\".\n\nalternative method:\npress and hold the download button, hide the video preview, and select \"download linked file\" to download.\nthen, open safari downloads, select the file you downloaded, open share menu, and finally press \"save video\".",
         "DownloadPopupDescription": "download button opens a new tab with requested file. you can disable this popup in settings.",
@@ -127,7 +126,7 @@
         "FeatureErrorGeneric": "your browser doesn't allow or support this feature. check if there are any updates available and try again!",
         "ClipboardErrorFirefox": "you're using firefox where all clipboard reading functionality is disabled.\n\nyou can fix this by following steps listed <a class=\"text-backdrop link\" href=\"{repo}/blob/current/docs/troubleshooting.md#how-to-fix-clipboard-pasting-in-firefox\" target=\"_blank\">here!</a>\n\n...or you can paste the link manually instead.",
         "ClipboardErrorNoPermission": "cobalt can't access the most recent item in your clipboard without your permission.\n\nif you don't want to give access, just paste the link manually instead.\n\nif you do, go to site settings and enable the clipboard permission.",
-        "SupportSelfTroubleshooting": "experiencing issues? try <a class=\"text-backdrop link\" href=\"{repo}/blob/current/docs/troubleshooting.md\" target=\"_blank\">self-troubleshooting guide</a> first!",
+        "SupportSelfTroubleshooting": "experiencing issues? try one of these first:",
         "AccessibilityGoBack": "go back and close the popup",
         "CollapseKeyboard": "keyboard shortcuts",
         "KeyboardShortcutsIntro": "use cobalt even faster with keyboard shortcuts:",
@@ -157,6 +156,8 @@
         "FilenamePreviewAudioTitle": "Audio Title",
         "FilenamePreviewAudioAuthor": "Audio Author",
         "UrgentFilenameUpdate": "customizable file names!",
-        "UrgentTwitterPatch": "fixes and easier downloads"
+        "UrgentTwitterPatch": "fixes and easier downloads",
+        "StatusPage": "service status page",
+        "TroubleshootingGuide": "self-troubleshooting guide"
     }
 }

src/localization/languages/ru.json

@@ -1,14 +1,14 @@
 {
     "name": "русский",
     "substrings": {
-        "ContactLink": "<a class=\"text-backdrop link\" href=\"{repo}\" target=\"_blank\">напиши об этом на github (можно на русском)</a>"
+        "ContactLink": "глянь <a class=\"text-backdrop link\" href=\"{statusPage}\" target=\"_blank\">статус серверов</a> или <a class=\"text-backdrop link\" href=\"{repo}\" target=\"_blank\">напиши о проблеме на github (можно на русском)</a>"
     },
     "strings": {
         "AppTitleCobalt": "кобальт",
         "LinkInput": "вставь ссылку сюда",
         "AboutSummary": "кобальт - твой друг при скачивании контента из соцсетей и других сервисов. никакой рекламы, трекеров и прочего мусора. вставляешь ссылку и получаешь файл. всё. ничего лишнего.",
         "EmbedBriefDescription": "сохраняй то, что любишь. без рекламы, трекеров и лишней мороки.",
-        "MadeWithLove": "сделано wukko, с <3",
+        "MadeWithLove": "сделано с любовью <3",
         "AccessibilityInputArea": "зона вставки ссылки",
         "AccessibilityOpenAbout": "открыть окно с инфой",
         "AccessibilityDownloadButton": "кнопка скачивания",
@@ -45,7 +45,6 @@
         "SettingsEnableDownloadPopup": "выбор метода скачивания",
         "AccessibilityEnableDownloadPopup": "спрашивать, что делать с загрузками",
         "SettingsQualityDescription": "если выбранное качество недоступно, то выбирается ближайшее к нему.",
-        "LinkGitHubChanges": "&gt;&gt; смотри предыдущие изменения на github",
         "NoScriptMessage": "кобальт использует javascript для обработки ссылок и интерактивного интерфейса. ты должен разрешить использование javascript, чтобы пользоваться сайтом. тут нет никаких зловредных скриптов, обещаю.",
         "DownloadPopupDescriptionIOS": "наиболее простой метод скачивания видео на ios:\n1. добавь <a class=\"text-backdrop link\" href=\"{saveToGalleryShortcut}\" target=\"_blank\">этот сценарий siri</a>.\n2. нажми \"поделиться\" выше и выбери \"save to photos\" в открывшемся окне.\nесли появляется окно с запросом разрешения, то прочитай его, потом нажми \"всегда разрешать\".\n\nальтернативный метод:\nзажми кнопку \"скачать\", затем скрой превью и выбери \"загрузить файл по ссылке\" в появившемся окне.\nпотом открой загрузки в safari, выбери скачанный файл, нажми иконку \"поделиться\", и, наконец, нажми \"сохранить видео\".",
         "DownloadPopupDescription": "кнопка скачивания открывает новое окно с файлом. ты можешь отключить выбор метода скачивания файла в настройках.",
@@ -128,7 +127,7 @@
         "FeatureErrorGeneric": "твой браузер не разрешает или не поддерживает эту функцию. проверь наличие обновлений и попробуй ещё раз!",
         "ClipboardErrorFirefox": "ты используешь firefox в котором все функции чтения из буфера обмена отключены по умолчанию.\n\nно это можно исправить следуя шагам, описанным <a class=\"text-backdrop link\" href=\"{repo}/blob/current/docs/troubleshooting.md#how-to-fix-clipboard-pasting-in-firefox\" target=\"_blank\">здесь</a>\n\n...или же ты можешь просто вставить ссылку вручную.",
         "ClipboardErrorNoPermission": "кобальт не может прочитать последний элемент в буфере обмена без твоего разрешения.\n\nесли ты не хочешь давать доступ, просто вставь ссылку вручную.\n\nну а если хочешь, то открой настройки сайта и разреши доступ на чтение буфера обмена.",
-        "SupportSelfTroubleshooting": "возникли проблемы? попробуй сначала исправить всё сам <a class=\"text-backdrop link\" href=\"{repo}/blob/current/docs/troubleshooting.md\" target=\"_blank\">по этому гиду!</a>",
+        "SupportSelfTroubleshooting": "возникли проблемы? попробуй сначала что-то из этого:",
         "AccessibilityGoBack": "вернуться назад и закрыть окно",
         "CollapseKeyboard": "горячие клавиши",
         "KeyboardShortcutsIntro": "пользуйся кобальтом ещё быстрее с горячими клавишами:",
@@ -159,6 +158,8 @@
         "FilenamePreviewAudioTitle": "Название Аудио",
         "FilenamePreviewAudioAuthor": "Автор Аудио",
         "UrgentFilenameUpdate": "изменяемые названия файлов!",
-        "UrgentTwitterPatch": "фиксы и удобное скачивание"
+        "UrgentTwitterPatch": "фиксы и удобное скачивание",
+        "StatusPage": "статус серверов",
+        "TroubleshootingGuide": "гайд по устранению проблем"
     }
 }

src/localization/manager.js

@@ -16,7 +16,12 @@ export async function loadLoc() {
 }
 
 export function replaceBase(s) {
-    return s.replace(/\n/g, '<br/>').replace(/{saveToGalleryShortcut}/g, links.saveToGalleryShortcut).replace(/{repo}/g, repo).replace(/\*;/g, "&bull;");
+    return s
+            .replace(/\n/g, '<br/>')
+            .replace(/{saveToGalleryShortcut}/g, links.saveToGalleryShortcut)
+            .replace(/{repo}/g, repo)
+            .replace(/{statusPage}/g, links.statusPage)
+            .replace(/\*;/g, "&bull;");
 }
 export function replaceAll(lang, str, string, replacement) {
     let s = replaceBase(str[string])

src/modules/emoji.js

@@ -39,7 +39,9 @@ const names = {
     "🎞️": "film_frames",
     "🎧": "headphone",
     "📧": "email",
-    "📬": "mailbox"
+    "📬": "mailbox",
+    "📢": "loudspeaker",
+    "🔧": "wrench"
 }
 let sizing = {
     18: 0.8,

src/modules/pageRender/elements.js

@@ -158,15 +158,15 @@ export function popupWithBottomButtons(obj) {
         </div>
     </div>`
 }
-export function socialLink(emji, name, handle, url) {
+export function socialLink(emji, name, url) {
-    return `<div class="cobalt-support-link">${emji} ${name}: <a class="text-backdrop link" href="${url}" target="_blank">${handle}</a></div>`
+    return `<div class="cobalt-support-link">${emji} <a class="text-backdrop link" href="${url}" target="_blank">${name}</a></div>`
 }
 export function socialLinks(lang) {
     let links = authorInfo.support[lang] ? authorInfo.support[lang] : authorInfo.support.default;
     let r = ``;
     for (let i in links) {
         r += socialLink(
-            emoji(links[i].emoji), i, links[i].handle, links[i].url
+            emoji(links[i].emoji), links[i].name, links[i].url
         )
     }
     return r

src/modules/pageRender/page.js

@@ -1,5 +1,5 @@
 import { checkbox, collapsibleList, explanation, footerButtons, multiPagePopup, popup, popupWithBottomButtons, sep, settingsCategory, switcher, socialLink, socialLinks, urgentNotice, keyboardShortcuts, webLoc, sponsoredList, betaTag } from "./elements.js";
-import { services as s, authorInfo, version, repo, donations, supportedAudio } from "../config.js";
+import { services as s, authorInfo, version, repo, donations, supportedAudio, links } from "../config.js";
 import { getCommitInfo } from "../sub/currentCommit.js";
 import loc from "../../localization/manager.js";
 import emoji from "../emoji.js";
@@ -146,15 +146,15 @@ export default function(obj) {
                         }, {
                             name: "support",
                             title: `${emoji("❤️‍🩹")} ${t("CollapseSupport")}`,
-                            body: 
+                            body: `${t("SupportSelfTroubleshooting")}`
-                            `${t("SupportSelfTroubleshooting")}<br/><br/>`
+                            + `${socialLink(emoji("📢"), t("StatusPage"), links.statusPage)}`
-                            + `${t("FollowSupport")}<br/>`
+                            + `${socialLink(emoji("🔧"), t("TroubleshootingGuide"), links.troubleshootingGuide)}`
-                            + `${socialLinks(obj.lang)}<br/>`
+                            + `<br/>`
-                            + `${t("SourceCode")}<br/>`
+                            + `${t("FollowSupport")}`
-                            + `${socialLink(
+                            + `${socialLinks(obj.lang)}`
-                                emoji("🐙"), "github", repo.replace("https://github.com/", ''), repo
+                            + `<br/>`
-                            )}<br/>
+                            + `${t("SourceCode")}`
-                            ${t("SupportNote")}`
+                            + `${socialLink(emoji("🐙"), repo.replace("https://github.com/", ''), repo)}`
                         }, {
                             name: "privacy",
                             title: `${emoji("🔒")} ${t("CollapsePrivacy")}`,