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/components/Textarea.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="textarea">
+    <label :for="id">{{ label }}</label>
+
+    <textarea
+      v-model="model"
+      v-bind="$attrs"
+      :class="$attrs.class"
+      :id="id"
+    />
+
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.textarea {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.textarea label {
+  font-size: 0.85rem;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.textarea textarea {
+  background-color: var(--bg-sub-color);
+  color: var(--text-color);
+  font-size: 1rem;
+  resize: vertical;
+  field-sizing: content;
+  border: 1px solid transparent;
+  outline: none;
+  padding: 0.6rem;
+  border-radius: 0.25rem;
+  transition: border 200ms ease-out;
+}
+
+.textarea textarea:hover {
+  border: 1px solid var(--border-color);
+}
+
+.textarea textarea:focus {
+  border: 1px solid var(--accent-color);
+}
+</style>
+
+<script lang="ts" setup>
+import { useId } from "vue";
+
+defineProps<{
+  label: string;
+}>();
+
+const model = defineModel<string>();
+const id = useId();
+</script>