feat: exim dialog improvements

contributing.md

@@ -138,9 +138,10 @@ To edit an existing translation, please follow these steps:
 
 > [!NOTE]
 > 
-> If there are a set of lone `--`, these denote the start of the arguments actually passed to the *script* process and must be preserved.  
-> Any arguments before that will be interpreted by *npm*; see the difference in `npm run --silent invisible -- "echo hello"`  
-> Here, `--silent` is an argument that makes npm shut up and `"echo hello"` is an argument we wanna pass to the script.
+> When you are using npm (as opposed to `pnpm`), read the following carefully:  
+> If there are a set of lone `--`, these denote the start of the arguments actually passed to the *script* process and they must be preserved.  
+> Any arguments before the double hyphens will be interpreted by *npm*; see the difference in `npm run --silent invisible -- "echo hello"`  
+> Here, `--silent` is an argument we pass to npm to make it shut up and `"echo hello"` is an argument we wanna pass to the script that npm ends up invoking.
 
 <br>
 

dist/BetterYTM.css

@@ -652,7 +652,7 @@ body .bytm-ripple.slower {
 }
 
 .bytm-exim-dialog-pane textarea {
-  height: 200px;
+  height: 120px;
   resize: none;
 }
 
@@ -1359,6 +1359,8 @@ hr {
   vertical-align: middle;
   cursor: pointer;
   margin-left: 0px;
+
+  border: 1px solid #999;
 }
 
 .bytm-generic-btn.long .bytm-generic-btn-img.left {

src/components/ExportImportDialog.css

@@ -20,6 +20,6 @@
 }
 
 .bytm-exim-dialog-pane textarea {
-  height: 200px;
+  height: 120px;
   resize: none;
 }

src/components/ExportImportDialog.ts

@@ -10,9 +10,9 @@ type ExImDialogOpts =
   Omit<BytmDialogOptions, "renderHeader" | "renderBody" | "renderFooter">
   & {
     /** The data to export (or a function that returns the data as string, sync or async) */
-    exportData: string | (() => string | Promise<string>);
+    exportData: string | (() => (string | Promise<string>));
     /** Optional variant of the data, used for special cases like when shift-clicking the copy button */
-    exportDataSpecial?: string | (() => string | Promise<string>);
+    exportDataSpecial?: string | (() => (string | Promise<string>));
     /** Function that gets called when the user imports data */
     onImport: (data: string) => void;
     /** Translation key for the dialog title */
@@ -90,9 +90,9 @@ export class ExImDialog extends BytmDialog {
       exportCenterBtnCont.classList.add("bytm-exim-dialog-center-btn-cont");
 
       const copyBtn = createRipple(await createLongBtn({
-        title: t("copy_hidden_value"),
+        title: t("copy_to_clipboard"),
         text: t("copy"),
-        resourceName: "icon-experimental",
+        resourceName: "icon-copy",
         async onClick({ shiftKey }) {
           const copyData = shiftKey && opts.exportDataSpecial ? opts.exportDataSpecial : opts.exportData;
           copyToClipboard(typeof copyData === "function" ? await copyData() : copyData);
@@ -126,7 +126,7 @@ export class ExImDialog extends BytmDialog {
       const importBtn = createRipple(await createLongBtn({
         title: t("start_import_tooltip"),
         text: t("import"),
-        resourceName: "icon-experimental",
+        resourceName: "icon-upload",
         onClick: () => opts.onImport(dataEl.value),
       }));
 

src/dialogs/index.ts

@@ -2,9 +2,7 @@ import "./dialogs.css";
 
 export * from "./autoLike.js";
 export * from "./changelog.js";
-export * from "./exportCfg.js";
 export * from "./featConfig.js";
 export * from "./featHelp.js";
-export * from "./importCfg.js";
 export * from "./versionNotif.js";
 export * from "./welcome.js";

src/features/layout.css

@@ -68,6 +68,8 @@
   vertical-align: middle;
   cursor: pointer;
   margin-left: 0px;
+
+  border: 1px solid #999;
 }
 
 .bytm-generic-btn.long .bytm-generic-btn-img.left {

src/menu/menu_old.ts

@@ -4,7 +4,7 @@ import { buildNumber, compressionFormat, host, mode, scriptInfo } from "../const
 import { featInfo, disableBeforeUnload } from "../features/index.js";
 import { error, getResourceUrl, info, log, resourceToHTMLString, getLocale, hasKey, initTranslations, setLocale, t, arrayWithSeparators, tp, type TrKey, onInteraction, getDomain, copyToClipboard, warn, compressionSupported, tryToDecompressAndParse } from "../utils/index.js";
 import { emitSiteEvent, siteEvents } from "../siteEvents.js";
-import { getChangelogDialog, getExportDialog, getFeatHelpDialog, getImportDialog } from "../dialogs/index.js";
+import { getChangelogDialog, getFeatHelpDialog } from "../dialogs/index.js";
 import type { FeatureCategory, FeatureKey, FeatureConfig, HotkeyObj, FeatureInfo } from "../types.js";
 import "./menu_old.css";
 import { BytmDialog, ExImDialog, createHotkeyInput, createToggleInput, openDialogs, setCurrentDialogId } from "../components/index.js";
@@ -247,36 +247,10 @@ async function mountCfgMenu() {
   exportImportBtn.textContent = exportImportBtn.ariaLabel = exportImportBtn.title = t("export_import");
   onInteraction(exportImportBtn, async () => await exImDlg.open());
 
-  const exportElem = document.createElement("button");
-  exportElem.classList.add("bytm-btn");
-  exportElem.ariaLabel = exportElem.title = t("export_tooltip");
-  exportElem.textContent = t("export");
-  onInteraction(exportElem, async () => {
-    const dlg = await getExportDialog();
-    dlg.on("close", openCfgMenu);
-    await dlg.mount();
-    closeCfgMenu(undefined, false);
-    await dlg.open();
-  });
-
-  const importElem = document.createElement("button");
-  importElem.classList.add("bytm-btn");
-  importElem.ariaLabel = importElem.title = t("import_tooltip");
-  importElem.textContent = t("import");
-  onInteraction(importElem, async () => {
-    const dlg = await getImportDialog();
-    dlg.on("close", openCfgMenu);
-    await dlg.mount();
-    closeCfgMenu(undefined, false);
-    await dlg.open();
-  });
-
   const buttonsCont = document.createElement("div");
   buttonsCont.classList.add("bytm-menu-footer-buttons-cont");
 
   buttonsCont.appendChild(exportImportBtn);
-  buttonsCont.appendChild(exportElem);
-  buttonsCont.appendChild(importElem);
 
   footerCont.appendChild(reloadFooterCont);
   footerCont.appendChild(buttonsCont);
@@ -514,7 +488,7 @@ async function mountCfgMenu() {
           const advCopyHiddenBtn = document.createElement("button");
           advCopyHiddenBtn.classList.add("bytm-ftconf-adv-copy-btn", "bytm-btn");
           advCopyHiddenBtn.tabIndex = 0;
-          advCopyHiddenBtn.textContent = t("copy_hidden_value");
+          advCopyHiddenBtn.textContent = t("copy_hidden");
           advCopyHiddenBtn.ariaLabel = advCopyHiddenBtn.title = t("copy_hidden_tooltip");
 
           const copyHiddenInteraction = (e: MouseEvent | KeyboardEvent) => {