New: backendのtsconfig.jsonにesModuleInteropを追加 / Fix: 一部エンティティの時刻記録をdateからdatetimeに修正 / Fix: setup/initializationエンドポイントでのwebpushのimport方法の問題 / Chg: font-sizeを16pxから14pxに変更 / Chg: html, bodyのwidthとheightをvw/vhからdvw/dvhに変更 / Feat: レイアウトを作成 / New(frontend): /setupを作成

packages/backend/src/modules/entities/Token.ts

@@ -27,13 +27,13 @@ export class TokenEntity {
   isNative!: boolean;
 
   @Property({
-    type: "date",
+    type: "datetime",
     onCreate: () => new Date(),
   })
   createdAt!: Date;
 
   @Property({
-    type: "date",
+    type: "datetime",
     nullable: true,
   })
   lastUsedAt?: Date;

packages/backend/src/modules/entities/User.ts

@@ -51,7 +51,7 @@ export class UserEntity {
     type: "boolean",
     default: false,
   })
-  isAdmin: boolean = false;
+  isOwner: boolean = false;
 
   @Property({
     type: "boolean",
@@ -64,4 +64,10 @@ export class UserEntity {
     onCreate: () => new Date(),
   })
   createdAt!: Date;
+
+  @Property({
+    type: "datetime",
+    nullable: true,
+  })
+  lastUsedAt?: Date;
 }

packages/backend/src/routes/setup/initialization.ts

@@ -2,7 +2,7 @@ import { DatabaseError, ErrorBase, InputError } from "@/errors";
 import Logger from "@/lib/logger";
 import { ConfigEntity } from "@/modules/entities/Config";
 import type { FastifyInstance } from "fastify";
-import { generateVAPIDKeys } from "web-push";
+import webpush from "web-push";
 import z from "zod/v3";
 
 export default function SetupInitialization(fastify: FastifyInstance) {
@@ -48,7 +48,7 @@ export default function SetupInitialization(fastify: FastifyInstance) {
     try {
       const entries = Object.entries(result.data).filter(([key]) => key !== "force");
 
-      const vapid = generateVAPIDKeys();
+      const vapid = webpush.generateVAPIDKeys();
       entries.push(["VAPID_PUBLIC", vapid.publicKey]);
       entries.push(["VAPID_PRIVATE", vapid.privateKey]);
       

packages/backend/tsconfig.json

@@ -13,6 +13,7 @@
     "exactOptionalPropertyTypes": true,
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
+    "esModuleInterop": true,
     "strict": true,
     "verbatimModuleSyntax": true,
     "isolatedModules": true,

packages/frontend/src/Layout.vue

@@ -5,14 +5,60 @@
     :size="6"
   />
 
-  <main>
+  <main class="layout">
-    <RouterView
+    <div class="left-menu">
-      :key="$route.fullPath"
+      <div>
-    />
+        ホーム
+      </div>
+    </div>
+
+    <div class="route-main">
+      <RouterView
+        :key="$route.fullPath"
+      />
+    </div>
   </main>
 </template>
 
 <style scoped>
+main.layout {
+  display: flex;
+  gap: 1rem;
+  width: 100dvw;
+  height: 100dvh;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+.left-menu {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.left-menu div {
+  width: 6rem;
+  text-align: center;
+  font-weight: bold;
+  font-size: 1.4rem;
+  border-radius: 2rem;
+  padding: 1rem;
+  transition: all 100ms ease-in;
+}
+
+.left-menu div:hover {
+  background-color: var(--border-color);
+}
+
+.route-main {
+  border: 1px solid var(--border-color);
+  padding: 0.75rem;
+  border-radius: 1rem;
+  flex-grow: 1;
+}
+
 .router-progress {
   position: fixed;
   inset: 0.5rem 0.5rem 0 auto;
@@ -21,15 +67,18 @@
 </style>
 
 <script lang="ts" setup>
-import { RouterView } from "vue-router";
+import { RouterView, useRouter } from "vue-router";
 import routerStatus from "@/lib/router";
 import Progress from "@/components/Progress.vue";
-import { ref } from "vue";
 import serverInfo from "@/lib/account";
 
-const isBootFailed = ref<boolean>(false);
+const router = useRouter();
 
 if (!serverInfo.success) {
-  isBootFailed.value = true;
+  throw new Error();
+}
+
+if (!serverInfo.isFirstAdminExists) {
+  router.replace("/setup");
 }
 </script>

packages/frontend/src/global.css

@@ -1,12 +1,14 @@
 :root {
   --bg-color: #ffffff;
   --text-color: #000000;
+  --border-color: #e0e0e0;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --bg-color: #1b1b1b;
     --text-color: #ffffff;
+    --border-color: #2c2c2c;
   }
 }
 
@@ -16,9 +18,9 @@
 }
 
 html, body {
-  width: 100vw;
+  width: 100dvw;
-  height: 100vh;
+  height: 100dvh;
-  font-size: 16px;
+  font-size: 14px;
   background-color: var(--bg-color);
   color: var(--text-color);
 }

packages/frontend/src/main.ts

@@ -14,6 +14,10 @@ const router = createRouter({
       path: "/",
       component: () => import("@/routes/index.vue"),
     },
+    {
+      path: "/setup",
+      component: () => import("@/routes/setup.vue"),
+    }
   ],
 });
 router.beforeEach(() => {

packages/frontend/src/routes/setup.vue

@@ -0,0 +1,18 @@
+<template>
+  <h1>Welcome setup wizard!!</h1>
+</template>
+
+<script lang="ts" setup>
+import serverInfo from "@/lib/account";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+if (!serverInfo.success) {
+  throw new Error();
+}
+
+if (serverInfo.isFirstAdminExists) {
+  router.replace("/");
+}
+</script>