From 79265f4c7b335dbc4dc772554badf10580843f98 Mon Sep 17 00:00:00 2001
From: Meiryo7743 <46659204+Meiryo7743@users.noreply.github.com>
Date: Mon, 24 Feb 2025 00:06:37 +0900
Subject: [PATCH 01/30] feat: add ChannelHeader (WIP)

---
 .../_components/ChannelHeader/ChannelHeader.tsx     | 13 +++++++++++++
 src/app/channels/[channel_id]/page.tsx              |  7 +++++++
 2 files changed, 20 insertions(+)
 create mode 100644 src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx

diff --git a/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
new file mode 100644
index 0000000..d10591f
--- /dev/null
+++ b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { AppShellHeader } from "@mantine/core";
+
+type ChannelHeaderProps = {
+  channelName: string;
+};
+
+const ChannelHeader: React.FC<ChannelHeaderProps> = ({ channelName }) => {
+  return <AppShellHeader>{channelName}</AppShellHeader>;
+};
+
+export default ChannelHeader;
diff --git a/src/app/channels/[channel_id]/page.tsx b/src/app/channels/[channel_id]/page.tsx
index d005909..40a4454 100644
--- a/src/app/channels/[channel_id]/page.tsx
+++ b/src/app/channels/[channel_id]/page.tsx
@@ -5,6 +5,7 @@ import ChannelFooter from "./_components/ChannelFooter/ChannelFooter";
 
 import Message from "#/components/Message";
 import { prisma } from "#/libs/prisma";
+import ChannelHeader from "./_components/ChannelHeader/ChannelHeader";
 
 type ChannelIDPageProps = {
   params: Promise<{ channel_id: string }>;
@@ -20,9 +21,15 @@ async function ChannelIDPage({ params }: ChannelIDPageProps) {
       user: true,
     },
   });
+  const channel = await prisma.channel.findFirst({
+    where: {
+      id: channel_id,
+    },
+  });
 
   return (
     <Stack className={styles["root"]} justify="space-between">
+      <ChannelHeader channelName={channel?.name || "digichat"} />
       {messages.map((message) => (
         <Message key={message.id} message={message} user={message.user} />
       ))}

From 2243a752198deb024de86d2b3fa721f8856a6f13 Mon Sep 17 00:00:00 2001
From: Meiryo7743 <46659204+Meiryo7743@users.noreply.github.com>
Date: Sun, 2 Mar 2025 17:30:40 +0900
Subject: [PATCH 02/30] fix: modify the header structure of AppShell and
 ChannelHeader (but still in draft)

---
 src/app/_components/AppShell.tsx                              | 4 ++--
 .../[channel_id]/_components/ChannelHeader/ChannelHeader.tsx  | 4 +---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/app/_components/AppShell.tsx b/src/app/_components/AppShell.tsx
index 3de1fc8..4a30ea1 100644
--- a/src/app/_components/AppShell.tsx
+++ b/src/app/_components/AppShell.tsx
@@ -2,7 +2,7 @@
 
 import React from "react";
 
-import { Burger, Group, AppShell as MantineAppShell } from "@mantine/core";
+import { Box, Burger, Group, AppShell as MantineAppShell } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 
 import styles from "./AppShell.module.css";
@@ -30,7 +30,7 @@ const AppShell: React.FC<AppShellProps> = ({ children }) => {
       <MantineAppShell.Header>
         <Group h="100%" px="md">
           <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
-          digichat
+          <Box>digichat</Box>
         </Group>
       </MantineAppShell.Header>
       <Sidebar />
diff --git a/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
index d10591f..4a6f307 100644
--- a/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
+++ b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
@@ -1,13 +1,11 @@
 "use client";
 
-import { AppShellHeader } from "@mantine/core";
-
 type ChannelHeaderProps = {
   channelName: string;
 };
 
 const ChannelHeader: React.FC<ChannelHeaderProps> = ({ channelName }) => {
-  return <AppShellHeader>{channelName}</AppShellHeader>;
+  return <></>;
 };
 
 export default ChannelHeader;

From e9052dcaae00c566286ddaf0b8f69021b950551b Mon Sep 17 00:00:00 2001
From: Meiryo7743 <46659204+Meiryo7743@users.noreply.github.com>
Date: Sun, 2 Mar 2025 19:40:53 +0900
Subject: [PATCH 03/30] fix: page.tsx

---
 src/app/channels/[channel_id]/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/channels/[channel_id]/page.tsx b/src/app/channels/[channel_id]/page.tsx
index 40a4454..84874de 100644
--- a/src/app/channels/[channel_id]/page.tsx
+++ b/src/app/channels/[channel_id]/page.tsx
@@ -29,7 +29,7 @@ async function ChannelIDPage({ params }: ChannelIDPageProps) {
 
   return (
     <Stack className={styles["root"]} justify="space-between">
-      <ChannelHeader channelName={channel?.name || "digichat"} />
+      <ChannelHeader channelName={channel?.name!} />
       {messages.map((message) => (
         <Message key={message.id} message={message} user={message.user} />
       ))}

From 2d02130e8a78a0d281a3dd8978b19c6d540f5951 Mon Sep 17 00:00:00 2001
From: Meiryo7743 <46659204+Meiryo7743@users.noreply.github.com>
Date: Sun, 2 Mar 2025 20:17:30 +0900
Subject: [PATCH 04/30] feat: add the ChannelHeader to display a channel name
 at the AppShell header

---
 src/app/_components/AppShell.tsx              | 25 +++++++++++++++++--
 .../ChannelHeader/ChannelHeader.tsx           | 14 +++++++++++
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/app/_components/AppShell.tsx b/src/app/_components/AppShell.tsx
index 4a30ea1..3e3c457 100644
--- a/src/app/_components/AppShell.tsx
+++ b/src/app/_components/AppShell.tsx
@@ -3,7 +3,11 @@
 import React from "react";
 
 import { Box, Burger, Group, AppShell as MantineAppShell } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
+import {
+  readLocalStorageValue,
+  useDisclosure,
+  useDocumentTitle,
+} from "@mantine/hooks";
 
 import styles from "./AppShell.module.css";
 import Sidebar from "./Sidebar";
@@ -15,6 +19,23 @@ type AppShellProps = {
 const AppShell: React.FC<AppShellProps> = ({ children }) => {
   const [opened, { toggle }] = useDisclosure();
 
+  const defaultTitle = document.title;
+
+  /**
+   * channelName を取得し，タイトルに表示する
+   *
+   * @see {@link src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx}
+   */
+  const title = readLocalStorageValue({
+    key: location.pathname,
+    defaultValue: defaultTitle,
+  });
+
+  // ページタイトルを更新する
+  if (title !== defaultTitle) {
+    useDocumentTitle(`${defaultTitle} > ${title}`);
+  }
+
   return (
     <MantineAppShell
       layout="alt"
@@ -30,7 +51,7 @@ const AppShell: React.FC<AppShellProps> = ({ children }) => {
       <MantineAppShell.Header>
         <Group h="100%" px="md">
           <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
-          <Box>digichat</Box>
+          <Box>{title}</Box>
         </Group>
       </MantineAppShell.Header>
       <Sidebar />
diff --git a/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
index 4a6f307..0f78a13 100644
--- a/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
+++ b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
@@ -1,10 +1,24 @@
 "use client";
 
+import { useLocalStorage } from "@mantine/hooks";
+import { useEffect } from "react";
+
 type ChannelHeaderProps = {
   channelName: string;
 };
 
+/**
+ * AppShell の header の title を channelName に書き換える
+ *
+ * @see {@link src/app/_components/AppShell.tsx}
+ */
 const ChannelHeader: React.FC<ChannelHeaderProps> = ({ channelName }) => {
+  const [headerTitle, setHeaderTitle] = useLocalStorage({
+    key: location.pathname,
+  });
+  useEffect(() => setHeaderTitle(channelName));
+
+  // channelName に書き換える処理だけを実行したいので，空の JSX を返す
   return <></>;
 };
 

From 1d8a8b1c8748ac1c97fcccb2d6d88e6bacd3cbf9 Mon Sep 17 00:00:00 2001
From: Meiryo7743 <46659204+Meiryo7743@users.noreply.github.com>
Date: Sun, 2 Mar 2025 20:47:57 +0900
Subject: [PATCH 05/30] fix: AppShell

---
 src/app/_components/AppShell.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/_components/AppShell.tsx b/src/app/_components/AppShell.tsx
index 3e3c457..5a287a8 100644
--- a/src/app/_components/AppShell.tsx
+++ b/src/app/_components/AppShell.tsx
@@ -9,6 +9,7 @@ import {
   useDocumentTitle,
 } from "@mantine/hooks";
 
+import { usePathname } from "next/navigation";
 import styles from "./AppShell.module.css";
 import Sidebar from "./Sidebar";
 
@@ -19,7 +20,7 @@ type AppShellProps = {
 const AppShell: React.FC<AppShellProps> = ({ children }) => {
   const [opened, { toggle }] = useDisclosure();
 
-  const defaultTitle = document.title;
+  const defaultTitle = "Digichat";
 
   /**
    * channelName を取得し，タイトルに表示する
@@ -27,7 +28,7 @@ const AppShell: React.FC<AppShellProps> = ({ children }) => {
    * @see {@link src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx}
    */
   const title = readLocalStorageValue({
-    key: location.pathname,
+    key: usePathname(),
     defaultValue: defaultTitle,
   });
 

From b04102491b265f1516507d3a0d5434018274cc4d Mon Sep 17 00:00:00 2001
From: Meiryo7743 <46659204+Meiryo7743@users.noreply.github.com>
Date: Sun, 2 Mar 2025 20:59:42 +0900
Subject: [PATCH 06/30] fix: ChannelHeader

---
 .../_components/ChannelHeader/ChannelHeader.tsx     | 13 ++++++++-----
 src/app/channels/[channel_id]/page.tsx              |  2 +-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
index 0f78a13..dfe7165 100644
--- a/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
+++ b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { useLocalStorage } from "@mantine/hooks";
-import { useEffect } from "react";
 
 type ChannelHeaderProps = {
+  channelId: string;
   channelName: string;
 };
 
@@ -12,11 +12,14 @@ type ChannelHeaderProps = {
  *
  * @see {@link src/app/_components/AppShell.tsx}
  */
-const ChannelHeader: React.FC<ChannelHeaderProps> = ({ channelName }) => {
-  const [headerTitle, setHeaderTitle] = useLocalStorage({
-    key: location.pathname,
+const ChannelHeader: React.FC<ChannelHeaderProps> = ({
+  channelId,
+  channelName,
+}) => {
+  useLocalStorage({
+    key: `/channels/${channelId}`,
+    defaultValue: channelName,
   });
-  useEffect(() => setHeaderTitle(channelName));
 
   // channelName に書き換える処理だけを実行したいので，空の JSX を返す
   return <></>;
diff --git a/src/app/channels/[channel_id]/page.tsx b/src/app/channels/[channel_id]/page.tsx
index 84874de..cfb06e6 100644
--- a/src/app/channels/[channel_id]/page.tsx
+++ b/src/app/channels/[channel_id]/page.tsx
@@ -29,7 +29,7 @@ async function ChannelIDPage({ params }: ChannelIDPageProps) {
 
   return (
     <Stack className={styles["root"]} justify="space-between">
-      <ChannelHeader channelName={channel?.name!} />
+      <ChannelHeader channelId={channel_id} channelName={channel?.name!} />
       {messages.map((message) => (
         <Message key={message.id} message={message} user={message.user} />
       ))}

From 28e5b197d610ef98721fcefd9edec47e9de7454a Mon Sep 17 00:00:00 2001
From: Meiryo7743 <46659204+Meiryo7743@users.noreply.github.com>
Date: Sun, 2 Mar 2025 21:05:30 +0900
Subject: [PATCH 07/30] fix: errors on import order

---
 src/app/_components/AppShell.tsx       | 6 ++----
 src/app/channels/[channel_id]/page.tsx | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/app/_components/AppShell.tsx b/src/app/_components/AppShell.tsx
index 5a287a8..60369f8 100644
--- a/src/app/_components/AppShell.tsx
+++ b/src/app/_components/AppShell.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { usePathname } from "next/navigation";
 import React from "react";
 
 import { Box, Burger, Group, AppShell as MantineAppShell } from "@mantine/core";
@@ -9,7 +10,6 @@ import {
   useDocumentTitle,
 } from "@mantine/hooks";
 
-import { usePathname } from "next/navigation";
 import styles from "./AppShell.module.css";
 import Sidebar from "./Sidebar";
 
@@ -33,9 +33,7 @@ const AppShell: React.FC<AppShellProps> = ({ children }) => {
   });
 
   // ページタイトルを更新する
-  if (title !== defaultTitle) {
-    useDocumentTitle(`${defaultTitle} > ${title}`);
-  }
+  title !== defaultTitle && useDocumentTitle(`${defaultTitle} > ${title}`);
 
   return (
     <MantineAppShell
diff --git a/src/app/channels/[channel_id]/page.tsx b/src/app/channels/[channel_id]/page.tsx
index cfb06e6..dab041e 100644
--- a/src/app/channels/[channel_id]/page.tsx
+++ b/src/app/channels/[channel_id]/page.tsx
@@ -2,10 +2,10 @@ import { Stack } from "@mantine/core";
 
 import styles from "./ChannelIDPage.module.css";
 import ChannelFooter from "./_components/ChannelFooter/ChannelFooter";
+import ChannelHeader from "./_components/ChannelHeader/ChannelHeader";
 
 import Message from "#/components/Message";
 import { prisma } from "#/libs/prisma";
-import ChannelHeader from "./_components/ChannelHeader/ChannelHeader";
 
 type ChannelIDPageProps = {
   params: Promise<{ channel_id: string }>;

From 2e0b3af7879dab17298dc7e6823cfc698866fb9c Mon Sep 17 00:00:00 2001
From: Meiryo7743 <46659204+Meiryo7743@users.noreply.github.com>
Date: Sun, 2 Mar 2025 21:09:38 +0900
Subject: [PATCH 08/30] fix: resolve errors found by ESLint

---
 src/app/_components/AppShell.tsx       | 11 +++++------
 src/app/channels/[channel_id]/page.tsx |  2 +-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/app/_components/AppShell.tsx b/src/app/_components/AppShell.tsx
index 60369f8..9262820 100644
--- a/src/app/_components/AppShell.tsx
+++ b/src/app/_components/AppShell.tsx
@@ -20,20 +20,19 @@ type AppShellProps = {
 const AppShell: React.FC<AppShellProps> = ({ children }) => {
   const [opened, { toggle }] = useDisclosure();
 
-  const defaultTitle = "Digichat";
-
   /**
    * channelName を取得し，タイトルに表示する
    *
    * @see {@link src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx}
    */
-  const title = readLocalStorageValue({
+  const subtitle = readLocalStorageValue({
     key: usePathname(),
-    defaultValue: defaultTitle,
+    defaultValue: "",
   });
+  const title = subtitle !== "" ? `Digichat > ${subtitle}` : "Digichat";
 
   // ページタイトルを更新する
-  title !== defaultTitle && useDocumentTitle(`${defaultTitle} > ${title}`);
+  useDocumentTitle(title);
 
   return (
     <MantineAppShell
@@ -50,7 +49,7 @@ const AppShell: React.FC<AppShellProps> = ({ children }) => {
       <MantineAppShell.Header>
         <Group h="100%" px="md">
           <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
-          <Box>{title}</Box>
+          <Box>{subtitle}</Box>
         </Group>
       </MantineAppShell.Header>
       <Sidebar />
diff --git a/src/app/channels/[channel_id]/page.tsx b/src/app/channels/[channel_id]/page.tsx
index dab041e..4c5b018 100644
--- a/src/app/channels/[channel_id]/page.tsx
+++ b/src/app/channels/[channel_id]/page.tsx
@@ -29,7 +29,7 @@ async function ChannelIDPage({ params }: ChannelIDPageProps) {
 
   return (
     <Stack className={styles["root"]} justify="space-between">
-      <ChannelHeader channelId={channel_id} channelName={channel?.name!} />
+      <ChannelHeader channelId={channel_id} channelName={channel?.name || ""} />
       {messages.map((message) => (
         <Message key={message.id} message={message} user={message.user} />
       ))}

From 53ce2966bb7b206c3dc5843a601269774929f083 Mon Sep 17 00:00:00 2001
From: Meiryo7743 <46659204+Meiryo7743@users.noreply.github.com>
Date: Sun, 2 Mar 2025 21:22:07 +0900
Subject: [PATCH 09/30] fix: ChannelHeader

---
 .../_components/ChannelHeader/ChannelHeader.tsx          | 9 +++------
 src/app/channels/[channel_id]/page.tsx                   | 2 +-
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
index dfe7165..e997d0e 100644
--- a/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
+++ b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { useLocalStorage } from "@mantine/hooks";
+import { usePathname } from "next/navigation";
 
 type ChannelHeaderProps = {
-  channelId: string;
   channelName: string;
 };
 
@@ -12,12 +12,9 @@ type ChannelHeaderProps = {
  *
  * @see {@link src/app/_components/AppShell.tsx}
  */
-const ChannelHeader: React.FC<ChannelHeaderProps> = ({
-  channelId,
-  channelName,
-}) => {
+const ChannelHeader: React.FC<ChannelHeaderProps> = ({ channelName }) => {
   useLocalStorage({
-    key: `/channels/${channelId}`,
+    key: usePathname(),
     defaultValue: channelName,
   });
 
diff --git a/src/app/channels/[channel_id]/page.tsx b/src/app/channels/[channel_id]/page.tsx
index 4c5b018..b9ce2a8 100644
--- a/src/app/channels/[channel_id]/page.tsx
+++ b/src/app/channels/[channel_id]/page.tsx
@@ -29,7 +29,7 @@ async function ChannelIDPage({ params }: ChannelIDPageProps) {
 
   return (
     <Stack className={styles["root"]} justify="space-between">
-      <ChannelHeader channelId={channel_id} channelName={channel?.name || ""} />
+      <ChannelHeader channelName={channel?.name || ""} />
       {messages.map((message) => (
         <Message key={message.id} message={message} user={message.user} />
       ))}

From 4cc9e67e2aafcdaf39df0914307a1c4bf86c38b0 Mon Sep 17 00:00:00 2001
From: Meiryo7743 <46659204+Meiryo7743@users.noreply.github.com>
Date: Sun, 2 Mar 2025 21:22:43 +0900
Subject: [PATCH 10/30] fix: resolve errors found by ESLint

---
 .../[channel_id]/_components/ChannelHeader/ChannelHeader.tsx   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
index e997d0e..33ef55f 100644
--- a/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
+++ b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { useLocalStorage } from "@mantine/hooks";
 import { usePathname } from "next/navigation";
 
+import { useLocalStorage } from "@mantine/hooks";
+
 type ChannelHeaderProps = {
   channelName: string;
 };

From 3def0b2aef58508ece09bfe2b0fdaf8aef85af45 Mon Sep 17 00:00:00 2001
From: Meiryo7743 <46659204+Meiryo7743@users.noreply.github.com>
Date: Fri, 7 Mar 2025 13:19:26 +0900
Subject: [PATCH 11/30] fix: title format

---
 src/app/_components/AppShell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/_components/AppShell.tsx b/src/app/_components/AppShell.tsx
index 9262820..fca4185 100644
--- a/src/app/_components/AppShell.tsx
+++ b/src/app/_components/AppShell.tsx
@@ -29,7 +29,7 @@ const AppShell: React.FC<AppShellProps> = ({ children }) => {
     key: usePathname(),
     defaultValue: "",
   });
-  const title = subtitle !== "" ? `Digichat > ${subtitle}` : "Digichat";
+  const title = subtitle !== "" ? `${subtitle} | Digichat` : "Digichat";
 
   // ページタイトルを更新する
   useDocumentTitle(title);

From 6767588a069906e7ee05ac042b6489ad8e04a8d4 Mon Sep 17 00:00:00 2001
From: Meiryo7743 <46659204+Meiryo7743@users.noreply.github.com>
Date: Sat, 22 Mar 2025 22:42:23 +0900
Subject: [PATCH 12/30] chore: renamed

---
 src/app/{layout.tsx => template.tsx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/app/{layout.tsx => template.tsx} (100%)

diff --git a/src/app/layout.tsx b/src/app/template.tsx
similarity index 100%
rename from src/app/layout.tsx
rename to src/app/template.tsx

From 6e8181db0b1452c01acfd79a7406af8fd014e6f4 Mon Sep 17 00:00:00 2001
From: Meiryo7743 <46659204+Meiryo7743@users.noreply.github.com>
Date: Sun, 30 Mar 2025 19:27:24 +0900
Subject: [PATCH 13/30] fix: modify

---
 src/app/template.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/app/template.tsx b/src/app/template.tsx
index 1628285..2a09044 100644
--- a/src/app/template.tsx
+++ b/src/app/template.tsx
@@ -6,7 +6,6 @@ import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 
 import "@mantine/core/styles.css";
-import AppShell from "./_components/AppShell";
 import "./globals.css";
 
 dayjs.extend(utc);
@@ -25,9 +24,7 @@ export default function RootLayout({ children }: RootRayoutProps) {
   return (
     <html lang="en">
       <body>
-        <MantineProvider>
-          <AppShell>{children}</AppShell>
-        </MantineProvider>
+        <MantineProvider>{children}</MantineProvider>
       </body>
     </html>
   );

From 0537bad0ca49e1de863af61f68e33b44675efd85 Mon Sep 17 00:00:00 2001
From: Meiryo7743 <46659204+Meiryo7743@users.noreply.github.com>
Date: Sun, 30 Mar 2025 19:29:00 +0900
Subject: [PATCH 14/30] fix: move AppShell as a global component

---
 src/{app/_components => components}/AppShell.module.css | 0
 src/{app/_components => components}/AppShell.tsx        | 0
 src/{app/_components => components}/Sidebar.tsx         | 0
 3 files changed, 0 insertions(+), 0 deletions(-)
 rename src/{app/_components => components}/AppShell.module.css (100%)
 rename src/{app/_components => components}/AppShell.tsx (100%)
 rename src/{app/_components => components}/Sidebar.tsx (100%)

diff --git a/src/app/_components/AppShell.module.css b/src/components/AppShell.module.css
similarity index 100%
rename from src/app/_components/AppShell.module.css
rename to src/components/AppShell.module.css
diff --git a/src/app/_components/AppShell.tsx b/src/components/AppShell.tsx
similarity index 100%
rename from src/app/_components/AppShell.tsx
rename to src/components/AppShell.tsx
diff --git a/src/app/_components/Sidebar.tsx b/src/components/Sidebar.tsx
similarity index 100%
rename from src/app/_components/Sidebar.tsx
rename to src/components/Sidebar.tsx

From 6226c6b44dd2ad55d31d330169f1a629b88d74e8 Mon Sep 17 00:00:00 2001
From: Meiryo7743 <46659204+Meiryo7743@users.noreply.github.com>
Date: Sun, 30 Mar 2025 19:31:17 +0900
Subject: [PATCH 15/30] fix: wrap AppShell

---
 src/app/channels/[channel_id]/page.tsx | 17 ++++++++++-------
 src/app/channels/page.tsx              | 21 ++++++++++++---------
 src/app/lab/page.tsx                   | 21 ++++++++++++---------
 src/app/page.tsx                       |  8 +++++++-
 4 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/src/app/channels/[channel_id]/page.tsx b/src/app/channels/[channel_id]/page.tsx
index b9ce2a8..ead11a0 100644
--- a/src/app/channels/[channel_id]/page.tsx
+++ b/src/app/channels/[channel_id]/page.tsx
@@ -4,6 +4,7 @@ import styles from "./ChannelIDPage.module.css";
 import ChannelFooter from "./_components/ChannelFooter/ChannelFooter";
 import ChannelHeader from "./_components/ChannelHeader/ChannelHeader";
 
+import AppShell from "#/components/AppShell";
 import Message from "#/components/Message";
 import { prisma } from "#/libs/prisma";
 
@@ -28,13 +29,15 @@ async function ChannelIDPage({ params }: ChannelIDPageProps) {
   });
 
   return (
-    <Stack className={styles["root"]} justify="space-between">
-      <ChannelHeader channelName={channel?.name || ""} />
-      {messages.map((message) => (
-        <Message key={message.id} message={message} user={message.user} />
-      ))}
-      <ChannelFooter user_id="test" is_joined={false} />
-    </Stack>
+    <AppShell>
+      <Stack className={styles["root"]} justify="space-between">
+        <ChannelHeader channelName={channel?.name || ""} />
+        {messages.map((message) => (
+          <Message key={message.id} message={message} user={message.user} />
+        ))}
+        <ChannelFooter user_id="test" is_joined={false} />
+      </Stack>
+    </AppShell>
   );
 }
 
diff --git a/src/app/channels/page.tsx b/src/app/channels/page.tsx
index bbc1357..63f8789 100644
--- a/src/app/channels/page.tsx
+++ b/src/app/channels/page.tsx
@@ -2,21 +2,24 @@ import Link from "next/link";
 
 import { Anchor, List, ListItem } from "@mantine/core";
 
+import AppShell from "#/components/AppShell";
 import { prisma } from "#/libs/prisma";
 
 async function ChannelsPage() {
   const channels = await prisma.channel.findMany();
 
   return (
-    <List type="unordered">
-      {channels.map((channel) => (
-        <ListItem key={channel.id}>
-          <Anchor component={Link} href={`/channels/${channel.id}`}>
-            {channel.name}
-          </Anchor>
-        </ListItem>
-      ))}
-    </List>
+    <AppShell>
+      <List type="unordered">
+        {channels.map((channel) => (
+          <ListItem key={channel.id}>
+            <Anchor component={Link} href={`/channels/${channel.id}`}>
+              {channel.name}
+            </Anchor>
+          </ListItem>
+        ))}
+      </List>
+    </AppShell>
   );
 }
 
diff --git a/src/app/lab/page.tsx b/src/app/lab/page.tsx
index 3781df4..26499ad 100644
--- a/src/app/lab/page.tsx
+++ b/src/app/lab/page.tsx
@@ -1,18 +1,21 @@
 import { Stack, Title } from "@mantine/core";
 
+import AppShell from "#/components/AppShell";
 import LinkCard from "#/components/LinkCard";
 
 async function LabPage() {
   return (
-    <div>
-      <Title order={2}>コンポーネントのプレビュー用</Title>
-      <Stack gap="md">
-        <LinkCard href="https://github.com/SIT-DigiCre/digichat" />
-        <LinkCard href="https://x.com/sitdigicre" />
-        <LinkCard href="https://x.com/sitdigicre/status/1874380689183052086" />
-        <LinkCard href="a" />
-      </Stack>
-    </div>
+    <AppShell>
+      <div>
+        <Title order={2}>コンポーネントのプレビュー用</Title>
+        <Stack gap="md">
+          <LinkCard href="https://github.com/SIT-DigiCre/digichat" />
+          <LinkCard href="https://x.com/sitdigicre" />
+          <LinkCard href="https://x.com/sitdigicre/status/1874380689183052086" />
+          <LinkCard href="a" />
+        </Stack>
+      </div>
+    </AppShell>
   );
 }
 
diff --git a/src/app/page.tsx b/src/app/page.tsx
index fd82dd0..1e37e0f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,11 @@
+import AppShell from "#/components/AppShell";
+
 async function HomePage() {
-  return <div>digichat</div>;
+  return (
+    <AppShell>
+      <div>digichat</div>
+    </AppShell>
+  );
 }
 
 export default HomePage;

From c79d38065239dde2893377966cb3768f26ca2774 Mon Sep 17 00:00:00 2001
From: saka-naname <reisuicupsoup@gmail.com>
Date: Sun, 25 May 2025 11:14:44 +0000
Subject: [PATCH 16/30] Revert "fix: wrap AppShell"

This reverts commit 6226c6b44dd2ad55d31d330169f1a629b88d74e8.
---
 src/app/channels/[channel_id]/page.tsx | 17 +++++++----------
 src/app/channels/page.tsx              | 21 +++++++++------------
 src/app/lab/page.tsx                   | 21 +++++++++------------
 src/app/page.tsx                       |  8 +-------
 4 files changed, 26 insertions(+), 41 deletions(-)

diff --git a/src/app/channels/[channel_id]/page.tsx b/src/app/channels/[channel_id]/page.tsx
index ead11a0..b9ce2a8 100644
--- a/src/app/channels/[channel_id]/page.tsx
+++ b/src/app/channels/[channel_id]/page.tsx
@@ -4,7 +4,6 @@ import styles from "./ChannelIDPage.module.css";
 import ChannelFooter from "./_components/ChannelFooter/ChannelFooter";
 import ChannelHeader from "./_components/ChannelHeader/ChannelHeader";
 
-import AppShell from "#/components/AppShell";
 import Message from "#/components/Message";
 import { prisma } from "#/libs/prisma";
 
@@ -29,15 +28,13 @@ async function ChannelIDPage({ params }: ChannelIDPageProps) {
   });
 
   return (
-    <AppShell>
-      <Stack className={styles["root"]} justify="space-between">
-        <ChannelHeader channelName={channel?.name || ""} />
-        {messages.map((message) => (
-          <Message key={message.id} message={message} user={message.user} />
-        ))}
-        <ChannelFooter user_id="test" is_joined={false} />
-      </Stack>
-    </AppShell>
+    <Stack className={styles["root"]} justify="space-between">
+      <ChannelHeader channelName={channel?.name || ""} />
+      {messages.map((message) => (
+        <Message key={message.id} message={message} user={message.user} />
+      ))}
+      <ChannelFooter user_id="test" is_joined={false} />
+    </Stack>
   );
 }
 
diff --git a/src/app/channels/page.tsx b/src/app/channels/page.tsx
index 63f8789..bbc1357 100644
--- a/src/app/channels/page.tsx
+++ b/src/app/channels/page.tsx
@@ -2,24 +2,21 @@ import Link from "next/link";
 
 import { Anchor, List, ListItem } from "@mantine/core";
 
-import AppShell from "#/components/AppShell";
 import { prisma } from "#/libs/prisma";
 
 async function ChannelsPage() {
   const channels = await prisma.channel.findMany();
 
   return (
-    <AppShell>
-      <List type="unordered">
-        {channels.map((channel) => (
-          <ListItem key={channel.id}>
-            <Anchor component={Link} href={`/channels/${channel.id}`}>
-              {channel.name}
-            </Anchor>
-          </ListItem>
-        ))}
-      </List>
-    </AppShell>
+    <List type="unordered">
+      {channels.map((channel) => (
+        <ListItem key={channel.id}>
+          <Anchor component={Link} href={`/channels/${channel.id}`}>
+            {channel.name}
+          </Anchor>
+        </ListItem>
+      ))}
+    </List>
   );
 }
 
diff --git a/src/app/lab/page.tsx b/src/app/lab/page.tsx
index 26499ad..3781df4 100644
--- a/src/app/lab/page.tsx
+++ b/src/app/lab/page.tsx
@@ -1,21 +1,18 @@
 import { Stack, Title } from "@mantine/core";
 
-import AppShell from "#/components/AppShell";
 import LinkCard from "#/components/LinkCard";
 
 async function LabPage() {
   return (
-    <AppShell>
-      <div>
-        <Title order={2}>コンポーネントのプレビュー用</Title>
-        <Stack gap="md">
-          <LinkCard href="https://github.com/SIT-DigiCre/digichat" />
-          <LinkCard href="https://x.com/sitdigicre" />
-          <LinkCard href="https://x.com/sitdigicre/status/1874380689183052086" />
-          <LinkCard href="a" />
-        </Stack>
-      </div>
-    </AppShell>
+    <div>
+      <Title order={2}>コンポーネントのプレビュー用</Title>
+      <Stack gap="md">
+        <LinkCard href="https://github.com/SIT-DigiCre/digichat" />
+        <LinkCard href="https://x.com/sitdigicre" />
+        <LinkCard href="https://x.com/sitdigicre/status/1874380689183052086" />
+        <LinkCard href="a" />
+      </Stack>
+    </div>
   );
 }
 
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1e37e0f..fd82dd0 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,11 +1,5 @@
-import AppShell from "#/components/AppShell";
-
 async function HomePage() {
-  return (
-    <AppShell>
-      <div>digichat</div>
-    </AppShell>
-  );
+  return <div>digichat</div>;
 }
 
 export default HomePage;

From eb366a7ce075a4af1d17280d55de712a3ca71d06 Mon Sep 17 00:00:00 2001
From: saka-naname <reisuicupsoup@gmail.com>
Date: Sun, 25 May 2025 11:17:16 +0000
Subject: [PATCH 17/30] Revert "fix: move AppShell as a global component"

This reverts commit 0537bad0ca49e1de863af61f68e33b44675efd85.
---
 src/{components => app/_components}/AppShell.module.css | 0
 src/{components => app/_components}/AppShell.tsx        | 0
 src/{components => app/_components}/Sidebar.tsx         | 0
 3 files changed, 0 insertions(+), 0 deletions(-)
 rename src/{components => app/_components}/AppShell.module.css (100%)
 rename src/{components => app/_components}/AppShell.tsx (100%)
 rename src/{components => app/_components}/Sidebar.tsx (100%)

diff --git a/src/components/AppShell.module.css b/src/app/_components/AppShell.module.css
similarity index 100%
rename from src/components/AppShell.module.css
rename to src/app/_components/AppShell.module.css
diff --git a/src/components/AppShell.tsx b/src/app/_components/AppShell.tsx
similarity index 100%
rename from src/components/AppShell.tsx
rename to src/app/_components/AppShell.tsx
diff --git a/src/components/Sidebar.tsx b/src/app/_components/Sidebar.tsx
similarity index 100%
rename from src/components/Sidebar.tsx
rename to src/app/_components/Sidebar.tsx

From d7fd1bed13f086c0e5c5c476c1b04d7d776052d6 Mon Sep 17 00:00:00 2001
From: saka-naname <reisuicupsoup@gmail.com>
Date: Sun, 25 May 2025 11:17:33 +0000
Subject: [PATCH 18/30] Revert "fix: modify"

This reverts commit 6e8181db0b1452c01acfd79a7406af8fd014e6f4.
---
 src/app/template.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/template.tsx b/src/app/template.tsx
index 2a09044..1628285 100644
--- a/src/app/template.tsx
+++ b/src/app/template.tsx
@@ -6,6 +6,7 @@ import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 
 import "@mantine/core/styles.css";
+import AppShell from "./_components/AppShell";
 import "./globals.css";
 
 dayjs.extend(utc);
@@ -24,7 +25,9 @@ export default function RootLayout({ children }: RootRayoutProps) {
   return (
     <html lang="en">
       <body>
-        <MantineProvider>{children}</MantineProvider>
+        <MantineProvider>
+          <AppShell>{children}</AppShell>
+        </MantineProvider>
       </body>
     </html>
   );

From 6f22186c463eb103afb2f93c8a8b7d4cda83197e Mon Sep 17 00:00:00 2001
From: saka-naname <reisuicupsoup@gmail.com>
Date: Sun, 25 May 2025 11:17:48 +0000
Subject: [PATCH 19/30] Revert "chore: renamed"

This reverts commit 6767588a069906e7ee05ac042b6489ad8e04a8d4.
---
 src/app/{template.tsx => layout.tsx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/app/{template.tsx => layout.tsx} (100%)

diff --git a/src/app/template.tsx b/src/app/layout.tsx
similarity index 100%
rename from src/app/template.tsx
rename to src/app/layout.tsx

From ece91ab2f58ba8fced117fab3ef0d9ff3a157fde Mon Sep 17 00:00:00 2001
From: saka-naname <reisuicupsoup@gmail.com>
Date: Sun, 25 May 2025 12:56:20 +0000
Subject: [PATCH 20/30] =?UTF-8?q?fix:=20=E4=B8=80=E6=97=A6ChannelHeader?=
 =?UTF-8?q?=E3=81=A0=E3=81=91=E3=81=AB=E3=82=BF=E3=82=A4=E3=83=88=E3=83=AB?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=AE=E6=A9=9F=E8=83=BD=E3=82=92=E6=8C=81?=
 =?UTF-8?q?=E3=81=9F=E3=81=9B=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/_components/AppShell.tsx              | 24 ++-----------------
 .../[channel_id]/ChannelIDPage.module.css     |  2 +-
 .../ChannelHeader/ChannelHeader.module.css    |  8 +++++++
 .../ChannelHeader/ChannelHeader.tsx           | 22 +++++++----------
 src/app/channels/[channel_id]/page.tsx        |  6 ++++-
 5 files changed, 25 insertions(+), 37 deletions(-)
 create mode 100644 src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.module.css

diff --git a/src/app/_components/AppShell.tsx b/src/app/_components/AppShell.tsx
index fca4185..4563eae 100644
--- a/src/app/_components/AppShell.tsx
+++ b/src/app/_components/AppShell.tsx
@@ -1,14 +1,9 @@
 "use client";
 
-import { usePathname } from "next/navigation";
 import React from "react";
 
-import { Box, Burger, Group, AppShell as MantineAppShell } from "@mantine/core";
-import {
-  readLocalStorageValue,
-  useDisclosure,
-  useDocumentTitle,
-} from "@mantine/hooks";
+import { Burger, Group, AppShell as MantineAppShell } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
 
 import styles from "./AppShell.module.css";
 import Sidebar from "./Sidebar";
@@ -20,20 +15,6 @@ type AppShellProps = {
 const AppShell: React.FC<AppShellProps> = ({ children }) => {
   const [opened, { toggle }] = useDisclosure();
 
-  /**
-   * channelName を取得し，タイトルに表示する
-   *
-   * @see {@link src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx}
-   */
-  const subtitle = readLocalStorageValue({
-    key: usePathname(),
-    defaultValue: "",
-  });
-  const title = subtitle !== "" ? `${subtitle} | Digichat` : "Digichat";
-
-  // ページタイトルを更新する
-  useDocumentTitle(title);
-
   return (
     <MantineAppShell
       layout="alt"
@@ -49,7 +30,6 @@ const AppShell: React.FC<AppShellProps> = ({ children }) => {
       <MantineAppShell.Header>
         <Group h="100%" px="md">
           <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
-          <Box>{subtitle}</Box>
         </Group>
       </MantineAppShell.Header>
       <Sidebar />
diff --git a/src/app/channels/[channel_id]/ChannelIDPage.module.css b/src/app/channels/[channel_id]/ChannelIDPage.module.css
index 82fc59f..e38fadd 100644
--- a/src/app/channels/[channel_id]/ChannelIDPage.module.css
+++ b/src/app/channels/[channel_id]/ChannelIDPage.module.css
@@ -1,4 +1,4 @@
 .root {
+  position: relative;
   min-height: 100vh;
-  padding-top: 3rem;
 }
diff --git a/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.module.css b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.module.css
new file mode 100644
index 0000000..3073b78
--- /dev/null
+++ b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.module.css
@@ -0,0 +1,8 @@
+.root {
+  position: absolute;
+  top: 3rem;
+  width: 100%;
+  height: 3rem;
+  padding-inline: 1rem;
+  border-bottom: 1px solid var(--mantine-color-gray-3);
+}
diff --git a/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
index 33ef55f..b89cec2 100644
--- a/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
+++ b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
@@ -1,26 +1,22 @@
 "use client";
 
-import { usePathname } from "next/navigation";
+import { Group } from "@mantine/core";
+import { useDocumentTitle } from "@mantine/hooks";
 
-import { useLocalStorage } from "@mantine/hooks";
+import styles from "./ChannelHeader.module.css";
 
 type ChannelHeaderProps = {
   channelName: string;
 };
 
-/**
- * AppShell の header の title を channelName に書き換える
- *
- * @see {@link src/app/_components/AppShell.tsx}
- */
 const ChannelHeader: React.FC<ChannelHeaderProps> = ({ channelName }) => {
-  useLocalStorage({
-    key: usePathname(),
-    defaultValue: channelName,
-  });
+  useDocumentTitle(`${channelName} | Digichat`);
 
-  // channelName に書き換える処理だけを実行したいので，空の JSX を返す
-  return <></>;
+  return (
+    <Group className={styles["root"]} visibleFrom="sm">
+      {channelName}
+    </Group>
+  );
 };
 
 export default ChannelHeader;
diff --git a/src/app/channels/[channel_id]/page.tsx b/src/app/channels/[channel_id]/page.tsx
index b9ce2a8..730e8f6 100644
--- a/src/app/channels/[channel_id]/page.tsx
+++ b/src/app/channels/[channel_id]/page.tsx
@@ -28,7 +28,11 @@ async function ChannelIDPage({ params }: ChannelIDPageProps) {
   });
 
   return (
-    <Stack className={styles["root"]} justify="space-between">
+    <Stack
+      className={styles["root"]}
+      justify="space-between"
+      pt={{ base: "3rem", sm: "6rem" }}
+    >
       <ChannelHeader channelName={channel?.name || ""} />
       {messages.map((message) => (
         <Message key={message.id} message={message} user={message.user} />

From fedf36e6d2607f6e91cc8109c100bbd81cf677eb Mon Sep 17 00:00:00 2001
From: saka-naname <reisuicupsoup@gmail.com>
Date: Sun, 8 Jun 2025 11:36:12 +0000
Subject: [PATCH 21/30] =?UTF-8?q?feat:=20=E7=8F=BE=E5=9C=A8=E3=81=AE?=
 =?UTF-8?q?=E3=83=81=E3=83=A3=E3=83=B3=E3=83=8D=E3=83=AB=E3=82=92Context?=
 =?UTF-8?q?=E3=81=A7=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/_components/AppShell.tsx              |  2 ++
 src/app/_components/MobileChannelDisplay.tsx  | 13 ++++++++
 .../_components/CurrentChannelController.tsx  | 26 ++++++++++++++++
 src/app/channels/[channel_id]/page.tsx        | 26 +++++++++-------
 src/app/layout.tsx                            |  5 ++-
 src/contexts/CurrentChannelContext.tsx        | 31 +++++++++++++++++++
 src/hooks/useCurrentChannel.ts                | 19 ++++++++++++
 7 files changed, 110 insertions(+), 12 deletions(-)
 create mode 100644 src/app/_components/MobileChannelDisplay.tsx
 create mode 100644 src/app/channels/[channel_id]/_components/CurrentChannelController.tsx
 create mode 100644 src/contexts/CurrentChannelContext.tsx
 create mode 100644 src/hooks/useCurrentChannel.ts

diff --git a/src/app/_components/AppShell.tsx b/src/app/_components/AppShell.tsx
index 4563eae..d15c758 100644
--- a/src/app/_components/AppShell.tsx
+++ b/src/app/_components/AppShell.tsx
@@ -6,6 +6,7 @@ import { Burger, Group, AppShell as MantineAppShell } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 
 import styles from "./AppShell.module.css";
+import MobileChannelDisplay from "./MobileChannelDisplay";
 import Sidebar from "./Sidebar";
 
 type AppShellProps = {
@@ -30,6 +31,7 @@ const AppShell: React.FC<AppShellProps> = ({ children }) => {
       <MantineAppShell.Header>
         <Group h="100%" px="md">
           <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
+          <MobileChannelDisplay />
         </Group>
       </MantineAppShell.Header>
       <Sidebar />
diff --git a/src/app/_components/MobileChannelDisplay.tsx b/src/app/_components/MobileChannelDisplay.tsx
new file mode 100644
index 0000000..8eb5696
--- /dev/null
+++ b/src/app/_components/MobileChannelDisplay.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { useCurrentChannel } from "#/hooks/useCurrentChannel";
+import { Text } from "@mantine/core";
+
+/**
+ * 余計な再描画を防ぐため、チャンネル名を参照する部分を AppShell から分離
+ */
+export default function () {
+  const { currentChannel } = useCurrentChannel();
+
+  return <Text hiddenFrom="sm">{currentChannel && currentChannel.slug}</Text>;
+}
diff --git a/src/app/channels/[channel_id]/_components/CurrentChannelController.tsx b/src/app/channels/[channel_id]/_components/CurrentChannelController.tsx
new file mode 100644
index 0000000..9ec9d5f
--- /dev/null
+++ b/src/app/channels/[channel_id]/_components/CurrentChannelController.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { useCurrentChannel } from "#/hooks/useCurrentChannel";
+import { Channel } from "@prisma/client";
+import { useEffect } from "react";
+
+export default function CurrentChannelController({
+  channel,
+}: {
+  channel: Channel | null;
+}) {
+  const { setCurrentChannel } = useCurrentChannel();
+
+  /**
+   * チャンネルのページを開いている間、コンテキストにチャンネルの情報を保存する
+   */
+  useEffect(() => {
+    setCurrentChannel(channel);
+
+    return () => {
+      setCurrentChannel(null);
+    };
+  }, [channel]);
+
+  return null;
+}
diff --git a/src/app/channels/[channel_id]/page.tsx b/src/app/channels/[channel_id]/page.tsx
index 730e8f6..e89e3dc 100644
--- a/src/app/channels/[channel_id]/page.tsx
+++ b/src/app/channels/[channel_id]/page.tsx
@@ -6,6 +6,7 @@ import ChannelHeader from "./_components/ChannelHeader/ChannelHeader";
 
 import Message from "#/components/Message";
 import { prisma } from "#/libs/prisma";
+import CurrentChannelController from "./_components/CurrentChannelController";
 
 type ChannelIDPageProps = {
   params: Promise<{ channel_id: string }>;
@@ -28,17 +29,20 @@ async function ChannelIDPage({ params }: ChannelIDPageProps) {
   });
 
   return (
-    <Stack
-      className={styles["root"]}
-      justify="space-between"
-      pt={{ base: "3rem", sm: "6rem" }}
-    >
-      <ChannelHeader channelName={channel?.name || ""} />
-      {messages.map((message) => (
-        <Message key={message.id} message={message} user={message.user} />
-      ))}
-      <ChannelFooter user_id="test" is_joined={false} />
-    </Stack>
+    <>
+      <Stack
+        className={styles["root"]}
+        justify="space-between"
+        pt={{ base: "3rem", sm: "6rem" }}
+      >
+        <ChannelHeader channelName={channel?.name || ""} />
+        {messages.map((message) => (
+          <Message key={message.id} message={message} user={message.user} />
+        ))}
+        <ChannelFooter user_id="test" is_joined={false} />
+      </Stack>
+      <CurrentChannelController channel={channel} />
+    </>
   );
 }
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1628285..3324c54 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import dayjs from "dayjs";
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 
+import { CurrentChannelProvider } from "#/contexts/CurrentChannelContext";
 import "@mantine/core/styles.css";
 import AppShell from "./_components/AppShell";
 import "./globals.css";
@@ -26,7 +27,9 @@ export default function RootLayout({ children }: RootRayoutProps) {
     <html lang="en">
       <body>
         <MantineProvider>
-          <AppShell>{children}</AppShell>
+          <CurrentChannelProvider>
+            <AppShell>{children}</AppShell>
+          </CurrentChannelProvider>
         </MantineProvider>
       </body>
     </html>
diff --git a/src/contexts/CurrentChannelContext.tsx b/src/contexts/CurrentChannelContext.tsx
new file mode 100644
index 0000000..63e2ab0
--- /dev/null
+++ b/src/contexts/CurrentChannelContext.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { Channel } from "@prisma/client";
+import { createContext, SetStateAction, useState } from "react";
+
+export type CurrentChannelContextType = {
+  currentChannel: Channel | null;
+  setCurrentChannel: React.Dispatch<SetStateAction<Channel | null>>;
+};
+
+export const CurrentChannelContext =
+  createContext<CurrentChannelContextType | null>(null);
+
+export function CurrentChannelProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [currentChannel, setCurrentChannel] = useState<Channel | null>(null);
+
+  return (
+    <CurrentChannelContext.Provider
+      value={{
+        currentChannel,
+        setCurrentChannel,
+      }}
+    >
+      {children}
+    </CurrentChannelContext.Provider>
+  );
+}
diff --git a/src/hooks/useCurrentChannel.ts b/src/hooks/useCurrentChannel.ts
new file mode 100644
index 0000000..bee5335
--- /dev/null
+++ b/src/hooks/useCurrentChannel.ts
@@ -0,0 +1,19 @@
+"use client";
+
+import { CurrentChannelContext } from "#/contexts/CurrentChannelContext";
+import { useContext } from "react";
+
+/**
+ * 現在開いているチャンネルの情報を利用する
+ * @returns getter 及び setter
+ */
+export function useCurrentChannel() {
+  const context = useContext(CurrentChannelContext);
+
+  if (!context)
+    throw new Error(
+      "useCurrentChannel must be used within a <CurrentChannelProvider>"
+    );
+
+  return context;
+}

From 734a202cd5bd02376797e0f5619a3f3301775585 Mon Sep 17 00:00:00 2001
From: saka-naname <reisuicupsoup@gmail.com>
Date: Sun, 8 Jun 2025 11:40:50 +0000
Subject: [PATCH 22/30] =?UTF-8?q?feat:=20=E3=83=89=E3=82=AD=E3=83=A5?=
 =?UTF-8?q?=E3=83=A1=E3=83=B3=E3=83=88=E3=82=BF=E3=82=A4=E3=83=88=E3=83=AB?=
 =?UTF-8?q?=E3=81=AE=E5=A4=89=E6=9B=B4=E6=A9=9F=E8=83=BD=E3=82=92CurrentCh?=
 =?UTF-8?q?annelController=E3=81=AB=E7=A7=BB=E5=8B=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[channel_id]/_components/ChannelHeader/ChannelHeader.tsx   | 3 ---
 .../[channel_id]/_components/CurrentChannelController.tsx      | 3 +++
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
index b89cec2..7cddb04 100644
--- a/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
+++ b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { Group } from "@mantine/core";
-import { useDocumentTitle } from "@mantine/hooks";
 
 import styles from "./ChannelHeader.module.css";
 
@@ -10,8 +9,6 @@ type ChannelHeaderProps = {
 };
 
 const ChannelHeader: React.FC<ChannelHeaderProps> = ({ channelName }) => {
-  useDocumentTitle(`${channelName} | Digichat`);
-
   return (
     <Group className={styles["root"]} visibleFrom="sm">
       {channelName}
diff --git a/src/app/channels/[channel_id]/_components/CurrentChannelController.tsx b/src/app/channels/[channel_id]/_components/CurrentChannelController.tsx
index 9ec9d5f..8a1b54e 100644
--- a/src/app/channels/[channel_id]/_components/CurrentChannelController.tsx
+++ b/src/app/channels/[channel_id]/_components/CurrentChannelController.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useCurrentChannel } from "#/hooks/useCurrentChannel";
+import { useDocumentTitle } from "@mantine/hooks";
 import { Channel } from "@prisma/client";
 import { useEffect } from "react";
 
@@ -11,6 +12,8 @@ export default function CurrentChannelController({
 }) {
   const { setCurrentChannel } = useCurrentChannel();
 
+  useDocumentTitle(channel ? `${channel.slug} | Digichat` : "Digichat");
+
   /**
    * チャンネルのページを開いている間、コンテキストにチャンネルの情報を保存する
    */

From ab76c1f2419b41dfe51da153274028da46f09c8c Mon Sep 17 00:00:00 2001
From: saka-naname <reisuicupsoup@gmail.com>
Date: Sun, 8 Jun 2025 11:55:49 +0000
Subject: [PATCH 23/30] =?UTF-8?q?fix:=20=E7=A7=BB=E6=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/channels/[channel_id]/page.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/app/channels/[channel_id]/page.tsx b/src/app/channels/[channel_id]/page.tsx
index 8586844..a82ae6a 100644
--- a/src/app/channels/[channel_id]/page.tsx
+++ b/src/app/channels/[channel_id]/page.tsx
@@ -2,8 +2,10 @@ import { redirect } from "next/navigation";
 
 import Channel from "./_components/Channel/Channel";
 
+import { useCurrentChannel } from "#/hooks/useCurrentChannel";
 import { auth } from "#/libs/auth";
 import { prisma } from "#/libs/prisma";
+import CurrentChannelController from "./_components/CurrentChannelController";
 
 type ChannelIDPageProps = {
   params: Promise<{ channel_id: string }>;
@@ -11,6 +13,7 @@ type ChannelIDPageProps = {
 
 async function ChannelIDPage({ params }: ChannelIDPageProps) {
   const session = await auth();
+  const { setCurrentChannel } = useCurrentChannel();
   const { channel_id } = await params;
   const channel = await prisma.channel.findUnique({
     where: {
@@ -41,7 +44,10 @@ async function ChannelIDPage({ params }: ChannelIDPageProps) {
   const user_id = session.user.id;
 
   return (
-    <Channel channel_id={channel_id} messages={messages} user_id={user_id} />
+    <>
+      <CurrentChannelController channel={channel} />
+      <Channel channel_id={channel_id} messages={messages} user_id={user_id} />
+    </>
   );
 }
 

From f65a5b65fe2c697105e8407bd6e8fabf570f6654 Mon Sep 17 00:00:00 2001
From: saka-naname <reisuicupsoup@gmail.com>
Date: Sun, 8 Jun 2025 11:56:26 +0000
Subject: [PATCH 24/30] =?UTF-8?q?fix:=20=E8=AA=A4=E3=81=A3=E3=81=A6?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0=E3=81=97=E3=81=9F=E5=8F=82=E7=85=A7=E3=82=92?=
 =?UTF-8?q?=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/channels/[channel_id]/page.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/channels/[channel_id]/page.tsx b/src/app/channels/[channel_id]/page.tsx
index a82ae6a..71f3b9f 100644
--- a/src/app/channels/[channel_id]/page.tsx
+++ b/src/app/channels/[channel_id]/page.tsx
@@ -2,7 +2,6 @@ import { redirect } from "next/navigation";
 
 import Channel from "./_components/Channel/Channel";
 
-import { useCurrentChannel } from "#/hooks/useCurrentChannel";
 import { auth } from "#/libs/auth";
 import { prisma } from "#/libs/prisma";
 import CurrentChannelController from "./_components/CurrentChannelController";
@@ -13,7 +12,6 @@ type ChannelIDPageProps = {
 
 async function ChannelIDPage({ params }: ChannelIDPageProps) {
   const session = await auth();
-  const { setCurrentChannel } = useCurrentChannel();
   const { channel_id } = await params;
   const channel = await prisma.channel.findUnique({
     where: {

From cc408fc7c0c91833cdcaafc58af49c0a25777655 Mon Sep 17 00:00:00 2001
From: saka-naname <reisuicupsoup@gmail.com>
Date: Wed, 11 Jun 2025 09:18:30 +0000
Subject: [PATCH 25/30] =?UTF-8?q?feat:=20=E3=82=BF=E3=82=A4=E3=83=88?=
 =?UTF-8?q?=E3=83=AB=E3=81=AE=E8=A8=AD=E5=AE=9A=E3=82=92generateMetadata?=
 =?UTF-8?q?=E3=81=AB=E7=A7=BB=E7=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

useDocumentTitleではページ読み込み時にタイトルが更新されない場合があったので
---
 .../_components/CurrentChannelController.tsx  | 11 ++++-----
 src/app/channels/[channel_id]/page.tsx        | 23 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/app/channels/[channel_id]/_components/CurrentChannelController.tsx b/src/app/channels/[channel_id]/_components/CurrentChannelController.tsx
index 8a1b54e..961704c 100644
--- a/src/app/channels/[channel_id]/_components/CurrentChannelController.tsx
+++ b/src/app/channels/[channel_id]/_components/CurrentChannelController.tsx
@@ -1,10 +1,11 @@
 "use client";
 
-import { useCurrentChannel } from "#/hooks/useCurrentChannel";
-import { useDocumentTitle } from "@mantine/hooks";
-import { Channel } from "@prisma/client";
 import { useEffect } from "react";
 
+import { Channel } from "@prisma/client";
+
+import { useCurrentChannel } from "#/hooks/useCurrentChannel";
+
 export default function CurrentChannelController({
   channel,
 }: {
@@ -12,8 +13,6 @@ export default function CurrentChannelController({
 }) {
   const { setCurrentChannel } = useCurrentChannel();
 
-  useDocumentTitle(channel ? `${channel.slug} | Digichat` : "Digichat");
-
   /**
    * チャンネルのページを開いている間、コンテキストにチャンネルの情報を保存する
    */
@@ -23,7 +22,7 @@ export default function CurrentChannelController({
     return () => {
       setCurrentChannel(null);
     };
-  }, [channel]);
+  }, [channel, setCurrentChannel]);
 
   return null;
 }
diff --git a/src/app/channels/[channel_id]/page.tsx b/src/app/channels/[channel_id]/page.tsx
index 71f3b9f..105bcbf 100644
--- a/src/app/channels/[channel_id]/page.tsx
+++ b/src/app/channels/[channel_id]/page.tsx
@@ -1,15 +1,36 @@
+import { Metadata } from "next";
 import { redirect } from "next/navigation";
 
 import Channel from "./_components/Channel/Channel";
+import CurrentChannelController from "./_components/CurrentChannelController";
 
 import { auth } from "#/libs/auth";
 import { prisma } from "#/libs/prisma";
-import CurrentChannelController from "./_components/CurrentChannelController";
 
 type ChannelIDPageProps = {
   params: Promise<{ channel_id: string }>;
 };
 
+export async function generateMetadata({
+  params,
+}: ChannelIDPageProps): Promise<Metadata> {
+  const { channel_id } = await params;
+  const channel = await prisma.channel.findUnique({
+    where: {
+      id: channel_id,
+    },
+    include: {
+      members: true,
+    },
+  });
+
+  if (!channel) return {};
+
+  return {
+    title: `${channel.slug} | Digichat`,
+  };
+}
+
 async function ChannelIDPage({ params }: ChannelIDPageProps) {
   const session = await auth();
   const { channel_id } = await params;

From 28be38da3c22076df6aca76da5fb93f540eadb76 Mon Sep 17 00:00:00 2001
From: saka-naname <reisuicupsoup@gmail.com>
Date: Wed, 11 Jun 2025 09:23:43 +0000
Subject: [PATCH 26/30] chore: lint

---
 src/app/_components/MobileChannelDisplay.tsx | 5 +++--
 src/app/layout.tsx                           | 3 ++-
 src/contexts/CurrentChannelContext.tsx       | 3 ++-
 src/hooks/useCurrentChannel.ts               | 3 ++-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/app/_components/MobileChannelDisplay.tsx b/src/app/_components/MobileChannelDisplay.tsx
index 8eb5696..9360981 100644
--- a/src/app/_components/MobileChannelDisplay.tsx
+++ b/src/app/_components/MobileChannelDisplay.tsx
@@ -1,12 +1,13 @@
 "use client";
 
-import { useCurrentChannel } from "#/hooks/useCurrentChannel";
 import { Text } from "@mantine/core";
 
+import { useCurrentChannel } from "#/hooks/useCurrentChannel";
+
 /**
  * 余計な再描画を防ぐため、チャンネル名を参照する部分を AppShell から分離
  */
-export default function () {
+export default function MobileChannelDisplay() {
   const { currentChannel } = useCurrentChannel();
 
   return <Text hiddenFrom="sm">{currentChannel && currentChannel.slug}</Text>;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0786b88..73b447f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,11 +6,12 @@ import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 import { SessionProvider } from "next-auth/react";
 
-import { CurrentChannelProvider } from "#/contexts/CurrentChannelContext";
 import "@mantine/code-highlight/styles.css";
 import "@mantine/core/styles.css";
 import AppShell from "./_components/AppShell";
 import ChannelsAccordionProvider from "./_components/ChannelsAccordionProvider";
+
+import { CurrentChannelProvider } from "#/contexts/CurrentChannelContext";
 import "./globals.css";
 
 dayjs.extend(utc);
diff --git a/src/contexts/CurrentChannelContext.tsx b/src/contexts/CurrentChannelContext.tsx
index 63e2ab0..f5dc13c 100644
--- a/src/contexts/CurrentChannelContext.tsx
+++ b/src/contexts/CurrentChannelContext.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { Channel } from "@prisma/client";
 import { createContext, SetStateAction, useState } from "react";
 
+import { Channel } from "@prisma/client";
+
 export type CurrentChannelContextType = {
   currentChannel: Channel | null;
   setCurrentChannel: React.Dispatch<SetStateAction<Channel | null>>;
diff --git a/src/hooks/useCurrentChannel.ts b/src/hooks/useCurrentChannel.ts
index bee5335..4384815 100644
--- a/src/hooks/useCurrentChannel.ts
+++ b/src/hooks/useCurrentChannel.ts
@@ -1,8 +1,9 @@
 "use client";
 
-import { CurrentChannelContext } from "#/contexts/CurrentChannelContext";
 import { useContext } from "react";
 
+import { CurrentChannelContext } from "#/contexts/CurrentChannelContext";
+
 /**
  * 現在開いているチャンネルの情報を利用する
  * @returns getter 及び setter

From 65050ac6fe6a2e616ca5f931cd4ec4e2ffca87e5 Mon Sep 17 00:00:00 2001
From: saka-naname <reisuicupsoup@gmail.com>
Date: Wed, 11 Jun 2025 10:57:17 +0000
Subject: [PATCH 27/30] =?UTF-8?q?feat:=20=E3=83=81=E3=83=A3=E3=83=B3?=
 =?UTF-8?q?=E3=83=8D=E3=83=AB=E3=83=98=E3=83=83=E3=83=80=E3=83=BC=E3=81=AE?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[channel_id]/_components/Channel/Channel.tsx       |  2 ++
 .../_components/ChannelHeader/ChannelHeader.module.css |  4 +++-
 .../_components/ChannelHeader/ChannelHeader.tsx        | 10 +++++-----
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/app/channels/[channel_id]/_components/Channel/Channel.tsx b/src/app/channels/[channel_id]/_components/Channel/Channel.tsx
index 52b45aa..8b50eb6 100644
--- a/src/app/channels/[channel_id]/_components/Channel/Channel.tsx
+++ b/src/app/channels/[channel_id]/_components/Channel/Channel.tsx
@@ -5,6 +5,7 @@ import { useLayoutEffect, useRef } from "react";
 import { Box } from "@mantine/core";
 
 import ChannelFooter from "../ChannelFooter/ChannelFooter";
+import ChannelHeader from "../ChannelHeader/ChannelHeader";
 
 import styles from "./Channel.module.css";
 
@@ -39,6 +40,7 @@ const Channel: React.FC<ChannelProps> = ({ channel_id, messages, user_id }) => {
 
   return (
     <Box className={styles["root"]}>
+      <ChannelHeader />
       <Box className={styles["message-area"]}>
         {messages.map((message) => (
           <Message
diff --git a/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.module.css b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.module.css
index 3073b78..d8aea60 100644
--- a/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.module.css
+++ b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.module.css
@@ -1,8 +1,10 @@
 .root {
-  position: absolute;
+  position: fixed;
   top: 3rem;
+  z-index: 10;
   width: 100%;
   height: 3rem;
   padding-inline: 1rem;
+  background-color: var(--mantine-color-body);
   border-bottom: 1px solid var(--mantine-color-gray-3);
 }
diff --git a/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
index 7cddb04..6a220f3 100644
--- a/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
+++ b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx
@@ -4,14 +4,14 @@ import { Group } from "@mantine/core";
 
 import styles from "./ChannelHeader.module.css";
 
-type ChannelHeaderProps = {
-  channelName: string;
-};
+import { useCurrentChannel } from "#/hooks/useCurrentChannel";
+
+const ChannelHeader: React.FC = () => {
+  const { currentChannel } = useCurrentChannel();
 
-const ChannelHeader: React.FC<ChannelHeaderProps> = ({ channelName }) => {
   return (
     <Group className={styles["root"]} visibleFrom="sm">
-      {channelName}
+      {currentChannel && currentChannel.slug}
     </Group>
   );
 };

From 0f906d68cd59e06a5c7347c008a734ff5e516c98 Mon Sep 17 00:00:00 2001
From: saka-naname <reisuicupsoup@gmail.com>
Date: Sun, 15 Jun 2025 22:31:45 +0900
Subject: [PATCH 28/30] fix: Change error comment into Japanese

---
 src/hooks/useCurrentChannel.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useCurrentChannel.ts b/src/hooks/useCurrentChannel.ts
index 4384815..22c1fce 100644
--- a/src/hooks/useCurrentChannel.ts
+++ b/src/hooks/useCurrentChannel.ts
@@ -13,7 +13,7 @@ export function useCurrentChannel() {
 
   if (!context)
     throw new Error(
-      "useCurrentChannel must be used within a <CurrentChannelProvider>"
+      "useCurrentChannel は <CurrentChannelProvider> 内で使用される必要があります"
     );
 
   return context;

From 5a72b62f02969b10cdbe670a7be2b144e3267f8d Mon Sep 17 00:00:00 2001
From: saka-naname <reisuicupsoup@gmail.com>
Date: Sun, 15 Jun 2025 22:51:21 +0900
Subject: [PATCH 29/30] fix: Remove unneccesary include

---
 src/app/channels/[channel_id]/page.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/app/channels/[channel_id]/page.tsx b/src/app/channels/[channel_id]/page.tsx
index 105bcbf..4ada866 100644
--- a/src/app/channels/[channel_id]/page.tsx
+++ b/src/app/channels/[channel_id]/page.tsx
@@ -38,9 +38,6 @@ async function ChannelIDPage({ params }: ChannelIDPageProps) {
     where: {
       id: channel_id,
     },
-    include: {
-      members: true,
-    },
   });
   const messages = await prisma.message.findMany({
     where: {

From 445a15bfbbeba3a3d96722fbf20b3d5efd8f3f33 Mon Sep 17 00:00:00 2001
From: saka-naname <reisuicupsoup@gmail.com>
Date: Sun, 15 Jun 2025 23:16:52 +0900
Subject: [PATCH 30/30] fix: Style

---
 .../[channel_id]/_components/Channel/Channel.module.css       | 4 ++--
 src/app/channels/[channel_id]/_components/Channel/Channel.tsx | 2 +-
 .../_components/ChannelHeader/ChannelHeader.module.css        | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/channels/[channel_id]/_components/Channel/Channel.module.css b/src/app/channels/[channel_id]/_components/Channel/Channel.module.css
index a8bf2f3..13d9c5f 100644
--- a/src/app/channels/[channel_id]/_components/Channel/Channel.module.css
+++ b/src/app/channels/[channel_id]/_components/Channel/Channel.module.css
@@ -1,10 +1,10 @@
 .root {
+  position: relative;
   display: flex;
   flex-direction: column;
   max-width: 100%;
   height: 100svh;
   min-height: 100vh;
-  padding-top: 3rem;
 }
 
 .message-area {
@@ -12,4 +12,4 @@
   flex-direction: column;
   height: 100%;
   overflow-y: scroll;
-}
\ No newline at end of file
+}
diff --git a/src/app/channels/[channel_id]/_components/Channel/Channel.tsx b/src/app/channels/[channel_id]/_components/Channel/Channel.tsx
index 8b50eb6..b251301 100644
--- a/src/app/channels/[channel_id]/_components/Channel/Channel.tsx
+++ b/src/app/channels/[channel_id]/_components/Channel/Channel.tsx
@@ -39,7 +39,7 @@ const Channel: React.FC<ChannelProps> = ({ channel_id, messages, user_id }) => {
   }, [messages]);
 
   return (
-    <Box className={styles["root"]}>
+    <Box className={styles["root"]} pt={{ base: "3rem", sm: "6rem" }}>
       <ChannelHeader />
       <Box className={styles["message-area"]}>
         {messages.map((message) => (
diff --git a/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.module.css b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.module.css
index d8aea60..ae29f8a 100644
--- a/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.module.css
+++ b/src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.module.css
@@ -1,5 +1,5 @@
 .root {
-  position: fixed;
+  position: absolute;
   top: 3rem;
   z-index: 10;
   width: 100%;