| ... | @@ -8,6 +8,7 @@ import { | ... | @@ -8,6 +8,7 @@ import { |
| 8 | PROVIDER_ICON_BY_PROVIDER, | 8 | PROVIDER_ICON_BY_PROVIDER, |
| 9 | } from "./providerIconUtils"; | 9 | } from "./providerIconUtils"; |
| 10 | import { ComboboxItem } from "../ui/combobox"; | 10 | import { ComboboxItem } from "../ui/combobox"; |
| | 11 | import { Button } from "../ui/button"; |
| 11 | import { Kbd } from "../ui/kbd"; | 12 | import { Kbd } from "../ui/kbd"; |
| 12 | import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip"; | 13 | import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip"; |
| 13 | import { cn } from "~/lib/utils"; | 14 | import { cn } from "~/lib/utils"; |
| ... | @@ -92,9 +93,11 @@ export const ModelListRow = memo(function ModelListRow(props: { | ... | @@ -92,9 +93,11 @@ export const ModelListRow = memo(function ModelListRow(props: { |
| 92 | <Tooltip> | 93 | <Tooltip> |
| 93 | <TooltipTrigger | 94 | <TooltipTrigger |
| 94 | render={ | 95 | render={ |
| 95 | <button | 96 | <Button |
| | 97 | size="icon-xs" |
| | 98 | variant="ghost" |
| 96 | className={cn( | 99 | 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", |
| 98 | props.isFavorite && "text-foreground opacity-100", | 101 | props.isFavorite && "text-foreground opacity-100", |
| 99 | )} | 102 | )} |
| 100 | onClick={(event) => { | 103 | onClick={(event) => { |
| ... | @@ -105,7 +108,6 @@ export const ModelListRow = memo(function ModelListRow(props: { | ... | @@ -105,7 +108,6 @@ export const ModelListRow = memo(function ModelListRow(props: { |
| 105 | event.stopPropagation(); | 108 | event.stopPropagation(); |
| 106 | }} | 109 | }} |
| 107 | disabled={Boolean(props.disabledReason)} | 110 | disabled={Boolean(props.disabledReason)} |
| 108 | type="button" | | |
| 109 | aria-label={props.isFavorite ? "Remove from favorites" : "Add to favorites"} | 111 | aria-label={props.isFavorite ? "Remove from favorites" : "Add to favorites"} |
| 110 | > | 112 | > |
| 111 | <StarIcon | 113 | <StarIcon |
| ... | @@ -114,7 +116,7 @@ export const ModelListRow = memo(function ModelListRow(props: { | ... | @@ -114,7 +116,7 @@ export const ModelListRow = memo(function ModelListRow(props: { |
| 114 | props.isFavorite && "fill-current text-yellow-500", | 116 | props.isFavorite && "fill-current text-yellow-500", |
| 115 | )} | 117 | )} |
| 116 | /> | 118 | /> |
| 117 | </button> | 119 | </Button> |
| 118 | } | 120 | } |
| 119 | /> | 121 | /> |
| 120 | <TooltipPopup side="top" align="center"> | 122 | <TooltipPopup side="top" align="center"> |