Show account notes in tooltip on sidebar (#2796)

* Show account notes in tooltip on sidebar

* add release note

* Only show tooltip for accounts

* Split account name and note into separate nodes

* Add padding inside tooltip

* Move tooltip to the right

* remove commented code

* Tweak the visual design

* Fix lint

* adjust padding

* Update packages/desktop-client/src/components/sidebar/Account.tsx

Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv>

* refactor to avoid function

---------

Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv>

packages/desktop-client/src/components/sidebar/Account.tsx

@@ -5,10 +5,14 @@ import { css } from 'glamor';
 
 import { type AccountEntity } from 'loot-core/src/types/models';
 
+import { useNotes } from '../../hooks/useNotes';
 import { styles, theme, type CSSProperties } from '../../style';
 import { AlignedText } from '../common/AlignedText';
 import { Link } from '../common/Link';
+import { Text } from '../common/Text';
+import { Tooltip } from '../common/Tooltip';
 import { View } from '../common/View';
+import { Notes } from '../Notes';
 import {
   useDraggable,
   useDroppable,
@@ -82,7 +86,10 @@ export function Account({
     onDrop,
   });
 
-  return (
+  const accountNote = useNotes(`account-${account?.id}`);
+  const needsTooltip = !!account?.id;
+
+  const accountRow = (
     <View innerRef={dropRef} style={{ flexShrink: 0, ...outerStyle }}>
       <View>
         <DropHighlight pos={dropPos} />
@@ -148,4 +155,45 @@ export function Account({
       </View>
     </View>
   );
+
+  if (!needsTooltip) {
+    return accountRow;
+  }
+
+  return (
+    <Tooltip
+      content={
+        <View
+          style={{
+            padding: 10,
+          }}
+        >
+          <Text
+            style={{
+              fontWeight: 'bold',
+              borderBottom: accountNote ? `1px solid ${theme.tableBorder}` : 0,
+              marginBottom: accountNote ? '0.5rem' : 0,
+            }}
+          >
+            {name}
+          </Text>
+          {accountNote && (
+            <Notes
+              getStyle={() => ({
+                padding: 0,
+              })}
+              notes={accountNote}
+            />
+          )}
+        </View>
+      }
+      style={{ ...styles.tooltip, borderRadius: '0px 5px 5px 0px' }}
+      placement="right top"
+      triggerProps={{
+        delay: 1000,
+      }}
+    >
+      {accountRow}
+    </Tooltip>
+  );
 }

upcoming-release-notes/2796.md

+---
+category: Enhancements
+authors: [psybers]
+---
+
+Show account notes in tooltip on sidebar.