feat: back buttons (#237)

app/homebase_keys/page.tsx

@@ -3,6 +3,7 @@ import db from "server/db";
 import { KeyCard } from "./_components/key-card";
 import { redirect } from "next/navigation";
 import { CreateKeyButton } from "./_components/create-key-button";
+import Breadcrumbs from "@components/ui/breadcrumbs";
 
 export default async function HomebaseKeys() {
   const session = await getServerAuthSession();
@@ -16,6 +17,7 @@ export default async function HomebaseKeys() {
       <div className="mb-12 flex flex-col space-y-6">
         <div className="flex justify-between">
           <div className="flex flex-col gap-3">
+            <Breadcrumbs title="Keys" />
             <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
               Homebase key tracking
             </h1>

app/members/page.tsx

@@ -4,6 +4,7 @@ import db from "server/db";
 import { DepartmentRole, SpaceRole } from "@prisma/client";
 import { getServerAuthSession } from "server/auth";
 import { redirect } from "next/navigation";
+import Breadcrumbs from "@components/ui/breadcrumbs";
 
 export default async function MembersPage() {
   const session = await getServerAuthSession();
@@ -61,6 +62,7 @@ export default async function MembersPage() {
   return (
     <div className="space-y-8 p-8">
       <div>
+        <Breadcrumbs title="Members" />
         <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
           Members list
         </h1>

app/opportunities/[opportunity_id]/applications/[application_id]/page.tsx

@@ -1,3 +1,4 @@
+import Breadcrumbs from "@components/ui/breadcrumbs";
 import ApplicationForm from "app/opportunities/_components/ApplicationForm";
 import { redirect } from "next/navigation";
 import db from "server/db";
@@ -20,6 +21,7 @@ export default async function ApplicationOverview({
     <div className="space-y-8 p-8">
       <div className="flex justify-between">
         <div>
+          <Breadcrumbs title={`Application: ${application.id}`} />
           <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
             Application of ID: {application.id}
           </h1>

app/opportunities/[opportunity_id]/applications/page.tsx

@@ -8,6 +8,7 @@ import { Button } from "@components/ui/button";
 import Link from "next/link";
 import { ExportButton } from "./_components/exportButton";
 import { AssignQuestionnaireButton } from "./_components/assignQuestionnaireButton";
+import Breadcrumbs from "@components/ui/breadcrumbs";
 
 interface ApplicationsOverviewPageProps {
   params: {
@@ -51,6 +52,7 @@ export default async function OpportunityOverviewPage({
       <div className="space-y-8 p-8">
         <div className="flex justify-between">
           <div className="flex w-full flex-row items-center justify-between">
+            <Breadcrumbs title={`Applications: ${opportunity?.title}`} />
             <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
               Applications for {opportunity?.title}
             </h1>

app/opportunities/[opportunity_id]/edit/editOpportunityForm.tsx

@@ -14,6 +14,7 @@ import { api } from "trpc/react";
 import { toast } from "sonner";
 import { Button } from "@components/ui/button";
 import { DeleteButton } from "./_components/deleteButton";
+import Breadcrumbs from "@components/ui/breadcrumbs";
 export interface EditOpportunityFormProps {
   initialValues: UseFormProps<
     z.infer<typeof OpportunitySchema>
@@ -50,6 +51,9 @@ export const EditOpportunityForm = ({
           <div className="mb-12 flex flex-col space-y-6">
             <div className="flex justify-between">
               <div className="flex flex-col gap-3">
+                <Breadcrumbs
+                  title={"Edit: " + form.getValues().generalInformation.title}
+                />
                 <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
                   Edit opportunity
                 </h1>

app/opportunities/[opportunity_id]/review/[review_id]/reviewForm.tsx

@@ -14,6 +14,7 @@ import { Application, Review } from "@prisma/client";
 import { Tally } from "@lib/types/tally";
 import { useRouter } from "next/navigation";
 import { DeleteAlertDialog } from "../components/review-altert-dialog";
+import Breadcrumbs from "@components/ui/breadcrumbs";
 
 interface ReviewFormProps {
   application: Application;
@@ -73,6 +74,9 @@ export const ReviewForm = ({
         <div className="space-y-8 p-8">
           <div className="flex justify-between">
             <div>
+              <Breadcrumbs
+                title={`Application: ${application.opportunityId}`}
+              />
               <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
                 Review application
               </h1>

app/opportunities/[opportunity_id]/review/page.tsx

@@ -6,6 +6,7 @@ import { DataTable } from "@components/ui/data-table";
 import { Button } from "@components/ui/button";
 import { FileCheck } from "lucide-react";
 import Link from "next/link";
+import Breadcrumbs from "@components/ui/breadcrumbs";
 
 interface ReviewPageProps {
   params: { opportunity_id: string };
@@ -15,6 +16,10 @@ export default async function ReviewPage({ params }: ReviewPageProps) {
   const session = await getServerAuthSession();
   if (!session?.user?.id) redirect("/auth");
 
+  const opportunity = await db.opportunity.findUnique({
+    where: { id: Number(params.opportunity_id) },
+  });
+
   const reviews = await db.review.findMany({
     where: {
       user: { id: session?.user.id },
@@ -30,6 +35,7 @@ export default async function ReviewPage({ params }: ReviewPageProps) {
     <div className="space-y-8 p-8">
       <div className="flex justify-between">
         <div>
+          <Breadcrumbs title={`Reviews: ${opportunity?.title}`} />
           <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
             Your reviews
           </h1>

app/opportunities/create/createOpportunityForm.tsx

@@ -12,6 +12,7 @@ import { Button } from "@components/ui/button";
 import { useRouter } from "next/navigation";
 import { GeneralInformation } from "../[opportunity_id]/edit/_components/general";
 import { Session } from "next-auth";
+import Breadcrumbs from "@components/ui/breadcrumbs";
 
 interface Props {
   session: Session;
@@ -64,6 +65,7 @@ const CreateOpportunityForm = ({ session }: Props) => {
           <div className="mb-12 flex flex-col space-y-6">
             <div className="flex justify-between">
               <div className="flex flex-col gap-3">
+                <Breadcrumbs title={`Create opportunity`} />
                 <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
                   Create new opportunity
                 </h1>

app/opportunities/page.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 import { getServerAuthSession } from "server/auth";
 import db from "server/db";
+import Breadcrumbs from "@components/ui/breadcrumbs";
 
 export const dynamic = "force-dynamic";
 
@@ -35,9 +36,12 @@ export default async function OpportunitiesPage() {
     <div className="space-y-8 p-8">
       <div className="flex flex-col gap-8">
         <div className="flex justify-between">
-          <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
-            Opportunities
-          </h1>
+          <div>
+            <Breadcrumbs title="Opportunities" />
+            <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+              Opportunities
+            </h1>
+          </div>
           <Link href="./opportunities/create">
             <Button>
               <Plus className="mr-2" />

components/ui/breadcrumbs.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { ChevronRight } from "lucide-react";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+
+export default function Breadcrumbs({ title }: { title: string }) {
+  const paths = usePathname().split("/").filter(Boolean).slice(0, -1);
+  const pathParams = useParams();
+
+  const originalPaths = usePathname().split("/").filter(Boolean);
+
+  // next doesnt expose the static path in the pathname
+  // we therefore have to match it manually, which is cumbersome
+  if (paths.includes("opportunities")) {
+    const opportunityIndex = paths.indexOf("opportunities");
+    const containsOpportunityId = "opportunity_id" in pathParams;
+    const opportunityId = paths[opportunityIndex + 1];
+    if (
+      containsOpportunityId &&
+      opportunityId &&
+      !isNaN(Number(opportunityId))
+    ) {
+      // remove the id from the displayed path
+      paths.splice(opportunityIndex + 1, 1);
+    }
+  }
+
+  return (
+    <nav className="flex items-center space-x-1">
+      <Link href="/">
+        <div className="text-muted-foreground">Home</div>
+      </Link>
+      {paths.map((path, index) => (
+        <div key={index} className="flex items-center">
+          <ChevronRight className="h-4 w-4 text-muted-foreground" />
+          <Link
+            href={
+              "/" +
+              originalPaths
+                .slice(0, originalPaths.findIndex((p) => p === path) + 1)
+                .join("/")
+            }
+          >
+            <div className="text-muted-foreground">
+              {path.slice(0, 1).toUpperCase() + path.slice(1)}
+            </div>
+          </Link>
+        </div>
+      ))}
+      <ChevronRight className="h-4 w-4 text-muted-foreground" />
+      <span className="text-muted-foreground">{title}</span>
+    </nav>
+  );
+}