Move the page title into the top header

app/dashboard/page.tsx

@@ -25,7 +25,11 @@ export default async function PageDashboard() {
   }))
 
   return (
-    <AppShell user={user ?? undefined} initialSidebarOpen={initialSidebarOpen}>
+    <AppShell
+      title="ダッシュボード"
+      user={user ?? undefined}
+      initialSidebarOpen={initialSidebarOpen}
+    >
       <DashboardPage
         histories={histories}
         discordLinked={!!user?.discordUserId}

app/medication/drugs/[id]/edit/page.tsx

@@ -25,6 +25,7 @@ export default async function PageDrugEdit({
 
   return (
     <AppShell
+      title={`${drug.name ?? ''} - 薬を編集`}
       user={user ?? undefined}
       initialSidebarOpen={initialSidebarOpen}
       breadcrumbs={[

app/medication/drugs/[id]/page.tsx

@@ -25,6 +25,7 @@ export default async function PageDrugDetail({
 
   return (
     <AppShell
+      title={`${drug.name ?? ''} - 薬詳細`}
       user={user ?? undefined}
       initialSidebarOpen={initialSidebarOpen}
       breadcrumbs={[

app/medication/drugs/page.tsx

@@ -37,7 +37,11 @@ export default async function PageDrugs({
   }))
 
   return (
-    <AppShell user={user ?? undefined} initialSidebarOpen={initialSidebarOpen}>
+    <AppShell
+      title="薬一覧"
+      user={user ?? undefined}
+      initialSidebarOpen={initialSidebarOpen}
+    >
       <DrugListPage
         items={items}
         currentPage={data?.currentPage ?? 1}

app/medication/history/[id]/edit/page.tsx

@@ -28,6 +28,7 @@ export default async function PageMedicationHistoryEdit({
 
   return (
     <AppShell
+      title={`${history.drugName ?? ''} - 服薬履歴を編集`}
       user={user ?? undefined}
       initialSidebarOpen={initialSidebarOpen}
       breadcrumbs={[

app/medication/history/[id]/page.tsx

@@ -28,6 +28,7 @@ export default async function PageMedicationHistoryDetail({
 
   return (
     <AppShell
+      title={`${history.drugName ?? ''} - 服薬履歴詳細`}
       user={user ?? undefined}
       initialSidebarOpen={initialSidebarOpen}
       breadcrumbs={[

app/medication/history/page.tsx

@@ -47,7 +47,11 @@ export default async function PageMedicationHistory({
   }))
 
   return (
-    <AppShell user={user ?? undefined} initialSidebarOpen={initialSidebarOpen}>
+    <AppShell
+      title="服薬履歴"
+      user={user ?? undefined}
+      initialSidebarOpen={initialSidebarOpen}
+    >
       <MedicationHistoryPage
         items={items}
         currentPage={data?.currentPage ?? 1}

app/settings/page.tsx

@@ -8,7 +8,11 @@ export default async function PageSettings() {
   const initialSidebarOpen = await getInitialSidebarOpen()
 
   return (
-    <AppShell user={user ?? undefined} initialSidebarOpen={initialSidebarOpen}>
+    <AppShell
+      title="設定"
+      user={user ?? undefined}
+      initialSidebarOpen={initialSidebarOpen}
+    >
       <SettingsPage userName={user?.name ?? ''} />
     </AppShell>
   )

components/layout/AppShell.tsx

@@ -92,10 +92,13 @@ const NAV_EXTRA: NavItem[] = [
   { text: '設定', href: '/settings', icon: Settings },
 ]
 
+const ALL_NAV_ITEMS = [...NAV_GROUPS.flatMap((g) => g.items), ...NAV_EXTRA]
+
 const SIDEBAR_COLLAPSED_WIDTH = 56
 
 interface AppShellProps {
   children: React.ReactNode
+  title?: string
   user?: {
     name: string
     iconUrl: string | null
@@ -106,6 +109,7 @@ interface AppShellProps {
 
 export default function AppShell({
   children,
+  title,
   user,
   breadcrumbs,
   initialSidebarOpen = true,
@@ -136,8 +140,6 @@ export default function AppShell({
     [router],
   )
 
-  const allNavItems = [...NAV_GROUPS.flatMap((g) => g.items), ...NAV_EXTRA]
-
   const sideNavContent = (
     <nav className="flex flex-col gap-1 py-2">
       {NAV_GROUPS.map((group) => (
@@ -237,7 +239,7 @@ export default function AppShell({
               </Button>
             </div>
             <nav className="flex flex-1 flex-col items-center gap-1 py-2">
-              {allNavItems.map((item) => (
+              {ALL_NAV_ITEMS.map((item) => (
                 <button
                   type="button"
                   key={item.href}
@@ -303,12 +305,7 @@ export default function AppShell({
               <Menu className="size-4" />
             </Button>
           )}
-          <Link
-            href="/dashboard"
-            className="text-base font-bold hover:opacity-80"
-          >
-            Grace
-          </Link>
+          <h1 className="text-base font-semibold">{title ?? 'Grace'}</h1>
           <div className="flex-1" />
           <div className="flex items-center gap-1">
             <ThemeToggle />

components/page-component/DashboardPage.tsx

@@ -381,7 +381,6 @@ const MOCK_HISTORIES: MedicationHistory[] = Array.from(
 function MockDashboardContent() {
   return (
     <div className="flex flex-col gap-5">
-      <h1 className="text-2xl font-bold">ダッシュボード</h1>
       <Card>
         <CardHeader>
           <CardTitle>服薬分析</CardTitle>
@@ -410,7 +409,6 @@ export default function DashboardPage({
   if (discordLinked === false) {
     return (
       <div className="flex flex-col gap-5">
-        <h1 className="text-2xl font-bold">ダッシュボード</h1>
         <DiscordLinkPrompt>
           <MockDashboardContent />
         </DiscordLinkPrompt>
@@ -420,8 +418,7 @@ export default function DashboardPage({
 
   return (
     <div className="flex flex-col gap-5">
-      <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold">ダッシュボード</h1>
+      <div className="flex items-center justify-end">
         <PeriodSelect value={period} onChange={setPeriod} />
       </div>
 

components/page-component/DrugDetailPage.tsx

@@ -20,8 +20,7 @@ export default function DrugDetailPage({ drug }: DrugDetailPageProps) {
 
   return (
     <div className="flex flex-col gap-5">
-      <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold">{drug.name || '薬詳細'}</h1>
+      <div className="flex items-center justify-end">
         <Button
           variant="outline"
           onClick={() => router.push(`/medication/drugs/${drug.id}/edit`)}

components/page-component/DrugEditPage.tsx

@@ -49,8 +49,6 @@ export default function DrugEditPage({ drug }: DrugEditPageProps) {
         handleSubmit()
       }}
     >
-      <h1 className="text-2xl font-bold">薬を編集</h1>
-
       <Card>
         <CardHeader>
           <CardTitle>基本情報</CardTitle>

components/page-component/DrugListPage.tsx

@@ -85,7 +85,6 @@ export default function DrugListPage({
   if (discordLinked === false) {
     return (
       <div className="flex h-full flex-col gap-5">
-        <h1 className="text-2xl font-bold">薬一覧</h1>
         <DiscordLinkPrompt>
           <DrugListTable
             items={MOCK_ITEMS}
@@ -103,8 +102,7 @@ export default function DrugListPage({
 
   return (
     <div className="flex h-full flex-col gap-5">
-      <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold">薬一覧</h1>
+      <div className="flex items-center justify-end">
         <Button onClick={() => setModalVisible(true)}>薬を登録</Button>
       </div>
       <DrugListTable

components/page-component/MedicationHistoryDetailPage.tsx

@@ -57,8 +57,7 @@ export default function MedicationHistoryDetailPage({
 
   return (
     <div className="flex flex-col gap-5">
-      <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold">服薬履歴詳細</h1>
+      <div className="flex items-center justify-end">
         <div className="flex items-center gap-2">
           <AlertDialog>
             <AlertDialogTrigger asChild>

components/page-component/MedicationHistoryEditPage.tsx

@@ -59,8 +59,6 @@ export default function MedicationHistoryEditPage({
         handleSubmit()
       }}
     >
-      <h1 className="text-2xl font-bold">服薬履歴を編集</h1>
-
       <Card>
         <CardHeader>
           <CardTitle>基本情報</CardTitle>

components/page-component/MedicationHistoryPage.tsx

@@ -100,7 +100,6 @@ export default function MedicationHistoryPage({
   if (discordLinked === false) {
     return (
       <div className="flex h-full flex-col gap-5">
-        <h1 className="text-2xl font-bold">服薬履歴</h1>
         <DiscordLinkPrompt>
           <MedicationHistoryTable
             items={MOCK_ITEMS}
@@ -118,12 +117,11 @@ export default function MedicationHistoryPage({
 
   return (
     <div className="flex h-full flex-col gap-5">
-      <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold">服薬履歴</h1>
-        {drugs.length > 0 && (
+      {drugs.length > 0 && (
+        <div className="flex items-center justify-end">
           <Button onClick={() => setModalVisible(true)}>服薬を記録</Button>
-        )}
-      </div>
+        </div>
+      )}
       <MedicationHistoryTable
         items={items}
         currentPage={currentPage}

components/page-component/SettingsPage.tsx

@@ -50,8 +50,6 @@ export default function SettingsPage({ userName }: SettingsPageProps) {
 
   return (
     <div className="flex flex-col gap-5">
-      <h1 className="text-2xl font-bold">設定</h1>
-
       <DisplaySettings
         preference={preference}
         onChangePreference={setPreference}

stories/layout/AppShell.stories.tsx

@@ -19,6 +19,7 @@ const meta = {
   },
   args: {
     user: sampleUser,
+    title: '薬一覧',
   },
 } satisfies Meta<typeof AppShell>
 
@@ -27,9 +28,10 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
+    title: 'ダッシュボード',
     children: (
       <div className="flex flex-col gap-5">
-        <h1 className="text-2xl font-bold">ダッシュボード</h1>
+        <p className="text-sm text-muted-foreground">コンテンツエリア</p>
       </div>
     ),
   },
@@ -44,9 +46,10 @@ export const DrugListActive: Story = {
     },
   },
   args: {
+    title: '薬一覧',
     children: (
       <div className="flex flex-col gap-5">
-        <h1 className="text-2xl font-bold">薬一覧</h1>
+        <p className="text-sm text-muted-foreground">コンテンツエリア</p>
       </div>
     ),
   },
@@ -61,14 +64,15 @@ export const DrugDetailWithBreadcrumbs: Story = {
     },
   },
   args: {
+    title: 'レボチロキシン - 薬詳細',
     breadcrumbs: [
       { text: 'Grace', href: '/dashboard' },
       { text: '薬一覧', href: '/medication/drugs' },
       { text: 'レボチロキシン', href: '/medication/drugs/1' },
     ],
     children: (
       <div className="flex flex-col gap-5">
-        <h1 className="text-2xl font-bold">レボチロキシン</h1>
+        <p className="text-sm text-muted-foreground">コンテンツエリア</p>
       </div>
     ),
   },
@@ -83,9 +87,10 @@ export const MedicationHistoryActive: Story = {
     },
   },
   args: {
+    title: '服薬履歴',
     children: (
       <div className="flex flex-col gap-5">
-        <h1 className="text-2xl font-bold">服薬履歴</h1>
+        <p className="text-sm text-muted-foreground">コンテンツエリア</p>
       </div>
     ),
   },
@@ -100,14 +105,15 @@ export const MedicationHistoryDetailWithBreadcrumbs: Story = {
     },
   },
   args: {
+    title: 'レボチロキシン - 服薬履歴詳細',
     breadcrumbs: [
       { text: 'Grace', href: '/dashboard' },
       { text: '服薬履歴', href: '/medication/history' },
-      { text: '服薬履歴詳細', href: '/medication/history/1' },
+      { text: 'レボチロキシン', href: '/medication/history/1' },
     ],
     children: (
       <div className="flex flex-col gap-5">
-        <h1 className="text-2xl font-bold">服薬履歴詳細</h1>
+        <p className="text-sm text-muted-foreground">コンテンツエリア</p>
       </div>
     ),
   },
@@ -122,9 +128,10 @@ export const SettingsActive: Story = {
     },
   },
   args: {
+    title: '設定',
     children: (
       <div className="flex flex-col gap-5">
-        <h1 className="text-2xl font-bold">設定</h1>
+        <p className="text-sm text-muted-foreground">コンテンツエリア</p>
       </div>
     ),
   },