Add Reconcile button on the account page. (#3684)

* added reconcile button to account page

* add Reconcile Button in the account page

* added release note

* updated VRT snapshots

* removed Reconcile option from Account menu

* made the button minimal with tooltip and added vrt

* missing unused import

* fixed icon and button size

* fixed merge conflicts

* hide reconcile button on all account and for budget page

* fix lint from merged file

* changed reconcile button order

---------

Co-authored-by: vincenzo <[email protected]>

packages/desktop-client/src/components/accounts/Header.tsx

@@ -24,6 +24,7 @@ import {
   SvgArrowsExpand3,
   SvgArrowsShrink3,
   SvgDownloadThickBottom,
+  SvgLockClosed,
   SvgPencil1,
 } from '../../icons/v2';
 import { theme, styles } from '../../style';
@@ -92,7 +93,7 @@ type AccountHeaderProps = {
   onSync: () => void;
   onImport: () => void;
   onMenuSelect: AccountMenuProps['onMenuSelect'];
-  onReconcile: AccountMenuProps['onReconcile'];
+  onReconcile: ComponentProps<typeof ReconcileMenu>['onReconcile'];
   onBatchEdit: ComponentProps<typeof SelectedTransactionsButton>['onEdit'];
   onBatchDelete: ComponentProps<typeof SelectedTransactionsButton>['onDelete'];
   onBatchDuplicate: ComponentProps<
@@ -181,8 +182,10 @@ export function AccountHeader({
 }: AccountHeaderProps) {
   const { t } = useTranslation();
   const [menuOpen, setMenuOpen] = useState(false);
+  const [reconcileOpen, setReconcileOpen] = useState(false);
   const searchInput = useRef<HTMLInputElement>(null);
   const triggerRef = useRef(null);
+  const reconcileRef = useRef(null);
   const splitsExpanded = useSplitsExpanded();
   const syncServerStatus = useSyncServerStatus();
   const isUsingServer = syncServerStatus !== 'no-server';
@@ -366,6 +369,38 @@ export function AccountHeader({
               onMakeAsNonSplitTransactions={onMakeAsNonSplitTransactions}
             />
           )}
+          <View>
+            {account && (
+              <>
+                <Button
+                  ref={reconcileRef}
+                  variant="bare"
+                  aria-label={t('Reconcile')}
+                  style={{ padding: 6, marginLeft: 10 }}
+                  onPress={() => {
+                    setReconcileOpen(true);
+                  }}
+                >
+                  <View title={t('Reconcile')}>
+                    <SvgLockClosed width={14} height={14} />
+                  </View>
+                </Button>
+                <Popover
+                  placement="bottom"
+                  triggerRef={reconcileRef}
+                  style={{ width: 275 }}
+                  isOpen={reconcileOpen}
+                  onOpenChange={() => setReconcileOpen(false)}
+                >
+                  <ReconcileMenu
+                    account={account}
+                    onClose={() => setReconcileOpen(false)}
+                    onReconcile={onReconcile}
+                  />
+                </Popover>
+              </>
+            )}
+          </View>
           <Button
             variant="bare"
             aria-label={
@@ -374,7 +409,7 @@ export function AccountHeader({
                 : t('Expand split transactions')
             }
             isDisabled={search !== '' || filterConditions.length > 0}
-            style={{ padding: 6, marginLeft: 10 }}
+            style={{ padding: 6 }}
             onPress={onToggleSplits}
           >
             <View
@@ -417,8 +452,6 @@ export function AccountHeader({
                     setMenuOpen(false);
                     onMenuSelect(item);
                   }}
-                  onReconcile={onReconcile}
-                  onClose={() => setMenuOpen(false)}
                 />
               </Popover>
             </View>
@@ -639,9 +672,7 @@ type AccountMenuProps = {
   canShowBalances: boolean;
   showCleared: boolean;
   showReconciled: boolean;
-  onClose: ComponentProps<typeof ReconcileMenu>['onClose'];
   isSorted: boolean;
-  onReconcile: ComponentProps<typeof ReconcileMenu>['onReconcile'];
   onMenuSelect: (
     item:
       | 'link'
@@ -663,29 +694,16 @@ function AccountMenu({
   canShowBalances,
   showCleared,
   showReconciled,
-  onClose,
   isSorted,
-  onReconcile,
   onMenuSelect,
 }: AccountMenuProps) {
   const { t } = useTranslation();
-  const [tooltip, setTooltip] = useState('default');
   const syncServerStatus = useSyncServerStatus();
 
-  return tooltip === 'reconcile' ? (
-    <ReconcileMenu
-      account={account}
-      onClose={onClose}
-      onReconcile={onReconcile}
-    />
-  ) : (
+  return (
     <Menu
       onMenuSelect={item => {
-        if (item === 'reconcile') {
-          setTooltip('reconcile');
-        } else {
-          onMenuSelect(item);
-        }
+        onMenuSelect(item);
       }}
       items={[
         ...(isSorted
@@ -719,7 +737,6 @@ function AccountMenu({
             : t('Show reconciled transactions'),
         },
         { name: 'export', text: t('Export') },
-        { name: 'reconcile', text: t('Reconcile') },
         ...(account && !account.closed
           ? canSync
             ? [

upcoming-release-notes/3684.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [attyluccio]
+---
+
+Add Reconcile button on account page