@revenexx/cover 0.1.0

package/app/components/layout/header/LocaleSwitcher.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+/**
+ * Locale selector (Smashing Magazine, "Designing A Better Language
+ * Selector"): a non-modal popover that decouples language and market.
+ * Markets come from the markets app (live: /v1/markets via the BFF) and
+ * carry region + currency; languages show their native full names (never
+ * flags or codes) and are limited to the locales the selected market
+ * offers. The trigger shows the current combination prominently.
+ */
+const { icon } = useIcons();
+const { t, locale, locales } = useI18n();
+const switchLocalePath = useSwitchLocalePath();
+const { markets } = useMarkets();
+const { market, setMarket, region, currencySymbol } = useLocalePreferences(markets);
+
+const open = ref(false);
+
+const marketItems = computed(() => markets.value.map(entry => ({
+	code: entry.code,
+	name: entry.name,
+	active: entry.code === market.value?.code,
+})));
+
+const languageItems = computed(() => {
+	const offered = new Set(market.value?.locales.map(entry => entry.language) ?? []);
+	return locales.value
+		.filter(entry => offered.size === 0 || offered.has(entry.code))
+		.map(entry => ({
+			code: entry.code,
+			/** Native full name ("Deutsch", "English") — never flags or codes. */
+			name: entry.name ?? entry.code,
+			to: switchLocalePath(entry.code),
+			active: entry.code === locale.value,
+		}));
+});
+
+const currentLanguageName = computed(() =>
+	languageItems.value.find(item => item.active)?.name ?? locale.value);
+
+async function onLanguageChange(code: string): Promise<void> {
+	const target = languageItems.value.find(item => item.code === code);
+	if (target && !target.active) {
+		await navigateTo(target.to);
+	}
+}
+
+async function onMarketChange(code: string): Promise<void> {
+	setMarket(code);
+	// The market may not offer the current language — fall back to its first.
+	const fallback = languageItems.value[0];
+	if (fallback && !languageItems.value.some(item => item.active)) {
+		await navigateTo(fallback.to);
+	}
+}
+
+/** The trigger states the full current selection, e.g. "Deutschland (Deutsch) in €". */
+const triggerLabel = computed(() =>
+	region.value
+		? `${region.value} (${currentLanguageName.value}) in ${currencySymbol.value}`
+		: currentLanguageName.value);
+</script>
+
+<template>
+	<UPopover
+		v-model:open="open"
+		:content="{ align: 'end' }"
+	>
+		<button
+			type="button"
+			tabindex="0"
+			class="flex gap-1.5 items-center cursor-pointer hover:underline underline-offset-4 decoration-2"
+			:aria-label="t('topbar.switchLocale')"
+		>
+			<UIcon
+				:name="icon('globe')"
+				class="size-4"
+			/>
+			{{ triggerLabel }}
+			<UIcon
+				:name="icon('chevron-down')"
+				class="size-3.5"
+			/>
+		</button>
+
+		<template #content>
+			<div class="w-80 p-4 space-y-4">
+				<!-- Market: region + currency in one choice, served by the markets app -->
+				<UFormField :label="t('topbar.localePanel.region')">
+					<USelect
+						:model-value="market?.code"
+						value-key="code"
+						label-key="name"
+						:items="marketItems"
+						class="w-full"
+						@update:model-value="(code: string) => onMarketChange(code)"
+					/>
+				</UFormField>
+
+				<!-- Language: native full names within the market's locales -->
+				<UFormField :label="t('topbar.localePanel.language')">
+					<USelect
+						:model-value="locale"
+						value-key="code"
+						label-key="name"
+						:items="languageItems"
+						class="w-full"
+						@update:model-value="(code: string) => onLanguageChange(code)"
+					/>
+				</UFormField>
+
+				<!-- Currency: defined by the market -->
+				<div class="flex items-center justify-between text-sm">
+					<span class="text-muted">{{ t('topbar.localePanel.currency') }}</span>
+					<span class="font-medium">{{ currencySymbol }}</span>
+				</div>
+
+				<p class="text-xs text-dimmed">
+					{{ t('topbar.localePanel.hint') }}
+				</p>
+			</div>
+		</template>
+	</UPopover>
+</template>

package/app/components/layout/header/MainNav.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { mainNavigation, mainNavigationSecondary } from "../../../config/navigation";
+
+const { t } = useI18n();
+const localePath = useLocalePath();
+const route = useRoute();
+
+function isActive(to: string): boolean {
+	const localized = localePath(to);
+	if (to === "/") {
+		return route.path === localized;
+	}
+	return route.path === localized || route.path.startsWith(`${localized}/`);
+}
+</script>
+
+<template>
+	<nav
+		:aria-label="t('nav.mainNavigation')"
+		class="bg-inverted text-inverted"
+	>
+		<div
+			class="px-4 sm:px-6 lg:px-8 max-w-(--ui-container) mx-auto w-full
+			py-3 flex items-center gap-8"
+		>
+			<ul
+				role="list"
+				class="flex-1 flex items-center gap-6 lg:gap-8 overflow-x-auto"
+			>
+				<li
+					v-for="item in mainNavigation"
+					:key="item.to"
+				>
+					<NuxtLink
+						:to="localePath(item.to)"
+						class="inline-block py-0.5 whitespace-nowrap underline-offset-4 decoration-2 hover:underline"
+						:class="{ 'underline': isActive(item.to) }"
+					>
+						{{ t(item.labelKey) }}
+					</NuxtLink>
+				</li>
+			</ul>
+			<ul
+				role="list"
+				class="hidden md:flex items-center gap-6"
+			>
+				<li
+					v-for="item in mainNavigationSecondary"
+					:key="item.to"
+				>
+					<NuxtLink
+						:to="localePath(item.to)"
+						class="inline-block py-0.5 whitespace-nowrap underline-offset-4 decoration-2 hover:underline"
+					>
+						{{ t(item.labelKey) }}
+					</NuxtLink>
+				</li>
+			</ul>
+		</div>
+	</nav>
+</template>

package/app/components/layout/header/MobileMenu.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+const { icon } = useIcons();
+
+const { categoryNavItems } = useCategories();
+const auth = useAuthStore();
+const toast = useToast();
+const { t } = useI18n();
+const localePath = useLocalePath();
+
+const accountLinks = computed(() => [
+	{ label: t("menu.profile"), icon: icon("user"), to: "/account", tabindex: 0 },
+	{ label: t("menu.addresses"), icon: icon("location"), to: "/account/addresses", tabindex: 0 },
+	{ label: t("menu.orders"), icon: icon("orders"), to: "/account/orders", tabindex: 0 },
+]);
+
+const onLogout = async () => {
+	await auth.logout();
+	toast.add({
+		title: t("auth.logout.success"),
+		color: "primary",
+		icon: icon("check"),
+		duration: 1000,
+	});
+	await navigateTo(localePath("/login"));
+};
+</script>
+
+<template>
+	<div class="flex flex-col gap-4 pb-4">
+		<div class="md:hidden">
+			<UNavigationMenu
+				:items="categoryNavItems"
+				orientation="vertical"
+				:ui="{ linkLeadingIcon: 'text-(--ui-primary)', childLinkIcon: 'text-(--ui-primary)' }"
+			/>
+		</div>
+
+		<USeparator class="md:hidden" />
+
+		<template v-if="auth.isLoggedIn">
+			<UNavigationMenu
+				:items="accountLinks"
+				orientation="vertical"
+				:ui="{ linkLeadingIcon: 'text-(--ui-primary)' }"
+			/>
+
+			<UButton
+				:label="t('menu.logout')"
+				:icon="icon('logout')"
+				color="error"
+				variant="ghost"
+				class="w-full justify-start"
+				tabindex="0"
+				@click="onLogout"
+			/>
+		</template>
+
+		<template v-else>
+			<div class="flex flex-col gap-2">
+				<UButton
+					:label="t('auth.login.submit')"
+					:icon="icon('login')"
+					color="primary"
+					variant="solid"
+					class="w-full justify-center"
+					:to="localePath('/login')"
+					tabindex="0"
+				/>
+				<UButton
+					:label="t('auth.register.submit')"
+					:icon="icon('register')"
+					color="primary"
+					variant="outline"
+					class="w-full justify-center"
+					:to="localePath('/register')"
+					tabindex="0"
+				/>
+			</div>
+		</template>
+	</div>
+</template>

package/app/components/layout/header/TopBar.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { topbarQuickLinks, topbarUsps } from "../../../config/navigation";
+
+const { icon } = useIcons();
+const { t } = useI18n();
+const localePath = useLocalePath();
+</script>
+
+<template>
+	<div class="bg-elevated text-sm text-muted border-b border-default">
+		<div
+			class="px-4 sm:px-6 lg:px-8 max-w-(--ui-container) mx-auto w-full
+			py-2 flex items-center gap-6"
+		>
+			<ul
+				role="list"
+				class="flex-1 hidden lg:flex items-center gap-6"
+			>
+				<li
+					v-for="usp in topbarUsps"
+					:key="usp.labelKey"
+					class="flex items-center gap-2"
+				>
+					<UIcon
+						:name="icon(usp.icon)"
+						class="size-4 shrink-0 text-primary"
+					/>
+					{{ t(usp.labelKey) }}
+				</li>
+			</ul>
+			<ul
+				role="list"
+				class="ml-auto flex items-center gap-5"
+			>
+				<li
+					v-for="link in topbarQuickLinks"
+					:key="link.to"
+					class="max-sm:hidden"
+				>
+					<NuxtLink
+						:to="localePath(link.to)"
+						class="hover:underline underline-offset-4 decoration-2"
+					>
+						{{ t(link.labelKey) }}
+					</NuxtLink>
+				</li>
+				<li>
+					<LayoutHeaderLocaleSwitcher />
+				</li>
+				<li class="flex items-center">
+					<UTooltip :text="t('nav.darkModeToggle')">
+						<UColorModeButton
+							color="neutral"
+							size="xs"
+							class="cursor-pointer"
+							tabindex="0"
+						/>
+					</UTooltip>
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>

package/app/components/listing/ListingView.vue

@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import SearchFacets from "../search/filter/SearchFacets.vue";
+import type { ProductListing } from "../../composables/useProductListing";
+
+/**
+ * The shared product listing composition for search and category pages:
+ * toolbar (result count, sort, view toggle, mobile filter button), facet
+ * rail on desktop, filter drawer on mobile, active filter chips, the
+ * product grid/list and pagination. Pages provide their own header above.
+ */
+const props = defineProps<{
+	listing: ProductListing;
+}>();
+
+const { icon } = useIcons();
+const { t } = useI18n();
+const { viewMode } = useViewMode();
+
+const drawerOpen = ref(false);
+
+const FACET_VALUE_LABELS: Record<string, Record<string, string>> = {
+	available: { true: "search.filters.values.inStock", false: "search.filters.values.outOfStock" },
+};
+
+function chipLabel(field: string, value: string): string {
+	const key = FACET_VALUE_LABELS[field]?.[value];
+	return key ? t(key) : value;
+}
+
+const listing = props.listing;
+
+const gridClasses = computed(() => viewMode.value === "grid"
+	? "grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4"
+	: "flex flex-col gap-4");
+
+const listView = resolveComponent("CategoryViewListView");
+const gridView = resolveComponent("CategoryViewGridView");
+const productComponent = computed(() => viewMode.value === "list" ? listView : gridView);
+</script>
+
+<template>
+	<div>
+		<!-- Toolbar -->
+		<div
+			class="flex flex-wrap items-center justify-between gap-3 border-b border-(--ui-border)
+			pb-4"
+		>
+			<p
+				class="text-sm text-muted tabular-nums"
+				aria-live="polite"
+			>
+				<template v-if="listing.pending.value && !listing.data.value">
+					&nbsp;
+				</template>
+				<template v-else>
+					{{ t('search.results.count', listing.found.value, { count: listing.found.value }) }}
+				</template>
+			</p>
+			<div class="flex items-center gap-2">
+				<UButton
+					color="neutral"
+					variant="outline"
+					size="sm"
+					tabindex="0"
+					class="lg:hidden"
+					:icon="icon('filters')"
+					:label="t('search.filters.title')"
+					@click="drawerOpen = true"
+				>
+					<template
+						v-if="listing.activeFilterCount.value"
+						#trailing
+					>
+						<UBadge
+							color="primary"
+							variant="solid"
+							size="sm"
+							:label="String(listing.activeFilterCount.value)"
+						/>
+					</template>
+				</UButton>
+				<USelect
+					v-model="listing.sort.value"
+					:items="listing.sortOptions.value"
+					value-key="value"
+					size="sm"
+					class="w-44"
+					:aria-label="t('search.sort.label')"
+				/>
+				<CategoryViewToggle class="max-sm:hidden" />
+			</div>
+		</div>
+
+		<div class="flex gap-8 items-start pt-6">
+			<!-- Desktop facet rail -->
+			<div class="hidden lg:block w-60 shrink-0 sticky top-(--ui-header-height) pt-1">
+				<SearchFacets
+					v-model="listing.activeFilters.value"
+					v-model:price-range="listing.priceRange.value"
+					:facets="listing.facets.value"
+				/>
+			</div>
+
+			<div class="flex-1 min-w-0">
+				<!-- Active filter chips -->
+				<div
+					v-if="listing.chips.value.length"
+					class="flex flex-wrap items-center gap-2 mb-4"
+				>
+					<button
+						v-for="chip in listing.chips.value"
+						:key="`${chip.field}:${chip.value}`"
+						type="button"
+						tabindex="0"
+						class="inline-flex items-center gap-1.5 ps-3 pe-2 py-1 rounded-full text-xs
+						font-medium bg-elevated text-highlighted border border-(--ui-border)
+						hover:border-(--ui-primary) transition-colors cursor-pointer"
+						:aria-label="t('search.filters.removeFilter', { value: chipLabel(chip.field, chip.value) })"
+						@click="listing.removeChip(chip.field, chip.value)"
+					>
+						{{ chipLabel(chip.field, chip.value) }}
+						<UIcon
+							:name="icon('close')"
+							class="size-3.5 text-muted"
+						/>
+					</button>
+					<button
+						type="button"
+						tabindex="0"
+						class="text-xs text-muted hover:text-highlighted underline underline-offset-4
+						decoration-2 transition-colors cursor-pointer"
+						@click="listing.clearFilters()"
+					>
+						{{ t('search.filters.clearAll') }}
+					</button>
+				</div>
+
+				<!-- Loading skeleton -->
+				<div
+					v-if="listing.pending.value && !listing.data.value"
+					:class="gridClasses"
+				>
+					<div
+						v-for="n in 8"
+						:key="n"
+						class="space-y-3"
+					>
+						<USkeleton class="h-44 w-full rounded-lg" />
+						<USkeleton class="h-4 w-3/4" />
+						<USkeleton class="h-4 w-1/2" />
+					</div>
+				</div>
+
+				<UiFeedbackErrorBoundary
+					v-else-if="listing.error.value"
+					:title="t('search.results.error')"
+					@retry="listing.execute"
+				/>
+
+				<!-- Results -->
+				<template v-else-if="listing.products.value.length">
+					<div
+						:class="[gridClasses, listing.pending.value ? 'opacity-60 transition-opacity' : '']"
+					>
+						<component
+							:is="productComponent"
+							v-for="product in listing.products.value"
+							:key="product.id"
+							:product="product"
+						/>
+					</div>
+
+					<div
+						v-if="listing.totalPages.value > 1"
+						class="mt-8 flex flex-col items-center gap-2"
+					>
+						<UPagination
+							v-model:page="listing.page.value"
+							:total="listing.found.value"
+							:items-per-page="listing.perPage"
+						/>
+					</div>
+				</template>
+
+				<!-- Empty -->
+				<slot
+					v-else-if="listing.isEmpty.value"
+					name="empty"
+				>
+					<UiFeedbackEmptyState
+						icon="no-results"
+						:title="t('search.results.emptyTitle')"
+						:description="t('search.results.emptyDescription')"
+					/>
+				</slot>
+			</div>
+		</div>
+
+		<!-- Mobile filter drawer -->
+		<UDrawer
+			v-model:open="drawerOpen"
+			direction="left"
+			:ui="{ content: 'w-80 max-w-[85vw] h-full' }"
+		>
+			<template #content>
+				<div class="flex h-full flex-col">
+					<div class="flex-1 overflow-y-auto p-4">
+						<SearchFacets
+							v-model="listing.activeFilters.value"
+							v-model:price-range="listing.priceRange.value"
+							:facets="listing.facets.value"
+						/>
+					</div>
+					<div class="border-t border-(--ui-border) p-4">
+						<UButton
+							block
+							color="primary"
+							tabindex="0"
+							:label="t('search.filters.showResults', listing.found.value, { count: listing.found.value })"
+							@click="drawerOpen = false"
+						/>
+					</div>
+				</div>
+			</template>
+		</UDrawer>
+	</div>
+</template>