From 09d1c4955803cc8b1052415dd6a34374f397dd08 Mon Sep 17 00:00:00 2001
From: Jennifer Chen <shinyi.chen@gmail.com>
Date: Wed, 8 Apr 2026 10:04:59 -0700
Subject: [PATCH 1/2] toggle edit annotation

---
 src/components/Libraries/DocumentList/DocumentItem.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Libraries/DocumentList/DocumentItem.tsx b/src/components/Libraries/DocumentList/DocumentItem.tsx
index 3217cd8e2..426a9d06c 100644
--- a/src/components/Libraries/DocumentList/DocumentItem.tsx
+++ b/src/components/Libraries/DocumentList/DocumentItem.tsx
@@ -60,7 +60,7 @@ export const DocumentItem = (props: IItemProps): ReactElement => {
     pub?.length > APP_DEFAULTS.RESULT_ITEM_PUB_CUTOFF ? pub.slice(0, APP_DEFAULTS.RESULT_ITEM_PUB_CUTOFF) + '...' : pub;
 
   // annotation / abstract
-  const { isOpen, onClose, onOpen } = useDisclosure();
+  const { isOpen, onClose, onOpen, onToggle } = useDisclosure();
 
   // citations
   const cite = useNormCite ? (
@@ -108,13 +108,13 @@ export const DocumentItem = (props: IItemProps): ReactElement => {
             <Text as={MathJax} dangerouslySetInnerHTML={{ __html: unwrapStringValue(title) }} />
           </SimpleLink>
           <Flex alignItems="start" ml={1}>
-            <Tooltip label="Show annotation">
+            <Tooltip label={isOpen ? 'Hide annotation' : 'Show annotation'}>
               <IconButton
-                aria-label="Show annotation"
+                aria-label={isOpen ? 'Hide annotation' : 'Show annotation'}
                 icon={<PencilSquareIcon width="18px" height="18px" />}
                 variant="link"
                 size="xs"
-                onClick={onOpen}
+                onClick={onToggle}
               />
             </Tooltip>
             {!isClient || hideResources ? null : <ItemResourceDropdowns doc={doc} defaultCitation={defaultCitation} />}

From 14ab6c7f9c63878ad49301526120c8d6f3a7b6f8 Mon Sep 17 00:00:00 2001
From: Jennifer Chen <shinyi.chen@gmail.com>
Date: Fri, 10 Apr 2026 11:13:51 -0700
Subject: [PATCH 2/2] improved edit toggle icon

---
 .../Libraries/DocumentList/DocumentItem.tsx   | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/Libraries/DocumentList/DocumentItem.tsx b/src/components/Libraries/DocumentList/DocumentItem.tsx
index 426a9d06c..122a69dd2 100644
--- a/src/components/Libraries/DocumentList/DocumentItem.tsx
+++ b/src/components/Libraries/DocumentList/DocumentItem.tsx
@@ -1,4 +1,14 @@
-import { Checkbox, CheckboxProps, Flex, IconButton, Stack, Text, Tooltip, useDisclosure } from '@chakra-ui/react';
+import {
+  Checkbox,
+  CheckboxProps,
+  Flex,
+  HStack,
+  IconButton,
+  Stack,
+  Text,
+  Tooltip,
+  useDisclosure,
+} from '@chakra-ui/react';
 import { AuthorList } from '@/components/AllAuthorsModal';
 import { ItemResourceDropdowns } from '@/components/ResultList/Item';
 import { APP_DEFAULTS } from '@/config';
@@ -16,6 +26,7 @@ import { getFormattedNumericPubdate, unwrapStringValue } from '@/utils/common/fo
 import { noop } from '@/utils/common/noop';
 import { IDocsEntity } from '@/api/search/types';
 import { LibraryIdentifier } from '@/api/biblib/types';
+import { ChevronDownIcon } from '@chakra-ui/icons';
 
 export interface IItemProps {
   doc: IDocsEntity;
@@ -111,7 +122,17 @@ export const DocumentItem = (props: IItemProps): ReactElement => {
             <Tooltip label={isOpen ? 'Hide annotation' : 'Show annotation'}>
               <IconButton
                 aria-label={isOpen ? 'Hide annotation' : 'Show annotation'}
-                icon={<PencilSquareIcon width="18px" height="18px" />}
+                aria-expanded={isOpen}
+                icon={
+                  <HStack spacing="1px" align="center">
+                    <PencilSquareIcon width="18px" height="18px" />
+                    <ChevronDownIcon
+                      boxSize="14px"
+                      transform={isOpen ? 'rotate(180deg)' : 'rotate(0deg)'}
+                      transition="transform 0.2s ease"
+                    />
+                  </HStack>
+                }
                 variant="link"
                 size="xs"
                 onClick={onToggle}