From 6ac96a7dd3ac00bbc204dbd8f97af3764729556b Mon Sep 17 00:00:00 2001
From: ss <sander@sonstabo.com>
Date: Sat, 20 Jun 2026 09:37:25 +0200
Subject: [PATCH 1/3] fix(ui): move menu checks to the right

---
 apps/web/src/components/chat/ChatComposer.tsx | 23 +++--
 apps/web/src/components/chat/TraitsPicker.tsx | 93 ++++++++++++-------
 apps/web/src/components/ui/menu.tsx           | 46 +++++----
 3 files changed, 102 insertions(+), 60 deletions(-)

diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index db26fa55a73..147da5cf25f 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -95,6 +95,7 @@ import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { toastManager } from "../ui/toast";
 import {
   BotIcon,
+  CheckIcon,
   CircleAlertIcon,
   ListTodoIcon,
   PencilRulerIcon,
@@ -273,16 +274,20 @@ const ComposerFooterModeControls = memo(function ComposerFooterModeControls(prop
             {runtimeModeOptions.map((mode) => {
               const option = runtimeModeConfig[mode];
               const OptionIcon = option.icon;
+              const isSelected = props.runtimeMode === mode;
               return (
-                <SelectItem key={mode} value={mode} className="min-w-64 py-2">
-                  <div className="grid min-w-0 gap-0.5">
-                    <span className="inline-flex items-center gap-1.5 font-medium text-foreground">
-                      <OptionIcon className="size-3.5 shrink-0 text-muted-foreground" />
-                      {option.label}
-                    </span>
-                    <span className="text-muted-foreground text-xs leading-4">
-                      {option.description}
-                    </span>
+                <SelectItem key={mode} value={mode} hideIndicator className="min-w-64 py-2">
+                  <div className="flex min-w-0 items-center gap-3">
+                    <div className="grid min-w-0 flex-1 gap-0.5">
+                      <span className="inline-flex items-center gap-1.5 font-medium text-foreground">
+                        <OptionIcon className="size-3.5 shrink-0 text-muted-foreground" />
+                        {option.label}
+                      </span>
+                      <span className="text-muted-foreground text-xs leading-4">
+                        {option.description}
+                      </span>
+                    </div>
+                    <CheckIcon className={cn("size-4", isSelected ? "opacity-100" : "opacity-0")} />
                   </div>
                 </SelectItem>
               );
diff --git a/apps/web/src/components/chat/TraitsPicker.tsx b/apps/web/src/components/chat/TraitsPicker.tsx
index 91e14f20a91..c157d2e135a 100644
--- a/apps/web/src/components/chat/TraitsPicker.tsx
+++ b/apps/web/src/components/chat/TraitsPicker.tsx
@@ -16,7 +16,7 @@ import {
 } from "@t3tools/shared/model";
 import { memo, useCallback, useState } from "react";
 import type { VariantProps } from "class-variance-authority";
-import { ChevronDownIcon } from "lucide-react";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
 import { Button, buttonVariants } from "../ui/button";
 import {
   Menu,
@@ -310,30 +310,44 @@ export const TraitsMenuContent = memo(function TraitsMenuContentImpl({
                 option.
               </div>
             ) : null}
-            <MenuRadioGroup
-              value={
+            {(() => {
+              const selectedValue =
                 ultrathinkPromptControlled && descriptor.id === primarySelectDescriptor?.id
                   ? "ultrathink"
-                  : (getDescriptorStringValue(descriptor) ?? "")
-              }
-              onValueChange={(value) => handleSelectChange(descriptor, value)}
-            >
-              {descriptor.options.map((option) => (
-                <MenuRadioItem
-                  key={option.id}
-                  value={option.id}
-                  disabled={ultrathinkInBodyText && descriptor.id === primarySelectDescriptor?.id}
+                  : (getDescriptorStringValue(descriptor) ?? "");
+              return (
+                <MenuRadioGroup
+                  value={selectedValue}
+                  onValueChange={(value) => handleSelectChange(descriptor, value)}
                 >
-                  {option.label}
-                  {option.isDefault ? (
-                    <>
-                      {" "}
-                      <DefaultBadge />
-                    </>
-                  ) : null}
-                </MenuRadioItem>
-              ))}
-            </MenuRadioGroup>
+                  {descriptor.options.map((option) => (
+                    <MenuRadioItem
+                      key={option.id}
+                      value={option.id}
+                      hideIndicator
+                      disabled={
+                        ultrathinkInBodyText && descriptor.id === primarySelectDescriptor?.id
+                      }
+                    >
+                      <span className="flex w-full min-w-0 items-center justify-between gap-3">
+                        <span className="min-w-0 truncate">
+                          {option.label}
+                          {option.isDefault ? (
+                            <>
+                              {" "}
+                              <DefaultBadge />
+                            </>
+                          ) : null}
+                        </span>
+                        {option.id === selectedValue ? (
+                          <CheckIcon className="size-3.5 shrink-0" />
+                        ) : null}
+                      </span>
+                    </MenuRadioItem>
+                  ))}
+                </MenuRadioGroup>
+              );
+            })()}
           </MenuGroup>
         </div>
       ))}
@@ -344,17 +358,30 @@ export const TraitsMenuContent = memo(function TraitsMenuContentImpl({
             <div className="px-2 py-1.5 font-medium text-muted-foreground text-xs">
               {descriptor.label}
             </div>
-            <MenuRadioGroup
-              value={descriptor.currentValue === true ? "on" : "off"}
-              onValueChange={(value) => {
-                updateDescriptors(
-                  replaceDescriptorCurrentValue(descriptors, descriptor.id, value === "on"),
-                );
-              }}
-            >
-              <MenuRadioItem value="on">On</MenuRadioItem>
-              <MenuRadioItem value="off">Off</MenuRadioItem>
-            </MenuRadioGroup>
+            {(() => {
+              const selectedValue = descriptor.currentValue === true ? "on" : "off";
+              return (
+                <MenuRadioGroup
+                  value={selectedValue}
+                  onValueChange={(value) => {
+                    updateDescriptors(
+                      replaceDescriptorCurrentValue(descriptors, descriptor.id, value === "on"),
+                    );
+                  }}
+                >
+                  {(["on", "off"] as const).map((value) => (
+                    <MenuRadioItem key={value} value={value} hideIndicator>
+                      <span className="flex w-full min-w-0 items-center justify-between gap-3">
+                        <span>{value === "on" ? "On" : "Off"}</span>
+                        {value === selectedValue ? (
+                          <CheckIcon className="size-3.5 shrink-0" />
+                        ) : null}
+                      </span>
+                    </MenuRadioItem>
+                  ))}
+                </MenuRadioGroup>
+              );
+            })()}
           </MenuGroup>
         </div>
       ))}
diff --git a/apps/web/src/components/ui/menu.tsx b/apps/web/src/components/ui/menu.tsx
index 07e27d23f46..e9ee42c8f65 100644
--- a/apps/web/src/components/ui/menu.tsx
+++ b/apps/web/src/components/ui/menu.tsx
@@ -147,32 +147,42 @@ function MenuRadioGroup(props: MenuPrimitive.RadioGroup.Props) {
   return <MenuPrimitive.RadioGroup data-slot="menu-radio-group" {...props} />;
 }
 
-function MenuRadioItem({ className, children, ...props }: MenuPrimitive.RadioItem.Props) {
+function MenuRadioItem({
+  className,
+  children,
+  hideIndicator = false,
+  ...props
+}: MenuPrimitive.RadioItem.Props & {
+  hideIndicator?: boolean;
+}) {
   return (
     <MenuPrimitive.RadioItem
       className={cn(
-        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default items-center gap-2 rounded-sm py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        hideIndicator ? "grid-cols-[1fr] ps-3 pe-3" : "grid-cols-[1rem_1fr] ps-2 pe-4",
         className,
       )}
       data-slot="menu-radio-item"
       {...props}
     >
-      <MenuPrimitive.RadioItemIndicator className="col-start-1">
-        <svg
-          fill="none"
-          height="24"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="2"
-          viewBox="0 0 24 24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
-        </svg>
-      </MenuPrimitive.RadioItemIndicator>
-      <span className="col-start-2">{children}</span>
+      {hideIndicator ? null : (
+        <MenuPrimitive.RadioItemIndicator className="col-start-1">
+          <svg
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
+          </svg>
+        </MenuPrimitive.RadioItemIndicator>
+      )}
+      <span className={hideIndicator ? "col-start-1" : "col-start-2"}>{children}</span>
     </MenuPrimitive.RadioItem>
   );
 }

From 412fcdd3cc2c87f0dfc454bae3607c5d3f9a1a55 Mon Sep 17 00:00:00 2001
From: ss <sander@sonstabo.com>
Date: Sat, 20 Jun 2026 09:37:53 +0200
Subject: [PATCH 2/3] fix(ui): make selected menu checks blue

---
 apps/web/src/components/chat/ChatComposer.tsx | 7 ++++++-
 apps/web/src/components/chat/TraitsPicker.tsx | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index 147da5cf25f..6ec2e631d19 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -287,7 +287,12 @@ const ComposerFooterModeControls = memo(function ComposerFooterModeControls(prop
                         {option.description}
                       </span>
                     </div>
-                    <CheckIcon className={cn("size-4", isSelected ? "opacity-100" : "opacity-0")} />
+                    <CheckIcon
+                      className={cn(
+                        "size-4 text-blue-400",
+                        isSelected ? "opacity-100" : "opacity-0",
+                      )}
+                    />
                   </div>
                 </SelectItem>
               );
diff --git a/apps/web/src/components/chat/TraitsPicker.tsx b/apps/web/src/components/chat/TraitsPicker.tsx
index c157d2e135a..8816d45d85e 100644
--- a/apps/web/src/components/chat/TraitsPicker.tsx
+++ b/apps/web/src/components/chat/TraitsPicker.tsx
@@ -340,7 +340,7 @@ export const TraitsMenuContent = memo(function TraitsMenuContentImpl({
                           ) : null}
                         </span>
                         {option.id === selectedValue ? (
-                          <CheckIcon className="size-3.5 shrink-0" />
+                          <CheckIcon className="size-3.5 shrink-0 text-blue-400" />
                         ) : null}
                       </span>
                     </MenuRadioItem>
@@ -374,7 +374,7 @@ export const TraitsMenuContent = memo(function TraitsMenuContentImpl({
                       <span className="flex w-full min-w-0 items-center justify-between gap-3">
                         <span>{value === "on" ? "On" : "Off"}</span>
                         {value === selectedValue ? (
-                          <CheckIcon className="size-3.5 shrink-0" />
+                          <CheckIcon className="size-3.5 shrink-0 text-blue-400" />
                         ) : null}
                       </span>
                     </MenuRadioItem>

From 5141f95df0c98b7297b2e0baaa8c5f25ae03dfe9 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Sat, 18 Jul 2026 13:26:46 +0200
Subject: [PATCH 3/3] Refactor trait option rendering

Co-authored-by: codex <codex@users.noreply.github.com>
---
 apps/web/src/components/chat/TraitsPicker.tsx | 166 +++++++++---------
 1 file changed, 81 insertions(+), 85 deletions(-)

diff --git a/apps/web/src/components/chat/TraitsPicker.tsx b/apps/web/src/components/chat/TraitsPicker.tsx
index 8816d45d85e..714ee4239f3 100644
--- a/apps/web/src/components/chat/TraitsPicker.tsx
+++ b/apps/web/src/components/chat/TraitsPicker.tsx
@@ -297,94 +297,90 @@ export const TraitsMenuContent = memo(function TraitsMenuContentImpl({
 
   return (
     <>
-      {selectDescriptors.map((descriptor, index) => (
-        <div key={descriptor.id}>
-          {index > 0 ? <MenuDivider /> : null}
-          <MenuGroup>
-            <div className="px-2 pt-1.5 pb-1 font-medium text-muted-foreground text-xs">
-              {descriptor.label}
-            </div>
-            {ultrathinkInBodyText && descriptor.id === primarySelectDescriptor?.id ? (
-              <div className="px-2 pb-1.5 text-muted-foreground/80 text-xs">
-                Your prompt contains &quot;ultrathink&quot; in the text. Remove it to change this
-                option.
+      {selectDescriptors.map((descriptor, index) => {
+        const selectedValue =
+          ultrathinkPromptControlled && descriptor.id === primarySelectDescriptor?.id
+            ? "ultrathink"
+            : (getDescriptorStringValue(descriptor) ?? "");
+
+        return (
+          <div key={descriptor.id}>
+            {index > 0 ? <MenuDivider /> : null}
+            <MenuGroup>
+              <div className="px-2 pt-1.5 pb-1 font-medium text-muted-foreground text-xs">
+                {descriptor.label}
               </div>
-            ) : null}
-            {(() => {
-              const selectedValue =
-                ultrathinkPromptControlled && descriptor.id === primarySelectDescriptor?.id
-                  ? "ultrathink"
-                  : (getDescriptorStringValue(descriptor) ?? "");
-              return (
-                <MenuRadioGroup
-                  value={selectedValue}
-                  onValueChange={(value) => handleSelectChange(descriptor, value)}
-                >
-                  {descriptor.options.map((option) => (
-                    <MenuRadioItem
-                      key={option.id}
-                      value={option.id}
-                      hideIndicator
-                      disabled={
-                        ultrathinkInBodyText && descriptor.id === primarySelectDescriptor?.id
-                      }
-                    >
-                      <span className="flex w-full min-w-0 items-center justify-between gap-3">
-                        <span className="min-w-0 truncate">
-                          {option.label}
-                          {option.isDefault ? (
-                            <>
-                              {" "}
-                              <DefaultBadge />
-                            </>
-                          ) : null}
-                        </span>
-                        {option.id === selectedValue ? (
-                          <CheckIcon className="size-3.5 shrink-0 text-blue-400" />
-                        ) : null}
-                      </span>
-                    </MenuRadioItem>
-                  ))}
-                </MenuRadioGroup>
-              );
-            })()}
-          </MenuGroup>
-        </div>
-      ))}
-      {booleanDescriptors.map((descriptor, index) => (
-        <div key={descriptor.id}>
-          {index > 0 || selectDescriptors.length > 0 ? <MenuDivider /> : null}
-          <MenuGroup>
-            <div className="px-2 py-1.5 font-medium text-muted-foreground text-xs">
-              {descriptor.label}
-            </div>
-            {(() => {
-              const selectedValue = descriptor.currentValue === true ? "on" : "off";
-              return (
-                <MenuRadioGroup
-                  value={selectedValue}
-                  onValueChange={(value) => {
-                    updateDescriptors(
-                      replaceDescriptorCurrentValue(descriptors, descriptor.id, value === "on"),
-                    );
-                  }}
-                >
-                  {(["on", "off"] as const).map((value) => (
-                    <MenuRadioItem key={value} value={value} hideIndicator>
-                      <span className="flex w-full min-w-0 items-center justify-between gap-3">
-                        <span>{value === "on" ? "On" : "Off"}</span>
-                        {value === selectedValue ? (
-                          <CheckIcon className="size-3.5 shrink-0 text-blue-400" />
+              {ultrathinkInBodyText && descriptor.id === primarySelectDescriptor?.id ? (
+                <div className="px-2 pb-1.5 text-muted-foreground/80 text-xs">
+                  Your prompt contains &quot;ultrathink&quot; in the text. Remove it to change this
+                  option.
+                </div>
+              ) : null}
+              <MenuRadioGroup
+                value={selectedValue}
+                onValueChange={(value) => handleSelectChange(descriptor, value)}
+              >
+                {descriptor.options.map((option) => (
+                  <MenuRadioItem
+                    key={option.id}
+                    value={option.id}
+                    hideIndicator
+                    disabled={ultrathinkInBodyText && descriptor.id === primarySelectDescriptor?.id}
+                  >
+                    <span className="flex w-full min-w-0 items-center justify-between gap-3">
+                      <span className="min-w-0 truncate">
+                        {option.label}
+                        {option.isDefault ? (
+                          <>
+                            {" "}
+                            <DefaultBadge />
+                          </>
                         ) : null}
                       </span>
-                    </MenuRadioItem>
-                  ))}
-                </MenuRadioGroup>
-              );
-            })()}
-          </MenuGroup>
-        </div>
-      ))}
+                      {option.id === selectedValue ? (
+                        <CheckIcon className="size-3.5 shrink-0 text-blue-400" />
+                      ) : null}
+                    </span>
+                  </MenuRadioItem>
+                ))}
+              </MenuRadioGroup>
+            </MenuGroup>
+          </div>
+        );
+      })}
+      {booleanDescriptors.map((descriptor, index) => {
+        const selectedValue = descriptor.currentValue === true ? "on" : "off";
+
+        return (
+          <div key={descriptor.id}>
+            {index > 0 || selectDescriptors.length > 0 ? <MenuDivider /> : null}
+            <MenuGroup>
+              <div className="px-2 py-1.5 font-medium text-muted-foreground text-xs">
+                {descriptor.label}
+              </div>
+              <MenuRadioGroup
+                value={selectedValue}
+                onValueChange={(value) => {
+                  updateDescriptors(
+                    replaceDescriptorCurrentValue(descriptors, descriptor.id, value === "on"),
+                  );
+                }}
+              >
+                {(["on", "off"] as const).map((value) => (
+                  <MenuRadioItem key={value} value={value} hideIndicator>
+                    <span className="flex w-full min-w-0 items-center justify-between gap-3">
+                      <span>{value === "on" ? "On" : "Off"}</span>
+                      {value === selectedValue ? (
+                        <CheckIcon className="size-3.5 shrink-0 text-blue-400" />
+                      ) : null}
+                    </span>
+                  </MenuRadioItem>
+                ))}
+              </MenuRadioGroup>
+            </MenuGroup>
+          </div>
+        );
+      })}
     </>
   );
 });