From e3b489f1736f5466c569d2426a1cc6e9eb5fce9c Mon Sep 17 00:00:00 2001 From: Ilia Mashkov Date: Sun, 24 May 2026 20:30:26 +0300 Subject: [PATCH] =?UTF-8?q?refactor:=20extract=20magic=20constants=20?= =?UTF-8?q?=E2=80=94=20wave=201=20(UX,=20API,=20storage)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Use existing MULTIPLIER_S/M/L from \$entities/Font in SliderArea instead of inlining the 0.5/0.75/1 literals (constants already existed but were duplicated at the call site). - Centralize API base URL in \$shared/api/endpoints.ts (was duplicated between proxyFonts and FilterAndSortFonts filters api). - Promote every 'glyphdiff:...' localStorage key to a named module-level STORAGE_KEY constant. Test files now import the source constant rather than redeclaring it (eliminates silent-typo divergence risk). --- src/entities/Font/api/proxy/proxyFonts.ts | 6 ++++-- .../typographySettingsStore.svelte.ts | 14 ++++++++++++-- .../store/ThemeManager/ThemeManager.svelte.ts | 4 +++- .../store/ThemeManager/ThemeManager.test.ts | 3 +-- .../FilterAndSortFonts/api/filters/filters.ts | 3 ++- src/shared/api/endpoints.ts | 19 +++++++++++++++++++ .../model/stores/comparisonStore.svelte.ts | 4 +++- .../ui/SliderArea/SliderArea.svelte | 13 +++++++++---- .../stores/layoutStore/layoutStore.svelte.ts | 2 +- .../stores/layoutStore/layoutStore.test.ts | 3 +-- 10 files changed, 55 insertions(+), 16 deletions(-) create mode 100644 src/shared/api/endpoints.ts diff --git a/src/entities/Font/api/proxy/proxyFonts.ts b/src/entities/Font/api/proxy/proxyFonts.ts index 3fdccbe..de299dc 100644 --- a/src/entities/Font/api/proxy/proxyFonts.ts +++ b/src/entities/Font/api/proxy/proxyFonts.ts @@ -29,10 +29,12 @@ export function seedFontCache(fonts: UnifiedFont[]): void { }); } +import { API_ENDPOINTS } from '$shared/api/endpoints'; + /** - * Proxy API base URL + * Proxy API endpoint for font resources. */ -const PROXY_API_URL = 'https://api.glyphdiff.com/api/v1/fonts' as const; +const PROXY_API_URL = API_ENDPOINTS.fonts; /** * Proxy API parameters diff --git a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts index 2365196..5df2a8b 100644 --- a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts +++ b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts @@ -297,6 +297,16 @@ export class TypographySettingsStore { } } +/** + * Default factory storage key — used when a caller doesn't pass one. + */ +const DEFAULT_STORAGE_KEY = 'glyphdiff:typography'; + +/** + * Storage key used by the app-wide singleton (scoped to comparison view). + */ +const COMPARISON_STORAGE_KEY = 'glyphdiff:comparison:typography'; + /** * Creates a typography control manager * @@ -306,7 +316,7 @@ export class TypographySettingsStore { */ export function createTypographySettingsStore( configs: ControlModel[], - storageId: string = 'glyphdiff:typography', + storageId: string = DEFAULT_STORAGE_KEY, ) { const storage = createPersistentStore(storageId, { fontSize: DEFAULT_FONT_SIZE, @@ -322,5 +332,5 @@ export function createTypographySettingsStore( */ export const typographySettingsStore = createTypographySettingsStore( DEFAULT_TYPOGRAPHY_CONTROLS_DATA, - 'glyphdiff:comparison:typography', + COMPARISON_STORAGE_KEY, ); diff --git a/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.svelte.ts b/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.svelte.ts index 540f0e2..b7523c2 100644 --- a/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.svelte.ts +++ b/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.svelte.ts @@ -30,6 +30,8 @@ import { createPersistentStore } from '$shared/lib'; +export const STORAGE_KEY = 'glyphdiff:theme'; + type Theme = 'light' | 'dark'; type ThemeSource = 'system' | 'user'; @@ -56,7 +58,7 @@ class ThemeManager { /** * Persistent storage for user's theme preference */ - #store = createPersistentStore('glyphdiff:theme', null); + #store = createPersistentStore(STORAGE_KEY, null); /** * Bound handler for system theme change events */ diff --git a/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.test.ts b/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.test.ts index 2018e0f..9d8adce 100644 --- a/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.test.ts +++ b/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.test.ts @@ -40,8 +40,7 @@ import { ThemeManager } from './ThemeManager.svelte'; * - MediaQueryList listener management */ -// Storage key used by ThemeManager -const STORAGE_KEY = 'glyphdiff:theme'; +import { STORAGE_KEY } from './ThemeManager.svelte'; // Helper type for MediaQueryList event handler type MediaQueryListCallback = (this: MediaQueryList, ev: MediaQueryListEvent) => void; diff --git a/src/features/FilterAndSortFonts/api/filters/filters.ts b/src/features/FilterAndSortFonts/api/filters/filters.ts index 822c968..98f5de2 100644 --- a/src/features/FilterAndSortFonts/api/filters/filters.ts +++ b/src/features/FilterAndSortFonts/api/filters/filters.ts @@ -8,8 +8,9 @@ */ import { api } from '$shared/api/api'; +import { API_ENDPOINTS } from '$shared/api/endpoints'; -const PROXY_API_URL = 'https://api.glyphdiff.com/api/v1/filters' as const; +const PROXY_API_URL = API_ENDPOINTS.filters; /** * Filter metadata type from backend diff --git a/src/shared/api/endpoints.ts b/src/shared/api/endpoints.ts new file mode 100644 index 0000000..30884df --- /dev/null +++ b/src/shared/api/endpoints.ts @@ -0,0 +1,19 @@ +/** + * Centralized backend endpoint definitions. + * + * One source of truth for the proxy API base URL — individual resource + * modules (proxyFonts, filters) append their own paths. + */ + +export const API_BASE_URL = 'https://api.glyphdiff.com/api/v1' as const; + +export const API_ENDPOINTS = { + /** + * Font catalog + per-id detail + batch lookup + */ + fonts: `${API_BASE_URL}/fonts`, + /** + * Filter metadata (providers, categories, subsets) + */ + filters: `${API_BASE_URL}/filters`, +} as const; diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts index 124ba24..0d8a73a 100644 --- a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts +++ b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts @@ -42,8 +42,10 @@ interface ComparisonState { export type Side = 'A' | 'B'; +const STORAGE_KEY = 'glyphdiff:comparison'; + // Persistent storage for selected comparison fonts -const storage = createPersistentStore('glyphdiff:comparison', { +const storage = createPersistentStore(STORAGE_KEY, { fontAId: null, fontBId: null, }); diff --git a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte index 2d3ca95..59142e8 100644 --- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte +++ b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte @@ -8,6 +8,11 @@ - Performance optimized using offscreen canvas for measurements and transform-based animations. -->