From f516d3b611a12ae0feb50a796e18454c9619b790 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Tue, 1 Apr 2025 15:47:56 -0600
Subject: [PATCH] pass save events differently

---
 .../features/popups/SaveResetFilePopup.tsx    | 14 ++----
 web/src/components/ui/buttons/Button.tsx      |  2 +-
 .../ui/layouts/PreventNavigation.tsx          |  8 ++--
 .../components/ui/segmented/AppSegmented.tsx  | 44 +++++++++----------
 4 files changed, 29 insertions(+), 39 deletions(-)

diff --git a/web/src/components/features/popups/SaveResetFilePopup.tsx b/web/src/components/features/popups/SaveResetFilePopup.tsx
index ef4fc0439..3a618bfda 100644
--- a/web/src/components/features/popups/SaveResetFilePopup.tsx
+++ b/web/src/components/features/popups/SaveResetFilePopup.tsx
@@ -35,9 +35,7 @@ const SplitterContent: React.FC<{
         <PopupSplitter />
 
         <div className="flex items-center space-x-2">
-          <Button variant={'default'} onClick={onReset}>
-            Reset
-          </Button>
+          <Button onClick={onReset}>Reset</Button>
           <Button
             className="flex items-center"
             variant="black"
@@ -58,14 +56,8 @@ const SplitterContent: React.FC<{
         title="Unsaved changes"
         isDirty={open}
         description="Are you sure you want to leave this page?"
-        onOk={() => {
-          onSave();
-          return Promise.resolve();
-        }}
-        onCancel={() => {
-          onReset();
-          return Promise.resolve();
-        }}
+        onOk={onSave}
+        onCancel={onReset}
       />
     </React.Fragment>
   );
diff --git a/web/src/components/ui/buttons/Button.tsx b/web/src/components/ui/buttons/Button.tsx
index 4a73559d2..50918f8ca 100644
--- a/web/src/components/ui/buttons/Button.tsx
+++ b/web/src/components/ui/buttons/Button.tsx
@@ -36,7 +36,7 @@ const sizeVariants = {
 };
 
 export const buttonVariants = cva(
-  'inline-flex items-center overflow-hidden text-base justify-center gap-1.5 shadow rounded transition-all duration-300 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed data-[loading=true]:cursor-progress',
+  'inline-flex items-center overflow-hidden text-base justify-center gap-1.5 shadow rounded transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed data-[loading=true]:cursor-progress',
   {
     variants: {
       variant: buttonTypeClasses,
diff --git a/web/src/components/ui/layouts/PreventNavigation.tsx b/web/src/components/ui/layouts/PreventNavigation.tsx
index cc65c0255..21f92c891 100644
--- a/web/src/components/ui/layouts/PreventNavigation.tsx
+++ b/web/src/components/ui/layouts/PreventNavigation.tsx
@@ -12,9 +12,9 @@ type PreventNavigationProps = {
   description: string;
   cancelText?: string;
   okText?: string;
-  onOk: () => Promise<void>;
-  onCancel: () => Promise<void>;
-  onClose?: () => void;
+  onOk: (() => Promise<void>) | (() => void);
+  onCancel: (() => Promise<void>) | (() => void);
+  onClose?: (() => Promise<void>) | (() => void);
   doNotLeavePageOnOkay?: boolean;
 };
 
@@ -108,7 +108,7 @@ export const PreventNavigation: React.FC<PreventNavigationProps> = React.memo(
             document.querySelectorAll('a').forEach((link) => {
               link.addEventListener('click', handleClick);
             });
-          }, 0);
+          }, 5);
         };
 
         setLeavingPage(true);
diff --git a/web/src/components/ui/segmented/AppSegmented.tsx b/web/src/components/ui/segmented/AppSegmented.tsx
index 75ece2f31..5c0af2b05 100644
--- a/web/src/components/ui/segmented/AppSegmented.tsx
+++ b/web/src/components/ui/segmented/AppSegmented.tsx
@@ -251,29 +251,27 @@ function SegmentedTriggerComponent<T extends string = string>(props: SegmentedTr
 
   return (
     <Tooltip title={tooltip || ''} sideOffset={10} delayDuration={150}>
-      <LinkDiv href={link || ''} onClick={handleClick}>
-        <Tabs.Trigger
-          key={value}
-          value={value}
-          disabled={disabled}
-          asChild
-          ref={(el) => {
-            if (el) tabRefs.current.set(value, el);
-          }}
-          className={cn(
-            triggerVariants({
-              size,
-              block,
-              disabled,
-              selected: selectedValue === value
-            })
-          )}>
-          <div className="">
-            {icon && <span className={cn('flex items-center text-sm')}>{icon}</span>}
-            {label && <span className={cn('text-sm')}>{label}</span>}
-          </div>
-        </Tabs.Trigger>
-      </LinkDiv>
+      <Tabs.Trigger
+        key={value}
+        value={value}
+        disabled={disabled}
+        asChild
+        ref={(el) => {
+          if (el) tabRefs.current.set(value, el);
+        }}
+        className={cn(
+          triggerVariants({
+            size,
+            block,
+            disabled,
+            selected: selectedValue === value
+          })
+        )}>
+        <LinkDiv href={link || ''} onClick={handleClick}>
+          {icon && <span className={cn('flex items-center text-sm')}>{icon}</span>}
+          {label && <span className={cn('text-sm')}>{label}</span>}
+        </LinkDiv>
+      </Tabs.Trigger>
     </Tooltip>
   );
 }