\n\t\t{#if type === 'success'}{:else}{/if}\n\t\t{message}\n\t\t{#if ondismiss}\n\t\t\t\n\t\t{/if}\n\t
\n{/if}\n",
"/lib/components/svforge/ui/index.ts": "export { default as Alert } from './Alert.svelte';\nexport { default as Card } from './Card.svelte';\nexport { default as Logo } from './Logo.svelte';\nexport { default as Seo } from './Seo.svelte';\nexport { default as Table } from './Table.svelte';\nexport { default as ThemeToggle } from './ThemeToggle.svelte';\nexport { generateSitemap } from './Sitemap';\nexport { default as AvatarInitial } from './AvatarInitial.svelte';\nexport { default as Feedback } from './Feedback.svelte';\n",
"/lib/icons/core.ts": "export { default as Menu } from 'phosphor-svelte/lib/List';\nexport { default as X } from 'phosphor-svelte/lib/X';\nexport { default as SquaresFour } from 'phosphor-svelte/lib/SquaresFour';\nexport { default as Sun } from 'phosphor-svelte/lib/Sun';\nexport { default as Moon } from 'phosphor-svelte/lib/Moon';\nexport { default as Users } from 'phosphor-svelte/lib/Users';\nexport { default as Gear } from 'phosphor-svelte/lib/Gear';\nexport { default as ChartBar } from 'phosphor-svelte/lib/ChartBar';\nexport { default as SignOut } from 'phosphor-svelte/lib/SignOut';\nexport { default as UserPlus } from 'phosphor-svelte/lib/UserPlus';\nexport { default as EnvelopeSimple } from 'phosphor-svelte/lib/EnvelopeSimple';\nexport { default as Power } from 'phosphor-svelte/lib/Power';\nexport { default as Pencil } from 'phosphor-svelte/lib/Pencil';\nexport { default as Check } from 'phosphor-svelte/lib/Check';\nexport { default as Warning } from 'phosphor-svelte/lib/Warning';\nexport { default as Lock } from 'phosphor-svelte/lib/Lock';\nexport { default as Clock } from 'phosphor-svelte/lib/Clock';\nexport { default as Eye } from 'phosphor-svelte/lib/Eye';\nexport { default as EyeSlash } from 'phosphor-svelte/lib/EyeSlash';\n",
diff --git a/packages/svforge/templates/dashboard/src/lib/components/svforge/ui/AvatarInitial.svelte b/packages/svforge/templates/dashboard/src/lib/components/svforge/ui/AvatarInitial.svelte
index 03b06950..7e8c6c1d 100644
--- a/packages/svforge/templates/dashboard/src/lib/components/svforge/ui/AvatarInitial.svelte
+++ b/packages/svforge/templates/dashboard/src/lib/components/svforge/ui/AvatarInitial.svelte
@@ -6,10 +6,9 @@
class?: string;
}
let { name, size = 'md', class: className }: Props = $props();
- const initial = $derived(name[0]?.toUpperCase() ?? '?');
const sizes = { sm: 'w-7 h-7 text-xs', md: 'w-8 h-8 text-sm', lg: 'w-12 h-12 text-lg' };
- {initial}
+ {name[0]?.toUpperCase() ?? '?'}
diff --git a/tests/avatar-initial.test.ts b/tests/avatar-initial.test.ts
new file mode 100644
index 00000000..94c1d0ca
--- /dev/null
+++ b/tests/avatar-initial.test.ts
@@ -0,0 +1,30 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render } from '@testing-library/svelte';
+import AvatarInitial from '../packages/svforge/templates/dashboard/src/lib/components/svforge/ui/AvatarInitial.svelte';
+
+afterEach(cleanup);
+
+describe('Dashboard AvatarInitial', () => {
+ it('renders the current name initial and reacts to name changes', async () => {
+ const { container, rerender } = render(AvatarInitial, {
+ props: { name: 'Ada Lovelace' }
+ });
+ const avatar = container.firstElementChild!;
+
+ expect(avatar.textContent).toBe('A');
+ expect(avatar.classList).toContain('w-8');
+
+ await rerender({ name: 'Grace Hopper', size: 'lg', class: 'team-avatar' });
+
+ expect(avatar.textContent).toBe('G');
+ expect(avatar.classList).toContain('w-12');
+ expect(avatar.classList).not.toContain('w-8');
+ expect(avatar.classList).toContain('team-avatar');
+ });
+
+ it('uses a question mark when the name is empty', () => {
+ const { container } = render(AvatarInitial, { props: { name: '' } });
+ expect(container.firstElementChild?.textContent).toBe('?');
+ });
+});