feat(ui): Move commit button to nav bar

frontend/src/components/nav/workflow-nav.tsx

@@ -4,26 +4,39 @@ import React from "react"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { useWorkflowMetadata } from "@/providers/workflow"
-import { RadioIcon, ShieldAlertIcon, WorkflowIcon } from "lucide-react"
+import {
+  GitPullRequestCreateArrowIcon,
+  RadioIcon,
+  ShieldAlertIcon,
+  WorkflowIcon,
+} from "lucide-react"
 
+import { useCommitWorkflow } from "@/lib/hooks"
 import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb"
+import { Button } from "@/components/ui/button"
 import { Label } from "@/components/ui/label"
 import { Switch } from "@/components/ui/switch"
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
 
 export default function WorkflowNav() {
   const { workflow, workflowId, isLoading, isOnline, setIsOnline } =
     useWorkflowMetadata()
+  const { mutateAsync: commitAsync } = useCommitWorkflow(workflowId!)
 
   if (!workflow || isLoading) {
     return null
   }
+
+  const handleCommit = async () => {
+    console.log("Committing changes...")
+    await commitAsync()
+  }
   return (
     workflowId && (
       <div className="flex w-full items-center space-x-8">
@@ -44,6 +57,15 @@ export default function WorkflowNav() {
         </Breadcrumb>
         <TabSwitcher workflowId={workflowId} />
         <div className="flex flex-1 items-center justify-end space-x-3">
+          <Button
+            variant="outline"
+            onClick={handleCommit}
+            className="delay-50 h-7 text-xs text-muted-foreground transition duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:bg-emerald-500 hover:text-white"
+          >
+            <GitPullRequestCreateArrowIcon className="mr-2 size-4" />
+            Commit
+          </Button>
+
           <Switch
             id="enable-workflow"
             checked={isOnline}

frontend/src/components/workspace/panel/workflow/form.tsx

@@ -5,16 +5,12 @@ import { zodResolver } from "@hookform/resolvers/zod"
 
 import "@radix-ui/react-dialog"
 
-import {
-  GitPullRequestCreateArrowIcon,
-  SaveIcon,
-  Settings2Icon,
-} from "lucide-react"
+import { SaveIcon, Settings2Icon } from "lucide-react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
 
 import { Workflow } from "@/types/schemas"
-import { useCommitWorkflow, useSaveWorkflow } from "@/lib/hooks"
+import { useSaveWorkflow } from "@/lib/hooks"
 import {
   Accordion,
   AccordionContent,
@@ -67,40 +63,24 @@ export function WorkflowForm({
     },
   })
   const { mutateAsync: saveAsync } = useSaveWorkflow(workflowId)
-  const { mutateAsync: commitAsync } = useCommitWorkflow(workflowId)
 
   const onSubmit = async (values: TWorkflowForm) => {
     console.log("Saving changes...")
     await saveAsync(values)
   }
 
-  const handleCommit = async () => {
-    console.log("Committing changes...")
-    await commitAsync()
-  }
-
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
-        <div className="flex flex-1 justify-between p-4">
-          <div className="space-x-2 ">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button type="button" size="icon" onClick={handleCommit}>
-                  <GitPullRequestCreateArrowIcon className="size-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Commit Changes</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button type="submit" size="icon">
-                  <SaveIcon className="size-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Save Changes</TooltipContent>
-            </Tooltip>
-          </div>
+        <div className="flex flex-1 justify-end gap-2 p-4">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button type="submit" size="icon">
+                <SaveIcon className="size-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Save Changes</TooltipContent>
+          </Tooltip>
           <WorkflowSettings workflow={workflow} />
         </div>
         <Separator />