NormalPage component w/ Collections refactor (#4873)

* Refactor search page, migrate to /discover/

* Add NormalPage component for common layouts, refactor Collections page as an example, misc ui pkg cleanup

* intl:extract

* lint

* lint

* remove old components

* Refactor search page, migrate to /discover/

* Add NormalPage component for common layouts, refactor Collections page as an example, misc ui pkg cleanup

* intl:extract

* lint

* lint

* remove old components

packages/ui/src/components/nav/NavItem.vue

@@ -1,50 +0,0 @@
-<script setup>
-import Button from '../base/Button.vue'
-
-defineProps({
-	link: {
-		type: String,
-		default: null,
-	},
-	external: {
-		type: Boolean,
-		default: false,
-	},
-	action: {
-		type: Function,
-		default: null,
-	},
-	selected: {
-		type: Boolean,
-		default: false,
-	},
-	label: {
-		type: String,
-		required: true,
-	},
-	icon: {
-		type: String,
-		default: null,
-	},
-})
-</script>
-
-<template>
-	<Button
-		:link="link"
-		:external="external"
-		:action="action"
-		design="nav"
-		class="quiet-disabled"
-		:class="{
-			selected: selected,
-		}"
-		:disabled="selected"
-		:navlabel="label"
-	>
-		<slot />
-		{{ label }}
-	</Button>
-</template>
-
-<style lang="scss" scoped></style>

packages/ui/src/components/nav/NavRow.vue

@@ -1,166 +0,0 @@
-<template>
-	<nav class="navigation">
-		<router-link
-			v-for="(link, index) in filteredLinks"
-			v-show="link.shown === undefined ? true : link.shown"
-			:key="index"
-			ref="linkElements"
-			:to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
-			class="nav-link button-animation"
-		>
-			<span>{{ link.label }}</span>
-		</router-link>
-		<div
-			class="nav-indicator"
-			:style="{
-				left: positionToMoveX,
-				top: positionToMoveY,
-				width: sliderWidth,
-				opacity: activeIndex === -1 ? 0 : 1,
-			}"
-			aria-hidden="true"
-		/>
-	</nav>
-</template>
-
-<script>
-export default {
-	props: {
-		links: {
-			default: () => [],
-			type: Array,
-		},
-		query: {
-			default: null,
-			type: String,
-		},
-	},
-	data() {
-		return {
-			sliderPositionX: 0,
-			sliderPositionY: 18,
-			selectedElementWidth: 0,
-			activeIndex: -1,
-			oldIndex: -1,
-		}
-	},
-	computed: {
-		filteredLinks() {
-			return this.links.filter((x) => (x.shown === undefined ? true : x.shown))
-		},
-		positionToMoveX() {
-			return `${this.sliderPositionX}px`
-		},
-		positionToMoveY() {
-			return `${this.sliderPositionY}px`
-		},
-		sliderWidth() {
-			return `${this.selectedElementWidth}px`
-		},
-	},
-	watch: {
-		'$route.path': {
-			handler() {
-				this.pickLink()
-			},
-		},
-		'$route.query': {
-			handler() {
-				if (this.query) this.pickLink()
-			},
-		},
-	},
-	mounted() {
-		window.addEventListener('resize', this.pickLink)
-		this.pickLink()
-	},
-	unmounted() {
-		window.removeEventListener('resize', this.pickLink)
-	},
-	methods: {
-		pickLink() {
-			this.activeIndex = this.query
-				? this.filteredLinks.findIndex(
-						(x) => (x.href === '' ? undefined : x.href) === this.$route.path[this.query],
-					)
-				: this.filteredLinks.findIndex((x) => x.href === decodeURIComponent(this.$route.path))
-
-			if (this.activeIndex !== -1) {
-				this.startAnimation()
-			} else {
-				this.oldIndex = -1
-				this.sliderPositionX = 0
-				this.selectedElementWidth = 0
-			}
-		},
-		startAnimation() {
-			const el = this.$refs.linkElements[this.activeIndex].$el
-
-			this.sliderPositionX = el.offsetLeft
-			this.sliderPositionY = el.offsetTop + el.offsetHeight
-			this.selectedElementWidth = el.offsetWidth
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.navigation {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	grid-gap: 1rem;
-	flex-wrap: wrap;
-	position: relative;
-
-	.nav-link {
-		text-transform: capitalize;
-		font-weight: var(--font-weight-bold);
-		color: var(--color-base);
-		position: relative;
-
-		&:hover {
-			color: var(--color-base);
-
-			&::after {
-				opacity: 0.4;
-			}
-		}
-
-		&:active::after {
-			opacity: 0.2;
-		}
-
-		&.router-link-exact-active {
-			color: var(--color-base);
-
-			&::after {
-				opacity: 1;
-			}
-		}
-	}
-
-	&.use-animation {
-		.nav-link {
-			&.is-active::after {
-				opacity: 0;
-			}
-		}
-	}
-
-	.nav-indicator {
-		position: absolute;
-		height: 0.25rem;
-		bottom: -5px;
-		left: 0;
-		width: 3rem;
-		transition: all ease-in-out 0.2s;
-		border-radius: var(--radius-max);
-		background-color: var(--color-brand);
-
-		@media (prefers-reduced-motion) {
-			transition: none !important;
-		}
-	}
-}
-</style>

packages/ui/src/components/nav/NavStack.vue

@@ -1,22 +0,0 @@
-<template>
-	<div class="omorphia__navstack">
-		<slot />
-	</div>
-</template>
-
-<style lang="scss" scoped>
-.omorphia__navstack {
-	display: flex;
-	flex-direction: column;
-
-	:deep(.btn) {
-		position: relative;
-		width: 100%;
-
-		&.selected {
-			background-color: var(--color-button-bg);
-			font-weight: bold;
-		}
-	}
-}
-</style>

packages/ui/src/components/nav/index.ts

@@ -0,0 +1,3 @@
+export { default as Breadcrumbs } from './Breadcrumbs.vue'
+export { default as NotificationPanel } from './NotificationPanel.vue'
+export { default as PagewideBanner } from './PagewideBanner.vue'