Thanks to visit codestin.com
Credit goes to github.com

Skip to content

feat(site/src/pages/AgentsPage): dim unselected sidebar chat titles #28382

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tracyjohnsonux merged 13 commits into from
Aug 20, 2026
+28 −5
Merged

feat(site/src/pages/AgentsPage): dim unselected sidebar chat titles #28382

Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
7f137cc
feat(site/src/pages/AgentsPage): dim unselected sidebar chat titles
tracyjohnsonux Aug 20, 2026
1fc94ad
feat(site/src/pages/AgentsPage): restore full title opacity on hover
tracyjohnsonux Aug 20, 2026
4c99f72
feat(site/src/pages/AgentsPage): increase selected chat background op…
tracyjohnsonux Aug 20, 2026
93ef258
feat(site/src/pages/AgentsPage): full-bleed selected chat row with le…
tracyjohnsonux Aug 20, 2026
0650bc1
feat(site/src/pages/AgentsPage): full-bleed square hover highlight fo…
tracyjohnsonux Aug 20, 2026
d0efbf3
feat(site/src/pages/AgentsPage): round left corners of subagent row h…
tracyjohnsonux Aug 20, 2026
bc84a7d
feat(site/src/pages/AgentsPage): tighten subagent highlight left inse…
tracyjohnsonux Aug 20, 2026
db2eecc
refactor(site/src/pages/AgentsPage): drop layout comments
tracyjohnsonux Aug 20, 2026
de9aa30
Merge branch 'main' into feat/sidebar-unselected-chat-opacity
tracyjohnsonux Aug 20, 2026
ee2934e
feat(site/src/pages/AgentsPage): drop bold on selected chat title
tracyjohnsonux Aug 20, 2026
40ef57e
feat(site/src/pages/AgentsPage): drop left border on selected subagen…
tracyjohnsonux Aug 20, 2026
1face83
feat(site/src/pages/AgentsPage): full-bleed subagent rows matching to…
tracyjohnsonux Aug 20, 2026
80e63bd
refactor(site/src/pages/AgentsPage): drop indent constant comment
tracyjohnsonux Aug 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 28 additions & 5 deletions site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,16 @@ import { getChatDisplayConfig } from "./statusConfig";
interface ChatTreeNodeProps {
readonly chat: Chat;
readonly isChildNode: boolean;
readonly depth?: number;
}

export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
const CHILD_INDENT_PX = 26;

export const ChatTreeNode: FC<ChatTreeNodeProps> = ({
chat,
isChildNode,
depth = 0,
}) => {
const location = useLocation();
const locationSearch = normalizeLocationSearch(location.search);
const {
Expand Down Expand Up @@ -147,6 +154,11 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
isArchived: chat.archived,
isChildChat: isChildNode,
});

const hoverLayout =
"[@media(hover:hover)]:hover:-mx-2 [@media(hover:hover)]:hover:pl-3 [@media(hover:hover)]:hover:pr-3.5 [@media(hover:hover)]:hover:rounded-none";
const activeLayout =
"has-[[aria-current=page]]:-mx-2 has-[[aria-current=page]]:pl-[11px] has-[[aria-current=page]]:pr-3.5 has-[[aria-current=page]]:rounded-none has-[[aria-current=page]]:border-l has-[[aria-current=page]]:border-content-primary [@media(hover:hover)]:has-[[aria-current=page]]:hover:pl-[11px]";
const sharedMenuItemProps = {
isArchived: chat.archived,
isPinned: chat.pin_order > 0,
Expand Down Expand Up @@ -179,14 +191,19 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
className={cn(
"group relative flex min-w-0 select-none [@media(pointer:coarse)]:[-webkit-touch-callout:none] items-start gap-1.5 rounded-md pl-1 pr-1.5 text-content-secondary",
"transition-none [@media(hover:hover)]:hover:bg-surface-tertiary/50 [@media(hover:hover)]:hover:text-content-primary has-[[data-state=open]]:bg-surface-tertiary",
"has-[[aria-current=page]]:bg-surface-quaternary/25 has-[[aria-current=page]]:text-content-primary [@media(hover:hover)]:has-[[aria-current=page]]:hover:bg-surface-quaternary/50",
"has-[[aria-current=page]]:bg-surface-quaternary/50 has-[[aria-current=page]]:text-content-primary [@media(hover:hover)]:has-[[aria-current=page]]:hover:bg-surface-quaternary/50",
hoverLayout,
activeLayout,
)}
>
<div
className={cn(
"group/icon relative mt-1.5 size-5 shrink-0",
hasChildren && "cursor-pointer",
)}
style={
depth > 0 ? { marginLeft: depth * CHILD_INDENT_PX } : undefined
}
>
<div
className={cn(
Expand Down Expand Up @@ -236,7 +253,8 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
<span
className={cn(
"block flex-1 truncate text-[13px] text-content-primary",
isActive && "font-medium",
!isActive &&
"opacity-85 [@media(hover:hover)]:group-hover:opacity-100",
)}
>
{chat.title}
Expand Down Expand Up @@ -368,12 +386,17 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
</ContextMenu>

{hasChildren && isExpanded && (
<div className="relative ml-4 flex flex-col pl-2.5">
<div className="relative flex flex-col">
{childIDs.map((childID) => {
const childChat = chatById.get(childID);
if (!childChat) return null;
return (
<ChatTreeNode key={childChat.id} chat={childChat} isChildNode />
<ChatTreeNode
key={childChat.id}
chat={childChat}
isChildNode
depth={depth + 1}
/>
);
})}
</div>
Expand Down
Loading