diff --git a/client/components/brand/Brand.tsx b/client/components/brand/Brand.tsx index 5ec6bcb..0a0f3ea 100644 --- a/client/components/brand/Brand.tsx +++ b/client/components/brand/Brand.tsx @@ -1,4 +1,4 @@ -import { useId, type ComponentProps } from 'react'; +import { type ComponentProps } from 'react'; import { cn } from '@/lib/utils'; import { BRAND, BRAND_GLYPHS, type BrandGlyphName } from '@/lib/brand'; import { useTheme } from '@/contexts/ThemeContext'; @@ -35,104 +35,18 @@ export function BrandGlyph({ className?: string; }) { const glyph = BRAND_GLYPHS[name]; - const gradientId = `bt-glyph-${useId().replace(/:/g, '')}`; return ( - - - + {glyph.label} { e.currentTarget.style.display = 'none'; }} + className={cn('inline-block h-10 w-10 shrink-0 select-none rounded-xl object-contain shadow-sm', className)} + /> ); } - -function BrandGlyphShape({ name, gradientId }: { name: BrandGlyphName; gradientId: string }) { - const fill = `url(#${gradientId})`; - const commonStroke = 'currentColor'; - - switch (name) { - case 'bills': - return ( - <> - - - - - ); - case 'calendar': - return ( - <> - - - - - - ); - case 'analytics': - return ( - <> - - - - - - ); - case 'data': - return ( - <> - - - - - - ); - case 'banking': - return ( - <> - - - - - ); - case 'snowball': - return ( - <> - - - - - - ); - case 'security': - return ( - <> - - - - ); - case 'tracker': - default: - return ( - <> - - - - - - ); - } -} diff --git a/client/components/ui/app-primitives.tsx b/client/components/ui/app-primitives.tsx index 6bcc4d4..db04db6 100644 --- a/client/components/ui/app-primitives.tsx +++ b/client/components/ui/app-primitives.tsx @@ -46,7 +46,7 @@ export function PageHeader({ return (
- {glyph && } + {glyph && } {Icon && !glyph && ( diff --git a/client/lib/brand.test.ts b/client/lib/brand.test.ts new file mode 100644 index 0000000..48b615a --- /dev/null +++ b/client/lib/brand.test.ts @@ -0,0 +1,29 @@ +import { describe, it, expect } from 'vitest'; +import { readFileSync, existsSync } from 'node:fs'; +import { fileURLToPath } from 'node:url'; +import { dirname, resolve } from 'node:path'; +import { BRAND, BRAND_GLYPHS } from './brand'; + +// Assets are referenced by absolute URL (/brand/...) and served from client/public. +const publicDir = resolve(dirname(fileURLToPath(import.meta.url)), '../public'); +const toFile = (assetUrl: string) => resolve(publicDir, assetUrl.replace(/^\//, '')); + +describe('brand glyph assets', () => { + // TS proves each BrandGlyphName has an asset path; it can't prove the FILE exists. + // This is the exact failure mode of "images added but the path is wrong / renamed". + it('every glyph resolves to a real, non-empty SVG file on disk', () => { + for (const [name, glyph] of Object.entries(BRAND_GLYPHS)) { + expect(glyph.asset, `${name} asset path shape`).toMatch(/^\/brand\/glyphs\/.+\.svg$/); + const file = toFile(glyph.asset); + expect(existsSync(file), `${name} → ${glyph.asset} missing on disk`).toBe(true); + expect(readFileSync(file, 'utf8'), `${name} is a valid `).toMatch(/]/); + } + }); + + it('every /brand asset referenced in brand.ts exists on disk', () => { + for (const [key, url] of Object.entries(BRAND.assets)) { + if (!url.startsWith('/brand/')) continue; // skip third-party (/img/) icons + expect(existsSync(toFile(url)), `${key} → ${url} missing on disk`).toBe(true); + } + }); +}); diff --git a/client/lib/brand.ts b/client/lib/brand.ts index 777200e..f975fa3 100644 --- a/client/lib/brand.ts +++ b/client/lib/brand.ts @@ -19,7 +19,6 @@ export const BRAND = { socialPreview: '/brand/social-preview.svg', socialPreviewPng: '/brand/social-preview.png', emptyState: '/brand/empty-state.svg', - legacyLogo: '/img/logo.png', }, colors: { ink: '#101417', @@ -51,5 +50,3 @@ export const BRAND_GLYPHS: Record