fix(web): align thread details panel controls and menus (#3606)

maria committed 4 months ago

Commit 7bf0a2c1 parent 2f774f811 files · +81 −19Browse files

Unified · Split

11 files

apps/server/src/claudeModelOptions.test.ts +1 −1
apps/server/src/orchestration-v2/ProviderSelectionTransition.test.ts +1 −1
apps/web/src/components/BranchToolbarBranchSelector.tsx +5 −1
apps/web/src/components/BranchToolbarEnvModeSelector.tsx +11 −3
apps/web/src/components/BranchToolbarEnvironmentSelector.tsx +14 −3
apps/web/src/components/GitActionsControl.tsx +8 −1
apps/web/src/components/ProjectScriptsControl.tsx +10 −2
apps/web/src/components/chat/OpenInPicker.tsx +11 −3
apps/web/src/components/chat/ThreadRelationshipsControl.tsx +5 −3
apps/web/src/components/chat/glassPopupStyles.ts +6 −0
apps/web/src/components/chat/threadDetailsPanelStyles.ts +9 −1

apps/server/src/claudeModelOptions.test.ts+1−1

@@ -1,4 +1,4 @@
1	import { describe, expect, it } from "vitest";	1	import { describe, expect, it } from "@effect/vitest";
2		2
3	import { ProviderInstanceId, type ModelSelection } from "@t3tools/contracts";	3	import { ProviderInstanceId, type ModelSelection } from "@t3tools/contracts";
4		4

apps/server/src/orchestration-v2/ProviderSelectionTransition.test.ts+1−1

@@ -1,4 +1,4 @@
1	import { describe, expect, it } from "vitest";	1	import { describe, expect, it } from "@effect/vitest";
2		2
3	import {	3	import {
4	type ModelSelection,	4	type ModelSelection,

apps/web/src/components/BranchToolbarBranchSelector.tsx+5−1

 import {
   THREAD_DETAILS_PANEL_CHEVRON_CLASS,
   THREAD_DETAILS_PANEL_ICON_CLASS,
+  THREAD_DETAILS_PANEL_ROW_POPUP_CLASS,
   THREAD_DETAILS_PANEL_ROW_CLASS,
 } from "./chat/threadDetailsPanelStyles";
 import { parsePullRequestReference } from "../pullRequestReference";
       <ComboboxPopup
         align={displayMode === "panel" ? "start" : "end"}
         side={displayMode === "panel" ? "bottom" : "top"}
-        className="flex w-80 flex-col"
+        className={cn(
+          "flex flex-col",
+          displayMode === "panel" ? THREAD_DETAILS_PANEL_ROW_POPUP_CLASS : "w-80",
+        )}
       >
         <div className="shrink-0 px-3 pt-2.5">
           <div className="relative -translate-y-px border-b border-border/70 pb-1.5 transition-colors focus-within:border-ring">

apps/web/src/components/BranchToolbarEnvModeSelector.tsx+11−3

 import {
   THREAD_DETAILS_PANEL_ICON_CLASS,
   THREAD_DETAILS_PANEL_LOCKED_ROW_CLASS,
-  THREAD_DETAILS_PANEL_ROW_CLASS,
+  THREAD_DETAILS_PANEL_ROW_POPUP_CLASS,
+  THREAD_DETAILS_PANEL_SELECT_ROW_CLASS,
 } from "./chat/threadDetailsPanelStyles";
 import {
               size={displayMode === "panel" ? "default" : "xs"}
               className={cn(
                 "font-medium",
-                displayMode === "panel" && THREAD_DETAILS_PANEL_ROW_CLASS,
+                displayMode === "panel" && THREAD_DETAILS_PANEL_SELECT_ROW_CLASS,
               )}
               aria-label="Workspace"
             />
         </TooltipTrigger>
         {workspacePath ? <TooltipPopup side="left">{workspacePath}</TooltipPopup> : null}
       </Tooltip>
-      <SelectPopup>
+      <SelectPopup
+        {...(displayMode === "panel"
+          ? {
+              alignItemWithTrigger: false,
+              popupClassName: THREAD_DETAILS_PANEL_ROW_POPUP_CLASS,
+            }
+          : {})}
+      >
         <SelectGroup>
           <SelectGroupLabel>Workspace</SelectGroupLabel>
           <SelectItem value="local">

apps/web/src/components/BranchToolbarEnvironmentSelector.tsx+14−3

 import {
   THREAD_DETAILS_PANEL_ICON_CLASS,
   THREAD_DETAILS_PANEL_LOCKED_ROW_CLASS,
-  THREAD_DETAILS_PANEL_ROW_CLASS,
+  THREAD_DETAILS_PANEL_ROW_POPUP_CLASS,
+  THREAD_DETAILS_PANEL_SELECT_ROW_CLASS,
 } from "./chat/threadDetailsPanelStyles";
 import {
   Select,
       <SelectTrigger
         variant="ghost"
         size={displayMode === "panel" ? "default" : "xs"}
-        className={cn("font-medium", displayMode === "panel" && THREAD_DETAILS_PANEL_ROW_CLASS)}
+        className={cn(
+          "font-medium",
+          displayMode === "panel" && THREAD_DETAILS_PANEL_SELECT_ROW_CLASS,
+        )}
         aria-label="Run on"
       >
         {activeEnvironment?.isPrimary ? (
         )}
         <SelectValue />
       </SelectTrigger>
-      <SelectPopup>
+      <SelectPopup
+        {...(displayMode === "panel"
+          ? {
+              alignItemWithTrigger: false,
+              popupClassName: THREAD_DETAILS_PANEL_ROW_POPUP_CLASS,
+            }
+          : {})}
+      >
         <SelectGroup>
           <SelectGroupLabel>Run on</SelectGroupLabel>
           {availableEnvironments.map((env) => (

apps/web/src/components/GitActionsControl.tsx+8−1

 import {
   THREAD_DETAILS_PANEL_CHEVRON_CLASS,
   THREAD_DETAILS_PANEL_ICON_CLASS,
+  THREAD_DETAILS_PANEL_ROW_POPUP_CLASS,
   THREAD_DETAILS_PANEL_ROW_CLASS,
   THREAD_DETAILS_PANEL_SPLIT_GROUP_CLASS,
   THREAD_DETAILS_PANEL_SPLIT_PRIMARY_CLASS,
 }: GitActionsControlProps) {
   const isPanel = displayMode === "panel";
   const ActionGroup = isPanel ? "div" : Group;
+  const panelAnchorRef = useRef<HTMLDivElement | null>(null);
   const updateThreadMetadata = useAtomCommand(
     threadEnvironment.updateMetadata,
     "thread branch metadata update",
         <ActionGroup
           role="group"
           aria-label="Git actions"
+          {...(isPanel ? { ref: panelAnchorRef } : {})}
           className={cn("shrink-0", isPanel && THREAD_DETAILS_PANEL_SPLIT_GROUP_CLASS)}
         >
           {quickActionDisabledReason ? (
                 className={isPanel ? THREAD_DETAILS_PANEL_CHEVRON_CLASS : "size-4"}
               />
             </MenuTrigger>
-            <MenuPopup align="end" className="w-full">
+            <MenuPopup
+              align="end"
+              {...(isPanel ? { anchor: panelAnchorRef } : {})}
+              className={isPanel ? THREAD_DETAILS_PANEL_ROW_POPUP_CLASS : "w-full"}
+            >
               {gitActionMenuItems.map((item) => {
                 const disabledReason = getMenuActionDisabledReason({
                   item,

apps/web/src/components/ProjectScriptsControl.tsx+10−2

 import {
   THREAD_DETAILS_PANEL_CHEVRON_CLASS,
   THREAD_DETAILS_PANEL_ICON_CLASS,
+  THREAD_DETAILS_PANEL_ROW_POPUP_CLASS,
   THREAD_DETAILS_PANEL_ROW_CLASS,
   THREAD_DETAILS_PANEL_SPLIT_GROUP_CLASS,
   THREAD_DETAILS_PANEL_SPLIT_PRIMARY_CLASS,
 }: ProjectScriptsControlProps) {
   const isPanel = displayMode === "panel";
   const ActionGroup = isPanel ? "div" : Group;
+  const panelAnchorRef = React.useRef<HTMLDivElement | null>(null);
   const addScriptFormId = React.useId();
   const [editingScriptId, setEditingScriptId] = useState<string | null>(null);
   const [dialogOpen, setDialogOpen] = useState(false);
         <ActionGroup
           role="group"
           aria-label="Project scripts"
-          {...(isPanel ? { className: THREAD_DETAILS_PANEL_SPLIT_GROUP_CLASS } : {})}
+          {...(isPanel
+            ? { className: THREAD_DETAILS_PANEL_SPLIT_GROUP_CLASS, ref: panelAnchorRef }
+            : {})}
         >
           <Tooltip>
             <TooltipTrigger
                 className={isPanel ? THREAD_DETAILS_PANEL_CHEVRON_CLASS : "size-4"}
               />
             </MenuTrigger>
-            <MenuPopup align="end">
+            <MenuPopup
+              align="end"
+              {...(isPanel ? { anchor: panelAnchorRef } : {})}
+              className={isPanel ? THREAD_DETAILS_PANEL_ROW_POPUP_CLASS : undefined}
+            >
               {scripts.map((script) => {
                 const shortcutLabel = shortcutLabelForCommand(
                   keybindings,

apps/web/src/components/chat/OpenInPicker.tsx+11−3

 import { EditorId, type EnvironmentId, type ResolvedKeybindingsConfig } from "@t3tools/contracts";
-import { memo, useCallback, useMemo } from "react";
+import { memo, useCallback, useMemo, useRef } from "react";
 import { shortcutLabelForCommand } from "../../keybindings";
 import { usePreferredEditor } from "../../editorPreferences";
 import { ChevronDownIcon, FolderClosedIcon } from "lucide-react";
 import {
   THREAD_DETAILS_PANEL_CHEVRON_CLASS,
   THREAD_DETAILS_PANEL_ICON_CLASS,
+  THREAD_DETAILS_PANEL_ROW_POPUP_CLASS,
   THREAD_DETAILS_PANEL_SPLIT_GROUP_CLASS,
   THREAD_DETAILS_PANEL_SPLIT_PRIMARY_CLASS,
   THREAD_DETAILS_PANEL_SPLIT_SECONDARY_CLASS,
 }) {
   const isPanel = displayMode === "panel";
   const ActionGroup = isPanel ? "div" : Group;
+  const panelAnchorRef = useRef<HTMLDivElement | null>(null);
   const openInEditorMutation = useAtomCommand(shellEnvironment.openInEditor, "open in editor");
   const [preferredEditor, setPreferredEditor] = usePreferredEditor(availableEditors);
   const options = useMemo(
     <ActionGroup
       aria-label="Open in editor"
       role="group"
-      {...(isPanel ? { className: THREAD_DETAILS_PANEL_SPLIT_GROUP_CLASS } : {})}
+      {...(isPanel
+        ? { className: THREAD_DETAILS_PANEL_SPLIT_GROUP_CLASS, ref: panelAnchorRef }
+        : {})}
     >
       <Button
         aria-label={compact ? "Open file in preferred editor" : primaryLabel}
             className={isPanel ? THREAD_DETAILS_PANEL_CHEVRON_CLASS : "size-4"}
           />
         </MenuTrigger>
-        <MenuPopup align="end">
+        <MenuPopup
+          align="end"
+          {...(isPanel ? { anchor: panelAnchorRef } : {})}
+          className={isPanel ? THREAD_DETAILS_PANEL_ROW_POPUP_CLASS : undefined}
+        >
           {options.length === 0 && <MenuItem disabled>No installed editors found</MenuItem>}
           {options.map(({ label, Icon, value }) => (
             <MenuItem key={value} onClick={() => openInEditor(value)}>

apps/web/src/components/chat/ThreadRelationshipsControl.tsx+5−3

 import { Menu, MenuItem, MenuPopup, MenuTrigger } from "../ui/menu";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import {
-  THREAD_DETAILS_PANEL_ICON_CLASS,
   THREAD_DETAILS_PANEL_ICON_ACTION_CLASS,
   THREAD_DETAILS_PANEL_LINK_ROW_CLASS,
   THREAD_DETAILS_PANEL_LINK_SPLIT_GROUP_CLASS,
   THREAD_DETAILS_PANEL_LINK_SPLIT_PRIMARY_CLASS,
   THREAD_DETAILS_PANEL_LINK_SPLIT_SECONDARY_CLASS,
+  THREAD_DETAILS_PANEL_MENU_POPUP_CLASS,
   THREAD_DETAILS_PANEL_SPLIT_SEPARATOR_CLASS,
 } from "./threadDetailsPanelStyles";
+const THREAD_RELATIONSHIP_ICON_CLASS = "size-4 shrink-0 text-muted-foreground";
 function relationshipLabel(edge: ThreadRelationshipEdge, currentThreadId: ThreadId) {
   if (edge.kind === "transfer") return "Context transfer";
   if (edge.kind === "subagent") {
               >
                 <MoreHorizontalIcon className="size-3.5" />
               </MenuTrigger>
-              <MenuPopup align="end">
+              <MenuPopup align="end" className={THREAD_DETAILS_PANEL_MENU_POPUP_CLASS}>
                 <MenuItem onClick={() => void detach()}>
                   <UnplugIcon className="size-3.5" />
                   Disconnect agent session
             const relationshipContent = (
               <>
                 <span className="relative -mx-0.5 grid size-4 shrink-0 place-items-center">
-                  <RelationshipIcon className={THREAD_DETAILS_PANEL_ICON_CLASS} />
+                  <RelationshipIcon className={THREAD_RELATIONSHIP_ICON_CLASS} />
                   <span
                     className={cn(
                       "absolute -bottom-1 -right-1 size-2 rounded-full border-2 border-card",

apps/web/src/components/chat/glassPopupStyles.ts+6−0

@@ -0,0 +1,6 @@
	1	export const CHAT_GLASS_POPUP_SURFACE_CLASS =
	2	"floating-glass-surface !bg-[color-mix(in_srgb,var(--card)_20%,transparent)] dark:!bg-[color-mix(in_srgb,var(--card)_45%,transparent)]";
	3
	4	export const CHAT_GLASS_ROW_POPUP_CLASS = `${CHAT_GLASS_POPUP_SURFACE_CLASS} w-(--anchor-width)`;
	5
	6	export const CHAT_GLASS_MENU_POPUP_CLASS = `${CHAT_GLASS_POPUP_SURFACE_CLASS} min-w-60 max-w-(--available-width)`;

apps/web/src/components/chat/threadDetailsPanelStyles.ts+9−1

+import { CHAT_GLASS_MENU_POPUP_CLASS, CHAT_GLASS_ROW_POPUP_CLASS } from "./glassPopupStyles";
 /**
  * Visual primitives shared by controls when they are rendered in the thread details panel.
  *
 export const THREAD_DETAILS_PANEL_ROW_CLASS = `h-9 w-full justify-start gap-2.5 rounded-lg border-transparent bg-transparent px-2.5 text-[13px] font-medium text-foreground/80 sm:h-9 sm:text-[13px] ${THREAD_DETAILS_PANEL_ROW_SURFACE_CLASS}`;
+export const THREAD_DETAILS_PANEL_SELECT_ROW_CLASS = `${THREAD_DETAILS_PANEL_ROW_CLASS} pe-0 before:pointer-events-none before:absolute before:inset-0 [&_[data-slot=select-icon]]:-me-px [&_[data-slot=select-icon]]:relative [&_[data-slot=select-icon]]:flex [&_[data-slot=select-icon]]:h-full [&_[data-slot=select-icon]]:w-8 [&_[data-slot=select-icon]]:shrink-0 [&_[data-slot=select-icon]]:items-center [&_[data-slot=select-icon]]:justify-center [&_[data-slot=select-icon]]:before:absolute [&_[data-slot=select-icon]]:before:-left-px [&_[data-slot=select-icon]]:before:top-1/2 [&_[data-slot=select-icon]]:before:h-4 [&_[data-slot=select-icon]]:before:w-px [&_[data-slot=select-icon]]:before:-translate-y-1/2 [&_[data-slot=select-icon]]:before:bg-border/65 [&_[data-slot=select-icon]>svg]:me-0 [&_[data-slot=select-icon]>svg]:size-4 [&_[data-slot=select-icon]>svg]:text-muted-foreground [&_[data-slot=select-icon]>svg]:opacity-100`;
 export const THREAD_DETAILS_PANEL_LINK_ROW_CLASS = `flex h-9 min-w-0 flex-1 cursor-pointer items-center justify-start gap-2.5 rounded-lg border border-transparent bg-transparent px-2.5 text-left text-[13px] font-medium text-foreground/80 disabled:cursor-not-allowed disabled:opacity-55 sm:h-9 sm:text-[13px] ${THREAD_DETAILS_PANEL_ROW_SURFACE_CLASS}`;
 export const THREAD_DETAILS_PANEL_LINK_SPLIT_GROUP_CLASS = `group/thread-details-link flex w-full items-center rounded-lg transition-colors ${THREAD_DETAILS_PANEL_HOVER_SURFACE_CLASS}`;
 export const THREAD_DETAILS_PANEL_LOCKED_ROW_CLASS =
   "h-9 w-full justify-start gap-2.5 rounded-lg border border-transparent px-2.5 text-[13px] font-medium text-foreground/80 sm:h-9 sm:text-[13px]";
-export const THREAD_DETAILS_PANEL_ICON_CLASS = "size-4 shrink-0 text-muted-foreground";
+export const THREAD_DETAILS_PANEL_ICON_CLASS = "-mx-0.5 size-4 shrink-0 text-muted-foreground";
 export const THREAD_DETAILS_PANEL_CHEVRON_CLASS = "size-4 shrink-0 text-muted-foreground";
 export const THREAD_DETAILS_PANEL_SPLIT_SECONDARY_CLASS = `h-9 w-8 rounded-s-none border-transparent bg-transparent px-0 sm:h-9 sm:w-8 ${THREAD_DETAILS_PANEL_SPLIT_BUTTON_SURFACE_CLASS}`;
 export const THREAD_DETAILS_PANEL_SPLIT_SEPARATOR_CLASS = "h-4 w-px shrink-0 bg-border/65";
+export const THREAD_DETAILS_PANEL_ROW_POPUP_CLASS = CHAT_GLASS_ROW_POPUP_CLASS;
+export const THREAD_DETAILS_PANEL_MENU_POPUP_CLASS = CHAT_GLASS_MENU_POPUP_CLASS;