First commit

packages/frontend/src/Layout.vue

@@ -0,0 +1,27 @@
+<template>
+  <Progress
+    v-show="routerStatus.isLoad"
+    class="router-progress"
+    :size="6"
+  />
+
+  <main>
+    <RouterView
+      :key="$route.fullPath"
+    />
+  </main>
+</template>
+
+<style scoped>
+.router-progress {
+  position: fixed;
+  inset: 0.5rem 0.5rem 0 auto;
+  z-index: 9999;
+}
+</style>
+
+<script lang="ts" setup>
+import { RouterView } from "vue-router";
+import routerStatus from "@/lib/router";
+import Progress from "@/components/Progress.vue";
+</script>

packages/frontend/src/components/Progress.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="progress" />
+</template>
+
+<style scoped>
+.progress {
+  border: v-bind(borderSize) solid #425C97;
+  border-radius: 100%;
+  border-top: v-bind(borderSize) solid #ffffff;
+  width: v-bind(size);
+  height: v-bind(size);
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  size: number;
+}>();
+
+const size = `${props.size * 0.25}rem`;
+const borderSize = `${props.size / 3}px`;
+</script>

packages/frontend/src/global.css

@@ -0,0 +1,24 @@
+:root {
+  --bg-color: #ffffff;
+  --text-color: #000000;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-color: #1b1b1b;
+    --text-color: #ffffff;
+  }
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  width: 100vw;
+  height: 100vh;
+  font-size: 16px;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+}

packages/frontend/src/lib/db.ts

@@ -0,0 +1,56 @@
+import Dexie, { type EntityTable } from "dexie";
+
+export interface Settings {
+  id: number;
+  name: string;
+  value: string;
+}
+
+export interface Server {
+  id: number;
+  name: string;
+  value: string;
+}
+
+export default class extends Dexie {
+  server!: EntityTable<Server, "id">;
+  settings!: EntityTable<Settings, "id">;
+
+  constructor() {
+    super("lynq-chat");
+
+    this.version(1).stores({
+      server: "++id,&name",
+      settings: "++id,&name",
+    });
+    
+    /*(async () => {
+      await this.open();
+
+      await this.transaction("rw", this.settings, async () => {
+        const defaults = {
+          "key": "value",
+        };
+
+        for (const [name, value] of Object.entries(defaults)) {
+          const exists = await this.settings
+            .where("name")
+            .equals(name)
+            .first();
+
+          if (!exists) {
+            await this.settings.add({ name, value });
+          }
+        }
+      });
+    })();*/
+  };
+}
+
+export async function getByIndex<T>(
+  table: EntityTable<T, any>,
+  index: string,
+  indexValue: any
+): Promise<T | undefined> {
+  return await table.where(index).equals(indexValue).first();
+}

packages/frontend/src/lib/router.ts

@@ -0,0 +1,9 @@
+import { reactive } from "vue";
+
+const routerStatus = reactive<{
+  isLoad: boolean;
+}>({
+  isLoad: false,
+});
+
+export default routerStatus;

packages/frontend/src/main.ts

@@ -0,0 +1,29 @@
+import { createApp } from "vue";
+import { createRouter, createWebHistory } from "vue-router";
+import routerStatus from "@/lib/router";
+
+import "@/global.css";
+import Layout from "@/Layout.vue";
+
+const app = createApp(Layout);
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: "/",
+      component: () => import("@/routes/index.vue"),
+    },
+  ],
+});
+// @ts-ignore 余分な引数の警告
+router.beforeEach((to, from, next) => {
+  routerStatus.isLoad = true;
+  next();
+});
+router.afterEach(() => {
+  routerStatus.isLoad = false;
+});
+app.use(router);
+
+app.mount("body");

packages/frontend/src/routes/index.vue

@@ -0,0 +1,6 @@
+<template>
+  <h1>Hello World</h1>
+</template>
+
+<script lang="ts" setup>
+</script>

packages/frontend/src/types/global.d.ts

@@ -0,0 +1,4 @@
+export {}
+  
+declare global {
+}