Update Sidebar - Refactor the Budget Name component

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

@@ -0,0 +1,161 @@
+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 { SvgPencil1 } from '../../icons/v2';
+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 (
+    <View
+      style={{
+        paddingTop: 35,
+        height: 30,
+        flexDirection: 'row',
+        alignItems: 'center',
+        margin: '0 8px 23px 20px',
+        userSelect: 'none',
+        transition: 'padding .4s',
+        ...(hasWindowButtons && {
+          paddingTop: 20,
+          justifyContent: 'flex-start',
+        }),
+        '& .hover-visible': {
+          opacity: 0,
+          transition: 'opacity .25s',
+        },
+        '&:hover .hover-visible': {
+          opacity: 1,
+        },
+      }}
+    >
+      <EditableBudgetName />
+
+      <View style={{ flex: 1, flexDirection: 'row' }} />
+
+      {children}
+    </View>
+  );
+}
+
+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 'settings':
+        navigate('/settings');
+        break;
+      case 'help':
+        window.open('https://actualbudget.org/docs/', '_blank');
+        break;
+      case 'close':
+        dispatch(closeBudget());
+        break;
+      default:
+    }
+  }
+
+  const items = [
+    { name: 'settings', text: t('Settings') },
+    ...(Platform.isBrowser ? [{ name: 'help', text: t('Help') }] : []),
+    { name: 'close', text: t('Close file') },
+  ];
+
+  if (editing) {
+    return (
+      <InitialFocus>
+        <Input
+          style={{
+            maxWidth: 'calc(100% - 23px)',
+            fontSize: 16,
+            fontWeight: 500,
+          }}
+          defaultValue={budgetName}
+          onEnter={async e => {
+            const inputEl = e.target as HTMLInputElement;
+            const newBudgetName = inputEl.value;
+            if (newBudgetName.trim() !== '') {
+              setBudgetNamePref(newBudgetName);
+              setEditing(false);
+            }
+          }}
+          onBlur={() => setEditing(false)}
+        />
+      </InitialFocus>
+    );
+  }
+
+  return (
+    <>
+      <Button
+        ref={triggerRef}
+        variant="bare"
+        style={{
+          color: theme.buttonNormalBorder,
+          fontSize: 16,
+          fontWeight: 500,
+          marginLeft: -5,
+          flex: '0 auto',
+        }}
+        onPress={() => setMenuOpen(true)}
+      >
+        <Text style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
+          {budgetName || t('A budget has no name')}
+        </Text>
+        <SvgExpandArrow width={7} height={7} style={{ marginLeft: 5 }} />
+      </Button>
+
+      <Popover
+        triggerRef={triggerRef}
+        placement="bottom start"
+        isOpen={menuOpen}
+        onOpenChange={() => setMenuOpen(false)}
+      >
+        <Menu onMenuSelect={onMenuSelect} items={items} />
+      </Popover>
+
+      <Button
+        variant="bare"
+        aria-label={t('Edit budget name')}
+        className="hover-visible"
+        onPress={() => setEditing(true)}
+      >
+        <SvgPencil1
+          style={{
+            width: 11,
+            height: 11,
+            color: theme.pageTextSubdued,
+          }}
+        />
+      </Button>
+    </>
+  );
+}

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

@@ -1,36 +1,24 @@
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
 import { Resizable } from 're-resizable';
 
-import {
-  closeBudget,
-  moveAccount,
-  replaceModal,
-} from 'loot-core/src/client/actions';
+import { moveAccount, replaceModal } from 'loot-core/src/client/actions';
 import * as Platform from 'loot-core/src/client/platform';
 
 import { useAccounts } from '../../hooks/useAccounts';
 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 { SvgReports, SvgWallet } from '../../icons/v1';
 import { SvgCalendar } from '../../icons/v2';
 import { useResponsive } from '../../ResponsiveProvider';
 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 { Accounts } from './Accounts';
+import { BudgetName } from './BudgetName';
 import { Item } from './Item';
 import { useSidebar } from './SidebarProvider';
 import { ToggleButton } from './ToggleButton';
@@ -135,32 +123,21 @@ export function Sidebar() {
             opacity: 1,
             width: hasWindowButtons ? null : 'auto',
           },
+          '& .hover-visible': {
+            display: 'none',
+          },
+          '&:hover .hover-visible': {
+            display: 'flex',
+          },
           flex: 1,
           ...styles.darkScrollbar,
         }}
       >
-        <View
-          style={{
-            paddingTop: 35,
-            height: 30,
-            flexDirection: 'row',
-            alignItems: 'center',
-            margin: '0 8px 23px 20px',
-            transition: 'padding .4s',
-            ...(hasWindowButtons && {
-              paddingTop: 20,
-              justifyContent: 'flex-start',
-            }),
-          }}
-        >
-          <EditableBudgetName />
-
-          <View style={{ flex: 1, flexDirection: 'row' }} />
-
+        <BudgetName>
           {!sidebar.alwaysFloats && (
             <ToggleButton isFloating={isFloating} onFloat={onFloat} />
           )}
-        </View>
+        </BudgetName>
 
         <View style={{ overflow: 'auto' }}>
           <Item title={t('Budget')} Icon={SvgWallet} to="/budget" />
@@ -189,95 +166,3 @@ export function Sidebar() {
     </Resizable>
   );
 }
-
-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') },
-    ...(Platform.isBrowser ? [{ name: 'help', text: t('Help') }] : []),
-    { name: 'close', text: t('Close file') },
-  ];
-
-  if (editing) {
-    return (
-      <InitialFocus>
-        <Input
-          style={{
-            width: 160,
-            fontSize: 16,
-            fontWeight: 500,
-          }}
-          defaultValue={budgetName}
-          onEnter={async e => {
-            const inputEl = e.target as HTMLInputElement;
-            const newBudgetName = inputEl.value;
-            if (newBudgetName.trim() !== '') {
-              setBudgetNamePref(newBudgetName);
-              setEditing(false);
-            }
-          }}
-          onBlur={() => setEditing(false)}
-        />
-      </InitialFocus>
-    );
-  }
-
-  return (
-    <>
-      <Button
-        ref={triggerRef}
-        variant="bare"
-        style={{
-          color: theme.buttonNormalBorder,
-          fontSize: 16,
-          fontWeight: 500,
-          marginLeft: -5,
-          flex: '0 auto',
-        }}
-        onPress={() => setMenuOpen(true)}
-      >
-        <Text style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
-          {budgetName || t('A budget has no name')}
-        </Text>
-        <SvgExpandArrow width={7} height={7} style={{ marginLeft: 5 }} />
-      </Button>
-
-      <Popover
-        triggerRef={triggerRef}
-        placement="bottom start"
-        isOpen={menuOpen}
-        onOpenChange={() => setMenuOpen(false)}
-      >
-        <Menu onMenuSelect={onMenuSelect} items={items} />
-      </Popover>
-    </>
-  );
-}

upcoming-release-notes/3593.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [tlesicka]
+---
+
+Removed "Rename budget" from sidebar menu and replaced with a pencil icon next to the budget name.  Budget rename input box is now responsive.