From 6b346351f6b417af84b8483458ddea62a070a610 Mon Sep 17 00:00:00 2001
From: ildyria <beviguier@gmail.com>
Date: Wed, 13 Nov 2024 12:52:05 +0100
Subject: [PATCH 1/2] support timeline in albums and album

---
 .../Http/Requests/HasTimelineAlbum.php        |  13 ++
 .../Http/Requests/HasTimelinePhoto.php        |  13 ++
 .../Http/Requests/RequestAttribute.php        |   2 +
 app/Enum/TimelineAlbumGranularity.php         |  15 +++
 app/Enum/TimelinePhotoGranularity.php         |  16 +++
 .../Controllers/Gallery/AlbumController.php   |   4 +
 .../Requests/Album/UpdateAlbumRequest.php     |  16 ++-
 .../Requests/Album/UpdateTagAlbumRequest.php  |   9 +-
 .../Requests/Traits/HasTimelineAlbumTrait.php |  18 +++
 .../Requests/Traits/HasTimelinePhotoTrait.php |  18 +++
 .../Collections/RootAlbumResource.php         |   7 ++
 .../Editable/EditableBaseAlbumResource.php    |   7 ++
 .../Resources/GalleryConfigs/AlbumConfig.php  |  25 ++++
 .../Resources/GalleryConfigs/InitConfig.php   |   6 +
 .../Resources/GalleryConfigs/RootConfig.php   |  21 +++-
 app/Http/Resources/Models/AlbumResource.php   |  21 +++-
 app/Http/Resources/Models/PhotoResource.php   |  17 +++
 .../Resources/Models/SmartAlbumResource.php   |  11 ++
 .../Resources/Models/TagAlbumResource.php     |  12 +-
 .../Resources/Models/ThumbAlbumResource.php   |  36 +++++-
 .../Resources/Models/Utils/TimelineData.php   | 114 ++++++++++++++++++
 .../Traits/HasPrepPhotoCollection.php         |   4 -
 app/Http/Resources/Traits/HasTimelineData.php |  32 +++++
 app/Models/Album.php                          |  64 +++++++---
 app/Models/BaseAlbumImpl.php                  |  46 +++++++
 app/Models/Extensions/BaseAlbum.php           |   2 +
 app/Rules/EnumRequireSupportRule.php          |  78 ++++++++++++
 .../forms/album/AlbumProperties.vue           |  83 ++++++++++++-
 .../js/components/gallery/AlbumThumbPanel.vue |  59 ++++++++-
 .../js/components/gallery/PhotoThumbPanel.vue |  43 ++++++-
 .../gallery/PhotoThumbPanelList.vue           |   2 +-
 resources/js/config/constants.ts              |  29 +++++
 resources/js/layouts/PhotoLayout.ts           |  11 +-
 resources/js/layouts/useJustify.ts            |  15 ++-
 resources/js/lychee.d.ts                      |  16 +++
 resources/js/services/album-service.ts        |   3 +
 resources/js/stores/LycheeState.ts            |   5 +
 resources/js/style/preset.ts                  |  20 +++
 resources/js/views/gallery-panels/Album.vue   |   2 +
 resources/js/views/gallery-panels/Albums.vue  |  52 +++-----
 resources/js/views/gallery-panels/Search.vue  |   5 +
 tests/Feature_v2/Album/AlbumUpdateTest.php    |   9 ++
 42 files changed, 901 insertions(+), 80 deletions(-)
 create mode 100644 app/Contracts/Http/Requests/HasTimelineAlbum.php
 create mode 100644 app/Contracts/Http/Requests/HasTimelinePhoto.php
 create mode 100644 app/Enum/TimelineAlbumGranularity.php
 create mode 100644 app/Enum/TimelinePhotoGranularity.php
 create mode 100644 app/Http/Requests/Traits/HasTimelineAlbumTrait.php
 create mode 100644 app/Http/Requests/Traits/HasTimelinePhotoTrait.php
 create mode 100644 app/Http/Resources/Models/Utils/TimelineData.php
 create mode 100644 app/Http/Resources/Traits/HasTimelineData.php
 create mode 100644 app/Rules/EnumRequireSupportRule.php

diff --git a/app/Contracts/Http/Requests/HasTimelineAlbum.php b/app/Contracts/Http/Requests/HasTimelineAlbum.php
new file mode 100644
index 00000000000..4bdaef3f9bd
--- /dev/null
+++ b/app/Contracts/Http/Requests/HasTimelineAlbum.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Contracts\Http\Requests;
+
+use App\Enum\TimelineAlbumGranularity;
+
+interface HasTimelineAlbum
+{
+	/**
+	 * @return TimelineAlbumGranularity|null
+	 */
+	public function album_timeline(): ?TimelineAlbumGranularity;
+}
diff --git a/app/Contracts/Http/Requests/HasTimelinePhoto.php b/app/Contracts/Http/Requests/HasTimelinePhoto.php
new file mode 100644
index 00000000000..f6eb28a09a2
--- /dev/null
+++ b/app/Contracts/Http/Requests/HasTimelinePhoto.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Contracts\Http\Requests;
+
+use App\Enum\TimelinePhotoGranularity;
+
+interface HasTimelinePhoto
+{
+	/**
+	 * @return TimelinePhotoGranularity|null
+	 */
+	public function photo_timeline(): ?TimelinePhotoGranularity;
+}
diff --git a/app/Contracts/Http/Requests/RequestAttribute.php b/app/Contracts/Http/Requests/RequestAttribute.php
index 88a6c353509..d8edab52231 100644
--- a/app/Contracts/Http/Requests/RequestAttribute.php
+++ b/app/Contracts/Http/Requests/RequestAttribute.php
@@ -47,6 +47,8 @@ class RequestAttribute
 	public const ALBUM_SORTING_COLUMN_ATTRIBUTE = 'album_sorting_column';
 	public const ALBUM_SORTING_ORDER_ATTRIBUTE = 'album_sorting_order';
 	public const ALBUM_PHOTO_LAYOUT = 'photo_layout';
+	public const ALBUM_TIMELINE_ALBUM = 'album_timeline';
+	public const ALBUM_TIMELINE_PHOTO = 'photo_timeline';
 
 	public const PERMISSION_ID = 'perm_id';
 	public const IS_COMPACT_ATTRIBUTE = 'is_compact';
diff --git a/app/Enum/TimelineAlbumGranularity.php b/app/Enum/TimelineAlbumGranularity.php
new file mode 100644
index 00000000000..a89dc6b935a
--- /dev/null
+++ b/app/Enum/TimelineAlbumGranularity.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Enum;
+
+/**
+ * Defines the possible granularities for album timelines.
+ */
+enum TimelineAlbumGranularity: string
+{
+	case DEFAULT = 'default';
+	case DISABLED = 'disabled';
+	case YEAR = 'year';
+	case MONTH = 'month';
+	case DAY = 'day';
+}
diff --git a/app/Enum/TimelinePhotoGranularity.php b/app/Enum/TimelinePhotoGranularity.php
new file mode 100644
index 00000000000..6ddc63ad857
--- /dev/null
+++ b/app/Enum/TimelinePhotoGranularity.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Enum;
+
+/**
+ * Defines the possible granularities for photo timelines.
+ */
+enum TimelinePhotoGranularity: string
+{
+	case DEFAULT = 'default';
+	case DISABLED = 'disabled';
+	case YEAR = 'year';
+	case MONTH = 'month';
+	case DAY = 'day';
+	case HOUR = 'hour';
+}
diff --git a/app/Http/Controllers/Gallery/AlbumController.php b/app/Http/Controllers/Gallery/AlbumController.php
index ad52f7bcab2..0f94f404982 100644
--- a/app/Http/Controllers/Gallery/AlbumController.php
+++ b/app/Http/Controllers/Gallery/AlbumController.php
@@ -112,6 +112,9 @@ public function updateAlbum(UpdateAlbumRequest $request, SetHeader $setHeader):
 		$album->album_sorting = $request->albumSortingCriterion();
 		$album->photo_layout = $request->photoLayout();
 
+		$album->album_timeline = $request->album_timeline();
+		$album->photo_timeline = $request->photo_timeline();
+
 		$album = $setHeader->do(
 			album: $album,
 			is_compact: $request->is_compact(),
@@ -133,6 +136,7 @@ public function updateTagAlbum(UpdateTagAlbumRequest $request): EditableBaseAlbu
 		$album->copyright = $request->copyright();
 		$album->photo_sorting = $request->photoSortingCriterion();
 		$album->photo_layout = $request->photoLayout();
+		$album->photo_timeline = $request->photo_timeline();
 		$album->save();
 
 		return EditableBaseAlbumResource::fromModel($album);
diff --git a/app/Http/Requests/Album/UpdateAlbumRequest.php b/app/Http/Requests/Album/UpdateAlbumRequest.php
index 1a559356c2d..eda155e4968 100644
--- a/app/Http/Requests/Album/UpdateAlbumRequest.php
+++ b/app/Http/Requests/Album/UpdateAlbumRequest.php
@@ -11,6 +11,8 @@
 use App\Contracts\Http\Requests\HasPhoto;
 use App\Contracts\Http\Requests\HasPhotoLayout;
 use App\Contracts\Http\Requests\HasPhotoSortingCriterion;
+use App\Contracts\Http\Requests\HasTimelineAlbum;
+use App\Contracts\Http\Requests\HasTimelinePhoto;
 use App\Contracts\Http\Requests\HasTitle;
 use App\Contracts\Http\Requests\RequestAttribute;
 use App\Contracts\Models\AbstractAlbum;
@@ -22,6 +24,8 @@
 use App\Enum\LicenseType;
 use App\Enum\OrderSortingType;
 use App\Enum\PhotoLayoutType;
+use App\Enum\TimelineAlbumGranularity;
+use App\Enum\TimelinePhotoGranularity;
 use App\Http\Requests\BaseApiRequest;
 use App\Http\Requests\Traits\HasAlbumSortingCriterionTrait;
 use App\Http\Requests\Traits\HasAlbumTrait;
@@ -33,19 +37,22 @@
 use App\Http\Requests\Traits\HasPhotoLayoutTrait;
 use App\Http\Requests\Traits\HasPhotoSortingCriterionTrait;
 use App\Http\Requests\Traits\HasPhotoTrait;
+use App\Http\Requests\Traits\HasTimelineAlbumTrait;
+use App\Http\Requests\Traits\HasTimelinePhotoTrait;
 use App\Http\Requests\Traits\HasTitleTrait;
 use App\Models\Album;
 use App\Models\Photo;
 use App\Policies\AlbumPolicy;
 use App\Rules\CopyrightRule;
 use App\Rules\DescriptionRule;
+use App\Rules\EnumRequireSupportRule;
 use App\Rules\RandomIDRule;
 use App\Rules\TitleRule;
 use Illuminate\Support\Facades\Gate;
 use Illuminate\Validation\Rules\Enum;
 use Illuminate\Validation\ValidationException;
 
-class UpdateAlbumRequest extends BaseApiRequest implements HasAlbum, HasTitle, HasDescription, HasLicense, HasPhotoSortingCriterion, HasAlbumSortingCriterion, HasCopyright, HasPhoto, HasCompactBoolean, HasPhotoLayout
+class UpdateAlbumRequest extends BaseApiRequest implements HasAlbum, HasTitle, HasDescription, HasLicense, HasPhotoSortingCriterion, HasAlbumSortingCriterion, HasCopyright, HasPhoto, HasCompactBoolean, HasPhotoLayout, HasTimelineAlbum, HasTimelinePhoto
 {
 	use HasAlbumTrait;
 	use HasLicenseTrait;
@@ -58,6 +65,8 @@ class UpdateAlbumRequest extends BaseApiRequest implements HasAlbum, HasTitle, H
 	use HasAlbumSortingCriterionTrait;
 	use HasCopyrightTrait;
 	use HasPhotoLayoutTrait;
+	use HasTimelineAlbumTrait;
+	use HasTimelinePhotoTrait;
 
 	public function authorize(): bool
 	{
@@ -92,6 +101,8 @@ public function rules(): array
 			RequestAttribute::COPYRIGHT_ATTRIBUTE => ['present', 'nullable', new CopyrightRule()],
 			RequestAttribute::IS_COMPACT_ATTRIBUTE => ['required', 'boolean'],
 			RequestAttribute::HEADER_ID_ATTRIBUTE => ['present', new RandomIDRule(true)],
+			RequestAttribute::ALBUM_TIMELINE_ALBUM => ['present', 'nullable', new Enum(TimelineAlbumGranularity::class), new EnumRequireSupportRule(TimelinePhotoGranularity::class, [TimelinePhotoGranularity::DEFAULT, TimelinePhotoGranularity::DISABLED], $this->verify)],
+			RequestAttribute::ALBUM_TIMELINE_PHOTO => ['present', 'nullable', new Enum(TimelinePhotoGranularity::class), new EnumRequireSupportRule(TimelinePhotoGranularity::class, [TimelinePhotoGranularity::DEFAULT, TimelinePhotoGranularity::DISABLED], $this->verify)],
 		];
 	}
 
@@ -129,6 +140,9 @@ protected function processValidatedValues(array $values, array $files): void
 
 		$this->aspectRatio = AspectRatioType::tryFrom($values[RequestAttribute::ALBUM_ASPECT_RATIO_ATTRIBUTE]);
 		$this->photoLayout = PhotoLayoutType::tryFrom($values[RequestAttribute::ALBUM_PHOTO_LAYOUT]);
+		$this->album_timeline = TimelineAlbumGranularity::tryFrom($values[RequestAttribute::ALBUM_TIMELINE_ALBUM]);
+		$this->photo_timeline = TimelinePhotoGranularity::tryFrom($values[RequestAttribute::ALBUM_TIMELINE_PHOTO]);
+
 		$this->copyright = $values[RequestAttribute::COPYRIGHT_ATTRIBUTE];
 
 		$this->is_compact = static::toBoolean($values[RequestAttribute::IS_COMPACT_ATTRIBUTE]);
diff --git a/app/Http/Requests/Album/UpdateTagAlbumRequest.php b/app/Http/Requests/Album/UpdateTagAlbumRequest.php
index 99a07ca451d..7bcf6550092 100644
--- a/app/Http/Requests/Album/UpdateTagAlbumRequest.php
+++ b/app/Http/Requests/Album/UpdateTagAlbumRequest.php
@@ -8,12 +8,14 @@
 use App\Contracts\Http\Requests\HasPhotoSortingCriterion;
 use App\Contracts\Http\Requests\HasTagAlbum;
 use App\Contracts\Http\Requests\HasTags;
+use App\Contracts\Http\Requests\HasTimelinePhoto;
 use App\Contracts\Http\Requests\HasTitle;
 use App\Contracts\Http\Requests\RequestAttribute;
 use App\DTO\PhotoSortingCriterion;
 use App\Enum\ColumnSortingPhotoType;
 use App\Enum\OrderSortingType;
 use App\Enum\PhotoLayoutType;
+use App\Enum\TimelinePhotoGranularity;
 use App\Http\Requests\BaseApiRequest;
 use App\Http\Requests\Traits\Authorize\AuthorizeCanEditAlbumTrait;
 use App\Http\Requests\Traits\HasCopyrightTrait;
@@ -22,16 +24,18 @@
 use App\Http\Requests\Traits\HasPhotoSortingCriterionTrait;
 use App\Http\Requests\Traits\HasTagAlbumTrait;
 use App\Http\Requests\Traits\HasTagsTrait;
+use App\Http\Requests\Traits\HasTimelinePhotoTrait;
 use App\Http\Requests\Traits\HasTitleTrait;
 use App\Models\TagAlbum;
 use App\Rules\CopyrightRule;
 use App\Rules\DescriptionRule;
+use App\Rules\EnumRequireSupportRule;
 use App\Rules\RandomIDRule;
 use App\Rules\TitleRule;
 use Illuminate\Validation\Rules\Enum;
 use Illuminate\Validation\ValidationException;
 
-class UpdateTagAlbumRequest extends BaseApiRequest implements HasTagAlbum, HasTitle, HasDescription, HasPhotoSortingCriterion, HasCopyright, HasTags, HasPhotoLayout
+class UpdateTagAlbumRequest extends BaseApiRequest implements HasTagAlbum, HasTitle, HasDescription, HasPhotoSortingCriterion, HasCopyright, HasTags, HasPhotoLayout, HasTimelinePhoto
 {
 	use HasTagAlbumTrait;
 	use HasTitleTrait;
@@ -40,6 +44,7 @@ class UpdateTagAlbumRequest extends BaseApiRequest implements HasTagAlbum, HasTi
 	use HasCopyrightTrait;
 	use HasTagsTrait;
 	use HasPhotoLayoutTrait;
+	use HasTimelinePhotoTrait;
 	use AuthorizeCanEditAlbumTrait;
 
 	/**
@@ -60,6 +65,7 @@ public function rules(): array
 			RequestAttribute::TAGS_ATTRIBUTE . '.*' => 'required|string|min:1',
 			RequestAttribute::COPYRIGHT_ATTRIBUTE => ['present', 'nullable', new CopyrightRule()],
 			RequestAttribute::ALBUM_PHOTO_LAYOUT => ['present', 'nullable', new Enum(PhotoLayoutType::class)],
+			RequestAttribute::ALBUM_TIMELINE_PHOTO => ['present', 'nullable', new Enum(TimelinePhotoGranularity::class), new EnumRequireSupportRule(TimelinePhotoGranularity::class, [TimelinePhotoGranularity::DEFAULT, TimelinePhotoGranularity::DISABLED], $this->verify)],
 		];
 	}
 
@@ -88,6 +94,7 @@ protected function processValidatedValues(array $values, array $files): void
 			new PhotoSortingCriterion($photoColumn->toColumnSortingType(), $photoOrder);
 
 		$this->photoLayout = PhotoLayoutType::tryFrom($values[RequestAttribute::ALBUM_PHOTO_LAYOUT]);
+		$this->photo_timeline = TimelinePhotoGranularity::tryFrom($values[RequestAttribute::ALBUM_TIMELINE_PHOTO]);
 		$this->copyright = $values[RequestAttribute::COPYRIGHT_ATTRIBUTE];
 		$this->tags = $values[RequestAttribute::TAGS_ATTRIBUTE];
 	}
diff --git a/app/Http/Requests/Traits/HasTimelineAlbumTrait.php b/app/Http/Requests/Traits/HasTimelineAlbumTrait.php
new file mode 100644
index 00000000000..cf0bfebc476
--- /dev/null
+++ b/app/Http/Requests/Traits/HasTimelineAlbumTrait.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Http\Requests\Traits;
+
+use App\Enum\TimelineAlbumGranularity;
+
+trait HasTimelineAlbumTrait
+{
+	protected ?TimelineAlbumGranularity $album_timeline = null;
+
+	/**
+	 * @return TimelineAlbumGranularity|null
+	 */
+	public function album_timeline(): ?TimelineAlbumGranularity
+	{
+		return $this->album_timeline;
+	}
+}
diff --git a/app/Http/Requests/Traits/HasTimelinePhotoTrait.php b/app/Http/Requests/Traits/HasTimelinePhotoTrait.php
new file mode 100644
index 00000000000..8ce84246e7f
--- /dev/null
+++ b/app/Http/Requests/Traits/HasTimelinePhotoTrait.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Http\Requests\Traits;
+
+use App\Enum\TimelinePhotoGranularity;
+
+trait HasTimelinePhotoTrait
+{
+	protected ?TimelinePhotoGranularity $photo_timeline = null;
+
+	/**
+	 * @return TimelinePhotoGranularity|null
+	 */
+	public function photo_timeline(): ?TimelinePhotoGranularity
+	{
+		return $this->photo_timeline;
+	}
+}
diff --git a/app/Http/Resources/Collections/RootAlbumResource.php b/app/Http/Resources/Collections/RootAlbumResource.php
index 14499ccaf74..fb877003a70 100644
--- a/app/Http/Resources/Collections/RootAlbumResource.php
+++ b/app/Http/Resources/Collections/RootAlbumResource.php
@@ -3,9 +3,13 @@
 namespace App\Http\Resources\Collections;
 
 use App\DTO\TopAlbumDTO;
+use App\Enum\ColumnSortingType;
+use App\Enum\TimelineAlbumGranularity;
 use App\Http\Resources\GalleryConfigs\RootConfig;
 use App\Http\Resources\Models\ThumbAlbumResource;
+use App\Http\Resources\Models\Utils\TimelineData;
 use App\Http\Resources\Rights\RootAlbumRightsResource;
+use App\Models\Configs;
 use Illuminate\Support\Collection;
 use Spatie\LaravelData\Data;
 use Spatie\TypeScriptTransformer\Attributes\TypeScript;
@@ -54,6 +58,9 @@ public function __construct(
 		$this->smart_albums = $smart_albums;
 		$this->tag_albums = $tag_albums;
 		$this->albums = $albums;
+		$sorting = Configs::getValueAsEnum('sorting_albums_col', ColumnSortingType::class);
+		$album_granularity = Configs::getValueAsEnum('timeline_albums_granularity', TimelineAlbumGranularity::class);
+		$this->albums = TimelineData::setTimeLineDataForAlbums($this->albums, $sorting, $album_granularity);
 		$this->shared_albums = $shared_albums;
 		$this->config = $config;
 		$this->rights = $rights;
diff --git a/app/Http/Resources/Editable/EditableBaseAlbumResource.php b/app/Http/Resources/Editable/EditableBaseAlbumResource.php
index 18c5a563914..8bed48d53e1 100644
--- a/app/Http/Resources/Editable/EditableBaseAlbumResource.php
+++ b/app/Http/Resources/Editable/EditableBaseAlbumResource.php
@@ -7,6 +7,8 @@
 use App\Enum\AspectRatioType;
 use App\Enum\LicenseType;
 use App\Enum\PhotoLayoutType;
+use App\Enum\TimelineAlbumGranularity;
+use App\Enum\TimelinePhotoGranularity;
 use App\Models\Album;
 use App\Models\TagAlbum;
 use Spatie\LaravelData\Data;
@@ -26,6 +28,8 @@ class EditableBaseAlbumResource extends Data
 	public ?PhotoLayoutType $photo_layout;
 	public ?string $header_id;
 	public ?string $cover_id;
+	public ?TimelineAlbumGranularity $album_timeline;
+	public ?TimelinePhotoGranularity $photo_timeline;
 	/** @var string[] */
 	public array $tags;
 	public bool $is_model_album;
@@ -43,6 +47,8 @@ public function __construct(Album|TagAlbum $album)
 		$this->header_id = null;
 		$this->cover_id = null;
 		$this->photo_layout = $album->photo_layout;
+		$this->album_timeline = null;
+		$this->photo_timeline = $album->photo_timeline;
 
 		if ($album instanceof Album) {
 			$this->is_model_album = true;
@@ -51,6 +57,7 @@ public function __construct(Album|TagAlbum $album)
 			$this->header_id = $album->header_id;
 			$this->cover_id = $album->cover_id;
 			$this->aspect_ratio = $album->album_thumb_aspect_ratio;
+			$this->album_timeline = $album->album_timeline;
 		}
 
 		if ($album instanceof TagAlbum) {
diff --git a/app/Http/Resources/GalleryConfigs/AlbumConfig.php b/app/Http/Resources/GalleryConfigs/AlbumConfig.php
index ceb7e6b0d22..3ee452fe13c 100644
--- a/app/Http/Resources/GalleryConfigs/AlbumConfig.php
+++ b/app/Http/Resources/GalleryConfigs/AlbumConfig.php
@@ -6,6 +6,9 @@
 use App\Enum\AspectRatioCSSType;
 use App\Enum\AspectRatioType;
 use App\Enum\PhotoLayoutType;
+use App\Enum\TimelineAlbumGranularity;
+use App\Enum\TimelinePhotoGranularity;
+use App\Http\Resources\Traits\HasTimelineData;
 use App\Models\Album;
 use App\Models\Configs;
 use App\Models\Extensions\BaseAlbum;
@@ -18,6 +21,8 @@
 #[TypeScript()]
 class AlbumConfig extends Data
 {
+	use HasTimelineData;
+
 	public bool $is_base_album;
 	public bool $is_model_album;
 	public bool $is_accessible;
@@ -28,6 +33,8 @@ class AlbumConfig extends Data
 	public bool $is_nsfw_warning_visible;
 	public AspectRatioCSSType $album_thumb_css_aspect_ratio;
 	public PhotoLayoutType $photo_layout;
+	public bool $is_album_timeline_enabled = false;
+	public bool $is_photo_timeline_enabled = false;
 
 	public function __construct(AbstractAlbum $album)
 	{
@@ -53,6 +60,24 @@ public function __construct(AbstractAlbum $album)
 		}
 
 		$this->photo_layout = (($album instanceof BaseAlbum) ? $album->photo_layout : null) ?? Configs::getValueAsEnum('layout', PhotoLayoutType::class);
+
+		// Set default values.
+		$this->is_photo_timeline_enabled = Configs::getValueAsBool('timeline_photos_enabled');
+		$this->is_album_timeline_enabled = Configs::getValueAsBool('timeline_albums_enabled');
+
+		if ($album instanceof Album) {
+			$this->is_album_timeline_enabled = $album->album_timeline !== null || $this->is_album_timeline_enabled;
+			$this->is_album_timeline_enabled = $album->album_timeline !== TimelineAlbumGranularity::DISABLED && $this->is_album_timeline_enabled;
+		}
+
+		if ($album instanceof BaseAlbum) {
+			$this->is_photo_timeline_enabled = $album->photo_timeline !== null || $this->is_photo_timeline_enabled;
+			$this->is_photo_timeline_enabled = $album->photo_timeline !== TimelinePhotoGranularity::DISABLED && $this->is_photo_timeline_enabled;
+		}
+
+		// Masking to require login for timeline or allow it to be public.
+		$this->is_photo_timeline_enabled = $this->is_photo_timeline_enabled && (Configs::getValueAsBool('timeline_photos_public') || Auth::check());
+		$this->is_album_timeline_enabled = $this->is_album_timeline_enabled && (Configs::getValueAsBool('timeline_albums_public') || Auth::check());
 	}
 
 	public function setIsMapAccessible(): void
diff --git a/app/Http/Resources/GalleryConfigs/InitConfig.php b/app/Http/Resources/GalleryConfigs/InitConfig.php
index 19e988e9469..e5d539e1773 100644
--- a/app/Http/Resources/GalleryConfigs/InitConfig.php
+++ b/app/Http/Resources/GalleryConfigs/InitConfig.php
@@ -47,6 +47,9 @@ class InitConfig extends Data
 	// Slideshow setting
 	public int $slideshow_timeout;
 
+	// Timeline settings
+	public bool $is_timeline_left_border_visible;
+
 	// Site title & dropbox key if logged in as admin.
 	public string $title;
 	public string $dropbox_api_key;
@@ -91,6 +94,9 @@ public function __construct()
 		// Slideshow settings
 		$this->slideshow_timeout = Configs::getValueAsInt('slideshow_timeout');
 
+		// Timeline settings
+		$this->is_timeline_left_border_visible = Configs::getValueAsBool('timeline_left_border_enabled');
+
 		// Site title & dropbox key if logged in as admin.
 		$this->title = Configs::getValueAsString('site_title');
 		$this->dropbox_api_key = Auth::user()?->may_administrate === true ? Configs::getValueAsString('dropbox_key') : 'disabled';
diff --git a/app/Http/Resources/GalleryConfigs/RootConfig.php b/app/Http/Resources/GalleryConfigs/RootConfig.php
index 7036e0a05a8..832c4870b78 100644
--- a/app/Http/Resources/GalleryConfigs/RootConfig.php
+++ b/app/Http/Resources/GalleryConfigs/RootConfig.php
@@ -5,6 +5,7 @@
 use App\Contracts\Models\AbstractAlbum;
 use App\Enum\AspectRatioCSSType;
 use App\Enum\AspectRatioType;
+use App\Enum\TimelineAlbumGranularity;
 use App\Factories\AlbumFactory;
 use App\Models\Configs;
 use App\Models\Photo;
@@ -20,6 +21,8 @@ class RootConfig extends Data
 {
 	public bool $is_map_accessible = false;
 	public bool $is_mod_frame_enabled = false;
+	public bool $is_photo_timeline_enabled = false;
+	public bool $is_album_timeline_enabled = false;
 	public bool $is_search_accessible = false;
 	public bool $show_keybinding_help_button = false;
 	#[LiteralTypeScriptType('App.Enum.AspectRatioType')]
@@ -30,15 +33,29 @@ class RootConfig extends Data
 	public bool $back_button_enabled;
 	public string $back_button_text;
 	public string $back_button_url;
+	public TimelineAlbumGranularity $timeline_album_granularity;
 
 	public function __construct()
 	{
+		$is_logged_in = Auth::check();
 		$count_locations = Photo::whereNotNull('latitude')->whereNotNull('longitude')->count() > 0;
 		$map_display = Configs::getValueAsBool('map_display');
-		$public_display = Auth::check() || Configs::getValueAsBool('map_display_public');
+		$public_display = $is_logged_in || Configs::getValueAsBool('map_display_public');
+
 		$this->is_map_accessible = $count_locations && $map_display && $public_display;
 		$this->is_mod_frame_enabled = $this->checkModFrameEnabled();
-		$this->is_search_accessible = Auth::check() || Configs::getValueAsBool('search_public');
+
+		$timeline_photos_enabled = Configs::getValueAsBool('timeline_photos_enabled');
+		$timeline_photos_public = Configs::getValueAsBool('timeline_photos_public');
+		$this->is_photo_timeline_enabled = $timeline_photos_enabled && ($is_logged_in || $timeline_photos_public);
+
+		$timeline_albums_enabled = Configs::getValueAsBool('timeline_albums_enabled');
+		$timeline_albums_public = Configs::getValueAsBool('timeline_albums_public');
+		$this->is_album_timeline_enabled = $timeline_albums_enabled && ($is_logged_in || $timeline_albums_public);
+		$this->timeline_album_granularity = Configs::getValueAsEnum('timeline_albums_granularity', TimelineAlbumGranularity::class);
+
+		$this->is_search_accessible = $is_logged_in || Configs::getValueAsBool('search_public');
+
 		$this->album_thumb_css_aspect_ratio = Configs::getValueAsEnum('default_album_thumb_aspect_ratio', AspectRatioType::class)->css();
 		$this->show_keybinding_help_button = Configs::getValueAsBool('show_keybinding_help_button');
 		$this->login_button_position = Configs::getValueAsString('login_button_position');
diff --git a/app/Http/Resources/Models/AlbumResource.php b/app/Http/Resources/Models/AlbumResource.php
index 6f74665edb2..ec6217ea6d9 100644
--- a/app/Http/Resources/Models/AlbumResource.php
+++ b/app/Http/Resources/Models/AlbumResource.php
@@ -2,13 +2,17 @@
 
 namespace App\Http\Resources\Models;
 
+use App\Enum\ColumnSortingType;
 use App\Http\Resources\Editable\EditableBaseAlbumResource;
 use App\Http\Resources\Models\Utils\AlbumProtectionPolicy;
 use App\Http\Resources\Models\Utils\PreFormattedAlbumData;
+use App\Http\Resources\Models\Utils\TimelineData;
 use App\Http\Resources\Rights\AlbumRightsResource;
 use App\Http\Resources\Traits\HasHeaderUrl;
 use App\Http\Resources\Traits\HasPrepPhotoCollection;
+use App\Http\Resources\Traits\HasTimelineData;
 use App\Models\Album;
+use App\Models\Configs;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Auth;
 use Spatie\LaravelData\Data;
@@ -20,6 +24,7 @@ class AlbumResource extends Data
 {
 	use HasPrepPhotoCollection;
 	use HasHeaderUrl;
+	use HasTimelineData;
 
 	public string $id;
 	public string $title;
@@ -71,7 +76,21 @@ public function __construct(Album $album)
 		$this->has_albums = !$album->isLeaf();
 		$this->albums = $album->relationLoaded('children') ? ThumbAlbumResource::collect($album->children) : null;
 		$this->photos = $album->relationLoaded('photos') ? PhotoResource::collect($album->photos) : null;
-		$this->prepPhotosCollection();
+		if ($this->photos !== null) {
+			// Prep collection with first and last link + which id is next.
+			$this->prepPhotosCollection();
+
+			// setup timeline data
+			$photo_granularity = $this->getPhotoTimeline($album->photo_timeline);
+			$this->photos = TimelineData::setTimeLineDataForPhotos($this->photos, $photo_granularity);
+		}
+
+		if ($this->albums->count() > 0) {
+			// setup timeline data
+			$sorting = $album->album_sorting?->column ?? Configs::getValueAsEnum('sorting_albums_col', ColumnSortingType::class);
+			$album_granularity = $this->getAlbumTimeline($album->album_timeline);
+			$this->albums = TimelineData::setTimeLineDataForAlbums($this->albums, $sorting, $album_granularity);
+		}
 
 		// thumb
 		$this->cover_id = $album->cover_id;
diff --git a/app/Http/Resources/Models/PhotoResource.php b/app/Http/Resources/Models/PhotoResource.php
index 086656b9780..e166db5c669 100644
--- a/app/Http/Resources/Models/PhotoResource.php
+++ b/app/Http/Resources/Models/PhotoResource.php
@@ -5,9 +5,11 @@
 use App\Enum\LicenseType;
 use App\Http\Resources\Models\Utils\PreComputedPhotoData;
 use App\Http\Resources\Models\Utils\PreformattedPhotoData;
+use App\Http\Resources\Models\Utils\TimelineData;
 use App\Http\Resources\Rights\PhotoRightsResource;
 use App\Models\Configs;
 use App\Models\Photo;
+use Illuminate\Support\Carbon;
 use Illuminate\Support\Facades\Auth;
 use Spatie\LaravelData\Data;
 use Spatie\TypeScriptTransformer\Attributes\TypeScript;
@@ -50,6 +52,9 @@ class PhotoResource extends Data
 	public ?string $previous_photo_id;
 	public PreformattedPhotoData $preformatted;
 	public PreComputedPhotoData $precomputed;
+	public ?TimelineData $timeline = null;
+
+	private Carbon $timeline_data_carbon;
 
 	public function __construct(Photo $photo)
 	{
@@ -87,6 +92,8 @@ public function __construct(Photo $photo)
 		$this->previous_photo_id = null;
 		$this->preformatted = new PreformattedPhotoData($photo, $this->size_variants->original);
 		$this->precomputed = new PreComputedPhotoData($photo);
+
+		$this->timeline_data_carbon = $photo->taken_at ?? $photo->created_at;
 	}
 
 	public static function fromModel(Photo $photo): PhotoResource
@@ -99,4 +106,14 @@ private function setLocation(Photo $photo): void
 		$showLocation = Configs::getValueAsBool('location_show') && (Auth::check() || Configs::getValueAsBool('location_show_public'));
 		$this->location = $showLocation ? $photo->location : null;
 	}
+
+	/**
+	 * Accessors to the Carbon instances.
+	 *
+	 * @return Carbon
+	 */
+	public function timeline_date_carbon(): Carbon
+	{
+		return $this->timeline_data_carbon;
+	}
 }
diff --git a/app/Http/Resources/Models/SmartAlbumResource.php b/app/Http/Resources/Models/SmartAlbumResource.php
index e6fd43e7760..2496738434c 100644
--- a/app/Http/Resources/Models/SmartAlbumResource.php
+++ b/app/Http/Resources/Models/SmartAlbumResource.php
@@ -2,11 +2,14 @@
 
 namespace App\Http\Resources\Models;
 
+use App\Enum\TimelinePhotoGranularity;
 use App\Http\Resources\Models\Utils\AlbumProtectionPolicy;
 use App\Http\Resources\Models\Utils\PreFormattedAlbumData;
+use App\Http\Resources\Models\Utils\TimelineData;
 use App\Http\Resources\Rights\AlbumRightsResource;
 use App\Http\Resources\Traits\HasHeaderUrl;
 use App\Http\Resources\Traits\HasPrepPhotoCollection;
+use App\Models\Configs;
 use App\SmartAlbums\BaseSmartAlbum;
 use Illuminate\Support\Collection;
 use Spatie\LaravelData\Data;
@@ -36,6 +39,14 @@ public function __construct(BaseSmartAlbum $smartAlbum)
 		/** @phpstan-ignore-next-line */
 		$this->photos = $smartAlbum->relationLoaded('photos') ? PhotoResource::collect($smartAlbum->getPhotos()) : null;
 		$this->prepPhotosCollection();
+		if ($this->photos !== null) {
+			// Prep collection with first and last link + which id is next.
+			$this->prepPhotosCollection();
+
+			// setup timeline data
+			$photo_granularity = Configs::getValueAsEnum('timeline_photo_granularity', TimelinePhotoGranularity::class);
+			$this->photos = TimelineData::setTimeLineDataForPhotos($this->photos, $photo_granularity);
+		}
 
 		$this->thumb = ThumbResource::fromModel($smartAlbum->thumb);
 		$this->policy = AlbumProtectionPolicy::ofSmartAlbum($smartAlbum);
diff --git a/app/Http/Resources/Models/TagAlbumResource.php b/app/Http/Resources/Models/TagAlbumResource.php
index 451582b9d16..cfe001fd194 100644
--- a/app/Http/Resources/Models/TagAlbumResource.php
+++ b/app/Http/Resources/Models/TagAlbumResource.php
@@ -5,9 +5,11 @@
 use App\Http\Resources\Editable\EditableBaseAlbumResource;
 use App\Http\Resources\Models\Utils\AlbumProtectionPolicy;
 use App\Http\Resources\Models\Utils\PreFormattedAlbumData;
+use App\Http\Resources\Models\Utils\TimelineData;
 use App\Http\Resources\Rights\AlbumRightsResource;
 use App\Http\Resources\Traits\HasHeaderUrl;
 use App\Http\Resources\Traits\HasPrepPhotoCollection;
+use App\Http\Resources\Traits\HasTimelineData;
 use App\Models\TagAlbum;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Auth;
@@ -20,6 +22,7 @@ class TagAlbumResource extends Data
 {
 	use HasPrepPhotoCollection;
 	use HasHeaderUrl;
+	use HasTimelineData;
 
 	public string $id;
 	public string $title;
@@ -55,7 +58,14 @@ public function __construct(TagAlbum $tagAlbum)
 
 		// children
 		$this->photos = $tagAlbum->relationLoaded('photos') ? PhotoResource::collect($tagAlbum->photos) : null;
-		$this->prepPhotosCollection();
+		if ($this->photos !== null) {
+			// Prep collection with first and last link + which id is next.
+			$this->prepPhotosCollection();
+
+			// setup timeline data
+			$photo_granularity = $this->getPhotoTimeline($tagAlbum->photo_timeline);
+			$this->photos = TimelineData::setTimeLineDataForPhotos($this->photos, $photo_granularity);
+		}
 
 		// thumb
 		$this->thumb = ThumbResource::fromModel($tagAlbum->thumb);
diff --git a/app/Http/Resources/Models/ThumbAlbumResource.php b/app/Http/Resources/Models/ThumbAlbumResource.php
index b95eb7a0433..7992852f209 100644
--- a/app/Http/Resources/Models/ThumbAlbumResource.php
+++ b/app/Http/Resources/Models/ThumbAlbumResource.php
@@ -5,12 +5,14 @@
 use App\Contracts\Models\AbstractAlbum;
 use App\Enum\DateOrderingType;
 use App\Http\Resources\Models\Utils\AlbumProtectionPolicy;
+use App\Http\Resources\Models\Utils\TimelineData;
 use App\Http\Resources\Rights\AlbumRightsResource;
 use App\Models\Album;
 use App\Models\Configs;
 use App\Models\Extensions\BaseAlbum;
 use App\Models\TagAlbum;
 use App\SmartAlbums\BaseSmartAlbum;
+use Illuminate\Support\Carbon;
 use Illuminate\Support\Str;
 use Spatie\LaravelData\Data;
 use Spatie\TypeScriptTransformer\Attributes\TypeScript;
@@ -39,7 +41,12 @@ class ThumbAlbumResource extends Data
 	public ?string $formatted_min_max = null;
 	public ?string $owner = null;
 
+	private Carbon $created_at_carbon;
+	private ?Carbon $min_taken_at_carbon = null;
+	private ?Carbon $max_taken_at_carbon = null;
+
 	public AlbumRightsResource $rights;
+	public ?TimelineData $timeline = null;
 
 	public function __construct(AbstractAlbum $data)
 	{
@@ -53,12 +60,15 @@ public function __construct(AbstractAlbum $data)
 			$policy = AlbumProtectionPolicy::ofSmartAlbum($data);
 		} else {
 			/** @var BaseAlbum $data */
-			$this->max_taken_at = $data->max_taken_at?->format($date_format);
-			$this->min_taken_at = $data->min_taken_at?->format($date_format);
+			$this->min_taken_at_carbon = $data->min_taken_at;
+			$this->max_taken_at_carbon = $data->max_taken_at;
+			$this->max_taken_at = $this->max_taken_at_carbon?->format($date_format);
+			$this->min_taken_at = $this->min_taken_at_carbon?->format($date_format);
 
 			$this->formatMinMaxDate();
 
-			$this->created_at = $data->created_at->format($date_format);
+			$this->created_at_carbon = $data->created_at;
+			$this->created_at = $this->created_at_carbon->format($date_format);
 			$policy = AlbumProtectionPolicy::ofBaseAlbum($data);
 			$this->description = Str::limit($data->description, 100);
 			$this->owner = $data->owner->username;
@@ -103,4 +113,24 @@ private function formatMinMaxDate(): void
 			$this->formatted_min_max = $this->min_taken_at . ' - ' . $this->max_taken_at;
 		}
 	}
+
+	/**
+	 * Accessors to the Carbon instances.
+	 *
+	 * @return Carbon
+	 */
+	public function created_at_carbon(): Carbon
+	{
+		return $this->created_at_carbon;
+	}
+
+	public function min_taken_at_carbon(): ?Carbon
+	{
+		return $this->min_taken_at_carbon;
+	}
+
+	public function max_taken_at_carbon(): ?Carbon
+	{
+		return $this->max_taken_at_carbon;
+	}
 }
diff --git a/app/Http/Resources/Models/Utils/TimelineData.php b/app/Http/Resources/Models/Utils/TimelineData.php
new file mode 100644
index 00000000000..066dddc9c8b
--- /dev/null
+++ b/app/Http/Resources/Models/Utils/TimelineData.php
@@ -0,0 +1,114 @@
+<?php
+
+namespace App\Http\Resources\Models\Utils;
+
+use App\Enum\ColumnSortingType;
+use App\Enum\TimelineAlbumGranularity;
+use App\Enum\TimelinePhotoGranularity;
+use App\Exceptions\Internal\LycheeLogicException;
+use App\Http\Resources\Models\PhotoResource;
+use App\Http\Resources\Models\ThumbAlbumResource;
+use App\Models\Configs;
+use Illuminate\Support\Collection;
+use Spatie\LaravelData\Data;
+use Spatie\TypeScriptTransformer\Attributes\TypeScript;
+
+#[TypeScript()]
+class TimelineData extends Data
+{
+	public function __construct(
+		public string $timeDate,
+		public string $format,
+	) {
+	}
+
+	public static function fromPhoto(PhotoResource $photo, TimelinePhotoGranularity $granularity): self
+	{
+		$timeline_date_format_year = Configs::getValueAsString('timeline_photo_date_format_year');
+		$timeline_date_format_month = Configs::getValueAsString('timeline_photo_date_format_month');
+		$timeline_date_format_day = Configs::getValueAsString('timeline_photo_date_format_day');
+		$timeline_photo_date_format_hour = Configs::getValueAsString('timeline_photo_date_format_hour');
+
+		$format = match ($granularity) {
+			TimelinePhotoGranularity::YEAR => $photo->timeline_date_carbon()->format($timeline_date_format_year),
+			TimelinePhotoGranularity::MONTH => $photo->timeline_date_carbon()->format($timeline_date_format_month),
+			TimelinePhotoGranularity::DAY => $photo->timeline_date_carbon()->format($timeline_date_format_day),
+			TimelinePhotoGranularity::HOUR => $photo->timeline_date_carbon()->format($timeline_photo_date_format_hour),
+			TimelinePhotoGranularity::DEFAULT, TimelinePhotoGranularity::DISABLED => throw new LycheeLogicException('DEFAULT is not a valid granularity for photos'),
+		};
+
+		$timeDate = match ($granularity) {
+			TimelinePhotoGranularity::YEAR => $photo->timeline_date_carbon()->format('Y'),
+			TimelinePhotoGranularity::MONTH => $photo->timeline_date_carbon()->format('Y-m'),
+			TimelinePhotoGranularity::DAY => $photo->timeline_date_carbon()->format('Y-m-d'),
+			TimelinePhotoGranularity::HOUR => $photo->timeline_date_carbon()->format('Y-m-d H'),
+			TimelinePhotoGranularity::DEFAULT, TimelinePhotoGranularity::DISABLED => throw new LycheeLogicException('DEFAULT is not a valid granularity for photos'),
+		};
+
+		return new TimelineData(timeDate: $timeDate, format: $format);
+	}
+
+	private static function fromAlbum(ThumbAlbumResource $album, ColumnSortingType $columnSorting, TimelineAlbumGranularity $granularity): ?self
+	{
+		$timeline_date_format_year = Configs::getValueAsString('timeline_album_date_format_year');
+		$timeline_date_format_month = Configs::getValueAsString('timeline_album_date_format_month');
+		$timeline_date_format_day = Configs::getValueAsString('timeline_album_date_format_day');
+		$date = match ($columnSorting) {
+			ColumnSortingType::CREATED_AT => $album->created_at_carbon(),
+			ColumnSortingType::MAX_TAKEN_AT => $album->max_taken_at_carbon(),
+			ColumnSortingType::MIN_TAKEN_AT => $album->min_taken_at_carbon(),
+			default => null,
+		};
+
+		if ($date === null) {
+			return null;
+		}
+
+		$format = match ($granularity) {
+			TimelineAlbumGranularity::YEAR => $date->format($timeline_date_format_year),
+			TimelineAlbumGranularity::MONTH => $date->format($timeline_date_format_month),
+			TimelineAlbumGranularity::DAY => $date->format($timeline_date_format_day),
+			TimelineAlbumGranularity::DEFAULT, TimelineAlbumGranularity::DISABLED => throw new LycheeLogicException('DEFAULT/DISABLED is not a valid granularity for albums'),
+		};
+
+		$timeDate = match ($granularity) {
+			TimelineAlbumGranularity::YEAR => $date->format('Y'),
+			TimelineAlbumGranularity::MONTH => $date->format('Y-m'),
+			TimelineAlbumGranularity::DAY => $date->format('Y-m-d'),
+			TimelineAlbumGranularity::DEFAULT, TimelineAlbumGranularity::DISABLED => throw new LycheeLogicException('DEFAULT/DISABLED is not a valid granularity for albums'),
+		};
+
+		return new TimelineData(timeDate: $timeDate, format: $format);
+	}
+
+	/**
+	 * @param Collection<int,ThumbAlbumResource> $albums
+	 * @param ColumnSortingType                  $columnSorting
+	 * @param TimelineAlbumGranularity           $granularity
+	 *
+	 * @return Collection<int,ThumbAlbumResource>
+	 */
+	public static function setTimeLineDataForAlbums(Collection $albums, ColumnSortingType $columnSorting, TimelineAlbumGranularity $granularity): Collection
+	{
+		return $albums->map(function (ThumbAlbumResource $album) use ($columnSorting, $granularity) {
+			$album->timeline = TimelineData::fromAlbum($album, $columnSorting, $granularity);
+
+			return $album;
+		});
+	}
+
+	/**
+	 * @param Collection<int,PhotoResource> $photos
+	 * @param TimelinePhotoGranularity      $granularity
+	 *
+	 * @return Collection<int,PhotoResource>
+	 */
+	public static function setTimeLineDataForPhotos(Collection $photos, TimelinePhotoGranularity $granularity): Collection
+	{
+		return $photos->map(function (PhotoResource $photo) use ($granularity) {
+			$photo->timeline = TimelineData::fromPhoto($photo, $granularity);
+
+			return $photo;
+		});
+	}
+}
\ No newline at end of file
diff --git a/app/Http/Resources/Traits/HasPrepPhotoCollection.php b/app/Http/Resources/Traits/HasPrepPhotoCollection.php
index 376aab4c7f6..c28ee05bbe3 100644
--- a/app/Http/Resources/Traits/HasPrepPhotoCollection.php
+++ b/app/Http/Resources/Traits/HasPrepPhotoCollection.php
@@ -13,10 +13,6 @@ trait HasPrepPhotoCollection
 {
 	private function prepPhotosCollection(): void
 	{
-		if ($this->photos === null) {
-			return;
-		}
-
 		$previous_photo = null;
 		$this->photos->each(function (PhotoResource &$photo) use (&$previous_photo) {
 			if ($previous_photo !== null) {
diff --git a/app/Http/Resources/Traits/HasTimelineData.php b/app/Http/Resources/Traits/HasTimelineData.php
new file mode 100644
index 00000000000..2d8177105b7
--- /dev/null
+++ b/app/Http/Resources/Traits/HasTimelineData.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Resources\Traits;
+
+use App\Enum\TimelineAlbumGranularity;
+use App\Enum\TimelinePhotoGranularity;
+use App\Models\Configs;
+
+trait HasTimelineData
+{
+	private function getAlbumTimeline(?TimelineAlbumGranularity $candidate): TimelineAlbumGranularity
+	{
+		$default_timeline_album_granularity = Configs::getValueAsEnum('timeline_albums_granularity', TimelineAlbumGranularity::class);
+
+		if ($candidate === TimelineAlbumGranularity::DEFAULT || $candidate === TimelineAlbumGranularity::DISABLED) {
+			return $default_timeline_album_granularity;
+		}
+
+		return $candidate ?? $default_timeline_album_granularity;
+	}
+
+	private function getPhotoTimeline(?TimelinePhotoGranularity $candidate): TimelinePhotoGranularity
+	{
+		$default_timeline_photo_granularity = Configs::getValueAsEnum('timeline_photos_granularity', TimelinePhotoGranularity::class);
+
+		if ($candidate === TimelinePhotoGranularity::DEFAULT || $candidate === TimelinePhotoGranularity::DISABLED) {
+			return $default_timeline_photo_granularity;
+		}
+
+		return $candidate ?? $default_timeline_photo_granularity;
+	}
+}
\ No newline at end of file
diff --git a/app/Models/Album.php b/app/Models/Album.php
index 18d2bddf9d7..269e76fdedb 100644
--- a/app/Models/Album.php
+++ b/app/Models/Album.php
@@ -8,6 +8,7 @@
 use App\Enum\ColumnSortingType;
 use App\Enum\LicenseType;
 use App\Enum\OrderSortingType;
+use App\Enum\TimelineAlbumGranularity;
 use App\Exceptions\ConfigurationKeyMissingException;
 use App\Exceptions\Internal\QueryBuilderException;
 use App\Exceptions\MediaFileOperationException;
@@ -33,25 +34,26 @@
 /**
  * Class Album.
  *
- * @property string                $id
- * @property string|null           $parent_id
- * @property Album|null            $parent
- * @property Collection<int,Album> $children
- * @property int                   $num_children             The number of children.
- * @property Collection<int,Photo> $all_photos
- * @property int                   $num_photos               The number of photos in this album (excluding photos in subalbums).
- * @property LicenseType           $license
- * @property string|null           $cover_id
- * @property Photo|null            $cover
- * @property string|null           $header_id
- * @property Photo|null            $header
- * @property string|null           $track_short_path
- * @property string|null           $track_url
- * @property AspectRatioType|null  $album_thumb_aspect_ratio
- * @property int                   $_lft
- * @property int                   $_rgt
- * @property BaseAlbumImpl         $base_class
- * @property User|null             $owner
+ * @property string                   $id
+ * @property string|null              $parent_id
+ * @property Album|null               $parent
+ * @property Collection<int,Album>    $children
+ * @property int                      $num_children             The number of children.
+ * @property Collection<int,Photo>    $all_photos
+ * @property int                      $num_photos               The number of photos in this album (excluding photos in subalbums).
+ * @property LicenseType              $license
+ * @property string|null              $cover_id
+ * @property Photo|null               $cover
+ * @property string|null              $header_id
+ * @property Photo|null               $header
+ * @property string|null              $track_short_path
+ * @property string|null              $track_url
+ * @property AspectRatioType|null     $album_thumb_aspect_ratio
+ * @property TimelineAlbumGranularity $album_timeline
+ * @property int                      $_lft
+ * @property int                      $_rgt
+ * @property BaseAlbumImpl            $base_class
+ * @property User|null                $owner
  *
  * @method static AlbumBuilder|Album query()                       Begin querying the model.
  * @method static AlbumBuilder|Album with(array|string $relations) Begin querying the model with eager loading.
@@ -148,6 +150,7 @@ class Album extends BaseAlbum implements Node
 	protected $attributes = [
 		'id' => null,
 		'parent_id' => null,
+		'album_timeline' => null,
 		'license' => 'none',
 		'cover_id' => null,
 		'header_id' => null,
@@ -167,6 +170,7 @@ class Album extends BaseAlbum implements Node
 		'num_children' => 'integer',
 		'num_photos' => 'integer',
 		'album_thumb_aspect_ratio' => AspectRatioType::class,
+		'album_timeline' => TimelineAlbumGranularity::class,
 		'_lft' => 'integer',
 		'_rgt' => 'integer',
 	];
@@ -385,6 +389,28 @@ protected function setAlbumThumbAspectRatioAttribute(?AspectRatioType $aspectRat
 		$this->attributes['album_thumb_aspect_ratio'] = $aspectRatio?->value;
 	}
 
+	/**
+	 * Defines accessor for the Album Timeline.
+	 *
+	 * @return TimelineAlbumGranularity|null
+	 */
+	protected function getAlbumTimelineAttribute(): ?TimelineAlbumGranularity
+	{
+		return TimelineAlbumGranularity::tryFrom($this->attributes['album_timeline']);
+	}
+
+	/**
+	 * Defines setter for Album Timeline.
+	 *
+	 * @param TimelineAlbumGranularity|null $album_timeline
+	 *
+	 * @return void
+	 */
+	protected function setAlbumTimelineAttribute(?TimelineAlbumGranularity $album_timeline): void
+	{
+		$this->attributes['album_timeline'] = $album_timeline?->value;
+	}
+
 	/**
 	 * Accessor for the "virtual" attribute {@link Album::$track_url}.
 	 *
diff --git a/app/Models/BaseAlbumImpl.php b/app/Models/BaseAlbumImpl.php
index e81954b43e7..f12714f1703 100644
--- a/app/Models/BaseAlbumImpl.php
+++ b/app/Models/BaseAlbumImpl.php
@@ -9,6 +9,7 @@
 use App\Enum\ColumnSortingType;
 use App\Enum\OrderSortingType;
 use App\Enum\PhotoLayoutType;
+use App\Enum\TimelinePhotoGranularity;
 use App\Models\Builders\BaseAlbumImplBuilder;
 use App\Models\Extensions\HasAttributesPatch;
 use App\Models\Extensions\HasBidirectionalRelationships;
@@ -96,6 +97,7 @@
  * @property string                           $title
  * @property string|null                      $description
  * @property PhotoLayoutType|null             $photo_layout
+ * @property TimelinePhotoGranularity         $photo_timeline
  * @property int                              $owner_id
  * @property User                             $owner
  * @property bool                             $is_nsfw
@@ -284,4 +286,48 @@ protected function setPhotoSortingAttribute(?PhotoSortingCriterion $sorting): vo
 		$this->attributes['sorting_col'] = $sorting?->column->value;
 		$this->attributes['sorting_order'] = $sorting?->order->value;
 	}
+
+	/**
+	 * Defines accessor for the Aspect Ratio.
+	 *
+	 * @return PhotoLayoutType|null
+	 */
+	protected function getPhotoLayoutAttribute(): ?PhotoLayoutType
+	{
+		return PhotoLayoutType::tryFrom($this->attributes['photo_layout']);
+	}
+
+	/**
+	 * Defines setter for Aspect Ratio.
+	 *
+	 * @param PhotoLayoutType|null $aspectRatio
+	 *
+	 * @return void
+	 */
+	protected function setPhotoLayoutAttribute(?PhotoLayoutType $aspectRatio): void
+	{
+		$this->attributes['photo_layout'] = $aspectRatio?->value;
+	}
+
+	/**
+	 * Defines accessor for the Photo Timeline.
+	 *
+	 * @return TimelinePhotoGranularity|null
+	 */
+	protected function getPhotoTimelineAttribute(): ?TimelinePhotoGranularity
+	{
+		return TimelinePhotoGranularity::tryFrom($this->attributes['photo_timeline']);
+	}
+
+	/**
+	 * Defines setter for Photo Timeline.
+	 *
+	 * @param TimelinePhotoGranularity|null $photo_timeline
+	 *
+	 * @return void
+	 */
+	protected function setPhotoTimelineAttribute(?TimelinePhotoGranularity $photo_timeline): void
+	{
+		$this->attributes['photo_timeline'] = $photo_timeline?->value;
+	}
 }
diff --git a/app/Models/Extensions/BaseAlbum.php b/app/Models/Extensions/BaseAlbum.php
index fda81129de8..c2d7bbe3d9c 100644
--- a/app/Models/Extensions/BaseAlbum.php
+++ b/app/Models/Extensions/BaseAlbum.php
@@ -7,6 +7,7 @@
 use App\Contracts\Models\HasRandomID;
 use App\DTO\PhotoSortingCriterion;
 use App\Enum\PhotoLayoutType;
+use App\Enum\TimelinePhotoGranularity;
 use App\Models\AccessPermission;
 use App\Models\BaseAlbumImpl;
 use App\Models\User;
@@ -32,6 +33,7 @@
  * @property bool                             $is_nsfw
  * @property string|null                      $copyright
  * @property PhotoLayoutType|null             $photo_layout
+ * @property TimelinePhotoGranularity         $photo_timeline
  * @property int                              $owner_id
  * @property User                             $owner
  * @property Collection<int,AccessPermission> $access_permissions
diff --git a/app/Rules/EnumRequireSupportRule.php b/app/Rules/EnumRequireSupportRule.php
new file mode 100644
index 00000000000..319518ff93c
--- /dev/null
+++ b/app/Rules/EnumRequireSupportRule.php
@@ -0,0 +1,78 @@
+<?php
+
+namespace App\Rules;
+
+use Illuminate\Contracts\Validation\ValidationRule;
+use LycheeVerify\Contract\VerifyInterface;
+
+/**
+ * This rule is designed specifically to avoid path injection.
+ */
+class EnumRequireSupportRule implements ValidationRule
+{
+	/**
+	 * The type of the enum.
+	 *
+	 * @var class-string
+	 */
+	protected $type;
+
+	protected VerifyInterface $verify;
+	/** @var array<int,mixed> This is usually a container of allowed values for backed enum */
+	protected array $expected;
+
+	/**
+	 * Create a new rule instance.
+	 *
+	 * @param class-string     $type
+	 * @param array<int,mixed> $expected
+	 * @param VerifyInterface  $verify
+	 *
+	 * @return void
+	 */
+	public function __construct(mixed $type, array $expected, VerifyInterface $verify)
+	{
+		$this->type = $type;
+		$this->verify = $verify;
+		$this->expected = $expected;
+	}
+
+	/**
+	 * {@inheritDoc}
+	 */
+	public function validate(string $attribute, mixed $value, \Closure $fail): void
+	{
+		if ($value === null || !enum_exists($this->type) || !method_exists($this->type, 'tryFrom')) {
+			return;
+		}
+
+		try {
+			// Enum version
+			$value = $this->type::tryFrom($value);
+
+			if ($value !== null && $this->isDesirable($value)) {
+				return;
+			}
+		} catch (\TypeError) {
+			return;
+		}
+
+		if ($this->verify->is_supporter()) {
+			return;
+		}
+
+		$fail('Error: This functionality is only available in the Supporter Edition of Lychee. See here: https://lycheeorg.github.io/get-supporter-edition/');
+	}
+
+	/**
+	 * Determine if the given case is a valid case based on the only / except values.
+	 *
+	 * @param mixed $value
+	 *
+	 * @return bool
+	 */
+	protected function isDesirable($value)
+	{
+		return in_array(needle: $value, haystack: $this->expected, strict: true);
+	}
+}
diff --git a/resources/js/components/forms/album/AlbumProperties.vue b/resources/js/components/forms/album/AlbumProperties.vue
index 9e06ecfea56..0ee3ba8fb9f 100644
--- a/resources/js/components/forms/album/AlbumProperties.vue
+++ b/resources/js/components/forms/album/AlbumProperties.vue
@@ -1,5 +1,5 @@
 <template>
-	<Card class="sm:p-4 xl:px-9 max-sm:w-full sm:min-w-[32rem] flex-shrink-0">
+	<Card class="sm:p-4 xl:px-9 max-sm:w-full sm:min-w-[48rem] flex-shrink-0">
 		<template #content>
 			<form>
 				<div class="h-12">
@@ -157,7 +157,7 @@
 							<label for="copyright">{{ $t("lychee.ALBUM_SET_COPYRIGHT") }}</label>
 						</FloatLabel>
 					</div>
-					<div class="h-10 my-2 pt-4">
+					<div class="sm:h-10 my-2 pt-4 flex flex-wrap gap-y-4">
 						<FloatLabel variant="on">
 							<Select
 								id="aspectRatio"
@@ -180,9 +180,31 @@
 							</Select>
 							<label for="aspectRatio">Set album thumbs aspect ratio</label>
 						</FloatLabel>
+						<FloatLabel variant="on">
+							<Select
+								id="albumTimeline"
+								class="w-72 border-none"
+								v-model="albumTimeline"
+								:options="albumTimelineOptions"
+								optionLabel="label"
+								showClear
+							>
+								<template #value="slotProps">
+									<div v-if="slotProps.value" class="flex items-center">
+										<div>{{ $t(slotProps.value.label) }}</div>
+									</div>
+								</template>
+								<template #option="slotProps">
+									<div class="flex items-center">
+										<div>{{ $t(slotProps.option.label) }}</div>
+									</div>
+								</template>
+							</Select>
+							<label for="albumTimeline">Set album timeline mode</label>
+						</FloatLabel>
 					</div>
 				</template>
-				<div class="h-10 my-2 pt-4">
+				<div class="sm:h-10 my-2 pt-4 flex flex-wrap gap-y-4">
 					<FloatLabel variant="on">
 						<Select
 							id="photoLayout"
@@ -205,7 +227,32 @@
 						</Select>
 						<label for="photoLayout">Set photo layout</label>
 					</FloatLabel>
+					<FloatLabel variant="on">
+						<Select
+							id="photoTimeline"
+							class="w-72 border-none"
+							v-model="photoTimeline"
+							:options="photoTimelineOptions"
+							optionLabel="label"
+							showClear
+						>
+							<template #value="slotProps">
+								<div v-if="slotProps.value" class="flex items-center">
+									<div>{{ $t(slotProps.value.label) }}</div>
+								</div>
+							</template>
+							<template #option="slotProps">
+								<div class="flex items-center">
+									<div>{{ $t(slotProps.option.label) }}</div>
+								</div>
+							</template>
+						</Select>
+						<label for="photoTimeline">Set photo timeline mode</label>
+					</FloatLabel>
 				</div>
+
+				<div v-if="is_model_album" class="h-10 my-2 pt-4"></div>
+
 				<div v-if="!is_model_album" class="mb-8 h-10">
 					<FloatLabel variant="on">
 						<AutoComplete
@@ -244,10 +291,14 @@ import {
 	photoLayoutOptions,
 	SelectOption,
 	SelectBuilders,
+	timelinePhotoGranularityOptions,
+	timelineAlbumGranularityOptions,
 } from "@/config/constants";
 import { useToast } from "primevue/usetoast";
 import { trans } from "laravel-vue-i18n";
 import AutoComplete from "primevue/autocomplete";
+import { useLycheeStateStore } from "@/stores/LycheeState";
+import { storeToRefs } from "pinia";
 
 type HeaderOption = {
 	id: string;
@@ -255,6 +306,9 @@ type HeaderOption = {
 	thumb?: string | null;
 };
 
+const LycheeState = useLycheeStateStore();
+const { is_se_enabled } = storeToRefs(LycheeState);
+
 const props = defineProps<{
 	editable: App.Http.Resources.Editable.EditableBaseAlbumResource;
 	photos: App.Http.Resources.Models.PhotoResource[];
@@ -270,12 +324,30 @@ const photoSortingOrder = ref<SelectOption<App.Enum.OrderSortingType> | undefine
 const albumSortingColumn = ref<SelectOption<App.Enum.ColumnSortingAlbumType> | undefined>(undefined);
 const albumSortingOrder = ref<SelectOption<App.Enum.OrderSortingType> | undefined>(undefined);
 const photoLayout = ref<SelectOption<App.Enum.PhotoLayoutType> | undefined>(undefined);
+const photoTimeline = ref<SelectOption<App.Enum.TimelinePhotoGranularity> | undefined>(undefined);
+const albumTimeline = ref<SelectOption<App.Enum.TimelineAlbumGranularity> | undefined>(undefined);
 const license = ref<SelectOption<App.Enum.LicenseType> | undefined>(undefined);
 const copyright = ref<string | undefined>(undefined);
 const tags = ref<string[]>([]);
 const aspectRatio = ref<SelectOption<App.Enum.AspectRatioType> | undefined>(undefined);
 const header_id = ref<HeaderOption | undefined>(undefined);
 
+const photoTimelineOptions = computed(() => {
+	if (is_se_enabled.value) {
+		return timelinePhotoGranularityOptions;
+	}
+
+	return timelinePhotoGranularityOptions.slice(0, 2);
+});
+
+const albumTimelineOptions = computed(() => {
+	if (is_se_enabled.value) {
+		return timelineAlbumGranularityOptions;
+	}
+
+	return timelineAlbumGranularityOptions.slice(0, 2);
+});
+
 const headersOptions = computed(() => {
 	const list: HeaderOption[] = [
 		{
@@ -323,6 +395,8 @@ function load(editable: App.Http.Resources.Editable.EditableBaseAlbumResource, p
 	photoLayout.value = SelectBuilders.buildPhotoLayout(editable.photo_layout ?? undefined);
 	license.value = SelectBuilders.buildLicense(editable.license ?? undefined);
 	aspectRatio.value = SelectBuilders.buildAspectRatio(editable.aspect_ratio ?? undefined);
+	albumTimeline.value = SelectBuilders.buildTimelineAlbumGranularity(editable.album_timeline ?? undefined);
+	photoTimeline.value = SelectBuilders.buildTimelinePhotoGranularity(editable.photo_timeline ?? undefined);
 	header_id.value = buildHeaderId(editable.header_id, photos);
 	tags.value = editable.tags;
 }
@@ -352,6 +426,8 @@ function saveAlbum() {
 		header_id: header_id.value?.id === "compact" ? null : (header_id.value?.id ?? null),
 		is_compact: header_id.value?.id === "compact",
 		photo_layout: photoLayout.value?.value ?? null,
+		album_timeline: albumTimeline.value?.value ?? null,
+		photo_timeline: photoTimeline.value?.value ?? null,
 	};
 	AlbumService.updateAlbum(data)
 		.then(() => {
@@ -378,6 +454,7 @@ function saveTagAlbum() {
 		photo_sorting_order: photoSortingOrder.value?.value ?? null,
 		copyright: copyright.value ?? null,
 		photo_layout: photoLayout.value?.value ?? null,
+		photo_timeline: photoTimeline.value?.value ?? null,
 	};
 	AlbumService.updateTag(data)
 		.then(() => {
diff --git a/resources/js/components/gallery/AlbumThumbPanel.vue b/resources/js/components/gallery/AlbumThumbPanel.vue
index 269d8ee1a28..1829430f93b 100644
--- a/resources/js/components/gallery/AlbumThumbPanel.vue
+++ b/resources/js/components/gallery/AlbumThumbPanel.vue
@@ -1,5 +1,5 @@
 <template>
-	<Panel :header="$t(props.header)" :toggleable="!isAlone" :pt:header:class="headerClass" class="border-0 w-full">
+	<Panel v-if="props.isTimeline === false" :header="$t(props.header)" :toggleable="!isAlone" :pt:header:class="headerClass" class="border-0 w-full">
 		<div class="flex flex-wrap flex-row flex-shrink w-full justify-start gap-1 sm:gap-2 md:gap-4 pt-4">
 			<AlbumThumbPanelList
 				:albums="props.albums"
@@ -13,13 +13,59 @@
 			/>
 		</div>
 	</Panel>
+	<Panel v-else :header="'Timeline'" :toggleable="!isAlone" :pt:header:class="headerClass" class="border-0 w-full">
+		<Timeline v-if="is_timeline_left_border_visible" :value="albumsTimeLine" :pt:eventopposite:class="'hidden'" class="mt-4">
+			<template #content="slotProps">
+				<div class="flex flex-wrap flex-row flex-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>
+					<AlbumThumbPanelList
+						:albums="slotProps.item.data"
+						:album="props.album"
+						:config="props.config"
+						:idx-shift="props.idxShift"
+						:iter="slotProps.item.iter"
+						:selected-albums="props.selectedAlbums"
+						@clicked="propagateClicked"
+						@contexted="propagateMenuOpen"
+					/>
+				</div>
+			</template>
+		</Timeline>
+		<div v-else>
+			<template v-for="albumTimeline in albumsTimeLine">
+				<div
+					v-if="albumTimeline.data.filter((a) => !a.is_nsfw || are_nsfw_visible).length > 0"
+					class="flex flex-wrap flex-row flex-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">{{ albumTimeline.header }}</div>
+					<AlbumThumbPanelList
+						:albums="albumTimeline.data"
+						:album="props.album"
+						:config="props.config"
+						:idx-shift="props.idxShift"
+						:iter="albumTimeline.iter"
+						:selected-albums="props.selectedAlbums"
+						@clicked="propagateClicked"
+						@contexted="propagateMenuOpen"
+					/>
+				</div>
+			</template>
+		</div>
+	</Panel>
 </template>
 <script setup lang="ts">
 import Panel from "primevue/panel";
 import { AlbumThumbConfig } from "@/components/gallery/thumbs/AlbumThumb.vue";
 import { computed } from "vue";
+import { SplitData, useSplitter } from "@/composables/album/splitter";
+import Timeline from "primevue/timeline";
+import { useLycheeStateStore } from "@/stores/LycheeState";
+import { storeToRefs } from "pinia";
 import AlbumThumbPanelList from "./AlbumThumbPanelList.vue";
 
+const lycheeStore = useLycheeStateStore();
+const { are_nsfw_visible, is_timeline_left_border_visible } = storeToRefs(lycheeStore);
+
 const props = defineProps<{
 	header: string;
 	album: App.Http.Resources.Models.AlbumResource | undefined | null;
@@ -28,6 +74,7 @@ const props = defineProps<{
 	isAlone: boolean;
 	idxShift: number;
 	selectedAlbums: string[];
+	isTimeline: boolean;
 }>();
 
 // bubble up.
@@ -36,6 +83,8 @@ const emits = defineEmits<{
 	contexted: [idx: number, event: MouseEvent];
 }>();
 
+const { spliter } = useSplitter();
+
 const propagateClicked = (idx: number, e: MouseEvent) => {
 	emits("clicked", idx, e);
 };
@@ -44,6 +93,14 @@ const propagateMenuOpen = (idx: number, e: MouseEvent) => {
 	emits("contexted", idx, e);
 };
 
+const albumsTimeLine = computed<SplitData<App.Http.Resources.Models.ThumbAlbumResource>[]>(() =>
+	spliter(
+		props.albums as App.Http.Resources.Models.ThumbAlbumResource[],
+		(a: App.Http.Resources.Models.ThumbAlbumResource) => a.timeline?.timeDate ?? "",
+		(a: App.Http.Resources.Models.ThumbAlbumResource) => a.timeline?.format ?? "Others",
+	),
+);
+
 const headerClass = computed(() => {
 	return props.isAlone ? "hidden" : "";
 });
diff --git a/resources/js/components/gallery/PhotoThumbPanel.vue b/resources/js/components/gallery/PhotoThumbPanel.vue
index 4b18fecad7b..9739d22fa7b 100644
--- a/resources/js/components/gallery/PhotoThumbPanel.vue
+++ b/resources/js/components/gallery/PhotoThumbPanel.vue
@@ -4,6 +4,7 @@
 			<PhotoThumbPanelControl v-model:layout="layout" />
 		</template>
 		<PhotoThumbPanelList
+			v-if="isTimeline === false"
 			:photos="props.photos"
 			:layout="layout"
 			:album="props.album"
@@ -12,15 +13,43 @@
 			:iter="0"
 			@clicked="propagateClicked"
 			@contexted="propagateMenuOpen"
+			:isTimeline="isTimeline"
 		/>
+		<template v-else>
+			<Timeline v-if="is_timeline_left_border_visible" :value="photosTimeLine" :pt:eventopposite:class="'hidden'" class="mt-4">
+				<template #content="slotProps">
+					<div class="flex flex-wrap flex-row flex-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"
+							:layout="layout"
+							:album="props.album"
+							:galleryConfig="props.galleryConfig"
+							:selectedPhotos="props.selectedPhotos"
+							:iter="slotProps.item.iter"
+							:isTimeline="isTimeline"
+							@clicked="propagateClicked"
+							@contexted="propagateMenuOpen"
+						/>
+					</div>
+				</template>
+			</Timeline>
+		</template>
 	</Panel>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import Panel from "primevue/panel";
+import { useLycheeStateStore } from "@/stores/LycheeState";
+import { storeToRefs } from "pinia";
+import { SplitData, useSplitter } from "@/composables/album/splitter";
+import Timeline from "primevue/timeline";
 import PhotoThumbPanelList from "./PhotoThumbPanelList.vue";
 import PhotoThumbPanelControl from "./PhotoThumbPanelControl.vue";
 
+const lycheeStore = useLycheeStateStore();
+const { is_timeline_left_border_visible } = storeToRefs(lycheeStore);
+
 const props = defineProps<{
 	header: string;
 	photos: { [key: number]: App.Http.Resources.Models.PhotoResource };
@@ -32,9 +61,11 @@ const props = defineProps<{
 		| undefined;
 	galleryConfig: App.Http.Resources.GalleryConfigs.PhotoLayoutConfig;
 	selectedPhotos: string[];
+	isTimeline: boolean;
 }>();
 
 const layout = ref(props.photoLayout);
+const isTimeline = ref(props.isTimeline);
 
 // bubble up.
 const emits = defineEmits<{
@@ -49,4 +80,14 @@ const propagateClicked = (idx: number, e: MouseEvent) => {
 const propagateMenuOpen = (idx: number, e: MouseEvent) => {
 	emits("contexted", idx, e);
 };
+
+const { spliter } = useSplitter();
+
+const photosTimeLine = computed<SplitData<App.Http.Resources.Models.PhotoResource>[]>(() =>
+	spliter(
+		props.photos as App.Http.Resources.Models.PhotoResource[],
+		(p: App.Http.Resources.Models.PhotoResource) => p.timeline?.timeDate ?? "",
+		(p: App.Http.Resources.Models.PhotoResource) => p.timeline?.format ?? "Others",
+	),
+);
 </script>
diff --git a/resources/js/components/gallery/PhotoThumbPanelList.vue b/resources/js/components/gallery/PhotoThumbPanelList.vue
index 729014939cd..00321c4f383 100644
--- a/resources/js/components/gallery/PhotoThumbPanelList.vue
+++ b/resources/js/components/gallery/PhotoThumbPanelList.vue
@@ -40,7 +40,7 @@ const maySelect = (idx: number, e: MouseEvent) => emits("clicked", idx, e);
 const menuOpen = (idx: number, e: MouseEvent) => emits("contexted", idx, e);
 
 // Layouts stuff
-const { activateLayout } = useLayouts(props.galleryConfig, layout, "photoListing" + props.iter);
+const { activateLayout } = useLayouts(props.galleryConfig, layout, isTimeline, "photoListing" + props.iter);
 onMounted(() => activateLayout());
 onUpdated(() => activateLayout());
 </script>
diff --git a/resources/js/config/constants.ts b/resources/js/config/constants.ts
index 132103493bf..2d0075fecb5 100644
--- a/resources/js/config/constants.ts
+++ b/resources/js/config/constants.ts
@@ -104,6 +104,23 @@ export const toolsOptions: SelectOption<string>[] = [
 	{ value: "2", label: "discover" },
 ];
 
+export const timelinePhotoGranularityOptions: SelectOption<App.Enum.TimelinePhotoGranularity>[] = [
+	{ value: "default", label: "default" },
+	{ value: "disabled", label: "disabled" },
+	{ value: "year", label: "year" },
+	{ value: "month", label: "month" },
+	{ value: "day", label: "day" },
+	{ value: "hour", label: "hour" },
+];
+
+export const timelineAlbumGranularityOptions: SelectOption<App.Enum.TimelineAlbumGranularity>[] = [
+	{ value: "default", label: "default" },
+	{ value: "disabled", label: "disabled" },
+	{ value: "year", label: "year" },
+	{ value: "month", label: "month" },
+	{ value: "day", label: "day" },
+];
+
 export const SelectBuilders = {
 	buildPhotoSorting(value: string | App.Enum.ColumnSortingType | undefined): SelectOption<App.Enum.ColumnSortingPhotoType> | undefined {
 		return photoSortingColumnsOptions.find((option) => option.value === value) || undefined;
@@ -144,4 +161,16 @@ export const SelectBuilders = {
 	buildToolSelection(value: string | undefined): SelectOption<string> | undefined {
 		return toolsOptions.find((option) => option.value === value) || undefined;
 	},
+
+	buildTimelinePhotoGranularity(
+		value: string | App.Enum.TimelinePhotoGranularity | undefined,
+	): SelectOption<App.Enum.TimelinePhotoGranularity> | undefined {
+		return timelinePhotoGranularityOptions.find((option) => option.value === value) || undefined;
+	},
+
+	buildTimelineAlbumGranularity(
+		value: string | App.Enum.TimelineAlbumGranularity | undefined,
+	): SelectOption<App.Enum.TimelineAlbumGranularity> | undefined {
+		return timelineAlbumGranularityOptions.find((option) => option.value === value) || undefined;
+	},
 };
diff --git a/resources/js/layouts/PhotoLayout.ts b/resources/js/layouts/PhotoLayout.ts
index 655d1e931ed..4c58bf29199 100644
--- a/resources/js/layouts/PhotoLayout.ts
+++ b/resources/js/layouts/PhotoLayout.ts
@@ -4,10 +4,12 @@ import { useJustify } from "./useJustify";
 import { useMasonry } from "./useMasonry";
 import { useGrid } from "./useGrid";
 import AlbumService from "@/services/album-service";
+import TimelineService from "@/services/timeline-service";
 
 export function useLayouts(
 	config: App.Http.Resources.GalleryConfigs.PhotoLayoutConfig,
 	layout: Ref<App.Enum.PhotoLayoutType>,
+	isTimeline: Ref<boolean>,
 	elemId: string = "photoListing",
 ) {
 	const configRef = ref(config);
@@ -24,7 +26,7 @@ export function useLayouts(
 				return useSquare(photoListing, configRef.value.photo_layout_square_column_width, configRef.value.photo_layout_gap);
 			case "justified":
 			case "unjustified":
-				return useJustify(photoListing, configRef.value.photo_layout_justified_row_height);
+				return useJustify(photoListing, configRef.value.photo_layout_justified_row_height, isTimeline.value);
 			case "masonry":
 				return useMasonry(photoListing, configRef.value.photo_layout_masonry_column_width, configRef.value.photo_layout_gap);
 			case "grid":
@@ -62,9 +64,16 @@ export function useGetLayoutConfig() {
 		});
 	}
 
+	function loadLayoutTimeline() {
+		TimelineService.init().then((data) => {
+			layout.value = data.data.photo_layout;
+		});
+	}
+
 	return {
 		layout,
 		layoutConfig,
 		loadLayoutConfig,
+		loadLayoutTimeline,
 	};
 }
diff --git a/resources/js/layouts/useJustify.ts b/resources/js/layouts/useJustify.ts
index 27243313349..e59e6a13374 100644
--- a/resources/js/layouts/useJustify.ts
+++ b/resources/js/layouts/useJustify.ts
@@ -1,14 +1,13 @@
 import { ChildNodeWithDataStyle } from "./types";
 import createJustifiedLayout from "justified-layout";
 
-export function useJustify(el: HTMLElement, photoDefaultHeight: number = 320) {
-	const containerWidth = parseInt(getComputedStyle(el).width);
-
-	// const width = el.clientWidth;
-	// const body_width = document.body.scrollWidth;
-	// console.log("containerWidth: " + containerWidth);
-	// console.log("width: " + width)
-	// console.log("body_width: " + body_width);
+export function useJustify(el: HTMLElement, photoDefaultHeight: number = 320, isTimeline: boolean) {
+	const baseElem = document.getElementById("lychee_view_content");
+	if (!baseElem) {
+		return;
+	}
+	const containerDefaultWidth = parseInt(getComputedStyle(baseElem).width) - 86;
+	const containerWidth = isTimeline ? Math.min(parseInt(getComputedStyle(el).width), containerDefaultWidth) : parseInt(getComputedStyle(el).width);
 
 	// @ts-expect-error
 	const justifiedItems: ChildNodeWithDataStyle[] = [...el.childNodes].filter((gridItem) => gridItem.nodeType === 1);
diff --git a/resources/js/lychee.d.ts b/resources/js/lychee.d.ts
index 39aacddbb49..0c12d52b63b 100644
--- a/resources/js/lychee.d.ts
+++ b/resources/js/lychee.d.ts
@@ -81,6 +81,8 @@ declare namespace App.Enum {
 	export type StorageDiskType = "images" | "s3";
 	export type ThumbAlbumSubtitleType = "description" | "takedate" | "creation" | "oldstyle";
 	export type ThumbOverlayVisibilityType = "never" | "always" | "hover";
+	export type TimelineAlbumGranularity = "default" | "disabled" | "year" | "month" | "day";
+	export type TimelinePhotoGranularity = "default" | "disabled" | "year" | "month" | "day" | "hour";
 	export type UpdateStatus = 0 | 1 | 2 | 3;
 	export type VersionChannelType = "release" | "git" | "tag";
 }
@@ -146,6 +148,8 @@ declare namespace App.Http.Resources.Editable {
 		photo_layout: App.Enum.PhotoLayoutType | null;
 		header_id: string | null;
 		cover_id: string | null;
+		album_timeline: App.Enum.TimelineAlbumGranularity | null;
+		photo_timeline: App.Enum.TimelinePhotoGranularity | null;
 		tags: Array<string>;
 		is_model_album: boolean;
 	};
@@ -181,6 +185,8 @@ declare namespace App.Http.Resources.GalleryConfigs {
 		is_nsfw_warning_visible: boolean;
 		album_thumb_css_aspect_ratio: App.Enum.AspectRatioCSSType;
 		photo_layout: App.Enum.PhotoLayoutType;
+		is_album_timeline_enabled: boolean;
+		is_photo_timeline_enabled: boolean;
 	};
 	export type FooterConfig = {
 		footer_additional_text: string;
@@ -210,6 +216,7 @@ declare namespace App.Http.Resources.GalleryConfigs {
 		album_decoration_orientation: App.Enum.AlbumDecorationOrientation;
 		clockwork_url: string | null;
 		slideshow_timeout: number;
+		is_timeline_left_border_visible: boolean;
 		title: string;
 		dropbox_api_key: string;
 		is_se_enabled: boolean;
@@ -242,6 +249,8 @@ declare namespace App.Http.Resources.GalleryConfigs {
 	export type RootConfig = {
 		is_map_accessible: boolean;
 		is_mod_frame_enabled: boolean;
+		is_photo_timeline_enabled: boolean;
+		is_album_timeline_enabled: boolean;
 		is_search_accessible: boolean;
 		show_keybinding_help_button: boolean;
 		album_thumb_css_aspect_ratio: App.Enum.AspectRatioType;
@@ -249,6 +258,7 @@ declare namespace App.Http.Resources.GalleryConfigs {
 		back_button_enabled: boolean;
 		back_button_text: string;
 		back_button_url: string;
+		timeline_album_granularity: App.Enum.TimelineAlbumGranularity;
 	};
 	export type UploadConfig = {
 		upload_processing_limit: number;
@@ -350,6 +360,7 @@ declare namespace App.Http.Resources.Models {
 		previous_photo_id: string | null;
 		preformatted: App.Http.Resources.Models.Utils.PreformattedPhotoData;
 		precomputed: App.Http.Resources.Models.Utils.PreComputedPhotoData;
+		timeline: App.Http.Resources.Models.Utils.TimelineData | null;
 	};
 	export type SizeVariantResource = {
 		type: App.Enum.SizeVariantType;
@@ -416,6 +427,7 @@ declare namespace App.Http.Resources.Models {
 		formatted_min_max: string | null;
 		owner: string | null;
 		rights: App.Http.Resources.Rights.AlbumRightsResource;
+		timeline: App.Http.Resources.Models.Utils.TimelineData | null;
 	};
 	export type ThumbResource = {
 		id: string;
@@ -494,6 +506,10 @@ declare namespace App.Http.Resources.Models.Utils {
 		license: string;
 		description: string;
 	};
+	export type TimelineData = {
+		timeDate: string;
+		format: string;
+	};
 	export type UserToken = {
 		token: string;
 	};
diff --git a/resources/js/services/album-service.ts b/resources/js/services/album-service.ts
index 39b520f95ac..46cd1119ce6 100644
--- a/resources/js/services/album-service.ts
+++ b/resources/js/services/album-service.ts
@@ -26,6 +26,8 @@ export type UpdateAbumData = {
 	copyright: string | null;
 	header_id: string | null;
 	is_compact: boolean;
+	album_timeline: App.Enum.TimelineAlbumGranularity | null;
+	photo_timeline: App.Enum.TimelinePhotoGranularity | null;
 };
 
 export type UpdateTagAlbumData = {
@@ -37,6 +39,7 @@ export type UpdateTagAlbumData = {
 	photo_sorting_order: App.Enum.OrderSortingType | null;
 	copyright: string | null;
 	photo_layout: App.Enum.PhotoLayoutType | null;
+	photo_timeline: App.Enum.TimelinePhotoGranularity | null;
 };
 
 export type UpdateProtectionPolicyData = {
diff --git a/resources/js/stores/LycheeState.ts b/resources/js/stores/LycheeState.ts
index 904e3fc18ef..1731584c554 100644
--- a/resources/js/stores/LycheeState.ts
+++ b/resources/js/stores/LycheeState.ts
@@ -41,6 +41,9 @@ export const useLycheeStateStore = defineStore("lychee-store", {
 		// menu stuff
 		clockwork_url: "" as null | string,
 
+		// Timeline settings
+		is_timeline_left_border_visible: true,
+
 		// Site title & Dropbox API key
 		title: "lychee.GALLERY",
 		dropbox_api_key: "disabled",
@@ -96,6 +99,8 @@ export const useLycheeStateStore = defineStore("lychee-store", {
 
 					this.slideshow_timeout = data.slideshow_timeout;
 
+					this.is_timeline_left_border_visible = data.is_timeline_left_border_visible;
+
 					this.title = data.title;
 					this.dropbox_api_key = data.dropbox_api_key;
 
diff --git a/resources/js/style/preset.ts b/resources/js/style/preset.ts
index c76424d6059..b8cc55cb838 100644
--- a/resources/js/style/preset.ts
+++ b/resources/js/style/preset.ts
@@ -473,6 +473,26 @@ const LycheePrimeVueConfig = {
 				},
 			},
 		},
+		timeline: {
+			colorScheme: {
+				dark: {
+					event: {
+						marker: {
+							background: "{surface.800}",
+							border: {
+								color: "{surface.700}",
+							},
+							content: {
+								background: "{primary.600}",
+							},
+						},
+						connector: {
+							color: "{surface.700}",
+						},
+					},
+				},
+			},
+		},
 		paginator: {
 			colorScheme: {
 				light: {
diff --git a/resources/js/views/gallery-panels/Album.vue b/resources/js/views/gallery-panels/Album.vue
index f499d54e0ae..71c56cf26fa 100644
--- a/resources/js/views/gallery-panels/Album.vue
+++ b/resources/js/views/gallery-panels/Album.vue
@@ -57,6 +57,7 @@
 					@contexted="albumMenuOpen"
 					:idx-shift="0"
 					:selected-albums="selectedAlbumsIds"
+					:is-timeline="config.is_album_timeline_enabled"
 				/>
 				<PhotoThumbPanel
 					v-if="layoutConfig !== null && photos !== null && photos.length > 0"
@@ -68,6 +69,7 @@
 					:selected-photos="selectedPhotosIds"
 					@clicked="photoClick"
 					@contexted="photoMenuOpen"
+					:is-timeline="config.is_photo_timeline_enabled"
 				/>
 				<GalleryFooter v-once />
 			</div>
diff --git a/resources/js/views/gallery-panels/Albums.vue b/resources/js/views/gallery-panels/Albums.vue
index e174329473e..15d0cfa7b0d 100644
--- a/resources/js/views/gallery-panels/Albums.vue
+++ b/resources/js/views/gallery-panels/Albums.vue
@@ -26,20 +26,23 @@
 			:is-alone="!albums.length"
 			:idx-shift="-1"
 			:selected-albums="[]"
+			:is-timeline="false"
 		/>
-		<AlbumThumbPanel
-			v-if="albums.length > 0"
-			header="lychee.ALBUMS"
-			:album="null"
-			:albums="albums"
-			:user="user"
-			:config="albumPanelConfig"
-			:is-alone="!sharedAlbums.length && !smartAlbums.length"
-			:idx-shift="0"
-			:selected-albums="selectedAlbumsIds"
-			@clicked="albumClick"
-			@contexted="albumMenuOpen"
-		/>
+		<template v-if="albums.length > 0">
+			<AlbumThumbPanel
+				:is-timeline="rootConfig.is_album_timeline_enabled"
+				header="lychee.ALBUMS"
+				:album="null"
+				:albums="albums"
+				:user="user"
+				:config="albumPanelConfig"
+				:is-alone="!sharedAlbums.length && !smartAlbums.length"
+				:idx-shift="0"
+				:selected-albums="selectedAlbumsIds"
+				@clicked="albumClick"
+				@contexted="albumMenuOpen"
+			/>
+		</template>
 		<template v-for="sharedAlbum in sharedAlbums">
 			<AlbumThumbPanel
 				v-if="sharedAlbums.length > 0"
@@ -53,6 +56,7 @@
 				:selected-albums="selectedAlbumsIds"
 				@clicked="albumClick"
 				@contexted="albumMenuOpen"
+				:is-timeline="false"
 			/>
 		</template>
 		<GalleryFooter v-once />
@@ -150,6 +154,7 @@ import UploadPanel from "@/components/modals/UploadPanel.vue";
 import AlbumCreateDialog from "@/components/forms/album/AlbumCreateDialog.vue";
 import AlbumCreateTagDialog from "@/components/forms/album/AlbumCreateTagDialog.vue";
 import { useScrollable } from "@/composables/album/scrollable";
+import { EmptyPhotoCallbacks } from "@/utils/Helpers";
 
 const auth = useAuthStore();
 const router = useRouter();
@@ -181,20 +186,6 @@ const { selectedAlbum, selectedAlbumsIdx, selectedAlbums, selectedAlbumsIds, alb
 const { isDeleteVisible, toggleDelete, isMergeAlbumVisible, toggleMergeAlbum, isMoveVisible, toggleMove, isRenameVisible, toggleRename } =
 	useGalleryModals(togglableStore);
 
-// Unused.
-const photoCallbacks = {
-	star: () => {},
-	unstar: () => {},
-	setAsCover: () => {},
-	setAsHeader: () => {},
-	toggleTag: () => {},
-	toggleRename: () => {},
-	toggleCopyTo: () => {},
-	toggleMove: () => {},
-	toggleDelete: () => {},
-	toggleDownload: () => {},
-};
-
 const albumCallbacks = {
 	setAsCover: () => {},
 	toggleRename: toggleRename,
@@ -208,16 +199,11 @@ const albumCallbacks = {
 
 const { menu, Menu, albumMenuOpen } = useContextMenu(
 	{
-		config: undefined,
-		album: undefined,
-		selectedPhoto: undefined,
-		selectedPhotos: undefined,
-		selectedPhotosIdx: undefined,
 		selectedAlbum: selectedAlbum,
 		selectedAlbums: selectedAlbums,
 		selectedAlbumIdx: selectedAlbumsIdx,
 	},
-	photoCallbacks,
+	EmptyPhotoCallbacks,
 	albumCallbacks,
 );
 
diff --git a/resources/js/views/gallery-panels/Search.vue b/resources/js/views/gallery-panels/Search.vue
index 74cab33b65d..8103ccdabe5 100644
--- a/resources/js/views/gallery-panels/Search.vue
+++ b/resources/js/views/gallery-panels/Search.vue
@@ -68,6 +68,7 @@
 					:selected-photos="selectedPhotosIds"
 					@clicked="photoClick"
 					@contexted="photoMenuOpen"
+					:is-timeline="configForMenu.is_photo_timeline_enabled"
 				/>
 			</div>
 
@@ -217,6 +218,10 @@ const configForMenu = computed<App.Http.Resources.GalleryConfigs.AlbumConfig>(()
 		is_nsfw_warning_visible: false,
 		album_thumb_css_aspect_ratio: "aspect-square",
 		photo_layout: "justified",
+		timeline_album_granularity: "year",
+		timeline_photo_granularity: "day",
+		is_album_timeline_enabled: false,
+		is_photo_timeline_enabled: false,
 	};
 });
 const albumForMenu = albumid.value !== "" ? album : undefined;
diff --git a/tests/Feature_v2/Album/AlbumUpdateTest.php b/tests/Feature_v2/Album/AlbumUpdateTest.php
index 2113ec68b3f..3238fbc821a 100644
--- a/tests/Feature_v2/Album/AlbumUpdateTest.php
+++ b/tests/Feature_v2/Album/AlbumUpdateTest.php
@@ -32,6 +32,8 @@ public function testUpdateAlbumUnauthorizedForbidden(): void
 			'copyright' => '',
 			'is_compact' => false,
 			'header_id' => null,
+			'album_timeline' => null,
+			'photo_timeline' => null,
 		]);
 		$this->assertUnauthorized($response);
 
@@ -49,6 +51,8 @@ public function testUpdateAlbumUnauthorizedForbidden(): void
 			'copyright' => '',
 			'is_compact' => false,
 			'header_id' => null,
+			'album_timeline' => null,
+			'photo_timeline' => null,
 		]);
 		$this->assertForbidden($response);
 	}
@@ -69,6 +73,8 @@ public function testUpdateAlbumAuthorized(): void
 			'copyright' => '',
 			'is_compact' => false,
 			'header_id' => null,
+			'album_timeline' => null,
+			'photo_timeline' => null,
 		]);
 		$this->assertOk($response);
 	}
@@ -84,6 +90,7 @@ public function testUpdateTagAlbumUnauthorizedForbidden(): void
 			'photo_sorting_order' => 'ASC',
 			'copyright' => '',
 			'photo_layout' => null,
+			'photo_timeline' => null,
 		]);
 		$this->assertUnauthorized($response);
 
@@ -96,6 +103,7 @@ public function testUpdateTagAlbumUnauthorizedForbidden(): void
 			'photo_sorting_order' => 'ASC',
 			'copyright' => '',
 			'photo_layout' => null,
+			'photo_timeline' => null,
 		]);
 		$this->assertForbidden($response);
 	}
@@ -111,6 +119,7 @@ public function testUpdateTagAlbumAuthorized(): void
 			'photo_sorting_order' => 'ASC',
 			'copyright' => '',
 			'photo_layout' => null,
+			'photo_timeline' => null,
 		]);
 		$this->assertOk($response);
 

From 84dbcf4a1fe910bbd236566c32afc61370144284 Mon Sep 17 00:00:00 2001
From: ildyria <beviguier@gmail.com>
Date: Wed, 13 Nov 2024 12:57:06 +0100
Subject: [PATCH 2/2] fix ts check

---
 resources/js/layouts/PhotoLayout.ts | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/resources/js/layouts/PhotoLayout.ts b/resources/js/layouts/PhotoLayout.ts
index 4c58bf29199..756103a6ccd 100644
--- a/resources/js/layouts/PhotoLayout.ts
+++ b/resources/js/layouts/PhotoLayout.ts
@@ -4,7 +4,6 @@ import { useJustify } from "./useJustify";
 import { useMasonry } from "./useMasonry";
 import { useGrid } from "./useGrid";
 import AlbumService from "@/services/album-service";
-import TimelineService from "@/services/timeline-service";
 
 export function useLayouts(
 	config: App.Http.Resources.GalleryConfigs.PhotoLayoutConfig,
@@ -64,16 +63,9 @@ export function useGetLayoutConfig() {
 		});
 	}
 
-	function loadLayoutTimeline() {
-		TimelineService.init().then((data) => {
-			layout.value = data.data.photo_layout;
-		});
-	}
-
 	return {
 		layout,
 		layoutConfig,
 		loadLayoutConfig,
-		loadLayoutTimeline,
 	};
 }