authorgravatar for 69873514+sandersonstabo@users.noreply.github.comss <69873514+sandersonstabo@users.noreply.github.com> 2026-06-20 09:40:57+02:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-06-20 00:40:57-07:00
log6c5fb7930d7e14622bf07f8b79dec80b26981635
treec01c56735c1f6a1129e24b86a508b7f4c370bb0b
parent30acfa9c51372588d698d25cbafae1bc147b2c78
signature Signed by PGP key B5690EEEBB952194

[fix/feat:ui] Use shared button for model favorites (#3223)

1 files changed, 6 insertions(+), 4 deletions(-)

apps/web/src/components/chat/ModelListRow.tsx+6-4
......@@ -8,6 +8,7 @@ import {
88 PROVIDER_ICON_BY_PROVIDER,
99} from "./providerIconUtils";
1010import { ComboboxItem } from "../ui/combobox";
11import { Button } from "../ui/button";
1112import { Kbd } from "../ui/kbd";
1213import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
1314import { cn } from "~/lib/utils";
......@@ -92,9 +93,11 @@ export const ModelListRow = memo(function ModelListRow(props: {
9293 <Tooltip>
9394 <TooltipTrigger
9495 render={
95 <button
96 <Button
97 size="icon-xs"
98 variant="ghost"
9699 className={cn(
97 "relative -mr-1 flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground/70 opacity-64 transition-[background-color,color,opacity] hover:bg-background/70 hover:text-foreground hover:opacity-100 group-hover:opacity-100 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11",
100 "-mr-1 shrink-0 text-muted-foreground/70 opacity-64 transition-[color,opacity] hover:text-foreground hover:opacity-100 group-hover:opacity-100",
98101 props.isFavorite && "text-foreground opacity-100",
99102 )}
100103 onClick={(event) => {
......@@ -105,7 +108,6 @@ export const ModelListRow = memo(function ModelListRow(props: {
105108 event.stopPropagation();
106109 }}
107110 disabled={Boolean(props.disabledReason)}
108 type="button"
109111 aria-label={props.isFavorite ? "Remove from favorites" : "Add to favorites"}
110112 >
111113 <StarIcon
......@@ -114,7 +116,7 @@ export const ModelListRow = memo(function ModelListRow(props: {
114116 props.isFavorite && "fill-current text-yellow-500",
115117 )}
116118 />
117 </button>
119 </Button>
118120 }
119121 />
120122 <TooltipPopup side="top" align="center">