feat(desktop): better tooltips

packages/desktop/src/components/prompt-input.tsx

@@ -1,6 +1,6 @@
-import { Button, Icon, IconButton, Select, SelectDialog } from "@opencode-ai/ui"
+import { Button, Icon, IconButton, Select, SelectDialog, Tooltip } from "@opencode-ai/ui"
 import { useFilteredList } from "@opencode-ai/ui/hooks"
-import { createEffect, on, Component, Show, For, onMount, onCleanup } from "solid-js"
+import { createEffect, on, Component, Show, For, onMount, onCleanup, Switch, Match } from "solid-js"
 import { createStore } from "solid-js/store"
 import { FileIcon } from "@/ui"
 import { getDirectory, getFilename } from "@/utils"
@@ -519,12 +519,32 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               )}
             </SelectDialog>
           </div>
-          <IconButton
-            type="submit"
-            disabled={!session.prompt.dirty() && !session.working()}
-            icon={session.working() ? "stop" : "arrow-up"}
-            variant="primary"
-          />
+          <Tooltip
+            placement="top"
+            value={
+              <Switch>
+                <Match when={session.working()}>
+                  <div class="flex items-center gap-2">
+                    <span>Stop</span>
+                    <span class="text-icon-base text-12-medium text-[10px]!">ESC</span>
+                  </div>
+                </Match>
+                <Match when={true}>
+                  <div class="flex items-center gap-2">
+                    <span>Send</span>
+                    <Icon name="enter" size="small" class="text-icon-base" />
+                  </div>
+                </Match>
+              </Switch>
+            }
+          >
+            <IconButton
+              type="submit"
+              disabled={!session.prompt.dirty() && !session.working()}
+              icon={session.working() ? "stop" : "arrow-up"}
+              variant="primary"
+            />
+          </Tooltip>
         </div>
       </form>
     </div>

packages/ui/src/components/icon.tsx

@@ -151,6 +151,7 @@ const newIcons = {
   "square-arrow-top-right": `<path d="M7.91675 2.9165H2.91675V17.0832H17.0834V12.0832M12.0834 2.9165H17.0834V7.9165M9.58342 10.4165L16.6667 3.33317" stroke="currentColor" stroke-linecap="square"/>`,
   "circle-ban-sign": `<path d="M15.3675 4.63087L4.55742 15.441M17.9163 9.9987C17.9163 14.371 14.3719 17.9154 9.99967 17.9154C7.81355 17.9154 5.83438 17.0293 4.40175 15.5966C2.96911 14.164 2.08301 12.1848 2.08301 9.9987C2.08301 5.62644 5.62742 2.08203 9.99967 2.08203C12.1858 2.08203 14.165 2.96813 15.5976 4.40077C17.0302 5.8334 17.9163 7.81257 17.9163 9.9987Z" stroke="currentColor" stroke-linecap="round"/>`,
   stop: `<rect x="6" y="6" width="8" height="8" fill="currentColor"/>`,
+  enter: `<path d="M5.83333 15.8334L2.5 12.5L5.83333 9.16671M3.33333 12.5H17.9167V4.58337H10" stroke="currentColor" stroke-linecap="square"/>`,
 }
 
 export interface IconProps extends ComponentProps<"svg"> {

packages/ui/src/components/tooltip.css

@@ -6,54 +6,55 @@
 [data-component="tooltip"] {
   z-index: 1000;
   max-width: 320px;
-  border-radius: 12px;
+  border-radius: 6px;
   background-color: var(--surface-float-base);
-  color: var(--white);
-  padding: 2px 12px 2px 12px;
+  color: rgba(253, 252, 252, 0.94);
+  padding: 2px 8px;
+  border: 0.5px solid rgba(253, 252, 252, 0.2);
   box-shadow: var(--shadow-md);
   pointer-events: none !important;
-  transition: all 150ms ease-out;
-  transform: translate3d(0, 0, 0);
-  transform-origin: var(--kb-tooltip-content-transform-origin);
+  /* transition: all 150ms ease-out; */
+  /* transform: translate3d(0, 0, 0); */
+  /* transform-origin: var(--kb-tooltip-content-transform-origin); */
 
-  /* text-14-regular */
+  /* text-12-medium */
   font-family: var(--font-family-sans);
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-small);
   font-style: normal;
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-large); /* 171.429% */
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-large); /* 166.667% */
   letter-spacing: var(--letter-spacing-normal);
 
   &[data-expanded] {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    /* transform: translate3d(0, 0, 0); */
   }
 
   &[data-closed] {
     opacity: 0;
   }
 
-  &[data-placement="top"] {
-    &[data-closed] {
-      transform: translate3d(0, 4px, 0);
-    }
-  }
-
-  &[data-placement="bottom"] {
-    &[data-closed] {
-      transform: translate3d(0, -4px, 0);
-    }
-  }
-
-  &[data-placement="left"] {
-    &[data-closed] {
-      transform: translate3d(4px, 0, 0);
-    }
-  }
-
-  &[data-placement="right"] {
-    &[data-closed] {
-      transform: translate3d(-4px, 0, 0);
-    }
-  }
+  /* &[data-placement="top"] { */
+  /*   &[data-closed] { */
+  /*     transform: translate3d(0, 4px, 0); */
+  /*   } */
+  /* } */
+  /**/
+  /* &[data-placement="bottom"] { */
+  /*   &[data-closed] { */
+  /*     transform: translate3d(0, -4px, 0); */
+  /*   } */
+  /* } */
+  /**/
+  /* &[data-placement="left"] { */
+  /*   &[data-closed] { */
+  /*     transform: translate3d(4px, 0, 0); */
+  /*   } */
+  /* } */
+  /**/
+  /* &[data-placement="right"] { */
+  /*   &[data-closed] { */
+  /*     transform: translate3d(-4px, 0, 0); */
+  /*   } */
+  /* } */
 }

packages/ui/src/components/tooltip.tsx

@@ -1,9 +1,9 @@
 import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip"
-import { children, createEffect, createSignal, splitProps } from "solid-js"
+import { children, createEffect, createSignal, splitProps, type JSX } from "solid-js"
 import type { ComponentProps } from "solid-js"
 
 export interface TooltipProps extends ComponentProps<typeof KobalteTooltip> {
-  value: string | (() => string)
+  value: JSX.Element
   class?: string
 }
 
@@ -29,13 +29,13 @@ export function Tooltip(props: TooltipProps) {
   })
 
   return (
-    <KobalteTooltip forceMount {...others} open={open()} onOpenChange={setOpen}>
+    <KobalteTooltip forceMount {...others} open={open()} onOpenChange={setOpen} gutter={4}>
       <KobalteTooltip.Trigger as={"div"} data-component="tooltip-trigger" class={local.class}>
         {c()}
       </KobalteTooltip.Trigger>
       <KobalteTooltip.Portal>
         <KobalteTooltip.Content data-component="tooltip" data-placement={props.placement}>
-          {typeof others.value === "function" ? others.value() : others.value}
+          {others.value}
           {/* <KobalteTooltip.Arrow data-slot="arrow" /> */}
         </KobalteTooltip.Content>
       </KobalteTooltip.Portal>