@iasiv5/dsh-quota-watch 0.0.15 → 0.0.16

package/lib/client.js

@@ -166,7 +166,7 @@ var STYLE_TEXT = `
 .dqw-stale-mark { flex: none; font-size: 9px; line-height: 14px; color: var(--dsw-alias-label-warning, #b46900); cursor: help; }
 .dqw-errtext { font-size: 10px; line-height: 14px; opacity: .7; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dqw-rail-trigger { display: none; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dsw-alias-label-primary, inherit); cursor: pointer; transition: background-color .12s, color .12s; }
-.dqw-rail-trigger svg { display: block; width: 20px; height: 20px; }
+.dqw-rail-trigger svg { display: block; width: 22px; height: 22px; }
 .dqw-rail-trigger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
 .dqw-rail-trigger:active:not(:disabled), .dqw-rail-trigger[aria-expanded="true"] { background: var(--dsw-alias-interactive-bg-active, rgba(128,128,128,.18)); color: var(--dsw-alias-label-primary, inherit); }
 .dqw-rail-trigger:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary, #5b8def); outline-offset: 2px; }
@@ -177,6 +177,7 @@ var STYLE_TEXT = `
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dqw-pop { background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, #1f1f1f)); } }
 .dqw-pop[hidden] { display: none; }
 .dqw-pop *, .dqw-pop *::before, .dqw-pop *::after { box-sizing: border-box; }
+.dqw-pop-header { display: flex; align-items: center; gap: 6px; min-width: 0; }
 .dqw-pop-title { margin: 0; font-size: 11px; font-weight: 600; line-height: 16px; }
 .dqw-pop-back { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--dsw-alias-label-secondary, inherit); cursor: pointer; }
 .dqw-pop-back svg { display: block; width: 16px; height: 16px; }
@@ -251,8 +252,8 @@ function quotaIcon(doc) {
   const namespace = "http://www.w3.org/2000/svg";
   const svg = doc.createElementNS(namespace, "svg");
   svg.setAttribute("viewBox", "0 0 24 24");
-  svg.setAttribute("width", "20");
-  svg.setAttribute("height", "20");
+  svg.setAttribute("width", "22");
+  svg.setAttribute("height", "22");
   svg.setAttribute("fill", "none");
   svg.setAttribute("stroke", "currentColor");
   svg.setAttribute("stroke-width", "1.7");
@@ -260,17 +261,21 @@ function quotaIcon(doc) {
   svg.setAttribute("stroke-linejoin", "round");
   svg.setAttribute("aria-hidden", "true");
   svg.setAttribute("focusable", "false");
-  const arc = doc.createElementNS(namespace, "path");
-  arc.setAttribute("d", "M4 17a8 8 0 0 1 16 0H4");
+  const dial = doc.createElementNS(namespace, "circle");
+  dial.setAttribute("cx", "12");
+  dial.setAttribute("cy", "12");
+  dial.setAttribute("r", "9");
+  const ticks = doc.createElementNS(namespace, "path");
+  ticks.setAttribute("d", "M12 2.7v2.1M12 19.2v2.1M2.7 12h2.1M19.2 12h2.1M5.43 5.43l1.49 1.49M17.08 17.08l1.49 1.49M18.57 5.43l-1.49 1.49M6.92 17.08l-1.49 1.49");
   const needle = doc.createElementNS(namespace, "path");
-  needle.setAttribute("d", "m12 17 3.2-5.2");
+  needle.setAttribute("d", "M12 12l4.5-4");
   const hub = doc.createElementNS(namespace, "circle");
   hub.setAttribute("cx", "12");
-  hub.setAttribute("cy", "17");
-  hub.setAttribute("r", "1");
+  hub.setAttribute("cy", "12");
+  hub.setAttribute("r", "1.2");
   hub.setAttribute("fill", "currentColor");
   hub.setAttribute("stroke", "none");
-  svg.append(arc, needle, hub);
+  svg.append(dial, ticks, needle, hub);
   return svg;
 }
 function backIcon(doc) {
@@ -497,6 +502,8 @@ function mountQuotaCard({
   function renderDetail(detail, key, provider, fromRail = false) {
     detail.replaceChildren();
     if (fromRail) {
+      const header = doc.createElement("div");
+      header.className = "dqw-pop-header";
       const back = doc.createElement("button");
       back.type = "button";
       back.className = "dqw-pop-back";
@@ -504,7 +511,8 @@ function mountQuotaCard({
       back.setAttribute("aria-label", copy.backToOverview);
       back.title = copy.backToOverview;
       back.append(backIcon(doc));
-      detail.append(back, text(doc, "p", "dqw-pop-title", copy.providerNames[key]));
+      header.append(back, text(doc, "p", "dqw-pop-title", copy.providerNames[key]));
+      detail.append(header);
     }
     if (provider?.status === "stale") {
       detail.append(text(doc, "p", "dqw-error", `${copy.stale}${provider.error ? `: ${provider.error}` : ""}`));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iasiv5/dsh-quota-watch",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "DSH Web sidebar monitor for GLM Coding Plan quotas and GitHub Copilot credits",
   "type": "module",
   "main": "./src/host.mjs",

package/src/client.mjs

@@ -88,7 +88,7 @@ const STYLE_TEXT = `
 .dqw-stale-mark { flex: none; font-size: 9px; line-height: 14px; color: var(--dsw-alias-label-warning, #b46900); cursor: help; }
 .dqw-errtext { font-size: 10px; line-height: 14px; opacity: .7; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dqw-rail-trigger { display: none; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dsw-alias-label-primary, inherit); cursor: pointer; transition: background-color .12s, color .12s; }
-.dqw-rail-trigger svg { display: block; width: 20px; height: 20px; }
+.dqw-rail-trigger svg { display: block; width: 22px; height: 22px; }
 .dqw-rail-trigger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
 .dqw-rail-trigger:active:not(:disabled), .dqw-rail-trigger[aria-expanded="true"] { background: var(--dsw-alias-interactive-bg-active, rgba(128,128,128,.18)); color: var(--dsw-alias-label-primary, inherit); }
 .dqw-rail-trigger:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary, #5b8def); outline-offset: 2px; }
@@ -99,6 +99,7 @@ const STYLE_TEXT = `
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dqw-pop { background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, #1f1f1f)); } }
 .dqw-pop[hidden] { display: none; }
 .dqw-pop *, .dqw-pop *::before, .dqw-pop *::after { box-sizing: border-box; }
+.dqw-pop-header { display: flex; align-items: center; gap: 6px; min-width: 0; }
 .dqw-pop-title { margin: 0; font-size: 11px; font-weight: 600; line-height: 16px; }
 .dqw-pop-back { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--dsw-alias-label-secondary, inherit); cursor: pointer; }
 .dqw-pop-back svg { display: block; width: 16px; height: 16px; }
@@ -180,8 +181,8 @@ function quotaIcon(doc) {
   const namespace = 'http://www.w3.org/2000/svg'
   const svg = doc.createElementNS(namespace, 'svg')
   svg.setAttribute('viewBox', '0 0 24 24')
-  svg.setAttribute('width', '20')
-  svg.setAttribute('height', '20')
+  svg.setAttribute('width', '22')
+  svg.setAttribute('height', '22')
   svg.setAttribute('fill', 'none')
   svg.setAttribute('stroke', 'currentColor')
   svg.setAttribute('stroke-width', '1.7')
@@ -189,17 +190,21 @@ function quotaIcon(doc) {
   svg.setAttribute('stroke-linejoin', 'round')
   svg.setAttribute('aria-hidden', 'true')
   svg.setAttribute('focusable', 'false')
-  const arc = doc.createElementNS(namespace, 'path')
-  arc.setAttribute('d', 'M4 17a8 8 0 0 1 16 0H4')
+  const dial = doc.createElementNS(namespace, 'circle')
+  dial.setAttribute('cx', '12')
+  dial.setAttribute('cy', '12')
+  dial.setAttribute('r', '9')
+  const ticks = doc.createElementNS(namespace, 'path')
+  ticks.setAttribute('d', 'M12 2.7v2.1M12 19.2v2.1M2.7 12h2.1M19.2 12h2.1M5.43 5.43l1.49 1.49M17.08 17.08l1.49 1.49M18.57 5.43l-1.49 1.49M6.92 17.08l-1.49 1.49')
   const needle = doc.createElementNS(namespace, 'path')
-  needle.setAttribute('d', 'm12 17 3.2-5.2')
+  needle.setAttribute('d', 'M12 12l4.5-4')
   const hub = doc.createElementNS(namespace, 'circle')
   hub.setAttribute('cx', '12')
-  hub.setAttribute('cy', '17')
-  hub.setAttribute('r', '1')
+  hub.setAttribute('cy', '12')
+  hub.setAttribute('r', '1.2')
   hub.setAttribute('fill', 'currentColor')
   hub.setAttribute('stroke', 'none')
-  svg.append(arc, needle, hub)
+  svg.append(dial, ticks, needle, hub)
   return svg
 }
 
@@ -447,6 +452,8 @@ export function mountQuotaCard({
   function renderDetail(detail, key, provider, fromRail = false) {
     detail.replaceChildren()
     if (fromRail) {
+      const header = doc.createElement('div')
+      header.className = 'dqw-pop-header'
       const back = doc.createElement('button')
       back.type = 'button'
       back.className = 'dqw-pop-back'
@@ -454,7 +461,8 @@ export function mountQuotaCard({
       back.setAttribute('aria-label', copy.backToOverview)
       back.title = copy.backToOverview
       back.append(backIcon(doc))
-      detail.append(back, text(doc, 'p', 'dqw-pop-title', copy.providerNames[key]))
+      header.append(back, text(doc, 'p', 'dqw-pop-title', copy.providerNames[key]))
+      detail.append(header)
     }
     if (provider?.status === 'stale') {
       detail.append(text(doc, 'p', 'dqw-error', `${copy.stale}${provider.error ? `: ${provider.error}` : ''}`))