From 72d1192499d69821f232447c89026135b3e78611 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Wed, 28 May 2025 20:10:59 +0700
Subject: [PATCH] chore: add skip button joyride (#5125)

---
 web-app/src/containers/CustomeTooltipJoyRide.tsx        | 8 ++++++--
 web-app/src/containers/HeaderPage.tsx                   | 9 ++++-----
 web-app/src/containers/SetupScreen.tsx                  | 2 ++
 web-app/src/routes/settings/providers/$providerName.tsx | 2 +-
 4 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/web-app/src/containers/CustomeTooltipJoyRide.tsx b/web-app/src/containers/CustomeTooltipJoyRide.tsx
index 6443c6f28..aabaaf7ca 100644
--- a/web-app/src/containers/CustomeTooltipJoyRide.tsx
+++ b/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}
diff --git a/web-app/src/containers/HeaderPage.tsx b/web-app/src/containers/HeaderPage.tsx
index 6efe333bc..7c47e9273 100644
--- a/web-app/src/containers/HeaderPage.tsx
+++ b/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">
diff --git a/web-app/src/containers/SetupScreen.tsx b/web-app/src/containers/SetupScreen.tsx
index 6a41577cb..e9622ed7c 100644
--- a/web-app/src/containers/SetupScreen.tsx
+++ b/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">
diff --git a/web-app/src/routes/settings/providers/$providerName.tsx b/web-app/src/routes/settings/providers/$providerName.tsx
index 272cdb0ba..95e69f106 100644
--- a/web-app/src/routes/settings/providers/$providerName.tsx
+++ b/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}