From aefd9504bf35449ee46c999dbc867e144539eb93 Mon Sep 17 00:00:00 2001
From: Travis Lesicka <59949694+tlesicka@users.noreply.github.com>
Date: Thu, 7 Nov 2024 13:53:58 +1000
Subject: [PATCH] Update Sidebar - Refactor the Budget Name component (#3593)
* Initial Commit
Moved Budget Name to its own component for a cleaner Sidebar component.
Added pencil icon for editing budget name.
Removed Rename Budget from menu.
* Create 3593.md
* Fixed Menu Dropdown Arrow shrinks with long budget name
* Changes recommended by coderabbitai
* Fixed Lint issue
* Remove Help from Menu
* Remove menu from budget name and added Actual logo with menu
* Update VRTs
* Update VRTs
* Fix logo shrinking with long budget name issue
* Update 3593.md
* Removed Logo and pencil icon
* Update VRTs
* Removed unused classnames from SideBar and BudgetName component
* revert to upstream VRTs
---
.../src/components/sidebar/BudgetName.tsx | 142 ++++++++++++++++++
.../src/components/sidebar/Sidebar.tsx | 126 +---------------
upcoming-release-notes/3593.md | 6 +
3 files changed, 153 insertions(+), 121 deletions(-)
create mode 100644 packages/desktop-client/src/components/sidebar/BudgetName.tsx
create mode 100644 upcoming-release-notes/3593.md
diff --git a/packages/desktop-client/src/components/sidebar/BudgetName.tsx b/packages/desktop-client/src/components/sidebar/BudgetName.tsx
new file mode 100644
index 00000000000..d7b97e4365b
--- /dev/null
+++ b/packages/desktop-client/src/components/sidebar/BudgetName.tsx
@@ -0,0 +1,142 @@
+import React, { type ReactNode, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+
+import { closeBudget } from 'loot-core/src/client/actions';
+import * as Platform from 'loot-core/src/client/platform';
+
+import { useMetadataPref } from '../../hooks/useMetadataPref';
+import { useNavigate } from '../../hooks/useNavigate';
+import { SvgExpandArrow } from '../../icons/v0';
+import { theme } from '../../style';
+import { Button } from '../common/Button2';
+import { InitialFocus } from '../common/InitialFocus';
+import { Input } from '../common/Input';
+import { Menu } from '../common/Menu';
+import { Popover } from '../common/Popover';
+import { Text } from '../common/Text';
+import { View } from '../common/View';
+
+type BudgetNameProps = {
+ children?: ReactNode;
+};
+
+export function BudgetName({ children }: BudgetNameProps) {
+ const hasWindowButtons = !Platform.isBrowser && Platform.OS === 'mac';
+
+ return (
+
+
+
+
+
+ {children}
+
+ );
+}
+
+function EditableBudgetName() {
+ const { t } = useTranslation();
+ const [budgetName, setBudgetNamePref] = useMetadataPref('budgetName');
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+ const [menuOpen, setMenuOpen] = useState(false);
+ const triggerRef = useRef(null);
+ const [editing, setEditing] = useState(false);
+
+ function onMenuSelect(type: string) {
+ setMenuOpen(false);
+
+ switch (type) {
+ case 'rename':
+ setEditing(true);
+ break;
+ case 'settings':
+ navigate('/settings');
+ break;
+ case 'close':
+ dispatch(closeBudget());
+ break;
+ default:
+ }
+ }
+
+ const items = [
+ { name: 'rename', text: t('Rename budget') },
+ { name: 'settings', text: t('Settings') },
+ { name: 'close', text: t('Close file') },
+ ];
+
+ if (editing) {
+ return (
+
+ {
+ const inputEl = e.target as HTMLInputElement;
+ const newBudgetName = inputEl.value;
+ if (newBudgetName.trim() !== '') {
+ setBudgetNamePref(newBudgetName);
+ setEditing(false);
+ }
+ }}
+ onBlur={() => setEditing(false)}
+ />
+
+ );
+ }
+
+ return (
+ <>
+
+
+ setMenuOpen(false)}
+ >
+
+
+
+ );
+}
diff --git a/packages/desktop-client/src/components/sidebar/Sidebar.tsx b/packages/desktop-client/src/components/sidebar/Sidebar.tsx
index c9a17c6c08b..3606073bea0 100644
--- a/packages/desktop-client/src/components/sidebar/Sidebar.tsx
+++ b/packages/desktop-client/src/components/sidebar/Sidebar.tsx
@@ -1,31 +1,23 @@
-import React, { type CSSProperties, useRef, useState } from 'react';
+import React, { type CSSProperties, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import { css } from '@emotion/css';
import { Resizable } from 're-resizable';
-import { closeBudget, replaceModal } from 'loot-core/src/client/actions';
+import { replaceModal } from 'loot-core/src/client/actions';
import * as Platform from 'loot-core/src/client/platform';
import { useGlobalPref } from '../../hooks/useGlobalPref';
import { useLocalPref } from '../../hooks/useLocalPref';
-import { useMetadataPref } from '../../hooks/useMetadataPref';
-import { useNavigate } from '../../hooks/useNavigate';
import { useResizeObserver } from '../../hooks/useResizeObserver';
-import { SvgExpandArrow } from '../../icons/v0';
import { SvgAdd } from '../../icons/v1';
import { styles, theme } from '../../style';
-import { Button } from '../common/Button2';
-import { InitialFocus } from '../common/InitialFocus';
-import { Input } from '../common/Input';
-import { Menu } from '../common/Menu';
-import { Popover } from '../common/Popover';
-import { Text } from '../common/Text';
import { View } from '../common/View';
import { useResponsive } from '../responsive/ResponsiveProvider';
import { Accounts } from './Accounts';
+import { BudgetName } from './BudgetName';
import { PrimaryButtons } from './PrimaryButtons';
import { SecondaryButtons } from './SecondaryButtons';
import { useSidebar } from './SidebarProvider';
@@ -112,28 +104,11 @@ export function Sidebar() {
...styles.darkScrollbar,
})}
>
-
-
-
-
-
+
{!sidebar.alwaysFloats && (
)}
-
+
);
}
-
-function EditableBudgetName() {
- const { t } = useTranslation();
- const dispatch = useDispatch();
- const navigate = useNavigate();
- const [budgetName, setBudgetNamePref] = useMetadataPref('budgetName');
- const [editing, setEditing] = useState(false);
- const [menuOpen, setMenuOpen] = useState(false);
- const triggerRef = useRef(null);
-
- function onMenuSelect(type: string) {
- setMenuOpen(false);
-
- switch (type) {
- case 'rename':
- setEditing(true);
- break;
- case 'settings':
- navigate('/settings');
- break;
- case 'help':
- window.open('https://actualbudget.org/docs/', '_blank');
- break;
- case 'close':
- dispatch(closeBudget());
- break;
- default:
- }
- }
-
- const items = [
- { name: 'rename', text: t('Rename budget') },
- { name: 'settings', text: t('Settings') },
- { name: 'close', text: t('Close file') },
- ];
-
- if (editing) {
- return (
-
- {
- const inputEl = e.target as HTMLInputElement;
- const newBudgetName = inputEl.value;
- if (newBudgetName.trim() !== '') {
- setBudgetNamePref(newBudgetName);
- setEditing(false);
- }
- }}
- onBlur={() => setEditing(false)}
- />
-
- );
- }
-
- return (
- <>
-
-
- setMenuOpen(false)}
- >
-
-
-
- );
-}
diff --git a/upcoming-release-notes/3593.md b/upcoming-release-notes/3593.md
new file mode 100644
index 00000000000..34c47854473
--- /dev/null
+++ b/upcoming-release-notes/3593.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [tlesicka]
+---
+
+Refactored Sidebar components. Budget rename input box is now responsive.