add timeline front-end

Author: ildyria

resources/js/components/gallery/albumModule/AlbumThumbPanel.vue

@@ -1,5 +1,5 @@
 <template>
-	<Panel v-if="props.isTimeline === false" :header="$t(props.header)" :toggleable="!isAlone" :pt:header:class="headerClass" class="border-0 w-full">
+	<Panel v-if="isTimeline === false" :header="$t(props.header)" :toggleable="!isAlone" :pt:header:class="headerClass" class="border-0 w-full">
 		<div class="flex flex-wrap flex-row shrink w-full justify-start gap-1 sm:gap-2 md:gap-4 pt-4">
 			<AlbumThumbPanelList
 				:albums="props.albums"
@@ -101,6 +101,8 @@ const albumsTimeLine = computed<SplitData<App.Http.Resources.Models.ThumbAlbumRe
 	),
 );
 
+const isTimeline = computed(() => props.isTimeline && albumsTimeLine.value.length > 0);
+
 const headerClass = computed(() => {
 	return props.isAlone ? "hidden" : "";
 });

resources/js/components/gallery/albumModule/PhotoThumbPanel.vue

@@ -11,15 +11,20 @@
 			:galleryConfig="props.galleryConfig"
 			:selectedPhotos="props.selectedPhotos"
 			:iter="0"
+			:idx="0"
 			@clicked="propagateClicked"
 			@selected="propagateSelected"
 			@contexted="propagateMenuOpen"
 			:isTimeline="isTimeline"
 		/>
 		<template v-else>
-			<Timeline v-if="is_timeline_left_border_visible" :value="photosTimeLine" :pt:eventopposite:class="'hidden'" class="mt-4">
+			<Timeline v-if="isLeftBorderVisible" :value="photosTimeLine" :pt:eventopposite:class="'hidden'" class="mt-4">
 				<template #content="slotProps">
-					<div class="flex flex-wrap flex-row shrink w-full justify-start gap-1 sm:gap-2 md:gap-4 pb-8">
+					<div
+						data-type="timelineBlock"
+						:data-date="slotProps.item.data[0].timeline.timeDate"
+						class="flex flex-wrap flex-row shrink w-full justify-start gap-1 sm:gap-2 md:gap-4 pb-8"
+					>
 						<div class="w-full text-left font-semibold text-muted-color-emphasis text-lg">{{ slotProps.item.header }}</div>
 						<PhotoThumbPanelList
 							:photos="slotProps.item.data"
@@ -28,6 +33,7 @@
 							:galleryConfig="props.galleryConfig"
 							:selectedPhotos="props.selectedPhotos"
 							:iter="slotProps.item.iter"
+							:idx="slotProps.index"
 							:isTimeline="isTimeline"
 							@contexted="propagateMenuOpen"
 							@selected="propagateSelected"
@@ -37,8 +43,12 @@
 				</template>
 			</Timeline>
 			<div v-else>
-				<template v-for="photoTimeline in photosTimeLine">
-					<div class="flex flex-wrap flex-row shrink w-full justify-start gap-1 sm:gap-2 md:gap-4 pb-8">
+				<template v-for="(photoTimeline, idx) in photosTimeLine">
+					<div
+						data-type="timelineBlock"
+						:data-date="photoTimeline.data[0].timeline?.time_date"
+						class="flex flex-wrap flex-row shrink w-full justify-start gap-1 sm:gap-2 md:gap-4 pb-8"
+					>
 						<div class="w-full text-left font-semibold text-muted-color-emphasis text-lg">{{ photoTimeline.header }}</div>
 						<PhotoThumbPanelList
 							:photos="photoTimeline.data"
@@ -47,6 +57,7 @@
 							:galleryConfig="props.galleryConfig"
 							:selectedPhotos="props.selectedPhotos"
 							:iter="photoTimeline.iter"
+							:idx="idx"
 							:isTimeline="isTimeline"
 							@contexted="propagateMenuOpen"
 							@selected="propagateSelected"
@@ -67,6 +78,7 @@ import { SplitData, useSplitter } from "@/composables/album/splitter";
 import Timeline from "primevue/timeline";
 import PhotoThumbPanelList from "./PhotoThumbPanelList.vue";
 import PhotoThumbPanelControl from "./PhotoThumbPanelControl.vue";
+import { isTouchDevice } from "@/utils/keybindings-utils";
 
 const lycheeStore = useLycheeStateStore();
 const { is_timeline_left_border_visible } = storeToRefs(lycheeStore);
@@ -87,7 +99,9 @@ const props = defineProps<{
 }>();
 
 const layout = ref(props.photoLayout);
-const isTimeline = ref(props.isTimeline);
+
+// We do not show the left border on touch devices (mostly phones) due to limited real estate.
+const isLeftBorderVisible = computed(() => is_timeline_left_border_visible && !isTouchDevice());
 
 // bubble up.
 const emits = defineEmits<{
@@ -117,4 +131,6 @@ const photosTimeLine = computed<SplitData<App.Http.Resources.Models.PhotoResourc
 		(p: App.Http.Resources.Models.PhotoResource) => p.timeline?.format ?? "Others",
 	),
 );
+
+const isTimeline = computed(() => props.isTimeline && photosTimeLine.value.length > 1);
 </script>

resources/js/components/gallery/albumModule/PhotoThumbPanelList.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="relative flex flex-wrap flex-row shrink w-full justify-start align-top" :id="'photoListing' + props.iter">
+	<div class="relative flex flex-wrap flex-row shrink w-full justify-start align-top" :id="'photoListing' + props.idx">
 		<template v-for="(photo, idx) in props.photos">
 			<PhotoThumb
 				@click="maySelect(idx + iter, $event)"
@@ -30,6 +30,7 @@ const props = defineProps<{
 	galleryConfig: App.Http.Resources.GalleryConfigs.PhotoLayoutConfig;
 	selectedPhotos: string[];
 	iter: number;
+	idx: number;
 }>();
 
 const lycheeStore = useLycheeStateStore();
@@ -57,7 +58,7 @@ const maySelect = (idx: number, e: MouseEvent) => {
 const menuOpen = (idx: number, e: MouseEvent) => emits("contexted", idx, e);
 
 // Layouts stuff
-const { activateLayout } = useLayouts(props.galleryConfig, layout, timelineData, "photoListing" + props.iter);
+const { activateLayout } = useLayouts(props.galleryConfig, layout, timelineData, "photoListing" + props.idx);
 onMounted(() => activateLayout());
 onUpdated(() => activateLayout());
 </script>

resources/js/components/gallery/photoModule/Dock.vue

@@ -18,6 +18,7 @@
 				v-on:click="emits('toggleStar')"
 			/>
 			<DockButton
+				v-if="!isTimeline"
 				pi="image"
 				class="lg:hover:text-primary-500 text-white"
 				v-tooltip.bottom="$t('gallery.photo.actions.set_album_header')"
@@ -47,6 +48,8 @@ import DockButton from "./DockButton.vue";
 import { useLycheeStateStore } from "@/stores/LycheeState";
 import { useTogglablesStateStore } from "@/stores/ModalsState";
 import { storeToRefs } from "pinia";
+import { computed } from "vue";
+import { useRoute } from "vue-router";
 
 const lycheeStore = useLycheeStateStore();
 const togglableStore = useTogglablesStateStore();
@@ -65,4 +68,7 @@ const emits = defineEmits<{
 	toggleMove: [];
 	toggleDelete: [];
 }>();
+
+const route = useRoute();
+const isTimeline = computed(() => (route.name as string).includes("timeline"));
 </script>

resources/js/components/gallery/searchModule/ResultPanel.vue

@@ -24,6 +24,7 @@
 		:album="undefined"
 		:gallery-config="props.layoutConfig"
 		:selected-photos="selectedPhotosIds"
+		@clicked="photoClick"
 		@selected="photoSelect"
 		@contexted="photoMenuOpen"
 		:is-timeline="props.isPhotoTimelineEnabled"
@@ -59,11 +60,13 @@ import { AlbumThumbConfig } from "../albumModule/thumbs/AlbumThumb.vue";
 import ContextMenu from "primevue/contextmenu";
 import Divider from "primevue/divider";
 import Paginator from "primevue/paginator";
+import { useRouter } from "vue-router";
+import { usePhotoRoute } from "@/composables/photo/photoRoute";
 
 const lycheeStore = useLycheeStateStore();
 const { are_nsfw_visible } = storeToRefs(lycheeStore);
 const togglableStore = useTogglablesStateStore();
-const { is_full_screen } = storeToRefs(togglableStore);
+const router = useRouter();
 
 const props = defineProps<{
 	// results
@@ -91,6 +94,12 @@ const emits = defineEmits<{
 	refresh: [];
 }>();
 
+const { photoRoute } = usePhotoRoute(router);
+
+function photoClick(idx: number, e: MouseEvent) {
+	router.push(photoRoute(photos.value[idx].id));
+}
+
 const photos = ref(props.photos);
 const children = ref(props.albums);
 

resources/js/components/gallery/timelineModule/TimelineDates.vue

@@ -0,0 +1,109 @@
+<template>
+	<div
+		:class="{
+			'absolute flex flex-col text-muted-color text-right top-0 h-full overflow-y-scroll no-scrollbar': true,
+			'right-6': !isTouch,
+			'right-2': isTouch,
+			'bg-gradient-to-l from-(--p-surface-0) pt-14 dark:from-(--p-surface-900) text-shadow-sm group pb-24': true,
+		}"
+		@mouseleave="scrollToView"
+	>
+		<div v-for="yearChunk in dates" :key="yearChunk.header" class="">
+			<span
+				:class="{
+					'sticky inline-block top-0 font-semibold z-10 shadow-surface-950 drop-shadow-md text-3xl scale-75 text-muted-color-emphasis': true,
+					'group-hover:scale-100 transition-all duration-150 origin-right': true,
+					'scale-100': currentYear === parseInt(yearChunk.header, 10),
+				}"
+			>
+				{{ yearChunk.header }}
+			</span>
+			<!-- We only apply the hover property for items bellow the current scrolling year,
+			 	this avoids the upper part of the element to scroll up and down and some jerky behaviours.  -->
+			<div :class="{ 'date-wrapper group-hover:grid-rows-[1]': currentYear > parseInt(yearChunk.header, 10) }">
+				<div class="overflow-hidden flex flex-col">
+					<span
+						v-for="monthChunk in yearChunk.data"
+						:key="monthChunk.time_date"
+						:data-date-pointer="monthChunk.time_date"
+						:class="{
+							'cursor-pointer transition-all duration-150 scale-75 ease-in-out origin-right': true,
+							'hover:text-primary-emphasis hover:font-bold hover:scale-100': !isTouch,
+							'scale-110  text-primary-emphasis font-bold': currentDate === monthChunk.time_date,
+						}"
+						@click="emits('load', monthChunk.time_date)"
+						>{{ monthChunk.format }}
+					</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { useSplitter } from "@/composables/album/splitter";
+import { isTouchDevice } from "@/utils/keybindings-utils";
+import { useDebounceFn } from "@vueuse/core";
+import { ref } from "vue";
+import { onMounted } from "vue";
+import { watch } from "vue";
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const props = defineProps<{
+	dates: App.Http.Resources.Models.Utils.TimelineData[];
+}>();
+
+const { spliter } = useSplitter();
+
+const dates = computed(() => {
+	return spliter(
+		props.dates,
+		(d) => d.time_date.split("-")[0],
+		(d) => d.time_date.split("-")[0],
+	);
+});
+
+const currentDate = computed(() => (route.params.date as string | undefined) ?? "");
+const currentYear = computed(() => parseInt(currentDate.value.split("-")[0], 10));
+
+const isTouch = ref(isTouchDevice());
+
+const emits = defineEmits<{
+	load: [date: string];
+}>();
+
+// Scroll magic side
+// Select the current date and center it in the view
+const scrollToView = useDebounceFn(() => {
+	if (!currentDate.value) {
+		return;
+	}
+
+	const el = document.querySelector(`[data-date-pointer="${currentDate.value}"]`);
+	if (el) {
+		el.scrollIntoView({ behavior: "smooth", block: "center" });
+	}
+}, 100);
+
+// If the date change, we update!
+watch(() => route.params.date, scrollToView, { immediate: true });
+
+// Also do that at when loading the component
+onMounted(() =>
+	// But wait! if we do it too early the dom is not rendered and this does not work.
+	// Let's wait 500ms for the rendering, then select the element.
+	setTimeout(scrollToView, 500),
+);
+</script>
+<style>
+.date-wrapper {
+	display: grid;
+	grid-template-rows: 0fr;
+	transition: grid-template-rows 0.25s ease-out;
+
+	&:is(:where(.group):hover *) {
+		grid-template-rows: 1fr;
+	}
+}
+</style>

resources/js/components/headers/AlbumHeader.vue

@@ -13,7 +13,7 @@
 		<template #end>
 			<router-link
 				:to="{ name: 'favourites' }"
-				v-if="(favourites.photos?.length ?? 0) > 0"
+				v-if="is_favourite_enabled && (favourites.photos?.length ?? 0) > 0"
 				class="hidden sm:block"
 				v-tooltip.bottom="'Favourites'"
 			>
@@ -80,7 +80,7 @@ const lycheeStore = useLycheeStateStore();
 lycheeStore.init();
 const favourites = useFavouriteStore();
 
-const { dropbox_api_key } = storeToRefs(lycheeStore);
+const { dropbox_api_key, is_favourite_enabled } = storeToRefs(lycheeStore);
 const { is_album_edit_open } = storeToRefs(togglableStore);
 
 const { toggleCreateAlbum, is_import_from_link_open, toggleImportFromLink, is_import_from_dropbox_open, toggleImportFromDropbox, toggleUpload } =

resources/js/components/headers/AlbumsHeader.vue

@@ -124,7 +124,7 @@ const lycheeStore = useLycheeStateStore();
 const togglableStore = useTogglablesStateStore();
 const favourites = useFavouriteStore();
 
-const { dropbox_api_key } = storeToRefs(lycheeStore);
+const { dropbox_api_key, is_favourite_enabled } = storeToRefs(lycheeStore);
 const { is_login_open, is_upload_visible, is_create_album_visible, is_create_tag_album_visible } = storeToRefs(togglableStore);
 
 const router = useRouter();
@@ -222,7 +222,13 @@ const menu = computed(() =>
 			to: { name: "favourites" },
 			type: "link",
 			icon: "pi pi-heart",
-			if: (favourites.photos?.length ?? 0) > 0,
+			if: is_favourite_enabled.value && (favourites.photos?.length ?? 0) > 0,
+		},
+		{
+			to: { name: "timeline" },
+			type: "link",
+			icon: "pi pi-clock",
+			if: lycheeStore.is_favourite_enabled,
 		},
 		{
 			icon: "pi pi-search",