fix: Brands filter

src/routes/brand/+page.svelte

@@ -4,8 +4,8 @@
 	$metaTitle.title = 'Brands';
 	let { data } = $props();
 
-	let brands = $state<[{ id: Number; name: string; image: string }]>([
-		{ id: 0, name: '', image: '' }
+	let brands = $state<[{ id: Number; name: string; slug: string; image: string }]>([
+		{ id: 0, name: '', slug: '', image: '' }
 	]);
 
 	$effect(() => {
@@ -16,7 +16,7 @@
 			.catch((e) => console.log(e));
 	});
 
-	$inspect(brands);
+	// $inspect(brands);
 
 	const alphabets = [
 		'a',
@@ -71,10 +71,11 @@
 			{/each}
 		</Tabs.List>
 		{#each alphabets as letter}
-			{#each brands as brand}
-				{#if letter === brand?.name.slice(0, 1).toLowerCase()}
-					<Tabs.Content value={letter} class="grid grid-cols-5 gap-4">
-						<a href={`/category/brand/${brand?.id}`}>
+			<Tabs.Content value={letter} class="grid grid-cols-5 gap-4 max-sm:grid-cols-2">
+				{#each brands as brand}
+					{#if letter === brand?.name.slice(0, 1).toLowerCase()}
+						<!-- <a href={`/category/brand/${brand?.id}`}> -->
+						<a href={`/category/brands/${brand?.slug}`}>
 							<div
 								class="flex w-full flex-col gap-4 rounded-md border border-gray-200 p-2 hover:shadow-md hover:transition-all hover:duration-200"
 							>
@@ -83,14 +84,14 @@
 									alt={brand?.name}
 									class="aspect-square rounded-sm object-contain object-center"
 								/>
-								<p class="text-center text-lg">
+								<p class="text-center text-lg max-sm:text-sm">
 									{brand?.name}
 								</p>
 							</div>
 						</a>
-					</Tabs.Content>
-				{/if}
-			{/each}
+					{/if}
+				{/each}
+			</Tabs.Content>
 		{/each}
 	</Tabs.Root>
 </div>

src/routes/category/[categoryType]/[[slug]]/+page.server.ts

@@ -4,16 +4,18 @@ import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ fetch, params, url }) => {
 	const categoryId = params.categoryType === 'q' ? '' : params.slug;
+	const brandName = params.categoryType === 'q' ? '' : params.slug;
 	const searchQuery = url.searchParams.get('q') || '';
 
-	const knownParams = ['q', 'category', 'sort_by', 'page', 'per_page'];
+	const knownParams = ['q', 'category', 'brand', 'sort_by', 'page', 'per_page'];
 
 	const backendParams = new URLSearchParams();
 	backendParams.set('q', searchQuery);
 
-	if (categoryId) {
+	if (categoryId && params.categoryType !== 'brands') {
 		backendParams.set('category', categoryId);
 	}
+	if (brandName && params.categoryType === 'brands') backendParams.set('brand', brandName);
 
 	url.searchParams.forEach((value, key) => {
 		if (!knownParams.includes(key)) {
@@ -55,7 +57,7 @@ export const load: PageServerLoad = async ({ fetch, params, url }) => {
 		return {
 			status: 'error',
 			message: 'Unable to fetch products',
-			error: err
+			error: err instanceof Error ? err.message : 'Unknown error'
 		};
 	}
 };

src/routes/category/[categoryType]/[[slug]]/+page.svelte

@@ -11,6 +11,10 @@
 
 	const { data } = $props();
 
+	// $effect(() => {
+	// 	data?.productCategory?.then((e) => console.log(e)).catch((e) => console.log(e));
+	// });
+
 	// let selectedAttributes: Record<string, string[]> = $state({});
 	let selectedFilters: Record<string, Set<string>> = $state({});
 	let originalFilters: { title: string; values: { value: string }[] }[] = $state([]);
@@ -119,6 +123,14 @@
 			invalidateAll: true
 		});
 	}
+
+	function toTitleCase(str: string) {
+		return str.replace(
+			/\w\S*/g,
+			(text) => text.charAt(0).toUpperCase() + text.substring(1).toLowerCase()
+		);
+	}
+
 	$effect(() => {
 		data?.productCategory
 			?.then(
@@ -127,7 +139,8 @@
 						? e?.query
 						: page.url.searchParams.get('q') === ''
 							? 'All'
-							: e?.filters?.categories[0].title)
+							: toTitleCase(page.params.slug.replaceAll('-', ' ')) ||
+								e?.filters?.categories[0].title)
 			)
 			.catch((e) => console.log(e));
 	});