チャンネルヘッダーを実装

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,7 +31,7 @@ const AppShell: React.FC<AppShellProps> = ({ children }) => {
       <MantineAppShell.Header>
         <Group h="100%" px="md">
           <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
-          digichat
+          <MobileChannelDisplay />
         </Group>
       </MantineAppShell.Header>
       <Sidebar />

src/app/_components/MobileChannelDisplay.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { Text } from "@mantine/core";
+
+import { useCurrentChannel } from "#/hooks/useCurrentChannel";
+
+/**
+ * 余計な再描画を防ぐため、チャンネル名を参照する部分を AppShell から分離
+ */
+export default function MobileChannelDisplay() {
+  const { currentChannel } = useCurrentChannel();
+
+  return <Text hiddenFrom="sm">{currentChannel && currentChannel.slug}</Text>;
+}

src/app/channels/[channel_id]/_components/Channel/Channel.module.css

@@ -1,15 +1,15 @@
 .root {
+  position: relative;
   display: flex;
   flex-direction: column;
   max-width: 100%;
   height: 100svh;
   min-height: 100vh;
-  padding-top: 3rem;
 }
 
 .message-area {
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow-y: scroll;
-}
+}

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";
 
@@ -38,7 +39,8 @@ 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) => (
           <Message

src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.module.css

@@ -0,0 +1,10 @@
+.root {
+  position: absolute;
+  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);
+}

src/app/channels/[channel_id]/_components/ChannelHeader/ChannelHeader.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { Group } from "@mantine/core";
+
+import styles from "./ChannelHeader.module.css";
+
+import { useCurrentChannel } from "#/hooks/useCurrentChannel";
+
+const ChannelHeader: React.FC = () => {
+  const { currentChannel } = useCurrentChannel();
+
+  return (
+    <Group className={styles["root"]} visibleFrom="sm">
+      {currentChannel && currentChannel.slug}
+    </Group>
+  );
+};
+
+export default ChannelHeader;

src/app/channels/[channel_id]/_components/CurrentChannelController.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useEffect } from "react";
+
+import { Channel } from "@prisma/client";
+
+import { useCurrentChannel } from "#/hooks/useCurrentChannel";
+
+export default function CurrentChannelController({
+  channel,
+}: {
+  channel: Channel | null;
+}) {
+  const { setCurrentChannel } = useCurrentChannel();
+
+  /**
+   * チャンネルのページを開いている間、コンテキストにチャンネルの情報を保存する
+   */
+  useEffect(() => {
+    setCurrentChannel(channel);
+
+    return () => {
+      setCurrentChannel(null);
+    };
+  }, [channel, setCurrentChannel]);
+
+  return null;
+}

src/app/channels/[channel_id]/page.tsx

@@ -1,6 +1,8 @@
+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";
@@ -9,8 +11,9 @@ type ChannelIDPageProps = {
   params: Promise<{ channel_id: string }>;
 };
 
-async function ChannelIDPage({ params }: ChannelIDPageProps) {
-  const session = await auth();
+export async function generateMetadata({
+  params,
+}: ChannelIDPageProps): Promise<Metadata> {
   const { channel_id } = await params;
   const channel = await prisma.channel.findUnique({
     where: {
@@ -20,6 +23,22 @@ async function ChannelIDPage({ params }: ChannelIDPageProps) {
       members: true,
     },
   });
+
+  if (!channel) return {};
+
+  return {
+    title: `${channel.slug} | Digichat`,
+  };
+}
+
+async function ChannelIDPage({ params }: ChannelIDPageProps) {
+  const session = await auth();
+  const { channel_id } = await params;
+  const channel = await prisma.channel.findUnique({
+    where: {
+      id: channel_id,
+    },
+  });
   const messages = await prisma.message.findMany({
     where: {
       channelId: channel_id,
@@ -41,7 +60,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} />
+    </>
   );
 }
 

src/app/layout.tsx

@@ -10,6 +10,8 @@ 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);
@@ -38,9 +40,11 @@ export default function RootLayout({ children }: RootRayoutProps) {
       <body>
         <SessionProvider>
           <MantineProvider>
-            <ChannelsAccordionProvider>
-              <AppShell>{children}</AppShell>
-            </ChannelsAccordionProvider>
+            <CurrentChannelProvider>
+              <ChannelsAccordionProvider>
+                <AppShell>{children}</AppShell>
+              </ChannelsAccordionProvider>
+            </CurrentChannelProvider>
           </MantineProvider>
         </SessionProvider>
       </body>

src/contexts/CurrentChannelContext.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { createContext, SetStateAction, useState } from "react";
+
+import { Channel } from "@prisma/client";
+
+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>
+  );
+}

src/hooks/useCurrentChannel.ts

@@ -0,0 +1,20 @@
+"use client";
+
+import { useContext } from "react";
+
+import { CurrentChannelContext } from "#/contexts/CurrentChannelContext";
+
+/**
+ * 現在開いているチャンネルの情報を利用する
+ * @returns getter 及び setter
+ */
+export function useCurrentChannel() {
+  const context = useContext(CurrentChannelContext);
+
+  if (!context)
+    throw new Error(
+      "useCurrentChannel は <CurrentChannelProvider> 内で使用される必要があります"
+    );
+
+  return context;
+}