feat: move save button to sticky top bar on job form pages

Add a sticky header to JobForm with the title, Cancel, Save, and any
extra actions (Notes/Delete on the edit page). Remove the bottom
button bar and the separate h1 from both new and edit pages.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: danbim

app/components/job-form.tsx

@@ -19,6 +19,7 @@ import type { JobOpening } from '~/db/schema'
 type JobFormProps = {
   job?: JobOpening
   errors?: Record<string, string>
+  headerActions?: React.ReactNode
 }
 
 const CURRENCIES = ['EUR', 'USD', 'GBP', 'CHF']
@@ -59,7 +60,7 @@ const RATING_CRITERIA = [
   { name: 'ratingJobSecurity', label: 'Job Security' },
 ]
 
-export function JobForm({ job, errors }: JobFormProps) {
+export function JobForm({ job, errors, headerActions }: JobFormProps) {
   const [description, setDescription] = useState(job?.description ?? '')
   const [showPreview, setShowPreview] = useState(false)
 
@@ -88,6 +89,27 @@ export function JobForm({ job, errors }: JobFormProps) {
 
   return (
     <Form method="post" className="space-y-6">
+      <div className="sticky top-0 z-10 bg-background border-b py-3 -mx-4 px-4">
+        <div className="flex items-center justify-between">
+          <h1 className="text-3xl font-bold">
+            {job ? 'Edit Job Opening' : 'Add Job Opening'}
+          </h1>
+          <div className="flex gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => history.back()}
+            >
+              Cancel
+            </Button>
+            {headerActions}
+            <Button type="submit">
+              {job ? 'Update' : 'Create'} Job Opening
+            </Button>
+          </div>
+        </div>
+      </div>
+
       <Card>
         <CardHeader>
           <CardTitle>Basic Information</CardTitle>
@@ -381,12 +403,6 @@ export function JobForm({ job, errors }: JobFormProps) {
         </CardContent>
       </Card>
 
-      <div className="flex gap-4">
-        <Button type="submit">{job ? 'Update' : 'Create'} Job Opening</Button>
-        <Button type="button" variant="outline" onClick={() => history.back()}>
-          Cancel
-        </Button>
-      </div>
     </Form>
   )
 }

app/routes/jobs.$id.edit.tsx

@@ -101,25 +101,27 @@ export default function EditJob() {
 
   return (
     <div className="container mx-auto py-8 max-w-3xl">
-      <div className="flex justify-between items-center mb-6">
-        <h1 className="text-3xl font-bold">Edit Job Opening</h1>
-        <div className="flex gap-2">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={() => setNotesPanelOpen(true)}
-          >
-            Notes ({noteCount})
-          </Button>
-          <Form method="post">
-            <input type="hidden" name="intent" value="delete" />
-            <Button type="submit" variant="destructive">
-              Delete
+      <JobForm
+        job={job}
+        errors={actionData?.errors}
+        headerActions={
+          <>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setNotesPanelOpen(true)}
+            >
+              Notes ({noteCount})
             </Button>
-          </Form>
-        </div>
-      </div>
-      <JobForm job={job} errors={actionData?.errors} />
+            <Form method="post">
+              <input type="hidden" name="intent" value="delete" />
+              <Button type="submit" variant="destructive">
+                Delete
+              </Button>
+            </Form>
+          </>
+        }
+      />
 
       <NotesPanel
         jobId={job.id}

app/routes/jobs.new.tsx

@@ -59,7 +59,6 @@ export default function NewJob() {
 
   return (
     <div className="container mx-auto py-8 max-w-3xl">
-      <h1 className="text-3xl font-bold mb-6">Add Job Opening</h1>
       <JobForm errors={actionData?.errors} />
     </div>
   )