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

View File

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

View File

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