neuron-technologies/neuron
2
0
Fork 0
Code Issues 44 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(app): update review panel tooltip to v2 (#37095)

Browse Source
This commit is contained in:
Aarav Sareen
2026-07-17 15:08:47 +05:30
committed by GitHub
parent 06c4f173d1
commit 92fb1759cd
3 changed files with 39 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/session/session-sortable-tab-v2.tsx
+13 -5
View File
@@ -2,7 +2,8 @@ import { createMemo, Show } from "solid-js"
import type { JSX } from "solid-js" import type { JSX } from "solid-js"
import { useSortable } from "@dnd-kit/solid/sortable" import { useSortable } from "@dnd-kit/solid/sortable"
import { IconButton } from "@opencode-ai/ui/icon-button" import { IconButton } from "@opencode-ai/ui/icon-button"
import { TooltipKeybind } from "@opencode-ai/ui/tooltip" import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
import { Tabs } from "@opencode-ai/ui/tabs" import { Tabs } from "@opencode-ai/ui/tabs"
import { useFile } from "@/context/file" import { useFile } from "@/context/file"
import { useLanguage } from "@/context/language" import { useLanguage } from "@/context/language"
@@ -19,6 +20,7 @@ export function SortableTabV2(props: {
const file = useFile() const file = useFile()
const language = useLanguage() const language = useLanguage()
const command = useCommand() const command = useCommand()
const closeTabKeybind = createMemo(() => command.keybindParts("tab.close"))
const sortable = useSortable({ const sortable = useSortable({
get id() { get id() {
return props.tab return props.tab
@@ -39,9 +41,15 @@ export function SortableTabV2(props: {
<Tabs.Trigger <Tabs.Trigger
value={props.tab} value={props.tab}
closeButton={ closeButton={
<TooltipKeybind <TooltipV2
title={language.t("common.closeTab")} value={
keybind={command.keybind("tab.close")} <>
{language.t("common.closeTab")}
<Show when={closeTabKeybind().length > 0}>
<KeybindV2 keys={closeTabKeybind()} variant="neutral" />
</Show>
</>
}
placement="bottom" placement="bottom"
gutter={10} gutter={10}
> >
@@ -52,7 +60,7 @@ export function SortableTabV2(props: {
onClick={() => props.onTabClose(props.tab)} onClick={() => props.onTabClose(props.tab)}
aria-label={language.t("common.closeTab")} aria-label={language.t("common.closeTab")}
/> />
</TooltipKeybind> </TooltipV2>
} }
hideCloseButton hideCloseButton
onMiddleClick={() => props.onTabClose(props.tab)} onMiddleClick={() => props.onTabClose(props.tab)}
packages/app/src/pages/session/session-side-panel.tsx
+21 -8
View File
@@ -237,6 +237,7 @@ export function SessionSidePanel(props: {
return active !== "review" && active !== "context" && active !== "empty" return active !== "review" && active !== "context" && active !== "empty"
}) })
const openFileKeybind = createMemo(() => command.keybindParts("file.open")) const openFileKeybind = createMemo(() => command.keybindParts("file.open"))
const closeTabKeybind = createMemo(() => command.keybindParts("tab.close"))
const [store, setStore] = createStore({ const [store, setStore] = createStore({
activeDraggable: undefined as string | undefined, activeDraggable: undefined as string | undefined,
}) })
@@ -570,9 +571,15 @@ export function SessionSidePanel(props: {
<Tabs.Trigger <Tabs.Trigger
value="context" value="context"
closeButton={ closeButton={
<TooltipKeybind <TooltipV2
title={language.t("common.closeTab")} value={
keybind={command.keybind("tab.close")} <>
{language.t("common.closeTab")}
<Show when={closeTabKeybind().length > 0}>
<KeybindV2 keys={closeTabKeybind()} variant="neutral" />
</Show>
</>
}
placement="bottom" placement="bottom"
gutter={10} gutter={10}
> >
@@ -583,7 +590,7 @@ export function SessionSidePanel(props: {
onClick={() => tabs().close("context")} onClick={() => tabs().close("context")}
aria-label={language.t("common.closeTab")} aria-label={language.t("common.closeTab")}
/> />
</TooltipKeybind> </TooltipV2>
} }
hideCloseButton hideCloseButton
onMiddleClick={() => tabs().close("context")} onMiddleClick={() => tabs().close("context")}
@@ -611,9 +618,15 @@ export function SessionSidePanel(props: {
<Tabs.Trigger <Tabs.Trigger
value={SESSION_OPEN_FILE_TAB} value={SESSION_OPEN_FILE_TAB}
closeButton={ closeButton={
<TooltipKeybind <TooltipV2
title={language.t("common.closeTab")} value={
keybind={command.keybind("tab.close")} <>
{language.t("common.closeTab")}
<Show when={closeTabKeybind().length > 0}>
<KeybindV2 keys={closeTabKeybind()} variant="neutral" />
</Show>
</>
}
placement="bottom" placement="bottom"
gutter={10} gutter={10}
> >
@@ -624,7 +637,7 @@ export function SessionSidePanel(props: {
onClick={() => tabs().close(SESSION_OPEN_FILE_TAB)} onClick={() => tabs().close(SESSION_OPEN_FILE_TAB)}
aria-label={language.t("common.closeTab")} aria-label={language.t("common.closeTab")}
/> />
</TooltipKeybind> </TooltipV2>
} }
hideCloseButton hideCloseButton
onMiddleClick={() => tabs().close(SESSION_OPEN_FILE_TAB)} onMiddleClick={() => tabs().close(SESSION_OPEN_FILE_TAB)}
packages/ui/src/components/tabs.css
+5 -1
View File
@@ -723,7 +723,11 @@ body[data-new-layout] #review-panel [data-component="tabs"][data-variant="normal
} }
&:has([data-slot="tabs-trigger-close-button"]) { &:has([data-slot="tabs-trigger-close-button"]) {
padding-right: 10px; padding-right: 8px;
[data-slot="tabs-trigger-close-button"] {
margin-left: 2px;
}
} }
&:has([data-selected]) { &:has([data-selected]) {