obsidian-plugin/logancyang_obsidian-copilot
1
0
Fork 0
mirror of https://github.com/logancyang/obsidian-copilot.git synced 2026-07-22 07:50:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(agent-mode): tint chat input border and mode picker by mode (#2486)

Browse source 
* feat(agent-mode): tint chat input border and mode picker by mode

Plan mode shows a blue border and soft glow; auto mode shows red.
The mode picker label picks up a matching faded color that brightens
on hover/focus, making the active agent mode obvious at a glance.

* fix(agent-mode): preserve mode tint on keyboard focus

The ghost2 button variant applies focus-visible:tw-text-normal, which
overrode the focus: tint on keyboard focus. Switch to focus-visible:
so tailwind-merge resolves the conflict in favor of the mode color.
This commit is contained in:
Zero Liu 2026-05-19 18:15:33 -07:00 committed by Logan Yang
parent c9ea0f7e1c
commit ad4bd759a0
No known key found for this signature in database
2 changed files with 15 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/chat-components/ChatInput.tsx
View file

@ -727,7 +727,13 @@ const ChatInput = React.forwardRef<ChatInputHandle, ChatInputProps>(function Cha
return (
<div
className="tw-flex tw-w-full tw-flex-col tw-gap-0.5 tw-rounded-md tw-border tw-border-solid tw-border-border tw-px-1 tw-pb-1 tw-pt-2 tw-@container/chat-input"
className={cn(
"tw-flex tw-w-full tw-flex-col tw-gap-0.5 tw-rounded-md tw-border tw-border-solid tw-border-border tw-px-1 tw-pb-1 tw-pt-2 tw-@container/chat-input",
modePickerOverride?.value === "plan" &&
"tw-shadow-[0_0_10px_rgba(var(--color-blue-rgb),0.18)] tw-border-blue/60",
modePickerOverride?.value === "auto" &&
"tw-shadow-[0_0_10px_rgba(var(--color-red-rgb),0.18)] tw-border-red/60"
)}
ref={containerRef}
>
{/* Hide context controls in edit mode - editing only changes text, not context */}

9
src/components/ui/ModePicker.tsx
View file

@ -51,7 +51,14 @@ export function ModePicker({ override, className }: ModePickerProps) {
variant="ghost2"
size="sm"
disabled={disabled}
className={cn("tw-shrink-0 tw-text-muted", className)}
className={cn(
"tw-shrink-0 tw-text-muted",
value === "plan" &&
"tw-text-blue/70 hover:tw-text-blue/100 focus-visible:tw-text-blue/100",
value === "auto" &&
"tw-text-red/70 hover:tw-text-red/100 focus-visible:tw-text-red/100",
className
)}
title="Operational mode"
>
<span className="tw-truncate">{triggerLabel}</span>