aoirint · aoirint · Dec 5, 2025 · Dec 5, 2025 · Dec 5, 2025 · Dec 5, 2025
diff --git a/biome.json b/biome.json
@@ -13,7 +13,7 @@
       "!.next",
       "!dist",
       "!build",
-      "!lib/graphql-types.ts"
+      "!src/lib/graphql-types.ts"
     ]
   },
   "formatter": {

diff --git a/codegen.ts b/codegen.ts
@@ -9,10 +9,10 @@ const config: CodegenConfig = {
       },
     },
   },
-  documents: "pages/**/*.graphql",
+  documents: "src/**/*.graphql",
   ignoreNoDocuments: true,
   generates: {
-    "./lib/graphql-types.ts": {
+    "./src/lib/graphql-types.ts": {
       plugins: [
         "typescript",
         "typescript-operations",

diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "@emotion/styled": "11.14.1",
     "@mui/icons-material": "7.3.6",
     "@mui/material": "7.3.6",
+    "@mui/material-nextjs": "7.3.6",
     "@types/node": "24.10.1",
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",

diff --git a/pages/_app.tsx b/pages/_app.tsx
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/vercel.svg b/public/vercel.svg
diff --git a/src/app/apollo-provider.tsx b/src/app/apollo-provider.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import {
+  ApolloClient,
+  ApolloProvider,
+  createHttpLink,
+  InMemoryCache,
+} from "@apollo/client"
+import { setContext } from "@apollo/client/link/context"
+
+import { type ReactNode, useMemo } from "react"
+import { getToken } from "../lib/auth"
+
+function createApolloClient() {
+  const httpLink = createHttpLink({
+    uri: `${process.env.NEXT_PUBLIC_HASURA_URL}/v1/graphql`,
+  })
+
+  const authLink = setContext((_, { headers }) => {
+    const token = getToken()
+    return {
+      headers: {
+        ...headers,
+        authorization: token ? `Bearer ${token}` : "",
+      },
+    }
+  })
+
+  return new ApolloClient({
+    link: authLink.concat(httpLink),
+    cache: new InMemoryCache(),
+  })
+}
+
+export interface ApolloProviderClientProps {
+  children: ReactNode
+}
+
+export default function ApolloProviderClient({
+  children,
+}: ApolloProviderClientProps) {
+  const client = useMemo(() => createApolloClient(), [])
+
+  return <ApolloProvider client={client}>{children}</ApolloProvider>
+}
diff --git a/public/favicon.ico → src/app/favicon.ico b/public/favicon.ico → src/app/favicon.ico
diff --git a/styles/globals.css → src/app/globals.css b/styles/globals.css → src/app/globals.css
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -0,0 +1,42 @@
+import CssBaseline from "@mui/material/CssBaseline"
+import { ThemeProvider } from "@mui/material/styles"
+import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter"
+import type { Metadata } from "next"
+import { Noto_Sans_JP } from "next/font/google"
+import "./globals.css"
+
+import { InitColorSchemeScript } from "@mui/material"
+import theme from "../theme"
+import ApolloProviderClient from "./apollo-provider"
+
+const notoSansJp = Noto_Sans_JP({
+  weight: ["300", "400", "500", "700"],
+  preload: false,
+  display: "swap",
+  variable: "--font-noto-sans-jp",
+})
+
+export const metadata: Metadata = {
+  title: "Harmonica",
+  description: "Harmonica Web Dashboard",
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="ja" className={notoSansJp.variable} suppressHydrationWarning>
+      <body>
+        <AppRouterCacheProvider>
+          <ThemeProvider theme={theme}>
+            <InitColorSchemeScript attribute="class" />
+            <CssBaseline />
+            <ApolloProviderClient>{children}</ApolloProviderClient>
+          </ThemeProvider>
+        </AppRouterCacheProvider>
+      </body>
+    </html>
+  )
+}
diff --git a/src/app/login.tsx b/src/app/login.tsx
@@ -0,0 +1,5 @@
+import LoginForm from "../components/login-form"
+
+export default function LoginPage() {
+  return <LoginForm />
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -0,0 +1,5 @@
+import Monitor from "../components/monitor"
+
+export default function Home() {
+  return <Monitor />
+}
diff --git a/lib/components/app_bar/account_menu_icon.tsx → src/components/app_bar/account_menu_icon.tsx b/lib/components/app_bar/account_menu_icon.tsx → src/components/app_bar/account_menu_icon.tsx
@@ -1,9 +1,9 @@
 import { useApolloClient } from "@apollo/client"
 import AccountCircleIcon from "@mui/icons-material/AccountCircle"
 import { Box, IconButton, Menu, MenuItem } from "@mui/material"
-import { useRouter } from "next/router"
+import { useRouter } from "next/navigation"
 import { useState } from "react"
-import { setToken } from "../../auth"
+import { setToken } from "../../lib/auth"
 
 export default function AccountMenuIcon() {
   const apolloClient = useApolloClient()

diff --git a/lib/components/app_bar/anonymous_app_bar.tsx → src/components/app_bar/anonymous_app_bar.tsx b/lib/components/app_bar/anonymous_app_bar.tsx → src/components/app_bar/anonymous_app_bar.tsx
diff --git a/lib/components/app_bar/config_menu_icon.tsx → src/components/app_bar/config_menu_icon.tsx b/lib/components/app_bar/config_menu_icon.tsx → src/components/app_bar/config_menu_icon.tsx
diff --git a/lib/components/app_bar/main_app_bar.tsx → src/components/app_bar/main_app_bar.tsx b/lib/components/app_bar/main_app_bar.tsx → src/components/app_bar/main_app_bar.tsx
diff --git a/lib/components/chart/co2_chart.tsx → src/components/chart/co2_chart.tsx b/lib/components/chart/co2_chart.tsx → src/components/chart/co2_chart.tsx
@@ -1,4 +1,6 @@
 import { Box } from "@mui/material"
+import "@/lib/chartjs"
+
 import type { ChartOptions } from "chart.js"
 import { type ChartProps, Line } from "react-chartjs-2"
 

diff --git a/lib/components/chart/humidity_chart.tsx → src/components/chart/humidity_chart.tsx b/lib/components/chart/humidity_chart.tsx → src/components/chart/humidity_chart.tsx
@@ -1,4 +1,6 @@
 import { Box } from "@mui/material"
+import "@/lib/chartjs"
+
 import type { ChartOptions } from "chart.js"
 import { type ChartProps, Line } from "react-chartjs-2"
 

diff --git a/lib/components/chart/light_chart.tsx → src/components/chart/light_chart.tsx b/lib/components/chart/light_chart.tsx → src/components/chart/light_chart.tsx
@@ -1,4 +1,6 @@
 import { Box } from "@mui/material"
+import "@/lib/chartjs"
+
 import type { ChartOptions } from "chart.js"
 import { type ChartProps, Line } from "react-chartjs-2"
 

diff --git a/lib/components/chart/temperature_chart.tsx → src/components/chart/temperature_chart.tsx b/lib/components/chart/temperature_chart.tsx → src/components/chart/temperature_chart.tsx
@@ -1,4 +1,6 @@
 import { Box } from "@mui/material"
+import "@/lib/chartjs"
+
 import type { ChartOptions } from "chart.js"
 import { type ChartProps, Line } from "react-chartjs-2"
 

diff --git a/lib/components/chart/traffic_chart.tsx → src/components/chart/traffic_chart.tsx b/lib/components/chart/traffic_chart.tsx → src/components/chart/traffic_chart.tsx
@@ -1,4 +1,6 @@
 import { Box } from "@mui/material"
+import "@/lib/chartjs"
+
 import type { ChartOptions } from "chart.js"
 import { type ChartProps, Line } from "react-chartjs-2"
 

diff --git a/lib/components/drawer/main_drawer.tsx → src/components/drawer/main_drawer.tsx b/lib/components/drawer/main_drawer.tsx → src/components/drawer/main_drawer.tsx
diff --git a/pages/login.tsx → src/components/login-form.tsx b/pages/login.tsx → src/components/login-form.tsx
@@ -1,16 +1,18 @@
+"use client"
+
 import { Box, Button, Container, TextField } from "@mui/material"
 import Head from "next/head"
-import { useRouter } from "next/router"
+import { useRouter } from "next/navigation"
 import { useEffect } from "react"
 import { Controller, useForm } from "react-hook-form"
 import { hasToken, setToken } from "../lib/auth"
-import AnonymousAppBar from "../lib/components/app_bar/anonymous_app_bar"
+import AnonymousAppBar from "./app_bar/anonymous_app_bar"
 
-interface LoginValues {
+export interface LoginValues {
   token: string
 }
 
-export default function LoginPage() {
+export default function LoginForm() {
   const router = useRouter()
   const { control, handleSubmit } = useForm<LoginValues>({
     defaultValues: {

diff --git a/pages/index.tsx → src/components/monitor.tsx b/pages/index.tsx → src/components/monitor.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import assert from "node:assert"
 import {
   Box,
@@ -7,20 +9,19 @@ import {
   Toolbar,
   Typography,
 } from "@mui/material"
-import dayjs from "dayjs"
-import Head from "next/head"
-import { useRouter } from "next/router"
+import { useRouter } from "next/navigation"
 import { useEffect, useState } from "react"
+import dayjs from "@/lib/dayjs"
+import MainAppBar from "../components/app_bar/main_app_bar"
+import Co2Chart from "../components/chart/co2_chart"
+import HumidityChart from "../components/chart/humidity_chart"
+import LightChart from "../components/chart/light_chart"
+import TemperatureChart from "../components/chart/temperature_chart"
+import SmokePingChartImage from "../components/smoke_ping_chart_image"
 import { hasToken } from "../lib/auth"
-import MainAppBar from "../lib/components/app_bar/main_app_bar"
-import Co2Chart from "../lib/components/chart/co2_chart"
-import HumidityChart from "../lib/components/chart/humidity_chart"
-import LightChart from "../lib/components/chart/light_chart"
-import TemperatureChart from "../lib/components/chart/temperature_chart"
-import SmokePingChartImage from "../lib/components/smoke_ping_chart_image"
 import { useGetMonitorQuery } from "../lib/graphql-types"
 
-export default function HomePage() {
+export default function Monitor() {
   const router = useRouter()
 
   const smokePingNames =
@@ -141,11 +142,6 @@ export default function HomePage() {
 
   return (
     <div>
-      <Head>
-        <title>Harmonica</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
       <Box sx={{ display: "flex" }}>
         <CssBaseline />
         <MainAppBar