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/Layout.vue

@@ -5,6 +5,8 @@
     :size="6"
   />
 
+  <div class="modals-container" />
+
   <main class="layout">
     <div class="left-menu">
       <div>
@@ -12,10 +14,22 @@
       </div>
     </div>
 
-    <div class="route-main">
-      <RouterView
-        :key="$route.fullPath"
-      />
+    <div class="content-main">
+      <div class="content-header">
+        {{
+          $route.meta.title
+            ?? (serverInfo.success
+              ? serverInfo.name
+              : null)
+            ?? "LynqChat"
+        }}
+      </div>
+
+      <div class="route-main">
+        <RouterView
+          :key="$route.fullPath"
+        />
+      </div>
     </div>
   </main>
 </template>
@@ -26,7 +40,7 @@ main.layout {
   gap: 1rem;
   width: 100dvw;
   height: 100dvh;
-  padding: 1rem;
+  padding: 1.5rem;
   box-sizing: border-box;
 }
 
@@ -36,6 +50,8 @@ main.layout {
   flex-direction: column;
   justify-content: center;
   gap: 1rem;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .left-menu div {
@@ -44,26 +60,65 @@ main.layout {
   font-weight: bold;
   font-size: 1.4rem;
   border-radius: 2rem;
-  padding: 1rem;
-  transition: all 100ms ease-in;
+  padding: 1rem 1.5rem;
+  transition: background-color 250ms ease-out;
 }
 
 .left-menu div:hover {
   background-color: var(--border-color);
 }
 
-.route-main {
+.content-main {
   border: 1px solid var(--border-color);
-  padding: 0.75rem;
   border-radius: 1rem;
+  overflow: hidden;
   flex-grow: 1;
 }
 
+.content-header {
+  padding: 1.25rem 1.5rem;
+  font-size: 1.6rem;
+  font-weight: bold;
+  border-bottom-left-radius: 1rem;
+  border-bottom-right-radius: 1rem;
+  border-bottom: 1px solid var(--border-color);
+  box-shadow: 0px 1px 10px var(--border-color);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.route-main {
+  padding: 1.25rem;
+  padding-bottom: 0;
+  overflow: scroll;
+  min-height: 100%;
+}
+
 .router-progress {
   position: fixed;
   inset: 0.5rem 0.5rem 0 auto;
   z-index: 9999;
 }
+
+.modals-container {
+  z-index: 9998;
+  position: relative;
+}
+
+@media (max-width: 40rem) {
+  .layout {
+    padding: 0 !important;
+  }
+
+  .left-menu {
+    display: none;
+  }
+
+  .content-main {
+    border: none;
+    border-radius: 0;
+  }
+}
 </style>
 
 <script lang="ts" setup>
@@ -74,11 +129,15 @@ import serverInfo from "@/lib/account";
 
 const router = useRouter();
 
-if (!serverInfo.success) {
+if (!serverInfo.value.success) {
   throw new Error();
 }
 
-if (!serverInfo.isFirstAdminExists) {
-  router.replace("/setup");
+if (!serverInfo.value.isInitialized) {
+  router.replace("/setup/initialization");
+}
+
+if (!serverInfo.value.isFirstAdminExists) {
+  router.replace("/setup/create-admin");
 }
 </script>