new userscript

lib/countries.js

@@ -1,49 +1,49 @@
 export const COUNTRIES = [
-  { countryCode: "ww", currencyCode: "usd" },
+  { countryCode: "ww", countryName: "Worldwide", currencyCode: "usd" },
-  { countryCode: "ca", currencyCode: "cad" },
+  { countryCode: "ca", countryName: "Canada", currencyCode: "cad" },
-  { countryCode: "us", currencyCode: "usd" },
+  { countryCode: "us", countryName: "United States", currencyCode: "usd" },
-  { countryCode: "in", currencyCode: "inr" },
+  { countryCode: "in", countryName: "India", currencyCode: "inr" },
-  { countryCode: "za", currencyCode: "zar" },
+  { countryCode: "za", countryName: "South Africa", currencyCode: "zar" },
-  { countryCode: "au", currencyCode: "aud" },
+  { countryCode: "au", countryName: "Australia", currencyCode: "aud" },
-  { countryCode: "hk", currencyCode: "hkd" },
+  { countryCode: "hk", countryName: "Hong Kong", currencyCode: "hkd" },
-  { countryCode: "jp", currencyCode: "jpy" },
+  { countryCode: "jp", countryName: "Japan", currencyCode: "jpy" },
-  { countryCode: "my", currencyCode: "myr" },
+  { countryCode: "my", countryName: "Malaysia", currencyCode: "myr" },
-  { countryCode: "nz", currencyCode: "nzd" },
+  { countryCode: "nz", countryName: "New Zealand", currencyCode: "nzd" },
-  { countryCode: "ph", currencyCode: "php" },
+  { countryCode: "ph", countryName: "Philippines", currencyCode: "php" },
-  { countryCode: "sg", currencyCode: "sgd" },
+  { countryCode: "sg", countryName: "Singapore", currencyCode: "sgd" },
-  { countryCode: "tw", currencyCode: "twd" },
+  { countryCode: "tw", countryName: "Taiwan", currencyCode: "twd" },
-  { countryCode: "th", currencyCode: "usd" },
+  { countryCode: "th", countryName: "Thailand", currencyCode: "usd" },
-  { countryCode: "at", currencyCode: "eur" },
+  { countryCode: "at", countryName: "Austria", currencyCode: "eur" },
-  { countryCode: "be", currencyCode: "eur" },
+  { countryCode: "be", countryName: "Belgium", currencyCode: "eur" },
-  { countryCode: "cy", currencyCode: "eur" },
+  { countryCode: "cy", countryName: "Cyprus", currencyCode: "eur" },
-  { countryCode: "cz", currencyCode: "czk" },
+  { countryCode: "cz", countryName: "Czech Republic", currencyCode: "czk" },
-  { countryCode: "dk", currencyCode: "dkk" },
+  { countryCode: "dk", countryName: "Denmark", currencyCode: "dkk" },
-  { countryCode: "ee", currencyCode: "eur" },
+  { countryCode: "ee", countryName: "Estonia", currencyCode: "eur" },
-  { countryCode: "fi", currencyCode: "eur" },
+  { countryCode: "fi", countryName: "Finland", currencyCode: "eur" },
-  { countryCode: "fr", currencyCode: "eur" },
+  { countryCode: "fr", countryName: "France", currencyCode: "eur" },
-  { countryCode: "de", currencyCode: "eur" },
+  { countryCode: "de", countryName: "Germany", currencyCode: "eur" },
-  { countryCode: "gr", currencyCode: "eur" },
+  { countryCode: "gr", countryName: "Greece", currencyCode: "eur" },
-  { countryCode: "ie", currencyCode: "eur" },
+  { countryCode: "ie", countryName: "Ireland", currencyCode: "eur" },
-  { countryCode: "it", currencyCode: "eur" },
+  { countryCode: "it", countryName: "Italy", currencyCode: "eur" },
-  { countryCode: "lt", currencyCode: "eur" },
+  { countryCode: "lt", countryName: "Lithuania", currencyCode: "eur" },
-  { countryCode: "lu", currencyCode: "eur" },
+  { countryCode: "lu", countryName: "Luxembourg", currencyCode: "eur" },
-  { countryCode: "mt", currencyCode: "eur" },
+  { countryCode: "mt", countryName: "Malta", currencyCode: "eur" },
-  { countryCode: "nl", currencyCode: "eur" },
+  { countryCode: "nl", countryName: "Netherlands", currencyCode: "eur" },
-  { countryCode: "no", currencyCode: "nok" },
+  { countryCode: "no", countryName: "Norway", currencyCode: "nok" },
-  { countryCode: "pl", currencyCode: "pln" },
+  { countryCode: "pl", countryName: "Poland", currencyCode: "pln" },
-  { countryCode: "pt", currencyCode: "eur" },
+  { countryCode: "pt", countryName: "Portugal", currencyCode: "eur" },
-  { countryCode: "ro", currencyCode: "ron" },
+  { countryCode: "ro", countryName: "Romania", currencyCode: "ron" },
-  { countryCode: "sk", currencyCode: "eur" },
+  { countryCode: "sk", countryName: "Slovakia", currencyCode: "eur" },
-  { countryCode: "si", currencyCode: "eur" },
+  { countryCode: "si", countryName: "Slovenia", currencyCode: "eur" },
-  { countryCode: "es", currencyCode: "eur" },
+  { countryCode: "es", countryName: "Spain", currencyCode: "eur" },
-  { countryCode: "se", currencyCode: "sek" },
+  { countryCode: "se", countryName: "Sweden", currencyCode: "sek" },
-  { countryCode: "ch", currencyCode: "chf" },
+  { countryCode: "ch", countryName: "Switzerland", currencyCode: "chf" },
-  { countryCode: "tr", currencyCode: "try" },
+  { countryCode: "tr", countryName: "Turkey", currencyCode: "try" },
-  { countryCode: "gb", currencyCode: "gbp" },
+  { countryCode: "gb", countryName: "United Kingdom", currencyCode: "gbp" },
-  { countryCode: "ar", currencyCode: "usd" },
+  { countryCode: "ar", countryName: "Argentina", currencyCode: "usd" },
-  { countryCode: "br", currencyCode: "brl" },
+  { countryCode: "br", countryName: "Brazil", currencyCode: "brl" },
-  { countryCode: "cl", currencyCode: "clp" },
+  { countryCode: "cl", countryName: "Chile", currencyCode: "clp" },
-  { countryCode: "co", currencyCode: "cop" },
+  { countryCode: "co", countryName: "Colombia", currencyCode: "cop" },
-  { countryCode: "mx", currencyCode: "mxn" },
+  { countryCode: "mx", countryName: "Mexico", currencyCode: "mxn" },
-  { countryCode: "pe", currencyCode: "pen" },
+  { countryCode: "pe", countryName: "Peru", currencyCode: "pen" },
 ];

lib/extractPrice.js

@@ -1,13 +1,37 @@
 const timeout = (duration) => new Promise((r) => setTimeout(r, duration));
 
+// Selectors for both old and new Kobo layouts
+const PRICE_SELECTORS = [
+	// Old layout (pre-2025 redesign)
+	".primary-right-container .pricing-details .active-price span",
+	// New layout (Tailwind, data-testid based)
+	'[data-testid="price"] .text-title-m-bold',
+];
+
+const findPrice = (page) => {
+	for (const sel of PRICE_SELECTORS) {
+		const el = page?.querySelector(sel);
+		if (el?.textContent?.trim()) {
+			return el.textContent.trim();
+		}
+	}
+	return null;
+};
+
 const observePriceOnPage = (page) =>
 	new Promise((res, rej) => {
 		timeout(5000).then(() => rej("price not found"));
 
-		var observer = new MutationObserver(() => {
+		// Check immediately first
-			const price = page?.querySelector(
+		const immediate = findPrice(page);
-				".primary-right-container .pricing-details .active-price span",
+		if (immediate) {
-			)?.textContent;
+			l("found price (immediate)", immediate);
+			res(immediate);
+			return;
+		}
+
+		const observer = new MutationObserver(() => {
+			const price = findPrice(page);
 
 			if (price) {
 				l("found price", price);

lib/index.js

@@ -12,27 +12,11 @@ TODO:
 - readme how to use and debug
 */
 
-const createPricesContainer = () => {
+const isInLibrary = () =>
-	const pricingActionContainers = document.querySelectorAll(".pricing-details");
+  // Old layout
-
+  document.querySelectorAll(".read-now").length > 0 ||
-	l("all pricing containers", pricingActionContainers);
+  // New layout
-
+  document.querySelectorAll('[data-testid="buypad-readnow"]').length > 0;
-	let visible;
-	for (const node of pricingActionContainers) {
-		if (node.checkVisibility()) {
-			l("found visible pricing container", node);
-			visible = node;
-			break;
-		}
-	}
-
-	return visible.parentNode.insertBefore(
-		document.createElement("div"),
-		visible,
-	);
-};
-
-const isInLibrary = () => document.querySelectorAll(".read-now").length;
 
 const formatPrice = (countryPrice, convertedPrice, isSelected) => {
   if (!isSelected) return "SKIP";
@@ -49,7 +33,7 @@ const formatPrice = (countryPrice, convertedPrice, isSelected) => {
 };
 
 const Price = ({ price, toggleCountry, isSelected }) => {
-	const { convertedPrice, countryCode, countryPrice } = price;
+  const { convertedPrice, countryCode, countryName, countryPrice } = price;
   const [isHovered, setHover] = useState(false);
 
   const hover = useCallback(() => setHover(true));
@@ -61,35 +45,36 @@ const Price = ({ price, toggleCountry, isSelected }) => {
     justifyContent: "space-between",
     alignItems: "center",
     backgroundColor: isHovered ? "#d7d7d7" : "",
-		padding: "0 10px",
+    padding: "4px 10px",
   };
 
-	const link = h(
-		"a",
-		{
-			style: { textDecoration: "underline" },
-			href: bookUrl(countryCode),
-			target: "_blank",
-		},
-		countryCode.toUpperCase(),
-	);
-
   const checkbox = h("input", {
     type: "checkbox",
     checked: isSelected,
     onChange: () => toggleCountry(),
   });
 
+  const link = h(
+    "a",
+    {
+      style: { textDecoration: "underline", marginLeft: "8px" },
+      href: bookUrl(countryCode),
+      target: "_blank",
+    },
+    countryName || countryCode.toUpperCase(),
+  );
+
   const priceLabel = h(
     "p",
-		{ style: { fontWeight: "bold" } },
+    { style: { fontWeight: "bold", marginLeft: "auto" } },
     formatPrice(countryPrice, convertedPrice, isSelected),
   );
 
   return h(
     "label",
     { style, onMouseEnter: hover, onMouseLeave: leave },
-		h("div", { style: { display: "flex" } }, checkbox, link),
+    checkbox,
+    link,
     priceLabel,
   );
 };
@@ -99,9 +84,7 @@ const InLibrary = () =>
     "div",
     {
       style: {
-				display: "flex",
+        padding: "10px",
-				flexDirection: "column",
-				border: "1px solid black",
         textAlign: "center",
       },
     },
@@ -155,7 +138,7 @@ const Header = (state, percentChecked) => {
   return h(
     "h2",
     { style: { textAlign: "center" } },
-		'Select countries or leave as is and press "load"',
+    'Select countries or leave as is and press "Load prices"',
   );
 };
 
@@ -175,22 +158,79 @@ const Load = (state, load) => {
 const App = () => {
   const { isSelected, toggleCountry, selected } = useSelectedCountries();
   const { prices, percentChecked, state, load } = usePrices(selected);
+  const [expanded, setExpanded] = useState(false);
 
   l(selected);
-	const style = {
+
-		display: "flex",
+  const toggle = useCallback(() => setExpanded((v) => !v));
-		flexDirection: "column",
-		border: "1px solid black",
-	};
 
   if (isInLibrary()) {
-		return InLibrary();
+    return h(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: "10px",
+          left: "10px",
+          zIndex: 99999,
+          background: "white",
+          border: "1px solid black",
+          fontFamily: "sans-serif",
+          fontSize: "14px",
+        },
+      },
+      InLibrary(),
+    );
   }
 
+  const panelStyle = {
+    position: "fixed",
+    bottom: "0",
+    left: "0",
+    zIndex: 99999,
+    background: "white",
+    border: "1px solid black",
+    fontFamily: "sans-serif",
+    fontSize: "14px",
+    maxHeight: expanded ? "100vh" : "auto",
+    overflowY: expanded ? "auto" : "hidden",
+    minWidth: "100%",
+  };
+
+  const buttonStyle = {
+    height: "2.25rem",
+    background: "white",
+    border: "1px solid black",
+    // padding: "6px 12px",
+    cursor: "pointer",
+    fontSize: "14px",
+    fontWeight: "bold",
+    width: "100%",
+  };
+
+  if (!expanded) {
+    return h(
+      "div",
+      { style: panelStyle },
+      h("button", { style: buttonStyle, onClick: toggle }, "PRICES"),
+    );
+  }
+
+  const listStyle = {
+    display: "flex",
+    flexDirection: "column",
+  };
+
   return h(
     "div",
-		{ style },
+    { style: panelStyle },
+    h("button", { style: buttonStyle, onClick: toggle }, "CLOSE"),
+    h(
+      "div",
+      { style: listStyle },
+      ...[
         Header(state, percentChecked),
+        Load(state, load),
         ...prices.map((price) =>
           h(Price, {
             price,
@@ -199,10 +239,14 @@ const App = () => {
             isLoading: state,
           }),
         ),
-		Load(state, load),
+      ],
+    ),
   );
 };
 
 l("starting...");
 initCache();
-render(createElement(App), createPricesContainer());
+
+const container = document.createElement("div");
+document.body.appendChild(container);
+render(createElement(App), container);