From e0fd2c296bd444ebca672de285214879a07c22d8 Mon Sep 17 00:00:00 2001 From: Maurice Date: Fri, 9 Oct 2026 15:44:13 +0200 Subject: [PATCH] refactor(admin): draw the photo provider marks from one icons file The desktop and the phone addon manager each carried their own copy of the Immich and Synology SVGs. Both now import them from components/Admin/addons/PhotoProviderIcons, which has its own test. The rendered marks are unchanged. --- client/src/components/Admin/AddonManager.tsx | 17 +---------- .../Admin/addons/PhotoProviderIcons.test.tsx | 29 +++++++++++++++++++ .../Admin/addons/PhotoProviderIcons.tsx | 27 +++++++++++++++++ .../screens/admin/MAdminAddonManager.tsx | 17 +---------- 4 files changed, 58 insertions(+), 32 deletions(-) create mode 100644 client/src/components/Admin/addons/PhotoProviderIcons.test.tsx create mode 100644 client/src/components/Admin/addons/PhotoProviderIcons.tsx diff --git a/client/src/components/Admin/AddonManager.tsx b/client/src/components/Admin/AddonManager.tsx index 41d79a607..92a2acb3e 100644 --- a/client/src/components/Admin/AddonManager.tsx +++ b/client/src/components/Admin/AddonManager.tsx @@ -17,6 +17,7 @@ import { SettingsCard, SettingsHint, StatusPill, SETTINGS_BUTTON_PRIMARY } from import { type Addon, type CollabFeatures, COLLAB_SUB_FEATURES, getAddonLabel, MASKED, RECOMMENDED_MODELS } from './addons/addonModel' import { useAddonManager } from './addons/useAddonManager' import { useLlmParsingConfig } from './addons/useLlmParsingConfig' +import { ImmichIcon, SynologyIcon } from './addons/PhotoProviderIcons' // Keys are the `icon` column from the addons table (see server seeds.ts); anything // unknown falls back to Puzzle. Users/Sparkles cover collab and llm_parsing, which @@ -28,22 +29,6 @@ const ICON_MAP = { Dawarich: DawarichIcon, } -function ImmichIcon({ size = 14 }: { size?: number }) { - return ( - - - - ) -} - -function SynologyIcon({ size = 14 }: { size?: number }) { - return ( - - - - ) -} - const PROVIDER_ICONS: Record> = { immich: ImmichIcon, synologyphotos: SynologyIcon, diff --git a/client/src/components/Admin/addons/PhotoProviderIcons.test.tsx b/client/src/components/Admin/addons/PhotoProviderIcons.test.tsx new file mode 100644 index 000000000..bc7d29c52 --- /dev/null +++ b/client/src/components/Admin/addons/PhotoProviderIcons.test.tsx @@ -0,0 +1,29 @@ +// FE-ADMIN-PHOTOICONS-001 to FE-ADMIN-PHOTOICONS-002 +import { describe, expect, it } from 'vitest'; + +import { render } from '../../../../tests/helpers/render'; +import { ImmichIcon, SynologyIcon } from './PhotoProviderIcons'; + +const marks = [ + ['ImmichIcon', ImmichIcon], + ['SynologyIcon', SynologyIcon], +] as const; + +describe('PhotoProviderIcons', () => { + it.each(marks)('FE-ADMIN-PHOTOICONS-001: %s draws a 14px currentColor glyph by default', (_name, Icon) => { + const { container } = render(); + const svg = container.querySelector('svg'); + expect(svg).toHaveAttribute('viewBox', '0 0 24 24'); + expect(svg).toHaveAttribute('width', '14'); + expect(svg).toHaveAttribute('height', '14'); + expect(svg).toHaveStyle({ flexShrink: '0' }); + expect(container.querySelector('path')).toHaveAttribute('fill', 'currentColor'); + }); + + it.each(marks)('FE-ADMIN-PHOTOICONS-002: %s takes its size from the caller', (_name, Icon) => { + const { container } = render(); + const svg = container.querySelector('svg'); + expect(svg).toHaveAttribute('width', '22'); + expect(svg).toHaveAttribute('height', '22'); + }); +}); diff --git a/client/src/components/Admin/addons/PhotoProviderIcons.tsx b/client/src/components/Admin/addons/PhotoProviderIcons.tsx new file mode 100644 index 000000000..125080c08 --- /dev/null +++ b/client/src/components/Admin/addons/PhotoProviderIcons.tsx @@ -0,0 +1,27 @@ +/** + * The photo providers' marks, shared by the desktop and the phone addon manager. + * Single-colour glyphs on `currentColor`, like the document provider marks, so + * they sit in a row of lucide icons and invert with the theme. + */ + +export function ImmichIcon({ size = 14 }: { size?: number }) { + return ( + + + + ); +} + +export function SynologyIcon({ size = 14 }: { size?: number }) { + return ( + + + + ); +} diff --git a/client/src/mobile/screens/admin/MAdminAddonManager.tsx b/client/src/mobile/screens/admin/MAdminAddonManager.tsx index b9731bd8b..95d52d905 100644 --- a/client/src/mobile/screens/admin/MAdminAddonManager.tsx +++ b/client/src/mobile/screens/admin/MAdminAddonManager.tsx @@ -21,6 +21,7 @@ import { } from '../../../components/Admin/addons/addonModel' import { useAddonManager } from '../../../components/Admin/addons/useAddonManager' import { useLlmParsingConfig } from '../../../components/Admin/addons/useLlmParsingConfig' +import { ImmichIcon, SynologyIcon } from '../../../components/Admin/addons/PhotoProviderIcons' import { MAdminButton, MAdminCard, MAdminField, MAdminInput, MAdminSecretInput } from './MAdminUi' const ICON_MAP = { @@ -28,22 +29,6 @@ const ICON_MAP = { Dawarich: DawarichIcon, } -function ImmichIcon({ size = 14 }: { size?: number }) { - return ( - - - - ) -} - -function SynologyIcon({ size = 14 }: { size?: number }) { - return ( - - - - ) -} - const PROVIDER_ICONS: Record> = { immich: ImmichIcon, synologyphotos: SynologyIcon,