From 9c1e1b37b16587fddef9eebab0215e83d476a268 Mon Sep 17 00:00:00 2001
From: Ivan Angelov <ivanangelov414@gmail.com>
Date: Mon, 20 Jul 2026 01:55:15 +0300
Subject: [PATCH 01/17] Significantly improved CAD fetch and render processes

---
 src/app/components/cad/editor/index.tsx       |  8 +--
 src/app/components/cad/gallery/index.tsx      |  4 +-
 src/app/hooks/features/cads/queryOptions.ts   | 36 ++++++++++++
 .../hooks/features/cads/useBlobUrlRevoker.ts  | 16 +++++
 src/app/hooks/features/cads/useCadBlobUrl.ts  | 58 -------------------
 src/app/hooks/features/cads/useFetchCad.ts    | 27 +++++++++
 src/lib/cad/loader.ts                         | 52 +++++++----------
 src/lib/cad/three-js.ts                       |  2 +
 8 files changed, 108 insertions(+), 95 deletions(-)
 create mode 100644 src/app/hooks/features/cads/queryOptions.ts
 create mode 100644 src/app/hooks/features/cads/useBlobUrlRevoker.ts
 delete mode 100644 src/app/hooks/features/cads/useCadBlobUrl.ts
 create mode 100644 src/app/hooks/features/cads/useFetchCad.ts

diff --git a/src/app/components/cad/editor/index.tsx b/src/app/components/cad/editor/index.tsx
index ecb8e90..2620733 100644
--- a/src/app/components/cad/editor/index.tsx
+++ b/src/app/components/cad/editor/index.tsx
@@ -2,14 +2,14 @@ import { useQuery } from '@customcads/react-sdk';
 import { AppError } from '@/types/errors';
 import { getCadType } from '@/lib/cad';
 import { useEditorStore } from '@/app/hooks/stores/useEditorStore';
-import { useCadBlobUrl } from '@/app/hooks/features/cads/useCadBlobUrl';
+import { useFetchCad } from '@/app/hooks/features/cads/useFetchCad';
 import { useTextures } from '@/app/hooks/features/materials/useTextures';
 import Loader from '@/app/components/loading';
 import EditorThreeJS from './threejs';
 
 type Props = { cadId: string };
 const EditorCad = ({ cadId }: Props) => {
-	const { blobUrl: cadBlobUrl, progress } = useCadBlobUrl(cadId, 'Product');
+	const { blobUrl, progress } = useFetchCad(cadId, 'Product');
 	const { data: cad } = useQuery(({ cads }) => cads.single({ id: cadId }));
 
 	const materialId = useEditorStore(cadId, (state) => state.materialId);
@@ -23,7 +23,7 @@ const EditorCad = ({ cadId }: Props) => {
 			tip: 'Reload this page or clear your browser cache.',
 		});
 
-	if (!cad || !cadBlobUrl || !texture) {
+	if (!cad || !blobUrl || !texture) {
 		return <Loader progress={progress} isCad />;
 	}
 
@@ -33,7 +33,7 @@ const EditorCad = ({ cadId }: Props) => {
 				texture={texture}
 				cad={{
 					id: cadId,
-					blobUrl: cadBlobUrl,
+					blobUrl: blobUrl,
 					type: getCadType(cad.contentType as never),
 					coords: {
 						cam: cad.camCoordinates,
diff --git a/src/app/components/cad/gallery/index.tsx b/src/app/components/cad/gallery/index.tsx
index 9324bb9..b359f99 100644
--- a/src/app/components/cad/gallery/index.tsx
+++ b/src/app/components/cad/gallery/index.tsx
@@ -1,12 +1,12 @@
 import { useQuery } from '@customcads/react-sdk';
 import { getCadType } from '@/lib/cad';
-import { useCadBlobUrl } from '@/app/hooks/features/cads/useCadBlobUrl';
+import { useFetchCad } from '@/app/hooks/features/cads/useFetchCad';
 import Loader from '@/app/components/loading';
 import GalleryThreeJS from './threejs';
 
 const GalleryCad = ({ cadId }: { cadId: string }) => {
 	const { data: cad } = useQuery(({ cads }) => cads.single({ id: cadId }));
-	const { blobUrl, progress } = useCadBlobUrl(cadId, 'Product');
+	const { blobUrl, progress } = useFetchCad(cadId, 'Product');
 
 	return (
 		<div className='relative h-full w-full'>
diff --git a/src/app/hooks/features/cads/queryOptions.ts b/src/app/hooks/features/cads/queryOptions.ts
new file mode 100644
index 0000000..5ecb590
--- /dev/null
+++ b/src/app/hooks/features/cads/queryOptions.ts
@@ -0,0 +1,36 @@
+import { DownloadResponse } from '@customcads/react-sdk';
+import { fetchFile } from '@/lib/utils';
+
+type Props = {
+	keys: unknown[];
+	enabled?: boolean;
+	getDownloadUrl: () => Promise<DownloadResponse>;
+	onProgress: (progress: number) => void;
+};
+export const fetchCad = ({
+	keys,
+	enabled,
+	getDownloadUrl,
+	onProgress,
+}: Props) => ({
+	queryKey: ['fetch-cad', ...keys, getDownloadUrl, onProgress],
+	queryFn: async () => {
+		const { length, response } = await fetchFile(await getDownloadUrl());
+
+		const reader = response.body?.getReader()!;
+		const parts: BlobPart[] = [];
+
+		while (true) {
+			const { done, value } = await reader.read();
+			if (done) break;
+			parts.push(value);
+			onProgress(value.length / length);
+		}
+
+		const blob = new Blob(parts);
+		return URL.createObjectURL(blob);
+	},
+	enabled,
+	staleTime: 1000 * 60 * 5,
+	gcTime: 1000 * 60 * 30,
+});
diff --git a/src/app/hooks/features/cads/useBlobUrlRevoker.ts b/src/app/hooks/features/cads/useBlobUrlRevoker.ts
new file mode 100644
index 0000000..238b0f2
--- /dev/null
+++ b/src/app/hooks/features/cads/useBlobUrlRevoker.ts
@@ -0,0 +1,16 @@
+import { useRef, useEffect } from 'react';
+
+export const useBlobUrlRevoker = (blobUrl: string | undefined) => {
+	const prevBlobUrlRef = useRef<string | null>(null);
+
+	const revokeUrl = () => {
+		if (prevBlobUrlRef.current) {
+			URL.revokeObjectURL(prevBlobUrlRef.current);
+		}
+	};
+
+	useEffect(() => {
+		if (prevBlobUrlRef.current !== blobUrl) revokeUrl();
+		prevBlobUrlRef.current = blobUrl ?? null;
+	}, [blobUrl]);
+};
diff --git a/src/app/hooks/features/cads/useCadBlobUrl.ts b/src/app/hooks/features/cads/useCadBlobUrl.ts
deleted file mode 100644
index 1306c8b..0000000
--- a/src/app/hooks/features/cads/useCadBlobUrl.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { DownloadRequest, useMutation } from '@customcads/react-sdk';
-import { fetchFile } from '@/lib/utils';
-
-export const useCadBlobUrl = (
-	cadId: DownloadRequest['id'] | undefined,
-	relationType: DownloadRequest['relationType'],
-) => {
-	const { mutateAsync: downloadUrl } = useMutation(
-		({ cads }) => cads.download,
-	);
-	const [blobUrl, setBlobUrl] = useState<string | null>(null);
-	const [progress, setProgress] = useState(0);
-	const isFetchingRef = useRef(false);
-
-	const fetch = async (id: string) => {
-		isFetchingRef.current = true;
-
-		const { length, response } = await fetchFile(
-			await downloadUrl({ id, relationType }),
-		);
-
-		const reader = response.body?.getReader()!;
-		const parts: BlobPart[] = [];
-
-		while (true) {
-			const { done, value } = await reader.read();
-			if (done) break;
-			parts.push(value);
-			setProgress((prev) => prev + value.length / length);
-		}
-
-		const blob = new Blob(parts);
-		setBlobUrl(URL.createObjectURL(blob));
-
-		isFetchingRef.current = false;
-	};
-
-	const revokeUrl = (url: string | null) => {
-		if (url) URL.revokeObjectURL(url);
-	};
-
-	useEffect(() => {
-		if (cadId && isFetchingRef.current === false) {
-			revokeUrl(blobUrl);
-			fetch(cadId);
-		}
-
-		return () => {
-			setBlobUrl((prevBlobUrl) => {
-				revokeUrl(prevBlobUrl);
-				return null;
-			});
-		};
-	}, [cadId, relationType]);
-
-	return { blobUrl, progress };
-};
diff --git a/src/app/hooks/features/cads/useFetchCad.ts b/src/app/hooks/features/cads/useFetchCad.ts
new file mode 100644
index 0000000..a63afe8
--- /dev/null
+++ b/src/app/hooks/features/cads/useFetchCad.ts
@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import { useMutation, type DownloadRequest } from '@customcads/react-sdk';
+import { useQuery } from '@tanstack/react-query';
+import { useBlobUrlRevoker } from './useBlobUrlRevoker';
+import * as queryOptions from './queryOptions';
+
+export const useFetchCad = (
+	cadId: DownloadRequest['id'] | undefined,
+	relationType: DownloadRequest['relationType'],
+) => {
+	const [progress, setProgress] = useState(0);
+	const { mutateAsync: downloadUrl } = useMutation(
+		({ cads }) => cads.download,
+	);
+
+	const options = queryOptions.fetchCad({
+		keys: [cadId, relationType],
+		enabled: !!cadId,
+		getDownloadUrl: () => downloadUrl({ id: cadId!, relationType }),
+		onProgress: (progress) => setProgress((prev) => prev + progress),
+	});
+
+	const { data: blobUrl } = useQuery(options);
+	useBlobUrlRevoker(blobUrl);
+
+	return { blobUrl, progress };
+};
diff --git a/src/lib/cad/loader.ts b/src/lib/cad/loader.ts
index 4fc567a..6e23800 100644
--- a/src/lib/cad/loader.ts
+++ b/src/lib/cad/loader.ts
@@ -9,48 +9,38 @@ const lock = (cad: Group) => {
 	cad.position.sub(center);
 };
 
-export const gltf = (
+export const gltf = async (
 	scene: Scene,
 	url: string,
 	callback?: (cad: Group) => void,
 	progress?: (percentage: number) => void,
 ) => {
-	new GLTFLoader().load(
-		url,
-		(cad) => {
-			lock(cad.scene);
-			if (callback) callback(cad.scene);
-			scene.add(cad.scene);
-		},
-		(e) => {
-			const percentage = e.loaded / e.total;
-			if (progress) progress(percentage);
-		},
-	);
+	const cad = await new GLTFLoader().loadAsync(url, ({ loaded, total }) => {
+		const percentage = loaded / total;
+		if (progress) progress(percentage);
+	});
+
+	lock(cad.scene);
+	if (callback) callback(cad.scene);
+	scene.add(cad.scene);
 };
 
-export const stl = (
+export const stl = async (
 	scene: Scene,
 	url: string,
 	callback?: (cad: Group) => void,
 	progress?: (percentage: number) => void,
 ) => {
-	new STLLoader().load(
-		url,
-		(cad) => {
-			const group = new Group();
-			cad.center();
-			group.add(
-				new Mesh(cad, new MeshStandardMaterial({ color: 0xaaaaaa })),
-			);
+	const cad = await new STLLoader().loadAsync(url, ({ loaded, total }) => {
+		const percentage = loaded / total;
+		if (progress) progress(percentage);
+	});
+
+	const group = new Group();
+	cad.center();
+	group.add(new Mesh(cad, new MeshStandardMaterial({ color: 0xaaaaaa })));
 
-			lock(group);
-			if (callback) callback(group);
-			scene.add(group);
-		},
-		(e) => {
-			const percentage = e.loaded / e.total;
-			if (progress) progress(percentage);
-		},
-	);
+	lock(group);
+	if (callback) callback(group);
+	scene.add(group);
 };
diff --git a/src/lib/cad/three-js.ts b/src/lib/cad/three-js.ts
index a460b11..ab9c162 100644
--- a/src/lib/cad/three-js.ts
+++ b/src/lib/cad/three-js.ts
@@ -139,6 +139,8 @@ export const initThreeJS = (
 		window.removeEventListener('resize', resizeHandler);
 
 		controls.dispose();
+		renderer.getContext().getExtension('WEBGL_lose_context')?.loseContext();
+
 		renderer.dispose();
 		renderer.domElement.remove();
 

From 60b897070a77766b586beef5a35412d0fed034f9 Mon Sep 17 00:00:00 2001
From: Ivan Angelov <ivanangelov414@gmail.com>
Date: Tue, 21 Jul 2026 13:47:52 +0300
Subject: [PATCH 02/17] Tiny hooks refactorings

---
 .../hooks/features/carts/useCartItemEditor.ts | 23 ++++++++-----------
 .../customizations/useCustomizationCreator.ts |  8 ++++---
 .../idempotency-keys/useIdempotencyKeys.ts    | 10 ++++----
 src/app/pages/public/editor/index.tsx         |  2 +-
 4 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/app/hooks/features/carts/useCartItemEditor.ts b/src/app/hooks/features/carts/useCartItemEditor.ts
index 225a89d..c3e0620 100644
--- a/src/app/hooks/features/carts/useCartItemEditor.ts
+++ b/src/app/hooks/features/carts/useCartItemEditor.ts
@@ -5,29 +5,26 @@ import { useCartStore } from '@/app/hooks/stores/useCartStore';
 import { useCustomizationCreator } from '@/app/hooks/features/customizations/useCustomizationCreator';
 import { useCartUpdates } from './useCartUpdates';
 
-export const useCartItemEditor = (productId: string) => {
+export const useCartItemEditor = (productId: string, volume: number) => {
 	const { items } = useCartStore();
 	const itemsLoaded = !!items;
 
 	const item = items?.find((i) => i.productId === productId);
 	const updates = useCartUpdates();
 	const addItemIfMissing = (customizationId: string) => {
-		if (!item) {
-			updates.cart.add({
-				productId,
-				quantity: 1,
-				forDelivery: true,
-				customizationId: customizationId,
-			});
-			return;
-		}
+		if (item)
+			return { otherwise: (cb: (item: CartItem) => void) => cb(item) };
 
-		return {
-			otherwise: (callback: (item: CartItem) => void) => callback(item),
-		};
+		updates.cart.add({
+			productId,
+			quantity: 1,
+			forDelivery: true,
+			customizationId: customizationId,
+		});
 	};
 
 	const { customization, edit: editCustomization } = useCustomizationCreator(
+		volume,
 		item,
 		itemsLoaded,
 	);
diff --git a/src/app/hooks/features/customizations/useCustomizationCreator.ts b/src/app/hooks/features/customizations/useCustomizationCreator.ts
index 800447d..74cdb96 100644
--- a/src/app/hooks/features/customizations/useCustomizationCreator.ts
+++ b/src/app/hooks/features/customizations/useCustomizationCreator.ts
@@ -6,6 +6,7 @@ import { useIdempotencyKeys } from '@/app/hooks/features/idempotency-keys/useIde
 import { INFILL } from '@/app/constants/threejs';
 
 export const useCustomizationCreator = (
+	volume: number,
 	item?: CartItem,
 	enableCreation?: boolean,
 ) => {
@@ -16,8 +17,9 @@ export const useCustomizationCreator = (
 		edit: useMutation(({ customizations }) => customizations.edit),
 	};
 
-	const itemCustomizationId = item?.forDelivery ? item.customizationId : null;
-	const customizationId = mutations.create.data?.id ?? itemCustomizationId;
+	const customizationId =
+		mutations.create.data?.id ??
+		(item?.forDelivery ? item.customizationId : null);
 
 	const { data: customization, error: error } = useQuery(
 		({ customizations }) => customizations.single({ id: customizationId! }),
@@ -35,7 +37,7 @@ export const useCustomizationCreator = (
 				color: '#ffffff',
 				infill: INFILL.min,
 				scale: 100 / 100,
-				volume: 0,
+				volume,
 			});
 		}
 	};
diff --git a/src/app/hooks/features/idempotency-keys/useIdempotencyKeys.ts b/src/app/hooks/features/idempotency-keys/useIdempotencyKeys.ts
index c350e27..4c03429 100644
--- a/src/app/hooks/features/idempotency-keys/useIdempotencyKeys.ts
+++ b/src/app/hooks/features/idempotency-keys/useIdempotencyKeys.ts
@@ -1,10 +1,10 @@
 import { useRef } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
-export const useIdempotencyKeys = <ExactNames extends readonly string[]>(
-	names: ExactNames,
+export const useIdempotencyKeys = <AllNames extends readonly string[]>(
+	allNames: AllNames,
 ) => {
-	type Name = ExactNames[number];
+	type Name = AllNames[number];
 	type SomeNames = readonly Name[];
 
 	const generate = (names: SomeNames) =>
@@ -14,13 +14,13 @@ export const useIdempotencyKeys = <ExactNames extends readonly string[]>(
 		>;
 
 	const keysRef = useRef<Record<Name, string>>(null);
-	keysRef.current ??= generate(names);
+	keysRef.current ??= generate(allNames);
 
 	return {
 		idempotencyKeys: keysRef.current,
 		refreshKeys: (namesToRefresh?: SomeNames) => {
 			if (!namesToRefresh) {
-				keysRef.current = generate(names);
+				keysRef.current = generate(allNames);
 				return;
 			}
 
diff --git a/src/app/pages/public/editor/index.tsx b/src/app/pages/public/editor/index.tsx
index 536d2ac..b334b5a 100644
--- a/src/app/pages/public/editor/index.tsx
+++ b/src/app/pages/public/editor/index.tsx
@@ -30,7 +30,7 @@ const Editor = () => {
 		cads.single({ id: product.cadId }),
 	);
 
-	const { customization, save } = useCartItemEditor(product.id);
+	const { customization, save } = useCartItemEditor(product.id, cad.volume);
 	const { scale, size } = {
 		scale: useEditorStore(product.cadId, (state) => state.scale),
 		size: useEditorStore(product.cadId, (state) => state.size),

From 7f10d5bf2360b7b6a5990f7f4d576c3a632915c7 Mon Sep 17 00:00:00 2001
From: Ivan Angelov <ivanangelov414@gmail.com>
Date: Thu, 23 Jul 2026 04:48:48 +0300
Subject: [PATCH 03/17] UI bugs: Home page: Improved design responsiveness for
 Popular Products Cart page: Fixed <Aside /> width abnormalities Accounts
 page: Separated "Viewed Products" into separate tab

---
 .../locales/bg-BG/pages/private/common/account.ts   |  1 +
 .../locales/en-GB/pages/private/common/account.ts   |  1 +
 src/app/locales/types/pages/private/common.ts       |  1 +
 src/app/pages/private/common/account/index.tsx      |  8 ++++++--
 .../pages/private/common/account/panels/index.ts    |  1 +
 .../private/common/account/panels/info/index.tsx    | 13 +++++++++++++
 .../panels/{profile => info}/products/index.tsx     |  2 +-
 .../panels/{profile => info}/products/item.tsx      |  0
 .../panels/{profile => info}/products/remove.tsx    |  0
 .../panels/{profile => info}/products/track.tsx     |  0
 .../private/common/account/panels/profile/index.tsx | 10 +---------
 src/app/pages/public/cart/aside.tsx                 |  8 ++++----
 src/app/pages/public/cart/index.tsx                 |  2 +-
 src/app/pages/public/home/section-3/popular.tsx     |  4 ++--
 14 files changed, 32 insertions(+), 19 deletions(-)
 create mode 100644 src/app/pages/private/common/account/panels/info/index.tsx
 rename src/app/pages/private/common/account/panels/{profile => info}/products/index.tsx (94%)
 rename src/app/pages/private/common/account/panels/{profile => info}/products/item.tsx (100%)
 rename src/app/pages/private/common/account/panels/{profile => info}/products/remove.tsx (100%)
 rename src/app/pages/private/common/account/panels/{profile => info}/products/track.tsx (100%)

diff --git a/src/app/locales/bg-BG/pages/private/common/account.ts b/src/app/locales/bg-BG/pages/private/common/account.ts
index 63e64c1..b69dcab 100644
--- a/src/app/locales/bg-BG/pages/private/common/account.ts
+++ b/src/app/locales/bg-BG/pages/private/common/account.ts
@@ -4,4 +4,5 @@ export default {
 	title: 'Акаунт | {{username}}',
 	profile: 'Профил',
 	access: 'Достъп',
+	info: 'Данни',
 } satisfies MyAccount;
diff --git a/src/app/locales/en-GB/pages/private/common/account.ts b/src/app/locales/en-GB/pages/private/common/account.ts
index d488779..9c06125 100644
--- a/src/app/locales/en-GB/pages/private/common/account.ts
+++ b/src/app/locales/en-GB/pages/private/common/account.ts
@@ -4,4 +4,5 @@ export default {
 	title: 'Account | {{username}}',
 	profile: 'Profile',
 	access: 'Access',
+	info: 'Info',
 } satisfies MyAccount;
diff --git a/src/app/locales/types/pages/private/common.ts b/src/app/locales/types/pages/private/common.ts
index 65f942e..b00829e 100644
--- a/src/app/locales/types/pages/private/common.ts
+++ b/src/app/locales/types/pages/private/common.ts
@@ -2,6 +2,7 @@ export type MyAccount = {
 	title: string;
 	profile: string;
 	access: string;
+	info: string;
 };
 
 export type MyAccountShell = {
diff --git a/src/app/pages/private/common/account/index.tsx b/src/app/pages/private/common/account/index.tsx
index e76cffd..c3613f0 100644
--- a/src/app/pages/private/common/account/index.tsx
+++ b/src/app/pages/private/common/account/index.tsx
@@ -5,10 +5,10 @@ import { usePrivateTranslations } from '@/app/hooks/locales/translations/pages/p
 import Tabs from '@/app/components/tabs';
 import * as page from '@/app/utils/page';
 import Header from './header';
-import { Profile, Access } from './panels';
+import { Profile, Access, Info } from './panels';
 import Footer from './footer';
 
-export const tabs = ['profile', 'access'] as const;
+export const tabs = ['profile', 'access', 'info'] as const;
 export type Tab = (typeof tabs)[number];
 
 const Route = getRouteApi('/_private/account');
@@ -31,6 +31,10 @@ const MyAccount = () => {
 			label: tAccount('access'),
 			panel: <Access account={account} />,
 		},
+		info: {
+			label: tAccount('info'),
+			panel: <Info account={account} />,
+		},
 	};
 
 	return (
diff --git a/src/app/pages/private/common/account/panels/index.ts b/src/app/pages/private/common/account/panels/index.ts
index 78ee05d..a241932 100644
--- a/src/app/pages/private/common/account/panels/index.ts
+++ b/src/app/pages/private/common/account/panels/index.ts
@@ -1,2 +1,3 @@
 export * from './profile';
 export * from './access';
+export * from './info';
diff --git a/src/app/pages/private/common/account/panels/info/index.tsx b/src/app/pages/private/common/account/panels/info/index.tsx
new file mode 100644
index 0000000..65bca85
--- /dev/null
+++ b/src/app/pages/private/common/account/panels/info/index.tsx
@@ -0,0 +1,13 @@
+import { type MyAccountResponse } from '@customcads/react-sdk';
+import { Content } from '@/app/components/ui/card';
+import Products from './products';
+
+type Props = { account: MyAccountResponse };
+export const Info = ({ account }: Props) => (
+	<Content className='grow basis-full flex flex-col md:flex-row justify-center gap-x-20 gap-y-4'>
+		<Products
+			track={account.trackViewedProducts}
+			products={account.viewedProducts}
+		/>
+	</Content>
+);
diff --git a/src/app/pages/private/common/account/panels/profile/products/index.tsx b/src/app/pages/private/common/account/panels/info/products/index.tsx
similarity index 94%
rename from src/app/pages/private/common/account/panels/profile/products/index.tsx
rename to src/app/pages/private/common/account/panels/info/products/index.tsx
index a1833e0..c74a723 100644
--- a/src/app/pages/private/common/account/panels/profile/products/index.tsx
+++ b/src/app/pages/private/common/account/panels/info/products/index.tsx
@@ -14,7 +14,7 @@ const Products = ({ track, products }: Props) => {
 			items={products.map(({ id, viewedAt }) => (
 				<Item key={id} id={id} viewedAt={viewedAt} />
 			))}
-			className='w-65 md:w-md'
+			className='w-65 lg:w-175 xl:w-250'
 		>
 			<Track track={track} />
 		</Scroller>
diff --git a/src/app/pages/private/common/account/panels/profile/products/item.tsx b/src/app/pages/private/common/account/panels/info/products/item.tsx
similarity index 100%
rename from src/app/pages/private/common/account/panels/profile/products/item.tsx
rename to src/app/pages/private/common/account/panels/info/products/item.tsx
diff --git a/src/app/pages/private/common/account/panels/profile/products/remove.tsx b/src/app/pages/private/common/account/panels/info/products/remove.tsx
similarity index 100%
rename from src/app/pages/private/common/account/panels/profile/products/remove.tsx
rename to src/app/pages/private/common/account/panels/info/products/remove.tsx
diff --git a/src/app/pages/private/common/account/panels/profile/products/track.tsx b/src/app/pages/private/common/account/panels/info/products/track.tsx
similarity index 100%
rename from src/app/pages/private/common/account/panels/profile/products/track.tsx
rename to src/app/pages/private/common/account/panels/info/products/track.tsx
diff --git a/src/app/pages/private/common/account/panels/profile/index.tsx b/src/app/pages/private/common/account/panels/profile/index.tsx
index 7fa3e7c..0be64ee 100644
--- a/src/app/pages/private/common/account/panels/profile/index.tsx
+++ b/src/app/pages/private/common/account/panels/profile/index.tsx
@@ -1,22 +1,14 @@
 import { type MyAccountResponse } from '@customcads/react-sdk';
-import { Separator } from '@/app/components/ui';
 import { Content } from '@/app/components/ui/card';
 import Names from './names';
-import Products from './products';
 
 type Props = { account: MyAccountResponse };
 export const Profile = ({ account }: Props) => (
-	<Content className='grow basis-full flex flex-col md:flex-row justify-center items-center gap-x-20 gap-y-4'>
+	<Content className='grow basis-full flex flex-col md:flex-row justify-center sm:px-20 gap-x-20 gap-y-4'>
 		<Names
 			username={account.username}
 			firstName={account.firstName ?? undefined}
 			lastName={account.lastName ?? undefined}
 		/>
-		<Separator orientation='vertical' className='hidden md:block' />
-		<Separator orientation='horizontal' className='md:hidden block' />
-		<Products
-			track={account.trackViewedProducts}
-			products={account.viewedProducts}
-		/>
 	</Content>
 );
diff --git a/src/app/pages/public/cart/aside.tsx b/src/app/pages/public/cart/aside.tsx
index 4e51d19..8447ab6 100644
--- a/src/app/pages/public/cart/aside.tsx
+++ b/src/app/pages/public/cart/aside.tsx
@@ -30,7 +30,7 @@ const Aside = ({ prices, costs }: Props) => {
 	const content = items?.length ? (
 		<div className='flex flex-col gap-y-12'>
 			<Money money={money} className='text-xl' />
-			<span className='font-bold text-xl text-nowrap'>
+			<span className='font-bold text-xl'>
 				{'Payment is currently still not supported.'}
 			</span>
 			{/* <Link to='.'>
@@ -41,7 +41,7 @@ const Aside = ({ prices, costs }: Props) => {
 		</div>
 	) : (
 		<div className='w-full h-full flex justify-center items-center'>
-			<span className='font-bold text-xl text-nowrap'>
+			<span className='font-bold text-xl'>
 				{'Payment is currently still not supported.'}
 			</span>
 			{/* <Link
@@ -54,8 +54,8 @@ const Aside = ({ prices, costs }: Props) => {
 	);
 
 	return (
-		<aside className='lg:w-1/3 flex flex-col justify-center items-stretch rounded-4xl animate-fade-in delay-1000'>
-			<section className='p-12 rounded-4xl min-h-80 border-2'>
+		<aside className='flex flex-col justify-center items-stretch rounded-4xl animate-fade-in delay-1000'>
+			<section className='p-12 rounded-4xl sm:min-w-106 min-h-80 border-2'>
 				{content}
 			</section>
 		</aside>
diff --git a/src/app/pages/public/cart/index.tsx b/src/app/pages/public/cart/index.tsx
index 2a6234a..24e1324 100644
--- a/src/app/pages/public/cart/index.tsx
+++ b/src/app/pages/public/cart/index.tsx
@@ -14,7 +14,7 @@ const Cart = () => {
 	return (
 		<div className={cn(page.className, 'justify-start')}>
 			<div className='w-full flex flex-col lg:flex-row md:justify-between gap-x-8 gap-y-6'>
-				<section className='lg:min-w-9/16 flex flex-col gap-y-6 lg:gap-y-12 animate-fade-in delay-500'>
+				<section className='lg:grow flex flex-col gap-y-6 lg:gap-y-12 animate-fade-in delay-500'>
 					<h3 className='text-3xl text-center font-extrabold'>
 						{tCart('title')}
 					</h3>
diff --git a/src/app/pages/public/home/section-3/popular.tsx b/src/app/pages/public/home/section-3/popular.tsx
index 2100f2d..eff6ff3 100644
--- a/src/app/pages/public/home/section-3/popular.tsx
+++ b/src/app/pages/public/home/section-3/popular.tsx
@@ -21,12 +21,12 @@ const PopularProducts = () => {
 
 	return (
 		<carousel.Root opts={{ loop: true, dragFree: true, slidesToScroll: 1 }}>
-			<carousel.Content className='px-6 py-10 max-w-70 md:max-w-140 lg:max-w-280'>
+			<carousel.Content className='px-6 py-10 max-w-70 sm:max-w-140 lg:max-w-220 xl:max-w-280'>
 				<Products limit={LIMIT.default} tag={tag}>
 					{(x) => (
 						<carousel.Item
 							key={x.id}
-							className='md:basis-1/2 lg:basis-1/3'
+							className='sm:basis-1/2 lg:basis-1/3'
 						>
 							<Item product={x} className='aspect-square' />
 						</carousel.Item>

From b07c7492bee3c10f82f7534297ec106b292a7a43 Mon Sep 17 00:00:00 2001
From: Ivan Angelov <ivanangelov414@gmail.com>
Date: Mon, 27 Jul 2026 12:23:30 +0300
Subject: [PATCH 04/17] Global UI fixes: - Corrected Auth updates - Inserted
 space in-between Pascal case words for Sortings - Added cursor pointers where
 missing and removed where redundant

---
 src/app/components/search/categories/index.tsx  |  8 +++++---
 src/app/components/search/pagination/index.tsx  |  4 ++--
 src/app/components/search/pagination/limits.tsx |  2 +-
 src/app/components/search/sortings/index.tsx    | 17 ++++++++++-------
 src/app/components/ui/carousel.tsx              |  4 ++--
 src/app/components/ui/command.tsx               |  2 +-
 src/app/components/ui/select.tsx                |  1 +
 src/app/locales/i18n.ts                         |  4 ++--
 src/app/pages/public/cart/item/buttons.tsx      |  4 ++--
 src/app/stores/auth.ts                          |  8 ++++----
 src/routes/__root.tsx                           |  6 ++++--
 11 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/src/app/components/search/categories/index.tsx b/src/app/components/search/categories/index.tsx
index 79050f1..dcd2b95 100644
--- a/src/app/components/search/categories/index.tsx
+++ b/src/app/components/search/categories/index.tsx
@@ -35,10 +35,9 @@ const Categories = ({ getCategory, updateCategory }: Props) => {
 		}
 	};
 
-	const iconClass = 'cursor-pointer w-5 h-5 md:w-5 md:h-5';
 	return (
 		<div className='flex items-center gap-x-2'>
-			<Funnel className={iconClass} />
+			<Funnel className='w-5 h-5 md:w-5 md:h-5' />
 			<CategoriesCombobox
 				current={category}
 				options={categories.map((x) => ({
@@ -52,7 +51,10 @@ const Categories = ({ getCategory, updateCategory }: Props) => {
 				</span>
 			</CategoriesCombobox>
 			{category !== initial && (
-				<X onClick={() => handleSelect()} className={iconClass} />
+				<X
+					onClick={() => handleSelect()}
+					className='cursor-pointer w-5 h-5 md:w-5 md:h-5'
+				/>
 			)}
 		</div>
 	);
diff --git a/src/app/components/search/pagination/index.tsx b/src/app/components/search/pagination/index.tsx
index 4e8f290..8d47b40 100644
--- a/src/app/components/search/pagination/index.tsx
+++ b/src/app/components/search/pagination/index.tsx
@@ -18,7 +18,7 @@ const Pagination = ({ total, defaultPagination, navigate }: Props) => {
 	return (
 		<pagination.Root>
 			<pagination.Content className='grid grid-cols-4 place-items-center gap-y-4'>
-				<section className='col-span-2 md:col-span-1 order-2 md:order-1'>
+				<section className='col-span-2 md:col-span-1 order-2 md:order-1 cursor-pointer'>
 					<Limits
 						min={1}
 						max={Math.ceil(total / limit)}
@@ -33,7 +33,7 @@ const Pagination = ({ total, defaultPagination, navigate }: Props) => {
 						onChange={handleChange.page}
 					/>
 				</section>
-				<section className='col-span-2 md:col-span-1 order-3 md:order-3'>
+				<section className='col-span-2 md:col-span-1 order-3 md:order-3 cursor-pointer'>
 					<Limits
 						min={LIMITS.GALLERY.min}
 						max={LIMITS.GALLERY.max}
diff --git a/src/app/components/search/pagination/limits.tsx b/src/app/components/search/pagination/limits.tsx
index 08dc409..30e8818 100644
--- a/src/app/components/search/pagination/limits.tsx
+++ b/src/app/components/search/pagination/limits.tsx
@@ -30,7 +30,7 @@ const Limits = ({ min, max, limit, onChange }: Props) => {
 	return (
 		<pagination.Item className='flex gap-x-4'>
 			<select.Root onValueChange={(val) => onChange(Number(val))}>
-				<select.Trigger className='text-secondary-foreground text-sm md:text-lg py-1 ps-4 pe-2 rounded-lg'>
+				<select.Trigger className='cursor-pointer text-secondary-foreground text-sm md:text-lg py-1 ps-4 pe-2 rounded-lg'>
 					<span className='text-xs'>{limit}</span>
 				</select.Trigger>
 				<select.Content className='max-h-100'>
diff --git a/src/app/components/search/sortings/index.tsx b/src/app/components/search/sortings/index.tsx
index 181fc68..d127bdf 100644
--- a/src/app/components/search/sortings/index.tsx
+++ b/src/app/components/search/sortings/index.tsx
@@ -42,11 +42,14 @@ const Sortings = ({ getSorting, updateSorting, sortings }: Props) => {
 		}
 	};
 
+	if (!sortings) return;
+
 	const handleSelect = (name?: string) => {
 		setSorting(() => name ?? initial);
 		updateSorting({ type: name, direction });
 	};
-	if (!sortings) return;
+	const format = (sorting: string) =>
+		sorting.replace(/([a-z])([A-Z])/g, '$1 $2');
 
 	const DirectionArrow = direction === 'ascending' ? ArrowUp : ArrowDown;
 
@@ -55,18 +58,18 @@ const Sortings = ({ getSorting, updateSorting, sortings }: Props) => {
 			<ArrowUpDown />
 			<SortingsCombobox
 				current={sorting}
-				options={sortings.map((x) => ({
-					value: x,
-					label: x,
-				}))}
+				options={sortings.map((x) => ({ value: x, label: format(x) }))}
 				onSelect={handleSelect}
 			>
 				<span className='flex justify-between items-center gap-x-2 px-8 py-3 bg-secondary text-popover-foreground text-xs md:text-lg border-2 border-border rounded-2xl cursor-pointer hover:brightness-80 transition duration-200'>
-					{sorting}
+					{format(sorting)}
 				</span>
 			</SortingsCombobox>
 			{sorting !== initial && (
-				<DirectionArrow onClick={toggleDirection} />
+				<DirectionArrow
+					onClick={toggleDirection}
+					className='cursor-pointer'
+				/>
 			)}
 		</div>
 	);
diff --git a/src/app/components/ui/carousel.tsx b/src/app/components/ui/carousel.tsx
index d2a952c..3aa31b4 100644
--- a/src/app/components/ui/carousel.tsx
+++ b/src/app/components/ui/carousel.tsx
@@ -192,7 +192,7 @@ const CarouselPrevious = ({
 			variant={variant}
 			size={size}
 			className={cn(
-				'absolute size-8 rounded-full',
+				'absolute size-8 rounded-full cursor-pointer',
 				orientation === 'horizontal'
 					? 'top-1/2 -left-12 -translate-y-1/2'
 					: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
@@ -222,7 +222,7 @@ const CarouselNext = ({
 			variant={variant}
 			size={size}
 			className={cn(
-				'absolute size-8 rounded-full',
+				'absolute size-8 rounded-full cursor-pointer',
 				orientation === 'horizontal'
 					? 'top-1/2 -right-12 -translate-y-1/2'
 					: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
diff --git a/src/app/components/ui/command.tsx b/src/app/components/ui/command.tsx
index 78ec6eb..a2f8363 100644
--- a/src/app/components/ui/command.tsx
+++ b/src/app/components/ui/command.tsx
@@ -122,7 +122,7 @@ const CommandItem = ({
 	<Primitive.Item
 		data-slot='command-item'
 		className={cn(
-			"[&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+			"[&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 			className,
 		)}
 		{...props}
diff --git a/src/app/components/ui/select.tsx b/src/app/components/ui/select.tsx
index 2a6d987..7446eeb 100644
--- a/src/app/components/ui/select.tsx
+++ b/src/app/components/ui/select.tsx
@@ -33,6 +33,7 @@ const SelectTrigger = ({
 			"border-input data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 			className,
 		)}
+		data-placeholder={null}
 		{...props}
 	>
 		{children}
diff --git a/src/app/locales/i18n.ts b/src/app/locales/i18n.ts
index d754131..c619c0e 100644
--- a/src/app/locales/i18n.ts
+++ b/src/app/locales/i18n.ts
@@ -7,8 +7,8 @@ import {
 } from '@/lib/isomorphic/locale';
 import { loadTranslations } from './load-translations';
 
-const initialize = () => {
-	i18n.use(initReactI18next).init({
+const initialize = async () => {
+	await i18n.use(initReactI18next).init({
 		supportedLngs: ALLOWED_LANGUAGES,
 		lng: getLanguageCookie(),
 		fallbackLng: getDefaultLanguageCookie() ?? ('en-GB' satisfies Language),
diff --git a/src/app/pages/public/cart/item/buttons.tsx b/src/app/pages/public/cart/item/buttons.tsx
index a7e6ec6..f743481 100644
--- a/src/app/pages/public/cart/item/buttons.tsx
+++ b/src/app/pages/public/cart/item/buttons.tsx
@@ -23,7 +23,7 @@ const Buttons = ({
 			<Button
 				variant='destructive'
 				onClick={onRemoveClick}
-				className='md:self-stretch md:min-w-22'
+				className='cursor-pointer md:self-stretch md:min-w-22'
 			>
 				<Trash />
 			</Button>
@@ -33,7 +33,7 @@ const Buttons = ({
 				tag='span'
 				variant='secondary'
 				onClick={onDeliveryChange}
-				className='px-2 md:px-4'
+				className='cursor-pointer px-2 md:px-4'
 			>
 				<div className='max-w-32 flex items-center gap-x-2'>
 					<span className='text-xs'>{tCart('delivery')}:</span>
diff --git a/src/app/stores/auth.ts b/src/app/stores/auth.ts
index 00a1bb0..79502d4 100644
--- a/src/app/stores/auth.ts
+++ b/src/app/stores/auth.ts
@@ -6,16 +6,16 @@ type State = {
 	authn: boolean;
 	authz: string | null;
 };
-const defaultState = {
+const getDefaultState = () => ({
 	authn: Boolean(getRoleCookie()),
 	authz: getRoleCookie() ?? null,
-};
+});
 export const get = getStore(() => {
-	const store = new Store<State>(defaultState);
+	const store = new Store<State>(getDefaultState());
 
 	return {
 		store,
-		reset: () => store.setState(() => defaultState),
+		reset: () => store.setState(getDefaultState),
 		login: (role: string) => {
 			store.setState(() => ({ authn: true, authz: role }));
 		},
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index babc562..cdb0cb0 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -15,11 +15,13 @@ import ErrorPage from '@/app/components/error';
 import { TanStackDevtools } from '@/app/integrations/tanstack-devtools';
 import * as i18n from '@/app/locales/i18n';
 import '@/index.css';
+import { getLanguageCookie } from '@/lib/isomorphic';
 
 let cssUrl: string | undefined;
 if (!import.meta.env.DEV) {
 	await import('@/index.css?url').then((i) => (cssUrl = i.default));
 }
+i18n.initialize();
 
 export const Route = createRootRouteWithContext<RouterContext>()({
 	head: () => {
@@ -43,8 +45,8 @@ export const Route = createRootRouteWithContext<RouterContext>()({
 		};
 	},
 	shellComponent: ({ children }) => {
-		const { language } = i18n.initialize();
-		const lang = language.split('-')[0] ?? 'en';
+		const lang = getLanguageCookie()?.split('-')[0] ?? 'en';
+
 		return (
 			<html lang={lang} className={cn({ dark: !isLightThemeCookie() })}>
 				<head>

From eb0f5be9d66d106a9f3aaae9c764c65093a341e2 Mon Sep 17 00:00:00 2001
From: Ivan Angelov <ivanangelov414@gmail.com>
Date: Mon, 27 Jul 2026 12:27:23 +0300
Subject: [PATCH 05/17] Improved language detection

---
 src/app/utils/money.ts       | 7 ++++++-
 src/lib/isomorphic/locale.ts | 4 ++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/app/utils/money.ts b/src/app/utils/money.ts
index 0ce42a0..319cfb5 100644
--- a/src/app/utils/money.ts
+++ b/src/app/utils/money.ts
@@ -2,6 +2,7 @@ import { Currency, ExchangeRate, EXCHANGE_RATES } from '@customcads/react-sdk';
 import {
 	getLanguageCookie,
 	getUserDefaultLanguage,
+	getUserNavigatorLanguage,
 } from '@/lib/isomorphic/locale';
 import { typescript } from '@/lib/utils';
 
@@ -20,7 +21,11 @@ const currencyToRate = (rates: ExchangeRate[], currency: Currency) => {
 
 export const resolveCurrency = (currency?: Currency) =>
 	currency ??
-	currencies[getLanguageCookie() ?? getUserDefaultLanguage()] ??
+	currencies[
+		getUserNavigatorLanguage() ??
+			getLanguageCookie() ??
+			getUserDefaultLanguage()
+	] ??
 	'EUR';
 
 export const currencyToSymbol = (currency?: Currency) =>
diff --git a/src/lib/isomorphic/locale.ts b/src/lib/isomorphic/locale.ts
index 32089c7..92f0423 100644
--- a/src/lib/isomorphic/locale.ts
+++ b/src/lib/isomorphic/locale.ts
@@ -4,6 +4,10 @@ import { LanguageStoreState } from '@/app/stores/locale';
 import { LOCALE } from '@/app/constants/stores';
 import { get } from './persistence';
 
+export const getUserNavigatorLanguage = createIsomorphicFn()
+	.client(() => navigator.language as AllowedLanguage)
+	.server(() => null);
+
 export const getUserDefaultLanguage = createIsomorphicFn()
 	.client<[], AllowedLanguage>(() => {
 		const languages = navigator.languages || [navigator.language];

From 39ca0619f75d102bd35999eab418950ede6c4a1b Mon Sep 17 00:00:00 2001
From: Ivan Angelov <ivanangelov414@gmail.com>
Date: Mon, 27 Jul 2026 22:20:31 +0300
Subject: [PATCH 06/17] Displayed Tags in Product page

---
 src/app/components/ui/badge.tsx               | 47 +++++++++++++++++++
 src/app/components/ui/index.ts                |  1 +
 src/app/pages/public/product/index.tsx        |  4 +-
 src/app/pages/public/product/tags.tsx         | 14 ------
 src/app/pages/public/product/tags/index.tsx   | 28 +++++++++++
 .../pages/public/product/tags/variants.tsx    | 19 ++++++++
 6 files changed, 97 insertions(+), 16 deletions(-)
 create mode 100644 src/app/components/ui/badge.tsx
 delete mode 100644 src/app/pages/public/product/tags.tsx
 create mode 100644 src/app/pages/public/product/tags/index.tsx
 create mode 100644 src/app/pages/public/product/tags/variants.tsx

diff --git a/src/app/components/ui/badge.tsx b/src/app/components/ui/badge.tsx
new file mode 100644
index 0000000..0359abd
--- /dev/null
+++ b/src/app/components/ui/badge.tsx
@@ -0,0 +1,47 @@
+import { Slot } from 'radix-ui';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+	'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
+	{
+		variants: {
+			variant: {
+				default:
+					'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+				secondary:
+					'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+				destructive:
+					'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
+				outline:
+					'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+				ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+				link: 'text-primary underline-offset-4 hover:underline',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+const Badge = ({
+	className,
+	variant = 'default',
+	asChild = false,
+	...props
+}: React.ComponentProps<'span'> &
+	VariantProps<typeof badgeVariants> & { asChild?: boolean }) => {
+	const Comp = asChild ? Slot.Root : 'span';
+
+	return (
+		<Comp
+			data-slot='badge'
+			data-variant={variant}
+			className={cn(badgeVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+};
+
+export { Badge, badgeVariants };
diff --git a/src/app/components/ui/index.ts b/src/app/components/ui/index.ts
index 1c91e97..f21542e 100644
--- a/src/app/components/ui/index.ts
+++ b/src/app/components/ui/index.ts
@@ -1,5 +1,6 @@
 export * as alert from './alert';
 export * as alertDialog from './alert-dialog';
+export { Badge } from './badge';
 export { Button } from './button';
 export * as card from './card';
 export * as carousel from './carousel';
diff --git a/src/app/pages/public/product/index.tsx b/src/app/pages/public/product/index.tsx
index 7937c32..325ec3a 100644
--- a/src/app/pages/public/product/index.tsx
+++ b/src/app/pages/public/product/index.tsx
@@ -4,7 +4,7 @@ import { cn } from '@/lib/utils';
 import * as page from '@/app/utils/page';
 import Card from './card';
 import Info from './info';
-// import Tags from './tags';
+import Tags from './tags';
 
 const Route = getRouteApi('/_public/gallery/$id');
 
@@ -20,9 +20,9 @@ const Product = () => {
 				{product.name}
 			</h3>
 			<section className='w-full flex flex-col items-center gap-y-4 md:gap-x-8 md:gap-y-6'>
+				<Tags>{product.tags}</Tags>
 				<Card product={product} />
 				<Info product={product} />
-				{/* <Tags tags={product.tags} /> */}
 			</section>
 		</div>
 	);
diff --git a/src/app/pages/public/product/tags.tsx b/src/app/pages/public/product/tags.tsx
deleted file mode 100644
index c511242..0000000
--- a/src/app/pages/public/product/tags.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-const Tags = ({ tags }: { tags: string[] }) => (
-	<ul className='grid grid-cols-3 md:grid-cols-6 gap-x-4 gap-y-2 justify-center items-center'>
-		{tags.map((x) => (
-			<li
-				key={x}
-				className='bg-primary text-primary-foreground text-center px-3 py-1 rounded-xl'
-			>
-				{x}
-			</li>
-		))}
-	</ul>
-);
-
-export default Tags;
diff --git a/src/app/pages/public/product/tags/index.tsx b/src/app/pages/public/product/tags/index.tsx
new file mode 100644
index 0000000..ffe3992
--- /dev/null
+++ b/src/app/pages/public/product/tags/index.tsx
@@ -0,0 +1,28 @@
+import { Badge } from '@/app/components/ui';
+import { cn } from '@/lib/utils';
+import { tagVariants, Variant } from './variants';
+
+type Props = { children: string[] };
+const Tags = ({ children }: Props) => (
+	<div className='w-full px-4'>
+		<ul
+			className={cn(
+				'flex justify-items-center overflow-x-auto gap-2 scrollbar-none',
+				'sm:grid sm:grid-cols-4 sm:gap-x-20 sm:gap-y-4 sm:overflow-y-auto sm:max-h-20 sm:px-16',
+			)}
+		>
+			{children.map((tag) => (
+				<Badge
+					key={tag}
+					className={tagVariants({
+						variant: tag.toLowerCase() as Variant,
+					})}
+				>
+					{tag}
+				</Badge>
+			))}
+		</ul>
+	</div>
+);
+
+export default Tags;
diff --git a/src/app/pages/public/product/tags/variants.tsx b/src/app/pages/public/product/tags/variants.tsx
new file mode 100644
index 0000000..865f693
--- /dev/null
+++ b/src/app/pages/public/product/tags/variants.tsx
@@ -0,0 +1,19 @@
+import { cn } from '@/lib/utils';
+import { cva } from 'class-variance-authority';
+
+const variants = {
+	default: 'bg-primary text-primary-foreground',
+	new: 'bg-rose-500 text-rose-100 border-rose-800',
+	printable: 'bg-emerald-500 text-emerald-100 border-emerald-800',
+	professional: 'bg-slate-500 text-slate-100 border-slate-800',
+	popular: 'bg-fuchsia-500 text-fuchsia-100 border-fuchsia-800',
+};
+export type Variant = keyof typeof variants;
+
+export const tagVariants = cva(
+	cn('w-32 h-6', 'sm:px-6 sm:h-8 sm:text-sm', 'xl:px-8 xl:h-10 xl:text-base'),
+	{
+		variants: { variant: variants },
+		defaultVariants: { variant: 'default' },
+	},
+);

From 310e21946bc805fdaefd28bb74c91aabfaf5619e Mon Sep 17 00:00:00 2001
From: Ivan Angelov <ivanangelov414@gmail.com>
Date: Tue, 28 Jul 2026 20:10:57 +0300
Subject: [PATCH 07/17] Improved Galley bars Code Style

---
 src/app/components/search/searchbar/index.tsx |  2 +-
 src/app/pages/public/gallery/bars.tsx         | 88 ++++++++++++++-----
 .../public/gallery/hooks/useDropdowns.tsx     | 68 --------------
 .../pages/public/product/tags/variants.tsx    |  6 +-
 4 files changed, 72 insertions(+), 92 deletions(-)
 delete mode 100644 src/app/pages/public/gallery/hooks/useDropdowns.tsx

diff --git a/src/app/components/search/searchbar/index.tsx b/src/app/components/search/searchbar/index.tsx
index c885a0f..b59dfa0 100644
--- a/src/app/components/search/searchbar/index.tsx
+++ b/src/app/components/search/searchbar/index.tsx
@@ -30,7 +30,7 @@ const Searchbar = ({ placeholder, getSearch, updateSearch }: Props) => {
 				onChange={({ target }) => setSearch(target.value)}
 				onBlur={() => updateSearch(search)}
 				onKeyDown={({ key }) => key === 'Enter' && updateSearch(search)}
-				className='bg-secondary border-2 rounded-xl min-h-11 md:min-h-14 md:min-w-75 md:px-6 text-ellipsis text-xs md:text-lg'
+				className='bg-secondary border-2 rounded-xl min-h-11 md:min-h-14 min-w-50 sm:min-w-60 md:min-w-75 lg:min-w-100 xl:min-w-120 md:px-6 text-ellipsis text-xs md:text-lg'
 				autoComplete='off'
 			/>
 			<Search
diff --git a/src/app/pages/public/gallery/bars.tsx b/src/app/pages/public/gallery/bars.tsx
index dd076ec..4837ee3 100644
--- a/src/app/pages/public/gallery/bars.tsx
+++ b/src/app/pages/public/gallery/bars.tsx
@@ -1,28 +1,72 @@
-import { useDropdowns } from './hooks/useDropdowns';
+import { getRouteApi } from '@tanstack/react-router';
+import { useQuery } from '@customcads/react-sdk';
+import { useFormTranslations } from '@/app/hooks/locales/translations/components';
+import Categories from '@/app/components/search/categories';
+import Searchbar from '@/app/components/search/searchbar';
+import Sortings from '@/app/components/search/sortings';
+
+const Route = getRouteApi('/_public/gallery/');
 
 const Bars = () => {
-	const dropdowns = useDropdowns();
+	const tPlaceholders = useFormTranslations('placeholders');
+
+	const navigate = Route.useNavigate();
+	const search = Route.useSearch();
+
+	const { data: sortings } = useQuery(
+		({ products }) => products.gallery.sortings,
+	);
 
-	return [
-		<div
-			key='mobile'
-			className='md:hidden flex flex-col justify-center gap-y-8'
-		>
-			<div className='flex gap-x-4'>
-				<dropdowns.Categories />
-				<dropdowns.Sortings />
-			</div>
-			<dropdowns.Searchbar />
-		</div>,
-		<div
-			key='desktop'
-			className='hidden md:flex md:justify-center md:w-full md:gap-x-8'
-		>
-			<dropdowns.Categories />
-			<dropdowns.Searchbar />
-			<dropdowns.Sortings />
-		</div>,
-	];
+	return (
+		<div className='w-full grid grid-cols-4 justify-items-center gap-y-8 gap-x-8 md:gap-x-0'>
+			<section className='place-self-end col-span-2 md:col-span-1 order-1 md:order-1'>
+				<Categories
+					getCategory={() => search.categoryName}
+					updateCategory={(category) => {
+						navigate({
+							search: (prev) => ({
+								...prev,
+								categoryName: category?.name,
+							}),
+						});
+					}}
+				/>
+			</section>
+			<section className='order-3 md:col-span-2 col-span-4 md:order-2'>
+				<Searchbar
+					placeholder={tPlaceholders('search-products')}
+					getSearch={() => search.name}
+					updateSearch={(name) => {
+						navigate({
+							search: (prev) => ({
+								...prev,
+								// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+								name: name || undefined,
+							}),
+						});
+					}}
+				/>
+			</section>
+			<section className='place-self-start col-span-2 md:col-span-1 order-2 md:order-3'>
+				<Sortings
+					sortings={sortings}
+					getSorting={() => ({
+						type: search.sortingType,
+						direction: search.sortingDirection,
+					})}
+					updateSorting={({ type, direction }) => {
+						navigate({
+							search: (prev) => ({
+								...prev,
+								sortingType: type ?? prev.sortingType,
+								sortingDirection: direction,
+							}),
+						});
+					}}
+				/>
+			</section>
+		</div>
+	);
 };
 
 export default Bars;
diff --git a/src/app/pages/public/gallery/hooks/useDropdowns.tsx b/src/app/pages/public/gallery/hooks/useDropdowns.tsx
deleted file mode 100644
index 92d87b1..0000000
--- a/src/app/pages/public/gallery/hooks/useDropdowns.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { getRouteApi } from '@tanstack/react-router';
-import { useQuery } from '@customcads/react-sdk';
-import { useFormTranslations } from '@/app/hooks/locales/translations/components';
-import Categories from '@/app/components/search/categories';
-import Searchbar from '@/app/components/search/searchbar';
-import Sortings from '@/app/components/search/sortings';
-
-const Route = getRouteApi('/_public/gallery/');
-
-export const useDropdowns = () => {
-	const tPlaceholders = useFormTranslations('placeholders');
-
-	const navigate = Route.useNavigate();
-	const search = Route.useSearch();
-
-	const { data: sortings } = useQuery(
-		({ products }) => products.gallery.sortings,
-	);
-
-	return {
-		Categories: () => (
-			<Categories
-				getCategory={() => search.categoryName}
-				updateCategory={(category) => {
-					navigate({
-						search: (prev) => ({
-							...prev,
-							categoryName: category?.name,
-						}),
-					});
-				}}
-			/>
-		),
-		Searchbar: () => (
-			<Searchbar
-				placeholder={tPlaceholders('search-products')}
-				getSearch={() => search.name}
-				updateSearch={(name) => {
-					navigate({
-						search: (prev) => ({
-							...prev,
-							// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-							name: name || undefined,
-						}),
-					});
-				}}
-			/>
-		),
-		Sortings: () => (
-			<Sortings
-				sortings={sortings}
-				getSorting={() => ({
-					type: search.sortingType,
-					direction: search.sortingDirection,
-				})}
-				updateSorting={({ type, direction }) => {
-					navigate({
-						search: (prev) => ({
-							...prev,
-							sortingType: type ?? prev.sortingType,
-							sortingDirection: direction,
-						}),
-					});
-				}}
-			/>
-		),
-	};
-};
diff --git a/src/app/pages/public/product/tags/variants.tsx b/src/app/pages/public/product/tags/variants.tsx
index 865f693..5e671d5 100644
--- a/src/app/pages/public/product/tags/variants.tsx
+++ b/src/app/pages/public/product/tags/variants.tsx
@@ -11,7 +11,11 @@ const variants = {
 export type Variant = keyof typeof variants;
 
 export const tagVariants = cva(
-	cn('w-32 h-6', 'sm:px-6 sm:h-8 sm:text-sm', 'xl:px-8 xl:h-10 xl:text-base'),
+	cn(
+		'w-32 border-2 dark:border-3 h-6',
+		'sm:px-6 sm:h-8 sm:text-sm',
+		'xl:px-8 xl:h-10 xl:text-base',
+	),
 	{
 		variants: { variant: variants },
 		defaultVariants: { variant: 'default' },

From 9b6f32996e4677ca81c94c4f3d75612522b1d322 Mon Sep 17 00:00:00 2001
From: Ivan Angelov <ivanangelov414@gmail.com>
Date: Tue, 28 Jul 2026 20:11:12 +0300
Subject: [PATCH 08/17] Added Galllery filtration by Tags

---
 src/app/pages/public/gallery/bars.tsx         | 14 ++++++
 src/app/pages/public/gallery/tags/index.tsx   | 48 +++++++++++++++++++
 .../pages/public/gallery/tags/variants.tsx    | 25 ++++++++++
 src/routes/_public/gallery/index.tsx          | 12 +++++
 4 files changed, 99 insertions(+)
 create mode 100644 src/app/pages/public/gallery/tags/index.tsx
 create mode 100644 src/app/pages/public/gallery/tags/variants.tsx

diff --git a/src/app/pages/public/gallery/bars.tsx b/src/app/pages/public/gallery/bars.tsx
index 4837ee3..c3691f7 100644
--- a/src/app/pages/public/gallery/bars.tsx
+++ b/src/app/pages/public/gallery/bars.tsx
@@ -4,6 +4,7 @@ import { useFormTranslations } from '@/app/hooks/locales/translations/components
 import Categories from '@/app/components/search/categories';
 import Searchbar from '@/app/components/search/searchbar';
 import Sortings from '@/app/components/search/sortings';
+import Tags from './tags';
 
 const Route = getRouteApi('/_public/gallery/');
 
@@ -16,6 +17,7 @@ const Bars = () => {
 	const { data: sortings } = useQuery(
 		({ products }) => products.gallery.sortings,
 	);
+	const { data: tags } = useQuery(({ tags }) => tags.all);
 
 	return (
 		<div className='w-full grid grid-cols-4 justify-items-center gap-y-8 gap-x-8 md:gap-x-0'>
@@ -65,6 +67,18 @@ const Bars = () => {
 					}}
 				/>
 			</section>
+			<section className='order-4 col-span-4'>
+				<Tags
+					getTags={() => search.tags}
+					updateTags={(tags) => {
+						navigate({
+							search: (prev) => ({ ...prev, tags }),
+						});
+					}}
+				>
+					{tags?.map((x) => x.name)}
+				</Tags>
+			</section>
 		</div>
 	);
 };
diff --git a/src/app/pages/public/gallery/tags/index.tsx b/src/app/pages/public/gallery/tags/index.tsx
new file mode 100644
index 0000000..1206d10
--- /dev/null
+++ b/src/app/pages/public/gallery/tags/index.tsx
@@ -0,0 +1,48 @@
+import { Badge } from '@/app/components/ui';
+import { cn } from '@/lib/utils';
+import { tagVariants, Tag } from './variants';
+import { useEffect, useState } from 'react';
+
+type Props = {
+	children?: string[];
+	getTags: () => string[] | undefined;
+	updateTags: (tags: string[] | undefined) => void;
+};
+const Tags = ({ children, getTags, updateTags }: Props) => {
+	const [tags, setTags] = useState<string[]>(getTags() ?? []);
+
+	useEffect(() => {
+		updateTags(tags.length ? tags : undefined);
+	}, [tags]);
+
+	return (
+		<div className='w-full px-4'>
+			<ul
+				className={cn(
+					'flex justify-items-center overflow-x-auto gap-2 scrollbar-none',
+					'sm:grid sm:grid-cols-4 sm:gap-x-20 sm:gap-y-4 sm:overflow-y-auto sm:max-h-20 sm:px-16',
+				)}
+			>
+				{children?.map((tag) => (
+					<Badge
+						key={tag}
+						className={tagVariants({
+							tag: tag.toLowerCase() as Tag,
+							selected: tags.includes(tag),
+						})}
+						onClick={() =>
+							setTags((prev) => {
+								if (!prev.includes(tag)) return [...prev, tag];
+								return prev.filter((x) => x !== tag);
+							})
+						}
+					>
+						{tag}
+					</Badge>
+				))}
+			</ul>
+		</div>
+	);
+};
+
+export default Tags;
diff --git a/src/app/pages/public/gallery/tags/variants.tsx b/src/app/pages/public/gallery/tags/variants.tsx
new file mode 100644
index 0000000..e837b2a
--- /dev/null
+++ b/src/app/pages/public/gallery/tags/variants.tsx
@@ -0,0 +1,25 @@
+import { cn } from '@/lib/utils';
+import { cva } from 'class-variance-authority';
+
+const tags = {
+	default: 'bg-primary text-primary-foreground',
+	new: 'bg-rose-500 text-rose-100 border-rose-800',
+	printable: 'bg-emerald-500 text-emerald-100 border-emerald-800',
+	professional: 'bg-slate-500 text-slate-100 border-slate-800',
+	popular: 'bg-fuchsia-500 text-fuchsia-100 border-fuchsia-800',
+};
+export type Tag = keyof typeof tags;
+
+export const selected = { true: 'brightness-120', false: 'brightness-60' };
+
+export const tagVariants = cva(
+	cn(
+		'w-32 border-2 dark:border-3 h-6',
+		'sm:px-6 sm:h-8 sm:text-sm',
+		'xl:px-8 xl:h-10 xl:text-base',
+	),
+	{
+		variants: { tag: tags, selected },
+		defaultVariants: { tag: 'default', selected: false },
+	},
+);
diff --git a/src/routes/_public/gallery/index.tsx b/src/routes/_public/gallery/index.tsx
index 389a266..84fa853 100644
--- a/src/routes/_public/gallery/index.tsx
+++ b/src/routes/_public/gallery/index.tsx
@@ -12,6 +12,7 @@ export const Route = createFileRoute('/_public/gallery/')({
 	validateSearch: z.object({
 		name: z.string().optional(),
 		categoryName: z.string().optional(),
+		tags: z.array(z.string()).optional(),
 		sortingType: z.string().optional(),
 		sortingDirection: z.string().optional(),
 		page: z.number().optional(),
@@ -20,6 +21,7 @@ export const Route = createFileRoute('/_public/gallery/')({
 	component: Gallery,
 	loaderDeps: ({ search }) => ({
 		name: search.name,
+		tags: search.tags,
 		categoryName: search.categoryName,
 		sortingType: search.sortingType,
 		sortingDirection: search.sortingDirection,
@@ -48,6 +50,16 @@ export const Route = createFileRoute('/_public/gallery/')({
 			requestParams.categoryId = category.id;
 		}
 
+		if (deps.tags) {
+			const { data: tags } = await query.fetchQuery(
+				({ tags }) => tags.all,
+				queryClient,
+			);
+			requestParams.tagIds = tags
+				.filter((x) => deps.tags?.includes(x.name))
+				.map((x) => x.id);
+		}
+
 		query.prefetchQuery(
 			({ products }) => products.gallery.all(requestParams),
 			queryClient,

From bea9a18ff4183eff089d3e6d8968c66d15e81c1a Mon Sep 17 00:00:00 2001
From: Ivan Angelov <ivanangelov414@gmail.com>
Date: Tue, 28 Jul 2026 20:44:12 +0300
Subject: [PATCH 09/17] Styling tweaks

---
 src/app/pages/public/gallery/index.tsx         |  2 +-
 src/app/pages/public/gallery/tags/index.tsx    |  2 +-
 src/app/pages/public/gallery/tags/variants.tsx | 18 ++++++++++++------
 src/app/pages/public/product/card.tsx          |  2 +-
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/app/pages/public/gallery/index.tsx b/src/app/pages/public/gallery/index.tsx
index 9cd828c..cc4b2df 100644
--- a/src/app/pages/public/gallery/index.tsx
+++ b/src/app/pages/public/gallery/index.tsx
@@ -15,7 +15,7 @@ const Gallery = () => {
 	);
 
 	return (
-		<div className={cn(page.className, 'gap-y-16 justify-between')}>
+		<div className={cn(page.className, 'gap-y-12 justify-between')}>
 			<Bars />
 			<List products={result} />
 			{result.count !== 0 && <GalleryPagination count={result.count} />}
diff --git a/src/app/pages/public/gallery/tags/index.tsx b/src/app/pages/public/gallery/tags/index.tsx
index 1206d10..106383a 100644
--- a/src/app/pages/public/gallery/tags/index.tsx
+++ b/src/app/pages/public/gallery/tags/index.tsx
@@ -20,7 +20,7 @@ const Tags = ({ children, getTags, updateTags }: Props) => {
 			<ul
 				className={cn(
 					'flex justify-items-center overflow-x-auto gap-2 scrollbar-none',
-					'sm:grid sm:grid-cols-4 sm:gap-x-20 sm:gap-y-4 sm:overflow-y-auto sm:max-h-20 sm:px-16',
+					'sm:grid sm:grid-cols-4 sm:gap-x-20 sm:gap-y-4 sm:overflow-y-auto sm:min-h-12 sm:px-16',
 				)}
 			>
 				{children?.map((tag) => (
diff --git a/src/app/pages/public/gallery/tags/variants.tsx b/src/app/pages/public/gallery/tags/variants.tsx
index e837b2a..633248c 100644
--- a/src/app/pages/public/gallery/tags/variants.tsx
+++ b/src/app/pages/public/gallery/tags/variants.tsx
@@ -1,20 +1,26 @@
 import { cn } from '@/lib/utils';
 import { cva } from 'class-variance-authority';
 
+const generateTagVariantClass = (color: string) =>
+	`bg-${color}-500 text-${color}-100 border-${color}-800 shadow-${color}-300`;
+
 const tags = {
 	default: 'bg-primary text-primary-foreground',
-	new: 'bg-rose-500 text-rose-100 border-rose-800',
-	printable: 'bg-emerald-500 text-emerald-100 border-emerald-800',
-	professional: 'bg-slate-500 text-slate-100 border-slate-800',
-	popular: 'bg-fuchsia-500 text-fuchsia-100 border-fuchsia-800',
+	new: generateTagVariantClass('rose'),
+	printable: generateTagVariantClass('emerald'),
+	professional: generateTagVariantClass('slate'),
+	popular: generateTagVariantClass('fuchsia'),
 };
 export type Tag = keyof typeof tags;
 
-export const selected = { true: 'brightness-120', false: 'brightness-60' };
+export const selected = {
+	true: 'brightness-120 shadow-lg dark:shadow-md',
+	false: 'brightness-60 hover:brightness-80 hover:shadow-xs',
+};
 
 export const tagVariants = cva(
 	cn(
-		'w-32 border-2 dark:border-3 h-6',
+		'w-32 border-2 h-6',
 		'sm:px-6 sm:h-8 sm:text-sm',
 		'xl:px-8 xl:h-10 xl:text-base',
 	),
diff --git a/src/app/pages/public/product/card.tsx b/src/app/pages/public/product/card.tsx
index 8909328..3f41833 100644
--- a/src/app/pages/public/product/card.tsx
+++ b/src/app/pages/public/product/card.tsx
@@ -21,7 +21,7 @@ const Card = ({ product }: Props) => {
 				</h3>
 				<Detail name={tProduct('category')} value={category.name} />
 			</div>
-			<aside className='w-full h-[50vh] md:h-[60vh] rounded-xl overflow-clip'>
+			<aside className='w-full h-[45vh] md:h-[50vh] rounded-xl overflow-clip'>
 				<Cad type='gallery' cadId={cadId} />
 			</aside>
 			<p>{description}</p>

From 42ad43eb4a962a752b75a9a5246da6d5f751c5ba Mon Sep 17 00:00:00 2001
From: Ivan Angelov <ivanangelov414@gmail.com>
Date: Wed, 29 Jul 2026 21:42:50 +0300
Subject: [PATCH 10/17] Implemented Empty panels for Gallery and Cart pages

---
 src/app/components/ui/empty.tsx               | 106 ++++++++++++++++++
 src/app/components/ui/index.ts                |   1 +
 src/app/hooks/locales/translations/common.ts  |   6 +-
 src/app/locales/bg-BG/common/empty.ts         |   5 -
 src/app/locales/bg-BG/common/empty/cart.ts    |   7 ++
 src/app/locales/bg-BG/common/empty/gallery.ts |   7 ++
 .../bg-BG/pages/public/gallery/cart.ts        |   1 -
 src/app/locales/en-GB/common/empty.ts         |   5 -
 src/app/locales/en-GB/common/empty/cart.ts    |   8 ++
 src/app/locales/en-GB/common/empty/gallery.ts |   8 ++
 .../en-GB/pages/public/gallery/cart.ts        |   1 -
 src/app/locales/types/common.ts               |   8 +-
 src/app/locales/types/common/empty.ts         |   5 +
 src/app/locales/types/pages/public/gallery.ts |   1 -
 src/app/pages/public/cart/aside.tsx           |  46 ++------
 src/app/pages/public/cart/empty.tsx           |  29 +++++
 src/app/pages/public/cart/index.tsx           |  34 +++---
 src/app/pages/public/cart/list.tsx            |  52 ++++-----
 src/app/pages/public/gallery/empty.tsx        |  29 +++++
 src/app/pages/public/gallery/list.tsx         |  11 +-
 20 files changed, 258 insertions(+), 112 deletions(-)
 create mode 100644 src/app/components/ui/empty.tsx
 delete mode 100644 src/app/locales/bg-BG/common/empty.ts
 create mode 100644 src/app/locales/bg-BG/common/empty/cart.ts
 create mode 100644 src/app/locales/bg-BG/common/empty/gallery.ts
 delete mode 100644 src/app/locales/en-GB/common/empty.ts
 create mode 100644 src/app/locales/en-GB/common/empty/cart.ts
 create mode 100644 src/app/locales/en-GB/common/empty/gallery.ts
 create mode 100644 src/app/locales/types/common/empty.ts
 create mode 100644 src/app/pages/public/cart/empty.tsx
 create mode 100644 src/app/pages/public/gallery/empty.tsx

diff --git a/src/app/components/ui/empty.tsx b/src/app/components/ui/empty.tsx
new file mode 100644
index 0000000..13db78e
--- /dev/null
+++ b/src/app/components/ui/empty.tsx
@@ -0,0 +1,106 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const Empty = ({ className, ...props }: React.ComponentProps<'div'>) => {
+	return (
+		<div
+			data-slot='empty'
+			className={cn(
+				'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12',
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
+
+const EmptyHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {
+	return (
+		<div
+			data-slot='empty-header'
+			className={cn(
+				'flex max-w-sm flex-col items-center gap-2 text-center',
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
+
+const emptyMediaVariants = cva(
+	'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
+	{
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6",
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+const EmptyMedia = ({
+	className,
+	variant = 'default',
+	...props
+}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) => {
+	return (
+		<div
+			data-slot='empty-icon'
+			data-variant={variant}
+			className={cn(emptyMediaVariants({ variant, className }))}
+			{...props}
+		/>
+	);
+};
+
+const EmptyTitle = ({ className, ...props }: React.ComponentProps<'div'>) => {
+	return (
+		<div
+			data-slot='empty-title'
+			className={cn('text-lg font-medium tracking-tight', className)}
+			{...props}
+		/>
+	);
+};
+
+const EmptyDescription = ({
+	className,
+	...props
+}: React.ComponentProps<'p'>) => {
+	return (
+		<div
+			data-slot='empty-description'
+			className={cn(
+				'text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
+
+const EmptyContent = ({ className, ...props }: React.ComponentProps<'div'>) => {
+	return (
+		<div
+			data-slot='empty-content'
+			className={cn(
+				'flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance',
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
+
+export {
+	Empty as Root,
+	EmptyHeader as Header,
+	EmptyTitle as Title,
+	EmptyDescription as Description,
+	EmptyContent as Content,
+	EmptyMedia as Media,
+};
diff --git a/src/app/components/ui/index.ts b/src/app/components/ui/index.ts
index f21542e..0d01bcd 100644
--- a/src/app/components/ui/index.ts
+++ b/src/app/components/ui/index.ts
@@ -9,6 +9,7 @@ export * as collapsible from './collapsible';
 export * as command from './command';
 export * as dialog from './dialog';
 export * as dropdownMenu from './dropdown-menu';
+export * as empty from './empty';
 export { Input } from './input';
 export { Label } from './label';
 export * as navMenu from './navmenu';
diff --git a/src/app/hooks/locales/translations/common.ts b/src/app/hooks/locales/translations/common.ts
index 0243dd0..5b7f5eb 100644
--- a/src/app/hooks/locales/translations/common.ts
+++ b/src/app/hooks/locales/translations/common.ts
@@ -1,5 +1,9 @@
 import { useTranslation } from '../useTranslation';
 
-type Common = 'locales' | 'roles' | 'loading' | 'empty' | 'errors' | 'metrics';
+type Common = 'locales' | 'roles' | 'loading' | 'errors' | 'metrics';
 export const useCommonTranslations = <N extends Common>(ns: N) =>
 	useTranslation(`common.${ns}`).t;
+
+type Empty = 'gallery' | 'cart';
+export const useEmptyTranslations = <N extends Empty>(ns: N) =>
+	useTranslation(`common.empty.${ns}`).t;
diff --git a/src/app/locales/bg-BG/common/empty.ts b/src/app/locales/bg-BG/common/empty.ts
deleted file mode 100644
index ee6ecda..0000000
--- a/src/app/locales/bg-BG/common/empty.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Common } from '../../types/common';
-
-export default {
-	products: 'Няма намерени Продукти.',
-} satisfies Common['common.empty'];
diff --git a/src/app/locales/bg-BG/common/empty/cart.ts b/src/app/locales/bg-BG/common/empty/cart.ts
new file mode 100644
index 0000000..8c15a8d
--- /dev/null
+++ b/src/app/locales/bg-BG/common/empty/cart.ts
@@ -0,0 +1,7 @@
+import { Empty } from '@/app/locales/types/common/empty';
+
+export default {
+	title: 'Няма добавени Продукти все още.',
+	description: 'Можеш да допринесеш като се регистрираш и качиш моделите си!',
+	link: 'Добави Продукти',
+} satisfies Empty['common.empty.products'];
diff --git a/src/app/locales/bg-BG/common/empty/gallery.ts b/src/app/locales/bg-BG/common/empty/gallery.ts
new file mode 100644
index 0000000..9b1cd8b
--- /dev/null
+++ b/src/app/locales/bg-BG/common/empty/gallery.ts
@@ -0,0 +1,7 @@
+import { Empty } from '@/app/locales/types/common/empty';
+
+export default {
+	title: 'Няма Продукти все още.',
+	description: 'Можеш да допринесеш като се регистрираш и качиш моделите си!',
+	link: 'Регистрирай се като Сътрудник',
+} satisfies Empty['common.empty.gallery'];
diff --git a/src/app/locales/bg-BG/pages/public/gallery/cart.ts b/src/app/locales/bg-BG/pages/public/gallery/cart.ts
index 2d59fb1..2afaeee 100644
--- a/src/app/locales/bg-BG/pages/public/gallery/cart.ts
+++ b/src/app/locales/bg-BG/pages/public/gallery/cart.ts
@@ -10,5 +10,4 @@ export default {
 	'print-cost': 'Разход за Принтиране',
 	'total-sum': 'Обща сума',
 	buy: 'Купи',
-	'no-items': 'Добави Продукти към тази Количка',
 } satisfies Cart;
diff --git a/src/app/locales/en-GB/common/empty.ts b/src/app/locales/en-GB/common/empty.ts
deleted file mode 100644
index 9af3854..0000000
--- a/src/app/locales/en-GB/common/empty.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Common } from '../../types/common';
-
-export default {
-	products: 'No Products found.',
-} satisfies Common['common.empty'];
diff --git a/src/app/locales/en-GB/common/empty/cart.ts b/src/app/locales/en-GB/common/empty/cart.ts
new file mode 100644
index 0000000..e67996c
--- /dev/null
+++ b/src/app/locales/en-GB/common/empty/cart.ts
@@ -0,0 +1,8 @@
+import { Empty } from '@/app/locales/types/common/empty';
+
+export default {
+	title: 'No added Products yet.',
+	description:
+		'You can fill your Cart by exploring our Gallery and adding any Product!',
+	link: 'Add Products to Cart',
+} satisfies Empty['common.empty.products'];
diff --git a/src/app/locales/en-GB/common/empty/gallery.ts b/src/app/locales/en-GB/common/empty/gallery.ts
new file mode 100644
index 0000000..31931ac
--- /dev/null
+++ b/src/app/locales/en-GB/common/empty/gallery.ts
@@ -0,0 +1,8 @@
+import { Empty } from '@/app/locales/types/common/empty';
+
+export default {
+	title: 'No Products yet.',
+	description:
+		'You can contribute contribute by signing up and uploading your models!',
+	link: 'Sign Up as a Contributor',
+} satisfies Empty['common.empty.gallery'];
diff --git a/src/app/locales/en-GB/pages/public/gallery/cart.ts b/src/app/locales/en-GB/pages/public/gallery/cart.ts
index df1adf5..d30eb27 100644
--- a/src/app/locales/en-GB/pages/public/gallery/cart.ts
+++ b/src/app/locales/en-GB/pages/public/gallery/cart.ts
@@ -10,5 +10,4 @@ export default {
 	'print-cost': 'Print cost',
 	'total-sum': 'Total sum',
 	buy: 'Buy',
-	'no-items': 'Add Products to this Cart',
 } satisfies Cart;
diff --git a/src/app/locales/types/common.ts b/src/app/locales/types/common.ts
index 26adbd0..06dd2fb 100644
--- a/src/app/locales/types/common.ts
+++ b/src/app/locales/types/common.ts
@@ -1,13 +1,13 @@
 import { Language } from '@/types/locale';
+import { Empty } from './common/empty';
 
 export type Common = {
 	'common.locales': Locales;
 	'common.roles': Roles;
 	'common.metrics': Metrics;
 	'common.loading': Loading;
-	'common.empty': Empty;
 	'common.errors': Errors;
-};
+} & Empty;
 
 type Locales = Record<Language, string>;
 
@@ -23,10 +23,6 @@ type Loading = {
 	gallery: string;
 };
 
-type Empty = {
-	products: string;
-};
-
 type Metrics = {
 	width: string;
 	height: string;
diff --git a/src/app/locales/types/common/empty.ts b/src/app/locales/types/common/empty.ts
new file mode 100644
index 0000000..f2d9b91
--- /dev/null
+++ b/src/app/locales/types/common/empty.ts
@@ -0,0 +1,5 @@
+export type Empty = {
+	'common.empty.gallery': Template;
+	'common.empty.cart': Template;
+};
+type Template = { title: string; description: string; link: string };
diff --git a/src/app/locales/types/pages/public/gallery.ts b/src/app/locales/types/pages/public/gallery.ts
index a3d2843..e2d9c50 100644
--- a/src/app/locales/types/pages/public/gallery.ts
+++ b/src/app/locales/types/pages/public/gallery.ts
@@ -25,7 +25,6 @@ export type Cart = {
 	'print-cost': string;
 	'total-sum': string;
 	buy: string;
-	'no-items': string;
 };
 
 export type Editor = {
diff --git a/src/app/pages/public/cart/aside.tsx b/src/app/pages/public/cart/aside.tsx
index 8447ab6..113d40a 100644
--- a/src/app/pages/public/cart/aside.tsx
+++ b/src/app/pages/public/cart/aside.tsx
@@ -1,16 +1,11 @@
-// import { Link } from '@tanstack/react-router';
-// import { useGalleryTranslations } from '@/app/hooks/locales/translations/pages/public';
 import { useCartStore } from '@/app/hooks/stores/useCartStore';
 import { useMoneyFormatter } from '@/app/hooks/locales/useMoneyFormatter';
-// import { Button } from '@/app/components/ui';
 import Money from './money';
 
 type MoneyRecord = Record<string, number>;
 type Props = { prices: MoneyRecord; costs: MoneyRecord };
 const Aside = ({ prices, costs }: Props) => {
-	// const tCart = useGalleryTranslations('cart');
 	const { items } = useCartStore();
-
 	const calculate = (money: Record<string, number>) =>
 		Object.values(money).reduce((price, acc) => acc + price, 0);
 
@@ -26,38 +21,19 @@ const Aside = ({ prices, costs }: Props) => {
 		total: formatMoney(sum.prices + sum.costs),
 	};
 
-	// TODO: Update when Payment is implemented
-	const content = items?.length ? (
-		<div className='flex flex-col gap-y-12'>
-			<Money money={money} className='text-xl' />
-			<span className='font-bold text-xl'>
-				{'Payment is currently still not supported.'}
-			</span>
-			{/* <Link to='.'>
-				<Button variant='outline' size='lg' className='text-lg w-full'>
-					{tCart('buy')}
-				</Button>
-			</Link> */}
-		</div>
-	) : (
-		<div className='w-full h-full flex justify-center items-center'>
-			<span className='font-bold text-xl'>
-				{'Payment is currently still not supported.'}
-			</span>
-			{/* <Link
-				to='/gallery'
-				className='italic underline underline-offset-4 text-lg'
-			>
-				{tCart('no-items')}
-			</Link> */}
-		</div>
-	);
+	if (!items?.length) return;
 
+	// TODO: Update when Payment is implemented
 	return (
-		<aside className='flex flex-col justify-center items-stretch rounded-4xl animate-fade-in delay-1000'>
-			<section className='p-12 rounded-4xl sm:min-w-106 min-h-80 border-2'>
-				{content}
-			</section>
+		<aside className='flex flex-col justify-center rounded-4xl animate-fade-in delay-1000'>
+			<div className='p-12 rounded-4xl sm:min-w-106 min-h-80 border-2'>
+				<div className='flex flex-col gap-y-12'>
+					<Money money={money} className='text-xl' />
+					<span className='font-bold text-xl'>
+						{'Payment is currently still not supported.'}
+					</span>
+				</div>
+			</div>
 		</aside>
 	);
 };
diff --git a/src/app/pages/public/cart/empty.tsx b/src/app/pages/public/cart/empty.tsx
new file mode 100644
index 0000000..5e641e3
--- /dev/null
+++ b/src/app/pages/public/cart/empty.tsx
@@ -0,0 +1,29 @@
+import { Link } from '@tanstack/react-router';
+import { useEmptyTranslations } from '@/app/hooks/locales/translations/common';
+import { Button, empty } from '@/app/components/ui';
+import { ShoppingCart } from 'lucide-react';
+
+const Empty = () => {
+	const tEmpty = useEmptyTranslations('cart');
+
+	return (
+		<empty.Root className='grow'>
+			<empty.Header>
+				<empty.Media variant='icon'>
+					<ShoppingCart />
+				</empty.Media>
+
+				<empty.Title>{tEmpty('title')}</empty.Title>
+				<empty.Description>{tEmpty('description')}</empty.Description>
+			</empty.Header>
+
+			<empty.Content>
+				<Button variant='link' className='text-lg'>
+					<Link to='/gallery'>{tEmpty('link')}</Link>
+				</Button>
+			</empty.Content>
+		</empty.Root>
+	);
+};
+
+export default Empty;
diff --git a/src/app/pages/public/cart/index.tsx b/src/app/pages/public/cart/index.tsx
index 24e1324..8f088ef 100644
--- a/src/app/pages/public/cart/index.tsx
+++ b/src/app/pages/public/cart/index.tsx
@@ -13,25 +13,29 @@ const Cart = () => {
 
 	return (
 		<div className={cn(page.className, 'justify-start')}>
-			<div className='w-full flex flex-col lg:flex-row md:justify-between gap-x-8 gap-y-6'>
+			<div className='w-full lg:min-h-[75vh] flex flex-col lg:flex-row md:justify-between gap-x-8 gap-y-6'>
 				<section className='lg:grow flex flex-col gap-y-6 lg:gap-y-12 animate-fade-in delay-500'>
 					<h3 className='text-3xl text-center font-extrabold'>
 						{tCart('title')}
 					</h3>
-					<List
-						set={{
-							price: (productId, price, acc?: boolean) =>
-								setPrice({
-									id: productId,
-									set: (prev) => (acc ? prev + price : price),
-								}),
-							cost: (id, cost, acc?: boolean) =>
-								setCost({
-									id: id,
-									set: (prev) => (acc ? prev + cost : cost),
-								}),
-						}}
-					/>
+					<div className='h-full flex ps-4 pe-2 py-4 overflow-clip shadow-sm shadow-primary rounded-4xl'>
+						<List
+							set={{
+								price: (productId, price, acc?: boolean) =>
+									setPrice({
+										id: productId,
+										set: (prev) =>
+											acc ? prev + price : price,
+									}),
+								cost: (id, cost, acc?: boolean) =>
+									setCost({
+										id: id,
+										set: (prev) =>
+											acc ? prev + cost : cost,
+									}),
+							}}
+						/>
+					</div>
 				</section>
 				<Aside prices={prices} costs={costs} />
 			</div>
diff --git a/src/app/pages/public/cart/list.tsx b/src/app/pages/public/cart/list.tsx
index 8106c30..a620918 100644
--- a/src/app/pages/public/cart/list.tsx
+++ b/src/app/pages/public/cart/list.tsx
@@ -1,46 +1,32 @@
-import { Link } from '@tanstack/react-router';
-import { useGalleryTranslations } from '@/app/hooks/locales/translations/pages/public';
 import { useCartStore } from '@/app/hooks/stores/useCartStore';
 import { scroll } from '@/app/components/ui';
+import Empty from './empty';
 import Item from './item';
 
 type Set = (productId: string, cost: number, acc?: boolean) => void;
 type Props = { set: { price: Set; cost: Set } };
 const List = ({ set }: Props) => {
-	const tCart = useGalleryTranslations('cart');
 	const { items } = useCartStore();
+	if (!items?.length) return <Empty />;
 
 	return (
-		<div className='ps-4 pe-2 py-4 overflow-clip shadow-sm shadow-primary rounded-4xl'>
-			<scroll.Area className='h-[50vh] lg:h-[75vh] lg:pe-5'>
-				<ul className='grid grid-cols-1 gap-y-2'>
-					{items?.length ? (
-						items.map((x) => (
-							<li key={x.productId}>
-								<Item
-									item={x}
-									set={{
-										cost: (cost, acc?: boolean) =>
-											set.cost(x.productId, cost, acc),
-										price: (price, acc?: boolean) =>
-											set.price(x.productId, price, acc),
-									}}
-								/>
-							</li>
-						))
-					) : (
-						<div className='w-full h-full flex justify-center items-center'>
-							<Link
-								to='/gallery'
-								className='italic underline underline-offset-4 text-lg'
-							>
-								{tCart('no-items')}
-							</Link>
-						</div>
-					)}
-				</ul>
-			</scroll.Area>
-		</div>
+		<scroll.Area className='w-full h-[50vh] lg:h-[75vh] py-1 pe-5'>
+			<ul className='grid grid-cols-1 gap-y-2'>
+				{items.map((x) => (
+					<li key={x.productId}>
+						<Item
+							item={x}
+							set={{
+								cost: (cost, acc?: boolean) =>
+									set.cost(x.productId, cost, acc),
+								price: (price, acc?: boolean) =>
+									set.price(x.productId, price, acc),
+							}}
+						/>
+					</li>
+				))}
+			</ul>
+		</scroll.Area>
 	);
 };
 
diff --git a/src/app/pages/public/gallery/empty.tsx b/src/app/pages/public/gallery/empty.tsx
new file mode 100644
index 0000000..2e9d649
--- /dev/null
+++ b/src/app/pages/public/gallery/empty.tsx
@@ -0,0 +1,29 @@
+import { GalleryVertical } from 'lucide-react';
+import { useEmptyTranslations } from '@/app/hooks/locales/translations/common';
+import { Button, empty } from '@/app/components/ui';
+import { Link } from '@tanstack/react-router';
+
+const Empty = () => {
+	const tEmpty = useEmptyTranslations('gallery');
+
+	return (
+		<empty.Root>
+			<empty.Header>
+				<empty.Media variant='icon'>
+					<GalleryVertical />
+				</empty.Media>
+
+				<empty.Title>{tEmpty('title')}</empty.Title>
+				<empty.Description>{tEmpty('description')}</empty.Description>
+			</empty.Header>
+
+			<empty.Content>
+				<Button>
+					<Link to='/register'>{tEmpty('link')}</Link>
+				</Button>
+			</empty.Content>
+		</empty.Root>
+	);
+};
+
+export default Empty;
diff --git a/src/app/pages/public/gallery/list.tsx b/src/app/pages/public/gallery/list.tsx
index 3563f35..3ba3332 100644
--- a/src/app/pages/public/gallery/list.tsx
+++ b/src/app/pages/public/gallery/list.tsx
@@ -2,11 +2,11 @@ import { ApiResult, GalleryAllProductsResponse } from '@customcads/react-sdk';
 import { cn } from '@/lib/utils';
 import { useCommonTranslations } from '@/app/hooks/locales/translations/common';
 import Item from './item';
+import Empty from './empty';
 
 type Props = { products?: ApiResult<GalleryAllProductsResponse> };
 const List = ({ products }: Props) => {
 	const tLoading = useCommonTranslations('loading');
-	const tEmpty = useCommonTranslations('empty');
 
 	if (!products) {
 		return (
@@ -15,14 +15,7 @@ const List = ({ products }: Props) => {
 			</span>
 		);
 	}
-
-	if (!products.count) {
-		return (
-			<span className='text-center text-lg md:text-2xl'>
-				{tEmpty('products')}
-			</span>
-		);
-	}
+	if (!products.count) return <Empty />;
 
 	return (
 		<ul

From 2d779eac3f56a735e651357be05e34955da0a79e Mon Sep 17 00:00:00 2001
From: Ivan Angelov <ivanangelov414@gmail.com>
Date: Thu, 30 Jul 2026 03:01:05 +0300
Subject: [PATCH 11/17] Implemented Skeleton for Gallery Pending Component

---
 src/app/pages/public/gallery/list.tsx     | 12 +-----
 src/app/pages/public/gallery/skeleton.tsx | 49 +++++++++++++++++++++++
 src/routes/_public/gallery/index.tsx      |  2 +
 3 files changed, 52 insertions(+), 11 deletions(-)
 create mode 100644 src/app/pages/public/gallery/skeleton.tsx

diff --git a/src/app/pages/public/gallery/list.tsx b/src/app/pages/public/gallery/list.tsx
index 3ba3332..8aad5c8 100644
--- a/src/app/pages/public/gallery/list.tsx
+++ b/src/app/pages/public/gallery/list.tsx
@@ -1,20 +1,10 @@
 import { ApiResult, GalleryAllProductsResponse } from '@customcads/react-sdk';
 import { cn } from '@/lib/utils';
-import { useCommonTranslations } from '@/app/hooks/locales/translations/common';
 import Item from './item';
 import Empty from './empty';
 
-type Props = { products?: ApiResult<GalleryAllProductsResponse> };
+type Props = { products: ApiResult<GalleryAllProductsResponse> };
 const List = ({ products }: Props) => {
-	const tLoading = useCommonTranslations('loading');
-
-	if (!products) {
-		return (
-			<span className='text-center text-lg md:text-3xl'>
-				{tLoading('gallery')}
-			</span>
-		);
-	}
 	if (!products.count) return <Empty />;
 
 	return (
diff --git a/src/app/pages/public/gallery/skeleton.tsx b/src/app/pages/public/gallery/skeleton.tsx
new file mode 100644
index 0000000..50fceca
--- /dev/null
+++ b/src/app/pages/public/gallery/skeleton.tsx
@@ -0,0 +1,49 @@
+import { Skeleton as SkeletonUI } from '@/app/components/ui';
+
+const Item = ({ delay = 0 }: { delay?: number }) => (
+	<div className='flex flex-col gap-y-2'>
+		<SkeletonUI
+			className='max-h-80 aspect-video'
+			style={{ animationDelay: `${delay}ms` }}
+		/>
+		<div className='flex justify-around items-center'>
+			<SkeletonUI
+				className='basis-1/8 aspect-square'
+				style={{ animationDelay: `${delay + 250}ms` }}
+			/>
+			<SkeletonUI
+				className='basis-3/8 h-10'
+				style={{ animationDelay: `${delay + 250}ms` }}
+			/>
+			<SkeletonUI
+				className='basis-1/8 aspect-square'
+				style={{ animationDelay: `${delay + 250}ms` }}
+			/>
+		</div>
+	</div>
+);
+
+const List = ({ delays }: { delays: number[] }) => (
+	<div className='w-full grid grid-cols-3 gap-x-16 gap-y-8'>
+		{delays.map((x, i) => (
+			<Item key={i} delay={x} />
+		))}
+	</div>
+);
+
+const Bars = () => (
+	<div className='w-full flex items-center gap-x-6'>
+		<SkeletonUI className='basis-1/8 h-10 delay-100' />
+		<SkeletonUI className='grow h-12 delay-200' />
+		<SkeletonUI className='basis-1/8 h-10 delay-300' />
+	</div>
+);
+
+const Skeleton = () => (
+	<div className='flex flex-col justify-center items-center gap-y-20 py-10 px-20'>
+		<Bars />
+		<List delays={[...Array(6)].map((_, i) => (i + 1) * 100)} />
+	</div>
+);
+
+export default Skeleton;
diff --git a/src/routes/_public/gallery/index.tsx b/src/routes/_public/gallery/index.tsx
index 84fa853..93f7f56 100644
--- a/src/routes/_public/gallery/index.tsx
+++ b/src/routes/_public/gallery/index.tsx
@@ -7,6 +7,7 @@ import {
 } from '@customcads/react-sdk';
 import * as limits from '@/app/constants/limits';
 import Gallery from '@/app/pages/public/gallery';
+import Skeleton from '@/app/pages/public/gallery/skeleton';
 
 export const Route = createFileRoute('/_public/gallery/')({
 	validateSearch: z.object({
@@ -19,6 +20,7 @@ export const Route = createFileRoute('/_public/gallery/')({
 		limit: z.number().optional(),
 	}),
 	component: Gallery,
+	pendingComponent: Skeleton,
 	loaderDeps: ({ search }) => ({
 		name: search.name,
 		tags: search.tags,

From 5c62279b320fd15ab5e15cec6486b0138c2f419e Mon Sep 17 00:00:00 2001
From: Ivan Angelov <ivanangelov414@gmail.com>
Date: Thu, 30 Jul 2026 16:53:24 +0300
Subject: [PATCH 12/17] Improved Searchbar UI and implemented Preview popup

---
 src/app/components/search/searchbar/index.tsx |  47 +++--
 src/app/components/ui/empty.tsx               |   2 +-
 src/app/components/ui/index.ts                |   3 +
 src/app/components/ui/input-group.tsx         | 158 ++++++++++++++
 src/app/components/ui/item.tsx                | 193 ++++++++++++++++++
 src/app/components/ui/textarea.tsx            |  17 ++
 src/app/pages/public/gallery/bars.tsx         |   2 +
 src/app/pages/public/gallery/empty.tsx        |  36 +++-
 src/app/pages/public/gallery/item.tsx         |   1 +
 src/app/pages/public/gallery/list.tsx         |   2 +-
 .../pages/public/gallery/preview/index.tsx    |  29 +++
 src/app/pages/public/gallery/preview/item.tsx |  30 +++
 .../pages/public/gallery/preview/skeleton.tsx |  30 +++
 .../pages/public/home/section-3/popular.tsx   |   2 +-
 src/hooks/utils/useMinimumLoadingTime.ts      |  21 ++
 src/index.css                                 |   4 +-
 src/routes/_public/gallery/$id.tsx            |   5 +-
 17 files changed, 545 insertions(+), 37 deletions(-)
 create mode 100644 src/app/components/ui/input-group.tsx
 create mode 100644 src/app/components/ui/item.tsx
 create mode 100644 src/app/components/ui/textarea.tsx
 create mode 100644 src/app/pages/public/gallery/preview/index.tsx
 create mode 100644 src/app/pages/public/gallery/preview/item.tsx
 create mode 100644 src/app/pages/public/gallery/preview/skeleton.tsx
 create mode 100644 src/hooks/utils/useMinimumLoadingTime.ts

diff --git a/src/app/components/search/searchbar/index.tsx b/src/app/components/search/searchbar/index.tsx
index b59dfa0..b557781 100644
--- a/src/app/components/search/searchbar/index.tsx
+++ b/src/app/components/search/searchbar/index.tsx
@@ -1,43 +1,46 @@
 import { useState } from 'react';
-import { Search, X } from 'lucide-react';
-import { Input } from '@/app/components/ui';
+import { Search } from 'lucide-react';
+import { Children } from '@/types/react';
+import { inputGroup } from '@/app/components/ui';
 
 type Props = {
+	preview?: (search: string) => Children['children'];
 	placeholder: string;
 	getSearch: () => string | undefined;
 	updateSearch: (searchTerm: string | undefined) => void;
 };
-
-const Searchbar = ({ placeholder, getSearch, updateSearch }: Props) => {
+const Searchbar = ({
+	preview,
+	placeholder,
+	getSearch,
+	updateSearch,
+}: Props) => {
 	const [search, setSearch] = useState(getSearch());
 
 	return (
-		<div className='flex items-center gap-x-3'>
-			{search && (
-				<X
-					onClick={() => {
-						setSearch(undefined);
-						updateSearch(undefined);
-					}}
-					className='cursor-pointer'
-				/>
-			)}
-			<Input
+		<inputGroup.Root className='relative flex items-center border-2 border-border rounded-xl min-h-11 md:min-h-14 ps-4'>
+			<inputGroup.Input
 				id='searchbar'
 				type='search'
 				placeholder={placeholder}
 				value={search}
 				onChange={({ target }) => setSearch(target.value)}
-				onBlur={() => updateSearch(search)}
 				onKeyDown={({ key }) => key === 'Enter' && updateSearch(search)}
-				className='bg-secondary border-2 rounded-xl min-h-11 md:min-h-14 min-w-50 sm:min-w-60 md:min-w-75 lg:min-w-100 xl:min-w-120 md:px-6 text-ellipsis text-xs md:text-lg'
+				className='min-w-50 sm:min-w-60 md:min-w-75 lg:min-w-100 xl:min-w-120 text-ellipsis text-xs md:text-lg'
 				autoComplete='off'
 			/>
-			<Search
-				onClick={() => updateSearch(search)}
-				className='cursor-pointer'
-			/>
-		</div>
+			{preview && search && search !== getSearch() && (
+				<div className='left-0 top-12 md:top-15 z-10 absolute w-full'>
+					{preview(search)}
+				</div>
+			)}
+			<inputGroup.Addon className='p-0'>
+				<Search
+					onClick={() => updateSearch(search)}
+					className='cursor-pointer size-4 lg:size-5'
+				/>
+			</inputGroup.Addon>
+		</inputGroup.Root>
 	);
 };
 
diff --git a/src/app/components/ui/empty.tsx b/src/app/components/ui/empty.tsx
index 13db78e..a595155 100644
--- a/src/app/components/ui/empty.tsx
+++ b/src/app/components/ui/empty.tsx
@@ -6,7 +6,7 @@ const Empty = ({ className, ...props }: React.ComponentProps<'div'>) => {
 		<div
 			data-slot='empty'
 			className={cn(
-				'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12',
+				'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-12 text-center text-balance',
 				className,
 			)}
 			{...props}
diff --git a/src/app/components/ui/index.ts b/src/app/components/ui/index.ts
index 0d01bcd..4b7fb02 100644
--- a/src/app/components/ui/index.ts
+++ b/src/app/components/ui/index.ts
@@ -11,6 +11,8 @@ export * as dialog from './dialog';
 export * as dropdownMenu from './dropdown-menu';
 export * as empty from './empty';
 export { Input } from './input';
+export * as inputGroup from './input-group';
+export * as item from './item';
 export { Label } from './label';
 export * as navMenu from './navmenu';
 export * as pagination from './pagination';
@@ -27,4 +29,5 @@ export { Slider } from './slider';
 export { Spinner } from './spinner';
 export { Switch } from './switch';
 export * as tabs from './tabs';
+export { Textarea } from './textarea';
 export * as tooltip from './tooltip';
diff --git a/src/app/components/ui/input-group.tsx b/src/app/components/ui/input-group.tsx
new file mode 100644
index 0000000..c38fa97
--- /dev/null
+++ b/src/app/components/ui/input-group.tsx
@@ -0,0 +1,158 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils/index';
+import { Button } from '@/app/components/ui/button';
+import { Input } from '@/app/components/ui/input';
+import { Textarea } from '@/app/components/ui/textarea';
+
+const InputGroup = ({ className, ...props }: React.ComponentProps<'div'>) => (
+	<div
+		data-slot='input-group'
+		role='group'
+		className={cn(
+			'group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30',
+			'h-9 min-w-0 has-[>textarea]:h-auto',
+
+			// Variants based on alignment.
+			'has-[>[data-align=inline-start]]:[&>input]:pl-2',
+			'has-[>[data-align=inline-end]]:[&>input]:pr-2',
+			'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
+			'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
+
+			// Focus state.
+			'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50',
+
+			// Error state.
+			'has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+
+			className,
+		)}
+		{...props}
+	/>
+);
+
+const inputGroupAddonVariants = cva(
+	"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+	{
+		variants: {
+			align: {
+				'inline-start':
+					'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
+				'inline-end':
+					'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
+				'block-start':
+					'order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3',
+				'block-end':
+					'order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3',
+			},
+		},
+		defaultVariants: {
+			align: 'inline-start',
+		},
+	},
+);
+
+const InputGroupAddon = ({
+	className,
+	align = 'inline-start',
+	...props
+}: React.ComponentProps<'div'> &
+	VariantProps<typeof inputGroupAddonVariants>) => (
+	<div
+		role='group'
+		data-slot='input-group-addon'
+		data-align={align}
+		className={cn(inputGroupAddonVariants({ align }), className)}
+		onClick={(e) => {
+			if ((e.target as HTMLElement).closest('button')) {
+				return;
+			}
+			e.currentTarget.parentElement?.querySelector('input')?.focus();
+		}}
+		{...props}
+	/>
+);
+
+const inputGroupButtonVariants = cva(
+	'flex items-center gap-2 text-sm shadow-none',
+	{
+		variants: {
+			size: {
+				xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+				sm: 'h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5',
+				'icon-xs':
+					'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+				'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+			},
+		},
+		defaultVariants: {
+			size: 'xs',
+		},
+	},
+);
+
+const InputGroupButton = ({
+	className,
+	type = 'button',
+	variant = 'ghost',
+	size = 'xs',
+	...props
+}: Omit<React.ComponentProps<typeof Button>, 'size'> &
+	VariantProps<typeof inputGroupButtonVariants>) => (
+	<Button
+		type={type}
+		data-size={size}
+		variant={variant}
+		className={cn(inputGroupButtonVariants({ size }), className)}
+		{...props}
+	/>
+);
+
+const InputGroupText = ({
+	className,
+	...props
+}: React.ComponentProps<'span'>) => (
+	<span
+		className={cn(
+			"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+			className,
+		)}
+		{...props}
+	/>
+);
+
+const InputGroupInput = ({
+	className,
+	...props
+}: React.ComponentProps<'input'>) => (
+	<Input
+		data-slot='input-group-control'
+		className={cn(
+			'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
+			className,
+		)}
+		{...props}
+	/>
+);
+
+const InputGroupTextarea = ({
+	className,
+	...props
+}: React.ComponentProps<'textarea'>) => (
+	<Textarea
+		data-slot='input-group-control'
+		className={cn(
+			'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
+			className,
+		)}
+		{...props}
+	/>
+);
+
+export {
+	InputGroup as Root,
+	InputGroupAddon as Addon,
+	InputGroupButton as Button,
+	InputGroupText as Text,
+	InputGroupInput as Input,
+	InputGroupTextarea as Textarea,
+};
diff --git a/src/app/components/ui/item.tsx b/src/app/components/ui/item.tsx
new file mode 100644
index 0000000..c3962df
--- /dev/null
+++ b/src/app/components/ui/item.tsx
@@ -0,0 +1,193 @@
+import { Slot } from 'radix-ui';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import { Separator } from '@/app/components/ui/separator';
+
+const ItemGroup = ({ className, ...props }: React.ComponentProps<'div'>) => {
+	return (
+		<div
+			role='list'
+			data-slot='item-group'
+			className={cn('group/item-group flex flex-col', className)}
+			{...props}
+		/>
+	);
+};
+
+const ItemSeparator = ({
+	className,
+	...props
+}: React.ComponentProps<typeof Separator>) => {
+	return (
+		<Separator
+			data-slot='item-separator'
+			orientation='horizontal'
+			className={cn('my-0', className)}
+			{...props}
+		/>
+	);
+};
+
+const itemVariants = cva(
+	'group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50',
+	{
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				outline: 'border-border',
+				muted: 'bg-muted/50',
+			},
+			size: {
+				default: 'gap-4 p-4',
+				sm: 'gap-2.5 px-4 py-3',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
+);
+
+const Item = ({
+	className,
+	variant = 'default',
+	size = 'default',
+	asChild = false,
+	...props
+}: React.ComponentProps<'div'> &
+	VariantProps<typeof itemVariants> & { asChild?: boolean }) => {
+	const Comp = asChild ? Slot.Root : 'div';
+	return (
+		<Comp
+			data-slot='item'
+			data-variant={variant}
+			data-size={size}
+			className={cn(itemVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
+};
+
+const itemMediaVariants = cva(
+	'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none',
+	{
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				icon: "size-8 rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4",
+				image: 'size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+const ItemMedia = ({
+	className,
+	variant = 'default',
+	...props
+}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) => {
+	return (
+		<div
+			data-slot='item-media'
+			data-variant={variant}
+			className={cn(itemMediaVariants({ variant, className }))}
+			{...props}
+		/>
+	);
+};
+
+const ItemContent = ({ className, ...props }: React.ComponentProps<'div'>) => {
+	return (
+		<div
+			data-slot='item-content'
+			className={cn(
+				'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none',
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
+
+const ItemTitle = ({ className, ...props }: React.ComponentProps<'div'>) => {
+	return (
+		<div
+			data-slot='item-title'
+			className={cn(
+				'flex w-fit items-center gap-2 text-sm leading-snug font-medium',
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
+
+const ItemDescription = ({
+	className,
+	...props
+}: React.ComponentProps<'p'>) => {
+	return (
+		<p
+			data-slot='item-description'
+			className={cn(
+				'line-clamp-2 text-sm leading-normal font-normal text-balance text-muted-foreground',
+				'[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
+
+const ItemActions = ({ className, ...props }: React.ComponentProps<'div'>) => {
+	return (
+		<div
+			data-slot='item-actions'
+			className={cn('flex items-center gap-2', className)}
+			{...props}
+		/>
+	);
+};
+
+const ItemHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {
+	return (
+		<div
+			data-slot='item-header'
+			className={cn(
+				'flex basis-full items-center justify-between gap-2',
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
+
+const ItemFooter = ({ className, ...props }: React.ComponentProps<'div'>) => {
+	return (
+		<div
+			data-slot='item-footer'
+			className={cn(
+				'flex basis-full items-center justify-between gap-2',
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
+
+export {
+	Item as Root,
+	ItemMedia as Media,
+	ItemContent as Content,
+	ItemActions as Actions,
+	ItemGroup as Group,
+	ItemSeparator as Separator,
+	ItemTitle as Title,
+	ItemDescription as Description,
+	ItemHeader as Header,
+	ItemFooter as Footer,
+};
diff --git a/src/app/components/ui/textarea.tsx b/src/app/components/ui/textarea.tsx
new file mode 100644
index 0000000..a3a851d
--- /dev/null
+++ b/src/app/components/ui/textarea.tsx
@@ -0,0 +1,17 @@
+import { cn } from '@/lib/utils/index';
+
+const Textarea = ({
+	className,
+	...props
+}: React.ComponentProps<'textarea'>) => (
+	<textarea
+		data-slot='textarea'
+		className={cn(
+			'flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40',
+			className,
+		)}
+		{...props}
+	/>
+);
+
+export { Textarea };
diff --git a/src/app/pages/public/gallery/bars.tsx b/src/app/pages/public/gallery/bars.tsx
index c3691f7..d573f48 100644
--- a/src/app/pages/public/gallery/bars.tsx
+++ b/src/app/pages/public/gallery/bars.tsx
@@ -5,6 +5,7 @@ import Categories from '@/app/components/search/categories';
 import Searchbar from '@/app/components/search/searchbar';
 import Sortings from '@/app/components/search/sortings';
 import Tags from './tags';
+import Preview from './preview';
 
 const Route = getRouteApi('/_public/gallery/');
 
@@ -36,6 +37,7 @@ const Bars = () => {
 			</section>
 			<section className='order-3 md:col-span-2 col-span-4 md:order-2'>
 				<Searchbar
+					preview={(search) => <Preview name={search} />}
 					placeholder={tPlaceholders('search-products')}
 					getSearch={() => search.name}
 					updateSearch={(name) => {
diff --git a/src/app/pages/public/gallery/empty.tsx b/src/app/pages/public/gallery/empty.tsx
index 2e9d649..efd7e30 100644
--- a/src/app/pages/public/gallery/empty.tsx
+++ b/src/app/pages/public/gallery/empty.tsx
@@ -3,24 +3,42 @@ import { useEmptyTranslations } from '@/app/hooks/locales/translations/common';
 import { Button, empty } from '@/app/components/ui';
 import { Link } from '@tanstack/react-router';
 
-const Empty = () => {
+type Props = {
+	media?: boolean;
+	title?: boolean;
+	description?: boolean;
+	link?: boolean;
+};
+const Empty = ({ media, title, description, link }: Props) => {
 	const tEmpty = useEmptyTranslations('gallery');
 
 	return (
 		<empty.Root>
 			<empty.Header>
-				<empty.Media variant='icon'>
-					<GalleryVertical />
-				</empty.Media>
+				{media && (
+					<empty.Media variant='icon'>
+						<GalleryVertical />
+					</empty.Media>
+				)}
 
-				<empty.Title>{tEmpty('title')}</empty.Title>
-				<empty.Description>{tEmpty('description')}</empty.Description>
+				{title && (
+					<empty.Title className='text-base md:text-lg'>
+						{tEmpty('title')}
+					</empty.Title>
+				)}
+				{description && (
+					<empty.Description>
+						{tEmpty('description')}
+					</empty.Description>
+				)}
 			</empty.Header>
 
 			<empty.Content>
-				<Button>
-					<Link to='/register'>{tEmpty('link')}</Link>
-				</Button>
+				{link && (
+					<Button>
+						<Link to='/register'>{tEmpty('link')}</Link>
+					</Button>
+				)}
 			</empty.Content>
 		</empty.Root>
 	);
diff --git a/src/app/pages/public/gallery/item.tsx b/src/app/pages/public/gallery/item.tsx
index 9694b5b..e1e7147 100644
--- a/src/app/pages/public/gallery/item.tsx
+++ b/src/app/pages/public/gallery/item.tsx
@@ -19,6 +19,7 @@ const Item = ({ product, className }: Props) => {
 		<Link
 			to='/gallery/$id'
 			params={{ id: product.id }}
+			preloadDelay={250}
 			className={cn(
 				'max-h-50 md:max-h-75 bg-secondary text-secondary-foreground border-gray border-2 rounded-md shadow-primary shadow-md',
 				'flex flex-col justify-between gap-y-4 p-4',
diff --git a/src/app/pages/public/gallery/list.tsx b/src/app/pages/public/gallery/list.tsx
index 8aad5c8..8cb95be 100644
--- a/src/app/pages/public/gallery/list.tsx
+++ b/src/app/pages/public/gallery/list.tsx
@@ -5,7 +5,7 @@ import Empty from './empty';
 
 type Props = { products: ApiResult<GalleryAllProductsResponse> };
 const List = ({ products }: Props) => {
-	if (!products.count) return <Empty />;
+	if (!products.count) return <Empty media title description link />;
 
 	return (
 		<ul
diff --git a/src/app/pages/public/gallery/preview/index.tsx b/src/app/pages/public/gallery/preview/index.tsx
new file mode 100644
index 0000000..ef5edd6
--- /dev/null
+++ b/src/app/pages/public/gallery/preview/index.tsx
@@ -0,0 +1,29 @@
+import { useQuery } from '@customcads/react-sdk';
+import { useThrottle } from '@/hooks/utils/useThrottle';
+import { useMinimumLoadingTime } from '@/hooks/utils/useMinimumLoadingTime';
+import Empty from '../empty';
+import Skeleton from './skeleton';
+import Item from './item';
+
+type Props = { name: string };
+const Preview = ({ name }: Props) => {
+	const throttled = useThrottle(name, 500);
+	const { data: products, isLoading } = useQuery(({ products }) =>
+		products.gallery.all({ page: 1, limit: 4, name: throttled }),
+	);
+
+	const loading = useMinimumLoadingTime(isLoading, 400);
+	if (!products || loading) return <Skeleton />;
+
+	return (
+		<section className='sm:min-h-50 md:min-h-75 lg:min-h-100 bg-secondary rounded-xl flex flex-col justify-start'>
+			{products.count ? (
+				products.items.map((x) => <Item key={x.id} product={x} />)
+			) : (
+				<Empty title />
+			)}
+		</section>
+	);
+};
+
+export default Preview;
diff --git a/src/app/pages/public/gallery/preview/item.tsx b/src/app/pages/public/gallery/preview/item.tsx
new file mode 100644
index 0000000..21c7eeb
--- /dev/null
+++ b/src/app/pages/public/gallery/preview/item.tsx
@@ -0,0 +1,30 @@
+import { Link } from '@tanstack/react-router';
+import { GalleryAllProductsResponse, useQuery } from '@customcads/react-sdk';
+import { item } from '@/app/components/ui';
+
+type Props = { product: GalleryAllProductsResponse };
+const Item = ({ product }: Props) => {
+	const { data: image } = useQuery(({ images }) =>
+		images.download({ id: product.imageId, relationType: 'Product' }),
+	);
+
+	return (
+		<Link to='/gallery/$id' params={{ id: product.id }} preloadDelay={500}>
+			<item.Root className='hover:bg-card/75 transition-all duration-300'>
+				<item.Media>
+					<img
+						src={image?.presignedUrl}
+						className='w-16 md:w-24 lg:w-32 aspect-square rounded-2xl'
+					/>
+				</item.Media>
+				<item.Content>
+					<item.Title className='text-sm sm:text-base md:text-lg'>
+						{product.name}
+					</item.Title>
+				</item.Content>
+			</item.Root>
+		</Link>
+	);
+};
+
+export default Item;
diff --git a/src/app/pages/public/gallery/preview/skeleton.tsx b/src/app/pages/public/gallery/preview/skeleton.tsx
new file mode 100644
index 0000000..f572ac9
--- /dev/null
+++ b/src/app/pages/public/gallery/preview/skeleton.tsx
@@ -0,0 +1,30 @@
+import { Skeleton as SkeletonUI } from '@/app/components/ui';
+
+const Item = ({ delay = 0 }: { delay?: number }) => (
+	<div className='flex justify-around items-center gap-x-4'>
+		<SkeletonUI
+			className='bg-secondary basis-3/16 aspect-square'
+			style={{ animationDelay: `${delay}ms` }}
+		/>
+		<SkeletonUI
+			className='bg-secondary grow h-12'
+			style={{ animationDelay: `${delay + 50}ms` }}
+		/>
+	</div>
+);
+
+const List = ({ delays }: { delays: number[] }) => (
+	<div className='w-full grid grid-cols-1 gap-y-8'>
+		{delays.map((x, i) => (
+			<Item key={i} delay={x} />
+		))}
+	</div>
+);
+
+const Skeleton = () => (
+	<div className='bg-card rounded-xl flex flex-col justify-center items-center gap-y-20 py-10 px-10'>
+		<List delays={[...Array(4)].map((_, i) => (i + 1) * 200)} />
+	</div>
+);
+
+export default Skeleton;
diff --git a/src/app/pages/public/home/section-3/popular.tsx b/src/app/pages/public/home/section-3/popular.tsx
index eff6ff3..ad3c052 100644
--- a/src/app/pages/public/home/section-3/popular.tsx
+++ b/src/app/pages/public/home/section-3/popular.tsx
@@ -21,7 +21,7 @@ const PopularProducts = () => {
 
 	return (
 		<carousel.Root opts={{ loop: true, dragFree: true, slidesToScroll: 1 }}>
-			<carousel.Content className='px-6 py-10 max-w-70 sm:max-w-140 lg:max-w-220 xl:max-w-280'>
+			<carousel.Content className='px-6 py-10 max-w-70 sm:max-w-140 lg:max-w-220 xl:max-w-280 select-none'>
 				<Products limit={LIMIT.default} tag={tag}>
 					{(x) => (
 						<carousel.Item
diff --git a/src/hooks/utils/useMinimumLoadingTime.ts b/src/hooks/utils/useMinimumLoadingTime.ts
new file mode 100644
index 0000000..693d22b
--- /dev/null
+++ b/src/hooks/utils/useMinimumLoadingTime.ts
@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+export const useMinimumLoadingTime = (
+	isLoading: boolean,
+	minDelay: number = 500,
+) => {
+	const [shouldShowLoading, setShouldShowLoading] = useState(true);
+
+	useEffect(() => {
+		if (!isLoading) {
+			const timer = setTimeout(() => {
+				setShouldShowLoading(false);
+			}, minDelay);
+			return () => clearTimeout(timer);
+		}
+
+		setShouldShowLoading(true);
+	}, [isLoading, minDelay]);
+
+	return isLoading || shouldShowLoading;
+};
diff --git a/src/index.css b/src/index.css
index b8d2335..2140573 100644
--- a/src/index.css
+++ b/src/index.css
@@ -28,7 +28,7 @@ code {
     --popover-foreground: oklch(0.141 0.005 285.823);
     --primary: oklch(0.21 0.006 285.885);
     --primary-foreground: oklch(0.985 0 0);
-    --secondary: oklch(74.854% 0.00433 286.008 / 0.721);
+    --secondary: oklch(74.854% 0.00433 286.008 / 0.95);
     --secondary-foreground: oklch(0.21 0.006 285.885);
     --muted: oklch(0.967 0.001 286.375);
     --muted-foreground: oklch(0.552 0.016 285.938);
@@ -87,7 +87,7 @@ code {
     --popover-foreground: oklch(0.985 0 0);
     --primary: oklch(0.985 0 0);
     --primary-foreground: oklch(0.21 0.006 285.885);
-    --secondary: oklch(0.274 0.006 286.033);
+    --secondary: oklch(0.274 0.006 286.033 / 0.95);
     --secondary-foreground: oklch(0.985 0 0);
     --muted: oklch(0.274 0.006 286.033);
     --muted-foreground: oklch(0.705 0.015 286.067);
diff --git a/src/routes/_public/gallery/$id.tsx b/src/routes/_public/gallery/$id.tsx
index 3e171ef..85be941 100644
--- a/src/routes/_public/gallery/$id.tsx
+++ b/src/routes/_public/gallery/$id.tsx
@@ -5,7 +5,10 @@ import { createFileRoute } from '@tanstack/react-router';
 export const Route = createFileRoute('/_public/gallery/$id')({
 	loader: async ({ params, context: { queryClient } }) => {
 		const { data: product } = await query.fetchQuery(
-			({ products }) => products.gallery.single({ id: params.id }),
+			({ products }) => ({
+				...products.gallery.single({ id: params.id }),
+				staleTime: 10_000,
+			}),
 			queryClient,
 		);
 

From 4065e7c9943a7df596214e9f63813ea95ad8d692 Mon Sep 17 00:00:00 2001
From: Ivan Angelov <ivanangelov414@gmail.com>
Date: Mon, 3 Aug 2026 01:27:56 +0300
Subject: [PATCH 13/17] Automized refetching expired URLs for images

---
 src/app/components/image.tsx                  | 24 ++++++
 src/app/pages/public/cart/item/header.tsx     | 24 +++---
 src/app/pages/public/gallery/item.tsx         | 75 ++++++++-----------
 src/app/pages/public/gallery/preview/item.tsx | 43 +++++------
 4 files changed, 87 insertions(+), 79 deletions(-)
 create mode 100644 src/app/components/image.tsx

diff --git a/src/app/components/image.tsx b/src/app/components/image.tsx
new file mode 100644
index 0000000..9a92f42
--- /dev/null
+++ b/src/app/components/image.tsx
@@ -0,0 +1,24 @@
+import { DownloadRequest, useQuery } from '@customcads/react-sdk';
+
+type Props = {
+	request: DownloadRequest;
+	enabled?: boolean;
+} & React.ComponentProps<'img'>;
+const PresignedImage = ({ request, enabled, ...props }: Props) => {
+	const { data: image, refetch } = useQuery(({ images }) => {
+		const { queryKey, queryFn } = images.download(request);
+		return {
+			queryKey,
+			queryFn,
+			enabled,
+			staleTime: 1000 * 20,
+			gcTime: 1000 * 60,
+		};
+	});
+
+	return (
+		<img src={image?.presignedUrl} onError={() => refetch()} {...props} />
+	);
+};
+
+export default PresignedImage;
diff --git a/src/app/pages/public/cart/item/header.tsx b/src/app/pages/public/cart/item/header.tsx
index 846563f..d4433d0 100644
--- a/src/app/pages/public/cart/item/header.tsx
+++ b/src/app/pages/public/cart/item/header.tsx
@@ -1,17 +1,15 @@
-import { GallerySingleProductResponse, useQuery } from '@customcads/react-sdk';
+import { GallerySingleProductResponse } from '@customcads/react-sdk';
+import PresignedImage from '@/app/components/image';
 
 type Props = { product: GallerySingleProductResponse };
-const Header = ({ product }: Props) => {
-	const { data: image } = useQuery(({ images }) =>
-		images.download({ id: product.imageId, relationType: 'Product' }),
-	);
-
-	return (
-		<section className='flex flex-col items-start gap-x-3 gap-y-2'>
-			<h4 className='text-xl font-semibold'>{product.name}</h4>
-			<img src={image?.presignedUrl} className='w-30 h-30 rounded-xl' />
-		</section>
-	);
-};
+const Header = ({ product }: Props) => (
+	<section className='flex flex-col items-start gap-x-3 gap-y-2'>
+		<h4 className='text-xl font-semibold'>{product.name}</h4>
+		<PresignedImage
+			request={{ id: product.imageId, relationType: 'Product' }}
+			className='w-30 h-30 rounded-xl'
+		/>
+	</section>
+);
 
 export default Header;
diff --git a/src/app/pages/public/gallery/item.tsx b/src/app/pages/public/gallery/item.tsx
index e1e7147..91fbe3e 100644
--- a/src/app/pages/public/gallery/item.tsx
+++ b/src/app/pages/public/gallery/item.tsx
@@ -1,51 +1,42 @@
 import { Link } from '@tanstack/react-router';
-import {
-	useQuery,
-	type GalleryAllProductsResponse,
-} from '@customcads/react-sdk';
+import { type GalleryAllProductsResponse } from '@customcads/react-sdk';
 import { Banknote, Eye } from 'lucide-react';
 import { ClassName } from '@/types/react';
 import { cn } from '@/lib/utils';
+import PresignedImage from '@/app/components/image';
 
 type Props = ClassName & { product: GalleryAllProductsResponse };
-const Item = ({ product, className }: Props) => {
-	const { data: image } = useQuery(
-		({ images }) =>
-			images.download({ id: product.imageId, relationType: 'Product' }),
-		!!product,
-	);
-
-	return (
-		<Link
-			to='/gallery/$id'
-			params={{ id: product.id }}
-			preloadDelay={250}
-			className={cn(
-				'max-h-50 md:max-h-75 bg-secondary text-secondary-foreground border-gray border-2 rounded-md shadow-primary shadow-md',
-				'flex flex-col justify-between gap-y-4 p-4',
-				'hover:brightness-80 hover:scale-105 hover:shadow-xl transition-normal duration-300',
-				className,
-			)}
-		>
-			<img
-				src={image?.presignedUrl}
-				className='basis-full max-h-30 md:max-h-52 object-cover rounded-sm'
-			/>
-			<div className='flex justify-around items-center gap-x-10'>
-				<div className='flex gap-x-2'>
-					<Eye />
-					{product.counts.views}
-				</div>
-				<span className='text-sm sm:text-md md:text-lg truncate font-bold'>
-					{product.name}
-				</span>
-				<div className='flex gap-x-2'>
-					<Banknote />
-					{product.counts.purchases}
-				</div>
+const Item = ({ product, className }: Props) => (
+	<Link
+		to='/gallery/$id'
+		params={{ id: product.id }}
+		preloadDelay={250}
+		className={cn(
+			'max-h-50 md:max-h-75 bg-secondary text-secondary-foreground border-gray border-2 rounded-md shadow-primary shadow-md',
+			'flex flex-col justify-between gap-y-4 p-4',
+			'hover:brightness-80 hover:scale-105 hover:shadow-xl transition-normal duration-300',
+			className,
+		)}
+	>
+		<PresignedImage
+			request={{ id: product.imageId, relationType: 'Product' }}
+			enabled={!!product}
+			className='basis-full max-h-30 md:max-h-52 object-cover rounded-sm'
+		/>
+		<div className='flex justify-around items-center gap-x-10'>
+			<div className='flex gap-x-2'>
+				<Eye />
+				{product.counts.views}
+			</div>
+			<span className='text-sm sm:text-md md:text-lg truncate font-bold'>
+				{product.name}
+			</span>
+			<div className='flex gap-x-2'>
+				<Banknote />
+				{product.counts.purchases}
 			</div>
-		</Link>
-	);
-};
+		</div>
+	</Link>
+);
 
 export default Item;
diff --git a/src/app/pages/public/gallery/preview/item.tsx b/src/app/pages/public/gallery/preview/item.tsx
index 21c7eeb..c4b1afe 100644
--- a/src/app/pages/public/gallery/preview/item.tsx
+++ b/src/app/pages/public/gallery/preview/item.tsx
@@ -1,30 +1,25 @@
 import { Link } from '@tanstack/react-router';
-import { GalleryAllProductsResponse, useQuery } from '@customcads/react-sdk';
+import { GalleryAllProductsResponse } from '@customcads/react-sdk';
 import { item } from '@/app/components/ui';
+import PresignedImage from '@/app/components/image';
 
 type Props = { product: GalleryAllProductsResponse };
-const Item = ({ product }: Props) => {
-	const { data: image } = useQuery(({ images }) =>
-		images.download({ id: product.imageId, relationType: 'Product' }),
-	);
-
-	return (
-		<Link to='/gallery/$id' params={{ id: product.id }} preloadDelay={500}>
-			<item.Root className='hover:bg-card/75 transition-all duration-300'>
-				<item.Media>
-					<img
-						src={image?.presignedUrl}
-						className='w-16 md:w-24 lg:w-32 aspect-square rounded-2xl'
-					/>
-				</item.Media>
-				<item.Content>
-					<item.Title className='text-sm sm:text-base md:text-lg'>
-						{product.name}
-					</item.Title>
-				</item.Content>
-			</item.Root>
-		</Link>
-	);
-};
+const Item = ({ product }: Props) => (
+	<Link to='/gallery/$id' params={{ id: product.id }} preloadDelay={500}>
+		<item.Root className='hover:bg-card/75 transition-all duration-300'>
+			<item.Media>
+				<PresignedImage
+					request={{ id: product.imageId, relationType: 'Product' }}
+					className='w-16 md:w-24 lg:w-32 aspect-square rounded-2xl'
+				/>
+			</item.Media>
+			<item.Content>
+				<item.Title className='text-sm sm:text-base md:text-lg'>
+					{product.name}
+				</item.Title>
+			</item.Content>
+		</item.Root>
+	</Link>
+);
 
 export default Item;

From 65aee3ba9398d27e305cb6258a96e17caf6de4f7 Mon Sep 17 00:00:00 2001
From: Ivan Angelov <ivanangelov414@gmail.com>
Date: Mon, 3 Aug 2026 02:22:59 +0300
Subject: [PATCH 14/17] Prevented user from selecting certain elements

---
 src/app/components/search/categories/index.tsx  | 2 +-
 src/app/components/search/pagination/limits.tsx | 2 +-
 src/app/components/search/sortings/index.tsx    | 2 +-
 src/app/components/ui/button.tsx                | 8 ++++----
 src/app/pages/public/cart/item/buttons.tsx      | 2 +-
 src/app/pages/public/cart/item/header.tsx       | 2 +-
 src/app/pages/public/gallery/item.tsx           | 6 +++---
 src/app/pages/public/gallery/preview/item.tsx   | 2 +-
 src/app/pages/public/gallery/tags/variants.tsx  | 2 +-
 src/app/pages/public/home/section-1/button.tsx  | 2 +-
 src/app/pages/public/home/section-2/service.tsx | 2 +-
 11 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/app/components/search/categories/index.tsx b/src/app/components/search/categories/index.tsx
index dcd2b95..c628e95 100644
--- a/src/app/components/search/categories/index.tsx
+++ b/src/app/components/search/categories/index.tsx
@@ -46,7 +46,7 @@ const Categories = ({ getCategory, updateCategory }: Props) => {
 				}))}
 				onSelect={handleSelect}
 			>
-				<span className='flex justify-between items-center gap-x-2 px-8 py-3 bg-secondary text-popover-foreground text-xs md:text-lg border-2 border-border rounded-2xl cursor-pointer hover:brightness-80 transition duration-200'>
+				<span className='flex justify-between items-center gap-x-2 px-8 py-3 bg-secondary text-popover-foreground text-xs md:text-lg border-2 border-border rounded-2xl cursor-pointer select-none hover:brightness-80 transition duration-200'>
 					{category}
 				</span>
 			</CategoriesCombobox>
diff --git a/src/app/components/search/pagination/limits.tsx b/src/app/components/search/pagination/limits.tsx
index 30e8818..0ce7b08 100644
--- a/src/app/components/search/pagination/limits.tsx
+++ b/src/app/components/search/pagination/limits.tsx
@@ -30,7 +30,7 @@ const Limits = ({ min, max, limit, onChange }: Props) => {
 	return (
 		<pagination.Item className='flex gap-x-4'>
 			<select.Root onValueChange={(val) => onChange(Number(val))}>
-				<select.Trigger className='cursor-pointer text-secondary-foreground text-sm md:text-lg py-1 ps-4 pe-2 rounded-lg'>
+				<select.Trigger className='cursor-pointer text-secondary-foreground text-sm md:text-lg py-1 ps-4 pe-2 rounded-lg select-none'>
 					<span className='text-xs'>{limit}</span>
 				</select.Trigger>
 				<select.Content className='max-h-100'>
diff --git a/src/app/components/search/sortings/index.tsx b/src/app/components/search/sortings/index.tsx
index d127bdf..55e11d7 100644
--- a/src/app/components/search/sortings/index.tsx
+++ b/src/app/components/search/sortings/index.tsx
@@ -61,7 +61,7 @@ const Sortings = ({ getSorting, updateSorting, sortings }: Props) => {
 				options={sortings.map((x) => ({ value: x, label: format(x) }))}
 				onSelect={handleSelect}
 			>
-				<span className='flex justify-between items-center gap-x-2 px-8 py-3 bg-secondary text-popover-foreground text-xs md:text-lg border-2 border-border rounded-2xl cursor-pointer hover:brightness-80 transition duration-200'>
+				<span className='flex justify-between items-center gap-x-2 px-8 py-3 bg-secondary text-popover-foreground text-xs md:text-lg border-2 border-border rounded-2xl cursor-pointer select-none hover:brightness-80 transition duration-200'>
 					{format(sorting)}
 				</span>
 			</SortingsCombobox>
diff --git a/src/app/components/ui/button.tsx b/src/app/components/ui/button.tsx
index 3c00c11..1fc3917 100644
--- a/src/app/components/ui/button.tsx
+++ b/src/app/components/ui/button.tsx
@@ -8,13 +8,13 @@ const buttonVariants = cva(
 		variants: {
 			variant: {
 				default:
-					'bg-primary text-primary-foreground hover:bg-primary/90',
+					'bg-primary text-primary-foreground hover:bg-primary/90 select-none',
 				destructive:
-					'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+					'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 select-none',
 				outline:
-					'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-border dark:hover:bg-input/50',
+					'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-border dark:hover:bg-input/50 select-none',
 				secondary:
-					'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+					'bg-secondary text-secondary-foreground hover:bg-secondary/80 select-none',
 				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
 				link: 'text-primary underline-offset-4 hover:underline',
 			},
diff --git a/src/app/pages/public/cart/item/buttons.tsx b/src/app/pages/public/cart/item/buttons.tsx
index f743481..879bd1b 100644
--- a/src/app/pages/public/cart/item/buttons.tsx
+++ b/src/app/pages/public/cart/item/buttons.tsx
@@ -43,7 +43,7 @@ const Buttons = ({
 		) : (
 			<button className='bg-secondary/60 text-secondary-foreground rounded-md py-2 px-2 md:px-4'>
 				<div className='max-w-20 flex items-center gap-x-2'>
-					<span className='text-xs text-wrap opacity-60 font-bold'>
+					<span className='text-xs text-wrap opacity-60 font-bold select-none'>
 						{tCart('undeliverable')}
 					</span>
 				</div>
diff --git a/src/app/pages/public/cart/item/header.tsx b/src/app/pages/public/cart/item/header.tsx
index d4433d0..262f00d 100644
--- a/src/app/pages/public/cart/item/header.tsx
+++ b/src/app/pages/public/cart/item/header.tsx
@@ -7,7 +7,7 @@ const Header = ({ product }: Props) => (
 		<h4 className='text-xl font-semibold'>{product.name}</h4>
 		<PresignedImage
 			request={{ id: product.imageId, relationType: 'Product' }}
-			className='w-30 h-30 rounded-xl'
+			className='w-30 h-30 rounded-xl select-none'
 		/>
 	</section>
 );
diff --git a/src/app/pages/public/gallery/item.tsx b/src/app/pages/public/gallery/item.tsx
index 91fbe3e..7b01762 100644
--- a/src/app/pages/public/gallery/item.tsx
+++ b/src/app/pages/public/gallery/item.tsx
@@ -21,17 +21,17 @@ const Item = ({ product, className }: Props) => (
 		<PresignedImage
 			request={{ id: product.imageId, relationType: 'Product' }}
 			enabled={!!product}
-			className='basis-full max-h-30 md:max-h-52 object-cover rounded-sm'
+			className='basis-full max-h-30 md:max-h-52 object-cover rounded-sm select-none'
 		/>
 		<div className='flex justify-around items-center gap-x-10'>
-			<div className='flex gap-x-2'>
+			<div className='flex gap-x-2 select-none'>
 				<Eye />
 				{product.counts.views}
 			</div>
 			<span className='text-sm sm:text-md md:text-lg truncate font-bold'>
 				{product.name}
 			</span>
-			<div className='flex gap-x-2'>
+			<div className='flex gap-x-2 select-none'>
 				<Banknote />
 				{product.counts.purchases}
 			</div>
diff --git a/src/app/pages/public/gallery/preview/item.tsx b/src/app/pages/public/gallery/preview/item.tsx
index c4b1afe..2b60f8e 100644
--- a/src/app/pages/public/gallery/preview/item.tsx
+++ b/src/app/pages/public/gallery/preview/item.tsx
@@ -10,7 +10,7 @@ const Item = ({ product }: Props) => (
 			<item.Media>
 				<PresignedImage
 					request={{ id: product.imageId, relationType: 'Product' }}
-					className='w-16 md:w-24 lg:w-32 aspect-square rounded-2xl'
+					className='w-16 md:w-24 lg:w-32 aspect-square rounded-2xl select-none'
 				/>
 			</item.Media>
 			<item.Content>
diff --git a/src/app/pages/public/gallery/tags/variants.tsx b/src/app/pages/public/gallery/tags/variants.tsx
index 633248c..c630d8f 100644
--- a/src/app/pages/public/gallery/tags/variants.tsx
+++ b/src/app/pages/public/gallery/tags/variants.tsx
@@ -20,7 +20,7 @@ export const selected = {
 
 export const tagVariants = cva(
 	cn(
-		'w-32 border-2 h-6',
+		'w-32 border-2 h-6 select-none',
 		'sm:px-6 sm:h-8 sm:text-sm',
 		'xl:px-8 xl:h-10 xl:text-base',
 	),
diff --git a/src/app/pages/public/home/section-1/button.tsx b/src/app/pages/public/home/section-1/button.tsx
index 9445aab..769ab38 100644
--- a/src/app/pages/public/home/section-1/button.tsx
+++ b/src/app/pages/public/home/section-1/button.tsx
@@ -6,7 +6,7 @@ const Button = ({ text, to }: Props) => (
 	<Link
 		to={to}
 		className={cn(
-			'font-bold text-foreground text-center bg-secondary px-4 md:px-12 py-3 rounded-lg', // common
+			'font-bold text-foreground text-center bg-secondary px-4 md:px-12 py-3 rounded-lg select-none', // common
 			'border-primary border shadow-primary shadow-lg', // light
 			'dark:shadow-background dark:shadow-lg', // dark
 			'hover:opacity-60 transition duraton-200', // animation
diff --git a/src/app/pages/public/home/section-2/service.tsx b/src/app/pages/public/home/section-2/service.tsx
index 674efbc..23918ea 100644
--- a/src/app/pages/public/home/section-2/service.tsx
+++ b/src/app/pages/public/home/section-2/service.tsx
@@ -12,7 +12,7 @@ const Service = ({ image, link, description }: Props) => {
 	return (
 		<Comp
 			to={link}
-			className='relative overflow-hidden cursor-pointer group'
+			className='relative overflow-hidden cursor-pointer group select-none'
 		>
 			<img src={image} className='w-80 aspect-square' />
 			<aside

From d019e9e4afda657e89e4c0a48a191f228387ca18 Mon Sep 17 00:00:00 2001
From: Ivan Angelov <ivanangelov414@gmail.com>
Date: Sat, 15 Aug 2026 06:15:04 +0300
Subject: [PATCH 15/17] Fixed duplicate hub method registrations bug

---
 src/app/hooks/hubs/useNotificationHub.ts |  6 +++---
 src/hooks/utils/useHub.ts                | 16 ++++++++--------
 src/lib/hubs/index.ts                    | 21 +++++++++++++--------
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/app/hooks/hubs/useNotificationHub.ts b/src/app/hooks/hubs/useNotificationHub.ts
index 8a13a6d..03d8bd1 100644
--- a/src/app/hooks/hubs/useNotificationHub.ts
+++ b/src/app/hooks/hubs/useNotificationHub.ts
@@ -17,10 +17,10 @@ export const useNotificationsHub = (
 
 	useHub({
 		hub: {
-			connection: hubs.connect('Notifications'),
-			methods: [{ name: methodName, onReceived: onSingleReceived }],
+			...hubs.connect('Notifications'),
+			methodsToAdd: [{ name: methodName, onReceived: onSingleReceived }],
 		},
-		condition: authn,
+		condition: !!authn && !!account,
 		deps: [account?.id],
 	});
 };
diff --git a/src/hooks/utils/useHub.ts b/src/hooks/utils/useHub.ts
index a364c3a..fd1eaf8 100644
--- a/src/hooks/utils/useHub.ts
+++ b/src/hooks/utils/useHub.ts
@@ -3,11 +3,12 @@ import { HubConnection } from '@/lib//hubs/signalr';
 
 type Props = {
 	hub: {
-		connection?: HubConnection;
-		methods: Array<{
+		connection: HubConnection;
+		methods: Array<string>;
+		methodsToAdd: {
 			name: string;
 			onReceived: (payload: never) => void | Promise<void>;
-		}>;
+		}[];
 	};
 	condition?: boolean;
 	deps?: DependencyList;
@@ -17,10 +18,9 @@ export const useHub = ({ hub, condition, deps }: Props) =>
 		// if there's a condition and it evaluates to `false`, exit
 		if (condition !== undefined && !condition) return;
 
-		if (!hub.connection) return;
-		const { connection } = hub;
-
-		for (const method of hub.methods) {
-			connection.on(method.name, method.onReceived);
+		for (const method of hub.methodsToAdd) {
+			if (hub.methods.includes(method.name)) return;
+			hub.methods.push(method.name);
+			hub.connection.on(method.name, method.onReceived);
 		}
 	}, deps);
diff --git a/src/lib/hubs/index.ts b/src/lib/hubs/index.ts
index 8ac21ef..e3e3b8b 100644
--- a/src/lib/hubs/index.ts
+++ b/src/lib/hubs/index.ts
@@ -1,11 +1,20 @@
 import * as signalr from './signalr';
 
 export type Name = 'Notifications';
-export type Hub = { name: Name; connection: signalr.HubConnection };
+export type Hub = {
+	name: Name;
+	connection: signalr.HubConnection;
+	methods: string[];
+};
+
 let hubs: Hub[] = [];
 
 const create = (name: Name) => {
-	const hub: Hub = { name, connection: signalr.buildConnection(name) };
+	const hub: Hub = {
+		name,
+		connection: signalr.buildConnection(name),
+		methods: [],
+	};
 
 	hubs.push(hub);
 	signalr.start(hub.connection);
@@ -18,9 +27,5 @@ export const remove = (hub: Hub) => {
 	signalr.stop(hub.connection);
 };
 
-export const connect = (name: Name) => {
-	const hub = hubs.find((x) => x.name === name);
-
-	if (!hub) return create(name).connection;
-	return hub.connection;
-};
+export const connect = (name: Name) =>
+	hubs.find((x) => x.name === name) ?? create(name);

From b2914b0d501a3605483fe701ba62d3e6522d8e72 Mon Sep 17 00:00:00 2001
From: Ivan Angelov <ivanangelov414@gmail.com>
Date: Sat, 15 Aug 2026 07:17:27 +0300
Subject: [PATCH 16/17] Added Notification sonnet

---
 package-lock.json                             | 17 +++++++++
 package.json                                  |  1 +
 .../layout/header/notifications/index.tsx     | 11 +++---
 src/app/components/layout/index.tsx           |  2 +
 src/app/components/ui/sonner.tsx              | 38 +++++++++++++++++++
 src/app/hooks/features/notifications/index.ts |  5 +++
 .../notifications/useLiveNotifications.ts     | 31 +++++++++++++++
 .../notifications/useNotificationRealTime.ts  | 18 ---------
 8 files changed, 100 insertions(+), 23 deletions(-)
 create mode 100644 src/app/components/ui/sonner.tsx
 create mode 100644 src/app/hooks/features/notifications/index.ts
 create mode 100644 src/app/hooks/features/notifications/useLiveNotifications.ts
 delete mode 100644 src/app/hooks/features/notifications/useNotificationRealTime.ts

diff --git a/package-lock.json b/package-lock.json
index a8b781f..0ab6948 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,7 @@
         "react": "^19.2.6",
         "react-dom": "^19.2.6",
         "react-i18next": "^17.0.8",
+        "sonner": "^2.0.8",
         "tailwind-merge": "^3.6.0",
         "three": "^0.184.0",
         "tw-animate-css": "^1.3.6",
@@ -9629,6 +9630,22 @@
         "seroval-plugins": "~1.5.0"
       }
     },
+    "node_modules/sonner": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.8.tgz",
+      "integrity": "sha512-UM/ByIoFra8yzV75n1o0Puu0bw5U/9UNnDacrJNspekBewIfsQ3D6ez1nvlWpt7aTsO6rujQtifBpycwIivqlg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/source-map": {
       "version": "0.7.6",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
diff --git a/package.json b/package.json
index a866691..6e5efdc 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "react-i18next": "^17.0.8",
+    "sonner": "^2.0.8",
     "tailwind-merge": "^3.6.0",
     "three": "^0.184.0",
     "tw-animate-css": "^1.3.6",
diff --git a/src/app/components/layout/header/notifications/index.tsx b/src/app/components/layout/header/notifications/index.tsx
index 32626bc..e544aee 100644
--- a/src/app/components/layout/header/notifications/index.tsx
+++ b/src/app/components/layout/header/notifications/index.tsx
@@ -1,13 +1,12 @@
 import { Bell } from 'lucide-react';
 import { useInfiniteQuery } from '@customcads/react-sdk';
-import { useNotificationRealTime } from '@/app/hooks/features/notifications/useNotificationRealTime';
+import { useLiveNotifications } from '@/app/hooks/features/notifications';
 import { useAuthStore } from '@/app/hooks/stores/useAuthStore';
 import { popover } from '@/app/components/ui';
 import CustomIcon from '@/app/components/icon';
 import Scroll from './scroll';
 
 const ALL_PARAMS = { page: 1, limit: 10 };
-const bell = <CustomIcon Icon={Bell} />;
 
 const NotificationsTab = () => {
 	const { is } = useAuthStore();
@@ -15,15 +14,17 @@ const NotificationsTab = () => {
 		({ notifications }) => notifications.all(ALL_PARAMS),
 		!is.guest,
 	);
-	useNotificationRealTime({ allParams: ALL_PARAMS });
+	useLiveNotifications(ALL_PARAMS);
 
 	if (is.guest) return;
-	if (!query.data) return bell;
+	if (!query.data) return <CustomIcon Icon={Bell} />;
 	const { pages } = query.data;
 
 	return (
 		<popover.Root>
-			<popover.Trigger>{bell}</popover.Trigger>
+			<popover.Trigger>
+				<CustomIcon Icon={Bell} />
+			</popover.Trigger>
 			<popover.Content className='px-2 w-auto md:w-auto' asChild>
 				<div className='relative top-4 flex flex-col items-center'>
 					<Scroll
diff --git a/src/app/components/layout/index.tsx b/src/app/components/layout/index.tsx
index 8baf5b1..07cabfb 100644
--- a/src/app/components/layout/index.tsx
+++ b/src/app/components/layout/index.tsx
@@ -4,6 +4,7 @@ import { useAuthSync } from '@/app/hooks/stores/useAuthSync';
 import { useLocaleSync } from '@/app/hooks/stores/useLocaleSync';
 import { useCartSync } from '@/app/hooks/stores/useCartSync';
 import { useRealTime } from '@/app/hooks/hubs/useRealTime';
+import { Toaster } from '../ui/sonner';
 import Header from './header';
 import Footer from './footer';
 
@@ -20,6 +21,7 @@ const Layout = ({ children }: Children) => {
 				<Header />
 				<main className='basis-full grow self-stretch flex flex-col'>
 					{children}
+					<Toaster />
 				</main>
 			</div>
 			<Footer />
diff --git a/src/app/components/ui/sonner.tsx b/src/app/components/ui/sonner.tsx
new file mode 100644
index 0000000..e4a692a
--- /dev/null
+++ b/src/app/components/ui/sonner.tsx
@@ -0,0 +1,38 @@
+import {
+	CircleCheckIcon,
+	InfoIcon,
+	Loader2Icon,
+	OctagonXIcon,
+	TriangleAlertIcon,
+} from 'lucide-react';
+import { Toaster as Sonner, type ToasterProps as Props } from 'sonner';
+import { useThemeStore } from '@/app/hooks/stores/useThemeStore';
+
+const Toaster = (props: Props) => {
+	const { theme } = useThemeStore();
+
+	return (
+		<Sonner
+			theme={theme}
+			className='toaster group'
+			icons={{
+				success: <CircleCheckIcon className='size-4' />,
+				info: <InfoIcon className='size-4' />,
+				warning: <TriangleAlertIcon className='size-4' />,
+				error: <OctagonXIcon className='size-4' />,
+				loading: <Loader2Icon className='size-4 animate-spin' />,
+			}}
+			style={
+				{
+					'--normal-bg': 'var(--popover)',
+					'--normal-text': 'var(--popover-foreground)',
+					'--normal-border': 'var(--border)',
+					'--border-radius': 'var(--radius)',
+				} as React.CSSProperties
+			}
+			{...props}
+		/>
+	);
+};
+
+export { Toaster };
diff --git a/src/app/hooks/features/notifications/index.ts b/src/app/hooks/features/notifications/index.ts
new file mode 100644
index 0000000..5c540e0
--- /dev/null
+++ b/src/app/hooks/features/notifications/index.ts
@@ -0,0 +1,5 @@
+export * from './useLiveNotifications';
+export * from './useNotificationQueryData';
+export * from './useNotificationStatus';
+export * from './useNotificationSync';
+export * from './useNotificationVirtualization';
diff --git a/src/app/hooks/features/notifications/useLiveNotifications.ts b/src/app/hooks/features/notifications/useLiveNotifications.ts
new file mode 100644
index 0000000..1b85ea2
--- /dev/null
+++ b/src/app/hooks/features/notifications/useLiveNotifications.ts
@@ -0,0 +1,31 @@
+import { toast } from 'sonner';
+import { AllNotificationsRequest, useMutation } from '@customcads/react-sdk';
+import { useNotificationsHub } from '@/app/hooks/hubs/useNotificationHub';
+import { useNotificationQueryData } from './useNotificationQueryData';
+
+export const useLiveNotifications = (allParams: AllNotificationsRequest) => {
+	const queries = useNotificationQueryData({
+		params: { all: allParams },
+	});
+	const { mutateAsync: read } = useMutation(
+		({ notifications }) => notifications.read,
+	);
+
+	const raiseToast = (id: string, description: string) => {
+		const onRead = () => {
+			read({ id });
+			queries.invalidate();
+		};
+
+		toast(description, {
+			action: { label: 'Read', onClick: onRead },
+		});
+	};
+
+	useNotificationsHub('ReceiveNew', async (notification) => {
+		await queries.all.add(notification);
+		await queries.stats.increment();
+		await queries.invalidate();
+		raiseToast(notification.id, notification.description);
+	});
+};
diff --git a/src/app/hooks/features/notifications/useNotificationRealTime.ts b/src/app/hooks/features/notifications/useNotificationRealTime.ts
deleted file mode 100644
index 7aee290..0000000
--- a/src/app/hooks/features/notifications/useNotificationRealTime.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { type AllNotificationsRequest } from '@customcads/react-sdk';
-import { useNotificationsHub } from '@/app/hooks/hubs/useNotificationHub';
-import { useNotificationQueryData } from './useNotificationQueryData';
-
-type Props = {
-	allParams: AllNotificationsRequest;
-};
-export const useNotificationRealTime = ({ allParams }: Props) => {
-	const queries = useNotificationQueryData({
-		params: { all: allParams },
-	});
-
-	useNotificationsHub('ReceiveNew', async (notification) => {
-		await queries.all.add(notification);
-		await queries.stats.increment();
-		await queries.invalidate();
-	});
-};

From c44417b39f82f981c6dca7533ea5ab81af1084b5 Mon Sep 17 00:00:00 2001
From: Ivan Angelov <ivanangelov414@gmail.com>
Date: Tue, 18 Aug 2026 05:33:25 +0300
Subject: [PATCH 17/17] Fixed build errors

---
 src/app/locales/bg-BG/common/empty/cart.ts | 7 -------
 src/app/locales/en-GB/common/empty/cart.ts | 8 --------
 2 files changed, 15 deletions(-)
 delete mode 100644 src/app/locales/bg-BG/common/empty/cart.ts
 delete mode 100644 src/app/locales/en-GB/common/empty/cart.ts

diff --git a/src/app/locales/bg-BG/common/empty/cart.ts b/src/app/locales/bg-BG/common/empty/cart.ts
deleted file mode 100644
index 8c15a8d..0000000
--- a/src/app/locales/bg-BG/common/empty/cart.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Empty } from '@/app/locales/types/common/empty';
-
-export default {
-	title: 'Няма добавени Продукти все още.',
-	description: 'Можеш да допринесеш като се регистрираш и качиш моделите си!',
-	link: 'Добави Продукти',
-} satisfies Empty['common.empty.products'];
diff --git a/src/app/locales/en-GB/common/empty/cart.ts b/src/app/locales/en-GB/common/empty/cart.ts
deleted file mode 100644
index e67996c..0000000
--- a/src/app/locales/en-GB/common/empty/cart.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Empty } from '@/app/locales/types/common/empty';
-
-export default {
-	title: 'No added Products yet.',
-	description:
-		'You can fill your Cart by exploring our Gallery and adding any Product!',
-	link: 'Add Products to Cart',
-} satisfies Empty['common.empty.products'];