diff --git a/packages/desktop-client/src/components/DevelopmentTopBar.tsx b/packages/desktop-client/src/components/DevelopmentTopBar.tsx
index 8bf786a64778a5644416afd9085a6142af49dd53..581f06f79c5819c7c793380b34797d83d1ceb73c 100644
--- a/packages/desktop-client/src/components/DevelopmentTopBar.tsx
+++ b/packages/desktop-client/src/components/DevelopmentTopBar.tsx
@@ -1,6 +1,6 @@
import { theme } from '../style';
-import { ExternalLink } from './common';
+import ExternalLink from './common/ExternalLink';
import View from './common/View';
export default function DevelopmentTopBar() {
diff --git a/packages/desktop-client/src/components/FatalError.js b/packages/desktop-client/src/components/FatalError.js
index 59a50cae9d3e41e15632de1ba882108ce0178458..23c2346e42cc2ca27aa7c5782cea3620994e50a2 100644
--- a/packages/desktop-client/src/components/FatalError.js
+++ b/packages/desktop-client/src/components/FatalError.js
@@ -2,9 +2,9 @@ import React, { Component, useState } from 'react';
import { theme } from '../style';
-import { ExternalLink } from './common';
import Block from './common/Block';
import Button from './common/Button';
+import ExternalLink from './common/ExternalLink';
import LinkButton from './common/LinkButton';
import Modal from './common/Modal';
import Paragraph from './common/Paragraph';
diff --git a/packages/desktop-client/src/components/ManageRules.js b/packages/desktop-client/src/components/ManageRules.js
index 4d427ae582b83f6bfd3045e66f85190c751ec996..ad50910ce8b95e896542f1636bd7e221d4487833 100644
--- a/packages/desktop-client/src/components/ManageRules.js
+++ b/packages/desktop-client/src/components/ManageRules.js
@@ -31,8 +31,8 @@ import useSelected, {
import ArrowRight from '../icons/v0/RightArrow2';
import { colors } from '../style';
-import { ExternalLink } from './common';
import Button from './common/Button';
+import ExternalLink from './common/ExternalLink';
import Input from './common/Input';
import LinkButton from './common/LinkButton';
import Stack from './common/Stack';
diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx
index e2599bb751a2168fc5ae0635a41ffa4ce8d53175..02ff9c8fad2c3292913c057cfa3f6f679ed22aff 100644
--- a/packages/desktop-client/src/components/Notifications.tsx
+++ b/packages/desktop-client/src/components/Notifications.tsx
@@ -15,8 +15,8 @@ import AnimatedLoading from '../icons/AnimatedLoading';
import Delete from '../icons/v0/Delete';
import { styles, colors } from '../style';
-import { ExternalLink } from './common';
import Button, { ButtonWithLoading } from './common/Button';
+import ExternalLink from './common/ExternalLink';
import LinkButton from './common/LinkButton';
import Stack from './common/Stack';
import Text from './common/Text';
diff --git a/packages/desktop-client/src/components/Titlebar.js b/packages/desktop-client/src/components/Titlebar.js
index 34e0f10740c95810d943f240fd10d0034125d73e..779e8ee669eefcfa8424c86e778bb173e24cb466 100644
--- a/packages/desktop-client/src/components/Titlebar.js
+++ b/packages/desktop-client/src/components/Titlebar.js
@@ -28,8 +28,9 @@ import tokens from '../tokens';
import AccountSyncCheck from './accounts/AccountSyncCheck';
import AnimatedRefresh from './AnimatedRefresh';
import { MonthCountSelector } from './budget/MonthCountSelector';
-import { ButtonLink, ExternalLink } from './common';
import Button, { ButtonWithLoading } from './common/Button';
+import ButtonLink from './common/ButtonLink';
+import ExternalLink from './common/ExternalLink';
import Paragraph from './common/Paragraph';
import Text from './common/Text';
import View from './common/View';
diff --git a/packages/desktop-client/src/components/accounts/AccountSyncCheck.js b/packages/desktop-client/src/components/accounts/AccountSyncCheck.js
index 03f831b49d9e93490cae618189daa3dc821e44d8..05f58c7cf12f1e6f5cc1e14b47a9cca3fc15b778 100644
--- a/packages/desktop-client/src/components/accounts/AccountSyncCheck.js
+++ b/packages/desktop-client/src/components/accounts/AccountSyncCheck.js
@@ -6,8 +6,8 @@ import { authorizeBank } from '../../gocardless';
import { useActions } from '../../hooks/useActions';
import ExclamationOutline from '../../icons/v1/ExclamationOutline';
import { colors } from '../../style';
-import { ExternalLink } from '../common';
import Button from '../common/Button';
+import ExternalLink from '../common/ExternalLink';
import View from '../common/View';
import { Tooltip } from '../tooltips';
diff --git a/packages/desktop-client/src/components/common.tsx b/packages/desktop-client/src/components/common.tsx
deleted file mode 100644
index a74afd246f68eaa3498ad1c7bfaf245cdd473b92..0000000000000000000000000000000000000000
--- a/packages/desktop-client/src/components/common.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { type ComponentProps, type ReactNode, forwardRef } from 'react';
-import { useMatch, useNavigate } from 'react-router-dom';
-
-import { type CSSProperties } from 'glamor';
-
-import { colors } from '../style';
-
-import Button from './common/Button';
-
-let externalLinkColors = {
- purple: colors.p4,
- blue: colors.b4,
- muted: 'inherit',
-};
-type ExternalLinkProps = {
- children?: ReactNode;
- to: string;
- linkColor?: keyof typeof externalLinkColors;
-};
-
-export const ExternalLink = forwardRef<HTMLAnchorElement, ExternalLinkProps>(
- ({ children, to, linkColor = 'blue' }, ref) => (
- // we can’t use <ExternalLink /> here for obvious reasons
- // eslint-disable-next-line no-restricted-syntax
- <a
- ref={ref}
- href={to}
- target="_blank"
- rel="noopener noreferrer"
- style={{ color: externalLinkColors[linkColor] }}
- >
- {children}
- </a>
- ),
-);
-
-type ButtonLinkProps = ComponentProps<typeof Button> & {
- to: string;
- activeStyle?: CSSProperties;
-};
-export function ButtonLink({
- to,
- style,
- activeStyle,
- ...props
-}: ButtonLinkProps) {
- const navigate = useNavigate();
- const match = useMatch({ path: to });
- return (
- <Button
- style={{
- ...style,
- ...(match ? activeStyle : {}),
- }}
- {...props}
- onClick={e => {
- props.onClick?.(e);
- navigate(to);
- }}
- />
- );
-}
diff --git a/packages/desktop-client/src/components/common/ButtonLink.tsx b/packages/desktop-client/src/components/common/ButtonLink.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..77688daf565898b5caa3ea05421926cddb050632
--- /dev/null
+++ b/packages/desktop-client/src/components/common/ButtonLink.tsx
@@ -0,0 +1,33 @@
+import React, { type ComponentProps } from 'react';
+import { useMatch, useNavigate } from 'react-router-dom';
+
+import { type CSSProperties } from 'glamor';
+
+import Button from './Button';
+
+type ButtonLinkProps = ComponentProps<typeof Button> & {
+ to: string;
+ activeStyle?: CSSProperties;
+};
+export default function ButtonLink({
+ to,
+ style,
+ activeStyle,
+ ...props
+}: ButtonLinkProps) {
+ const navigate = useNavigate();
+ const match = useMatch({ path: to });
+ return (
+ <Button
+ style={{
+ ...style,
+ ...(match ? activeStyle : {}),
+ }}
+ {...props}
+ onClick={e => {
+ props.onClick?.(e);
+ navigate(to);
+ }}
+ />
+ );
+}
diff --git a/packages/desktop-client/src/components/common/ExternalLink.tsx b/packages/desktop-client/src/components/common/ExternalLink.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e4fa656b5c7f29ce157a7ab83bfc1a132aaab98a
--- /dev/null
+++ b/packages/desktop-client/src/components/common/ExternalLink.tsx
@@ -0,0 +1,32 @@
+import React, { type ReactNode, forwardRef } from 'react';
+
+import { colors } from '../../style';
+
+let externalLinkColors = {
+ purple: colors.p4,
+ blue: colors.b4,
+ muted: 'inherit',
+};
+type ExternalLinkProps = {
+ children?: ReactNode;
+ to: string;
+ linkColor?: keyof typeof externalLinkColors;
+};
+
+const ExternalLink = forwardRef<HTMLAnchorElement, ExternalLinkProps>(
+ ({ children, to, linkColor = 'blue' }, ref) => (
+ // we can’t use <ExternalLink /> here for obvious reasons
+ // eslint-disable-next-line no-restricted-syntax
+ <a
+ ref={ref}
+ href={to}
+ target="_blank"
+ rel="noopener noreferrer"
+ style={{ color: externalLinkColors[linkColor] }}
+ >
+ {children}
+ </a>
+ ),
+);
+
+export default ExternalLink;
diff --git a/packages/desktop-client/src/components/manager/ImportYNAB5.js b/packages/desktop-client/src/components/manager/ImportYNAB5.js
index 2be9442342d2e9d654e4b0a792cbc07e2c6daf94..b302574027642dcc98b287de578bad0c1a98d900 100644
--- a/packages/desktop-client/src/components/manager/ImportYNAB5.js
+++ b/packages/desktop-client/src/components/manager/ImportYNAB5.js
@@ -4,9 +4,9 @@ import { useDispatch } from 'react-redux';
import { importBudget } from 'loot-core/src/client/actions/budgets';
import { styles, colors } from '../../style';
-import { ExternalLink } from '../common';
import Block from '../common/Block';
import { ButtonWithLoading } from '../common/Button';
+import ExternalLink from '../common/ExternalLink';
import Modal from '../common/Modal';
import Paragraph from '../common/Paragraph';
import View from '../common/View';
diff --git a/packages/desktop-client/src/components/manager/WelcomeScreen.js b/packages/desktop-client/src/components/manager/WelcomeScreen.js
index 6276a641bd69cfa4a8dad3c158553798ba8acabf..1fc42330d235299e936ac1e489cc33efb548d83f 100644
--- a/packages/desktop-client/src/components/manager/WelcomeScreen.js
+++ b/packages/desktop-client/src/components/manager/WelcomeScreen.js
@@ -2,8 +2,8 @@ import React from 'react';
import { useActions } from '../../hooks/useActions';
import { colors, styles } from '../../style';
-import { ExternalLink } from '../common';
import Button from '../common/Button';
+import ExternalLink from '../common/ExternalLink';
import Paragraph from '../common/Paragraph';
import Text from '../common/Text';
import View from '../common/View';
diff --git a/packages/desktop-client/src/components/manager/subscribe/Bootstrap.tsx b/packages/desktop-client/src/components/manager/subscribe/Bootstrap.tsx
index 3d6e792e583a7e19d95b8daa402213cf51227b47..80d49ef1069a3f5d2a262c00c3a3687022adad66 100644
--- a/packages/desktop-client/src/components/manager/subscribe/Bootstrap.tsx
+++ b/packages/desktop-client/src/components/manager/subscribe/Bootstrap.tsx
@@ -6,8 +6,8 @@ import { loggedIn } from 'loot-core/src/client/actions/user';
import { send } from 'loot-core/src/platform/client/fetch';
import { colors } from '../../../style';
-import { ExternalLink } from '../../common';
import Button from '../../common/Button';
+import ExternalLink from '../../common/ExternalLink';
import Paragraph from '../../common/Paragraph';
import Text from '../../common/Text';
import View from '../../common/View';
diff --git a/packages/desktop-client/src/components/modals/CreateAccount.js b/packages/desktop-client/src/components/modals/CreateAccount.js
index e5bfbd9dd8b42d322eabffafa3e42f98e3f517d5..751cd30f301e99bb8ae3b8e3be99ea84880e29de 100644
--- a/packages/desktop-client/src/components/modals/CreateAccount.js
+++ b/packages/desktop-client/src/components/modals/CreateAccount.js
@@ -5,8 +5,8 @@ import { pushModal } from 'loot-core/src/client/actions/modals';
import { authorizeBank } from '../../gocardless';
import useGoCardlessStatus from '../../hooks/useGoCardlessStatus';
-import { ExternalLink } from '../common';
import Button, { ButtonWithLoading } from '../common/Button';
+import ExternalLink from '../common/ExternalLink';
import Modal from '../common/Modal';
import Paragraph from '../common/Paragraph';
import Text from '../common/Text';
diff --git a/packages/desktop-client/src/components/modals/CreateEncryptionKey.js b/packages/desktop-client/src/components/modals/CreateEncryptionKey.js
index 5644581ac092b1e525c133fcf5cf7db6b8b173ec..8f312e40b6f24e3c9a22b18e6cd8e3955ffb5b92 100644
--- a/packages/desktop-client/src/components/modals/CreateEncryptionKey.js
+++ b/packages/desktop-client/src/components/modals/CreateEncryptionKey.js
@@ -6,8 +6,8 @@ import { send } from 'loot-core/src/platform/client/fetch';
import { getCreateKeyError } from 'loot-core/src/shared/errors';
import { colors } from '../../style';
-import { ExternalLink } from '../common';
import { ButtonWithLoading } from '../common/Button';
+import ExternalLink from '../common/ExternalLink';
import InitialFocus from '../common/InitialFocus';
import Input from '../common/Input';
import Modal, { ModalButtons } from '../common/Modal';
diff --git a/packages/desktop-client/src/components/modals/CreateLocalAccount.js b/packages/desktop-client/src/components/modals/CreateLocalAccount.js
index e037fb369f30d7fae8a0178dc6dcc2c058d8c08c..7a15bd7cd9f7d41ab9f99860adc112ca940eba19 100644
--- a/packages/desktop-client/src/components/modals/CreateLocalAccount.js
+++ b/packages/desktop-client/src/components/modals/CreateLocalAccount.js
@@ -4,8 +4,8 @@ import { useNavigate } from 'react-router-dom';
import { toRelaxedNumber } from 'loot-core/src/shared/util';
import { colors } from '../../style';
-import { ExternalLink } from '../common';
import Button from '../common/Button';
+import ExternalLink from '../common/ExternalLink';
import FormError from '../common/FormError';
import InitialFocus from '../common/InitialFocus';
import InlineField from '../common/InlineField';
diff --git a/packages/desktop-client/src/components/modals/FixEncryptionKey.js b/packages/desktop-client/src/components/modals/FixEncryptionKey.js
index a617d33b5351f1740866288b741c42c49792a35a..099bd34981f900c321dab178b00a55750eed57af 100644
--- a/packages/desktop-client/src/components/modals/FixEncryptionKey.js
+++ b/packages/desktop-client/src/components/modals/FixEncryptionKey.js
@@ -4,8 +4,8 @@ import { send } from 'loot-core/src/platform/client/fetch';
import { getTestKeyError } from 'loot-core/src/shared/errors';
import { colors } from '../../style';
-import { ExternalLink } from '../common';
import Button, { ButtonWithLoading } from '../common/Button';
+import ExternalLink from '../common/ExternalLink';
import InitialFocus from '../common/InitialFocus';
import Input from '../common/Input';
import Modal, { ModalButtons } from '../common/Modal';
diff --git a/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.js b/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.js
index 7e3dc8f7a272721ae2c79dcce4cb842939a1045a..a17520d5a45a8a3921a2549ae6e60ab2419d1766 100644
--- a/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.js
+++ b/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.js
@@ -10,8 +10,8 @@ import DotsHorizontalTriple from '../../icons/v1/DotsHorizontalTriple';
import { colors } from '../../style';
import { Error, Warning } from '../alerts';
import Autocomplete from '../autocomplete/Autocomplete';
-import { ExternalLink } from '../common';
import Button from '../common/Button';
+import ExternalLink from '../common/ExternalLink';
import LinkButton from '../common/LinkButton';
import Menu from '../common/Menu';
import Modal from '../common/Modal';
diff --git a/packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx b/packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx
index c18a02ac7a945f8f02309d984fad0343a4a8d458..39f8e4005fb5deeceba80ce988dc865ff2932947 100644
--- a/packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx
+++ b/packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx
@@ -3,8 +3,8 @@ import React, { useState } from 'react';
import { send } from 'loot-core/src/platform/client/fetch';
import { Error } from '../alerts';
-import { ExternalLink } from '../common';
import { ButtonWithLoading } from '../common/Button';
+import ExternalLink from '../common/ExternalLink';
import Input from '../common/Input';
import Modal, { ModalButtons } from '../common/Modal';
import type { ModalProps } from '../common/Modal';
diff --git a/packages/desktop-client/src/components/reports/Header.js b/packages/desktop-client/src/components/reports/Header.js
index 2f1849796ed899c0eeb59eb124b6798f88955f50..b46aeba22b4d69424c85cf97a4aff71a11fb3ea6 100644
--- a/packages/desktop-client/src/components/reports/Header.js
+++ b/packages/desktop-client/src/components/reports/Header.js
@@ -2,8 +2,8 @@ import * as monthUtils from 'loot-core/src/shared/months';
import ArrowLeft from '../../icons/v1/ArrowLeft';
import { styles } from '../../style';
-import { ButtonLink } from '../common';
import Button from '../common/Button';
+import ButtonLink from '../common/ButtonLink';
import Select from '../common/Select';
import View from '../common/View';
import { FilterButton, AppliedFilters } from '../filters/FiltersMenu';
diff --git a/packages/desktop-client/src/components/settings/Encryption.tsx b/packages/desktop-client/src/components/settings/Encryption.tsx
index 0b0908509d7e7c45282b021fa6111a72a4a85ee2..6df29b85a43cc1800d0672f47494f81f831ea8f8 100644
--- a/packages/desktop-client/src/components/settings/Encryption.tsx
+++ b/packages/desktop-client/src/components/settings/Encryption.tsx
@@ -3,8 +3,8 @@ import { useSelector } from 'react-redux';
import { useActions } from '../../hooks/useActions';
import { colors } from '../../style';
-import { ExternalLink } from '../common';
import Button from '../common/Button';
+import ExternalLink from '../common/ExternalLink';
import Text from '../common/Text';
import { useServerURL } from '../ServerContext';
diff --git a/packages/desktop-client/src/components/settings/index.tsx b/packages/desktop-client/src/components/settings/index.tsx
index 375835c99de0b66ccec4e81c7400e117a834f42e..27184568757b3ec1205240ad454d962bc4fb44e5 100644
--- a/packages/desktop-client/src/components/settings/index.tsx
+++ b/packages/desktop-client/src/components/settings/index.tsx
@@ -13,8 +13,8 @@ import { useSetThemeColor } from '../../hooks/useSetThemeColor';
import { useResponsive } from '../../ResponsiveProvider';
import { colors } from '../../style';
import tokens from '../../tokens';
-import { ExternalLink } from '../common';
import Button from '../common/Button';
+import ExternalLink from '../common/ExternalLink';
import Input from '../common/Input';
import Text from '../common/Text';
import View from '../common/View';
diff --git a/upcoming-release-notes/1422.md b/upcoming-release-notes/1422.md
new file mode 100644
index 0000000000000000000000000000000000000000..55e38310dc59edadec3384f79c51d362bc78f66b
--- /dev/null
+++ b/upcoming-release-notes/1422.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Moving away from barrel `common` imports to more specific per-component imports (part 4)