wip: layout stuff

src/app/(dashboard)/project/[id]/(home)/layout.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { SettingsHeader } from "~/app/(dashboard)/settings/SettingsHeader";
+import { SidebarNav } from "~/components/SidebarNav";
+import { Separator } from "~/components/ui/separator";
+import { useProject } from "../_context/ProjectContext";
+
+const sidebarNavItems = [
+  {
+    title: "Home",
+    description: "Quick overview of all containers for this project.",
+    href: "/",
+  },
+  {
+    title: "Sessions",
+    description: "Manage your active sessions and logout remotely.",
+    href: "/sessions",
+  },
+];
+
+export default function ProjectHomeLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const project = useProject();
+  const items = sidebarNavItems.map((item) => ({
+    ...item,
+    href: `${project.path}${item.href}`,
+  }));
+
+  return (
+    <div className="hidden space-y-6 py-10 md:block">
+      <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
+        <aside className="-mx-4 lg:w-1/5">
+          <SidebarNav items={items} />
+        </aside>
+        <div className="flex-1 space-y-6 lg:max-w-2xl">
+          <SettingsHeader items={items} />
+          <Separator />
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(dashboard)/project/[id]/(home)/page.tsx

@@ -0,0 +1,3 @@
+export default function ProjectHome() {
+  return <p>hello world</p>;
+}

src/app/(dashboard)/project/[id]/ProjectLayout.tsx

@@ -6,9 +6,9 @@ import { useParams } from "next/navigation";
 import { Button } from "~/components/ui/button";
 import { api } from "~/trpc/react";
 import { type RouterOutputs } from "~/trpc/shared";
-import { ProjectContextProvider } from "../_context/ProjectContext";
+import { CreateService } from "./_components/CreateService";
-import { CreateService } from "./CreateService";
+import { ServiceCard } from "./_components/ServiceCard";
-import { ServiceCard } from "./ServiceCard";
+import { ProjectContextProvider } from "./_context/ProjectContext";
 
 export function ProjectLayout(props: {
   project: RouterOutputs["projects"]["get"];
@@ -44,7 +44,7 @@ export function ProjectLayout(props: {
             : undefined,
       }}
     >
-      <h1 className="text-3xl font-bold">
+      <h1 className="text-3xl font-bold tracking-tight">
         {project.data.friendlyName}{" "}
         <span className="text-nowrap text-sm font-normal text-muted-foreground">
           ({project.data.internalName})

src/app/(dashboard)/project/[id]/layout.tsx

@@ -1,5 +1,5 @@
 import { api } from "~/trpc/server";
-import { ProjectLayout } from "./_components/ProjectLayout";
+import { ProjectLayout } from "./ProjectLayout";
 
 export default async function ProjectPage(props: {
   params: { id: string };

src/app/(dashboard)/project/[id]/page.tsx

@@ -1,7 +0,0 @@
-export default function ProjectHome() {
-  // return (
-  //         // <pre>{JSON.stringify(project, null, 2)}</pre>
-  // )
-
-  return <p>hello world</p>;
-}

src/app/(dashboard)/settings/SettingsHeader.tsx

@@ -2,6 +2,8 @@
 
 import { usePathname } from "next/navigation";
 
+const trimTrailingSlash = (path: string) => path.replace(/\/$/, "");
+
 type SidebarNavItem = {
   title: string;
   description: string;
@@ -10,7 +12,9 @@ type SidebarNavItem = {
 
 export function SettingsHeader(props: { items: SidebarNavItem[] }) {
   const path = usePathname();
-  const active = props.items.find((item) => item.href === path);
+  const active = props.items.find(
+    (item) => trimTrailingSlash(item.href) === path,
+  );
 
   return (
     <div>

src/app/(dashboard)/settings/layout.tsx

@@ -1,7 +1,5 @@
-import Image from "next/image";
-
-import { Separator } from "~/components/ui/separator";
 import { SidebarNav } from "~/components/SidebarNav";
+import { Separator } from "~/components/ui/separator";
 import { SettingsHeader } from "./SettingsHeader";
 
 const sidebarNavItems = [
@@ -23,43 +21,24 @@ interface SettingsLayoutProps {
 
 export default function SettingsLayout({ children }: SettingsLayoutProps) {
   return (
-    <>
+    <div className="hidden space-y-6 p-10 pb-16 md:block">
-      <div className="md:hidden">
+      <div className="space-y-0.5">
-        <Image
+        <h2 className="text-2xl font-bold tracking-tight">Settings</h2>
-          src="/examples/forms-light.png"
+        <p className="text-muted-foreground">
-          width={1280}
+          Manage your account settings as well as the global instance settings.
-          height={791}
+        </p>
-          alt="Forms"
-          className="block dark:hidden"
-        />
-        <Image
-          src="/examples/forms-dark.png"
-          width={1280}
-          height={791}
-          alt="Forms"
-          className="hidden dark:block"
-        />
       </div>
-      <div className="hidden space-y-6 p-10 pb-16 md:block">
+      <Separator className="my-6" />
-        <div className="space-y-0.5">
+      <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
-          <h2 className="text-2xl font-bold tracking-tight">Settings</h2>
+        <aside className="-mx-4 lg:w-1/5">
-          <p className="text-muted-foreground">
+          <SidebarNav items={sidebarNavItems} />
-            Manage your account settings as well as the global instance
+        </aside>
-            settings.
+        <div className="flex-1 space-y-6 lg:max-w-2xl">
-          </p>
+          <SettingsHeader items={sidebarNavItems} />
-        </div>
+          <Separator />
-        <Separator className="my-6" />
+          {children}
-        <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
-          <aside className="-mx-4 lg:w-1/5">
-            <SidebarNav items={sidebarNavItems} />
-          </aside>
-          <div className="flex-1 space-y-6 lg:max-w-2xl">
-            <SettingsHeader items={sidebarNavItems} />
-            <Separator />
-            {children}
-          </div>
         </div>
       </div>
-    </>
+    </div>
   );
 }

src/components/SidebarNav.tsx

@@ -29,7 +29,7 @@ export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
           href={item.href}
           className={cn(
             buttonVariants({ variant: "ghost" }),
-            pathname === item.href
+            pathname === item.href.replace(/\/$/, "")
               ? "bg-muted hover:bg-muted"
               : "hover:bg-transparent hover:underline",
             "justify-start",