@revenexx/cover 0.1.0

package/app/composables/useProduct.ts

@@ -0,0 +1,89 @@
+import { imagesApi } from "../api/images";
+import { productApi } from "../api/product";
+import { getPriceWithOptionalTax } from "../composables/useProducts";
+import type {
+	ProductDetail,
+	ProductDetailProduct,
+	ProductDetailImage,
+	ProductDetailStock,
+	ProductDetailAttribute,
+	ProductDetailCategory,
+} from "../interfaces/product-detail";
+
+export const useProductDetail = (id: MaybeRefOrGetter<string>) => {
+	const { public: { locale, currency, taxIncludedPrices } } = useRuntimeConfig();
+
+	const { data: detail, status, error, refresh } = useFetch<ProductDetail | null>(
+		() => productApi.detail(toValue(id)),
+		{
+			default: () => null,
+		},
+	);
+
+	const productInfo = computed<ProductDetailProduct | undefined>(
+		() => detail.value?.product[0],
+	);
+
+	const mainImages = computed<ProductDetailImage[]>(() =>
+		(detail.value?.images ?? [])
+			.filter(img => img.type === "main")
+			.sort((a, b) => a.priority - b.priority),
+	);
+
+	const longDescription = computed<string | undefined>(
+		() => detail.value?.descriptions.find(d => d.type === "long")?.content,
+	);
+
+	const stocks = computed<ProductDetailStock[]>(
+		() => detail.value?.stocks ?? [],
+	);
+
+	const attributes = computed<ProductDetailAttribute[]>(
+		() => detail.value?.attributes ?? [],
+	);
+
+	const prices = computed<{ [key: string]: number }[]>(
+		() => detail.value?.prices ?? [],
+	);
+
+	const taxRate = computed<number>(() => detail.value?.tax.rate ?? 0);
+
+	const productCategories = computed<ProductDetailCategory[]>(
+		() => detail.value?.categories ?? [],
+	);
+
+	const categorySlug = computed<string | undefined>(() => {
+		const slugCat = productCategories.value.find(c => c.type === "slug");
+		if (!slugCat) {
+			return undefined;
+		}
+		return slugCat.name.split("/")[0];
+	});
+
+	const subcategorySlug = computed<string | undefined>(() => {
+		const slugCat = productCategories.value.find(c => c.type === "slug");
+		if (!slugCat) {
+			return undefined;
+		}
+		return slugCat.name.split("/")[1] !== "product" ? slugCat.name.split("/")[1] : undefined;
+	});
+
+	const formatPrice = (cents: number): string => {
+		const basePrice = cents / 100;
+		const displayPrice = getPriceWithOptionalTax(basePrice, taxRate.value, taxIncludedPrices);
+
+		return displayPrice.toLocaleString(locale, { style: "currency", currency });
+	};
+
+	const getDetailImageUrl = (filename: string): string => {
+		return imagesApi.detail(filename);
+	};
+
+	return {
+		detail, status, error, refresh,
+		productInfo, mainImages, longDescription,
+		stocks, attributes, prices, taxRate,
+		productCategories, categorySlug, subcategorySlug,
+		formatPrice, getDetailImageUrl,
+	};
+};

package/app/composables/useProductCard.ts

@@ -0,0 +1,8 @@
+import type { ProductList } from "../interfaces/product-list";
+
+export function useProductCard(getProduct: () => ProductList) {
+	const url = computed(() => useProductUrl(getProduct()).value);
+	const { getImage } = useProductImage();
+
+	return { url, getImage };
+}

package/app/composables/useProductCardActions.ts

@@ -0,0 +1,106 @@
+import { getBaseUnitPrice } from "../composables/useProducts";
+import type { CartItem, CartItemPriceTier } from "../interfaces/cart-item";
+import type { ProductList } from "../interfaces/product-list";
+
+export function useProductCardActions(getProduct: () => ProductList) {
+	const cart = useCartStore();
+	const toast = useToast();
+	const { icon } = useIcons();
+	const { t } = useI18n();
+
+	const isOutOfStock = computed(() => {
+		const product = getProduct();
+		if (typeof product.isOutOfStock === "boolean") {
+			return product.isOutOfStock;
+		}
+		return (product.stocks?.[0]?.quantity ?? 0) <= 0;
+	});
+
+	/** Price on request (no price for this buyer context) — not orderable online. */
+	const hasPrice = computed(() => getBaseUnitPrice(getProduct().prices ?? []) !== null);
+
+	function buildPriceTiers(prices: { [key: string]: number }[]): CartItemPriceTier[] {
+		if (!prices.length) {
+			return [];
+		}
+
+		const priceMap = prices[0];
+		if (!priceMap) {
+			return [];
+		}
+
+		return Object.entries(priceMap)
+			.map(([qty, totalCents]) => {
+				const minQuantity = parseInt(qty, 10);
+				return {
+					minQuantity,
+					unitPrice: Number(totalCents) / minQuantity / 100,
+				};
+			})
+			.sort((a, b) => a.minQuantity - b.minQuantity);
+	}
+
+	function addToCart() {
+		const product = getProduct();
+
+		if (isOutOfStock.value || !hasPrice.value) {
+			return;
+		}
+
+		const quantity = 1;
+		const maxQuantity = product.maxOrderQuantity;
+		const currentCartQuantity
+			= cart.items.find((item: CartItem) => item.id === product.id)?.quantity ?? 0;
+
+		if (typeof maxQuantity === "number" && currentCartQuantity + quantity > maxQuantity) {
+			toast.add({
+				title: t("product.actions.maxQuantityReachedTitle", { count: currentCartQuantity }),
+				description: t("product.actions.maxQuantityReachedDescription", { max: maxQuantity }),
+				color: "error",
+				icon: icon("alert"),
+				duration: 3000,
+			});
+			return;
+		}
+
+		const baseUnitPrice = getBaseUnitPrice(product.prices);
+		if (baseUnitPrice === null) {
+			return;
+		}
+
+		const added = cart.addItem({
+			id: product.id,
+			name: product.name,
+			image: product.image,
+			sku: product.sku,
+			price: baseUnitPrice,
+			taxRate: product.tax.rate,
+			priceTiers: buildPriceTiers(product.prices),
+			categorySlug: product.categorySlug,
+			subcategorySlug: product.subcategorySlug,
+			...(typeof maxQuantity === "number" ? { maxOrderQuantity: maxQuantity } : {}),
+		}, { chooseTarget: true });
+
+		if (!added) {
+			if (typeof maxQuantity === "number") {
+				toast.add({
+					title: t("product.actions.maxQuantityReachedTitle", { count: currentCartQuantity }),
+					description: t("product.actions.maxQuantityReachedDescription", { max: maxQuantity }),
+					color: "error",
+					icon: icon("alert"),
+					duration: 3000,
+				});
+			}
+			return;
+		}
+
+		toast.add({
+			title: t("product.actions.addedToCart", { quantity, name: product.name }),
+			color: "primary",
+			icon: icon("check"),
+			duration: 1000,
+		});
+	}
+
+	return { isOutOfStock, hasPrice, addToCart };
+}

package/app/composables/useProductImage.ts

@@ -0,0 +1,12 @@
+import { imagesApi } from "../api/images";
+
+export function useProductImage() {
+	const getImage = (name: string): string => {
+		if (name.startsWith("/") || name.startsWith("http")) {
+			return name;
+		}
+		return imagesApi.list(name);
+	};
+
+	return { getImage };
+}

package/app/composables/useProductListing.ts

@@ -0,0 +1,210 @@
+import { searchApi } from "../api/search";
+import type { ProductList } from "../interfaces/product-list";
+import type { PriceRange, SearchFacet } from "../interfaces/search-facets";
+
+export interface ProductListingOptions {
+	/** Unique fetch key per listing surface (e.g. "search", "category"). */
+	key: string;
+	/** Reactive full-text query; defaults to a match-all listing. */
+	query?: () => string;
+	/**
+	 * Filters applied on top of the user's selection but never shown as
+	 * chips or facets — e.g. the category of a category page.
+	 */
+	fixedFilters?: () => Record<string, string[]>;
+	/** Facet fields offered to the user, in display order. */
+	facetFields?: string[];
+	/** Run the first request even with an empty query (category pages). */
+	allowEmptyQuery?: boolean;
+}
+
+const DEFAULT_FACETS = ["category", "subcategory", "manufacturer", "available"];
+
+export interface ListingResponse {
+	products: ProductList[];
+	facets: SearchFacet[];
+	found: number;
+	page: number;
+	perPage: number;
+}
+
+/**
+ * The shared product listing engine: one Typesense-backed state machine
+ * for the search page and the category pages — full-text query, facet
+ * filters, price range, sorting and pagination, all synced to the URL.
+ */
+export function useProductListing(options: ProductListingOptions) {
+	const route = useRoute();
+	const router = useRouter();
+	const { t } = useI18n();
+	const { productsPerPage } = useRuntimeConfig().public;
+
+	const facetFields = options.facetFields ?? DEFAULT_FACETS;
+	const query = computed(() => options.query?.() ?? "");
+
+	/* ---- URL state ---------------------------------------------------- */
+	function updateUrl(updates: Record<string, string | number | null | undefined>) {
+		const merged: Record<string, string | null> = {};
+		for (const [k, v] of Object.entries(route.query)) {
+			if (typeof v === "string") {
+				merged[k] = v;
+			}
+		}
+		for (const [key, value] of Object.entries(updates)) {
+			merged[key] = (value !== null && value !== undefined) ? String(value) : null;
+		}
+		if (!("page" in updates)) {
+			merged.page = null;
+		}
+		const next: Record<string, string> = {};
+		for (const [k, v] of Object.entries(merged)) {
+			if (v !== null) {
+				next[k] = v;
+			}
+		}
+		void router.replace({ query: next });
+	}
+
+	const sort = computed({
+		get: () => (route.query.sort as string) ?? "relevance",
+		set: (value: string) => updateUrl({ sort: value === "relevance" ? null : value }),
+	});
+
+	const page = computed({
+		get: () => Math.max(1, parseInt((route.query.page as string) ?? "1", 10)),
+		set: (value: number) => updateUrl({ page: value === 1 ? null : value }),
+	});
+
+	const activeFilters = computed<Record<string, string[]>>({
+		get() {
+			const result: Record<string, string[]> = {};
+			for (const field of facetFields) {
+				const raw = route.query[field] as string | undefined;
+				if (raw) {
+					result[field] = raw.split(",").filter(Boolean);
+				}
+			}
+			return result;
+		},
+		set(filters: Record<string, string[]>) {
+			const updates: Record<string, string | null> = {};
+			for (const field of facetFields) {
+				const values = filters[field];
+				updates[field] = values?.length ? values.join(",") : null;
+			}
+			updateUrl(updates);
+		},
+	});
+
+	const priceRange = computed<PriceRange>({
+		get: () => ({
+			min: route.query.price_min ? parseInt(route.query.price_min as string, 10) : undefined,
+			max: route.query.price_max ? parseInt(route.query.price_max as string, 10) : undefined,
+		}),
+		set(value: PriceRange) {
+			updateUrl({ price_min: value.min ?? null, price_max: value.max ?? null });
+		},
+	});
+
+	/* ---- fetching ------------------------------------------------------ */
+	const hasQuery = computed(() =>
+		options.allowEmptyQuery ? true : query.value.trim().length > 0,
+	);
+
+	const requestBody = computed(() => ({
+		q: query.value.trim() || "*",
+		filters: { ...activeFilters.value, ...(options.fixedFilters?.() ?? {}) },
+		priceRange: priceRange.value,
+		sort: sort.value,
+		page: page.value,
+		perPage: productsPerPage as number,
+	}));
+
+	const { data, pending, error, execute } = useFetch<ListingResponse | null>(
+		searchApi.search(),
+		{
+			key: `listing:${options.key}`,
+			method: "POST",
+			body: requestBody,
+			immediate: false,
+			watch: false,
+		},
+	);
+
+	if (hasQuery.value) {
+		// First load (SSR-capable), then re-fetch on every URL state change.
+		void execute();
+	}
+	watch(
+		() => [route.query, query.value],
+		() => {
+			if (hasQuery.value) {
+				void execute();
+			}
+		},
+		{ deep: true },
+	);
+
+	/* ---- derived view state -------------------------------------------- */
+	const products = computed<ProductList[]>(() => data.value?.products ?? []);
+	const found = computed(() => data.value?.found ?? 0);
+	const totalPages = computed(() => Math.ceil(found.value / (productsPerPage as number)));
+	const isEmpty = computed(() => data.value !== null && data.value !== undefined && products.value.length === 0);
+
+	/** Facets in configured order, slug facets hidden from the UI. */
+	const facets = computed<SearchFacet[]>(() => {
+		const byField = new Map((data.value?.facets ?? []).map(f => [f.fieldName, f]));
+		return facetFields
+			.map(field => byField.get(field))
+			.filter((f): f is SearchFacet => Boolean(f && f.counts.length > 0));
+	});
+
+	const activeFilterCount = computed(() =>
+		Object.values(activeFilters.value).reduce((sum, values) => sum + values.length, 0)
+		+ (priceRange.value.min !== undefined || priceRange.value.max !== undefined ? 1 : 0),
+	);
+
+	const chips = computed(() => {
+		const list: { field: string; value: string }[] = [];
+		for (const [field, values] of Object.entries(activeFilters.value)) {
+			for (const value of values) {
+				list.push({ field, value });
+			}
+		}
+		return list;
+	});
+
+	function removeChip(field: string, value: string) {
+		const current = activeFilters.value[field] ?? [];
+		activeFilters.value = {
+			...activeFilters.value,
+			[field]: current.filter(v => v !== value),
+		};
+	}
+
+	function clearFilters() {
+		const updates: Record<string, null> = { price_min: null, price_max: null };
+		for (const field of facetFields) {
+			updates[field] = null;
+		}
+		updateUrl(updates);
+	}
+
+	const sortOptions = computed(() => [
+		{ value: "relevance", label: t("search.sort.relevance") },
+		{ value: "price_asc", label: t("search.sort.priceAsc") },
+		{ value: "price_desc", label: t("search.sort.priceDesc") },
+		{ value: "name_asc", label: t("search.sort.nameAsc") },
+		{ value: "name_desc", label: t("search.sort.nameDesc") },
+	]);
+
+	return {
+		query, sort, sortOptions, page, activeFilters, priceRange,
+		data, pending, error, execute,
+		products, facets, found, totalPages, isEmpty,
+		chips, activeFilterCount, removeChip, clearFilters,
+		perPage: productsPerPage as number,
+	};
+}
+
+export type ProductListing = ReturnType<typeof useProductListing>;

package/app/composables/useProductUrl.ts

@@ -0,0 +1,17 @@
+import type { Product } from "../composables/useProducts";
+import { slugify } from "../composables/useProducts";
+
+/**
+ * Generate a localized product URL with the current locale prefix.
+ * Replaces the plain `productUrl()` function to support i18n routing.
+ */
+export function useProductUrl(product: Product) {
+	const localePath = useLocalePath();
+
+	const url = computed(() => {
+		const path = `/category/${product.categorySlug}/${product.subcategorySlug}/product/${slugify(product)}`;
+		return localePath(path);
+	});
+
+	return url;
+}

package/app/composables/useProducts.ts

@@ -0,0 +1,130 @@
+import { productsApi } from "../api/products";
+import type { ProductList, ProductPriceTier } from "../interfaces/product-list";
+
+export type Product = ProductList;
+export type { ProductPriceTier };
+
+export function getPriceTiers(prices: { [key: string]: number }[]): ProductPriceTier[] {
+	const priceMap = prices[0];
+	if (!priceMap) {
+		return [];
+	}
+
+	return Object.entries(priceMap)
+		.map(([quantityRaw, totalCentsRaw]) => {
+			const quantity = parseInt(quantityRaw, 10);
+			const totalCents = Number(totalCentsRaw);
+
+			if (!Number.isFinite(quantity) || quantity <= 0) {
+				return null;
+			}
+			if (!Number.isFinite(totalCents)) {
+				return null;
+			}
+
+			return {
+				quantity,
+				totalCents,
+				unitCents: totalCents / quantity,
+			};
+		})
+		.filter((tier): tier is ProductPriceTier => tier !== null)
+		.sort((a, b) => a.quantity - b.quantity);
+}
+
+export function getDisplayUnitPrice(prices: { [key: string]: number }[]): number | null {
+	const tiers = getPriceTiers(prices);
+	if (!tiers.length) {
+		return null;
+	}
+
+	const selectedTier = tiers.length > 1 ? tiers[tiers.length - 1]! : tiers[0]!;
+	return selectedTier.unitCents / 100;
+}
+
+export function getPriceWithOptionalTax(
+	price: number,
+	taxRate: number,
+	taxIncludedPrices: boolean,
+): number {
+	if (!taxIncludedPrices) {
+		return price;
+	}
+
+	const normalizedTaxRate = taxRate > 1 ? taxRate / 100 : taxRate;
+	if (!Number.isFinite(normalizedTaxRate) || normalizedTaxRate < 0) {
+		return price;
+	}
+
+	return price * (1 + normalizedTaxRate);
+}
+
+export function getBaseUnitPrice(prices: { [key: string]: number }[]): number | null {
+	const tiers = getPriceTiers(prices);
+	if (!tiers.length) {
+		return null;
+	}
+
+	return tiers[0]!.unitCents / 100;
+}
+
+export function slugify(product: Product): string {
+	return `${product.id}-${product.name.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "")}`;
+}
+
+const UUID_PREFIX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/i;
+
+/**
+ * Extract the product id from a `{id}-{name}` slug. Live ids are UUIDs —
+ * which contain dashes themselves — so match the UUID prefix first and only
+ * fall back to the first dash-delimited segment for plain (demo) ids.
+ */
+export function parseProductIdFromSlug(slug: string): string {
+	const uuid = slug.match(UUID_PREFIX);
+	if (uuid) {
+		return uuid[0];
+	}
+	return slug.split("-")[0] ?? "";
+}
+
+// TODO(i18n-routing): productUrl is a plain function with no composable context, so it cannot
+// call useLocalePath() directly. Fix: convert to a composable (useProductUrl) that calls
+// useLocalePath() and returns a computed URL, or accept localePath as a parameter.
+export function productUrl(product: Product): string {
+	return `/category/${product.categorySlug}/product/${slugify(product)}`;
+}
+
+export const useProducts = (
+	categorySlug?: MaybeRefOrGetter<string | undefined>,
+	subcategorySlug?: MaybeRefOrGetter<string | undefined>,
+) => {
+	const { locale } = useI18n();
+	const query = computed(() => {
+		const q: Record<string, string> = {};
+		const category = toValue(categorySlug);
+		const subcategory = toValue(subcategorySlug);
+		if (category) {
+			q.category = category;
+		}
+		if (subcategory) {
+			q.subcategory = subcategory;
+		}
+		return q;
+	});
+
+	const { data: products, status, error, refresh } = useFetch<Product[]>(productsApi.list(), {
+		query,
+		headers: computed(() => ({ "x-locale": locale.value })),
+		default: () => [] as Product[],
+	});
+	return { products, status, error, refresh };
+};
+
+export const useProduct = (id: string) => {
+	const { locale } = useI18n();
+	const { data: product, status, error, refresh } = useFetch<Product | null>(productsApi.byId(id), {
+		headers: computed(() => ({ "x-locale": locale.value })),
+		default: () => null,
+	});
+	return { product, status, error, refresh };
+};

package/app/composables/useSearch.ts

@@ -0,0 +1,12 @@
+export function useSearch() {
+	const localePath = useLocalePath();
+
+	async function navigateToSearch(q: string): Promise<void> {
+		await navigateTo({
+			path: localePath("search"),
+			query: q.trim() ? { q: q.trim() } : {},
+		});
+	}
+
+	return { navigateToSearch };
+}

package/app/composables/useThemeStore.ts

@@ -0,0 +1,81 @@
+import { defineStore } from "pinia";
+
+import { DEFAULT_ICON_WEIGHT, SOLAR_ICON_WEIGHTS, nuxtUiIcons, type SolarIconWeight } from "../config/icons";
+import { palette, COLOR_SHADES } from "../config/palette";
+import { DEFAULT_THEME_ID, themes, type Theme } from "../config/themes";
+
+const THEME_STORAGE_KEY = "cover-theme";
+const ICON_WEIGHT_STORAGE_KEY = "cover-icon-weight";
+
+export const useThemeStore = defineStore("theme", () => {
+	const activeTheme = ref<Theme | null>(null);
+
+	/** Dev/debug override; `null` follows the active theme's weight. */
+	const iconWeightOverride = ref<SolarIconWeight | null>(null);
+
+	const iconWeight = computed<SolarIconWeight>(
+		() => iconWeightOverride.value ?? activeTheme.value?.icons.weight ?? DEFAULT_ICON_WEIGHT,
+	);
+
+	const applyIcons = () => {
+		updateAppConfig({ ui: { icons: nuxtUiIcons(iconWeight.value) } });
+	};
+
+	const applyTheme = (theme: Theme) => {
+		updateAppConfig({
+			ui: { colors: { primary: theme.colors.primary, neutral: theme.colors.neutral } },
+		});
+		applyIcons();
+		if (import.meta.client) {
+			const root = document.documentElement;
+			const pc = palette[theme.colors.primary];
+			const nc = palette[theme.colors.neutral];
+			COLOR_SHADES.forEach((s) => {
+				root.style.setProperty(`--ui-color-primary-${s}`, pc[s]);
+				root.style.setProperty(`--ui-color-neutral-${s}`, nc[s]);
+			});
+			root.style.setProperty("--ui-radius", theme.tokens.radius);
+		}
+	};
+
+	const setTheme = (theme: Theme) => {
+		activeTheme.value = theme;
+		applyTheme(theme);
+		if (import.meta.client) {
+			localStorage.setItem(THEME_STORAGE_KEY, theme.id);
+		}
+	};
+
+	const setIconWeight = (weight: SolarIconWeight | null) => {
+		iconWeightOverride.value = weight;
+		applyIcons();
+		if (import.meta.client) {
+			if (weight) {
+				localStorage.setItem(ICON_WEIGHT_STORAGE_KEY, weight);
+			}
+			else {
+				localStorage.removeItem(ICON_WEIGHT_STORAGE_KEY);
+			}
+		}
+	};
+
+	/** Restores theme + icon weight override from localStorage (client only). */
+	const restore = () => {
+		if (!import.meta.client) {
+			return;
+		}
+		const savedWeight = localStorage.getItem(ICON_WEIGHT_STORAGE_KEY) as SolarIconWeight | null;
+		if (savedWeight && SOLAR_ICON_WEIGHTS.includes(savedWeight)) {
+			iconWeightOverride.value = savedWeight;
+		}
+		const savedTheme = localStorage.getItem(THEME_STORAGE_KEY);
+		const theme = themes.find((t) => t.id === savedTheme)
+			?? themes.find((t) => t.id === DEFAULT_THEME_ID)
+			?? themes[0];
+		if (theme) {
+			setTheme(theme);
+		}
+	};
+
+	return { activeTheme, themes, setTheme, applyTheme, iconWeight, iconWeightOverride, setIconWeight, restore, DEFAULT_THEME_ID };
+});

package/app/composables/useViewMode.ts

@@ -0,0 +1,18 @@
+const ONE_YEAR = 60 * 60 * 24 * 365;
+
+export function useViewMode() {
+	const viewMode = useCookie<"list" | "grid">("cover-view-mode", {
+		default: () => "grid",
+		maxAge: ONE_YEAR,
+	});
+	const sort = useCookie<string>("cover-sort-mode", {
+		default: () => "featured",
+		maxAge: ONE_YEAR,
+	});
+	const page = useCookie<number>("cover-page-number", {
+		default: () => 1,
+		maxAge: ONE_YEAR,
+	});
+
+	return { viewMode, sort, page };
+}