chore: add skip button joyride (#5125)

web-app/src/containers/CustomeTooltipJoyRide.tsx

@@ -37,7 +37,11 @@ export function CustomTooltipJoyRide(props: TooltipRenderProps) {
         )}
       >
         {step.showSkipButton && (
-          <Button variant="link" className="px-0" {...skipProps}>
+          <Button
+            variant="link"
+            className="px-0 text-main-view-fg/70"
+            {...skipProps}
+          >
             {skipProps.title}
           </Button>
         )}
@@ -45,7 +49,7 @@ export function CustomTooltipJoyRide(props: TooltipRenderProps) {
           {index > 0 && (
             <Button
               variant="link"
-              className="px-0 text-main-view-fg/60"
+              className="px-0 text-main-view-fg/70"
               {...backProps}
             >
               {backProps.title}

web-app/src/containers/HeaderPage.tsx

@@ -2,20 +2,19 @@ import { useLeftPanel } from '@/hooks/useLeftPanel'
 import { cn } from '@/lib/utils'
 import { IconLayoutSidebar } from '@tabler/icons-react'
 import { ReactNode } from '@tanstack/react-router'
-import { platform } from '@tauri-apps/plugin-os'
 
 type HeaderPageProps = {
-  children: ReactNode
+  children?: ReactNode
 }
 const HeaderPage = ({ children }: HeaderPageProps) => {
-  const platformName = platform()
   const { open, setLeftPanel } = useLeftPanel()
 
   return (
     <div
       className={cn(
-        'h-10 border-b border-main-view-fg/5 pl-18 text-main-view-fg flex items-center shrink-0',
-        platformName === 'macos' && !open ? 'pl-18' : 'pl-4'
+        'h-10 pl-18 text-main-view-fg flex items-center shrink-0 border-b border-main-view-fg/5',
+        IS_MACOS && !open ? 'pl-18' : 'pl-4',
+        children === undefined && 'border-none'
       )}
     >
       <div className="flex items-center w-full gap-2">

web-app/src/containers/SetupScreen.tsx

@@ -2,6 +2,7 @@ import { Card } from './Card'
 import { useModelProvider } from '@/hooks/useModelProvider'
 import { Link } from '@tanstack/react-router'
 import { route } from '@/constants/routes'
+import HeaderPage from './HeaderPage'
 
 function SetupScreen() {
   const { providers } = useModelProvider()
@@ -10,6 +11,7 @@ function SetupScreen() {
 
   return (
     <div className="flex h-full flex-col flex-justify-center">
+      <HeaderPage></HeaderPage>
       <div className="h-full px-8 overflow-y-auto flex flex-col gap-2 justify-center ">
         <div className="w-4/6 mx-auto">
           <div className="mb-8 text-left">

web-app/src/routes/settings/providers/$providerName.tsx

@@ -94,7 +94,7 @@ function ProviderDetail() {
         tooltipComponent={CustomTooltipJoyRide}
         spotlightPadding={0}
         continuous={true}
-        showSkipButton={false}
+        showSkipButton={true}
         hideCloseButton={true}
         spotlightClicks={true}
         disableOverlayClose={true}