feat: replace DashboardShell with DashboardPageLayout for improved layout consistency

This commit is contained in:
Abhimanyu Saharan
2026-02-09 00:16:48 +05:30
parent 3a1cd654f1
commit 05c0f851f6
3 changed files with 51 additions and 108 deletions

View File

@@ -5,7 +5,7 @@ export const dynamic = "force-dynamic";
import { useMemo, useState } from "react"; import { useMemo, useState } from "react";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { SignedIn, SignedOut, useAuth } from "@/auth/clerk"; import { useAuth } from "@/auth/clerk";
import { ApiError } from "@/api/mutator"; import { ApiError } from "@/api/mutator";
import { import {
@@ -18,9 +18,7 @@ import {
useListBoardsApiV1BoardsGet, useListBoardsApiV1BoardsGet,
} from "@/api/generated/boards/boards"; } from "@/api/generated/boards/boards";
import type { AgentRead, AgentUpdate, BoardRead } from "@/api/generated/model"; import type { AgentRead, AgentUpdate, BoardRead } from "@/api/generated/model";
import { SignedOutPanel } from "@/components/auth/SignedOutPanel"; import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
import { DashboardShell } from "@/components/templates/DashboardShell";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import SearchableSelect, { import SearchableSelect, {
@@ -272,35 +270,21 @@ export default function EditAgentPage() {
}; };
return ( return (
<DashboardShell> <DashboardPageLayout
<SignedOut> signedOut={{
<SignedOutPanel message: "Sign in to edit agents.",
message="Sign in to edit agents." forceRedirectUrl: `/agents/${agentId}/edit`,
forceRedirectUrl={`/agents/${agentId}/edit`} signUpForceRedirectUrl: `/agents/${agentId}/edit`,
signUpForceRedirectUrl={`/agents/${agentId}/edit`} }}
/> title={
</SignedOut> resolvedName.trim() ? resolvedName : (loadedAgent?.name ?? "Edit agent")
<SignedIn> }
<DashboardSidebar /> description="Status is controlled by agent heartbeat."
<main className="flex-1 overflow-y-auto bg-slate-50"> >
<div className="border-b border-slate-200 bg-white px-8 py-6"> <form
<div> onSubmit={handleSubmit}
<h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight"> className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm space-y-6"
{resolvedName.trim() >
? resolvedName
: (loadedAgent?.name ?? "Edit agent")}
</h1>
<p className="mt-1 text-sm text-slate-500">
Status is controlled by agent heartbeat.
</p>
</div>
</div>
<div className="p-8">
<form
onSubmit={handleSubmit}
className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm space-y-6"
>
<div> <div>
<p className="text-xs font-semibold uppercase tracking-wider text-slate-500"> <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
Basic configuration Basic configuration
@@ -536,10 +520,7 @@ export default function EditAgentPage() {
Back to agent Back to agent
</Button> </Button>
</div> </div>
</form> </form>
</div> </DashboardPageLayout>
</main>
</SignedIn>
</DashboardShell>
); );
} }

View File

@@ -5,7 +5,7 @@ export const dynamic = "force-dynamic";
import { useEffect, useMemo, useRef, useState } from "react"; import { useEffect, useMemo, useRef, useState } from "react";
import { useParams, useRouter, useSearchParams } from "next/navigation"; import { useParams, useRouter, useSearchParams } from "next/navigation";
import { SignedIn, SignedOut, useAuth } from "@/auth/clerk"; import { useAuth } from "@/auth/clerk";
import { ApiError } from "@/api/mutator"; import { ApiError } from "@/api/mutator";
import { import {
@@ -23,9 +23,7 @@ import type {
BoardGroupUpdate, BoardGroupUpdate,
BoardRead, BoardRead,
} from "@/api/generated/model"; } from "@/api/generated/model";
import { SignedOutPanel } from "@/components/auth/SignedOutPanel"; import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
import { DashboardShell } from "@/components/templates/DashboardShell";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
@@ -280,32 +278,18 @@ export default function EditBoardGroupPage() {
); );
return ( return (
<DashboardShell> <DashboardPageLayout
<SignedOut> signedOut={{
<SignedOutPanel message: "Sign in to edit board groups.",
message="Sign in to edit board groups." forceRedirectUrl: `/board-groups/${groupId ?? ""}/edit`,
forceRedirectUrl={`/board-groups/${groupId ?? ""}/edit`} }}
/> title={title}
</SignedOut> description="Update the shared context that connects boards in this group."
<SignedIn> >
<DashboardSidebar /> <form
<main className="flex-1 overflow-y-auto bg-slate-50"> onSubmit={handleSubmit}
<div className="border-b border-slate-200 bg-white px-8 py-6"> className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
<div> >
<h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
{title}
</h1>
<p className="mt-1 text-sm text-slate-500">
Update the shared context that connects boards in this group.
</p>
</div>
</div>
<div className="p-8">
<form
onSubmit={handleSubmit}
className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
>
{assignFailedCount && Number.isFinite(assignFailedCount) ? ( {assignFailedCount && Number.isFinite(assignFailedCount) ? (
<div className="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900 shadow-sm"> <div className="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900 shadow-sm">
Group was created, but {assignFailedCount} board assignment Group was created, but {assignFailedCount} board assignment
@@ -466,10 +450,7 @@ export default function EditBoardGroupPage() {
{isLoading ? "Saving…" : "Save changes"} {isLoading ? "Saving…" : "Save changes"}
</Button> </Button>
</div> </div>
</form> </form>
</div> </DashboardPageLayout>
</main>
</SignedIn>
</DashboardShell>
); );
} }

View File

@@ -6,7 +6,7 @@ import { useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { SignedIn, SignedOut, useAuth } from "@/auth/clerk"; import { useAuth } from "@/auth/clerk";
import { ApiError } from "@/api/mutator"; import { ApiError } from "@/api/mutator";
import { import {
@@ -16,9 +16,7 @@ import {
} from "@/api/generated/boards/boards"; } from "@/api/generated/boards/boards";
import { useCreateBoardGroupApiV1BoardGroupsPost } from "@/api/generated/board-groups/board-groups"; import { useCreateBoardGroupApiV1BoardGroupsPost } from "@/api/generated/board-groups/board-groups";
import type { BoardRead } from "@/api/generated/model"; import type { BoardRead } from "@/api/generated/model";
import { SignedOutPanel } from "@/components/auth/SignedOutPanel"; import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
import { DashboardShell } from "@/components/templates/DashboardShell";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
@@ -125,32 +123,18 @@ export default function NewBoardGroupPage() {
}; };
return ( return (
<DashboardShell> <DashboardPageLayout
<SignedOut> signedOut={{
<SignedOutPanel message: "Sign in to create a board group.",
message="Sign in to create a board group." forceRedirectUrl: "/board-groups/new",
forceRedirectUrl="/board-groups/new" }}
/> title="Create board group"
</SignedOut> description="Groups help agents discover related work across boards."
<SignedIn> >
<DashboardSidebar /> <form
<main className="flex-1 overflow-y-auto bg-slate-50"> onSubmit={handleSubmit}
<div className="border-b border-slate-200 bg-white px-8 py-6"> className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
<div> >
<h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
Create board group
</h1>
<p className="mt-1 text-sm text-slate-500">
Groups help agents discover related work across boards.
</p>
</div>
</div>
<div className="p-8">
<form
onSubmit={handleSubmit}
className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
>
<div className="grid gap-6 md:grid-cols-2"> <div className="grid gap-6 md:grid-cols-2">
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-medium text-slate-900"> <label className="text-sm font-medium text-slate-900">
@@ -297,10 +281,7 @@ export default function NewBoardGroupPage() {
</Link>{" "} </Link>{" "}
and pick this group. and pick this group.
</div> </div>
</form> </form>
</div> </DashboardPageLayout>
</main>
</SignedIn>
</DashboardShell>
); );
} }