Move settings gear icon to shared step header and restyle close button

apps/studio/src/components/pipeline/components/StepViewRouter.tsx

@@ -1,6 +1,9 @@
 import { createContext, useContext, useCallback, useState, type ReactNode } from "react"
+import { Link } from "@tanstack/react-router"
+import { Settings } from "lucide-react"
 import { STAGES, toCamelLabel } from "../stage-config"
 import { getStageLabelI18n } from "../pipeline-i18n"
+import { SETTINGS_STAGE_SLUGS } from "../settings-routing"
 import {
   BookView,
   ExtractView,
@@ -110,6 +113,16 @@ export function StepViewRouter({ step, bookLabel, selectedPageId, onSelectPage }
           )}
           <div ref={setHeaderSlotEl} className="contents" />
           {headerExtra}
+          {(SETTINGS_STAGE_SLUGS as readonly string[]).includes(step) && (
+            <Link
+              to="/books/$label/$step/settings"
+              params={{ label: bookLabel, step }}
+              search={{ tab: "general" }}
+              className="ml-auto text-white/60 hover:text-white transition-colors"
+            >
+              <Settings className="w-3.5 h-3.5" />
+            </Link>
+          )}
         </div>
 
         {/* Step content */}

apps/studio/src/components/pipeline/stages/translations/TranslationsView.tsx

@@ -542,14 +542,6 @@ export function TranslationsView({ bookLabel, stageSlug = "translate", selectedP
             </button>
           </>
         )}
-        <Link
-          to="/books/$label/$step/settings"
-          params={{ label: bookLabel, step: stageSlug }}
-          search={{ tab: "general" }}
-          className="text-white/60 hover:text-white transition-colors"
-        >
-          <Settings className="w-3.5 h-3.5" />
-        </Link>
       </div>
     )
     return () => setExtra(null)

apps/studio/src/routes/books.$label.$step.settings.tsx

@@ -73,7 +73,7 @@ export function StepSettingsPage() {
         <Link
           to="/books/$label/$step"
           params={{ label, step }}
-          className="text-white/60 hover:text-white transition-colors"
+          className="inline-flex items-center justify-center h-7 w-7 rounded-full bg-black/15 text-white/80 hover:bg-black/25 hover:text-white transition-colors"
         >
           <X className="w-4 h-4" />
         </Link>