implement SkDateSeparatedList

2 files changed, 57 insertions, 2 deletions

diff --git a/packages/frontend/src/components/SkDateSeparatedList.vue b/packages/frontend/src/components/SkDateSeparatedList.vue
new file mode 100644
index 0000000000..8c62347c0c
--- /dev/null
+++ b/packages/frontend/src/components/SkDateSeparatedList.vue
@@ -0,0 +1,55 @@
+<!--
+SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps">
+	<template v-for="item in timeline" :key="item.id">
+		<slot v-if="item.type === 'item'" :id="item.id" :item="item.data"></slot>
+		<slot v-else-if="item.type === 'date'" :id="item.id" :prev="item.prev" :prevText="item.prevText" :next="item.next" :nextText="item.nextText" name="date">
+			<div :class="$style.dateDivider">
+				<span><i class="ti ti-chevron-up"></i> {{ item.nextText }}</span>
+				<span :class="$style.dateSeparator"></span>
+				<span>{{ item.prevText }} <i class="ti ti-chevron-down"></i></span>
+			</div>
+		</slot>
+	</template>
+</div>
+</template>
+
+<script setup lang="ts" generic="T extends { id: string; createdAt: string; }">
+import { computed } from 'vue';
+import { makeDateSeparatedTimelineComputedRef } from '@/utility/timeline-date-separate';
+
+const props = defineProps<{
+	items: T[],
+}>();
+
+const itemsRef = computed(() => props.items);
+const timeline = makeDateSeparatedTimelineComputedRef(itemsRef);
+</script>
+
+<style module lang="scss">
+// From room.vue
+.dateDivider {
+	display: flex;
+	font-size: 85%;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5em;
+	opacity: 0.75;
+	border: solid 0.5px var(--MI_THEME-divider);
+	border-radius: 999px;
+	width: fit-content;
+	padding: 0.5em 1em;
+	margin: 0 auto;
+}
+
+// From room.vue
+.dateSeparator {
+	height: 1em;
+	width: 1px;
+	background: var(--MI_THEME-divider);
+}
+</style>
diff --git a/packages/frontend/src/utility/timeline-date-separate.ts b/packages/frontend/src/utility/timeline-date-separate.ts
index e1bc9790b9..ef946b11d6 100644
--- a/packages/frontend/src/utility/timeline-date-separate.ts
+++ b/packages/frontend/src/utility/timeline-date-separate.ts
@@ -4,7 +4,7 @@
  */
 
 import { computed } from 'vue';
-import type { Ref } from 'vue';
+import type { Ref, ComputedRef } from 'vue';
 
 export function getDateText(dateInstance: Date) {
 	const date = dateInstance.getDate();
@@ -25,7 +25,7 @@ export type DateSeparetedTimelineItem<T> = {
 	nextText: string;
 };
 
-export function makeDateSeparatedTimelineComputedRef<T extends { id: string; createdAt: string; }>(items: Ref<T[]>) {
+export function makeDateSeparatedTimelineComputedRef<T extends { id: string; createdAt: string; }>(items: Ref<T[]> | ComputedRef<T[]>) {
 	return computed<DateSeparetedTimelineItem<T>[]>(() => {
 		const tl: DateSeparetedTimelineItem<T>[] = [];
 		for (let i = 0; i < items.value.length; i++) {