Merge pull request #287 from SGAOperations/282-show-page-name-in-browser-tab-title

#282 Show Page Name In Browser Tab Title

Author: b-at-neu

app/(main)/(auth)/applications/[id]/page.tsx

@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
 import { getApplicationForReview } from '@/prisma/data/applications';
@@ -21,6 +22,16 @@ interface ApplicationDetailPageProps {
   params: Promise<{ id: string }>;
 }
 
+export async function generateMetadata({
+  params,
+}: ApplicationDetailPageProps): Promise<Metadata> {
+  const { id } = await params;
+  const user = await getCurrentUser();
+  const application = await getApplicationForReview(id, user);
+  if (!application) return {};
+  return { title: application.user.name ?? application.user.email };
+}
+
 export default async function ApplicationDetailPage({
   params,
 }: ApplicationDetailPageProps) {

app/(main)/(auth)/applications/page.tsx

@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import { redirect } from 'next/navigation';
 
 import {
@@ -20,6 +21,8 @@ import type {
 import { ApplicationsTable } from '@/components/features/applications-table';
 import { ApplicationsToolbar } from '@/components/features/applications-toolbar';
 
+export const metadata: Metadata = { title: 'Applications' };
+
 interface ApplicationsPageProps {
   searchParams: Promise<Record<string, string | string[] | undefined>>;
 }

app/(main)/(auth)/global-questions/page.tsx

@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import { redirect } from 'next/navigation';
 
 import { getGlobalQuestions } from '@/prisma/data/global-questions';
@@ -9,6 +10,8 @@ import { GlobalQuestionsTable } from '@/components/features/global-questions-tab
 import { PageHeader } from '@/components/layouts/page-header';
 import { Button } from '@/components/ui/button';
 
+export const metadata: Metadata = { title: 'Global Questions' };
+
 export default async function GlobalQuestionsPage() {
   const user = await getCurrentUser();
   if (!user.isAdmin) redirect('/');

app/(main)/(auth)/my-applications/page.tsx

@@ -1,10 +1,14 @@
+import type { Metadata } from 'next';
+
 import { getMyApplications } from '@/prisma/data/applications';
 
 import { getCurrentUser } from '@/lib/auth/server';
 
 import { MyApplicationsTable } from '@/components/features/my-applications-table';
 import { PageHeader } from '@/components/layouts/page-header';
 
+export const metadata: Metadata = { title: 'My Applications' };
+
 export default async function MyApplicationsPage() {
   const user = await getCurrentUser();
   const applications = await getMyApplications(user.id);

app/(main)/(auth)/positions/[id]/apply/page.tsx

@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
@@ -13,11 +14,20 @@ import { PageHeader } from '@/components/layouts/page-header';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 
-export default async function ApplyPage({
-  params,
-}: {
+interface ApplyPageProps {
   params: Promise<{ id: string }>;
-}) {
+}
+
+export async function generateMetadata({
+  params,
+}: ApplyPageProps): Promise<Metadata> {
+  const { id } = await params;
+  const position = await getPositionForApply(id);
+  if (!position) return {};
+  return { title: `Apply: ${position.title}` };
+}
+
+export default async function ApplyPage({ params }: ApplyPageProps) {
   const { id } = await params;
   const user = await getCurrentUser();
   if (!user) redirect('/sign-in');

app/(main)/(auth)/positions/[id]/edit/page.tsx

@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import { redirect } from 'next/navigation';
 
 import { getPositionForEdit } from '@/prisma/data/positions';
@@ -14,6 +15,15 @@ interface EditPositionPageProps {
   params: Promise<{ id: string }>;
 }
 
+export async function generateMetadata({
+  params,
+}: EditPositionPageProps): Promise<Metadata> {
+  const { id } = await params;
+  const position = await getPositionForEdit(id);
+  if (!position) return {};
+  return { title: `Edit: ${position.title}` };
+}
+
 export default async function EditPositionPage({
   params,
 }: EditPositionPageProps) {

app/(main)/(auth)/users/page.tsx

@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import { redirect } from 'next/navigation';
 
 import { getUsersForAdmin } from '@/prisma/data/users';
@@ -7,6 +8,8 @@ import { getCurrentUser } from '@/lib/auth/server';
 import { UsersTable } from '@/components/features/users-table';
 import { PageHeader } from '@/components/layouts/page-header';
 
+export const metadata: Metadata = { title: 'Users' };
+
 export default async function UsersPage() {
   const user = await getCurrentUser();
   if (!user.isAdmin) redirect('/');

app/(main)/positions/page.tsx

@@ -1,3 +1,5 @@
+import type { Metadata } from 'next';
+
 import { Briefcase } from 'lucide-react';
 
 import { getPositionApplicationStats } from '@/prisma/data/applications';
@@ -15,6 +17,8 @@ import { PositionCard } from '@/components/features/position-card';
 import { PositionCreateDialog } from '@/components/features/position-create-dialog';
 import { EmptyState } from '@/components/ui/empty-state';
 
+export const metadata: Metadata = { title: 'Positions' };
+
 export default async function PositionsPage() {
   const user = await getOptionalUser();
   const isAdmin = user?.isAdmin ?? false;

app/(main)/profile/page.tsx

@@ -1,10 +1,14 @@
+import type { Metadata } from 'next';
+
 import { getProfileData } from '@/prisma/data/profile';
 
 import { getCurrentUser } from '@/lib/auth/server';
 
 import { ProfileForm } from '@/components/features/profile-form';
 import { PageHeader } from '@/components/layouts/page-header';
 
+export const metadata: Metadata = { title: 'Profile' };
+
 export default async function ProfilePage() {
   const user = await getCurrentUser();
   const profileData = await getProfileData(user.id);

app/layout.tsx

@@ -11,7 +11,7 @@ import './globals.css';
 const inter = Inter({ variable: '--font-sans', subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: { default: 'Aplio', template: 'Aplio - %s' },
+  title: { default: 'Aplio', template: 'Aplio • %s' },
   description: 'A student government application management system.',
   icons: [
     // Light-mode favicon: white/light background logo