Merge branch 'refs/heads/master' into enhancement/context_menus/repor…

…ts_page

packages/api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actual-app/api",
-  "version": "24.11.0",
+  "version": "24.12.0",
   "license": "MIT",
   "description": "An API for Actual",
   "engines": {

packages/desktop-client/e2e/page-models/mobile-navigation.js

@@ -1,3 +1,4 @@
+import { MobileAccountPage } from './mobile-account-page';
 import { MobileAccountsPage } from './mobile-accounts-page';
 import { MobileBudgetPage } from './mobile-budget-page';
 import { MobileTransactionEntryPage } from './mobile-transaction-entry-page';
@@ -22,6 +23,13 @@ export class MobileNavigation {
     return new MobileAccountsPage(this.page);
   }
 
+  async goToUncategorizedPage() {
+    const button = this.page.getByRole('button', { name: /uncategorized/ });
+    await button.click();
+
+    return new MobileAccountPage(this.page);
+  }
+
   async goToTransactionEntryPage() {
     const link = this.page.getByRole('link', { name: 'Transaction' });
     await link.click();

packages/desktop-client/e2e/transactions.mobile.test.js

@@ -48,11 +48,8 @@ test.describe('Mobile Transactions', () => {
     );
     await expect(page).toMatchThemeScreenshots();
 
-    const accountPage = await transactionEntryPage.createTransaction();
-
-    await expect(accountPage.transactions.nth(0)).toHaveText(
-      'KrogerClothing-12.34',
-    );
+    await transactionEntryPage.createTransaction();
+    await expect(page.getByLabel('Transaction list')).toHaveCount(0);
     await expect(page).toMatchThemeScreenshots();
   });
 
@@ -82,4 +79,74 @@ test.describe('Mobile Transactions', () => {
       'KrogerClothing-12.34',
     );
   });
+
+  test('creates an uncategorized transaction from `/accounts/uncategorized` page', async () => {
+    // Create uncategorized transaction
+    let transactionEntryPage = await navigation.goToTransactionEntryPage();
+    await transactionEntryPage.amountField.fill('12.35');
+    // Click anywhere to cancel active edit.
+    await transactionEntryPage.header.click();
+    await transactionEntryPage.fillField(
+      page.getByTestId('account-field'),
+      'Ally Savings',
+    );
+    await transactionEntryPage.createTransaction();
+
+    const uncategorizedPage = await navigation.goToUncategorizedPage();
+    transactionEntryPage = await uncategorizedPage.clickCreateTransaction();
+
+    await expect(transactionEntryPage.header).toHaveText('New Transaction');
+
+    await transactionEntryPage.amountField.fill('12.34');
+    // Click anywhere to cancel active edit.
+    await transactionEntryPage.header.click();
+    await transactionEntryPage.fillField(
+      page.getByTestId('payee-field'),
+      'Kroger',
+    );
+
+    await transactionEntryPage.createTransaction();
+
+    await expect(uncategorizedPage.transactions.nth(0)).toHaveText(
+      'KrogerUncategorized-12.34',
+    );
+    await expect(page).toMatchThemeScreenshots();
+  });
+
+  test('creates a categorized transaction from `/accounts/uncategorized` page', async () => {
+    // Create uncategorized transaction
+    let transactionEntryPage = await navigation.goToTransactionEntryPage();
+    await transactionEntryPage.amountField.fill('12.35');
+    // Click anywhere to cancel active edit.
+    await transactionEntryPage.header.click();
+    await transactionEntryPage.fillField(
+      page.getByTestId('account-field'),
+      'Ally Savings',
+    );
+    await transactionEntryPage.createTransaction();
+
+    const uncategorizedPage = await navigation.goToUncategorizedPage();
+    transactionEntryPage = await uncategorizedPage.clickCreateTransaction();
+
+    await expect(transactionEntryPage.header).toHaveText('New Transaction');
+
+    await transactionEntryPage.amountField.fill('12.34');
+    // Click anywhere to cancel active edit.
+    await transactionEntryPage.header.click();
+    await transactionEntryPage.fillField(
+      page.getByTestId('payee-field'),
+      'Kroger',
+    );
+    await transactionEntryPage.fillField(
+      page.getByTestId('category-field'),
+      'Clothing',
+    );
+
+    await transactionEntryPage.createTransaction();
+
+    await expect(uncategorizedPage.transactions.nth(0)).toHaveText(
+      '(No payee)Uncategorized-12.35',
+    );
+    await expect(page).toMatchThemeScreenshots();
+  });
 });

packages/desktop-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actual-app/web",
-  "version": "24.11.0",
+  "version": "24.12.0",
   "license": "MIT",
   "files": [
     "build"

packages/desktop-client/src/components/LoggedInUser.tsx

@@ -6,6 +6,7 @@ import { useSelector } from 'react-redux';
 import { type State } from 'loot-core/src/client/state-types';
 
 import { useActions } from '../hooks/useActions';
+import { useNavigate } from '../hooks/useNavigate';
 import { theme, styles } from '../style';
 
 import { Button } from './common/Button2';
@@ -38,9 +39,11 @@ export function LoggedInUser({
     getUserData().then(() => setLoading(false));
   }, []);
 
+  const navigate = useNavigate();
+
   async function onChangePassword() {
     await closeBudget();
-    window.__navigate('/change-password');
+    navigate('/change-password');
   }
 
   async function onMenuSelect(type) {
@@ -52,14 +55,14 @@ export function LoggedInUser({
         break;
       case 'sign-in':
         await closeBudget();
-        window.__navigate('/login');
+        navigate('/login');
         break;
       case 'sign-out':
         signOut();
         break;
       case 'config-server':
         await closeBudget();
-        window.__navigate('/config-server');
+        navigate('/config-server');
         break;
       default:
     }

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

@@ -369,7 +369,7 @@ export function AccountHeader({
               onMakeAsNonSplitTransactions={onMakeAsNonSplitTransactions}
             />
           )}
-          <View>
+          <View style={{ flex: '0 0 auto' }}>
             {account && (
               <>
                 <Button
@@ -427,7 +427,7 @@ export function AccountHeader({
             </View>
           </Button>
           {account ? (
-            <View>
+            <View style={{ flex: '0 0 auto' }}>
               <MenuButton
                 aria-label="Account menu"
                 ref={triggerRef}
@@ -456,7 +456,7 @@ export function AccountHeader({
               </Popover>
             </View>
           ) : (
-            <View>
+            <View style={{ flex: '0 0 auto' }}>
               <MenuButton
                 aria-label="Account menu"
                 ref={triggerRef}

packages/desktop-client/src/components/budget/SidebarCategory.tsx

@@ -1,13 +1,13 @@
 // @ts-strict-ignore
-import React, { type CSSProperties, type Ref, useRef, useState } from 'react';
+import React, { type CSSProperties, type Ref, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import {
   type CategoryGroupEntity,
   type CategoryEntity,
 } from 'loot-core/src/types/models';
 
-import { useFeatureFlag } from '../../hooks/useFeatureFlag';
+import { useContextMenu } from '../../hooks/useContextMenu';
 import { SvgCheveronDown } from '../../icons/v1';
 import { theme } from '../../style';
 import { Button } from '../common/Button2';
@@ -50,9 +50,9 @@ export function SidebarCategory({
   const { t } = useTranslation();
 
   const temporary = category.id === 'new';
-  const [menuOpen, setMenuOpen] = useState(false);
+  const { setMenuOpen, menuOpen, handleContextMenu, resetPosition, position } =
+    useContextMenu();
   const triggerRef = useRef(null);
-  const contextMenusEnabled = useFeatureFlag('contextMenus');
 
   const displayed = (
     <View
@@ -66,11 +66,7 @@ export function SidebarCategory({
         height: 20,
       }}
       ref={triggerRef}
-      onContextMenu={e => {
-        if (!contextMenusEnabled) return;
-        e.preventDefault();
-        setMenuOpen(true);
-      }}
+      onContextMenu={handleContextMenu}
     >
       <div
         data-testid="category-name"
@@ -88,7 +84,10 @@ export function SidebarCategory({
           variant="bare"
           className="hover-visible"
           style={{ color: 'currentColor', padding: 3 }}
-          onPress={() => setMenuOpen(true)}
+          onPress={() => {
+            resetPosition();
+            setMenuOpen(true);
+          }}
         >
           <SvgCheveronDown
             width={14}
@@ -102,8 +101,9 @@ export function SidebarCategory({
           placement="bottom start"
           isOpen={menuOpen}
           onOpenChange={() => setMenuOpen(false)}
-          style={{ width: 200 }}
+          style={{ width: 200, margin: 1 }}
           isNonModal
+          {...position}
         >
           <Menu
             onMenuSelect={type => {

packages/desktop-client/src/components/budget/SidebarGroup.tsx

@@ -1,8 +1,9 @@
 // @ts-strict-ignore
-import React, { type CSSProperties, useRef, useState } from 'react';
+import React, { type CSSProperties, useRef } from 'react';
 import { type ConnectDragSource } from 'react-dnd';
 import { useTranslation } from 'react-i18next';
 
+import { useContextMenu } from '../../hooks/useContextMenu';
 import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { SvgExpandArrow } from '../../icons/v0';
 import { SvgCheveronDown } from '../../icons/v1';
@@ -58,9 +59,9 @@ export function SidebarGroup({
   const isGoalTemplatesEnabled = useFeatureFlag('goalTemplatesEnabled');
 
   const temporary = group.id === 'new';
-  const [menuOpen, setMenuOpen] = useState(false);
+  const { setMenuOpen, menuOpen, handleContextMenu, resetPosition, position } =
+    useContextMenu();
   const triggerRef = useRef(null);
-  const contextMenusEnabled = useFeatureFlag('contextMenus');
 
   const displayed = (
     <View
@@ -75,11 +76,7 @@ export function SidebarGroup({
       onClick={() => {
         onToggleCollapse(group.id);
       }}
-      onContextMenu={e => {
-        if (!contextMenusEnabled) return;
-        e.preventDefault();
-        setMenuOpen(true);
-      }}
+      onContextMenu={handleContextMenu}
     >
       {!dragPreview && (
         <SvgExpandArrow
@@ -111,7 +108,10 @@ export function SidebarGroup({
             <Button
               variant="bare"
               className="hover-visible"
-              onPress={() => setMenuOpen(true)}
+              onPress={() => {
+                resetPosition();
+                setMenuOpen(true);
+              }}
               style={{ padding: 3 }}
             >
               <SvgCheveronDown width={14} height={14} />
@@ -122,8 +122,9 @@ export function SidebarGroup({
               placement="bottom start"
               isOpen={menuOpen}
               onOpenChange={() => setMenuOpen(false)}
-              style={{ width: 200 }}
+              style={{ width: 200, margin: 1 }}
               isNonModal
+              {...position}
             >
               <Menu
                 onMenuSelect={type => {