From 47e875dc27300f62364cfe4e3c6783befc048794 Mon Sep 17 00:00:00 2001
From: Aniket Barun <barunaniket@gmail.com>
Date: Wed, 9 Sep 2026 01:02:17 +0530
Subject: [PATCH] fix(admin): align console pages with the shared nav, add
 drive status
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follow-up to #205. Extracting the nav into admin/layout.tsx left three pages
that only inherit it out of step with the two that were edited.

- teachers, problems/new and problems/[slug]/edit still carried `pt-6` on
  their own section while the layout now supplies it, so those three rendered
  the gap twice.
- The two problem pages were `max-w-3xl` against the layout's `max-w-4xl`, so
  the nav sat wider than the content it heads. Widened them rather than
  narrowing the nav: all six console pages now share one measure, which is the
  point of having a shared layout. It does make the problem-authoring form
  slightly wider — deliberate, and admin-only.

Also picks up the two panel touches from the plan that #205 left optional:

- A "Preview the saved form" link, so an admin can confirm the URL they pasted
  is the right form *before* opening the drive to applicants.
- A plain-language line saying what /join is actually serving right now.
  Derived from the saved row rather than the editor fields on purpose — reading
  the unsaved state would announce a drive as open the moment someone ticked
  the box, before anything was written.
---
 src/app/admin/problems/[slug]/edit/page.tsx |  2 +-
 src/app/admin/problems/new/page.tsx         |  2 +-
 src/app/admin/teachers/page.tsx             |  2 +-
 src/components/admin/RecruitmentPanel.tsx   | 24 +++++++++++++++++++++
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/app/admin/problems/[slug]/edit/page.tsx b/src/app/admin/problems/[slug]/edit/page.tsx
index bcfa137..f41d2ba 100644
--- a/src/app/admin/problems/[slug]/edit/page.tsx
+++ b/src/app/admin/problems/[slug]/edit/page.tsx
@@ -24,7 +24,7 @@ export default async function EditProblemPage({
 
   return (
     <main className="flex-1">
-      <section className="mx-auto max-w-3xl px-6 pt-6 pb-24">
+      <section className="mx-auto max-w-4xl px-6 pb-24">
         <Link
           href="/admin"
           className="font-mono text-[11px] uppercase tracking-wider text-charcoal/50 hover:text-bronze"
diff --git a/src/app/admin/problems/new/page.tsx b/src/app/admin/problems/new/page.tsx
index 61bf0cd..1942795 100644
--- a/src/app/admin/problems/new/page.tsx
+++ b/src/app/admin/problems/new/page.tsx
@@ -13,7 +13,7 @@ export default async function NewProblemPage() {
 
   return (
     <main className="flex-1">
-      <section className="mx-auto max-w-3xl px-6 pt-6 pb-24">
+      <section className="mx-auto max-w-4xl px-6 pb-24">
         <Link
           href="/admin"
           className="font-mono text-[11px] uppercase tracking-wider text-charcoal/50 hover:text-bronze"
diff --git a/src/app/admin/teachers/page.tsx b/src/app/admin/teachers/page.tsx
index 2b369cb..1cfa785 100644
--- a/src/app/admin/teachers/page.tsx
+++ b/src/app/admin/teachers/page.tsx
@@ -23,7 +23,7 @@ export default async function AdminTeachersPage() {
 
   return (
     <main className="flex-1">
-      <section className="mx-auto max-w-4xl px-6 pt-6 pb-24">
+      <section className="mx-auto max-w-4xl px-6 pb-24">
         <div className="mb-8">
           <p className="font-mono text-xs uppercase tracking-widest text-bronze">
             Management
diff --git a/src/components/admin/RecruitmentPanel.tsx b/src/components/admin/RecruitmentPanel.tsx
index 7c28ed7..d5b6c66 100644
--- a/src/components/admin/RecruitmentPanel.tsx
+++ b/src/components/admin/RecruitmentPanel.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { toShareUrl } from "@/lib/recruitment";
 
 export interface RecruitmentPanelState {
   isOpen: boolean;
@@ -20,6 +21,15 @@ export default function RecruitmentPanel({ initial }: { initial: RecruitmentPane
   const [error, setError] = useState<string | null>(null);
   const [saving, setSaving] = useState(false);
 
+  // Deliberately derived from `saved`, not the editor state: this line describes
+  // what /join is serving right now. Reading the unsaved fields would announce a
+  // drive as open the moment someone ticked the box, before anything was written.
+  const liveStatus = !saved.formUrl
+    ? "No form link saved yet — /join is showing the closed notice."
+    : saved.isOpen
+      ? "Recruitment is open. /join is showing the form."
+      : "Recruitment is closed. /join is showing the closed notice.";
+
   const dirty =
     isOpen !== saved.isOpen ||
     formUrl !== (saved.formUrl ?? "") ||
@@ -129,6 +139,20 @@ export default function RecruitmentPanel({ initial }: { initial: RecruitmentPane
           )}
         </div>
 
+        <div className="mt-5 flex flex-wrap items-center gap-x-4 gap-y-2 border-t border-hairline pt-4">
+          <span className="text-xs text-charcoal/70">{liveStatus}</span>
+          {saved.formUrl && (
+            <a
+              href={toShareUrl(saved.formUrl)}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-mono text-[11px] uppercase tracking-wider text-bronze hover:text-chocolate transition"
+            >
+              Preview the saved form &rarr;
+            </a>
+          )}
+        </div>
+
         <p className="mt-4 text-[11px] text-charcoal/45">
           Paste either the plain form link or the one from the embed (&lt;&gt;) dialog — both
           work. Must be an https://docs.google.com/forms/… URL.