@takagaki/cortex-decisions-viewer 0.12.27 → 0.12.28

package/dist/render.js

@@ -2167,6 +2167,10 @@ a:hover { text-decoration: underline; }
 }
 .site-title { font-size: 18px; font-weight: 700; color: var(--text); }
 .site-title:hover { text-decoration: none; color: var(--accent); }
+/* ポータル配下で開いているとき（#379）、案件名はポータルの案件一覧（同一オリジンの /）へ
+   戻るリンクになる。**文言は増やさない**（案件名そのものがリンク）ので、押せることは
+   ホバーの下線で示す。丸（アイコン操作）とは別の口 */
+.site-title.site-title-portal:hover { text-decoration: underline; text-underline-offset: 3px; }
 /* ---- 案件アイコン（#348）----
    **ヘッダーの案件名の左に丸を置く。** ヘッダーは全タブ共通なので、
    どのタブを開いていても同じ場所に居る。0.12.24 で Home 本文に置いた
@@ -2219,6 +2223,12 @@ button.site-icon[aria-expanded="true"] .site-icon-hover { opacity: 1; }
    ——押せない丸に指差しカーソルやリングを出すのが、画面の嘘のうちで一番たちが悪い */
 button.site-icon { cursor: pointer; }
 button.site-icon:hover, button.site-icon[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--accent); }
+/* **保存中（#378）は丸の上に .busy-overlay（共通部品）が載る。** その間はホバーの「変更」「＋」
+   もリングも出さない（スピナーと重なって読めない・押せるように見せない）。
+   ホバー規則と同じ強さなので、**この行はホバー規則より後に置く** */
+button.site-icon[aria-busy="true"] { cursor: wait; box-shadow: none; }
+button.site-icon[aria-busy="true"] .site-icon-hover,
+button.site-icon[aria-busy="true"] .site-icon-plus { opacity: 0; }
 .site-icon-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
 /* 丸を押したときだけ出るメニュー。スロットを基準に浮かせる（ヘッダーは sticky なので
    ページを送っても位置がずれない） */
@@ -3267,6 +3277,28 @@ button.ops-card-btn:disabled { opacity: .6; cursor: default; }
 .toast-show { opacity: 1; }
 .toast-error { background: #b91c1c; }
 
+/* 反映待ちのオーバーレイ＋スピナー（#378・共通部品。JS の beginOverlaySpinner が載せる）。
+   押した瞬間から結果が返るまで、**押した場所そのものの上に**半透明の白（60%）と
+   ぐるぐるを重ねる——押した反応が無いように見えて押し直す（二重送信）のを止める。
+   載せ先の大きさは変えない（absolute で内側に重ね、角丸は載せ先から継ぐ）。
+   いまは案件アイコンの丸にだけ使う。操作タブの保存にも同じ部品を使える */
+.busy-overlay {
+  position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(255, 255, 255, .6); cursor: wait; z-index: 2;
+}
+.busy-spinner {
+  width: 18px; height: 18px; border-radius: 50%;
+  border: 2px solid var(--accent-weak); border-top-color: var(--accent);
+  animation: busy-spin .8s linear infinite;
+}
+@keyframes busy-spin { to { transform: rotate(360deg); } }
+/* 読み上げ用の語（「保存中…」）。目には見せない（文言を増やさない） */
+.busy-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+/* 動きを減らす設定でも止めはしない——止めると「保存中」と「固まった」の区別が付かない。
+   回転を半分の速さに落とすだけ */
+@media (prefers-reduced-motion: reduce) { .busy-spinner { animation-duration: 1.6s; } }
+
 .site-footer { max-width: 960px; margin: 0 auto; padding: 0 20px 40px; color: var(--muted); font-size: 12px; }
 
 @media (max-width: 600px) {
@@ -4404,6 +4436,27 @@ ${deriveCapTile.toString()}
   // document に付ける開閉のリスナーは1組だけ。描き直しのたびに足すと Escape 1回で
   // 同じ処理が何度も走る（見た目は同じなので気づけない）
   var siteIconGlobalBound = false;
+  // 保存中か（画像を選ぶ／変える／外す の3段が走っている間）。**DOM ではなくこの変数が正本**
+  // （#378）。描き直しで丸が作り直されても、renderSiteIcon がこれを見てオーバーレイを付け直す。
+  // setProjectIcon / removeProjectIcon の入口で見て、走っている間の2回目を捨てる（二重送信防止）
+  var siteIconSaving = false;
+  // いま丸に載っているオーバーレイの外し方（無ければ null）
+  var siteIconBusyEnd = null;
+
+  /**
+   * 丸の保存中の見た目を付ける／外す。丸は disabled にして押せなくする
+   * （メニューの開閉もここで止まる。丸のクリックは siteIconSaving でも見る）
+   */
+  function setSiteIconBusy(circle, on) {
+    if (siteIconBusyEnd) { siteIconBusyEnd(); siteIconBusyEnd = null; }
+    if (!circle) return;
+    if (on) {
+      siteIconBusyEnd = beginOverlaySpinner(circle, "保存中…");
+      circle.disabled = true;
+    } else {
+      circle.disabled = false;
+    }
+  }
 
   /**
    * 案件名の頭文字1字。**ポータルの ProjectIcon.tsx（initialOf）と同じ取り方**にする
@@ -4486,8 +4539,16 @@ ${deriveCapTile.toString()}
     }
     slot.appendChild(circle);
     if (!intake) return;
-
-    circle.addEventListener("click", function () { setSiteIconMenu(!siteIconMenuOpen); });
+    // 保存中に描き直されても、オーバーレイと押せない状態を引き継ぐ（正本は siteIconSaving）。
+    // いまの呼び出し経路（起動時1回・ui.busy(false) の後の redraw）では保存中に来ないので
+    // 防御。将来タブ切り替え等でヘッダーを描き直すようになっても、ぐるぐるが消えない
+    if (siteIconSaving) setSiteIconBusy(circle, true);
+
+    circle.addEventListener("click", function () {
+      // 保存中は丸が disabled なので click 自体が飛ばない（ブラウザの既定）。これは防御
+      if (siteIconSaving) return;
+      setSiteIconMenu(!siteIconMenuOpen);
+    });
 
     var menu = el("div", { class: "site-icon-menu", role: "menu" });
     if (!siteIconMenuOpen) menu.setAttribute("hidden", "");
@@ -4497,6 +4558,11 @@ ${deriveCapTile.toString()}
       // 丸へ戻す（キーボードの人が位置を失わない。Escape は document 側なので効く）
       redraw: function () {
         renderSiteIcon();
+        ui.refocus();
+      },
+      // 丸へフォーカスを戻す。失敗のあとも呼ぶ——押していた項目は disabled にした瞬間に
+      // フォーカスを失って body に落ちるので、戻さないとキーボードの人がやり直す位置を失う
+      refocus: function () {
         var s = document.getElementById("site-icon-slot");
         var c = s && s.querySelector("button.site-icon");
         if (c && typeof c.focus === "function") c.focus();
@@ -4504,10 +4570,14 @@ ${deriveCapTile.toString()}
       input: null,
       buttons: [],
     };
-    // 送信中は全部を止める。**元から押せない項目は押せないまま戻す**——
+    // 送信中は全部を止める（#378: 丸にオーバーレイ＋スピナー・丸とメニューを押せなくする）。
+    // **元から押せない項目は押せないまま戻す**——
     // 未設定の「画像を外す」が、失敗して戻ったときだけ押せるようになるのを防ぐ
-    ui.disable = function (flag) {
+    ui.busy = function (flag) {
+      siteIconSaving = !!flag;
       ui.buttons.forEach(function (b) { b.disabled = flag ? true : !!b.lockedOff; });
+      var s = document.getElementById("site-icon-slot");
+      setSiteIconBusy(s && s.querySelector("button.site-icon"), siteIconSaving);
     };
 
     var input = el("input", { type: "file", accept: "image/png,image/jpeg,image/webp", hidden: "" });
@@ -4559,7 +4629,9 @@ ${deriveCapTile.toString()}
    * ものを送ると、1MB を上げきってから「大きすぎます」と言うことになる
    */
   async function setProjectIcon(file, ui) {
-    function fail(msg) { showToast("✗ " + msg, true); ui.disable(false); }
+    // 走っている間の2回目は捨てる（丸もメニューも止めてあるが、正本はこの変数）
+    if (siteIconSaving) return;
+    function fail(msg) { showToast("✗ " + msg, true); ui.busy(false); ui.refocus(); }
     // 画面側の門。**サーバ側と同じ文言**で、送る前に断る（fail で「✗ 」を揃える）
     if (!projectIconExtOfName(file.name)) return fail("PNG・JPEG・WebP の画像を選んでください");
     if (file.size > PROJECT_ICON_MAX_BYTES) return fail("1MB までの画像を選んでください");
@@ -4567,7 +4639,8 @@ ${deriveCapTile.toString()}
 
     var intake = SITE.intake;
     var ctype = file.type || "application/octet-stream";
-    ui.disable(true);
+    // 押した瞬間からぐるぐる（#378）。成功なら redraw で新しい丸に、失敗なら fail で元の丸に戻る
+    ui.busy(true);
 
     var pres;
     try {
@@ -4602,6 +4675,7 @@ ${deriveCapTile.toString()}
     // **同じファイルをもう一度選べるようにする。** value を戻さないと、選び直しても
     // change が飛ばない（形式で断られた直後に選び直す経路がここで死ぬ）
     if (ui.input) ui.input.value = "";
+    ui.busy(false);
     // 丸がその場で変わるので、メニューは畳んでよい（結果はトーストが伝える）
     setSiteIconMenu(false);
     ui.redraw();
@@ -4610,14 +4684,17 @@ ${deriveCapTile.toString()}
 
   /** 画像を外す。**確認は出さない**——押し間違えても、もう一度選び直せば戻る操作 */
   async function removeProjectIcon(ui) {
-    function fail(msg) { showToast("✗ " + msg, true); ui.disable(false); }
-    ui.disable(true);
+    // 保存中はメニューの項目が disabled なので普通は来ない（setProjectIcon と同じ防御）
+    if (siteIconSaving) return;
+    function fail(msg) { showToast("✗ " + msg, true); ui.busy(false); ui.refocus(); }
+    ui.busy(true);
     var res;
     try {
       res = await intakeJson(callIntake("project-icon-remove", { projectKey: SITE.intake.projectKey }));
     } catch (net) { return fail("サーバーに接続できませんでした。通信環境を確認して、もう一度お試しください。"); }
     if (!res.ok) return fail((res.j && res.j.message) || "外せませんでした");
     rememberIconPending("remove", "");
+    ui.busy(false);
     setSiteIconMenu(false);
     ui.redraw();
     showToast("外しました", false);
@@ -9380,6 +9457,48 @@ ${deriveCapTile.toString()}
     };
   }
 
+  /**
+   * 反映待ちのオーバーレイ＋スピナー（#378・共通部品）。
+   *
+   * host の**上に**半透明の白（60%）とぐるぐるを重ねる。host の大きさは変えない。
+   * 角丸は host から継ぐので、丸（案件アイコン）でも四角（操作タブのカード・ボタン）でも
+   * 使える。beginBusy が「語を差し替える」形なのに対し、こちらは**語を置けない場所
+   * （画像だけの丸など）**向け。
+   *
+   * **載せ先が static でも壊れない。** オーバーレイは absolute なので、載せ先に
+   * position が無いと**別の祖先いっぱいに広がる**（黙って壊れる）。その場合だけ
+   * relative を入れ、外すときに戻す（案件アイコンの丸は元から relative なので触らない）。
+   *
+   * 支援技術には host の aria-busy で「処理中」を伝える。label は目に見えない語として
+   * 置くだけ（挿入と同時に中身を入れたライブリージョンは読まれないことが多い）。
+   *
+   * @returns 外す関数。beginBusy と同じく**何度呼んでも1回しか効かない**
+   */
+  function beginOverlaySpinner(host, label) {
+    if (!host) return function () {};
+    var madeRelative = false;
+    try {
+      if (window.getComputedStyle(host).position === "static") {
+        host.style.position = "relative";
+        madeRelative = true;
+      }
+    } catch (e) {}
+    var ov = el("span", { class: "busy-overlay" }, [
+      el("span", { class: "busy-spinner", "aria-hidden": "true" }),
+      el("span", { class: "busy-label", text: label || "処理中…" }),
+    ]);
+    host.appendChild(ov);
+    host.setAttribute("aria-busy", "true");
+    var used = false;
+    return function endOverlaySpinner() {
+      if (used) return;
+      used = true;
+      if (ov.parentNode) ov.parentNode.removeChild(ov);
+      host.removeAttribute("aria-busy");
+      if (madeRelative) host.style.position = "";
+    };
+  }
+
   /**
    * サーバへ設定変更を送る。**一覧は書き換えない**
    * （接続状況は夜間バッチのスナップショットなので、「もう効いている」と誤解させないため）。
@@ -13485,6 +13604,20 @@ ${deriveCapTile.toString()}
   }
 
   window.addEventListener("popstate", route);
+  /**
+   * ヘッダーの案件名（#379）。**ポータル配下（/p/<key>/ の下）で開いているときだけ**、
+   * ポータルの案件一覧（同一オリジンの /）へ戻るリンクにする。
+   * Basic 認証の Amplify で開いているときは戻る先が無いので、これまでどおり（href="?"）。
+   * 文言は増やさない——案件名そのものがリンクで、説明は title 属性だけ。
+   * 丸（アイコン操作）とは別の口なので、renderSiteIcon には触らない
+   */
+  (function linkTitleToPortal() {
+    var a = document.getElementById("home-link");
+    if (!a || !/^\\/p\\/[^/]+\\//.test(location.pathname)) return;
+    a.setAttribute("href", "/");
+    a.setAttribute("title", "案件一覧へ");
+    a.classList.add("site-title-portal");
+  })();
   // ヘッダーの案件アイコン（#348）は #app の外なので、**起動時に1回だけ描く**。
   // route() はタブを替えるたびに走るが、ヘッダーは描き替えない——描き直すと
   // 保存直後の mirror とメニューの開閉が、タブを移るたびに畳まれる

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takagaki/cortex-decisions-viewer",
-  "version": "0.12.27",
+  "version": "0.12.28",
   "description": "Cortexの意思決定記録（Decisions/*.md）を静的サイトにビルドして閲覧する。各レコードに「Edit on GitHub」リンクを付与する。",
   "license": "UNLICENSED",
   "private": false,