feat(landingPage): List recent pages on landing page

Signed-off-by: Jonas <[email protected]>

src/components/Page/LandingPageWidgets.vue

@@ -1,18 +1,21 @@
 <template>
 	<div class="landing-page-widgets">
+		<RecentPagesWidget />
 		<MembersWidget v-if="!isPublic" />
 	</div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import MembersWidget from './LandingPageWidgets/MembersWidget.vue'
+import RecentPagesWidget from './LandingPageWidgets/RecentPagesWidget.vue'
 
 export default {
 	name: 'LandingPageWidgets',
 
 	components: {
 		MembersWidget,
+		RecentPagesWidget,
 	},
 
 	computed: {

src/components/Page/LandingPageWidgets/MembersWidget.vue

@@ -122,5 +122,6 @@ export default {
 	display: flex;
 	flex-direction: row;
 	gap: 12px;
+	margin-top: 12px;
 }
 </style>

src/components/Page/LandingPageWidgets/RecentPageTile.vue

@@ -0,0 +1,98 @@
+<template>
+	<router-link :to="pagePath(page)" class="recent-page-tile">
+		<div class="recent-page-tile__rectangle">
+			<template v-if="isTemplate">
+				<PageTemplateIcon :size="36" fill-color="var(--color-background-darker)" />
+			</template>
+			<template v-else-if="page.emoji">
+				{{ page.emoji }}
+			</template>
+			<template v-else>
+				<PageIcon :size="36" fill-color="var(--color-background-darker)" />
+			</template>
+		</div>
+		<div class="recent-page-tile__title">
+			{{ page.title }}
+		</div>
+		<LastUserBubble :last-user-id="page.lastUserId"
+			:last-user-display-name="page.lastUserDisplayName"
+			:timestamp="page.timestamp"
+			class="recent-page-tile__last-user-bubble" />
+	</router-link>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import LastUserBubble from '../../LastUserBubble.vue'
+import PageTemplateIcon from '../../Icon/PageTemplateIcon.vue'
+import PageIcon from '../../Icon/PageIcon.vue'
+
+export default {
+	name: 'RecentPageTile',
+	components: {
+		LastUserBubble,
+		PageIcon,
+		PageTemplateIcon,
+	},
+
+	props: {
+		page: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	computed: {
+		...mapGetters([
+			'pagePath',
+		]),
+
+		isTemplate() {
+			return this.page.title === 'Template'
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.recent-page-tile {
+	margin-right: 12px;
+	max-width: 150px;
+	box-sizing: content-box;
+	padding: 12px;
+
+	border-radius: var(--border-radius-rounded);
+
+	&:hover {
+		background-color: var(--color-background-hover);
+	}
+
+	&__rectangle {
+		display: flex;
+		height: 150px;
+		width: 150px;
+
+		font-size: 36px;
+		align-items: center;
+		align-content: center;
+		justify-content: center;
+		background-color: var(--color-primary-element-light);
+		border-radius: var(--border-radius-rounded);
+	}
+
+	&__title {
+		margin-top: 12px;
+		font-size: 20px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&__last-user-bubble {
+		margin-top: 8px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+</style>

src/components/Page/LandingPageWidgets/RecentPagesWidget.vue

@@ -0,0 +1,124 @@
+<template>
+	<div class="recent-pages-widget">
+		<WidgetHeading :title="t('collectives', 'Recent pages')" />
+		<div ref="pageslider" class="recent-pages-widget-pages">
+			<button ref="buttonslideleft"
+				class="button-slide button-slide__left hidden"
+				:aria-label="t('collectives', 'Scroll recent pages to the left')"
+				@click="slideLeft"
+				@keypress.enter.prevent="slideLeft">
+				<ChevronLeftButton :size="44" />
+			</button>
+			<RecentPageTile v-for="page in trimmedRecentPages"
+				:key="page.id"
+				:page="page" />
+			<button ref="buttonslideright"
+				class="button-slide button-slide__right"
+				:aria-label="t('collectives', 'Scroll recent pages to the left')"
+				@click="slideRight"
+				@keypress.enter.prevent="slideRight">
+				<ChevronRightButton :size="44" />
+			</button>
+		</div>
+	</div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ChevronLeftButton from 'vue-material-design-icons/ChevronLeft.vue'
+import ChevronRightButton from 'vue-material-design-icons/ChevronRight.vue'
+import RecentPageTile from './RecentPageTile.vue'
+import WidgetHeading from './WidgetHeading.vue'
+
+const SLIDE_OFFSET = 198
+
+export default {
+	name: 'RecentPagesWidget',
+
+	components: {
+		ChevronLeftButton,
+		ChevronRightButton,
+		RecentPageTile,
+		WidgetHeading,
+	},
+
+	computed: {
+		...mapGetters([
+			'recentPages',
+		]),
+
+		trimmedRecentPages() {
+			return this.recentPages
+				.slice(0, 10)
+		},
+	},
+
+	methods: {
+		updateButtons() {
+			const pagesliderEl = this.$refs.pageslider
+			if (pagesliderEl.scrollLeft <= 0) {
+				this.$refs.buttonslideleft.classList.add('hidden')
+			} else {
+				this.$refs.buttonslideleft.classList.remove('hidden')
+			}
+
+			console.debug('pageslider', this.$refs.pageslider)
+			if (pagesliderEl.scrollLeft >= pagesliderEl.scrollLeftMax) {
+				this.$refs.buttonslideright.classList.add('hidden')
+			} else {
+				this.$refs.buttonslideright.classList.remove('hidden')
+			}
+		},
+
+		slideLeft() {
+			this.$refs.pageslider.scrollLeft -= (SLIDE_OFFSET)
+			this.updateButtons()
+		},
+
+		slideRight() {
+			this.$refs.pageslider.scrollLeft += (SLIDE_OFFSET)
+			this.updateButtons()
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.recent-pages-widget-pages {
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	gap: 12px;
+	padding-top: 12px;
+
+	max-width: 670px;
+	overflow-x: auto;
+	scrollbar-width: none;
+}
+
+.button-slide {
+	position: sticky;
+	display: flex;
+	top: 0;
+	padding: 0;
+	border: 0;
+	border-radius: 0;
+	z-index: 2;
+
+	&__left {
+		left: 0;
+		padding-right: 48px;
+		background: linear-gradient(to left, rgba(0, 0, 0, 0), var(--color-main-background));
+	}
+
+	&__right {
+		right: 0;
+		padding-left: 48px;
+		background: linear-gradient(to right, rgba(0, 0, 0, 0), var(--color-main-background));
+	}
+
+	&.hidden {
+		display: none;
+	}
+}
+</style>