Update Sidebar UI

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

@@ -43,11 +43,11 @@ export class Navigation {
   }
 
   async goToSettingsPage() {
-    const settingsLink = this.page.getByRole('link', { name: 'Settings' });
+    const settingsLink = this.page.getByRole('button', { name: 'Settings' });
 
-    // Expand the "more" menu only if it is not already expanded
+    // Expand the menu only if it is not already expanded
     if (!(await settingsLink.isVisible())) {
-      await this.page.getByRole('button', { name: 'More' }).click();
+      await this.page.getByRole('button', { name: 'Test Budget' }).click();
     }
 
     await settingsLink.click();

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

@@ -92,74 +92,66 @@ export function Account<FieldName extends SheetFields<'account'>>({
 
   const accountRow = (
     <View innerRef={dropRef} style={{ flexShrink: 0, ...outerStyle }}>
-      <View>
-        <DropHighlight pos={dropPos} />
-        <View innerRef={dragRef}>
-          <Link
-            variant="internal"
-            to={to}
+      <DropHighlight pos={dropPos} />
+      <View innerRef={dragRef}>
+        <Link
+          variant="internal"
+          to={to}
+          style={{
+            ...accountNameStyle,
+            ...style,
+            position: 'relative',
+            borderLeft: '4px solid transparent',
+            ...(updated && { fontWeight: 700 }),
+          }}
+          activeStyle={{
+            borderColor: theme.sidebarItemAccentSelected,
+            color: theme.sidebarItemTextSelected,
+            // This is kind of a hack, but we don't ever want the account
+            // that the user is looking at to be "bolded" which means it
+            // has unread transactions. The system does mark is read and
+            // unbolds it, but it still "flashes" bold so this just
+            // ignores it if it's active
+            fontWeight: (style && style.fontWeight) || 'normal',
+            '& .dot': {
+              backgroundColor: theme.sidebarItemAccentSelected,
+              transform: 'translateX(-4.5px)',
+            },
+          }}
+        >
+          <View
             style={{
-              ...accountNameStyle,
-              ...style,
-              position: 'relative',
-              borderLeft: '4px solid transparent',
-              ...(updated && { fontWeight: 700 }),
-            }}
-            activeStyle={{
-              borderColor: theme.sidebarItemAccentSelected,
-              color: theme.sidebarItemTextSelected,
-              // This is kind of a hack, but we don't ever want the account
-              // that the user is looking at to be "bolded" which means it
-              // has unread transactions. The system does mark is read and
-              // unbolds it, but it still "flashes" bold so this just
-              // ignores it if it's active
-              fontWeight: (style && style.fontWeight) || 'normal',
-              '& .dot': {
-                backgroundColor: theme.sidebarItemAccentSelected,
-                transform: 'translateX(-4.5px)',
-              },
+              position: 'absolute',
+              left: 0,
+              top: 0,
+              bottom: 0,
+              flexDirection: 'row',
+              alignItems: 'center',
             }}
           >
-            <View
-              style={{
-                position: 'absolute',
-                left: 0,
-                top: 0,
-                bottom: 0,
-                flexDirection: 'row',
-                alignItems: 'center',
-              }}
-            >
-              <div
-                className={`dot ${css({
-                  marginRight: 3,
-                  width: 5,
-                  height: 5,
-                  borderRadius: 5,
-                  backgroundColor: pending
-                    ? theme.sidebarItemBackgroundPending
-                    : failed
-                      ? theme.sidebarItemBackgroundFailed
-                      : theme.sidebarItemBackgroundPositive,
-                  marginLeft: 2,
-                  transition: 'transform .3s',
-                  opacity: connected ? 1 : 0,
-                })}`}
-              />
-            </View>
-
-            <AlignedText
-              style={
-                (name === 'Off budget' || name === 'For budget') && {
-                  borderBottom: `1.5px solid rgba(255,255,255,0.4)`,
-                  paddingBottom: '3px',
-                }
-              }
-              left={name}
-              right={<CellValue binding={query} type="financial" />}
+            <div
+              className={`dot ${css({
+                marginRight: 3,
+                width: 5,
+                height: 5,
+                borderRadius: 5,
+                backgroundColor: pending
+                  ? theme.sidebarItemBackgroundPending
+                  : failed
+                    ? theme.sidebarItemBackgroundFailed
+                    : theme.sidebarItemBackgroundPositive,
+                marginLeft: 2,
+                transition: 'transform .3s',
+                opacity: connected ? 1 : 0,
+              })}`}
             />
-          </Link>
-        </View>
+          </View>
+
+          <AlignedText
+            left={name}
+            right={<CellValue binding={query} type="financial" />}
+          />
+        </Link>
       </View>
     </View>
   );

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

@@ -0,0 +1,101 @@
+// @ts-strict-ignore
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+
+import * as queries from 'loot-core/src/client/queries';
+import { type State } from 'loot-core/src/client/state-types';
+import { type AccountEntity } from 'loot-core/types/models';
+
+import { useFailedAccounts } from '../../hooks/useFailedAccounts';
+import { useLocalPref } from '../../hooks/useLocalPref';
+import { useUpdatedAccounts } from '../../hooks/useUpdatedAccounts';
+import { type CSSProperties } from '../../style';
+import { View } from '../common/View';
+import { type OnDropCallback } from '../sort';
+import { type SheetFields, type Binding } from '../spreadsheet';
+
+import { Account } from './Account';
+import { AccountGroupName } from './AccountGroupName';
+
+type AccountGroupProps<FieldName extends SheetFields<'account'>> = {
+  groupName: string;
+  groupQuery?: Binding<'account', FieldName>;
+  groupTo?: string;
+  accountList?: AccountEntity[];
+  onReorder?: OnDropCallback;
+  style?: CSSProperties;
+};
+
+export function AccountGroup<FieldName extends SheetFields<'account'>>({
+  groupName,
+  groupQuery,
+  groupTo,
+  accountList,
+  onReorder,
+  style,
+}: AccountGroupProps<FieldName>) {
+  const { t } = useTranslation();
+  const failedAccounts = useFailedAccounts();
+  const updatedAccounts = useUpdatedAccounts();
+  const syncingAccountIds = useSelector(
+    (state: State) => state.account.accountsSyncing,
+  );
+
+  const getAccountPath = (account: AccountEntity) => `/accounts/${account.id}`;
+
+  function onDragChange() {}
+
+  const [collapsed, setCollapsedGroupsPref] = useLocalPref(
+    'ui.collapsedAccountGroups',
+  );
+
+  const toggleAccounts = () => {
+    const c = collapsed ? { ...collapsed } : {};
+    c[groupName.replace(/\s/g, '')] =
+      !collapsed || !Object.hasOwn(collapsed, groupName.replace(/\s/g, ''))
+        ? true
+        : !collapsed[groupName.replace(/\s/g, '')];
+    setCollapsedGroupsPref(c);
+  };
+
+  /*
+  const accountGroupStyle = {
+    background: 'var(--color-tableBackground)',
+    borderRadius: '10px',
+    margin: '10px',
+    border: '2px solid var(--color-tableBorder)',
+  };
+  */
+
+  return (
+    accountList?.length > 0 && (
+      <View style={{ flexShrink: 0, padding: '5px 0', ...style }}>
+        <AccountGroupName
+          groupName={t(groupName)}
+          to={groupTo}
+          query={groupQuery}
+          toggleAccounts={toggleAccounts}
+          collapsed={collapsed?.[groupName.replace(/\s/g, '')]}
+        />
+
+        {!collapsed?.[groupName.replace(/\s/g, '')] &&
+          accountList?.map(account => (
+            <Account
+              key={account.id}
+              name={account.name}
+              account={account}
+              connected={!!account.bank}
+              pending={syncingAccountIds.includes(account.id)}
+              failed={failedAccounts?.has(account.id)}
+              updated={updatedAccounts?.includes(account.id)}
+              to={getAccountPath(account)}
+              query={queries.accountBalance(account)}
+              onDragChange={onDragChange}
+              onDrop={onReorder}
+            />
+          ))}
+      </View>
+    )
+  );
+}

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

@@ -0,0 +1,147 @@
+// @ts-strict-ignore
+import React from 'react';
+
+import { css } from 'glamor';
+
+import { SvgExpandArrow } from '../../icons/v0';
+import { styles, theme, type CSSProperties } from '../../style';
+import { AlignedText } from '../common/AlignedText';
+import { Link } from '../common/Link';
+import { View } from '../common/View';
+import { type SheetFields, type Binding } from '../spreadsheet';
+import { CellValue } from '../spreadsheet/CellValue';
+
+type AccountGroupNameProps<FieldName extends SheetFields<'account'>> = {
+  groupName: string;
+  to?: string;
+  query?: Binding<'account', FieldName>;
+  connected?: boolean;
+  pending?: boolean;
+  failed?: boolean;
+  updated?: boolean;
+  style?: CSSProperties;
+  outerStyle?: CSSProperties;
+  toggleAccounts?: () => void;
+  collapsed?: boolean;
+};
+
+export function AccountGroupName<FieldName extends SheetFields<'account'>>({
+  groupName,
+  to,
+  query,
+  connected,
+  pending,
+  failed,
+  updated,
+  style,
+  outerStyle,
+  toggleAccounts,
+  collapsed,
+}: AccountGroupNameProps<FieldName>) {
+  const accountNameStyle: CSSProperties = {
+    marginTop: -2,
+    marginBottom: 2,
+    paddingTop: 4,
+    paddingBottom: 4,
+    paddingRight: 15,
+    paddingLeft: toggleAccounts ? 25 : 10,
+    textDecoration: 'none',
+    color: theme.sidebarItemText,
+    ':hover': { backgroundColor: theme.sidebarItemBackgroundHover },
+    ...styles.smallText,
+  };
+
+  return (
+    <View style={{ flexShrink: 0, ...outerStyle }}>
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          position: 'relative',
+        }}
+      >
+        {toggleAccounts && (
+          <SvgExpandArrow
+            width={12}
+            height={12}
+            onClick={toggleAccounts}
+            className={`${css({
+              position: 'absolute',
+              borderRadius: 5,
+              zIndex: 99999,
+              marginTop: collapsed ? 2 : -2,
+              marginBottom: 5,
+              marginLeft: 7,
+              width: 16,
+              height: 16,
+              padding: 3,
+              transition: 'transform .1s',
+              transform: collapsed ? 'rotate(-90deg)' : '',
+              ':hover': { backgroundColor: theme.sidebarItemBackgroundHover },
+            })}`}
+          />
+        )}
+        <Link
+          variant="internal"
+          to={to || '#'}
+          style={{
+            ...accountNameStyle,
+            ...style,
+            flex: 1,
+            fontWeight: 600,
+            position: 'relative',
+            borderLeft: '4px solid transparent',
+            ...(updated && { fontWeight: 700 }),
+          }}
+          activeStyle={{
+            borderColor: theme.sidebarItemAccentSelected,
+            color: theme.sidebarItemTextSelected,
+            '& .dot': {
+              backgroundColor: theme.sidebarItemAccentSelected,
+              transform: 'translateX(-4.5px)',
+            },
+          }}
+        >
+          <View
+            style={{
+              position: 'absolute',
+              left: 0,
+              top: 0,
+              bottom: 0,
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}
+          >
+            <div
+              className={`dot ${css({
+                marginRight: 3,
+                width: 5,
+                height: 5,
+                borderRadius: 5,
+                backgroundColor: pending
+                  ? theme.sidebarItemBackgroundPending
+                  : failed
+                    ? theme.sidebarItemBackgroundFailed
+                    : theme.sidebarItemBackgroundPositive,
+                marginLeft: 2,
+                transition: 'transform .3s',
+                opacity: connected ? 1 : 0,
+              })}`}
+            />
+          </View>
+
+          <AlignedText
+            style={
+              !collapsed && {
+                borderBottom: `1.5px solid rgba(255,255,255,0.4)`,
+                paddingBottom: '3px',
+              }
+            }
+            left={groupName}
+            right={query && <CellValue binding={query} type="financial" />}
+          />
+        </Link>
+      </View>
+    </View>
+  );
+}