New: フロントエンドにL.jsを導入 / Fix: 初期設定前にserver-infoが利用できない問題 / Feat: manifest.json / Chg: isOwnerをisAdminに戻しました / Fix: UserRepositoryのschemaの記述順序を統一 / Feat: server-infoにサーバー名とサーバー説明を記載 / New: manifest.jsonをフロントエンドで読み込み / New: スクロールバーのスタイルを指定 / New: フォントを指定 / New: line-heightを指定 / New: tab-sizeを指定 / New: <label>のwidthをfit-contentとして指定 / New: CSS変数にアクセントカラーなどを追加 / New: <a>のcolorをaccent-colorとして指定 / Feat: ページのレイアウトを作成 / Feat: 各ページのヘッダーでタイトルを表示 / Feat: スマホUI / Feat: セットアップウィザードをフロントエンドに実装 / Feat: NotFoundページ / New: Button,Input,InputPassword,Toggle,Textareaコンポーネントを作成 / Feat: modal機能 / Chg: server-infoをrefに変更 / Fix: L.jsのsetup/initializationがsetup/initilizationになっていたtypoを修正

packages/frontend/src/lib/account.ts

@@ -1,5 +1,11 @@
 import client from "@/lib/client";
+import type ApiMap from "lynqchat-js/1.0.0-alpha.0/map";
+import { ref } from "vue";
 
-const serverInfo = await client.request("server-info");
+let serverInfo = ref<ApiMap["server-info"]["response"]>(await client.request("server-info"));
+
+export const reloadServerInfo = async () => {
+  serverInfo.value = await client.request("server-info");
+}
 
 export default serverInfo;

packages/frontend/src/lib/modal.ts

@@ -0,0 +1,52 @@
+import { createApp, h, ref, type Component } from "vue";
+
+const layer = ref<number>(0);
+
+export const createModal = <T extends Component>(data: {
+  component: T,
+  style?: Record<string, string>,
+  props?: Record<string, ((...args: any[]) => any) | any>,
+  onClose?: () => void
+}) => {
+  layer.value++
+  const newContainer = document.createElement("div");
+  for (const [key, value] of Object.entries({
+    ...data.style,
+    transform: `translateZ(${layer.value})`,
+    position: "fixed",
+    inset: "0",
+    display: "flex",
+    "justify-content": "center",
+    "align-items": "center",
+    width: "100dvw",
+    height: "100dvh",
+    "background-color": "#00000080",
+  })) {
+    newContainer.style.setProperty(key, value);
+  }
+
+  const container = document.querySelector(".modals-container")!
+    .appendChild(newContainer);
+
+  let app: ReturnType<typeof createApp>;
+
+  const close = () => {
+    data.onClose?.();
+    layer.value--;
+    app.unmount();
+    container.remove();
+  };
+
+  app = createApp({
+    render() {
+      return h(data.component, {
+        ...data.props,
+        onPleaseClose: close,
+      });
+    },
+  });
+
+  app.mount(container);
+
+  return close;
+}

packages/frontend/src/lib/validation.ts

@@ -0,0 +1,8 @@
+import type { SafeParseReturnType } from "zod/v3";
+
+export const getIssueFromPath = (path: string, result: SafeParseReturnType<any, any>) => {
+  const filtered = result.error?.issues.filter(issue => issue.path.join(".") === path);
+  const issue = (filtered ?? [])[0];
+
+  return issue;
+}