From 41a519022bc12b3a87674f7698b05301276b420f Mon Sep 17 00:00:00 2001
From: "pouriade.com" <did:plc:3sapfnszmvjc6wa4ml3ybkwb>
Date: Fri, 23 Oct 2026 17:07:29 -0700
Subject: [PATCH] Share the disclosure chevron with the Thought button

Disclosure.Chevron also turns inside a button with aria-expanded, so
WorkButton uses it instead of copying its rotation, and picks up its
lighter weight. The Add role chevron matches the others' size.
---
 apps/web/src/features/admin/components/UserRow.tsx |  2 +-
 apps/web/src/parts/WorkSteps.tsx                   |  5 ++---
 apps/web/src/shared/ui/Disclosure.tsx              | 13 ++++++++++---
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/features/admin/components/UserRow.tsx b/apps/web/src/features/admin/components/UserRow.tsx
index 3b6a961..182a25d 100644
--- a/apps/web/src/features/admin/components/UserRow.tsx
+++ b/apps/web/src/features/admin/components/UserRow.tsx
@@ -78,7 +78,7 @@ export function UserRow(props: Props) {
               onChange={(role) => props.actions.addToRole(role, user.did)}
             >
               Add role…
-              <ChevronDownIcon className="size-3" />
+              <ChevronDownIcon className="size-3.25" />
             </Select>
           )}
         </span>
diff --git a/apps/web/src/parts/WorkSteps.tsx b/apps/web/src/parts/WorkSteps.tsx
index 86fb077..d3e9473 100644
--- a/apps/web/src/parts/WorkSteps.tsx
+++ b/apps/web/src/parts/WorkSteps.tsx
@@ -1,6 +1,5 @@
 import { memo, type ReactNode, type SyntheticEvent, useState } from 'react'
 import { cn } from '../shared/cn.ts'
-import { ChevronRightIcon } from '../shared/icons.tsx'
 import type { MessageRecord } from '../shared/message.ts'
 import { action } from '../shared/ui/actions.ts'
 import { Badge } from '../shared/ui/Badge.tsx'
@@ -180,10 +179,10 @@ export function WorkButton(props: WorkButtonProps) {
       aria-expanded={props.open}
       aria-controls={props.open ? props.controls : undefined}
       onClick={props.onToggle}
-      className={cn(action, 'group/work pe-1.5 font-medium')}
+      className={cn(action, 'pe-1.5 font-medium')}
     >
       {label}
-      <ChevronRightIcon className="size-3.25 transition-transform duration-(--dur-layout) ease-out motion-reduce:transition-none ltr:group-aria-expanded/work:rotate-90 rtl:group-aria-expanded/work:-rotate-90" />
+      <Disclosure.Chevron />
     </button>
   )
 }
diff --git a/apps/web/src/shared/ui/Disclosure.tsx b/apps/web/src/shared/ui/Disclosure.tsx
index 1ed9c22..d20b0cc 100644
--- a/apps/web/src/shared/ui/Disclosure.tsx
+++ b/apps/web/src/shared/ui/Disclosure.tsx
@@ -51,14 +51,20 @@ const chevron =
   'size-3.25 flex-none opacity-55 transition-transform duration-(--dur-layout) ease-out motion-reduce:transition-none'
 
 /**
- * A small chevron in the summary that turns as its own disclosure opens, not one around it. The
- * end chevron is mirrored right to left, so it turns the other way there to point down.
+ * A small chevron in the summary that turns as its own disclosure opens, not one around it. It
+ * also turns inside a button with `aria-expanded`, for a disclosure that can't be a `<details>`
+ * because what it opens lives elsewhere. The end chevron is mirrored right to left, so it turns
+ * the other way there to point down.
  */
 export function Chevron(props: ChevronProps) {
   if (props.points === 'down')
     return (
       <ChevronDownIcon
-        className={cn(chevron, '[details[open]>summary_&]:rotate-180', props.className)}
+        className={cn(
+          chevron,
+          '[[aria-expanded=true]>&]:rotate-180 [details[open]>summary_&]:rotate-180',
+          props.className,
+        )}
       />
     )
   return (
@@ -66,6 +72,7 @@ export function Chevron(props: ChevronProps) {
       className={cn(
         chevron,
         'ltr:[details[open]>summary_&]:rotate-90 rtl:[details[open]>summary_&]:-rotate-90',
+        'ltr:[[aria-expanded=true]>&]:rotate-90 rtl:[[aria-expanded=true]>&]:-rotate-90',
         props.className,
       )}
     />
-- 
knotmirror 0.0.1