Refine builder partner prompt flow

Author: tannerlinsley

src/components/ApplicationStarter.tsx

@@ -2,13 +2,13 @@ import * as React from 'react'
 import { useHeldKeys, useHotkey } from '@tanstack/react-hotkeys'
 
 interface ApplicationStarterHotkeysProps {
-  onAnalyze: () => void
+  onSubmit: () => void
   onModKeyChange: (isHeld: boolean) => void
   promptFocused: boolean
 }
 
 export function ApplicationStarterHotkeys({
-  onAnalyze,
+  onSubmit,
   onModKeyChange,
   promptFocused,
 }: ApplicationStarterHotkeysProps) {
@@ -20,7 +20,7 @@ export function ApplicationStarterHotkeys({
       return
     }
 
-    onAnalyze()
+    onSubmit()
   })
 
   React.useEffect(() => {

src/components/ApplicationStarterHotkeys.client.tsx

@@ -240,20 +240,24 @@ const StarterPartnerButton = React.forwardRef<
   const tierOneTone = isTierOne
     ? selected
       ? 'translate-y-[-1px] border-transparent'
-      : 'border-gray-200 bg-white hover:border-[var(--starter-partner-hover-border-color)] dark:border-gray-800 dark:bg-gray-950 dark:hover:border-[var(--starter-partner-hover-border-color)]'
+      : 'border-gray-200 bg-white hover:border-[var(--starter-partner-hover-border-color)] active:border-[var(--starter-partner-active-border-color)] dark:border-gray-800 dark:bg-gray-950 dark:hover:border-[var(--starter-partner-hover-border-color)] dark:active:border-[var(--starter-partner-active-border-color)]'
     : null
   const tierThreeTone = isTierThree
     ? selected
       ? 'translate-y-[-1px] border-current bg-white shadow-[0_4px_12px_rgba(15,23,42,0.08)] dark:bg-gray-950'
-      : 'border-gray-200 bg-white text-gray-700 hover:border-[var(--starter-partner-hover-border-color)] hover:text-current dark:border-gray-800 dark:bg-gray-950 dark:text-gray-200 dark:hover:border-[var(--starter-partner-hover-border-color)]'
+      : 'border-gray-200 bg-white text-gray-700 hover:border-[var(--starter-partner-hover-border-color)] hover:text-current active:border-[var(--starter-partner-active-border-color)] dark:border-gray-800 dark:bg-gray-950 dark:text-gray-200 dark:hover:border-[var(--starter-partner-hover-border-color)] dark:active:border-[var(--starter-partner-active-border-color)]'
     : null
+  const hoverBorderColor = colorWithAlpha(accent, 0.5) ?? accent
   const style: StarterPartnerButtonStyle = {
-    '--starter-partner-border-hover': usesPaletteSurface ? accent : undefined,
-    '--starter-partner-hover-border-color': accent,
+    '--starter-partner-active-border-color': accent,
+    '--starter-partner-border-hover': usesPaletteSurface
+      ? hoverBorderColor
+      : undefined,
+    '--starter-partner-hover-border-color': hoverBorderColor,
     backgroundColor: undefined,
     borderColor:
       isTierOne && selected
-        ? colorWithAlpha(accent, 0.92)
+        ? accent
         : selected && usesPaletteSurface
           ? accent
           : undefined,
@@ -283,7 +287,7 @@ const StarterPartnerButton = React.forwardRef<
         tierOneTone,
         usesPaletteSurface && palette.chip,
         usesPaletteSurface &&
-          'hover:border-[var(--starter-partner-border-hover)]',
+          'hover:border-[var(--starter-partner-border-hover)] active:border-[var(--starter-partner-active-border-color)]',
         tierThreeTone,
         buttonProps.className,
       )}

src/components/application-builder/parts.tsx

@@ -21,7 +21,10 @@ export interface StarterPalette {
 }
 
 export interface ApplicationStarterBuilderIntegration {
-  applyResult: (result: ApplicationStarterResult) => Promise<boolean>
+  applyResult: (
+    result: ApplicationStarterResult,
+    options?: { silent?: boolean },
+  ) => Promise<boolean>
 }
 
 export interface ApplicationStarterAnonymousQuota {
@@ -45,6 +48,7 @@ export interface StarterTryLibrary {
 }
 
 export type StarterPartnerButtonStyle = CSSProperties & {
+  '--starter-partner-active-border-color'?: string
   '--starter-partner-border-hover'?: string
   '--starter-partner-hover-border-color'?: string
 }