feat: redesign prompt editor UI with document-style depth and grounding

Author: aboderinsamuel

app/prompts/new/page.tsx

@@ -12,7 +12,6 @@ export default function NewPromptPage() {
   const router = useRouter();
   const [isDirty, setIsDirty] = useState(false);
 
-  // Warn on browser refresh / tab close when form has unsaved content
   useEffect(() => {
     if (!isDirty) return;
     const handler = (e: BeforeUnloadEvent) => {
@@ -35,16 +34,20 @@ export default function NewPromptPage() {
 
   return (
     <Layout header={<Header promptCount={prompts.length} />} sidebar={null}>
-      <div className="max-w-2xl mx-auto">
-        <button
-          onClick={handleBack}
-          className="inline-flex items-center text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 transition-colors mb-8"
-        >
-          &larr; Back
-        </button>
-        <h1 className="text-2xl font-medium text-neutral-900 dark:text-neutral-100 mb-8">
-          New prompt
-        </h1>
+      <div className="max-w-3xl mx-auto w-full">
+        <div className="flex items-center gap-3 mb-6">
+          <button
+            onClick={handleBack}
+            className="inline-flex items-center gap-1.5 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 transition-colors"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+            </svg>
+            Back
+          </button>
+          <span className="text-neutral-200 dark:text-neutral-700">/</span>
+          <span className="text-sm text-neutral-400 dark:text-neutral-500">New prompt</span>
+        </div>
         <PromptForm onDirtyChange={setIsDirty} />
       </div>
     </Layout>