frontend-svelte/src/routes/Page.svelte

<script lang="ts">
/**
 * Page Component
 *
 * Main page route component. Displays the font list and allows testing
 * the unified font store functionality. Fetches fonts on mount and displays
 * them using the FontList component.
 *
 * Receives unifiedFontStore from context created in Layout.svelte.
 */
import {
    UNIFIED_FONT_STORE_KEY,
    type UnifiedFontStore,
} from '$entities/Font/model/store/unifiedFontStore.svelte';
import FontList from '$entities/Font/ui/FontList/FontList.svelte';
import { applyFilters } from '$features/FontManagement';
import {
    getContext,
    onMount,
} from 'svelte';

// Receive store from context (created in Layout.svelte)
const unifiedFontStore: UnifiedFontStore = getContext(UNIFIED_FONT_STORE_KEY);

let testResults: string[] = $state([]);

async function runTests() {
    const results: string[] = [];

    // Test 1: Basic Fetch
    try {
        await unifiedFontStore.fetchFonts();
        results.push(`✓ Test 1 - Basic fetch: ${unifiedFontStore.count} fonts loaded`);
    } catch (e) {
        results.push(`✗ Test 1 - Basic fetch: ${e}`);
    }

    // Test 2: Filter functionality
    try {
        const initialCount = unifiedFontStore.filteredFonts.length;
        unifiedFontStore.setFilter('providers', ['google']);
        const afterFilter = unifiedFontStore.filteredFonts.length;
        results.push(`✓ Test 2 - Provider filter: ${initialCount} → ${afterFilter} fonts`);
        unifiedFontStore.clearFilters();
    } catch (e) {
        results.push(`✗ Test 2 - Provider filter: ${e}`);
    }

    // Test 3: Search functionality
    try {
        unifiedFontStore.searchQuery = 'Roboto';
        const searchResults = unifiedFontStore.filteredFonts.length;
        results.push(`✓ Test 3 - Search "Roboto": ${searchResults} results`);
        unifiedFontStore.searchQuery = '';
    } catch (e) {
        results.push(`✗ Test 3 - Search: ${e}`);
    }

    // Test 4: Provider separation
    try {
        unifiedFontStore.setFilter('providers', ['google']);
        await unifiedFontStore.fetchFonts();
        const googleFonts = unifiedFontStore.filteredFonts.length;

        unifiedFontStore.setFilter('providers', ['fontshare']);
        await unifiedFontStore.fetchFonts();
        const fontshareFonts = unifiedFontStore.filteredFonts.length;

        unifiedFontStore.setFilter('providers', ['google', 'fontshare']);
        await unifiedFontStore.fetchFonts();
        const bothFonts = unifiedFontStore.filteredFonts.length;

        results.push(
            `✓ Test 4 - Providers: Google=${googleFonts}, Fontshare=${fontshareFonts}, Both=${bothFonts}`,
        );
        unifiedFontStore.clearFilters();
    } catch (e) {
        results.push(`✗ Test 4 - Provider separation: ${e}`);
    }

    // Test 5: Apply filters
    try {
        await applyFilters(unifiedFontStore);
        results.push(
            `✓ Test 5 - applyFilters(): ${unifiedFontStore.filteredFonts.length} fonts displayed`,
        );
    } catch (e) {
        results.push(`✗ Test 5 - applyFilters(): ${e}`);
    }

    testResults = results;
}

onMount(() => {
    runTests();
});
</script>

<div class="container mx-auto p-6">
    <header class="mb-8">
        <h1 class="text-3xl font-bold mb-2">Font Browser</h1>
        <p class="text-muted-foreground">
            Browse and compare fonts from multiple providers
        </p>
    </header>

    <!-- Test Results Panel -->
    {#if testResults.length > 0}
        <div class="mb-6 p-4 bg-muted rounded-lg">
            <h2 class="text-lg font-semibold mb-3">Feature Validation Tests</h2>
            <ul class="space-y-1 text-sm font-mono">
                {#each testResults as result}
                    <li class={result.startsWith('✓') ? 'text-green-600' : 'text-red-600'}>
                        {result}
                    </li>
                {/each}
            </ul>
        </div>
    {/if}

    <!-- Font List -->
    <div class="bg-card border rounded-lg">
        <div class="p-4 border-b">
            <h2 class="text-lg font-semibold">
                Font List
                <span class="text-sm font-normal text-muted-foreground ml-2">
                    ({unifiedFontStore.count} total, {unifiedFontStore.filteredFonts.length}
                    displayed)
                </span>
            </h2>
        </div>
        <div class="max-h-[600px] overflow-auto">
            <FontList showEmpty={true} />
        </div>
    </div>

    <!-- Debug Info -->
    <div class="mt-6 p-4 bg-muted rounded-lg text-sm">
        <h3 class="font-semibold mb-2">Debug Information</h3>
        <div class="grid grid-cols-2 gap-4">
            <div>
                <p><strong>Loading:</strong> {unifiedFontStore.isLoading}</p>
                <p><strong>Error:</strong> {unifiedFontStore.error || 'None'}</p>
            </div>
            <div>
                <p>
                    <strong>Providers filter:</strong> {
                        unifiedFontStore.filters.providers.join(', ') || 'All'
                    }
                </p>
                <p>
                    <strong>Categories filter:</strong> {
                        unifiedFontStore.filters.categories.join(', ') || 'All'
                    }
                </p>
            </div>
            <div>
                <p>
                    <strong>Subsets filter:</strong> {
                        unifiedFontStore.filters.subsets.join(', ') || 'All'
                    }
                </p>
                <p><strong>Search query:</strong> {unifiedFontStore.searchQuery || 'None'}</p>
            </div>
            <div>
                <p><strong>Sort field:</strong> {unifiedFontStore.sort.field}</p>
                <p><strong>Sort direction:</strong> {unifiedFontStore.sort.direction}</p>
            </div>
        </div>
    </div>
</div>