gui: ワークスペース一覧取得エラー時の UI

Changes

2 changed files (+49/-5)

• packages/gui/src/docs/pages/widgets/workspace-list.astro
  • @@ -38,6 +38,7 @@ import { ListResponseSchema } from "@yamori/proto/yamori/workspace/v1/list_response_pb.js";
    import { OpenEvent, + RetryEvent, YamoriWorkspaceList, } from "../../../widgets/workspace-list/workspace-list.ts";
  • @@ -76,6 +77,14 @@ },
    }, }), ); + + demo.addEventListener("retry", (event) => { + if (event instanceof RetryEvent) { + console.groupCollapsed("yamori-workspace-list.retry"); + console.dir(event); + console.groupEnd(); + } + }); } });
  • @@ -101,9 +110,9 @@ <h2>System Error</h2>
    <p> レスポンスが <code>system_error</code> の場合はエラー表示となります。 </p> - <ThemeMatrixPreview> + <Preview title="result=system_error"> <yamori-workspace-list data-id="system_error"></yamori-workspace-list> - </ThemeMatrixPreview> + </Preview> <h2>Attribute Usage</h2> <p>
• packages/gui/src/widgets/workspace-list/workspace-list.ts
  • @@ -10,11 +10,21 @@ } from "@yamori/proto/yamori/workspace/v1/list_response_pb.js";
    import { wrapElement, YamoriElement } from "../../element.ts"; + import { YamoriButton } from "../../components/button/button.ts"; + import { YamoriCallout } from "../../components/callout/callout.ts"; import { YamoriWorkspaceListEntry } from "../workspace-list-entry/workspace-list-entry.ts"; import css from "./workspace-list.css?inline"; export { OpenEvent } from "../workspace-list-entry/workspace-list-entry.ts"; + + export class RetryEvent extends Event { + constructor() { + super("retry", { + cancelable: true, + }); + } + } type ObservedAttributes = readonly ["pending", "list-response"];
  • @@ -113,9 +123,34 @@ }
    switch (this.#data.result.case) { case "systemError": { - const message = document.createElement("p"); - message.textContent = `取得に失敗しました: ${this.#data.result.value.code}`; - this.#shadow.insertBefore(message, this.#endMarker); + const callout = document.createElement(YamoriCallout.tagName) as InstanceType< + typeof YamoriCallout.constructor + >; + + const title = document.createElement("span"); + title.slot = "title"; + title.textContent = `取得エラー (${this.#data.result.value.code})`; + callout.appendChild(title); + + const message = document.createTextNode( + `ワークスペース一覧の取得に失敗しました。`, + ); + callout.appendChild(message); + + const retry = document.createElement(YamoriButton.tagName) as InstanceType< + typeof YamoriButton.constructor + >; + retry.slot = "action"; + retry.textContent = "再試行"; + retry.addEventListener("click", (event) => { + event.preventDefault(); + event.stopPropagation(); + + this.dispatchEvent(new RetryEvent()); + }); + callout.appendChild(retry); + + this.#shadow.insertBefore(callout, this.#endMarker); return; } case "ok": {