From 0c2807963242946cbe696a4be5cdf7cc8fd0dce4 Mon Sep 17 00:00:00 2001
From: ildyria <beviguier@gmail.com>
Date: Sun, 20 Oct 2024 23:35:43 +0200
Subject: [PATCH 1/9] WIP

---
 .../js/components/drawers/AlbumStatistics.vue | 220 ++++++++++++++++++
 resources/js/components/gallery/AlbumHero.vue |  31 ++-
 .../js/composables/album/albumRefresher.ts    |   1 -
 resources/js/services/statistics-service.ts   |   4 +-
 resources/js/views/Statistics.vue             |   3 +-
 resources/js/views/gallery-panels/Album.vue   |  23 +-
 6 files changed, 271 insertions(+), 11 deletions(-)
 create mode 100644 resources/js/components/drawers/AlbumStatistics.vue

diff --git a/resources/js/components/drawers/AlbumStatistics.vue b/resources/js/components/drawers/AlbumStatistics.vue
new file mode 100644
index 00000000000..510b0d3936c
--- /dev/null
+++ b/resources/js/components/drawers/AlbumStatistics.vue
@@ -0,0 +1,220 @@
+<template>
+	<Collapse class="w-full flex justify-center flex-wrap flex-row-reverse" :when="areStatisticsOpen">
+		<Panel class="border-0 w-full" :pt:content:class="'flex justify-evenly flex-wrap'">
+			<Card v-if="total !== undefined" class="max-w-xs w-full">
+				<template #content>
+					<div class="flex flex-wrap">
+						<span class="w-full font-bold text-xl">{{ "Total" }}</span>
+						<span class="w-20 text-muted-color-emphasis">{{ "Photos" }}:</span>
+						<span class="w-[calc(100%-5rem)] font-bold">{{ total.num_photos }}</span>
+						<span class="w-20 text-muted-color-emphasis">{{ "Albums" }}:</span>
+						<span class="w-[calc(100%-5rem)] font-bold">{{ total.num_albums }}</span>
+						<span class="w-20 text-muted-color-emphasis">{{ "Size" }}:</span>
+						<span class="w-[calc(100%-5rem)] font-bold">{{ sizeToUnit(total.size) }}</span>
+					</div>
+				</template>
+			</Card>
+
+			<DataTable
+				v-if="photosData.lens.length > 1"
+				:value="photosData.lens"
+				scrollable
+				size="small"
+				scrollHeight="13rem"
+				class="max-w-xs w-full"
+			>
+				<Column field="key" header="Lens"></Column>
+				<Column field="value" header="Count"></Column>
+			</DataTable>
+			<DataTable
+				v-if="photosData.shutter.length > 1"
+				:value="photosData.shutter"
+				scrollable
+				size="small"
+				scrollHeight="13rem"
+				class="max-w-xs w-full"
+			>
+				<Column field="key" header="Shutter speed"></Column>
+				<Column field="value" header="Count"></Column>
+			</DataTable>
+			<DataTable
+				v-if="photosData.aperture.length > 1"
+				:value="photosData.aperture"
+				scrollable
+				size="small"
+				scrollHeight="13rem"
+				class="max-w-xs w-full"
+			>
+				<Column field="key" header="Aperture"></Column>
+				<Column field="value" header="Count"></Column>
+			</DataTable>
+			<DataTable v-if="photosData.iso.length > 1" :value="photosData.iso" scrollable size="small" scrollHeight="13rem" class="max-w-xs w-full">
+				<Column field="key" header="ISO"></Column>
+				<Column field="value" header="Count"></Column>
+			</DataTable>
+			<DataTable
+				v-if="photosData.model.length > 1"
+				:value="photosData.model"
+				scrollable
+				size="small"
+				scrollHeight="13rem"
+				class="max-w-xs w-full"
+			>
+				<Column field="key" header="ISO"></Column>
+				<Column field="value" header="Count"></Column>
+			</DataTable>
+		</Panel>
+	</Collapse>
+</template>
+<script setup lang="ts">
+import StatisticsService from "@/services/statistics-service";
+import { useLycheeStateStore } from "@/stores/LycheeState";
+import { sizeToUnit } from "@/utils/StatsSizeVariantToColours";
+import { TotalAlbum } from "@/views/Statistics.vue";
+import { storeToRefs } from "pinia";
+import Card from "primevue/card";
+import Column from "primevue/column";
+import DataTable from "primevue/datatable";
+import Panel from "primevue/panel";
+import { computed, Ref, ref } from "vue";
+import { Collapse } from "vue-collapsed";
+
+const lycheeStore = useLycheeStateStore();
+const { are_nsfw_visible } = storeToRefs(lycheeStore);
+
+const areStatisticsOpen = defineModel("visible", { default: false }) as Ref<boolean>;
+
+export type DataForTable = { key: string; value: number };
+
+export type PhotoStats = {
+	iso: DataForTable[];
+	focal: DataForTable[];
+	lens: DataForTable[];
+	model: DataForTable[];
+	shutter: DataForTable[];
+	aperture: DataForTable[];
+	year: DataForTable[];
+	month: DataForTable[];
+	day: DataForTable[];
+};
+
+const props = defineProps<{
+	photos: App.Http.Resources.Models.PhotoResource[];
+	album: App.Http.Resources.Models.AlbumResource | App.Http.Resources.Models.SmartAlbumResource | App.Http.Resources.Models.TagAlbumResource;
+	config: App.Http.Resources.GalleryConfigs.AlbumConfig;
+}>();
+
+const photosData = ref(getStatistics(props.photos));
+const albumSpace = ref(undefined as undefined | App.Http.Resources.Statistics.Album[]);
+const totalAlbumSpace = ref(undefined as undefined | App.Http.Resources.Statistics.Album[]);
+const is_collapsed = ref(false);
+
+const albumData = computed(() => {
+	if (is_collapsed.value === false) {
+		return albumSpace.value?.filter((a) => !a.is_nsfw || are_nsfw_visible.value);
+	}
+	return totalAlbumSpace.value?.filter((a) => !a.is_nsfw || are_nsfw_visible.value);
+});
+
+const total = computed(() => {
+	if (albumSpace.value === undefined) {
+		return undefined;
+	}
+
+	const sumData: TotalAlbum = {
+		size: 0,
+		num_photos: 0,
+		num_albums: 0,
+	};
+
+	albumSpace.value
+		?.filter((a) => !a.is_nsfw || are_nsfw_visible.value)
+		?.reduce((acc, a) => {
+			sumData.size += a.size;
+			sumData.num_photos += a.num_photos;
+			return acc;
+		}, sumData);
+
+	sumData.num_albums = albumSpace.value?.filter((a) => !a.is_nsfw || are_nsfw_visible.value)?.length ?? 0;
+
+	return sumData;
+});
+
+function getStatistics(photos: App.Http.Resources.Models.PhotoResource[]): PhotoStats {
+	const stats = {
+		iso: {} as Record<string, number>,
+		focal: {} as Record<string, number>,
+		lens: {} as Record<string, number>,
+		model: {} as Record<string, number>,
+		shutter: {} as Record<string, number>,
+		aperture: {} as Record<string, number>,
+		year: {} as Record<string, number>,
+		month: {} as Record<string, number>,
+		day: {} as Record<string, number>,
+	};
+	for (const photo of photos) {
+		if (photo.precomputed.is_video || photo.precomputed.is_raw) {
+			continue;
+		}
+
+		if (photo.iso) {
+			stats.iso[photo.iso] = stats.iso[photo.iso] ? stats.iso[photo.iso] + 1 : 1;
+		}
+		if (photo.focal) {
+			stats.focal[photo.focal] = stats.focal[photo.focal] ? stats.focal[photo.focal] + 1 : 1;
+		}
+		if (photo.preformatted.aperture) {
+			stats.aperture["ƒ / " + photo.preformatted.aperture] = stats.aperture["ƒ / " + photo.preformatted.aperture]
+				? stats.aperture["ƒ / " + photo.preformatted.aperture] + 1
+				: 1;
+		}
+		if (photo.lens) {
+			stats.lens[photo.lens] = stats.lens[photo.lens] ? stats.lens[photo.lens] + 1 : 1;
+		}
+		if (photo.model) {
+			stats.model[photo.model] = stats.model[photo.model] ? stats.model[photo.model] + 1 : 1;
+		}
+		if (photo.preformatted.shutter) {
+			stats.shutter[photo.preformatted.shutter] = stats.shutter[photo.preformatted.shutter] ? stats.shutter[photo.preformatted.shutter] + 1 : 1;
+		}
+		if (photo.taken_at) {
+			const year = photo.taken_at.slice(0, 4);
+			const month = photo.taken_at.slice(0, 7);
+			const day = photo.taken_at.slice(0, 10);
+			stats.year[year] = stats.year[year] ? stats.year[year] + 1 : 1;
+			stats.month[month] = stats.month[month] ? stats.month[month] + 1 : 1;
+			stats.day[day] = stats.day[day] ? stats.day[day] + 1 : 1;
+		}
+	}
+
+	return {
+		iso: recordToType(stats.iso),
+		focal: recordToType(stats.focal),
+		lens: recordToType(stats.lens),
+		model: recordToType(stats.model),
+		shutter: recordToType(stats.shutter),
+		aperture: recordToType(stats.aperture),
+		year: recordToType(stats.year),
+		month: recordToType(stats.month),
+		day: recordToType(stats.day),
+	};
+}
+
+function recordToType(record: Record<string, number>): DataForTable[] {
+	const data = [] as DataForTable[];
+	Object.entries(record).forEach(([key, value]) => {
+		data.push({ key, value });
+	});
+	return data.sort((a, b) => b.value - a.value);
+}
+
+if (props.config.is_base_album) {
+	StatisticsService.getAlbumSpace(props.album.id).then((response) => {
+		albumSpace.value = response.data;
+	});
+
+	StatisticsService.getTotalAlbumSpace(props.album.id).then((response) => {
+		totalAlbumSpace.value = response.data;
+	});
+}
+</script>
diff --git a/resources/js/components/gallery/AlbumHero.vue b/resources/js/components/gallery/AlbumHero.vue
index 088f9855095..0238a5e8faa 100644
--- a/resources/js/components/gallery/AlbumHero.vue
+++ b/resources/js/components/gallery/AlbumHero.vue
@@ -10,7 +10,7 @@
 	</div>
 	<Card class="w-full">
 		<template #content>
-			<div class="w-full flex flex-row-reverse">
+			<div class="w-full flex flex-row-reverse items-start">
 				<div class="order-1 flex flex-col w-full">
 					<h1 v-if="!props.album.preFormattedData.url" class="font-bold text-2xl">{{ props.album.title }}</h1>
 					<span v-if="props.album.preFormattedData.created_at" class="block text-muted-color text-sm">
@@ -31,7 +31,7 @@
 				</div>
 				<a
 					v-if="props.album.rights.can_download"
-					class="flex-shrink-0 px-3 cursor-pointer text-muted-color inline-block transform duration-300 hover:scale-125 hover:text-color"
+					class="flex-shrink-0 px-3 cursor-pointer text-muted-color inline-block transform duration-300 hover:scale-150 hover:text-color"
 					:title="$t('lychee.DOWNLOAD_ALBUM')"
 					@click="download"
 				>
@@ -39,12 +39,26 @@
 				</a>
 				<a
 					v-if="props.album.rights.can_share"
-					class="flex-shrink-0 px-3 cursor-pointer text-muted-color inline-block transform duration-300 hover:scale-125 hover:text-color"
+					class="flex-shrink-0 px-3 cursor-pointer text-muted-color inline-block transform duration-300 hover:scale-150 hover:text-color"
 					:title="$t('lychee.SHARE_ALBUM')"
 					v-on:click="openSharingModal"
 				>
 					<i class="pi pi-share-alt" />
 				</a>
+				<a
+					v-if="is_se_enabled"
+					class="flex-shrink-0 px-3 cursor-pointer inline-block transform duration-300 hover:scale-150 hover:text-color"
+					v-on:click="openStatistics"
+				>
+					<i class="pi pi-chart-scatter text-primary-emphasis" />
+				</a>
+				<a
+					v-if="is_se_preview_enabled"
+					class="flex-shrink-0 px-3 cursor-not-allowed text-primary-emphasis"
+					v-tooltip.left="'Statistics available in the Supporter Edition'"
+				>
+					<i class="pi pi-chart-scatter" />
+				</a>
 			</div>
 			<div
 				v-if="props.album.preFormattedData.description"
@@ -56,21 +70,30 @@
 </template>
 <script setup lang="ts">
 import AlbumService from "@/services/album-service";
+import { useLycheeStateStore } from "@/stores/LycheeState";
+import { storeToRefs } from "pinia";
 import Card from "primevue/card";
 
+const lycheeStore = useLycheeStateStore();
+const { is_se_enabled, is_se_preview_enabled } = storeToRefs(lycheeStore);
+
 const props = defineProps<{
 	album: App.Http.Resources.Models.AlbumResource | App.Http.Resources.Models.TagAlbumResource | App.Http.Resources.Models.SmartAlbumResource;
-	// config: App.Http.Resources.GalleryConfigs.AlbumConfig;
 }>();
 
 const emits = defineEmits<{
 	"open-sharing-modal": [];
+	"open-statistics": [];
 }>();
 
 function openSharingModal() {
 	emits("open-sharing-modal");
 }
 
+function openStatistics() {
+	emits("open-statistics");
+}
+
 function download() {
 	AlbumService.download([props.album?.id]);
 }
diff --git a/resources/js/composables/album/albumRefresher.ts b/resources/js/composables/album/albumRefresher.ts
index de6e08b11d4..f31beefb291 100644
--- a/resources/js/composables/album/albumRefresher.ts
+++ b/resources/js/composables/album/albumRefresher.ts
@@ -39,7 +39,6 @@ export function useAlbumRefresher(albumId: Ref<string>, auth: AuthStore, isLogin
 					smartAlbum.value = data.data.resource as App.Http.Resources.Models.SmartAlbumResource;
 				}
 				photos.value = album.value?.photos ?? [];
-
 				isAlbumConsented.value = nsfw_consented.value.find((e) => e === albumId.value) !== undefined;
 			})
 			.catch((error) => {
diff --git a/resources/js/services/statistics-service.ts b/resources/js/services/statistics-service.ts
index 9364f19420b..fdd076b00cf 100644
--- a/resources/js/services/statistics-service.ts
+++ b/resources/js/services/statistics-service.ts
@@ -9,10 +9,10 @@ const StatisticsService = {
 		return axios.get(`${Constants.getApiUrl()}Statistics::sizeVariantSpace`, { data: {} });
 	},
 	getAlbumSpace(albumId: string | null = null): Promise<AxiosResponse<App.Http.Resources.Statistics.Album[]>> {
-		return axios.get(`${Constants.getApiUrl()}Statistics::albumSpace`, { params: { albumId: albumId }, data: {} });
+		return axios.get(`${Constants.getApiUrl()}Statistics::albumSpace`, { params: { album_id: albumId }, data: {} });
 	},
 	getTotalAlbumSpace(albumId: string | null = null): Promise<AxiosResponse<App.Http.Resources.Statistics.Album[]>> {
-		return axios.get(`${Constants.getApiUrl()}Statistics::totalAlbumSpace`, { params: { albumId: albumId }, data: {} });
+		return axios.get(`${Constants.getApiUrl()}Statistics::totalAlbumSpace`, { params: { album_id: albumId }, data: {} });
 	},
 };
 
diff --git a/resources/js/views/Statistics.vue b/resources/js/views/Statistics.vue
index c64d39c4702..bcec606d2b1 100644
--- a/resources/js/views/Statistics.vue
+++ b/resources/js/views/Statistics.vue
@@ -98,9 +98,8 @@ import ToggleSwitch from "primevue/toggleswitch";
 import { onKeyStroke } from "@vueuse/core";
 import { shouldIgnoreKeystroke } from "@/utils/keybindings-utils";
 import { usePreviewData } from "@/composables/preview/getPreviewInfo";
-import SETag from "@/components/icons/SETag.vue";
 
-type TotalAlbum = {
+export type TotalAlbum = {
 	num_photos: number;
 	num_albums: number;
 	size: number;
diff --git a/resources/js/views/gallery-panels/Album.vue b/resources/js/views/gallery-panels/Album.vue
index 6aeae907dc9..54827839390 100644
--- a/resources/js/views/gallery-panels/Album.vue
+++ b/resources/js/views/gallery-panels/Album.vue
@@ -32,7 +32,17 @@
 						>{{ $t("lychee.UPLOAD_PHOTO") }}</Button
 					>
 				</div>
-				<AlbumHero v-if="!noData" :album="album" @open-sharing-modal="toggleShareAlbum" />
+				<AlbumHero v-if="!noData" :album="album" @open-sharing-modal="toggleShareAlbum" @open-statistics="toggleStatistics" />
+				<template v-if="is_se_enabled">
+					<AlbumStatistics
+						v-if="photos !== null && photos.length > 0"
+						:photos="photos"
+						:config="config"
+						:album="album"
+						v-model:visible="areStatisticsOpen"
+						:key="'statistics_' + album.id"
+					/>
+				</template>
 				<AlbumThumbPanel
 					v-if="children !== null && children.length > 0"
 					header="lychee.ALBUMS"
@@ -188,6 +198,7 @@ import LoginModal from "@/components/modals/LoginModal.vue";
 import Button from "primevue/button";
 import { useMouseEvents } from "@/composables/album/uploadEvents";
 import GalleryFooter from "@/components/footers/GalleryFooter.vue";
+import AlbumStatistics from "@/components/drawers/AlbumStatistics.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -203,7 +214,7 @@ const lycheeStore = useLycheeStateStore();
 lycheeStore.init();
 lycheeStore.resetSearch();
 
-const { are_nsfw_visible, is_full_screen, is_login_open, nsfw_consented, is_slideshow_active, is_upload_visible, list_upload_files } =
+const { are_nsfw_visible, is_full_screen, is_login_open, nsfw_consented, is_slideshow_active, is_upload_visible, list_upload_files, is_se_enabled } =
 	storeToRefs(lycheeStore);
 
 // Reset the slideshow.
@@ -247,6 +258,14 @@ const {
 	toggleUpload,
 } = useGalleryModals(is_upload_visible);
 
+const areStatisticsOpen = ref(false);
+
+function toggleStatistics() {
+	if (is_se_enabled) {
+		areStatisticsOpen.value = !areStatisticsOpen.value;
+	}
+}
+
 const {
 	selectedPhotosIdx,
 	selectedAlbumsIdx,

From 6a2936a269a717fac80ee12f26d84adf89a60c9a Mon Sep 17 00:00:00 2001
From: ildyria <beviguier@gmail.com>
Date: Mon, 21 Oct 2024 12:45:04 +0200
Subject: [PATCH 2/9] make sub components for statistics

---
 .../js/components/statistics/AlbumsTable.vue  |  95 ++++++++++
 .../statistics/SizeVariantMeter.vue           |  85 +++++++++
 .../js/components/statistics/TotalCard.vue    |  30 +++
 resources/js/views/Statistics.vue             | 175 ++----------------
 4 files changed, 222 insertions(+), 163 deletions(-)
 create mode 100644 resources/js/components/statistics/AlbumsTable.vue
 create mode 100644 resources/js/components/statistics/SizeVariantMeter.vue
 create mode 100644 resources/js/components/statistics/TotalCard.vue

diff --git a/resources/js/components/statistics/AlbumsTable.vue b/resources/js/components/statistics/AlbumsTable.vue
new file mode 100644
index 00000000000..512285d2d75
--- /dev/null
+++ b/resources/js/components/statistics/AlbumsTable.vue
@@ -0,0 +1,95 @@
+<template>
+    <DataTable
+        :value="albumData"
+        size="small"
+        scrollable
+        scrollHeight="600px"
+        :loading="albumData === undefined"
+        v-if="albumData === undefined || albumData.length > 0"
+    >
+        <Column v-if="props.showUsername" field="username" header="Owner" class="w-32"></Column>
+        <Column field="title" sortable header="Title"></Column>
+        <Column field="num_photos" sortable header="Photos" class="w-16"></Column>
+        <Column field="num_descendants" sortable header="Children" class="w-16"></Column>
+        <Column field="size" header="Size" sortable class="w-32">
+            <template #body="slotProps">{{ sizeToUnit(slotProps.data.size) }}</template>
+        </Column>
+    </DataTable>
+</template>
+<script setup lang="ts">
+import { sizeToUnit } from '@/utils/StatsSizeVariantToColours';
+import Column from 'primevue/column';
+import DataTable from 'primevue/datatable';
+import { TotalAlbum } from './TotalCard.vue';
+import { computed, ref } from 'vue';
+import StatisticsService from '@/services/statistics-service';
+import { useLycheeStateStore } from '@/stores/LycheeState';
+import { storeToRefs } from 'pinia';
+import { usePreviewData } from '@/composables/preview/getPreviewInfo';
+
+const lycheeStore = useLycheeStateStore();
+const { is_se_preview_enabled, are_nsfw_visible } = storeToRefs(lycheeStore);
+const { getAlbumSizeData } = usePreviewData();
+
+const props = defineProps<{
+    showUsername: boolean;
+    isTotal: boolean;
+    albumId: string | undefined;
+}>();
+
+const emits = defineEmits<{
+	"total": [total: TotalAlbum];
+}>();
+
+const albumSpace = ref(undefined as undefined | App.Http.Resources.Statistics.Album[]);
+const albumData = computed(() => {
+    return albumSpace.value?.filter((a) => !a.is_nsfw || are_nsfw_visible.value);
+});
+
+function loadAlbumSpace() {
+    if (is_se_preview_enabled.value === true) {
+        getAlbumSizeData().then(function (data) {
+            albumSpace.value = data;
+            emits("total", getTotalAlbumData());
+        });
+    } else {
+        StatisticsService.getAlbumSpace().then(function (response)
+            {albumSpace.value = response.data;
+            emits("total", getTotalAlbumData());
+        }
+        );
+    }
+}
+
+function loadTotalAlbumSpace() {
+    if (is_se_preview_enabled.value === true) {
+        getAlbumSizeData().then((data) => albumSpace.value = data);
+    } else {
+        StatisticsService.getTotalAlbumSpace().then((response) => albumSpace.value = response.data);
+    }
+}
+
+function getTotalAlbumData(): TotalAlbum {
+	const sumData: TotalAlbum = {
+		size: 0,
+		num_photos: 0,
+		num_albums: 0,
+	};
+
+	albumData.value?.reduce((acc, a) => {
+			sumData.size += a.size;
+			sumData.num_photos += a.num_photos;
+			return acc;
+		}, sumData);
+
+	sumData.num_albums = albumData.value?.length ?? 0;
+	return sumData;
+};
+
+if (props.isTotal) {
+    loadTotalAlbumSpace();
+} else {
+    loadAlbumSpace();
+}
+
+</script>
\ No newline at end of file
diff --git a/resources/js/components/statistics/SizeVariantMeter.vue b/resources/js/components/statistics/SizeVariantMeter.vue
new file mode 100644
index 00000000000..5de8094a53c
--- /dev/null
+++ b/resources/js/components/statistics/SizeVariantMeter.vue
@@ -0,0 +1,85 @@
+<template>
+    <Panel v-if="sizeVariantSpaceMeter !== undefined" class="max-w-5xl mx-auto border-0">
+    <MeterGroup :value="sizeVariantSpaceMeter" v-if="sizeVariantSpaceMeter.length > 0">
+        <template #label="{ value }">
+            <div class="flex flex-wrap gap-4 w-full sm:justify-between justify-center">
+                <template v-for="val of value" :key="val.label">
+                    <Card class="w-2/5 sm:w-auto border border-surface shadow-none">
+                        <template #content>
+                            <div class="flex justify-between gap-8">
+                                <div class="flex gap-1 flex-col">
+                                    <span class="text-xs sm:text-sm"
+                                        ><span
+                                            class="rounded-full h-3 w-3 inline-block mr-1 sm:mr-2"
+                                            :style="'background-color: ' + val.color"
+                                        ></span
+                                        >{{ val.label }}</span
+                                    >
+                                    <span class="font-bold text-base">{{ val.size }}</span>
+                                </div>
+                            </div>
+                        </template>
+                    </Card>
+                </template>
+            </div>
+        </template>
+    </MeterGroup>
+    <div v-else class="text-center">User does not have data on server.</div>
+</Panel>
+</template>
+<script setup lang="ts">
+import { usePreviewData } from '@/composables/preview/getPreviewInfo';
+import StatisticsService from '@/services/statistics-service';
+import { useLycheeStateStore } from '@/stores/LycheeState';
+import { sizeToUnit, sizeVariantToColour } from '@/utils/StatsSizeVariantToColours';
+import { storeToRefs } from 'pinia';
+import Card from 'primevue/card';
+import MeterGroup from 'primevue/metergroup';
+import Panel from 'primevue/panel';
+import { ref } from 'vue';
+
+type SizeVairantData = {
+	label: string;
+	value: number;
+	size: string;
+	color: string;
+};
+
+const lycheeStore = useLycheeStateStore();
+const sizeVariantSpace = ref(undefined as undefined | App.Http.Resources.Statistics.Sizes[]);
+const sizeVariantSpaceMeter = ref(undefined as undefined | SizeVairantData[]);
+
+const { is_se_preview_enabled } = storeToRefs(lycheeStore);
+
+function loadSizeVariantSpace() {
+	StatisticsService.getSizeVariantSpace().then((response) => {
+		sizeVariantSpace.value = response.data;
+		prepSizeVariantData();
+	});
+}
+
+function prepSizeVariantData() {
+	if (sizeVariantSpace.value === undefined) {
+		return;
+	}
+
+	const total = sizeVariantSpace.value.reduce((acc, sv) => acc + sv.size, 0);
+	sizeVariantSpaceMeter.value = sizeVariantSpace.value.map((sv: App.Http.Resources.Statistics.Sizes) => {
+		return {
+			label: sv.label,
+			value: (sv.size / total) * 100,
+			size: sizeToUnit(sv.size),
+			color: sizeVariantToColour(sv.type),
+		};
+	});
+}
+
+if (is_se_preview_enabled.value === true) {
+		const { getSizeVariantSizeData } = usePreviewData();
+		sizeVariantSpace.value = getSizeVariantSizeData();
+		prepSizeVariantData();
+} else {
+    loadSizeVariantSpace();
+}
+
+</script>
\ No newline at end of file
diff --git a/resources/js/components/statistics/TotalCard.vue b/resources/js/components/statistics/TotalCard.vue
new file mode 100644
index 00000000000..7e0839333ab
--- /dev/null
+++ b/resources/js/components/statistics/TotalCard.vue
@@ -0,0 +1,30 @@
+<template>
+    <Card>
+        <template #content>
+            <div class="flex flex-wrap">
+                <span class="w-full font-bold text-xl">{{ "Total" }}</span>
+                <span class="w-20 text-muted-color-emphasis">{{ "Photos" }}:</span>
+                <span class="w-[calc(100%-5rem)] font-bold">{{ props.total.num_photos }}</span>
+                <template v-if="props.total.num_albums > 1">
+                <span class="w-20 text-muted-color-emphasis">{{ "Albums" }}:</span>
+                <span class="w-[calc(100%-5rem)] font-bold">{{ props.total.num_albums }}</span>
+                </template>
+                <span class="w-20 text-muted-color-emphasis">{{ "Size" }}:</span>
+                <span class="w-[calc(100%-5rem)] font-bold">{{ sizeToUnit(props.total.size) }}</span>
+            </div>
+        </template>
+    </Card>
+</template>
+<script setup lang="ts">
+import { sizeToUnit } from '@/utils/StatsSizeVariantToColours';
+import Card from 'primevue/card';
+
+export type TotalAlbum = {
+        num_photos: number;
+        num_albums: number;
+        size: number;
+    };
+
+const props = defineProps<{ total: TotalAlbum }>();
+
+</script>
\ No newline at end of file
diff --git a/resources/js/views/Statistics.vue b/resources/js/views/Statistics.vue
index bcec606d2b1..4e58611d3ad 100644
--- a/resources/js/views/Statistics.vue
+++ b/resources/js/views/Statistics.vue
@@ -16,101 +16,31 @@
 		This is a preview of the upcoming statistics page.<br />
 		The data shown here are randomly generated and do not reflect your server.
 	</Panel>
-	<Panel v-if="sizeVariantSpaceMeter !== undefined" class="max-w-5xl mx-auto border-0">
-		<MeterGroup :value="sizeVariantSpaceMeter" v-if="sizeVariantSpaceMeter.length > 0">
-			<template #label="{ value }">
-				<div class="flex flex-wrap gap-4 w-full sm:justify-between justify-center">
-					<template v-for="val of value" :key="val.label">
-						<Card class="w-2/5 sm:w-auto border border-surface shadow-none">
-							<template #content>
-								<div class="flex justify-between gap-8">
-									<div class="flex gap-1 flex-col">
-										<span class="text-xs sm:text-sm"
-											><span
-												class="rounded-full h-3 w-3 inline-block mr-1 sm:mr-2"
-												:style="'background-color: ' + val.color"
-											></span
-											>{{ val.label }}</span
-										>
-										<span class="font-bold text-base">{{ val.size }}</span>
-									</div>
-								</div>
-							</template>
-						</Card>
-					</template>
-				</div>
-			</template>
-		</MeterGroup>
-		<div v-else class="text-center">User does not have data on server.</div>
-	</Panel>
-
+	<SizeVariantMeter v-if="load" />
 	<Panel class="max-w-5xl mx-auto border-0" :pt:header:class="'hidden'">
-		<Card v-if="total !== undefined">
-			<template #content>
-				<div class="flex flex-wrap">
-					<span class="w-full font-bold text-xl">{{ "Total" }}</span>
-					<span class="w-20 text-muted-color-emphasis">{{ "Photos" }}:</span>
-					<span class="w-[calc(100%-5rem)] font-bold">{{ total.num_photos }}</span>
-					<span class="w-20 text-muted-color-emphasis">{{ "Albums" }}:</span>
-					<span class="w-[calc(100%-5rem)] font-bold">{{ total.num_albums }}</span>
-					<span class="w-20 text-muted-color-emphasis">{{ "Size" }}:</span>
-					<span class="w-[calc(100%-5rem)] font-bold">{{ sizeToUnit(total.size) }}</span>
-				</div>
-			</template>
-		</Card>
-		<div class="py-4" v-if="albumData !== undefined && albumData.length > 0">
+		<TotalCard v-if="total" :total="total" />
+		<div class="py-4" v-if="load && total">
 			<ToggleSwitch v-model="is_collapsed" class="text-sm"></ToggleSwitch> {{ "Collapse albums sizes" }}
 		</div>
-		<DataTable
-			:value="albumData"
-			size="small"
-			scrollable
-			scrollHeight="600px"
-			:loading="albumData === undefined"
-			v-if="albumData === undefined || albumData.length > 0"
-		>
-			<Column field="username" header="Owner" class="w-32"> </Column>
-			<Column field="title" sortable header="Title"></Column>
-			<Column field="num_photos" sortable header="Photos" class="w-16"></Column>
-			<Column field="num_descendants" sortable header="Children" class="w-16"></Column>
-			<Column field="size" header="Size" sortable class="w-32">
-				<template #body="slotProps">{{ sizeToUnit(slotProps.data.size) }}</template>
-			</Column>
-		</DataTable>
+		<AlbumsTable v-if="load" v-show="!is_collapsed" :show-username="true" :is-total="false" :album-id="undefined" @total="total = $event" />
+		<AlbumsTable v-if="load" v-show="is_collapsed" :show-username="true" :is-total="true" :album-id="undefined" />
 	</Panel>
 </template>
 <script setup lang="ts">
 import Button from "primevue/button";
 import Toolbar from "primevue/toolbar";
 import Panel from "primevue/panel";
-import StatisticsService from "@/services/statistics-service";
 import { useAuthStore } from "@/stores/Auth";
-import { computed, ref } from "vue";
+import { ref } from "vue";
 import { useLycheeStateStore } from "@/stores/LycheeState";
 import { storeToRefs } from "pinia";
 import { useRouter } from "vue-router";
-import { sizeToUnit, sizeVariantToColour } from "@/utils/StatsSizeVariantToColours";
-import MeterGroup from "primevue/metergroup";
-import Card from "primevue/card";
-import Column from "primevue/column";
-import DataTable from "primevue/datatable";
 import ToggleSwitch from "primevue/toggleswitch";
 import { onKeyStroke } from "@vueuse/core";
 import { shouldIgnoreKeystroke } from "@/utils/keybindings-utils";
-import { usePreviewData } from "@/composables/preview/getPreviewInfo";
-
-export type TotalAlbum = {
-	num_photos: number;
-	num_albums: number;
-	size: number;
-};
-
-type SizeVairantData = {
-	label: string;
-	value: number;
-	size: string;
-	color: string;
-};
+import SizeVariantMeter from "@/components/statistics/SizeVariantMeter.vue";
+import TotalCard, { TotalAlbum } from "@/components/statistics/TotalCard.vue";
+import AlbumsTable from "@/components/statistics/AlbumsTable.vue";
 
 const router = useRouter();
 const user = ref(undefined as undefined | App.Http.Resources.Models.UserResource);
@@ -118,42 +48,9 @@ const authStore = useAuthStore();
 const lycheeStore = useLycheeStateStore();
 lycheeStore.init();
 
-const sizeVariantSpace = ref(undefined as undefined | App.Http.Resources.Statistics.Sizes[]);
-const albumSpace = ref(undefined as undefined | App.Http.Resources.Statistics.Album[]);
-const totalAlbumSpace = ref(undefined as undefined | App.Http.Resources.Statistics.Album[]);
-const sizeVariantSpaceMeter = ref(undefined as undefined | SizeVairantData[]);
+const total = ref(undefined as undefined | TotalAlbum);
 const is_collapsed = ref(false);
-
-const albumData = computed(() => {
-	if (is_collapsed.value === false) {
-		return albumSpace.value?.filter((a) => !a.is_nsfw || are_nsfw_visible.value);
-	}
-	return totalAlbumSpace.value?.filter((a) => !a.is_nsfw || are_nsfw_visible.value);
-});
-
-const total = computed(() => {
-	if (albumSpace.value === undefined) {
-		return undefined;
-	}
-
-	const sumData: TotalAlbum = {
-		size: 0,
-		num_photos: 0,
-		num_albums: 0,
-	};
-
-	albumSpace.value
-		?.filter((a) => !a.is_nsfw || are_nsfw_visible.value)
-		?.reduce((acc, a) => {
-			sumData.size += a.size;
-			sumData.num_photos += a.num_photos;
-			return acc;
-		}, sumData);
-
-	sumData.num_albums = albumSpace.value?.filter((a) => !a.is_nsfw || are_nsfw_visible.value)?.length ?? 0;
-
-	return sumData;
-});
+const load = ref(false);
 
 const { is_se_preview_enabled, are_nsfw_visible } = storeToRefs(lycheeStore);
 
@@ -165,56 +62,8 @@ authStore.getUser().then((data) => {
 		router.push({ name: "gallery" });
 	}
 
-	if (is_se_preview_enabled.value === true) {
-		const { getSizeVariantSizeData, getAlbumSizeData } = usePreviewData();
-		sizeVariantSpace.value = getSizeVariantSizeData();
-		prepSizeVariantDonut();
-		getAlbumSizeData().then((data) => {
-			albumSpace.value = data;
-		});
-		getAlbumSizeData().then((data) => {
-			albumSpace.value = data;
-		});
-	} else {
-		loadSizeVariantSpace();
-		loadAlbumSpace();
-		loadTotalAlbumSpace();
-	}
+	load.value = true;
 });
 
-function loadSizeVariantSpace() {
-	StatisticsService.getSizeVariantSpace().then((response) => {
-		sizeVariantSpace.value = response.data;
-		prepSizeVariantDonut();
-	});
-}
-
-function prepSizeVariantDonut() {
-	if (sizeVariantSpace.value === undefined) {
-		return;
-	}
-
-	const total = sizeVariantSpace.value.reduce((acc, sv) => acc + sv.size, 0);
-	sizeVariantSpaceMeter.value = sizeVariantSpace.value.map((sv: App.Http.Resources.Statistics.Sizes) => {
-		return {
-			label: sv.label,
-			value: (sv.size / total) * 100,
-			size: sizeToUnit(sv.size),
-			color: sizeVariantToColour(sv.type),
-		};
-	});
-}
-function loadAlbumSpace() {
-	StatisticsService.getAlbumSpace().then((response) => {
-		albumSpace.value = response.data;
-	});
-}
-
-function loadTotalAlbumSpace() {
-	StatisticsService.getTotalAlbumSpace().then((response) => {
-		totalAlbumSpace.value = response.data;
-	});
-}
-
 onKeyStroke("h", () => !shouldIgnoreKeystroke() && (are_nsfw_visible.value = !are_nsfw_visible.value));
 </script>

From 582bd0d12fdf68d97aa5b0ac268df67ed0dae31c Mon Sep 17 00:00:00 2001
From: ildyria <beviguier@gmail.com>
Date: Mon, 21 Oct 2024 12:45:12 +0200
Subject: [PATCH 3/9] Formatting

---
 .../js/components/statistics/AlbumsTable.vue  | 110 +++++++++---------
 .../statistics/SizeVariantMeter.vue           |  83 +++++++------
 .../js/components/statistics/TotalCard.vue    |  45 ++++---
 3 files changed, 117 insertions(+), 121 deletions(-)

diff --git a/resources/js/components/statistics/AlbumsTable.vue b/resources/js/components/statistics/AlbumsTable.vue
index 512285d2d75..df6610d71e6 100644
--- a/resources/js/components/statistics/AlbumsTable.vue
+++ b/resources/js/components/statistics/AlbumsTable.vue
@@ -1,72 +1,71 @@
 <template>
-    <DataTable
-        :value="albumData"
-        size="small"
-        scrollable
-        scrollHeight="600px"
-        :loading="albumData === undefined"
-        v-if="albumData === undefined || albumData.length > 0"
-    >
-        <Column v-if="props.showUsername" field="username" header="Owner" class="w-32"></Column>
-        <Column field="title" sortable header="Title"></Column>
-        <Column field="num_photos" sortable header="Photos" class="w-16"></Column>
-        <Column field="num_descendants" sortable header="Children" class="w-16"></Column>
-        <Column field="size" header="Size" sortable class="w-32">
-            <template #body="slotProps">{{ sizeToUnit(slotProps.data.size) }}</template>
-        </Column>
-    </DataTable>
+	<DataTable
+		:value="albumData"
+		size="small"
+		scrollable
+		scrollHeight="600px"
+		:loading="albumData === undefined"
+		v-if="albumData === undefined || albumData.length > 0"
+	>
+		<Column v-if="props.showUsername" field="username" header="Owner" class="w-32"></Column>
+		<Column field="title" sortable header="Title"></Column>
+		<Column field="num_photos" sortable header="Photos" class="w-16"></Column>
+		<Column field="num_descendants" sortable header="Children" class="w-16"></Column>
+		<Column field="size" header="Size" sortable class="w-32">
+			<template #body="slotProps">{{ sizeToUnit(slotProps.data.size) }}</template>
+		</Column>
+	</DataTable>
 </template>
 <script setup lang="ts">
-import { sizeToUnit } from '@/utils/StatsSizeVariantToColours';
-import Column from 'primevue/column';
-import DataTable from 'primevue/datatable';
-import { TotalAlbum } from './TotalCard.vue';
-import { computed, ref } from 'vue';
-import StatisticsService from '@/services/statistics-service';
-import { useLycheeStateStore } from '@/stores/LycheeState';
-import { storeToRefs } from 'pinia';
-import { usePreviewData } from '@/composables/preview/getPreviewInfo';
+import { sizeToUnit } from "@/utils/StatsSizeVariantToColours";
+import Column from "primevue/column";
+import DataTable from "primevue/datatable";
+import { TotalAlbum } from "./TotalCard.vue";
+import { computed, ref } from "vue";
+import StatisticsService from "@/services/statistics-service";
+import { useLycheeStateStore } from "@/stores/LycheeState";
+import { storeToRefs } from "pinia";
+import { usePreviewData } from "@/composables/preview/getPreviewInfo";
 
 const lycheeStore = useLycheeStateStore();
 const { is_se_preview_enabled, are_nsfw_visible } = storeToRefs(lycheeStore);
 const { getAlbumSizeData } = usePreviewData();
 
 const props = defineProps<{
-    showUsername: boolean;
-    isTotal: boolean;
-    albumId: string | undefined;
+	showUsername: boolean;
+	isTotal: boolean;
+	albumId: string | undefined;
 }>();
 
 const emits = defineEmits<{
-	"total": [total: TotalAlbum];
+	total: [total: TotalAlbum];
 }>();
 
 const albumSpace = ref(undefined as undefined | App.Http.Resources.Statistics.Album[]);
 const albumData = computed(() => {
-    return albumSpace.value?.filter((a) => !a.is_nsfw || are_nsfw_visible.value);
+	return albumSpace.value?.filter((a) => !a.is_nsfw || are_nsfw_visible.value);
 });
 
 function loadAlbumSpace() {
-    if (is_se_preview_enabled.value === true) {
-        getAlbumSizeData().then(function (data) {
-            albumSpace.value = data;
-            emits("total", getTotalAlbumData());
-        });
-    } else {
-        StatisticsService.getAlbumSpace().then(function (response)
-            {albumSpace.value = response.data;
-            emits("total", getTotalAlbumData());
-        }
-        );
-    }
+	if (is_se_preview_enabled.value === true) {
+		getAlbumSizeData().then(function (data) {
+			albumSpace.value = data;
+			emits("total", getTotalAlbumData());
+		});
+	} else {
+		StatisticsService.getAlbumSpace().then(function (response) {
+			albumSpace.value = response.data;
+			emits("total", getTotalAlbumData());
+		});
+	}
 }
 
 function loadTotalAlbumSpace() {
-    if (is_se_preview_enabled.value === true) {
-        getAlbumSizeData().then((data) => albumSpace.value = data);
-    } else {
-        StatisticsService.getTotalAlbumSpace().then((response) => albumSpace.value = response.data);
-    }
+	if (is_se_preview_enabled.value === true) {
+		getAlbumSizeData().then((data) => (albumSpace.value = data));
+	} else {
+		StatisticsService.getTotalAlbumSpace().then((response) => (albumSpace.value = response.data));
+	}
 }
 
 function getTotalAlbumData(): TotalAlbum {
@@ -77,19 +76,18 @@ function getTotalAlbumData(): TotalAlbum {
 	};
 
 	albumData.value?.reduce((acc, a) => {
-			sumData.size += a.size;
-			sumData.num_photos += a.num_photos;
-			return acc;
-		}, sumData);
+		sumData.size += a.size;
+		sumData.num_photos += a.num_photos;
+		return acc;
+	}, sumData);
 
 	sumData.num_albums = albumData.value?.length ?? 0;
 	return sumData;
-};
+}
 
 if (props.isTotal) {
-    loadTotalAlbumSpace();
+	loadTotalAlbumSpace();
 } else {
-    loadAlbumSpace();
+	loadAlbumSpace();
 }
-
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/js/components/statistics/SizeVariantMeter.vue b/resources/js/components/statistics/SizeVariantMeter.vue
index 5de8094a53c..fe1483de319 100644
--- a/resources/js/components/statistics/SizeVariantMeter.vue
+++ b/resources/js/components/statistics/SizeVariantMeter.vue
@@ -1,42 +1,42 @@
 <template>
-    <Panel v-if="sizeVariantSpaceMeter !== undefined" class="max-w-5xl mx-auto border-0">
-    <MeterGroup :value="sizeVariantSpaceMeter" v-if="sizeVariantSpaceMeter.length > 0">
-        <template #label="{ value }">
-            <div class="flex flex-wrap gap-4 w-full sm:justify-between justify-center">
-                <template v-for="val of value" :key="val.label">
-                    <Card class="w-2/5 sm:w-auto border border-surface shadow-none">
-                        <template #content>
-                            <div class="flex justify-between gap-8">
-                                <div class="flex gap-1 flex-col">
-                                    <span class="text-xs sm:text-sm"
-                                        ><span
-                                            class="rounded-full h-3 w-3 inline-block mr-1 sm:mr-2"
-                                            :style="'background-color: ' + val.color"
-                                        ></span
-                                        >{{ val.label }}</span
-                                    >
-                                    <span class="font-bold text-base">{{ val.size }}</span>
-                                </div>
-                            </div>
-                        </template>
-                    </Card>
-                </template>
-            </div>
-        </template>
-    </MeterGroup>
-    <div v-else class="text-center">User does not have data on server.</div>
-</Panel>
+	<Panel v-if="sizeVariantSpaceMeter !== undefined" class="max-w-5xl mx-auto border-0">
+		<MeterGroup :value="sizeVariantSpaceMeter" v-if="sizeVariantSpaceMeter.length > 0">
+			<template #label="{ value }">
+				<div class="flex flex-wrap gap-4 w-full sm:justify-between justify-center">
+					<template v-for="val of value" :key="val.label">
+						<Card class="w-2/5 sm:w-auto border border-surface shadow-none">
+							<template #content>
+								<div class="flex justify-between gap-8">
+									<div class="flex gap-1 flex-col">
+										<span class="text-xs sm:text-sm"
+											><span
+												class="rounded-full h-3 w-3 inline-block mr-1 sm:mr-2"
+												:style="'background-color: ' + val.color"
+											></span
+											>{{ val.label }}</span
+										>
+										<span class="font-bold text-base">{{ val.size }}</span>
+									</div>
+								</div>
+							</template>
+						</Card>
+					</template>
+				</div>
+			</template>
+		</MeterGroup>
+		<div v-else class="text-center">User does not have data on server.</div>
+	</Panel>
 </template>
 <script setup lang="ts">
-import { usePreviewData } from '@/composables/preview/getPreviewInfo';
-import StatisticsService from '@/services/statistics-service';
-import { useLycheeStateStore } from '@/stores/LycheeState';
-import { sizeToUnit, sizeVariantToColour } from '@/utils/StatsSizeVariantToColours';
-import { storeToRefs } from 'pinia';
-import Card from 'primevue/card';
-import MeterGroup from 'primevue/metergroup';
-import Panel from 'primevue/panel';
-import { ref } from 'vue';
+import { usePreviewData } from "@/composables/preview/getPreviewInfo";
+import StatisticsService from "@/services/statistics-service";
+import { useLycheeStateStore } from "@/stores/LycheeState";
+import { sizeToUnit, sizeVariantToColour } from "@/utils/StatsSizeVariantToColours";
+import { storeToRefs } from "pinia";
+import Card from "primevue/card";
+import MeterGroup from "primevue/metergroup";
+import Panel from "primevue/panel";
+import { ref } from "vue";
 
 type SizeVairantData = {
 	label: string;
@@ -75,11 +75,10 @@ function prepSizeVariantData() {
 }
 
 if (is_se_preview_enabled.value === true) {
-		const { getSizeVariantSizeData } = usePreviewData();
-		sizeVariantSpace.value = getSizeVariantSizeData();
-		prepSizeVariantData();
+	const { getSizeVariantSizeData } = usePreviewData();
+	sizeVariantSpace.value = getSizeVariantSizeData();
+	prepSizeVariantData();
 } else {
-    loadSizeVariantSpace();
+	loadSizeVariantSpace();
 }
-
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/js/components/statistics/TotalCard.vue b/resources/js/components/statistics/TotalCard.vue
index 7e0839333ab..444ad399028 100644
--- a/resources/js/components/statistics/TotalCard.vue
+++ b/resources/js/components/statistics/TotalCard.vue
@@ -1,30 +1,29 @@
 <template>
-    <Card>
-        <template #content>
-            <div class="flex flex-wrap">
-                <span class="w-full font-bold text-xl">{{ "Total" }}</span>
-                <span class="w-20 text-muted-color-emphasis">{{ "Photos" }}:</span>
-                <span class="w-[calc(100%-5rem)] font-bold">{{ props.total.num_photos }}</span>
-                <template v-if="props.total.num_albums > 1">
-                <span class="w-20 text-muted-color-emphasis">{{ "Albums" }}:</span>
-                <span class="w-[calc(100%-5rem)] font-bold">{{ props.total.num_albums }}</span>
-                </template>
-                <span class="w-20 text-muted-color-emphasis">{{ "Size" }}:</span>
-                <span class="w-[calc(100%-5rem)] font-bold">{{ sizeToUnit(props.total.size) }}</span>
-            </div>
-        </template>
-    </Card>
+	<Card>
+		<template #content>
+			<div class="flex flex-wrap">
+				<span class="w-full font-bold text-xl">{{ "Total" }}</span>
+				<span class="w-20 text-muted-color-emphasis">{{ "Photos" }}:</span>
+				<span class="w-[calc(100%-5rem)] font-bold">{{ props.total.num_photos }}</span>
+				<template v-if="props.total.num_albums > 1">
+					<span class="w-20 text-muted-color-emphasis">{{ "Albums" }}:</span>
+					<span class="w-[calc(100%-5rem)] font-bold">{{ props.total.num_albums }}</span>
+				</template>
+				<span class="w-20 text-muted-color-emphasis">{{ "Size" }}:</span>
+				<span class="w-[calc(100%-5rem)] font-bold">{{ sizeToUnit(props.total.size) }}</span>
+			</div>
+		</template>
+	</Card>
 </template>
 <script setup lang="ts">
-import { sizeToUnit } from '@/utils/StatsSizeVariantToColours';
-import Card from 'primevue/card';
+import { sizeToUnit } from "@/utils/StatsSizeVariantToColours";
+import Card from "primevue/card";
 
 export type TotalAlbum = {
-        num_photos: number;
-        num_albums: number;
-        size: number;
-    };
+	num_photos: number;
+	num_albums: number;
+	size: number;
+};
 
 const props = defineProps<{ total: TotalAlbum }>();
-
-</script>
\ No newline at end of file
+</script>

From bac00e809bb4a66325d92d08306f710bb7250770 Mon Sep 17 00:00:00 2001
From: ildyria <beviguier@gmail.com>
Date: Mon, 21 Oct 2024 13:38:02 +0200
Subject: [PATCH 4/9] more work

---
 app/Actions/Statistics/Spaces.php             | 49 +++++++++-
 app/Http/Controllers/StatisticsController.php | 16 +--
 .../Statistics/SpacePerAlbumRequest.php       | 11 +--
 .../Statistics/SpaceSizeVariantRequest.php    | 60 ++++++++++++
 .../js/components/drawers/AlbumStatistics.vue | 98 ++-----------------
 .../statistics/SizeVariantMeter.vue           | 54 +++++-----
 .../js/composables/album/albumStatistics.ts   | 89 +++++++++++++++++
 resources/js/services/statistics-service.ts   |  4 +-
 resources/js/views/Statistics.vue             |  4 +-
 resources/js/views/gallery-panels/Album.vue   |  1 -
 10 files changed, 250 insertions(+), 136 deletions(-)
 create mode 100644 app/Http/Requests/Statistics/SpaceSizeVariantRequest.php
 create mode 100644 resources/js/composables/album/albumStatistics.ts

diff --git a/app/Actions/Statistics/Spaces.php b/app/Actions/Statistics/Spaces.php
index 90afd3d9b7a..c812443b5cc 100644
--- a/app/Actions/Statistics/Spaces.php
+++ b/app/Actions/Statistics/Spaces.php
@@ -63,7 +63,7 @@ public function getFullSpacePerUser(?int $owner_id = null): Collection
 	 *
 	 * @return Collection<int,array{type:SizeVariantType,size:int}>
 	 */
-	public function getSpacePerSizeVariantType(?int $owner_id = null): Collection
+	public function getSpacePerSizeVariantTypePerUser(?int $owner_id = null): Collection
 	{
 		return DB::table('size_variants')
 			->when($owner_id !== null, fn ($query) => $query
@@ -88,6 +88,53 @@ public function getSpacePerSizeVariantType(?int $owner_id = null): Collection
 			]);
 	}
 
+	/**
+	 * Return the amount of data stored on the server (optionally for an album).
+	 *
+	 * @param string $album_id
+	 *
+	 * @return Collection<int,array{type:SizeVariantType,size:int}>
+	 */
+	public function getSpacePerSizeVariantTypePerAlbum(string $album_id): Collection
+	{
+		$query = DB::table('albums')
+			->where('albums.id', '=', $album_id)
+			->joinSub(
+				query: DB::table('albums', 'descendants')->select('descendants.id', 'descendants._lft', 'descendants._rgt'),
+				as: 'descendants',
+				first: function (JoinClause $join) {
+					$join->on('albums._lft', '<=', 'descendants._lft')
+						->on('albums._rgt', '>=', 'descendants._rgt');
+				}
+			)
+			->joinSub(
+				query: DB::table('photos'),
+				as: 'photos',
+				first: 'photos.album_id',
+				operator: '=',
+				second: 'descendants.id',
+			)
+			->joinSub(
+				query: DB::table('size_variants')->select(['size_variants.id', 'size_variants.photo_id', 'size_variants.type', 'size_variants.filesize']),
+				as: 'size_variants',
+				first: 'size_variants.photo_id',
+				operator: '=',
+				second: 'photos.id',
+			)
+			->select(
+				'size_variants.type',
+				DB::raw('SUM(size_variants.filesize) as size')
+			)
+			->groupBy('size_variants.type')
+			->orderBy('size_variants.type', 'asc');
+
+		return $query->get()
+			->map(fn ($item) => [
+				'type' => SizeVariantType::from($item->type),
+				'size' => intval($item->size),
+			]);
+	}
+
 	/**
 	 * Return size statistics per album.
 	 *
diff --git a/app/Http/Controllers/StatisticsController.php b/app/Http/Controllers/StatisticsController.php
index cbd1ec9a014..4fdabca7ea9 100644
--- a/app/Http/Controllers/StatisticsController.php
+++ b/app/Http/Controllers/StatisticsController.php
@@ -5,6 +5,7 @@
 use App\Actions\Statistics\Spaces;
 use App\Http\Requests\Statistics\SpacePerAlbumRequest;
 use App\Http\Requests\Statistics\SpacePerUserRequest;
+use App\Http\Requests\Statistics\SpaceSizeVariantRequest;
 use App\Http\Resources\Statistics\Album;
 use App\Http\Resources\Statistics\Sizes;
 use App\Http\Resources\Statistics\UserSpace;
@@ -29,16 +30,19 @@ public function getSpacePerUser(SpacePerUserRequest $request, Spaces $spaces): C
 	}
 
 	/**
-	 * @param SpacePerUserRequest $request
-	 * @param Spaces              $spaces
+	 * @param SpaceSizeVariantRequest $request
+	 * @param Spaces                  $spaces
 	 *
 	 * @return Collection<int,Sizes>
 	 */
-	public function getSpacePerSizeVariantType(SpacePerUserRequest $request, Spaces $spaces): Collection
+	public function getSpacePerSizeVariantType(SpaceSizeVariantRequest $request, Spaces $spaces): Collection
 	{
-		$spaceData = $spaces->getSpacePerSizeVariantType(
-			owner_id: $request->ownerId()
-		);
+		$albumId = $request->album()?->id;
+		$ownerId = $albumId === null ? $request->ownerId() : null;
+
+		$spaceData = $albumId === null
+			? $spaces->getSpacePerSizeVariantTypePerUser(owner_id: $ownerId)
+			: $spaces->getSpacePerSizeVariantTypePerAlbum(album_id: $albumId);
 
 		return Sizes::collect($spaceData);
 	}
diff --git a/app/Http/Requests/Statistics/SpacePerAlbumRequest.php b/app/Http/Requests/Statistics/SpacePerAlbumRequest.php
index 0b899ae08e0..cd583a4d493 100644
--- a/app/Http/Requests/Statistics/SpacePerAlbumRequest.php
+++ b/app/Http/Requests/Statistics/SpacePerAlbumRequest.php
@@ -2,14 +2,13 @@
 
 namespace App\Http\Requests\Statistics;
 
-use App\Contracts\Http\Requests\HasAlbum;
+use App\Contracts\Http\Requests\HasAbstractAlbum;
 use App\Contracts\Http\Requests\HasOwnerId;
 use App\Contracts\Http\Requests\RequestAttribute;
 use App\Contracts\Models\AbstractAlbum;
 use App\Http\Requests\BaseApiRequest;
-use App\Http\Requests\Traits\HasAlbumTrait;
+use App\Http\Requests\Traits\HasAbstractAlbumTrait;
 use App\Http\Requests\Traits\HasOwnerIdTrait;
-use App\Models\Album;
 use App\Models\Configs;
 use App\Policies\AlbumPolicy;
 use App\Policies\SettingsPolicy;
@@ -17,9 +16,9 @@
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Gate;
 
-class SpacePerAlbumRequest extends BaseApiRequest implements HasAlbum, HasOwnerId
+class SpacePerAlbumRequest extends BaseApiRequest implements HasAbstractAlbum, HasOwnerId
 {
-	use HasAlbumTrait;
+	use HasAbstractAlbumTrait;
 	use HasOwnerIdTrait;
 
 	/**
@@ -51,7 +50,7 @@ protected function processValidatedValues(array $values, array $files): void
 	{
 		/** @var string|null */
 		$albumID = $values[RequestAttribute::ALBUM_ID_ATTRIBUTE] ?? null;
-		$this->album = $albumID === null ? null : Album::query()->findOrFail($albumID);
+		$this->album = $this->albumFactory->findNullalbleAbstractAlbumOrFail($albumID);
 
 		// Filter only to user if user is not admin
 		if (Auth::check() && Auth::user()?->may_administrate !== true) {
diff --git a/app/Http/Requests/Statistics/SpaceSizeVariantRequest.php b/app/Http/Requests/Statistics/SpaceSizeVariantRequest.php
new file mode 100644
index 00000000000..b85c18d3ac1
--- /dev/null
+++ b/app/Http/Requests/Statistics/SpaceSizeVariantRequest.php
@@ -0,0 +1,60 @@
+<?php
+
+namespace App\Http\Requests\Statistics;
+
+use App\Contracts\Http\Requests\HasAbstractAlbum;
+use App\Contracts\Http\Requests\HasOwnerId;
+use App\Contracts\Http\Requests\RequestAttribute;
+use App\Contracts\Models\AbstractAlbum;
+use App\Http\Requests\BaseApiRequest;
+use App\Http\Requests\Traits\HasAbstractAlbumTrait;
+use App\Http\Requests\Traits\HasOwnerIdTrait;
+use App\Models\User;
+use App\Policies\AlbumPolicy;
+use App\Policies\UserPolicy;
+use App\Rules\RandomIDRule;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Gate;
+
+class SpaceSizeVariantRequest extends BaseApiRequest implements HasAbstractAlbum, HasOwnerId
+{
+	use HasAbstractAlbumTrait;
+	use HasOwnerIdTrait;
+
+	/**
+	 * {@inheritDoc}
+	 */
+	public function authorize(): bool
+	{
+		if ($this->album === null) {
+			return Gate::check(UserPolicy::CAN_EDIT, [User::class]);
+		}
+
+		return Gate::check(AlbumPolicy::CAN_ACCESS, [AbstractAlbum::class, $this->album]);
+	}
+
+	/**
+	 * {@inheritDoc}
+	 */
+	public function rules(): array
+	{
+		return [
+			RequestAttribute::ALBUM_ID_ATTRIBUTE => ['sometimes', new RandomIDRule(true)],
+		];
+	}
+
+	/**
+	 * {@inheritDoc}
+	 */
+	protected function processValidatedValues(array $values, array $files): void
+	{
+		/** @var string|null */
+		$albumID = $values[RequestAttribute::ALBUM_ID_ATTRIBUTE] ?? null;
+		$this->album = $this->albumFactory->findNullalbleAbstractAlbumOrFail($albumID);
+
+		// Filter only to user if user is not admin
+		if (Auth::check() && Auth::user()?->may_administrate !== true) {
+			$this->owner_id = intval(Auth::id());
+		}
+	}
+}
diff --git a/resources/js/components/drawers/AlbumStatistics.vue b/resources/js/components/drawers/AlbumStatistics.vue
index 510b0d3936c..f567852a51d 100644
--- a/resources/js/components/drawers/AlbumStatistics.vue
+++ b/resources/js/components/drawers/AlbumStatistics.vue
@@ -15,6 +15,8 @@
 				</template>
 			</Card>
 
+			<SizeVariantMeter v-if="props.config.is_model_album" :album-id="props.album.id" />
+
 			<DataTable
 				v-if="photosData.lens.length > 1"
 				:value="photosData.lens"
@@ -70,7 +72,6 @@
 import StatisticsService from "@/services/statistics-service";
 import { useLycheeStateStore } from "@/stores/LycheeState";
 import { sizeToUnit } from "@/utils/StatsSizeVariantToColours";
-import { TotalAlbum } from "@/views/Statistics.vue";
 import { storeToRefs } from "pinia";
 import Card from "primevue/card";
 import Column from "primevue/column";
@@ -78,43 +79,26 @@ import DataTable from "primevue/datatable";
 import Panel from "primevue/panel";
 import { computed, Ref, ref } from "vue";
 import { Collapse } from "vue-collapsed";
+import { TotalAlbum } from "../statistics/TotalCard.vue";
+import { useAlbumsStatistics } from "@/composables/album/albumStatistics";
+import SizeVariantMeter from "../statistics/SizeVariantMeter.vue";
 
 const lycheeStore = useLycheeStateStore();
 const { are_nsfw_visible } = storeToRefs(lycheeStore);
 
 const areStatisticsOpen = defineModel("visible", { default: false }) as Ref<boolean>;
 
-export type DataForTable = { key: string; value: number };
-
-export type PhotoStats = {
-	iso: DataForTable[];
-	focal: DataForTable[];
-	lens: DataForTable[];
-	model: DataForTable[];
-	shutter: DataForTable[];
-	aperture: DataForTable[];
-	year: DataForTable[];
-	month: DataForTable[];
-	day: DataForTable[];
-};
-
 const props = defineProps<{
 	photos: App.Http.Resources.Models.PhotoResource[];
 	album: App.Http.Resources.Models.AlbumResource | App.Http.Resources.Models.SmartAlbumResource | App.Http.Resources.Models.TagAlbumResource;
 	config: App.Http.Resources.GalleryConfigs.AlbumConfig;
 }>();
 
+const { getStatistics } = useAlbumsStatistics();
+
 const photosData = ref(getStatistics(props.photos));
 const albumSpace = ref(undefined as undefined | App.Http.Resources.Statistics.Album[]);
 const totalAlbumSpace = ref(undefined as undefined | App.Http.Resources.Statistics.Album[]);
-const is_collapsed = ref(false);
-
-const albumData = computed(() => {
-	if (is_collapsed.value === false) {
-		return albumSpace.value?.filter((a) => !a.is_nsfw || are_nsfw_visible.value);
-	}
-	return totalAlbumSpace.value?.filter((a) => !a.is_nsfw || are_nsfw_visible.value);
-});
 
 const total = computed(() => {
 	if (albumSpace.value === undefined) {
@@ -140,74 +124,6 @@ const total = computed(() => {
 	return sumData;
 });
 
-function getStatistics(photos: App.Http.Resources.Models.PhotoResource[]): PhotoStats {
-	const stats = {
-		iso: {} as Record<string, number>,
-		focal: {} as Record<string, number>,
-		lens: {} as Record<string, number>,
-		model: {} as Record<string, number>,
-		shutter: {} as Record<string, number>,
-		aperture: {} as Record<string, number>,
-		year: {} as Record<string, number>,
-		month: {} as Record<string, number>,
-		day: {} as Record<string, number>,
-	};
-	for (const photo of photos) {
-		if (photo.precomputed.is_video || photo.precomputed.is_raw) {
-			continue;
-		}
-
-		if (photo.iso) {
-			stats.iso[photo.iso] = stats.iso[photo.iso] ? stats.iso[photo.iso] + 1 : 1;
-		}
-		if (photo.focal) {
-			stats.focal[photo.focal] = stats.focal[photo.focal] ? stats.focal[photo.focal] + 1 : 1;
-		}
-		if (photo.preformatted.aperture) {
-			stats.aperture["ƒ / " + photo.preformatted.aperture] = stats.aperture["ƒ / " + photo.preformatted.aperture]
-				? stats.aperture["ƒ / " + photo.preformatted.aperture] + 1
-				: 1;
-		}
-		if (photo.lens) {
-			stats.lens[photo.lens] = stats.lens[photo.lens] ? stats.lens[photo.lens] + 1 : 1;
-		}
-		if (photo.model) {
-			stats.model[photo.model] = stats.model[photo.model] ? stats.model[photo.model] + 1 : 1;
-		}
-		if (photo.preformatted.shutter) {
-			stats.shutter[photo.preformatted.shutter] = stats.shutter[photo.preformatted.shutter] ? stats.shutter[photo.preformatted.shutter] + 1 : 1;
-		}
-		if (photo.taken_at) {
-			const year = photo.taken_at.slice(0, 4);
-			const month = photo.taken_at.slice(0, 7);
-			const day = photo.taken_at.slice(0, 10);
-			stats.year[year] = stats.year[year] ? stats.year[year] + 1 : 1;
-			stats.month[month] = stats.month[month] ? stats.month[month] + 1 : 1;
-			stats.day[day] = stats.day[day] ? stats.day[day] + 1 : 1;
-		}
-	}
-
-	return {
-		iso: recordToType(stats.iso),
-		focal: recordToType(stats.focal),
-		lens: recordToType(stats.lens),
-		model: recordToType(stats.model),
-		shutter: recordToType(stats.shutter),
-		aperture: recordToType(stats.aperture),
-		year: recordToType(stats.year),
-		month: recordToType(stats.month),
-		day: recordToType(stats.day),
-	};
-}
-
-function recordToType(record: Record<string, number>): DataForTable[] {
-	const data = [] as DataForTable[];
-	Object.entries(record).forEach(([key, value]) => {
-		data.push({ key, value });
-	});
-	return data.sort((a, b) => b.value - a.value);
-}
-
 if (props.config.is_base_album) {
 	StatisticsService.getAlbumSpace(props.album.id).then((response) => {
 		albumSpace.value = response.data;
diff --git a/resources/js/components/statistics/SizeVariantMeter.vue b/resources/js/components/statistics/SizeVariantMeter.vue
index fe1483de319..5e17b2280d2 100644
--- a/resources/js/components/statistics/SizeVariantMeter.vue
+++ b/resources/js/components/statistics/SizeVariantMeter.vue
@@ -1,31 +1,26 @@
 <template>
-	<Panel v-if="sizeVariantSpaceMeter !== undefined" class="max-w-5xl mx-auto border-0">
-		<MeterGroup :value="sizeVariantSpaceMeter" v-if="sizeVariantSpaceMeter.length > 0">
-			<template #label="{ value }">
-				<div class="flex flex-wrap gap-4 w-full sm:justify-between justify-center">
-					<template v-for="val of value" :key="val.label">
-						<Card class="w-2/5 sm:w-auto border border-surface shadow-none">
-							<template #content>
-								<div class="flex justify-between gap-8">
-									<div class="flex gap-1 flex-col">
-										<span class="text-xs sm:text-sm"
-											><span
-												class="rounded-full h-3 w-3 inline-block mr-1 sm:mr-2"
-												:style="'background-color: ' + val.color"
-											></span
-											>{{ val.label }}</span
-										>
-										<span class="font-bold text-base">{{ val.size }}</span>
-									</div>
+	<MeterGroup :value="sizeVariantSpaceMeter" v-if="sizeVariantSpaceMeter && sizeVariantSpaceMeter.length > 0">
+		<template #label="{ value }">
+			<div class="flex flex-wrap gap-4 w-full sm:justify-between justify-center">
+				<template v-for="val of value" :key="val.label">
+					<Card class="w-2/5 sm:w-auto border border-surface shadow-none">
+						<template #content>
+							<div class="flex justify-between gap-8">
+								<div class="flex gap-1 flex-col">
+									<span class="text-xs sm:text-sm"
+										><span class="rounded-full h-3 w-3 inline-block mr-1 sm:mr-2" :style="'background-color: ' + val.color"></span
+										>{{ val.label }}</span
+									>
+									<span class="font-bold text-base">{{ val.size }}</span>
 								</div>
-							</template>
-						</Card>
-					</template>
-				</div>
-			</template>
-		</MeterGroup>
-		<div v-else class="text-center">User does not have data on server.</div>
-	</Panel>
+							</div>
+						</template>
+					</Card>
+				</template>
+			</div>
+		</template>
+	</MeterGroup>
+	<div v-else class="text-center">User does not have data on server.</div>
 </template>
 <script setup lang="ts">
 import { usePreviewData } from "@/composables/preview/getPreviewInfo";
@@ -35,7 +30,6 @@ import { sizeToUnit, sizeVariantToColour } from "@/utils/StatsSizeVariantToColou
 import { storeToRefs } from "pinia";
 import Card from "primevue/card";
 import MeterGroup from "primevue/metergroup";
-import Panel from "primevue/panel";
 import { ref } from "vue";
 
 type SizeVairantData = {
@@ -45,6 +39,10 @@ type SizeVairantData = {
 	color: string;
 };
 
+const props = defineProps<{
+	albumId: string | null;
+}>();
+
 const lycheeStore = useLycheeStateStore();
 const sizeVariantSpace = ref(undefined as undefined | App.Http.Resources.Statistics.Sizes[]);
 const sizeVariantSpaceMeter = ref(undefined as undefined | SizeVairantData[]);
@@ -52,7 +50,7 @@ const sizeVariantSpaceMeter = ref(undefined as undefined | SizeVairantData[]);
 const { is_se_preview_enabled } = storeToRefs(lycheeStore);
 
 function loadSizeVariantSpace() {
-	StatisticsService.getSizeVariantSpace().then((response) => {
+	StatisticsService.getSizeVariantSpace(props.albumId).then((response) => {
 		sizeVariantSpace.value = response.data;
 		prepSizeVariantData();
 	});
diff --git a/resources/js/composables/album/albumStatistics.ts b/resources/js/composables/album/albumStatistics.ts
new file mode 100644
index 00000000000..306c4df4f28
--- /dev/null
+++ b/resources/js/composables/album/albumStatistics.ts
@@ -0,0 +1,89 @@
+export type DataForTable = { key: string; value: number };
+
+export type PhotoStats = {
+	iso: DataForTable[];
+	focal: DataForTable[];
+	lens: DataForTable[];
+	model: DataForTable[];
+	shutter: DataForTable[];
+	aperture: DataForTable[];
+	year: DataForTable[];
+	month: DataForTable[];
+	day: DataForTable[];
+};
+
+export function useAlbumsStatistics() {
+	function getStatistics(photos: App.Http.Resources.Models.PhotoResource[]): PhotoStats {
+		const stats = {
+			iso: {} as Record<string, number>,
+			focal: {} as Record<string, number>,
+			lens: {} as Record<string, number>,
+			model: {} as Record<string, number>,
+			shutter: {} as Record<string, number>,
+			aperture: {} as Record<string, number>,
+			year: {} as Record<string, number>,
+			month: {} as Record<string, number>,
+			day: {} as Record<string, number>,
+		};
+		for (const photo of photos) {
+			if (photo.precomputed.is_video || photo.precomputed.is_raw) {
+				continue;
+			}
+
+			if (photo.iso) {
+				stats.iso[photo.iso] = stats.iso[photo.iso] ? stats.iso[photo.iso] + 1 : 1;
+			}
+			if (photo.focal) {
+				stats.focal[photo.focal] = stats.focal[photo.focal] ? stats.focal[photo.focal] + 1 : 1;
+			}
+			if (photo.preformatted.aperture) {
+				stats.aperture["ƒ / " + photo.preformatted.aperture] = stats.aperture["ƒ / " + photo.preformatted.aperture]
+					? stats.aperture["ƒ / " + photo.preformatted.aperture] + 1
+					: 1;
+			}
+			if (photo.lens) {
+				stats.lens[photo.lens] = stats.lens[photo.lens] ? stats.lens[photo.lens] + 1 : 1;
+			}
+			if (photo.model) {
+				stats.model[photo.model] = stats.model[photo.model] ? stats.model[photo.model] + 1 : 1;
+			}
+			if (photo.preformatted.shutter) {
+				stats.shutter[photo.preformatted.shutter] = stats.shutter[photo.preformatted.shutter]
+					? stats.shutter[photo.preformatted.shutter] + 1
+					: 1;
+			}
+			if (photo.taken_at) {
+				const year = photo.taken_at.slice(0, 4);
+				const month = photo.taken_at.slice(0, 7);
+				const day = photo.taken_at.slice(0, 10);
+				stats.year[year] = stats.year[year] ? stats.year[year] + 1 : 1;
+				stats.month[month] = stats.month[month] ? stats.month[month] + 1 : 1;
+				stats.day[day] = stats.day[day] ? stats.day[day] + 1 : 1;
+			}
+		}
+
+		return {
+			iso: recordToType(stats.iso),
+			focal: recordToType(stats.focal),
+			lens: recordToType(stats.lens),
+			model: recordToType(stats.model),
+			shutter: recordToType(stats.shutter),
+			aperture: recordToType(stats.aperture),
+			year: recordToType(stats.year),
+			month: recordToType(stats.month),
+			day: recordToType(stats.day),
+		};
+	}
+
+	function recordToType(record: Record<string, number>): DataForTable[] {
+		const data = [] as DataForTable[];
+		Object.entries(record).forEach(([key, value]) => {
+			data.push({ key, value });
+		});
+		return data.sort((a, b) => b.value - a.value);
+	}
+
+	return {
+		getStatistics,
+	};
+}
diff --git a/resources/js/services/statistics-service.ts b/resources/js/services/statistics-service.ts
index fdd076b00cf..8d8629e32b7 100644
--- a/resources/js/services/statistics-service.ts
+++ b/resources/js/services/statistics-service.ts
@@ -5,8 +5,8 @@ const StatisticsService = {
 	getUserSpace(): Promise<AxiosResponse<App.Http.Resources.Statistics.UserSpace[]>> {
 		return axios.get(`${Constants.getApiUrl()}Statistics::userSpace`, { data: {} });
 	},
-	getSizeVariantSpace(): Promise<AxiosResponse<App.Http.Resources.Statistics.Sizes[]>> {
-		return axios.get(`${Constants.getApiUrl()}Statistics::sizeVariantSpace`, { data: {} });
+	getSizeVariantSpace(albumId: string | null = null): Promise<AxiosResponse<App.Http.Resources.Statistics.Sizes[]>> {
+		return axios.get(`${Constants.getApiUrl()}Statistics::sizeVariantSpace`, { params: { album_id: albumId }, data: {} });
 	},
 	getAlbumSpace(albumId: string | null = null): Promise<AxiosResponse<App.Http.Resources.Statistics.Album[]>> {
 		return axios.get(`${Constants.getApiUrl()}Statistics::albumSpace`, { params: { album_id: albumId }, data: {} });
diff --git a/resources/js/views/Statistics.vue b/resources/js/views/Statistics.vue
index 4e58611d3ad..c24ec6b8709 100644
--- a/resources/js/views/Statistics.vue
+++ b/resources/js/views/Statistics.vue
@@ -16,7 +16,9 @@
 		This is a preview of the upcoming statistics page.<br />
 		The data shown here are randomly generated and do not reflect your server.
 	</Panel>
-	<SizeVariantMeter v-if="load" />
+	<Panel class="max-w-5xl mx-auto border-0">
+		<SizeVariantMeter v-if="load" :album-id="null" />
+	</Panel>
 	<Panel class="max-w-5xl mx-auto border-0" :pt:header:class="'hidden'">
 		<TotalCard v-if="total" :total="total" />
 		<div class="py-4" v-if="load && total">
diff --git a/resources/js/views/gallery-panels/Album.vue b/resources/js/views/gallery-panels/Album.vue
index 54827839390..0fbde0a5c8b 100644
--- a/resources/js/views/gallery-panels/Album.vue
+++ b/resources/js/views/gallery-panels/Album.vue
@@ -35,7 +35,6 @@
 				<AlbumHero v-if="!noData" :album="album" @open-sharing-modal="toggleShareAlbum" @open-statistics="toggleStatistics" />
 				<template v-if="is_se_enabled">
 					<AlbumStatistics
-						v-if="photos !== null && photos.length > 0"
 						:photos="photos"
 						:config="config"
 						:album="album"

From 916fc013065b58a9a04ecdb22cc5812f485246e9 Mon Sep 17 00:00:00 2001
From: ildyria <beviguier@gmail.com>
Date: Mon, 21 Oct 2024 20:02:49 +0200
Subject: [PATCH 5/9] done

---
 app/Actions/Statistics/Spaces.php             |  26 +++-
 .../Statistics/SpacePerAlbumRequest.php       |   2 +-
 .../Statistics/SpaceSizeVariantRequest.php    |   2 +-
 .../js/components/drawers/AlbumStatistics.vue | 126 ++++++++----------
 resources/js/components/gallery/AlbumHero.vue |   7 +-
 .../js/components/statistics/AlbumsTable.vue  |  23 +---
 .../statistics/SizeVariantMeter.vue           |  10 +-
 .../js/components/statistics/TotalCard.vue    |   4 +-
 .../js/composables/album/albumStatistics.ts   |  20 +++
 resources/js/style/preset.ts                  |  12 +-
 resources/js/views/gallery-panels/Album.vue   |   2 +-
 11 files changed, 120 insertions(+), 114 deletions(-)

diff --git a/app/Actions/Statistics/Spaces.php b/app/Actions/Statistics/Spaces.php
index c812443b5cc..82df2af7cab 100644
--- a/app/Actions/Statistics/Spaces.php
+++ b/app/Actions/Statistics/Spaces.php
@@ -146,7 +146,18 @@ public function getSpacePerSizeVariantTypePerAlbum(string $album_id): Collection
 	public function getSpacePerAlbum(?string $album_id = null, ?int $owner_id = null)
 	{
 		$query = DB::table('albums')
-			->when($album_id !== null, fn ($query) => $query->where('albums.id', '=', $album_id))
+			->when($album_id !== null,
+				fn ($query) => $query
+					->joinSub(
+						query: DB::table('albums', 'parent')->select('parent.id', 'parent._lft', 'parent._rgt'),
+						as: 'parent',
+						first: function (JoinClause $join) {
+							$join->on('albums._lft', '>=', 'parent._lft')
+								->on('albums._rgt', '<=', 'parent._rgt');
+						}
+					)
+					->where('parent.id', '=', $album_id)
+			)
 			->when($owner_id !== null, fn ($query) => $query->joinSub(
 				query: DB::table('base_albums')->select(['base_albums.id', 'base_albums.owner_id']),
 				as: 'base_albums',
@@ -258,7 +269,18 @@ public function getTotalSpacePerAlbum(?string $album_id = null, ?int $owner_id =
 	public function getPhotoCountPerAlbum(?string $album_id = null, ?int $owner_id = null)
 	{
 		$query = DB::table('albums')
-			->when($album_id !== null, fn ($query) => $query->where('albums.id', '=', $album_id))
+			->when($album_id !== null,
+				fn ($query) => $query
+					->joinSub(
+						query: DB::table('albums', 'parent')->select('parent.id', 'parent._lft', 'parent._rgt'),
+						as: 'parent',
+						first: function (JoinClause $join) {
+							$join->on('albums._lft', '>=', 'parent._lft')
+								->on('albums._rgt', '<=', 'parent._rgt');
+						}
+					)
+					->where('parent.id', '=', $album_id)
+			)
 			->joinSub(
 				query: DB::table('base_albums')->select(['base_albums.id', 'base_albums.owner_id', 'base_albums.title', 'base_albums.is_nsfw']),
 				as: 'base_albums',
diff --git a/app/Http/Requests/Statistics/SpacePerAlbumRequest.php b/app/Http/Requests/Statistics/SpacePerAlbumRequest.php
index cd583a4d493..b24802f9a79 100644
--- a/app/Http/Requests/Statistics/SpacePerAlbumRequest.php
+++ b/app/Http/Requests/Statistics/SpacePerAlbumRequest.php
@@ -30,7 +30,7 @@ public function authorize(): bool
 			return Gate::check(SettingsPolicy::CAN_SEE_STATISTICS, [Configs::class]);
 		}
 
-		return Gate::check(AlbumPolicy::CAN_ACCESS, [AbstractAlbum::class, $this->album]);
+		return Auth::check() && Gate::check(AlbumPolicy::CAN_ACCESS, [AbstractAlbum::class, $this->album]);
 	}
 
 	/**
diff --git a/app/Http/Requests/Statistics/SpaceSizeVariantRequest.php b/app/Http/Requests/Statistics/SpaceSizeVariantRequest.php
index b85c18d3ac1..30918f4d6fc 100644
--- a/app/Http/Requests/Statistics/SpaceSizeVariantRequest.php
+++ b/app/Http/Requests/Statistics/SpaceSizeVariantRequest.php
@@ -30,7 +30,7 @@ public function authorize(): bool
 			return Gate::check(UserPolicy::CAN_EDIT, [User::class]);
 		}
 
-		return Gate::check(AlbumPolicy::CAN_ACCESS, [AbstractAlbum::class, $this->album]);
+		return Auth::check() && Gate::check(AlbumPolicy::CAN_ACCESS, [AbstractAlbum::class, $this->album]);
 	}
 
 	/**
diff --git a/resources/js/components/drawers/AlbumStatistics.vue b/resources/js/components/drawers/AlbumStatistics.vue
index f567852a51d..0105a31848b 100644
--- a/resources/js/components/drawers/AlbumStatistics.vue
+++ b/resources/js/components/drawers/AlbumStatistics.vue
@@ -1,91 +1,82 @@
 <template>
-	<Collapse class="w-full flex justify-center flex-wrap flex-row-reverse" :when="areStatisticsOpen">
-		<Panel class="border-0 w-full" :pt:content:class="'flex justify-evenly flex-wrap'">
-			<Card v-if="total !== undefined" class="max-w-xs w-full">
-				<template #content>
-					<div class="flex flex-wrap">
-						<span class="w-full font-bold text-xl">{{ "Total" }}</span>
-						<span class="w-20 text-muted-color-emphasis">{{ "Photos" }}:</span>
-						<span class="w-[calc(100%-5rem)] font-bold">{{ total.num_photos }}</span>
-						<span class="w-20 text-muted-color-emphasis">{{ "Albums" }}:</span>
-						<span class="w-[calc(100%-5rem)] font-bold">{{ total.num_albums }}</span>
-						<span class="w-20 text-muted-color-emphasis">{{ "Size" }}:</span>
-						<span class="w-[calc(100%-5rem)] font-bold">{{ sizeToUnit(total.size) }}</span>
-					</div>
-				</template>
-			</Card>
-
+	<Collapse class="w-full flex flex-wrap justify-center" :when="areStatisticsOpen">
+		<Panel class="border-0 w-full" :pt:header:class="'hidden'" :pt:content:class="'flex sm:justify-center flex-wrap justify-start'">
+			<TotalCard v-if="total !== undefined" :total="total" />
 			<SizeVariantMeter v-if="props.config.is_model_album" :album-id="props.album.id" />
-
+		</Panel>
+		<Panel
+			class="border-0 w-full max-w-6xl"
+			:pt:header:class="'hidden'"
+			:pt:content:class="'flex justify-evenly shadow-inner shad shadow-black/10 rounded-xl p-4 bg-surface-50 dark:bg-surface-950/20'"
+			v-if="photos.length > 0"
+		>
 			<DataTable
-				v-if="photosData.lens.length > 1"
 				:value="photosData.lens"
 				scrollable
 				size="small"
 				scrollHeight="13rem"
-				class="max-w-xs w-full"
+				class="max-w-xs w-full border-r-surface-300 dark:border-r-surface-700 border-r"
+				:dt="dtScheme"
 			>
 				<Column field="key" header="Lens"></Column>
-				<Column field="value" header="Count"></Column>
+				<Column field="value" header=""></Column>
+				<template #empty> No data. </template>
 			</DataTable>
 			<DataTable
-				v-if="photosData.shutter.length > 1"
 				:value="photosData.shutter"
 				scrollable
 				size="small"
 				scrollHeight="13rem"
-				class="max-w-xs w-full"
+				class="max-w-xs w-full border-r-surface-300 dark:border-r-surface-700 border-r"
+				:dt="dtScheme"
 			>
 				<Column field="key" header="Shutter speed"></Column>
-				<Column field="value" header="Count"></Column>
+				<Column field="value" header=""></Column>
+				<template #empty> No data. </template>
 			</DataTable>
 			<DataTable
-				v-if="photosData.aperture.length > 1"
 				:value="photosData.aperture"
 				scrollable
 				size="small"
 				scrollHeight="13rem"
-				class="max-w-xs w-full"
+				class="max-w-xs w-full border-r-surface-300 dark:border-r-surface-700 border-r"
+				:dt="dtScheme"
 			>
 				<Column field="key" header="Aperture"></Column>
-				<Column field="value" header="Count"></Column>
-			</DataTable>
-			<DataTable v-if="photosData.iso.length > 1" :value="photosData.iso" scrollable size="small" scrollHeight="13rem" class="max-w-xs w-full">
-				<Column field="key" header="ISO"></Column>
-				<Column field="value" header="Count"></Column>
+				<Column field="value" header=""></Column>
+				<template #empty> No data. </template>
 			</DataTable>
 			<DataTable
-				v-if="photosData.model.length > 1"
-				:value="photosData.model"
+				:value="photosData.iso"
 				scrollable
 				size="small"
 				scrollHeight="13rem"
-				class="max-w-xs w-full"
+				class="max-w-xs w-full border-r-surface-300 dark:border-r-surface-700 border-r"
+				:dt="dtScheme"
 			>
+				<Column field="key" header="ISO"></Column>
+				<Column field="value" header=""></Column>
+				<template #empty> No data. </template>
+			</DataTable>
+			<DataTable :value="photosData.model" scrollable size="small" scrollHeight="13rem" class="max-w-xs w-full" :dt="dtScheme">
 				<Column field="key" header="ISO"></Column>
 				<Column field="value" header="Count"></Column>
+				<template #empty> No data. </template>
 			</DataTable>
 		</Panel>
 	</Collapse>
 </template>
 <script setup lang="ts">
 import StatisticsService from "@/services/statistics-service";
-import { useLycheeStateStore } from "@/stores/LycheeState";
-import { sizeToUnit } from "@/utils/StatsSizeVariantToColours";
-import { storeToRefs } from "pinia";
-import Card from "primevue/card";
 import Column from "primevue/column";
 import DataTable from "primevue/datatable";
 import Panel from "primevue/panel";
-import { computed, Ref, ref } from "vue";
+import { Ref, ref } from "vue";
 import { Collapse } from "vue-collapsed";
-import { TotalAlbum } from "../statistics/TotalCard.vue";
+import TotalCard, { TotalAlbum } from "../statistics/TotalCard.vue";
 import { useAlbumsStatistics } from "@/composables/album/albumStatistics";
 import SizeVariantMeter from "../statistics/SizeVariantMeter.vue";
 
-const lycheeStore = useLycheeStateStore();
-const { are_nsfw_visible } = storeToRefs(lycheeStore);
-
 const areStatisticsOpen = defineModel("visible", { default: false }) as Ref<boolean>;
 
 const props = defineProps<{
@@ -97,40 +88,29 @@ const props = defineProps<{
 const { getStatistics } = useAlbumsStatistics();
 
 const photosData = ref(getStatistics(props.photos));
-const albumSpace = ref(undefined as undefined | App.Http.Resources.Statistics.Album[]);
-const totalAlbumSpace = ref(undefined as undefined | App.Http.Resources.Statistics.Album[]);
-
-const total = computed(() => {
-	if (albumSpace.value === undefined) {
-		return undefined;
-	}
-
-	const sumData: TotalAlbum = {
-		size: 0,
-		num_photos: 0,
-		num_albums: 0,
-	};
-
-	albumSpace.value
-		?.filter((a) => !a.is_nsfw || are_nsfw_visible.value)
-		?.reduce((acc, a) => {
-			sumData.size += a.size;
-			sumData.num_photos += a.num_photos;
-			return acc;
-		}, sumData);
+const totalAlbumSpace = ref(undefined as undefined | App.Http.Resources.Statistics.Album);
 
-	sumData.num_albums = albumSpace.value?.filter((a) => !a.is_nsfw || are_nsfw_visible.value)?.length ?? 0;
-
-	return sumData;
-});
-
-if (props.config.is_base_album) {
-	StatisticsService.getAlbumSpace(props.album.id).then((response) => {
-		albumSpace.value = response.data;
-	});
+const total = ref(undefined as undefined | TotalAlbum);
 
+if (props.config.is_model_album) {
 	StatisticsService.getTotalAlbumSpace(props.album.id).then((response) => {
-		totalAlbumSpace.value = response.data;
+		totalAlbumSpace.value = response.data[0];
+		total.value = {
+			num_photos: totalAlbumSpace.value.num_photos,
+			num_albums: totalAlbumSpace.value.num_descendants,
+			size: totalAlbumSpace.value.size,
+		};
 	});
 }
+
+const dtScheme = {
+	colorScheme: {
+		light: {
+			headerCellBackground: "{surface-50}",
+		},
+		dark: {
+			headerCellBackground: "color-mix(in srgb, {surface-900}, {surface-950} 20%)",
+		},
+	},
+};
 </script>
diff --git a/resources/js/components/gallery/AlbumHero.vue b/resources/js/components/gallery/AlbumHero.vue
index 0238a5e8faa..b69a2b57ac3 100644
--- a/resources/js/components/gallery/AlbumHero.vue
+++ b/resources/js/components/gallery/AlbumHero.vue
@@ -46,14 +46,14 @@
 					<i class="pi pi-share-alt" />
 				</a>
 				<a
-					v-if="is_se_enabled"
+					v-if="is_se_enabled && user?.id !== null"
 					class="flex-shrink-0 px-3 cursor-pointer inline-block transform duration-300 hover:scale-150 hover:text-color"
 					v-on:click="openStatistics"
 				>
 					<i class="pi pi-chart-scatter text-primary-emphasis" />
 				</a>
 				<a
-					v-if="is_se_preview_enabled"
+					v-if="is_se_preview_enabled && user?.id !== null"
 					class="flex-shrink-0 px-3 cursor-not-allowed text-primary-emphasis"
 					v-tooltip.left="'Statistics available in the Supporter Edition'"
 				>
@@ -70,12 +70,15 @@
 </template>
 <script setup lang="ts">
 import AlbumService from "@/services/album-service";
+import { useAuthStore } from "@/stores/Auth";
 import { useLycheeStateStore } from "@/stores/LycheeState";
 import { storeToRefs } from "pinia";
 import Card from "primevue/card";
 
+const auth = useAuthStore();
 const lycheeStore = useLycheeStateStore();
 const { is_se_enabled, is_se_preview_enabled } = storeToRefs(lycheeStore);
+const { user } = storeToRefs(auth);
 
 const props = defineProps<{
 	album: App.Http.Resources.Models.AlbumResource | App.Http.Resources.Models.TagAlbumResource | App.Http.Resources.Models.SmartAlbumResource;
diff --git a/resources/js/components/statistics/AlbumsTable.vue b/resources/js/components/statistics/AlbumsTable.vue
index df6610d71e6..920265c2b2e 100644
--- a/resources/js/components/statistics/AlbumsTable.vue
+++ b/resources/js/components/statistics/AlbumsTable.vue
@@ -26,10 +26,12 @@ import StatisticsService from "@/services/statistics-service";
 import { useLycheeStateStore } from "@/stores/LycheeState";
 import { storeToRefs } from "pinia";
 import { usePreviewData } from "@/composables/preview/getPreviewInfo";
+import { useAlbumsStatistics } from "@/composables/album/albumStatistics";
 
 const lycheeStore = useLycheeStateStore();
 const { is_se_preview_enabled, are_nsfw_visible } = storeToRefs(lycheeStore);
 const { getAlbumSizeData } = usePreviewData();
+const { computeTotal } = useAlbumsStatistics();
 
 const props = defineProps<{
 	showUsername: boolean;
@@ -50,12 +52,12 @@ function loadAlbumSpace() {
 	if (is_se_preview_enabled.value === true) {
 		getAlbumSizeData().then(function (data) {
 			albumSpace.value = data;
-			emits("total", getTotalAlbumData());
+			emits("total", computeTotal(data));
 		});
 	} else {
 		StatisticsService.getAlbumSpace().then(function (response) {
 			albumSpace.value = response.data;
-			emits("total", getTotalAlbumData());
+			emits("total", computeTotal(response.data));
 		});
 	}
 }
@@ -68,23 +70,6 @@ function loadTotalAlbumSpace() {
 	}
 }
 
-function getTotalAlbumData(): TotalAlbum {
-	const sumData: TotalAlbum = {
-		size: 0,
-		num_photos: 0,
-		num_albums: 0,
-	};
-
-	albumData.value?.reduce((acc, a) => {
-		sumData.size += a.size;
-		sumData.num_photos += a.num_photos;
-		return acc;
-	}, sumData);
-
-	sumData.num_albums = albumData.value?.length ?? 0;
-	return sumData;
-}
-
 if (props.isTotal) {
 	loadTotalAlbumSpace();
 } else {
diff --git a/resources/js/components/statistics/SizeVariantMeter.vue b/resources/js/components/statistics/SizeVariantMeter.vue
index 5e17b2280d2..b5c9a44cdb4 100644
--- a/resources/js/components/statistics/SizeVariantMeter.vue
+++ b/resources/js/components/statistics/SizeVariantMeter.vue
@@ -1,16 +1,16 @@
 <template>
 	<MeterGroup :value="sizeVariantSpaceMeter" v-if="sizeVariantSpaceMeter && sizeVariantSpaceMeter.length > 0">
 		<template #label="{ value }">
-			<div class="flex flex-wrap gap-4 w-full sm:justify-between justify-center">
+			<div class="flex flex-wrap gap-2 xl:gap-6 w-full sm:justify-between justify-center">
 				<template v-for="val of value" :key="val.label">
 					<Card class="w-2/5 sm:w-auto border border-surface shadow-none">
 						<template #content>
 							<div class="flex justify-between gap-8">
 								<div class="flex gap-1 flex-col">
-									<span class="text-xs sm:text-sm"
-										><span class="rounded-full h-3 w-3 inline-block mr-1 sm:mr-2" :style="'background-color: ' + val.color"></span
-										>{{ val.label }}</span
-									>
+									<span class="text-xs sm:text-sm">
+										<span class="rounded-full h-3 w-3 inline-block mr-1 sm:mr-2" :style="'background-color: ' + val.color" />
+										{{ val.label }}
+									</span>
 									<span class="font-bold text-base">{{ val.size }}</span>
 								</div>
 							</div>
diff --git a/resources/js/components/statistics/TotalCard.vue b/resources/js/components/statistics/TotalCard.vue
index 444ad399028..6fd495e1037 100644
--- a/resources/js/components/statistics/TotalCard.vue
+++ b/resources/js/components/statistics/TotalCard.vue
@@ -1,7 +1,7 @@
 <template>
-	<Card>
+	<Card class="w-56 flex-shrink-0" :pt:body:class="'p-0 pb-4'">
 		<template #content>
-			<div class="flex flex-wrap">
+			<div class="flex flex-wrap w-full">
 				<span class="w-full font-bold text-xl">{{ "Total" }}</span>
 				<span class="w-20 text-muted-color-emphasis">{{ "Photos" }}:</span>
 				<span class="w-[calc(100%-5rem)] font-bold">{{ props.total.num_photos }}</span>
diff --git a/resources/js/composables/album/albumStatistics.ts b/resources/js/composables/album/albumStatistics.ts
index 306c4df4f28..2d2c4b6cf27 100644
--- a/resources/js/composables/album/albumStatistics.ts
+++ b/resources/js/composables/album/albumStatistics.ts
@@ -1,3 +1,5 @@
+import { TotalAlbum } from "@/components/statistics/TotalCard.vue";
+
 export type DataForTable = { key: string; value: number };
 
 export type PhotoStats = {
@@ -83,7 +85,25 @@ export function useAlbumsStatistics() {
 		return data.sort((a, b) => b.value - a.value);
 	}
 
+	function computeTotal(albumsStats: App.Http.Resources.Statistics.Album[]): TotalAlbum {
+		const sumData: TotalAlbum = {
+			size: 0,
+			num_photos: 0,
+			num_albums: 0,
+		};
+
+		albumsStats.reduce((acc, a) => {
+			sumData.size += a.size;
+			sumData.num_photos += a.num_photos;
+			return acc;
+		}, sumData);
+
+		sumData.num_albums = albumsStats.length;
+		return sumData;
+	}
+
 	return {
 		getStatistics,
+		computeTotal,
 	};
 }
diff --git a/resources/js/style/preset.ts b/resources/js/style/preset.ts
index a3f885c0f2b..a96c558c804 100644
--- a/resources/js/style/preset.ts
+++ b/resources/js/style/preset.ts
@@ -517,26 +517,20 @@ const LycheePrimeVueConfig = {
 							dark: {
 								color: "{primary.500}",
 								background: "color-mix(in srgb, {primary.50}, transparent 84%)",
-								// background: "{surface.800}"
 							},
 						},
 					},
 					hover: {
 						colorScheme: {
-							light: {
-								// color: "{primary.500}"
-							},
+							light: {},
 							dark: {
 								color: "{primary.500}",
 								background: "color-mix(in srgb, {primary.50}, transparent 92%)",
-								// background: "{surface.800}"
 							},
 						},
 					},
 				},
 			},
-			// vackground: var(--p-paginator-nav-button-selected-background);
-			// color: var(--p-paginator-nav-button-selected-color);
 		},
 		datatable: {
 			header: {
@@ -566,13 +560,15 @@ const LycheePrimeVueConfig = {
 							color: "{surface.700}",
 						},
 						cell: {
+							border: {
+								color: "{surface.700}",
+							},
 							background: "{surface.800}",
 							hoverBackground: "{surface.700}",
 							color: "{surface.200}",
 							hoverColor: "{surface.200}",
 						},
 					},
-
 					row: {
 						color: "{surface.300}",
 					},
diff --git a/resources/js/views/gallery-panels/Album.vue b/resources/js/views/gallery-panels/Album.vue
index 0fbde0a5c8b..fc966302973 100644
--- a/resources/js/views/gallery-panels/Album.vue
+++ b/resources/js/views/gallery-panels/Album.vue
@@ -33,7 +33,7 @@
 					>
 				</div>
 				<AlbumHero v-if="!noData" :album="album" @open-sharing-modal="toggleShareAlbum" @open-statistics="toggleStatistics" />
-				<template v-if="is_se_enabled">
+				<template v-if="is_se_enabled && user?.id !== null">
 					<AlbumStatistics
 						:photos="photos"
 						:config="config"

From a16b433d87048300ffd06b964c5e8f6016136f6d Mon Sep 17 00:00:00 2001
From: ildyria <beviguier@gmail.com>
Date: Mon, 21 Oct 2024 20:09:42 +0200
Subject: [PATCH 6/9] fix count appearing

---
 resources/js/components/drawers/AlbumStatistics.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/drawers/AlbumStatistics.vue b/resources/js/components/drawers/AlbumStatistics.vue
index 0105a31848b..a293f57a64a 100644
--- a/resources/js/components/drawers/AlbumStatistics.vue
+++ b/resources/js/components/drawers/AlbumStatistics.vue
@@ -60,7 +60,7 @@
 			</DataTable>
 			<DataTable :value="photosData.model" scrollable size="small" scrollHeight="13rem" class="max-w-xs w-full" :dt="dtScheme">
 				<Column field="key" header="ISO"></Column>
-				<Column field="value" header="Count"></Column>
+				<Column field="value" header=""></Column>
 				<template #empty> No data. </template>
 			</DataTable>
 		</Panel>

From d8fc4b58c29fb660f3cb73186f02788186e3f208 Mon Sep 17 00:00:00 2001
From: ildyria <beviguier@gmail.com>
Date: Mon, 21 Oct 2024 20:15:48 +0200
Subject: [PATCH 7/9] fix tests

---
 tests/Feature_v2/Statistics/AlbumSpaceTest.php | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/tests/Feature_v2/Statistics/AlbumSpaceTest.php b/tests/Feature_v2/Statistics/AlbumSpaceTest.php
index 9ac225eeb28..466b09786f9 100644
--- a/tests/Feature_v2/Statistics/AlbumSpaceTest.php
+++ b/tests/Feature_v2/Statistics/AlbumSpaceTest.php
@@ -38,8 +38,14 @@ public function testAlbumSpaceTestAuthorized(): void
 
 		$response = $this->withoutMiddleware(VerifySupporterStatus::class)->actingAs($this->userMayUpload1)->getJson('Statistics::albumSpace?album_id=' . $this->album1->id);
 		$this->assertOk($response);
-		$this->assertCount(1, $response->json());
+		$this->assertCount(2, $response->json());
 		$this->assertEquals($this->album1->title, $response->json()[0]['title']);
+		$this->assertEquals($this->subAlbum1->title, $response->json()[1]['title']);
+
+		$response = $this->withoutMiddleware(VerifySupporterStatus::class)->actingAs($this->userMayUpload1)->getJson('Statistics::albumSpace?album_id=' . $this->subAlbum1->id);
+		$this->assertOk($response);
+		$this->assertCount(1, $response->json());
+		$this->assertEquals($this->subAlbum1->title, $response->json()[0]['title']);
 
 		$response = $this->withoutMiddleware(VerifySupporterStatus::class)->actingAs($this->admin)->getJson('Statistics::albumSpace');
 		$this->assertOk($response);

From d0ed43701632434a68d4b468d368de031d1475f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Beno=C3=AEt=20Viguier?= <ildyria@users.noreply.github.com>
Date: Sat, 26 Oct 2024 00:55:20 +0200
Subject: [PATCH 8/9] Update
 resources/js/components/drawers/AlbumStatistics.vue

---
 resources/js/components/drawers/AlbumStatistics.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/drawers/AlbumStatistics.vue b/resources/js/components/drawers/AlbumStatistics.vue
index a293f57a64a..fbf5cd3c27b 100644
--- a/resources/js/components/drawers/AlbumStatistics.vue
+++ b/resources/js/components/drawers/AlbumStatistics.vue
@@ -59,7 +59,7 @@
 				<template #empty> No data. </template>
 			</DataTable>
 			<DataTable :value="photosData.model" scrollable size="small" scrollHeight="13rem" class="max-w-xs w-full" :dt="dtScheme">
-				<Column field="key" header="ISO"></Column>
+				<Column field="key" header="Model"></Column>
 				<Column field="value" header=""></Column>
 				<template #empty> No data. </template>
 			</DataTable>

From f63b586dd4c4f0dc7eb7e5c60f3d909b5f5d9768 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Beno=C3=AEt=20Viguier?= <ildyria@users.noreply.github.com>
Date: Sat, 26 Oct 2024 01:53:53 +0200
Subject: [PATCH 9/9] Stacked 14: Allow to chose the photo layout per album
 (#2575)

* Stacked 15: Show owner instead of just Shared albums (#2574)
* Stacked 16: Composer update + fixing phpstan / Ts checker (#2580)
* Stacked 17: Various fixes. (#2581)

---------

Co-authored-by: Martin Stone <1611702+d7415@users.noreply.github.com>
---
 app/Actions/Album/ListAlbums.php              |   8 +-
 app/Actions/Album/PositionData.php            |   1 +
 .../Http/Requests/HasPhotoLayout.php          |  13 +
 .../Http/Requests/RequestAttribute.php        |   1 +
 app/Contracts/Models/AbstractAlbum.php        |   3 +-
 app/Eloquent/FixedQueryBuilderTrait.php       |  16 +-
 .../Admin/Maintenance/Model/Album.php         |   4 +-
 .../Controllers/Gallery/AlbumController.php   |   2 +
 .../Requests/Album/UpdateAlbumRequest.php     |   8 +-
 .../Requests/Album/UpdateTagAlbumRequest.php  |   8 +-
 .../Requests/Traits/HasPhotoLayoutTrait.php   |  18 +
 .../Editable/EditableBaseAlbumResource.php    |   3 +
 .../Resources/GalleryConfigs/AlbumConfig.php  |   4 +
 .../GalleryConfigs/PhotoLayoutConfig.php      |   3 -
 .../Resources/Models/ThumbAlbumResource.php   |   2 +
 app/Legacy/V1/Actions/Albums/Tree.php         |   8 +-
 .../Administration/SettingsController.php     |  15 +-
 app/Models/AccessPermission.php               |   4 +-
 app/Models/Album.php                          |  14 +-
 app/Models/BaseAlbumImpl.php                  |  10 +-
 app/Models/Builders/AlbumBuilder.php          |   4 +-
 app/Models/Builders/TagAlbumBuilder.php       |   2 +-
 app/Models/Extensions/BaseAlbum.php           |  10 +-
 .../HasBidirectionalRelationships.php         |   2 +-
 app/Models/Extensions/Thumb.php               |  22 +-
 app/Models/JobHistory.php                     |   2 +-
 app/Models/OauthCredential.php                |   2 +-
 app/Models/Photo.php                          |   4 +-
 app/Models/SizeVariant.php                    |   4 +-
 app/Models/SymLink.php                        |   2 +-
 app/Models/TagAlbum.php                       |   2 +-
 app/Models/User.php                           |  10 +-
 app/Relations/BaseHasManyPhotos.php           |  23 +-
 app/Relations/HasAlbumThumb.php               |   2 +-
 app/Relations/HasManyBidirectionally.php      |  11 +-
 app/Relations/HasManyChildPhotos.php          |   2 -
 app/Relations/HasManyPhotosByTag.php          |   7 +-
 app/Relations/HasManyPhotosRecursively.php    |   8 +-
 app/Relations/HasManySizeVariants.php         |   4 +-
 composer.lock                                 | 312 +++++++++---------
 config/app.php                                |   6 +-
 config/cache.php                              |   2 +-
 config/database.php                           |   2 +-
 config/filesystems.php                        |   6 +-
 config/log-viewer.php                         |   8 +-
 config/secure-headers.php                     |   4 +-
 config/session.php                            |   2 +-
 ...0_20_173904_add_photo_layout_per_album.php |  30 ++
 .../2024_10_23_222857_change_header.php       |  22 ++
 ...2024_10_23_225332_warning_html_content.php |  21 ++
 .../NestedSetForAlbums_AlbumModel.php         |   4 +-
 .../RefactorAlbumModel_AlbumModel.php         |   4 +-
 package-lock.json                             | 141 ++++----
 phpstan.neon                                  |  14 +-
 .../forms/album/AlbumCreateDialog.vue         |  28 +-
 .../forms/album/AlbumCreateTagDialog.vue      |  24 +-
 .../forms/album/AlbumProperties.vue           |  29 ++
 .../js/components/forms/album/AlbumShare.vue  |   2 +-
 .../components/forms/basic/InputPassword.vue  |   4 +-
 .../js/components/forms/basic/InputText.vue   |   4 +-
 .../js/components/forms/basic/Password.vue    |   2 +-
 .../js/components/forms/basic/Textarea.vue    |   4 +-
 .../js/components/forms/profile/ApiToken.vue  |   2 +-
 .../js/components/forms/search/SearchBox.vue  |  10 +-
 .../forms/settings/VersionField.vue           |  72 ----
 .../js/components/forms/sharing/ShareLine.vue |   2 +-
 .../components/forms/upload/UploadingLine.vue |   2 +-
 .../components/forms/users/CreateEditUser.vue |  12 +-
 .../js/components/gallery/PhotoThumbPanel.vue |  15 +-
 .../js/components/headers/AlbumHeader.vue     |   5 +-
 .../js/components/headers/AlbumsHeader.vue    |   8 +-
 .../js/components/headers/OpenLeftMenu.vue    |  12 +
 .../maintenance/MaintenanceCleaning.vue       |  13 +-
 .../maintenance/MaintenanceFilesize.vue       |  13 +-
 .../maintenance/MaintenanceFixJobs.vue        |  13 +-
 .../maintenance/MaintenanceFixTree.vue        |   3 +
 .../MaintenanceGenSizevariants.vue            |  13 +-
 .../maintenance/MaintenanceOptimize.vue       |  13 +-
 .../maintenance/MaintenanceUpdate.vue         |  17 +-
 .../js/components/modals/UploadPanel.vue      |   9 +-
 .../js/components/settings/AllSettings.vue    |  15 +-
 .../js/components/settings/EasySettings.vue   |   1 -
 .../statistics/SizeVariantMeter.vue           |   6 +-
 .../js/composables/album/albumsRefresher.ts   |  32 +-
 .../js/composables/album/searchRefresher.ts   |   9 +
 .../js/composables/album/uploadEvents.ts      |   6 +-
 .../contextMenus/contextMenuAlbumAdd.ts       |  14 +-
 resources/js/layouts/PhotoLayout.ts           |  23 +-
 resources/js/lychee.d.ts                      |   4 +-
 resources/js/menus/LeftMenu.vue               | 102 ++++--
 resources/js/services/album-service.ts        |   3 +
 resources/js/views/Diagnostics.vue            |  10 +-
 resources/js/views/Jobs.vue                   |   6 +-
 resources/js/views/Landing.vue                |  11 +-
 resources/js/views/Maintenance.vue            |   6 +-
 resources/js/views/Profile.vue                |   5 +-
 resources/js/views/Settings.vue               |   8 +-
 resources/js/views/Sharing.vue                |  26 +-
 resources/js/views/Statistics.vue             |   5 +-
 resources/js/views/Users.vue                  |   5 +-
 resources/js/views/gallery-panels/Album.vue   |   6 +-
 resources/js/views/gallery-panels/Albums.vue  |  35 +-
 resources/js/views/gallery-panels/Map.vue     |   1 -
 resources/js/views/gallery-panels/Search.vue  |  41 ++-
 tests/Feature_v2/Album/AlbumUpdateTest.php    |   6 +
 105 files changed, 942 insertions(+), 621 deletions(-)
 create mode 100644 app/Contracts/Http/Requests/HasPhotoLayout.php
 create mode 100644 app/Http/Requests/Traits/HasPhotoLayoutTrait.php
 create mode 100644 database/migrations/2024_10_20_173904_add_photo_layout_per_album.php
 create mode 100644 database/migrations/2024_10_23_222857_change_header.php
 create mode 100644 database/migrations/2024_10_23_225332_warning_html_content.php
 delete mode 100644 resources/js/components/forms/settings/VersionField.vue
 create mode 100644 resources/js/components/headers/OpenLeftMenu.vue

diff --git a/app/Actions/Album/ListAlbums.php b/app/Actions/Album/ListAlbums.php
index 60a7c694b15..6ea745b8478 100644
--- a/app/Actions/Album/ListAlbums.php
+++ b/app/Actions/Album/ListAlbums.php
@@ -39,9 +39,9 @@ public function do(?int $lft, ?int $rgt, ?string $parent_id): array
 		$query = (new SortingDecorator($unfiltered))
 			->orderBy($sorting->column, $sorting->order);
 
-		/** @var NsCollection<int,string,Album> $albums */
+		/** @var NsCollection<Album> $albums */
 		$albums = $query->get();
-		/** @var NsCollection<int,string,Album> $tree */
+		/** @var NsCollection<Album> $tree */
 		$tree = $albums->toTree(null);
 
 		$flat_tree = $this->flatten($tree);
@@ -66,8 +66,8 @@ public function do(?int $lft, ?int $rgt, ?string $parent_id): array
 	/**
 	 * Flatten the tree and create bread crumb paths.
 	 *
-	 * @param NsCollection<int,string,Album>|Collection<int,Album> $collection
-	 * @param string                                               $prefix
+	 * @param NsCollection<Album>|Collection<int,Album> $collection
+	 * @param string                                    $prefix
 	 *
 	 * @return TAlbumSaved[]
 	 */
diff --git a/app/Actions/Album/PositionData.php b/app/Actions/Album/PositionData.php
index 1c0c59db3f3..bf8f3c24a26 100644
--- a/app/Actions/Album/PositionData.php
+++ b/app/Actions/Album/PositionData.php
@@ -17,6 +17,7 @@ public function get(AbstractAlbum $album, bool $includeSubAlbums = false): Posit
 			$album->all_photos() :
 			$album->photos();
 
+		// @phpstan-ignore-next-line
 		$photoRelation
 			->with([
 				'album' => function (BelongsTo $b) {
diff --git a/app/Contracts/Http/Requests/HasPhotoLayout.php b/app/Contracts/Http/Requests/HasPhotoLayout.php
new file mode 100644
index 00000000000..6d1dc3e064e
--- /dev/null
+++ b/app/Contracts/Http/Requests/HasPhotoLayout.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Contracts\Http\Requests;
+
+use App\Enum\PhotoLayoutType;
+
+interface HasPhotoLayout
+{
+	/**
+	 * @return PhotoLayoutType|null
+	 */
+	public function photoLayout(): ?PhotoLayoutType;
+}
diff --git a/app/Contracts/Http/Requests/RequestAttribute.php b/app/Contracts/Http/Requests/RequestAttribute.php
index 928c80bd28d..88a6c353509 100644
--- a/app/Contracts/Http/Requests/RequestAttribute.php
+++ b/app/Contracts/Http/Requests/RequestAttribute.php
@@ -46,6 +46,7 @@ class RequestAttribute
 	public const PHOTO_SORTING_ORDER_ATTRIBUTE = 'photo_sorting_order';
 	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 PERMISSION_ID = 'perm_id';
 	public const IS_COMPACT_ATTRIBUTE = 'is_compact';
diff --git a/app/Contracts/Models/AbstractAlbum.php b/app/Contracts/Models/AbstractAlbum.php
index 9e543df7987..cfbbd3968b3 100644
--- a/app/Contracts/Models/AbstractAlbum.php
+++ b/app/Contracts/Models/AbstractAlbum.php
@@ -7,6 +7,7 @@
 use App\Models\Photo;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\Relation;
 
 /**
@@ -31,7 +32,7 @@
 interface AbstractAlbum
 {
 	/**
-	 * @return Relation<Photo>|Builder<Photo>
+	 * @return Relation<Photo,AbstractAlbum&Model,Collection<int,Photo>>|Builder<Photo>
 	 */
 	public function photos(): Relation|Builder;
 
diff --git a/app/Eloquent/FixedQueryBuilderTrait.php b/app/Eloquent/FixedQueryBuilderTrait.php
index cf037c8fdaf..54d3e0e1072 100644
--- a/app/Eloquent/FixedQueryBuilderTrait.php
+++ b/app/Eloquent/FixedQueryBuilderTrait.php
@@ -5,9 +5,9 @@
 namespace App\Eloquent;
 
 use App\Exceptions\Internal\QueryBuilderException;
+use Illuminate\Contracts\Database\Query\Expression;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Query\Builder as BaseBuilder;
-use Illuminate\Database\Query\Expression;
 
 /**
  * Fixed Eloquent query builder.
@@ -50,10 +50,10 @@ trait FixedQueryBuilderTrait
 	/**
 	 * Add a basic where clause to the query.
 	 *
-	 * @param \Closure|string|array<string>|Expression $column
-	 * @param mixed                                    $operator
-	 * @param mixed                                    $value
-	 * @param string                                   $boolean
+	 * @param \Closure|string|array<int|string,mixed>|Expression $column
+	 * @param mixed                                              $operator
+	 * @param mixed                                              $value
+	 * @param string                                             $boolean
 	 *
 	 * @return $this
 	 *
@@ -268,9 +268,9 @@ public function addSelect($column): static
 	/**
 	 * Add an "or where" clause to the query.
 	 *
-	 * @param \Closure|array<string>|string|Expression $column
-	 * @param mixed                                    $operator
-	 * @param mixed                                    $value
+	 * @param \Closure|string|array<int|string,mixed>|Expression $column
+	 * @param mixed                                              $operator
+	 * @param mixed                                              $value
 	 *
 	 * @return $this
 	 *
diff --git a/app/Http/Controllers/Admin/Maintenance/Model/Album.php b/app/Http/Controllers/Admin/Maintenance/Model/Album.php
index ae3ede2006c..f5af93a005b 100644
--- a/app/Http/Controllers/Admin/Maintenance/Model/Album.php
+++ b/app/Http/Controllers/Admin/Maintenance/Model/Album.php
@@ -10,11 +10,11 @@
  * This is necessary to fix the tree of the album model.
  * We do not want to have to deal with the relationships here.
  *
- * @implements Node<string,Album>
+ * @implements Node<Album>
  */
 class Album extends Model implements Node
 {
-	/** @phpstan-use NodeTrait<string,Album> */
+	/** @phpstan-use NodeTrait<Album> */
 	use NodeTrait;
 	public $timestamps = false;
 }
\ No newline at end of file
diff --git a/app/Http/Controllers/Gallery/AlbumController.php b/app/Http/Controllers/Gallery/AlbumController.php
index 4c0462e5704..2e6cac71282 100644
--- a/app/Http/Controllers/Gallery/AlbumController.php
+++ b/app/Http/Controllers/Gallery/AlbumController.php
@@ -110,6 +110,7 @@ public function updateAlbum(UpdateAlbumRequest $request, SetHeader $setHeader):
 		$album->copyright = $request->copyright();
 		$album->photo_sorting = $request->photoSortingCriterion();
 		$album->album_sorting = $request->albumSortingCriterion();
+		$album->photo_layout = $request->photoLayout();
 
 		$album = $setHeader->do(
 			album: $album,
@@ -131,6 +132,7 @@ public function updateTagAlbum(UpdateTagAlbumRequest $request): EditableBaseAlbu
 		$album->show_tags = $request->tags();
 		$album->copyright = $request->copyright();
 		$album->photo_sorting = $request->photoSortingCriterion();
+		$album->photo_layout = $request->photoLayout();
 		$album->save();
 
 		return EditableBaseAlbumResource::fromModel($album);
diff --git a/app/Http/Requests/Album/UpdateAlbumRequest.php b/app/Http/Requests/Album/UpdateAlbumRequest.php
index 62357e19754..1a559356c2d 100644
--- a/app/Http/Requests/Album/UpdateAlbumRequest.php
+++ b/app/Http/Requests/Album/UpdateAlbumRequest.php
@@ -9,6 +9,7 @@
 use App\Contracts\Http\Requests\HasDescription;
 use App\Contracts\Http\Requests\HasLicense;
 use App\Contracts\Http\Requests\HasPhoto;
+use App\Contracts\Http\Requests\HasPhotoLayout;
 use App\Contracts\Http\Requests\HasPhotoSortingCriterion;
 use App\Contracts\Http\Requests\HasTitle;
 use App\Contracts\Http\Requests\RequestAttribute;
@@ -20,6 +21,7 @@
 use App\Enum\ColumnSortingPhotoType;
 use App\Enum\LicenseType;
 use App\Enum\OrderSortingType;
+use App\Enum\PhotoLayoutType;
 use App\Http\Requests\BaseApiRequest;
 use App\Http\Requests\Traits\HasAlbumSortingCriterionTrait;
 use App\Http\Requests\Traits\HasAlbumTrait;
@@ -28,6 +30,7 @@
 use App\Http\Requests\Traits\HasCopyrightTrait;
 use App\Http\Requests\Traits\HasDescriptionTrait;
 use App\Http\Requests\Traits\HasLicenseTrait;
+use App\Http\Requests\Traits\HasPhotoLayoutTrait;
 use App\Http\Requests\Traits\HasPhotoSortingCriterionTrait;
 use App\Http\Requests\Traits\HasPhotoTrait;
 use App\Http\Requests\Traits\HasTitleTrait;
@@ -42,7 +45,7 @@
 use Illuminate\Validation\Rules\Enum;
 use Illuminate\Validation\ValidationException;
 
-class UpdateAlbumRequest extends BaseApiRequest implements HasAlbum, HasTitle, HasDescription, HasLicense, HasPhotoSortingCriterion, HasAlbumSortingCriterion, HasCopyright, HasPhoto, HasCompactBoolean
+class UpdateAlbumRequest extends BaseApiRequest implements HasAlbum, HasTitle, HasDescription, HasLicense, HasPhotoSortingCriterion, HasAlbumSortingCriterion, HasCopyright, HasPhoto, HasCompactBoolean, HasPhotoLayout
 {
 	use HasAlbumTrait;
 	use HasLicenseTrait;
@@ -54,6 +57,7 @@ class UpdateAlbumRequest extends BaseApiRequest implements HasAlbum, HasTitle, H
 	use HasPhotoSortingCriterionTrait;
 	use HasAlbumSortingCriterionTrait;
 	use HasCopyrightTrait;
+	use HasPhotoLayoutTrait;
 
 	public function authorize(): bool
 	{
@@ -84,6 +88,7 @@ public function rules(): array
 				'nullable', new Enum(OrderSortingType::class),
 			],
 			RequestAttribute::ALBUM_ASPECT_RATIO_ATTRIBUTE => ['present', 'nullable', new Enum(AspectRatioType::class)],
+			RequestAttribute::ALBUM_PHOTO_LAYOUT => ['present', 'nullable', new Enum(PhotoLayoutType::class)],
 			RequestAttribute::COPYRIGHT_ATTRIBUTE => ['present', 'nullable', new CopyrightRule()],
 			RequestAttribute::IS_COMPACT_ATTRIBUTE => ['required', 'boolean'],
 			RequestAttribute::HEADER_ID_ATTRIBUTE => ['present', new RandomIDRule(true)],
@@ -123,6 +128,7 @@ protected function processValidatedValues(array $values, array $files): void
 			new AlbumSortingCriterion($albumColumn->toColumnSortingType(), $albumOrder);
 
 		$this->aspectRatio = AspectRatioType::tryFrom($values[RequestAttribute::ALBUM_ASPECT_RATIO_ATTRIBUTE]);
+		$this->photoLayout = PhotoLayoutType::tryFrom($values[RequestAttribute::ALBUM_PHOTO_LAYOUT]);
 		$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 6daa665b094..99a07ca451d 100644
--- a/app/Http/Requests/Album/UpdateTagAlbumRequest.php
+++ b/app/Http/Requests/Album/UpdateTagAlbumRequest.php
@@ -4,6 +4,7 @@
 
 use App\Contracts\Http\Requests\HasCopyright;
 use App\Contracts\Http\Requests\HasDescription;
+use App\Contracts\Http\Requests\HasPhotoLayout;
 use App\Contracts\Http\Requests\HasPhotoSortingCriterion;
 use App\Contracts\Http\Requests\HasTagAlbum;
 use App\Contracts\Http\Requests\HasTags;
@@ -12,10 +13,12 @@
 use App\DTO\PhotoSortingCriterion;
 use App\Enum\ColumnSortingPhotoType;
 use App\Enum\OrderSortingType;
+use App\Enum\PhotoLayoutType;
 use App\Http\Requests\BaseApiRequest;
 use App\Http\Requests\Traits\Authorize\AuthorizeCanEditAlbumTrait;
 use App\Http\Requests\Traits\HasCopyrightTrait;
 use App\Http\Requests\Traits\HasDescriptionTrait;
+use App\Http\Requests\Traits\HasPhotoLayoutTrait;
 use App\Http\Requests\Traits\HasPhotoSortingCriterionTrait;
 use App\Http\Requests\Traits\HasTagAlbumTrait;
 use App\Http\Requests\Traits\HasTagsTrait;
@@ -28,7 +31,7 @@
 use Illuminate\Validation\Rules\Enum;
 use Illuminate\Validation\ValidationException;
 
-class UpdateTagAlbumRequest extends BaseApiRequest implements HasTagAlbum, HasTitle, HasDescription, HasPhotoSortingCriterion, HasCopyright, HasTags
+class UpdateTagAlbumRequest extends BaseApiRequest implements HasTagAlbum, HasTitle, HasDescription, HasPhotoSortingCriterion, HasCopyright, HasTags, HasPhotoLayout
 {
 	use HasTagAlbumTrait;
 	use HasTitleTrait;
@@ -36,6 +39,7 @@ class UpdateTagAlbumRequest extends BaseApiRequest implements HasTagAlbum, HasTi
 	use HasPhotoSortingCriterionTrait;
 	use HasCopyrightTrait;
 	use HasTagsTrait;
+	use HasPhotoLayoutTrait;
 	use AuthorizeCanEditAlbumTrait;
 
 	/**
@@ -55,6 +59,7 @@ public function rules(): array
 			RequestAttribute::TAGS_ATTRIBUTE => 'required|array|min:1',
 			RequestAttribute::TAGS_ATTRIBUTE . '.*' => 'required|string|min:1',
 			RequestAttribute::COPYRIGHT_ATTRIBUTE => ['present', 'nullable', new CopyrightRule()],
+			RequestAttribute::ALBUM_PHOTO_LAYOUT => ['present', 'nullable', new Enum(PhotoLayoutType::class)],
 		];
 	}
 
@@ -82,6 +87,7 @@ protected function processValidatedValues(array $values, array $files): void
 			null :
 			new PhotoSortingCriterion($photoColumn->toColumnSortingType(), $photoOrder);
 
+		$this->photoLayout = PhotoLayoutType::tryFrom($values[RequestAttribute::ALBUM_PHOTO_LAYOUT]);
 		$this->copyright = $values[RequestAttribute::COPYRIGHT_ATTRIBUTE];
 		$this->tags = $values[RequestAttribute::TAGS_ATTRIBUTE];
 	}
diff --git a/app/Http/Requests/Traits/HasPhotoLayoutTrait.php b/app/Http/Requests/Traits/HasPhotoLayoutTrait.php
new file mode 100644
index 00000000000..131a78d9ce0
--- /dev/null
+++ b/app/Http/Requests/Traits/HasPhotoLayoutTrait.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Http\Requests\Traits;
+
+use App\Enum\PhotoLayoutType;
+
+trait HasPhotoLayoutTrait
+{
+	protected ?PhotoLayoutType $photoLayout = null;
+
+	/**
+	 * @return PhotoLayoutType|null
+	 */
+	public function photoLayout(): ?PhotoLayoutType
+	{
+		return $this->photoLayout;
+	}
+}
diff --git a/app/Http/Resources/Editable/EditableBaseAlbumResource.php b/app/Http/Resources/Editable/EditableBaseAlbumResource.php
index 753b928d13f..18c5a563914 100644
--- a/app/Http/Resources/Editable/EditableBaseAlbumResource.php
+++ b/app/Http/Resources/Editable/EditableBaseAlbumResource.php
@@ -6,6 +6,7 @@
 use App\DTO\PhotoSortingCriterion;
 use App\Enum\AspectRatioType;
 use App\Enum\LicenseType;
+use App\Enum\PhotoLayoutType;
 use App\Models\Album;
 use App\Models\TagAlbum;
 use Spatie\LaravelData\Data;
@@ -22,6 +23,7 @@ class EditableBaseAlbumResource extends Data
 	public ?PhotoSortingCriterion $photo_sorting;
 	public ?AlbumSortingCriterion $album_sorting;
 	public ?AspectRatioType $aspect_ratio;
+	public ?PhotoLayoutType $photo_layout;
 	public ?string $header_id;
 	public ?string $cover_id;
 	/** @var string[] */
@@ -40,6 +42,7 @@ public function __construct(Album|TagAlbum $album)
 		$this->album_sorting = null;
 		$this->header_id = null;
 		$this->cover_id = null;
+		$this->photo_layout = $album->photo_layout;
 
 		if ($album instanceof Album) {
 			$this->is_model_album = true;
diff --git a/app/Http/Resources/GalleryConfigs/AlbumConfig.php b/app/Http/Resources/GalleryConfigs/AlbumConfig.php
index 706940a2ed1..ceb7e6b0d22 100644
--- a/app/Http/Resources/GalleryConfigs/AlbumConfig.php
+++ b/app/Http/Resources/GalleryConfigs/AlbumConfig.php
@@ -5,6 +5,7 @@
 use App\Contracts\Models\AbstractAlbum;
 use App\Enum\AspectRatioCSSType;
 use App\Enum\AspectRatioType;
+use App\Enum\PhotoLayoutType;
 use App\Models\Album;
 use App\Models\Configs;
 use App\Models\Extensions\BaseAlbum;
@@ -26,6 +27,7 @@ class AlbumConfig extends Data
 	public bool $is_search_accessible;
 	public bool $is_nsfw_warning_visible;
 	public AspectRatioCSSType $album_thumb_css_aspect_ratio;
+	public PhotoLayoutType $photo_layout;
 
 	public function __construct(AbstractAlbum $album)
 	{
@@ -49,6 +51,8 @@ public function __construct(AbstractAlbum $album)
 		} else {
 			$this->album_thumb_css_aspect_ratio = Configs::getValueAsEnum('default_album_thumb_aspect_ratio', AspectRatioType::class)->css();
 		}
+
+		$this->photo_layout = (($album instanceof BaseAlbum) ? $album->photo_layout : null) ?? Configs::getValueAsEnum('layout', PhotoLayoutType::class);
 	}
 
 	public function setIsMapAccessible(): void
diff --git a/app/Http/Resources/GalleryConfigs/PhotoLayoutConfig.php b/app/Http/Resources/GalleryConfigs/PhotoLayoutConfig.php
index baa69156426..264171335b2 100644
--- a/app/Http/Resources/GalleryConfigs/PhotoLayoutConfig.php
+++ b/app/Http/Resources/GalleryConfigs/PhotoLayoutConfig.php
@@ -2,7 +2,6 @@
 
 namespace App\Http\Resources\GalleryConfigs;
 
-use App\Enum\PhotoLayoutType;
 use App\Models\Configs;
 use Spatie\LaravelData\Data;
 use Spatie\TypeScriptTransformer\Attributes\TypeScript;
@@ -10,7 +9,6 @@
 #[TypeScript()]
 class PhotoLayoutConfig extends Data
 {
-	public PhotoLayoutType $photos_layout;
 	public int $photo_layout_justified_row_height;
 	public int $photo_layout_masonry_column_width;
 	public int $photo_layout_grid_column_width;
@@ -24,6 +22,5 @@ public function __construct()
 		$this->photo_layout_grid_column_width = Configs::getValueAsInt('photo_layout_grid_column_width');
 		$this->photo_layout_square_column_width = Configs::getValueAsInt('photo_layout_square_column_width');
 		$this->photo_layout_gap = Configs::getValueAsInt('photo_layout_gap');
-		$this->photos_layout = Configs::getValueAsEnum('layout', PhotoLayoutType::class);
 	}
 }
diff --git a/app/Http/Resources/Models/ThumbAlbumResource.php b/app/Http/Resources/Models/ThumbAlbumResource.php
index 9cffcd6c625..0c12a1da0a5 100644
--- a/app/Http/Resources/Models/ThumbAlbumResource.php
+++ b/app/Http/Resources/Models/ThumbAlbumResource.php
@@ -37,6 +37,7 @@ class ThumbAlbumResource extends Data
 	private ?string $min_taken_at = null;
 	private ?string $max_taken_at = null;
 	public ?string $formatted_min_max = null;
+	public ?string $owner = null;
 
 	public AlbumRightsResource $rights;
 
@@ -60,6 +61,7 @@ public function __construct(AbstractAlbum $data)
 			$this->created_at = $data->created_at->format($date_format);
 			$policy = AlbumProtectionPolicy::ofBaseAlbum($data);
 			$this->description = Str::limit($data->description, 100);
+			$this->owner = $data->owner->username;
 		}
 
 		if ($data instanceof Album) {
diff --git a/app/Legacy/V1/Actions/Albums/Tree.php b/app/Legacy/V1/Actions/Albums/Tree.php
index fb3cbb5c020..3478d911b74 100644
--- a/app/Legacy/V1/Actions/Albums/Tree.php
+++ b/app/Legacy/V1/Actions/Albums/Tree.php
@@ -62,9 +62,9 @@ public function get(): AlbumForestResource
 		}
 		$query->orderBy($this->sorting->column, $this->sorting->order);
 
-		/** @var NsCollection<int,string,Album> $albums */
+		/** @var NsCollection<Album> $albums */
 		$albums = $query->get();
-		/** @var ?NsCollection<int,string,Album> $sharedAlbums */
+		/** @var ?NsCollection<Album> $sharedAlbums */
 		$sharedAlbums = null;
 		$userID = Auth::id();
 		if ($userID !== null) {
@@ -75,8 +75,8 @@ public function get(): AlbumForestResource
 			// (sub)-tree and then `toTree` will return garbage as it does
 			// not find connected paths within `$albums` or `$sharedAlbums`,
 			// resp.
-			/** @var NsCollection<int,string,Album> $albums */
-			/** @var ?NsCollection<int,string,Album> $sharedAlbums */
+			/** @var NsCollection<Album> $albums */
+			/** @var ?NsCollection<Album> $sharedAlbums */
 			list($albums, $sharedAlbums) = $albums->partition(fn (Album $album) => $album->owner_id === $userID);
 		}
 
diff --git a/app/Legacy/V1/Controllers/Administration/SettingsController.php b/app/Legacy/V1/Controllers/Administration/SettingsController.php
index 02897c02fd2..df82fe38bfe 100644
--- a/app/Legacy/V1/Controllers/Administration/SettingsController.php
+++ b/app/Legacy/V1/Controllers/Administration/SettingsController.php
@@ -33,6 +33,7 @@
 use App\SmartAlbums\BaseSmartAlbum;
 use Illuminate\Database\Eloquent\Collection;
 use Illuminate\Routing\Controller;
+use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Storage;
 use Symfony\Component\HttpFoundation\Exception\BadRequestException;
 
@@ -403,6 +404,9 @@ public function getAll(GetSetAllSettingsRequest $request): Collection
 		return Configs::query()
 			->orderBy('cat')
 			->orderBy('id')
+			// Only display settings which are not part of SE
+			->where('level', '=', 0)
+			->whereNotIn('key', ['email'])
 			->get();
 	}
 
@@ -419,7 +423,16 @@ public function getAll(GetSetAllSettingsRequest $request): Collection
 	public function saveAll(GetSetAllSettingsRequest $request): void
 	{
 		$lastException = null;
-		foreach ($request->except(['_token', 'function', '/api/Settings::saveAll']) as $key => $value) {
+		// Select all the SE settings.
+		$except = DB::table('configs')
+			->select('key')
+			->where('level', '=', '1')
+			->pluck('key')
+			// Concat bunch of things coming from the POST request.
+			->concat(['_token', 'function', '/api/Settings::saveAll'])
+			// Convert to array.
+			->all();
+		foreach ($request->except($except) as $key => $value) {
 			$value ??= '';
 			try {
 				Configs::set($key, $value);
diff --git a/app/Models/AccessPermission.php b/app/Models/AccessPermission.php
index aa6cd0a22f0..c29578a82e8 100644
--- a/app/Models/AccessPermission.php
+++ b/app/Models/AccessPermission.php
@@ -104,7 +104,7 @@ public function newEloquentBuilder($query): AccessPermissionBuilder
 	/**
 	 * Returns the relationship between an AccessPermission and its associated album.
 	 *
-	 * @return BelongsTo<BaseAlbumImpl,AccessPermission>
+	 * @return BelongsTo<BaseAlbumImpl,$this>
 	 */
 	public function album(): BelongsTo
 	{
@@ -114,7 +114,7 @@ public function album(): BelongsTo
 	/**
 	 * Returns the relationship between an AccessPermission and its applied User.
 	 *
-	 * @return BelongsTo<User,AccessPermission>
+	 * @return BelongsTo<User,$this>
 	 */
 	public function user(): BelongsTo
 	{
diff --git a/app/Models/Album.php b/app/Models/Album.php
index 40b6f36b9b0..a48e894d7a0 100644
--- a/app/Models/Album.php
+++ b/app/Models/Album.php
@@ -124,11 +124,11 @@
  *
  * // * @mixin \Eloquent
  *
- * @implements Node<string,Album>
+ * @implements Node<Album>
  */
 class Album extends BaseAlbum implements Node
 {
-	/** @phpstan-use NodeTrait<string,Album> */
+	/** @phpstan-use NodeTrait<Album> */
 	use NodeTrait;
 	use ToArrayThrowsNotImplemented;
 	/** @phpstan-use HasFactory<\Database\Factories\AlbumFactory> */
@@ -182,7 +182,7 @@ class Album extends BaseAlbum implements Node
 	 *
 	 * @return HasManyChildPhotos
 	 */
-	public function photos(): HasManyChildPhotos
+	public function photos(): HasManyChildPhotos // @phpstan-ignore-line
 	{
 		return new HasManyChildPhotos($this);
 	}
@@ -216,14 +216,14 @@ public function children(): HasManyChildAlbums
 	/**
 	 * Get query for descendants of the node.
 	 *
-	 * @return DescendantsRelation<string,Album>
+	 * @return DescendantsRelation<Album>
 	 *
 	 * @throws QueryBuilderException
 	 */
 	public function descendants(): DescendantsRelation
 	{
 		try {
-			/** @var DescendantsRelation<string,Album> */
+			/** @var DescendantsRelation<Album> */
 			return new DescendantsRelation($this->newQuery(), $this);
 			// @codeCoverageIgnoreStart
 		} catch (\Throwable $e) {
@@ -235,7 +235,7 @@ public function descendants(): DescendantsRelation
 	/**
 	 * Return the relationship between an album and its cover.
 	 *
-	 * @return HasOne<Photo>
+	 * @return HasOne<Photo,$this>
 	 */
 	public function cover(): HasOne
 	{
@@ -245,7 +245,7 @@ public function cover(): HasOne
 	/**
 	 * Return the relationship between an album and its header.
 	 *
-	 * @return HasOne<Photo>
+	 * @return HasOne<Photo,$this>
 	 */
 	public function header(): HasOne
 	{
diff --git a/app/Models/BaseAlbumImpl.php b/app/Models/BaseAlbumImpl.php
index 5b9bbd5a0e4..e81954b43e7 100644
--- a/app/Models/BaseAlbumImpl.php
+++ b/app/Models/BaseAlbumImpl.php
@@ -8,6 +8,7 @@
 use App\DTO\PhotoSortingCriterion;
 use App\Enum\ColumnSortingType;
 use App\Enum\OrderSortingType;
+use App\Enum\PhotoLayoutType;
 use App\Models\Builders\BaseAlbumImplBuilder;
 use App\Models\Extensions\HasAttributesPatch;
 use App\Models\Extensions\HasBidirectionalRelationships;
@@ -94,6 +95,7 @@
  * @property Carbon                           $updated_at
  * @property string                           $title
  * @property string|null                      $description
+ * @property PhotoLayoutType|null             $photo_layout
  * @property int                              $owner_id
  * @property User                             $owner
  * @property bool                             $is_nsfw
@@ -178,6 +180,7 @@ class BaseAlbumImpl extends Model implements HasRandomID
 		'copyright' => null,
 		// Special visibility attributes
 		'is_nsfw' => false,
+		'photo_layout' => null,
 	];
 
 	/**
@@ -190,6 +193,7 @@ class BaseAlbumImpl extends Model implements HasRandomID
 		'updated_at' => 'datetime',
 		'is_nsfw' => 'boolean',
 		'owner_id' => 'integer',
+		'photo_layout' => PhotoLayoutType::class,
 	];
 
 	/**
@@ -210,7 +214,7 @@ public function newEloquentBuilder($query): BaseAlbumImplBuilder
 	/**
 	 * Returns the relationship between an album and its owner.
 	 *
-	 * @return BelongsTo<User,BaseAlbumImpl>
+	 * @return BelongsTo<User,$this>
 	 */
 	public function owner(): BelongsTo
 	{
@@ -221,7 +225,7 @@ public function owner(): BelongsTo
 	 * Returns the relationship between an album and all users with whom
 	 * this album is shared.
 	 *
-	 * @return BelongsToMany<User>
+	 * @return BelongsToMany<User,$this>
 	 */
 	public function shared_with(): BelongsToMany
 	{
@@ -236,7 +240,7 @@ public function shared_with(): BelongsToMany
 	/**
 	 * Returns the relationship between an album and its associated permissions.
 	 *
-	 * @return hasMany<AccessPermission>
+	 * @return hasMany<AccessPermission,$this>
 	 */
 	public function access_permissions(): hasMany
 	{
diff --git a/app/Models/Builders/AlbumBuilder.php b/app/Models/Builders/AlbumBuilder.php
index 9a9c09ff8ba..1e8fe6c469a 100644
--- a/app/Models/Builders/AlbumBuilder.php
+++ b/app/Models/Builders/AlbumBuilder.php
@@ -48,7 +48,7 @@
  * @method        $this              whereNull(string|array $columns, string $boolean = 'and', bool $not = false)
  * @method        $this              orderByDesc($column)
  *
- * @extends NSQueryBuilder<string,Album>
+ * @extends NSQueryBuilder<Album>
  */
 class AlbumBuilder extends NSQueryBuilder
 {
@@ -64,7 +64,7 @@ class AlbumBuilder extends NSQueryBuilder
 	 *
 	 * @param string[]|string $columns
 	 *
-	 * @return Album[]
+	 * @return array<int,Album>
 	 *
 	 * @throws InternalLycheeException
 	 */
diff --git a/app/Models/Builders/TagAlbumBuilder.php b/app/Models/Builders/TagAlbumBuilder.php
index ec87520c434..6eb306727f0 100644
--- a/app/Models/Builders/TagAlbumBuilder.php
+++ b/app/Models/Builders/TagAlbumBuilder.php
@@ -28,7 +28,7 @@ class TagAlbumBuilder extends FixedQueryBuilder
 	 *
 	 * @param array<string>|string $columns
 	 *
-	 * @return TagAlbum[]
+	 * @return array<int,TagAlbum>
 	 *
 	 * @throws QueryBuilderException
 	 */
diff --git a/app/Models/Extensions/BaseAlbum.php b/app/Models/Extensions/BaseAlbum.php
index 4fbcdc36e46..fda81129de8 100644
--- a/app/Models/Extensions/BaseAlbum.php
+++ b/app/Models/Extensions/BaseAlbum.php
@@ -6,6 +6,7 @@
 use App\Contracts\Models\AbstractAlbum;
 use App\Contracts\Models\HasRandomID;
 use App\DTO\PhotoSortingCriterion;
+use App\Enum\PhotoLayoutType;
 use App\Models\AccessPermission;
 use App\Models\BaseAlbumImpl;
 use App\Models\User;
@@ -30,6 +31,7 @@
  * @property string|null                      $description
  * @property bool                             $is_nsfw
  * @property string|null                      $copyright
+ * @property PhotoLayoutType|null             $photo_layout
  * @property int                              $owner_id
  * @property User                             $owner
  * @property Collection<int,AccessPermission> $access_permissions
@@ -58,7 +60,7 @@ abstract class BaseAlbum extends Model implements AbstractAlbum, HasRandomID
 	public $incrementing = false;
 
 	/**
-	 * @return BelongsTo<BaseAlbumImpl,self>
+	 * @return BelongsTo<BaseAlbumImpl,$this>
 	 */
 	public function base_class(): BelongsTo
 	{
@@ -79,7 +81,7 @@ public function owner(): BelongsTo
 	 * Returns the relationship between an album and all users with whom
 	 * this album is shared.
 	 *
-	 * @return BelongsToMany<User>
+	 * @return BelongsToMany<User,BaseAlbumImpl>
 	 */
 	public function shared_with(): BelongsToMany
 	{
@@ -89,7 +91,7 @@ public function shared_with(): BelongsToMany
 	/**
 	 * Returns the relationship between an album and its associated permissions.
 	 *
-	 * @return HasMany<AccessPermission>
+	 * @return HasMany<AccessPermission,BaseAlbumImpl>
 	 */
 	public function access_permissions(): HasMany
 	{
@@ -117,7 +119,7 @@ public function public_permissions(): AccessPermission|null
 	}
 
 	/**
-	 * @return Relation<\App\Models\Photo>
+	 * @return Relation<\App\Models\Photo,AbstractAlbum&Model,Collection<int,\App\Models\Photo>>
 	 */
 	abstract public function photos(): Relation;
 
diff --git a/app/Models/Extensions/HasBidirectionalRelationships.php b/app/Models/Extensions/HasBidirectionalRelationships.php
index b29cc02fa80..eefed37ce79 100644
--- a/app/Models/Extensions/HasBidirectionalRelationships.php
+++ b/app/Models/Extensions/HasBidirectionalRelationships.php
@@ -69,7 +69,7 @@ protected function getRelationshipFromMethod($method): mixed
 	 * @param string|null                 $localKey
 	 * @param string|null                 $foreignMethodName
 	 *
-	 * @return HasManyBidirectionally<TRelatedModel,self>
+	 * @return HasManyBidirectionally<TRelatedModel,$this>
 	 */
 	public function hasManyBidirectionally(string $related, ?string $foreignKey = null, ?string $localKey = null, ?string $foreignMethodName = null): HasManyBidirectionally
 	{
diff --git a/app/Models/Extensions/Thumb.php b/app/Models/Extensions/Thumb.php
index 3e388e4e141..109b557fdd2 100644
--- a/app/Models/Extensions/Thumb.php
+++ b/app/Models/Extensions/Thumb.php
@@ -36,11 +36,11 @@ protected function __construct(string $id, string $type, string $thumbUrl, ?stri
 	 * Restricts the given relation for size variants such that only the
 	 * necessary variants for a thumbnail are selected.
 	 *
-	 * @param HasMany<Photo> $relation
+	 * @param HasMany<Photo,$this> $relation
 	 *
-	 * @return HasMany<Photo>
+	 * @return HasMany<Photo,$this>
 	 */
-	public static function sizeVariantsFilter(HasMany $relation): HasMany
+	public static function sizeVariantsFilter(HasMany $relation): HasMany // @phpstan-ignore-line
 	{
 		$svAlbumThumbs = [SizeVariantType::THUMB, SizeVariantType::THUMB2X];
 		if (Features::active('vuejs')) {
@@ -56,8 +56,11 @@ public static function sizeVariantsFilter(HasMany $relation): HasMany
 	 * Note, this method assumes that the relation is already restricted
 	 * such that it only returns photos which the current user may see.
 	 *
-	 * @param Relation<Photo>|Builder<Photo> $photoQueryable the relation to or query for {@link Photo} which is used to pick a thumb
-	 * @param SortingCriterion               $sorting        the sorting criterion
+	 * @template TDeclaringModel of \Illuminate\Database\Eloquent\Model
+	 * @template TResult
+	 *
+	 * @param Relation<Photo,TDeclaringModel,TResult>|Builder<Photo> $photoQueryable the relation to or query for {@link Photo} which is used to pick a thumb
+	 * @param SortingCriterion                                       $sorting        the sorting criterion
 	 *
 	 * @return Thumb|null the created thumbnail; null if the relation is empty
 	 *
@@ -69,7 +72,7 @@ public static function createFromQueryable(Relation|Builder $photoQueryable, Sor
 		try {
 			/** @var Photo|null $cover */
 			$cover = $photoQueryable
-				->withOnly(['size_variants' => (fn (HasMany $r) => self::sizeVariantsFilter($r))])
+				->withOnly(['size_variants' => (fn ($r) => self::sizeVariantsFilter($r))])
 				->orderBy('photos.' . ColumnSortingPhotoType::IS_STARRED->value, OrderSortingType::DESC->value)
 				->orderBy('photos.' . $sorting->column->value, $sorting->order->value)
 				->select(['photos.id', 'photos.type'])
@@ -88,7 +91,10 @@ public static function createFromQueryable(Relation|Builder $photoQueryable, Sor
 	 * Note, this method assumes that the relation is already restricted
 	 * such that it only returns photos which the current user may see.
 	 *
-	 * @param Relation<Photo>|Builder<Photo> $photoQueryable the relation to or query for {@link Photo} which is used to pick a thumb
+	 * @template TDeclaringModel of \Illuminate\Database\Eloquent\Model
+	 * @template TResult
+	 *
+	 * @param Relation<Photo,TDeclaringModel,TResult>|Builder<Photo> $photoQueryable the relation to or query for {@link Photo} which is used to pick a thumb
 	 *
 	 * @return Thumb|null the created thumbnail; null if the relation is empty
 	 *
@@ -100,7 +106,7 @@ public static function createFromRandomQueryable(Relation|Builder $photoQueryabl
 		try {
 			/** @var Photo|null $cover */
 			$cover = $photoQueryable
-				->withOnly(['size_variants' => (fn (HasMany $r) => self::sizeVariantsFilter($r))])
+				->withOnly(['size_variants' => (fn ($r) => self::sizeVariantsFilter($r))])
 				->inRandomOrder()
 				->select(['photos.id', 'photos.type'])
 				->first();
diff --git a/app/Models/JobHistory.php b/app/Models/JobHistory.php
index af67207ad44..5abc1f85c66 100644
--- a/app/Models/JobHistory.php
+++ b/app/Models/JobHistory.php
@@ -74,7 +74,7 @@ public function newEloquentBuilder($query): JobHistoryBuilder
 	/**
 	 * Returns the relationship between an Job and its owner.
 	 *
-	 * @return BelongsTo<User,JobHistory>
+	 * @return BelongsTo<User,$this>
 	 */
 	public function owner(): BelongsTo
 	{
diff --git a/app/Models/OauthCredential.php b/app/Models/OauthCredential.php
index a6e01245c0e..3022cfd123a 100644
--- a/app/Models/OauthCredential.php
+++ b/app/Models/OauthCredential.php
@@ -47,7 +47,7 @@ class OauthCredential extends Model
 	/**
 	 * Return the relationship between a Photo and its Album.
 	 *
-	 * @return BelongsTo<User,OauthCredential>
+	 * @return BelongsTo<User,$this>
 	 */
 	public function user(): BelongsTo
 	{
diff --git a/app/Models/Photo.php b/app/Models/Photo.php
index 3ba1a4b1941..5197c1991db 100644
--- a/app/Models/Photo.php
+++ b/app/Models/Photo.php
@@ -184,7 +184,7 @@ public function newEloquentBuilder($query): PhotoBuilder
 	/**
 	 * Return the relationship between a Photo and its Album.
 	 *
-	 * @return BelongsTo<Album,Photo>
+	 * @return BelongsTo<Album,$this>
 	 */
 	public function album(): BelongsTo
 	{
@@ -194,7 +194,7 @@ public function album(): BelongsTo
 	/**
 	 * Return the relationship between a Photo and its Owner.
 	 *
-	 * @return BelongsTo<User,Photo>
+	 * @return BelongsTo<User,$this>
 	 */
 	public function owner(): BelongsTo
 	{
diff --git a/app/Models/SizeVariant.php b/app/Models/SizeVariant.php
index ede9699683c..70cd37034a3 100644
--- a/app/Models/SizeVariant.php
+++ b/app/Models/SizeVariant.php
@@ -140,7 +140,7 @@ public function newEloquentBuilder($query): SizeVariantBuilder
 	 * Returns the association to the photo which this size variant belongs
 	 * to.
 	 *
-	 * @return BelongsTo<Photo,SizeVariant>
+	 * @return BelongsTo<Photo,$this>
 	 */
 	public function photo(): BelongsTo
 	{
@@ -151,7 +151,7 @@ public function photo(): BelongsTo
 	 * Returns the association to the symbolics links which point to this
 	 * size variant.
 	 *
-	 * @return HasManyBidirectionally<SymLink,SizeVariant>
+	 * @return HasManyBidirectionally<SymLink,$this>
 	 */
 	public function sym_links(): HasManyBidirectionally
 	{
diff --git a/app/Models/SymLink.php b/app/Models/SymLink.php
index fad2f66e2c1..0378148c436 100644
--- a/app/Models/SymLink.php
+++ b/app/Models/SymLink.php
@@ -90,7 +90,7 @@ public function newEloquentBuilder($query): SymLinkBuilder
 	}
 
 	/**
-	 * @return BelongsTo<SizeVariant,SymLink>
+	 * @return BelongsTo<SizeVariant,$this>
 	 */
 	public function size_variant(): BelongsTo
 	{
diff --git a/app/Models/TagAlbum.php b/app/Models/TagAlbum.php
index 99e7b26d60f..7a9cea33721 100644
--- a/app/Models/TagAlbum.php
+++ b/app/Models/TagAlbum.php
@@ -95,7 +95,7 @@ class TagAlbum extends BaseAlbum
 		'thumb',
 	];
 
-	public function photos(): HasManyPhotosByTag
+	public function photos(): HasManyPhotosByTag // @phpstan-ignore-line
 	{
 		return new HasManyPhotosByTag($this);
 	}
diff --git a/app/Models/User.php b/app/Models/User.php
index 7b64c8857dd..5fa6b74a20d 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -128,7 +128,7 @@ public function newEloquentBuilder($query): UserBuilder
 	/**
 	 * Return the albums owned by the user.
 	 *
-	 * @return HasMany<Album>
+	 * @return HasMany<Album,$this>
 	 */
 	public function albums(): HasMany
 	{
@@ -139,7 +139,7 @@ public function albums(): HasMany
 	/**
 	 * Return the photos owned by the user.
 	 *
-	 * @return HasMany<Photo>
+	 * @return HasMany<Photo,$this>
 	 */
 	public function photos(): HasMany
 	{
@@ -149,7 +149,7 @@ public function photos(): HasMany
 	/**
 	 * Return the albums shared to the user.
 	 *
-	 * @return BelongsToMany<BaseAlbumImpl>
+	 * @return BelongsToMany<BaseAlbumImpl,$this>
 	 */
 	public function shared(): BelongsToMany
 	{
@@ -164,7 +164,7 @@ public function shared(): BelongsToMany
 	/**
 	 * Return the Oauth credentials owned by the user.
 	 *
-	 * @return HasMany<OauthCredential>
+	 * @return HasMany<OauthCredential,$this>
 	 */
 	public function oauthCredentials(): HasMany
 	{
@@ -208,7 +208,7 @@ public function getNameAttribute(): string
 	 */
 	public function delete(): bool
 	{
-		/** @var HasMany<Photo|Album>[] $ownershipRelations */
+		/** @var HasMany<Photo|Album,$this>[] $ownershipRelations */
 		$ownershipRelations = [$this->photos(), $this->albums()];
 		$hasAny = false;
 
diff --git a/app/Relations/BaseHasManyPhotos.php b/app/Relations/BaseHasManyPhotos.php
index 94efedfb756..939f8f38d36 100644
--- a/app/Relations/BaseHasManyPhotos.php
+++ b/app/Relations/BaseHasManyPhotos.php
@@ -5,9 +5,11 @@
 use App\DTO\SortingCriterion;
 use App\Eloquent\FixedQueryBuilder;
 use App\Exceptions\Internal\InvalidOrderDirectionException;
+use App\Models\Album;
 use App\Models\Extensions\BaseAlbum;
 use App\Models\Extensions\SortingDecorator;
 use App\Models\Photo;
+use App\Models\TagAlbum;
 use App\Policies\PhotoQueryPolicy;
 use Illuminate\Database\Eloquent\Collection;
 use Illuminate\Database\Eloquent\Relations\Relation;
@@ -17,13 +19,18 @@
  * direct parent of the queried photos, but include the photo due to some
  * indirect condition.
  *
- * @extends Relation<Photo>
+ * @template TDeclaringModel of TagAlbum|Album
+ *
+ * @extends Relation<Photo,TDeclaringModel,Collection<int,Photo>>
  */
 abstract class BaseHasManyPhotos extends Relation
 {
 	protected PhotoQueryPolicy $photoQueryPolicy;
 
-	public function __construct(BaseAlbum $owningAlbum)
+	/**
+	 * @param TagAlbum|Album $owningAlbum
+	 */
+	public function __construct(TagAlbum|Album $owningAlbum)
 	{
 		// Sic! We must initialize attributes of this class before we call
 		// the parent constructor.
@@ -48,6 +55,7 @@ public function __construct(BaseAlbum $owningAlbum)
 		// Moreover, it is impossible to pass `null`.
 		// As a work-around we store the owning album in our own attribute
 		// `$owningAlbum` and always use that instead of `$parent`.
+		/** @var Album|TagAlbum $owningAlbum */
 		parent::__construct(
 			// Sic! We also must load the album eagerly.
 			// This relation is not used by albums which own the queried
@@ -56,6 +64,7 @@ public function __construct(BaseAlbum $owningAlbum)
 			// Hence, the actually owning albums of the photos are not
 			// necessarily loaded.
 			Photo::query()->with(['album', 'size_variants', 'size_variants.sym_links']),
+			// @phpstan-ignore-next-line
 			$owningAlbum
 		);
 	}
@@ -83,8 +92,6 @@ public function getParent(): BaseAlbum
 		 * because it was set in the constructor as `$owningAlbum`.
 		 *
 		 * @noinspection PhpIncompatibleReturnTypeInspection
-		 *
-		 * @phpstan-ignore-next-line
 		 */
 		return $this->parent;
 	}
@@ -96,14 +103,14 @@ public function getParent(): BaseAlbum
 	 * In this case, the default value is an empty collection of
 	 * {@link \App\Models\Photo}.
 	 *
-	 * @param array<int,BaseAlbum> $models   a list of owning models, i.e. a list of albums
-	 * @param string               $relation the name of the relation on the owning models
+	 * @param array<int,TagAlbum|Album> $models   a list of owning models, i.e. a list of albums
+	 * @param string                    $relation the name of the relation on the owning models
 	 *
-	 * @return array<int,BaseAlbum> always returns $models
+	 * @return array<int,TagAlbum|Album> always returns $models
 	 */
 	public function initRelation(array $models, $relation): array
 	{
-		/** @var BaseAlbum $model */
+		/** @var TagAlbum|Album $model */
 		foreach ($models as $model) {
 			$model->setRelation($relation, $this->related->newCollection());
 		}
diff --git a/app/Relations/HasAlbumThumb.php b/app/Relations/HasAlbumThumb.php
index 9689517fcef..a3e2f0731cf 100644
--- a/app/Relations/HasAlbumThumb.php
+++ b/app/Relations/HasAlbumThumb.php
@@ -22,7 +22,7 @@
 /**
  * @mixin Builder<Photo>
  *
- * @extends Relation<Photo>
+ * @extends Relation<Photo,Album,Thumb|null>
  *
  * @disregard P1037
  */
diff --git a/app/Relations/HasManyBidirectionally.php b/app/Relations/HasManyBidirectionally.php
index 08a53890685..8be72f32267 100644
--- a/app/Relations/HasManyBidirectionally.php
+++ b/app/Relations/HasManyBidirectionally.php
@@ -10,9 +10,9 @@
 
 /**
  * @template TRelatedModel of \Illuminate\Database\Eloquent\Model
- * @template TParentModel of \Illuminate\Database\Eloquent\Model
+ * @template TDeclaringModel of \Illuminate\Database\Eloquent\Model
  *
- * @extends HasMany<TRelatedModel>
+ * @extends HasMany<TRelatedModel,TDeclaringModel>
  */
 class HasManyBidirectionally extends HasMany implements BidirectionalRelation
 {
@@ -20,7 +20,7 @@ class HasManyBidirectionally extends HasMany implements BidirectionalRelation
 
 	/**
 	 * @param Builder<TRelatedModel> $query
-	 * @param TParentModel           $parent
+	 * @param TDeclaringModel        $parent
 	 * @param string                 $foreignKey
 	 * @param string                 $localKey
 	 * @param string                 $foreignMethodName
@@ -29,7 +29,6 @@ class HasManyBidirectionally extends HasMany implements BidirectionalRelation
 	 */
 	public function __construct(Builder $query, Model $parent, string $foreignKey, string $localKey, string $foreignMethodName)
 	{
-		/** @phpstan-ignore-next-line */
 		parent::__construct($query, $parent, $foreignKey, $localKey);
 		$this->foreignMethodName = $foreignMethodName;
 	}
@@ -42,11 +41,11 @@ public function __construct(Builder $query, Model $parent, string $foreignKey, s
 	 * but additionally sets the reverse association of the child object
 	 * back to its parent object.
 	 *
-	 * @param TParentModel[]                $models   an array of parent models
+	 * @param TDeclaringModel[]             $models   an array of parent models
 	 * @param Collection<int,TRelatedModel> $results  the unified collection of all child models of all parent models
 	 * @param string                        $relation the name of the relation from the parent to the child models
 	 *
-	 * @return array<int,TParentModel>
+	 * @return array<int,TDeclaringModel>
 	 */
 	public function match(array $models, Collection $results, $relation): array
 	{
diff --git a/app/Relations/HasManyChildPhotos.php b/app/Relations/HasManyChildPhotos.php
index d55436d3d13..2e5fa3e530c 100644
--- a/app/Relations/HasManyChildPhotos.php
+++ b/app/Relations/HasManyChildPhotos.php
@@ -60,8 +60,6 @@ public function getParent(): Album
 		 * because it was set in the constructor as `$owningAlbum`.
 		 *
 		 * @noinspection PhpIncompatibleReturnTypeInspection
-		 *
-		 * @phpstan-ignore-next-line
 		 */
 		return $this->parent;
 	}
diff --git a/app/Relations/HasManyPhotosByTag.php b/app/Relations/HasManyPhotosByTag.php
index ce9154f1671..6fd7294971a 100644
--- a/app/Relations/HasManyPhotosByTag.php
+++ b/app/Relations/HasManyPhotosByTag.php
@@ -10,7 +10,11 @@
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Collection;
 
-/** @disregard */
+/**
+ * @disregard
+ *
+ * @extends BaseHasManyPhotos<TagAlbum>
+ */
 class HasManyPhotosByTag extends BaseHasManyPhotos
 {
 	public function __construct(TagAlbum $owningAlbum)
@@ -31,7 +35,6 @@ public function __construct(TagAlbum $owningAlbum)
 	public function addConstraints(): void
 	{
 		if (static::$constraints) {
-			/** @phpstan-ignore-next-line */
 			$this->addEagerConstraints([$this->parent]);
 		}
 	}
diff --git a/app/Relations/HasManyPhotosRecursively.php b/app/Relations/HasManyPhotosRecursively.php
index d276a9acd0d..f6ba804b2a3 100644
--- a/app/Relations/HasManyPhotosRecursively.php
+++ b/app/Relations/HasManyPhotosRecursively.php
@@ -12,7 +12,11 @@
 use Illuminate\Database\Eloquent\Collection;
 use Illuminate\Support\Facades\Gate;
 
-/** @disregard */
+/**
+ * @disregard
+ *
+ * @extends BaseHasManyPhotos<Album>
+ */
 class HasManyPhotosRecursively extends BaseHasManyPhotos
 {
 	protected AlbumQueryPolicy $albumQueryPolicy;
@@ -34,8 +38,6 @@ public function getParent(): Album
 		 * because it was set in the constructor as `$owningAlbum`.
 		 *
 		 * @noinspection PhpIncompatibleReturnTypeInspection
-		 *
-		 * @phpstan-ignore-next-line
 		 */
 		return $this->parent;
 	}
diff --git a/app/Relations/HasManySizeVariants.php b/app/Relations/HasManySizeVariants.php
index c40996b329f..7018e2e56a5 100644
--- a/app/Relations/HasManySizeVariants.php
+++ b/app/Relations/HasManySizeVariants.php
@@ -16,7 +16,7 @@
 use Illuminate\Database\Eloquent\Relations\HasMany;
 
 /**
- * @extends HasMany<SizeVariant>
+ * @extends HasMany<SizeVariant,Photo>
  */
 class HasManySizeVariants extends HasMany
 {
@@ -24,7 +24,7 @@ public function __construct(Photo $owningPhoto)
 	{
 		parent::__construct(
 			SizeVariant::query(),
-			$owningPhoto, /** @phpstan-ignore-line */
+			$owningPhoto,
 			'photo_id',
 			'id'
 		);
diff --git a/composer.lock b/composer.lock
index c6f5caf63a2..a66a56234ec 100644
--- a/composer.lock
+++ b/composer.lock
@@ -867,16 +867,16 @@
         },
         {
             "name": "aws/aws-crt-php",
-            "version": "v1.2.6",
+            "version": "v1.2.7",
             "source": {
                 "type": "git",
                 "url": "https://github.com/awslabs/aws-crt-php.git",
-                "reference": "a63485b65b6b3367039306496d49737cf1995408"
+                "reference": "d71d9906c7bb63a28295447ba12e74723bd3730e"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/awslabs/aws-crt-php/zipball/a63485b65b6b3367039306496d49737cf1995408",
-                "reference": "a63485b65b6b3367039306496d49737cf1995408",
+                "url": "https://api.github.com/repos/awslabs/aws-crt-php/zipball/d71d9906c7bb63a28295447ba12e74723bd3730e",
+                "reference": "d71d9906c7bb63a28295447ba12e74723bd3730e",
                 "shasum": ""
             },
             "require": {
@@ -915,22 +915,22 @@
             ],
             "support": {
                 "issues": "https://github.com/awslabs/aws-crt-php/issues",
-                "source": "https://github.com/awslabs/aws-crt-php/tree/v1.2.6"
+                "source": "https://github.com/awslabs/aws-crt-php/tree/v1.2.7"
             },
-            "time": "2024-06-13T17:21:28+00:00"
+            "time": "2024-10-18T22:15:13+00:00"
         },
         {
             "name": "aws/aws-sdk-php",
-            "version": "3.324.2",
+            "version": "3.324.9",
             "source": {
                 "type": "git",
                 "url": "https://github.com/aws/aws-sdk-php.git",
-                "reference": "fea3d0ac8f96009cb87cf8166caba6558f26a0ab"
+                "reference": "e6cb2597e6365c420f42d218a3a4e82a20df700d"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/fea3d0ac8f96009cb87cf8166caba6558f26a0ab",
-                "reference": "fea3d0ac8f96009cb87cf8166caba6558f26a0ab",
+                "url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/e6cb2597e6365c420f42d218a3a4e82a20df700d",
+                "reference": "e6cb2597e6365c420f42d218a3a4e82a20df700d",
                 "shasum": ""
             },
             "require": {
@@ -1013,9 +1013,9 @@
             "support": {
                 "forum": "https://forums.aws.amazon.com/forum.jspa?forumID=80",
                 "issues": "https://github.com/aws/aws-sdk-php/issues",
-                "source": "https://github.com/aws/aws-sdk-php/tree/3.324.2"
+                "source": "https://github.com/aws/aws-sdk-php/tree/3.324.9"
             },
-            "time": "2024-10-14T18:06:11+00:00"
+            "time": "2024-10-23T18:06:30+00:00"
         },
         {
             "name": "bepsvpt/secure-headers",
@@ -2736,16 +2736,16 @@
         },
         {
             "name": "guzzlehttp/promises",
-            "version": "2.0.3",
+            "version": "2.0.4",
             "source": {
                 "type": "git",
                 "url": "https://github.com/guzzle/promises.git",
-                "reference": "6ea8dd08867a2a42619d65c3deb2c0fcbf81c8f8"
+                "reference": "f9c436286ab2892c7db7be8c8da4ef61ccf7b455"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/guzzle/promises/zipball/6ea8dd08867a2a42619d65c3deb2c0fcbf81c8f8",
-                "reference": "6ea8dd08867a2a42619d65c3deb2c0fcbf81c8f8",
+                "url": "https://api.github.com/repos/guzzle/promises/zipball/f9c436286ab2892c7db7be8c8da4ef61ccf7b455",
+                "reference": "f9c436286ab2892c7db7be8c8da4ef61ccf7b455",
                 "shasum": ""
             },
             "require": {
@@ -2799,7 +2799,7 @@
             ],
             "support": {
                 "issues": "https://github.com/guzzle/promises/issues",
-                "source": "https://github.com/guzzle/promises/tree/2.0.3"
+                "source": "https://github.com/guzzle/promises/tree/2.0.4"
             },
             "funding": [
                 {
@@ -2815,7 +2815,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2024-07-18T10:29:17+00:00"
+            "time": "2024-10-17T10:06:22+00:00"
         },
         {
             "name": "guzzlehttp/psr7",
@@ -3441,16 +3441,16 @@
         },
         {
             "name": "laravel/framework",
-            "version": "v11.27.2",
+            "version": "v11.29.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/framework.git",
-                "reference": "a51d1f2b771c542324a3d9b76a98b1bbc75c0ee9"
+                "reference": "425054512c362835ba9c0307561973c8eeac7385"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/framework/zipball/a51d1f2b771c542324a3d9b76a98b1bbc75c0ee9",
-                "reference": "a51d1f2b771c542324a3d9b76a98b1bbc75c0ee9",
+                "url": "https://api.github.com/repos/laravel/framework/zipball/425054512c362835ba9c0307561973c8eeac7385",
+                "reference": "425054512c362835ba9c0307561973c8eeac7385",
                 "shasum": ""
             },
             "require": {
@@ -3646,20 +3646,20 @@
                 "issues": "https://github.com/laravel/framework/issues",
                 "source": "https://github.com/laravel/framework"
             },
-            "time": "2024-10-09T04:17:35+00:00"
+            "time": "2024-10-22T14:13:31+00:00"
         },
         {
             "name": "laravel/prompts",
-            "version": "v0.3.0",
+            "version": "v0.3.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/prompts.git",
-                "reference": "ea57a2261093986721d4a5f4f9524d76f21f9fa0"
+                "reference": "0f3848a445562dac376b27968f753c65e7e1036e"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/prompts/zipball/ea57a2261093986721d4a5f4f9524d76f21f9fa0",
-                "reference": "ea57a2261093986721d4a5f4f9524d76f21f9fa0",
+                "url": "https://api.github.com/repos/laravel/prompts/zipball/0f3848a445562dac376b27968f753c65e7e1036e",
+                "reference": "0f3848a445562dac376b27968f753c65e7e1036e",
                 "shasum": ""
             },
             "require": {
@@ -3703,9 +3703,9 @@
             "description": "Add beautiful and user-friendly forms to your command-line applications.",
             "support": {
                 "issues": "https://github.com/laravel/prompts/issues",
-                "source": "https://github.com/laravel/prompts/tree/v0.3.0"
+                "source": "https://github.com/laravel/prompts/tree/v0.3.1"
             },
-            "time": "2024-09-30T14:27:51+00:00"
+            "time": "2024-10-09T19:42:26+00:00"
         },
         {
             "name": "laravel/serializable-closure",
@@ -4751,16 +4751,16 @@
         },
         {
             "name": "lychee-org/nestedset",
-            "version": "v9.0.0",
+            "version": "v9.0.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/LycheeOrg/laravel-nestedset.git",
-                "reference": "1a1f200ac78cc495b1f3cd5c568e1e5dc7bbd179"
+                "reference": "dcd86fa1dfcc7343a4b0ceddbda32ba55b2b440a"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/LycheeOrg/laravel-nestedset/zipball/1a1f200ac78cc495b1f3cd5c568e1e5dc7bbd179",
-                "reference": "1a1f200ac78cc495b1f3cd5c568e1e5dc7bbd179",
+                "url": "https://api.github.com/repos/LycheeOrg/laravel-nestedset/zipball/dcd86fa1dfcc7343a4b0ceddbda32ba55b2b440a",
+                "reference": "dcd86fa1dfcc7343a4b0ceddbda32ba55b2b440a",
                 "shasum": ""
             },
             "require": {
@@ -4771,8 +4771,8 @@
             },
             "require-dev": {
                 "friendsofphp/php-cs-fixer": "^3.3",
+                "larastan/larastan": "^2.0",
                 "lychee-org/phpstan-lychee": "^1.0.4",
-                "nunomaduro/larastan": "^2.0",
                 "orchestra/testbench": "^9.0",
                 "php-parallel-lint/php-parallel-lint": "^1.2",
                 "phpunit/phpunit": "^10.5"
@@ -4812,9 +4812,9 @@
                 "nsm"
             ],
             "support": {
-                "source": "https://github.com/LycheeOrg/laravel-nestedset/tree/v9.0.0"
+                "source": "https://github.com/LycheeOrg/laravel-nestedset/tree/v9.0.1"
             },
-            "time": "2024-06-10T16:33:01+00:00"
+            "time": "2024-10-23T21:46:18+00:00"
         },
         {
             "name": "lychee-org/php-exif",
@@ -5464,32 +5464,31 @@
         },
         {
             "name": "nunomaduro/termwind",
-            "version": "v2.1.0",
+            "version": "v2.2.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/nunomaduro/termwind.git",
-                "reference": "e5f21eade88689536c0cdad4c3cd75f3ed26e01a"
+                "reference": "42c84e4e8090766bbd6445d06cd6e57650626ea3"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/nunomaduro/termwind/zipball/e5f21eade88689536c0cdad4c3cd75f3ed26e01a",
-                "reference": "e5f21eade88689536c0cdad4c3cd75f3ed26e01a",
+                "url": "https://api.github.com/repos/nunomaduro/termwind/zipball/42c84e4e8090766bbd6445d06cd6e57650626ea3",
+                "reference": "42c84e4e8090766bbd6445d06cd6e57650626ea3",
                 "shasum": ""
             },
             "require": {
                 "ext-mbstring": "*",
                 "php": "^8.2",
-                "symfony/console": "^7.0.4"
+                "symfony/console": "^7.1.5"
             },
             "require-dev": {
-                "ergebnis/phpstan-rules": "^2.2.0",
-                "illuminate/console": "^11.1.1",
-                "laravel/pint": "^1.15.0",
-                "mockery/mockery": "^1.6.11",
-                "pestphp/pest": "^2.34.6",
-                "phpstan/phpstan": "^1.10.66",
-                "phpstan/phpstan-strict-rules": "^1.5.2",
-                "symfony/var-dumper": "^7.0.4",
+                "illuminate/console": "^11.28.0",
+                "laravel/pint": "^1.18.1",
+                "mockery/mockery": "^1.6.12",
+                "pestphp/pest": "^2.36.0",
+                "phpstan/phpstan": "^1.12.6",
+                "phpstan/phpstan-strict-rules": "^1.6.1",
+                "symfony/var-dumper": "^7.1.5",
                 "thecodingmachine/phpstan-strict-rules": "^1.0.0"
             },
             "type": "library",
@@ -5532,7 +5531,7 @@
             ],
             "support": {
                 "issues": "https://github.com/nunomaduro/termwind/issues",
-                "source": "https://github.com/nunomaduro/termwind/tree/v2.1.0"
+                "source": "https://github.com/nunomaduro/termwind/tree/v2.2.0"
             },
             "funding": [
                 {
@@ -5548,7 +5547,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2024-09-05T15:25:50+00:00"
+            "time": "2024-10-15T16:15:16+00:00"
         },
         {
             "name": "opcodesio/log-viewer",
@@ -8155,16 +8154,16 @@
         },
         {
             "name": "spatie/laravel-data",
-            "version": "4.10.1",
+            "version": "4.11.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/spatie/laravel-data.git",
-                "reference": "d3113c6bc03a6f1c241074d6f5832e05daa7ca77"
+                "reference": "df5b58baebae34475ca35338b4e9a131c9e2a8e0"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/spatie/laravel-data/zipball/d3113c6bc03a6f1c241074d6f5832e05daa7ca77",
-                "reference": "d3113c6bc03a6f1c241074d6f5832e05daa7ca77",
+                "url": "https://api.github.com/repos/spatie/laravel-data/zipball/df5b58baebae34475ca35338b4e9a131c9e2a8e0",
+                "reference": "df5b58baebae34475ca35338b4e9a131c9e2a8e0",
                 "shasum": ""
             },
             "require": {
@@ -8190,7 +8189,7 @@
                 "phpstan/extension-installer": "^1.1",
                 "phpunit/phpunit": "^10.0",
                 "spatie/invade": "^1.0",
-                "spatie/laravel-typescript-transformer": "^2.3",
+                "spatie/laravel-typescript-transformer": "^2.5",
                 "spatie/pest-plugin-snapshots": "^2.1",
                 "spatie/test-time": "^1.2"
             },
@@ -8227,7 +8226,7 @@
             ],
             "support": {
                 "issues": "https://github.com/spatie/laravel-data/issues",
-                "source": "https://github.com/spatie/laravel-data/tree/4.10.1"
+                "source": "https://github.com/spatie/laravel-data/tree/4.11.1"
             },
             "funding": [
                 {
@@ -8235,7 +8234,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2024-10-07T08:36:46+00:00"
+            "time": "2024-10-23T07:14:53+00:00"
         },
         {
             "name": "spatie/laravel-feed",
@@ -11699,16 +11698,16 @@
     "packages-dev": [
         {
             "name": "barryvdh/laravel-debugbar",
-            "version": "v3.14.3",
+            "version": "v3.14.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/barryvdh/laravel-debugbar.git",
-                "reference": "c0bee7c08ae2429e4a9ed2bc75679b012db6e3bd"
+                "reference": "14e4517bd49130d6119228107eb21ae47ae120ab"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/barryvdh/laravel-debugbar/zipball/c0bee7c08ae2429e4a9ed2bc75679b012db6e3bd",
-                "reference": "c0bee7c08ae2429e4a9ed2bc75679b012db6e3bd",
+                "url": "https://api.github.com/repos/barryvdh/laravel-debugbar/zipball/14e4517bd49130d6119228107eb21ae47ae120ab",
+                "reference": "14e4517bd49130d6119228107eb21ae47ae120ab",
                 "shasum": ""
             },
             "require": {
@@ -11767,7 +11766,7 @@
             ],
             "support": {
                 "issues": "https://github.com/barryvdh/laravel-debugbar/issues",
-                "source": "https://github.com/barryvdh/laravel-debugbar/tree/v3.14.3"
+                "source": "https://github.com/barryvdh/laravel-debugbar/tree/v3.14.6"
             },
             "funding": [
                 {
@@ -11779,41 +11778,41 @@
                     "type": "github"
                 }
             ],
-            "time": "2024-10-02T09:17:49+00:00"
+            "time": "2024-10-18T13:15:12+00:00"
         },
         {
             "name": "barryvdh/laravel-ide-helper",
-            "version": "v3.1.0",
+            "version": "v3.2.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/barryvdh/laravel-ide-helper.git",
-                "reference": "591e7d665fbab8a3b682e451641706341573eb80"
+                "reference": "7956ccb4943f8532d008c17a1094b34bb6394d56"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/barryvdh/laravel-ide-helper/zipball/591e7d665fbab8a3b682e451641706341573eb80",
-                "reference": "591e7d665fbab8a3b682e451641706341573eb80",
+                "url": "https://api.github.com/repos/barryvdh/laravel-ide-helper/zipball/7956ccb4943f8532d008c17a1094b34bb6394d56",
+                "reference": "7956ccb4943f8532d008c17a1094b34bb6394d56",
                 "shasum": ""
             },
             "require": {
-                "barryvdh/reflection-docblock": "^2.1.1",
+                "barryvdh/reflection-docblock": "^2.1.2",
                 "composer/class-map-generator": "^1.0",
                 "ext-json": "*",
-                "illuminate/console": "^10 || ^11",
-                "illuminate/database": "^10.38 || ^11",
-                "illuminate/filesystem": "^10 || ^11",
-                "illuminate/support": "^10 || ^11",
+                "illuminate/console": "^11.15",
+                "illuminate/database": "^11.15",
+                "illuminate/filesystem": "^11.15",
+                "illuminate/support": "^11.15",
                 "nikic/php-parser": "^4.18 || ^5",
-                "php": "^8.1",
+                "php": "^8.2",
                 "phpdocumentor/type-resolver": "^1.1.0"
             },
             "require-dev": {
                 "ext-pdo_sqlite": "*",
                 "friendsofphp/php-cs-fixer": "^3",
-                "illuminate/config": "^9 || ^10 || ^11",
-                "illuminate/view": "^9 || ^10 || ^11",
+                "illuminate/config": "^11.15",
+                "illuminate/view": "^11.15",
                 "mockery/mockery": "^1.4",
-                "orchestra/testbench": "^8 || ^9",
+                "orchestra/testbench": "^9.2",
                 "phpunit/phpunit": "^10.5",
                 "spatie/phpunit-snapshot-assertions": "^4 || ^5",
                 "vimeo/psalm": "^5.4"
@@ -11824,7 +11823,7 @@
             "type": "library",
             "extra": {
                 "branch-alias": {
-                    "dev-master": "3.1-dev"
+                    "dev-master": "3.2-dev"
                 },
                 "laravel": {
                     "providers": [
@@ -11861,7 +11860,7 @@
             ],
             "support": {
                 "issues": "https://github.com/barryvdh/laravel-ide-helper/issues",
-                "source": "https://github.com/barryvdh/laravel-ide-helper/tree/v3.1.0"
+                "source": "https://github.com/barryvdh/laravel-ide-helper/tree/v3.2.0"
             },
             "funding": [
                 {
@@ -11873,20 +11872,20 @@
                     "type": "github"
                 }
             ],
-            "time": "2024-07-12T14:20:51+00:00"
+            "time": "2024-10-17T16:43:13+00:00"
         },
         {
             "name": "barryvdh/reflection-docblock",
-            "version": "v2.1.1",
+            "version": "v2.1.3",
             "source": {
                 "type": "git",
                 "url": "https://github.com/barryvdh/ReflectionDocBlock.git",
-                "reference": "e6811e927f0ecc37cc4deaa6627033150343e597"
+                "reference": "c6fad15f7c878be21650c51e1f841bca7e49752e"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/barryvdh/ReflectionDocBlock/zipball/e6811e927f0ecc37cc4deaa6627033150343e597",
-                "reference": "e6811e927f0ecc37cc4deaa6627033150343e597",
+                "url": "https://api.github.com/repos/barryvdh/ReflectionDocBlock/zipball/c6fad15f7c878be21650c51e1f841bca7e49752e",
+                "reference": "c6fad15f7c878be21650c51e1f841bca7e49752e",
                 "shasum": ""
             },
             "require": {
@@ -11923,22 +11922,22 @@
                 }
             ],
             "support": {
-                "source": "https://github.com/barryvdh/ReflectionDocBlock/tree/v2.1.1"
+                "source": "https://github.com/barryvdh/ReflectionDocBlock/tree/v2.1.3"
             },
-            "time": "2023-06-14T05:06:27+00:00"
+            "time": "2024-10-23T11:41:03+00:00"
         },
         {
             "name": "brianium/paratest",
-            "version": "v7.4.7",
+            "version": "v7.4.8",
             "source": {
                 "type": "git",
                 "url": "https://github.com/paratestphp/paratest.git",
-                "reference": "70573947888f65dc45fc7a75f883589c7d6a1353"
+                "reference": "cf16fcbb9b8107a7df6b97e497fc91e819774d8b"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/paratestphp/paratest/zipball/70573947888f65dc45fc7a75f883589c7d6a1353",
-                "reference": "70573947888f65dc45fc7a75f883589c7d6a1353",
+                "url": "https://api.github.com/repos/paratestphp/paratest/zipball/cf16fcbb9b8107a7df6b97e497fc91e819774d8b",
+                "reference": "cf16fcbb9b8107a7df6b97e497fc91e819774d8b",
                 "shasum": ""
             },
             "require": {
@@ -11948,25 +11947,25 @@
                 "ext-simplexml": "*",
                 "fidry/cpu-core-counter": "^1.2.0",
                 "jean85/pretty-package-versions": "^2.0.6",
-                "php": "~8.2.0 || ~8.3.0",
+                "php": "~8.2.0 || ~8.3.0 || ~8.4.0",
                 "phpunit/php-code-coverage": "^10.1.16",
                 "phpunit/php-file-iterator": "^4.1.0",
                 "phpunit/php-timer": "^6.0.0",
-                "phpunit/phpunit": "^10.5.33",
+                "phpunit/phpunit": "^10.5.36",
                 "sebastian/environment": "^6.1.0",
-                "symfony/console": "^6.4.7 || ^7.1.4",
-                "symfony/process": "^6.4.7 || ^7.1.3"
+                "symfony/console": "^6.4.7 || ^7.1.5",
+                "symfony/process": "^6.4.7 || ^7.1.5"
             },
             "require-dev": {
                 "doctrine/coding-standard": "^12.0.0",
                 "ext-pcov": "*",
                 "ext-posix": "*",
-                "phpstan/phpstan": "^1.12.3",
-                "phpstan/phpstan-deprecation-rules": "^1.2.0",
+                "phpstan/phpstan": "^1.12.6",
+                "phpstan/phpstan-deprecation-rules": "^1.2.1",
                 "phpstan/phpstan-phpunit": "^1.4.0",
-                "phpstan/phpstan-strict-rules": "^1.6.0",
-                "squizlabs/php_codesniffer": "^3.10.2",
-                "symfony/filesystem": "^6.4.3 || ^7.1.2"
+                "phpstan/phpstan-strict-rules": "^1.6.1",
+                "squizlabs/php_codesniffer": "^3.10.3",
+                "symfony/filesystem": "^6.4.3 || ^7.1.5"
             },
             "bin": [
                 "bin/paratest",
@@ -12006,7 +12005,7 @@
             ],
             "support": {
                 "issues": "https://github.com/paratestphp/paratest/issues",
-                "source": "https://github.com/paratestphp/paratest/tree/v7.4.7"
+                "source": "https://github.com/paratestphp/paratest/tree/v7.4.8"
             },
             "funding": [
                 {
@@ -12018,7 +12017,7 @@
                     "type": "paypal"
                 }
             ],
-            "time": "2024-10-14T07:14:10+00:00"
+            "time": "2024-10-15T12:45:19+00:00"
         },
         {
             "name": "clue/ndjson-react",
@@ -12868,36 +12867,37 @@
         },
         {
             "name": "larastan/larastan",
-            "version": "v2.9.8",
+            "version": "v2.9.9",
             "source": {
                 "type": "git",
                 "url": "https://github.com/larastan/larastan.git",
-                "reference": "340badd89b0eb5bddbc503a4829c08cf9a2819d7"
+                "reference": "148faa138f0d8acb7d85f4a55693d3e13b6048d2"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/larastan/larastan/zipball/340badd89b0eb5bddbc503a4829c08cf9a2819d7",
-                "reference": "340badd89b0eb5bddbc503a4829c08cf9a2819d7",
+                "url": "https://api.github.com/repos/larastan/larastan/zipball/148faa138f0d8acb7d85f4a55693d3e13b6048d2",
+                "reference": "148faa138f0d8acb7d85f4a55693d3e13b6048d2",
                 "shasum": ""
             },
             "require": {
                 "ext-json": "*",
-                "illuminate/console": "^9.52.16 || ^10.28.0 || ^11.0",
-                "illuminate/container": "^9.52.16 || ^10.28.0 || ^11.0",
-                "illuminate/contracts": "^9.52.16 || ^10.28.0 || ^11.0",
-                "illuminate/database": "^9.52.16 || ^10.28.0 || ^11.0",
-                "illuminate/http": "^9.52.16 || ^10.28.0 || ^11.0",
-                "illuminate/pipeline": "^9.52.16 || ^10.28.0 || ^11.0",
-                "illuminate/support": "^9.52.16 || ^10.28.0 || ^11.0",
+                "illuminate/console": "^9.52.16 || ^10.28.0 || ^11.16",
+                "illuminate/container": "^9.52.16 || ^10.28.0 || ^11.16",
+                "illuminate/contracts": "^9.52.16 || ^10.28.0 || ^11.16",
+                "illuminate/database": "^9.52.16 || ^10.28.0 || ^11.16",
+                "illuminate/http": "^9.52.16 || ^10.28.0 || ^11.16",
+                "illuminate/pipeline": "^9.52.16 || ^10.28.0 || ^11.16",
+                "illuminate/support": "^9.52.16 || ^10.28.0 || ^11.16",
                 "php": "^8.0.2",
                 "phpmyadmin/sql-parser": "^5.9.0",
-                "phpstan/phpstan": "^1.11.2"
+                "phpstan/phpstan": "^1.12.5"
             },
             "require-dev": {
                 "doctrine/coding-standard": "^12.0",
                 "nikic/php-parser": "^4.19.1",
                 "orchestra/canvas": "^7.11.1 || ^8.11.0 || ^9.0.2",
                 "orchestra/testbench": "^7.33.0 || ^8.13.0 || ^9.0.3",
+                "phpstan/phpstan-deprecation-rules": "^1.2",
                 "phpunit/phpunit": "^9.6.13 || ^10.5.16"
             },
             "suggest": {
@@ -12946,7 +12946,7 @@
             ],
             "support": {
                 "issues": "https://github.com/larastan/larastan/issues",
-                "source": "https://github.com/larastan/larastan/tree/v2.9.8"
+                "source": "https://github.com/larastan/larastan/tree/v2.9.9"
             },
             "funding": [
                 {
@@ -12966,20 +12966,20 @@
                     "type": "patreon"
                 }
             ],
-            "time": "2024-07-06T17:46:02+00:00"
+            "time": "2024-10-15T19:41:22+00:00"
         },
         {
             "name": "lychee-org/phpstan-lychee",
-            "version": "v1.0.4",
+            "version": "v1.0.5",
             "source": {
                 "type": "git",
                 "url": "https://github.com/LycheeOrg/phpstan-lychee.git",
-                "reference": "4f04a10680fbe50884159b0ef8c06a670117f16d"
+                "reference": "fcdd430577c26178da59809db4e1dd0f0f12fc5e"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/LycheeOrg/phpstan-lychee/zipball/4f04a10680fbe50884159b0ef8c06a670117f16d",
-                "reference": "4f04a10680fbe50884159b0ef8c06a670117f16d",
+                "url": "https://api.github.com/repos/LycheeOrg/phpstan-lychee/zipball/fcdd430577c26178da59809db4e1dd0f0f12fc5e",
+                "reference": "fcdd430577c26178da59809db4e1dd0f0f12fc5e",
                 "shasum": ""
             },
             "require": {
@@ -13012,10 +13012,10 @@
             ],
             "description": "Set of rules for all Lychee related php repo",
             "support": {
-                "source": "https://github.com/LycheeOrg/phpstan-lychee/tree/v1.0.4",
+                "source": "https://github.com/LycheeOrg/phpstan-lychee/tree/v1.0.5",
                 "issues": "https://github.com/LycheeOrg/phpstan-lychee/issues"
             },
-            "time": "2024-05-25T20:57:05+00:00"
+            "time": "2024-10-23T21:13:51+00:00"
         },
         {
             "name": "maximebf/debugbar",
@@ -13230,23 +13230,23 @@
         },
         {
             "name": "nunomaduro/collision",
-            "version": "v8.4.0",
+            "version": "v8.5.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/nunomaduro/collision.git",
-                "reference": "e7d1aa8ed753f63fa816932bbc89678238843b4a"
+                "reference": "f5c101b929c958e849a633283adff296ed5f38f5"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/nunomaduro/collision/zipball/e7d1aa8ed753f63fa816932bbc89678238843b4a",
-                "reference": "e7d1aa8ed753f63fa816932bbc89678238843b4a",
+                "url": "https://api.github.com/repos/nunomaduro/collision/zipball/f5c101b929c958e849a633283adff296ed5f38f5",
+                "reference": "f5c101b929c958e849a633283adff296ed5f38f5",
                 "shasum": ""
             },
             "require": {
-                "filp/whoops": "^2.15.4",
-                "nunomaduro/termwind": "^2.0.1",
+                "filp/whoops": "^2.16.0",
+                "nunomaduro/termwind": "^2.1.0",
                 "php": "^8.2.0",
-                "symfony/console": "^7.1.3"
+                "symfony/console": "^7.1.5"
             },
             "conflict": {
                 "laravel/framework": "<11.0.0 || >=12.0.0",
@@ -13254,14 +13254,14 @@
             },
             "require-dev": {
                 "larastan/larastan": "^2.9.8",
-                "laravel/framework": "^11.19.0",
-                "laravel/pint": "^1.17.1",
-                "laravel/sail": "^1.31.0",
-                "laravel/sanctum": "^4.0.2",
-                "laravel/tinker": "^2.9.0",
-                "orchestra/testbench-core": "^9.2.3",
-                "pestphp/pest": "^2.35.0 || ^3.0.0",
-                "sebastian/environment": "^6.1.0 || ^7.0.0"
+                "laravel/framework": "^11.28.0",
+                "laravel/pint": "^1.18.1",
+                "laravel/sail": "^1.36.0",
+                "laravel/sanctum": "^4.0.3",
+                "laravel/tinker": "^2.10.0",
+                "orchestra/testbench-core": "^9.5.3",
+                "pestphp/pest": "^2.36.0 || ^3.4.0",
+                "sebastian/environment": "^6.1.0 || ^7.2.0"
             },
             "type": "library",
             "extra": {
@@ -13323,7 +13323,7 @@
                     "type": "patreon"
                 }
             ],
-            "time": "2024-08-03T15:32:23+00:00"
+            "time": "2024-10-15T16:06:32+00:00"
         },
         {
             "name": "phar-io/manifest",
@@ -13593,16 +13593,16 @@
         },
         {
             "name": "phpstan/phpstan",
-            "version": "1.12.6",
+            "version": "1.12.7",
             "source": {
                 "type": "git",
                 "url": "https://github.com/phpstan/phpstan.git",
-                "reference": "dc4d2f145a88ea7141ae698effd64d9df46527ae"
+                "reference": "dc2b9976bd8b0f84ec9b0e50cc35378551de7af0"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/phpstan/phpstan/zipball/dc4d2f145a88ea7141ae698effd64d9df46527ae",
-                "reference": "dc4d2f145a88ea7141ae698effd64d9df46527ae",
+                "url": "https://api.github.com/repos/phpstan/phpstan/zipball/dc2b9976bd8b0f84ec9b0e50cc35378551de7af0",
+                "reference": "dc2b9976bd8b0f84ec9b0e50cc35378551de7af0",
                 "shasum": ""
             },
             "require": {
@@ -13647,7 +13647,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2024-10-06T15:03:59+00:00"
+            "time": "2024-10-18T11:12:07+00:00"
         },
         {
             "name": "phpstan/phpstan-deprecation-rules",
@@ -14068,16 +14068,16 @@
         },
         {
             "name": "phpunit/phpunit",
-            "version": "10.5.36",
+            "version": "10.5.37",
             "source": {
                 "type": "git",
                 "url": "https://github.com/sebastianbergmann/phpunit.git",
-                "reference": "aa0a8ce701ea7ee314b0dfaa8970dc94f3f8c870"
+                "reference": "c7cffa0efa2b70c22366523e6d804c9419eb2400"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/sebastianbergmann/phpunit/zipball/aa0a8ce701ea7ee314b0dfaa8970dc94f3f8c870",
-                "reference": "aa0a8ce701ea7ee314b0dfaa8970dc94f3f8c870",
+                "url": "https://api.github.com/repos/sebastianbergmann/phpunit/zipball/c7cffa0efa2b70c22366523e6d804c9419eb2400",
+                "reference": "c7cffa0efa2b70c22366523e6d804c9419eb2400",
                 "shasum": ""
             },
             "require": {
@@ -14098,7 +14098,7 @@
                 "phpunit/php-timer": "^6.0.0",
                 "sebastian/cli-parser": "^2.0.1",
                 "sebastian/code-unit": "^2.0.0",
-                "sebastian/comparator": "^5.0.2",
+                "sebastian/comparator": "^5.0.3",
                 "sebastian/diff": "^5.1.1",
                 "sebastian/environment": "^6.1.0",
                 "sebastian/exporter": "^5.1.2",
@@ -14149,7 +14149,7 @@
             "support": {
                 "issues": "https://github.com/sebastianbergmann/phpunit/issues",
                 "security": "https://github.com/sebastianbergmann/phpunit/security/policy",
-                "source": "https://github.com/sebastianbergmann/phpunit/tree/10.5.36"
+                "source": "https://github.com/sebastianbergmann/phpunit/tree/10.5.37"
             },
             "funding": [
                 {
@@ -14165,7 +14165,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2024-10-08T15:36:51+00:00"
+            "time": "2024-10-19T13:03:41+00:00"
         },
         {
             "name": "react/cache",
@@ -14867,16 +14867,16 @@
         },
         {
             "name": "sebastian/comparator",
-            "version": "5.0.2",
+            "version": "5.0.3",
             "source": {
                 "type": "git",
                 "url": "https://github.com/sebastianbergmann/comparator.git",
-                "reference": "2d3e04c3b4c1e84a5e7382221ad8883c8fbc4f53"
+                "reference": "a18251eb0b7a2dcd2f7aa3d6078b18545ef0558e"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/sebastianbergmann/comparator/zipball/2d3e04c3b4c1e84a5e7382221ad8883c8fbc4f53",
-                "reference": "2d3e04c3b4c1e84a5e7382221ad8883c8fbc4f53",
+                "url": "https://api.github.com/repos/sebastianbergmann/comparator/zipball/a18251eb0b7a2dcd2f7aa3d6078b18545ef0558e",
+                "reference": "a18251eb0b7a2dcd2f7aa3d6078b18545ef0558e",
                 "shasum": ""
             },
             "require": {
@@ -14887,7 +14887,7 @@
                 "sebastian/exporter": "^5.0"
             },
             "require-dev": {
-                "phpunit/phpunit": "^10.4"
+                "phpunit/phpunit": "^10.5"
             },
             "type": "library",
             "extra": {
@@ -14932,7 +14932,7 @@
             "support": {
                 "issues": "https://github.com/sebastianbergmann/comparator/issues",
                 "security": "https://github.com/sebastianbergmann/comparator/security/policy",
-                "source": "https://github.com/sebastianbergmann/comparator/tree/5.0.2"
+                "source": "https://github.com/sebastianbergmann/comparator/tree/5.0.3"
             },
             "funding": [
                 {
@@ -14940,7 +14940,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2024-08-12T06:03:08+00:00"
+            "time": "2024-10-18T14:56:07+00:00"
         },
         {
             "name": "sebastian/complexity",
diff --git a/config/app.php b/config/app.php
index b8fc30b3b99..62ff18af14f 100644
--- a/config/app.php
+++ b/config/app.php
@@ -15,7 +15,7 @@
 if (!function_exists('renv')) {
 	function renv(string $cst, ?string $default = null): string
 	{
-		return rtrim(env($cst, $default) ?? '', '/');
+		return rtrim((string) (env($cst, $default) ?? ''), '/');
 	}
 }
 
@@ -76,7 +76,7 @@ function renv(string $cst, ?string $default = null): string
 
 	'url' => renv('APP_URL', 'http://localhost'),
 
-	'dir_url' => env('APP_DIR', '') === '' ? '' : ('/' . trim(env('APP_DIR'), '/')),
+	'dir_url' => env('APP_DIR', '') === '' ? '' : ('/' . trim((string) (env('APP_DIR') ?? ''), '/')),
 
 	'asset_url' => null,
 
@@ -151,7 +151,7 @@ function renv(string $cst, ?string $default = null): string
 	| Allows to define class names of diagnostics checks that will be skipped.
 	|
 	*/
-	'skip_diagnostics_checks' => explode(',', env('SKIP_DIAGNOSTICS_CHECKS', '')),
+	'skip_diagnostics_checks' => explode(',', (string) env('SKIP_DIAGNOSTICS_CHECKS', '')),
 
 	/*
 	|--------------------------------------------------------------------------
diff --git a/config/cache.php b/config/cache.php
index da158160bca..2e68fee947a 100644
--- a/config/cache.php
+++ b/config/cache.php
@@ -102,5 +102,5 @@
 	|
 	*/
 
-	'prefix' => env('CACHE_PREFIX', Str::slug(env('APP_NAME', 'Lychee'), '_') . '_cache_'),
+	'prefix' => env('CACHE_PREFIX', Str::slug((string) env('APP_NAME', 'Lychee'), '_') . '_cache_'),
 ];
diff --git a/config/database.php b/config/database.php
index ada6f697b1f..da0afd5aa7b 100644
--- a/config/database.php
+++ b/config/database.php
@@ -183,7 +183,7 @@
 
 		'options' => [
 			'cluster' => env('REDIS_CLUSTER', 'redis'),
-			'prefix' => env('REDIS_PREFIX', Str::slug(env('APP_NAME', 'Lychee'), '_') . '_database_'),
+			'prefix' => env('REDIS_PREFIX', Str::slug((string) env('APP_NAME', 'Lychee'), '_') . '_database_'),
 		],
 
 		'default' => [
diff --git a/config/filesystems.php b/config/filesystems.php
index 5839f3d373b..b79f3149d55 100644
--- a/config/filesystems.php
+++ b/config/filesystems.php
@@ -11,7 +11,7 @@
 if (!function_exists('renv')) {
 	function renv(string $cst, ?string $default = null): string
 	{
-		return rtrim(env($cst, $default) ?? '', '/');
+		return rtrim((string) (env($cst, $default) ?? ''), '/');
 	}
 }
 
@@ -25,7 +25,7 @@ function renv(string $cst, ?string $default = null): string
 if (!function_exists('renv_cond')) {
 	function renv_cond(string $cst): string
 	{
-		return env($cst, '') === '' ? '' : ('/' . trim(env($cst), '/'));
+		return env($cst, '') === '' ? '' : ('/' . trim((string) env($cst), '/'));
 	}
 }
 
@@ -73,7 +73,7 @@ function renv_cond(string $cst): string
 		// Lychee uses the disk "images" to store the media files
 		'images' => [
 			'driver' => 'local',
-			'root' => env('LYCHEE_UPLOADS', public_path(env('LYCHEE_UPLOADS_DIR', 'uploads/'))),
+			'root' => env('LYCHEE_UPLOADS', public_path((string) env('LYCHEE_UPLOADS_DIR', 'uploads/'))),
 			'url' => env('LYCHEE_UPLOADS_URL', '') !== '' ? renv('LYCHEE_UPLOADS_URL')
 				: (renv('APP_URL', '') . renv_cond('APP_DIR') . '/' .
 					renv('LYCHEE_UPLOADS_DIR', 'uploads')),
diff --git a/config/log-viewer.php b/config/log-viewer.php
index 8ad54748e90..00118ba58f3 100644
--- a/config/log-viewer.php
+++ b/config/log-viewer.php
@@ -5,7 +5,7 @@
 if (!function_exists('renv')) {
 	function renv(string $cst, ?string $default = null): string
 	{
-		return rtrim(env($cst, $default) ?? '', '/');
+		return rtrim((string) (env($cst, $default) ?? ''), '/');
 	}
 }
 
@@ -19,7 +19,7 @@ function renv(string $cst, ?string $default = null): string
 if (!function_exists('renv_cond')) {
 	function renv_cond(string $cst): string
 	{
-		return env($cst, '') === '' ? '' : ('/' . trim(env($cst), '/'));
+		return env($cst, '') === '' ? '' : ('/' . trim((string) env($cst), '/'));
 	}
 }
 
@@ -66,7 +66,7 @@ function renv_cond(string $cst): string
 	|
 	*/
 
-	'back_to_system_url' => renv('APP_URL', 'http://localhost') . renv_cond('APP_DIR'),
+	'back_to_system_url' => renv('APP_URL', 'http://localhost') . renv_cond('APP_DIR') . '/gallery',
 
 	'back_to_system_label' => null, // Displayed by default: "Back to {{ app.name }}"
 
@@ -128,7 +128,7 @@ function renv_cond(string $cst): string
 
 	'hosts' => [
 		'local' => [
-			'name' => ucfirst(env('APP_ENV', 'local')),
+			'name' => ucfirst((string) env('APP_ENV', 'local')),
 		],
 
 		// 'staging' => [
diff --git a/config/secure-headers.php b/config/secure-headers.php
index 74ce5c58706..e537c5ca534 100644
--- a/config/secure-headers.php
+++ b/config/secure-headers.php
@@ -349,7 +349,7 @@
 		// https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src
 		'connect-src' => array_merge(
 			['https://lycheeorg.github.io/update.json'],
-			explode(',', env('SECURITY_HEADER_CSP_CONNECT_SRC', ''))
+			explode(',', (string) env('SECURITY_HEADER_CSP_CONNECT_SRC', ''))
 		),
 
 		// https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/default-src
@@ -488,7 +488,7 @@
 
 			'allow' => array_merge(
 				['https://www.dropbox.com/static/api/1/dropins.js'],
-				explode(',', env('SECURITY_HEADER_SCRIPT_SRC_ALLOW', ''))
+				explode(',', (string) env('SECURITY_HEADER_SCRIPT_SRC_ALLOW', ''))
 			),
 
 			'schemes' => [
diff --git a/config/session.php b/config/session.php
index 4a577c124f0..7aa69178ad4 100644
--- a/config/session.php
+++ b/config/session.php
@@ -128,7 +128,7 @@
 
 	'cookie' => env(
 		'SESSION_COOKIE',
-		Str::slug(env('APP_NAME', 'Lychee'), '_') . '_session'
+		Str::slug((string) env('APP_NAME', 'Lychee'), '_') . '_session'
 	),
 
 	/*
diff --git a/database/migrations/2024_10_20_173904_add_photo_layout_per_album.php b/database/migrations/2024_10_20_173904_add_photo_layout_per_album.php
new file mode 100644
index 00000000000..8de3f8b9d5a
--- /dev/null
+++ b/database/migrations/2024_10_20_173904_add_photo_layout_per_album.php
@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class() extends Migration {
+	private const BASE_ALBUM = 'base_albums';
+	private const PHOTO_LAYOUT_COLUMN_NAME = 'photo_layout';
+
+	/**
+	 * Run the migrations.
+	 */
+	public function up(): void
+	{
+		Schema::table(self::BASE_ALBUM, function ($table) {
+			$table->string(self::PHOTO_LAYOUT_COLUMN_NAME, 20)->nullable()->default(null)->after('copyright');
+		});
+	}
+
+	/**
+	 * Reverse the migrations.
+	 */
+	public function down(): void
+	{
+		Schema::table(self::BASE_ALBUM, function (Blueprint $table) {
+			$table->dropColumn(self::PHOTO_LAYOUT_COLUMN_NAME);
+		});
+	}
+};
diff --git a/database/migrations/2024_10_23_222857_change_header.php b/database/migrations/2024_10_23_222857_change_header.php
new file mode 100644
index 00000000000..932abcc15d0
--- /dev/null
+++ b/database/migrations/2024_10_23_222857_change_header.php
@@ -0,0 +1,22 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Support\Facades\DB;
+
+return new class() extends Migration {
+	/**
+	 * Run the migrations.
+	 */
+	public function up(): void
+	{
+		DB::table('configs')->where('value', '=', 'Lychee v5')->update(['value' => 'Lychee v6']);
+	}
+
+	/**
+	 * Reverse the migrations.
+	 */
+	public function down(): void
+	{
+		DB::table('configs')->where('value', '=', 'Lychee v6')->update(['value' => 'Lychee v5']);
+	}
+};
diff --git a/database/migrations/2024_10_23_225332_warning_html_content.php b/database/migrations/2024_10_23_225332_warning_html_content.php
new file mode 100644
index 00000000000..b658bd0fb90
--- /dev/null
+++ b/database/migrations/2024_10_23_225332_warning_html_content.php
@@ -0,0 +1,21 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+
+return new class() extends Migration {
+	/**
+	 * Run the migrations.
+	 */
+	public function up(): void
+	{
+		DB::table('configs')->whereIn('key', ['nsfw_banner_override', 'footer_additional_text'])->update(['details' => '<span class="pi pi-exclamation-triangle text-orange-500"></span> Unsanitized html field.']);
+	}
+
+	/**
+	 * Reverse the migrations.
+	 */
+	public function down(): void
+	{
+		DB::table('configs')->whereIn('key', ['nsfw_banner_override', 'footer_additional_text'])->update(['details' => '']);
+	}
+};
diff --git a/database/migrations/TemporaryModels/NestedSetForAlbums_AlbumModel.php b/database/migrations/TemporaryModels/NestedSetForAlbums_AlbumModel.php
index b22a90cc798..2d1d6e87a53 100644
--- a/database/migrations/TemporaryModels/NestedSetForAlbums_AlbumModel.php
+++ b/database/migrations/TemporaryModels/NestedSetForAlbums_AlbumModel.php
@@ -18,11 +18,11 @@
  * Unfortunately, we need the `fixTree()` algorithm and there is no
  * implementation which uses low-level DB queries.
  *
- * @implements Node<string,RefactorAlbumModel_AlbumModel>
+ * @implements Node<RefactorAlbumModel_AlbumModel>
  */
 class NestedSetForAlbums_AlbumModel extends Model implements Node
 {
-	/** @phpstan-use NodeTrait<string,NestedSetForAlbums_AlbumModel> */
+	/** @phpstan-use NodeTrait<NestedSetForAlbums_AlbumModel> */
 	use NodeTrait;
 
 	protected $table = 'albums';
diff --git a/database/migrations/TemporaryModels/RefactorAlbumModel_AlbumModel.php b/database/migrations/TemporaryModels/RefactorAlbumModel_AlbumModel.php
index df1ff72b782..340333b7805 100644
--- a/database/migrations/TemporaryModels/RefactorAlbumModel_AlbumModel.php
+++ b/database/migrations/TemporaryModels/RefactorAlbumModel_AlbumModel.php
@@ -18,11 +18,11 @@
  * Unfortunately, we need the `fixTree()` algorithm and there is no
  * implementation which uses low-level DB queries.
  *
- * @implements Node<string,RefactorAlbumModel_AlbumModel>
+ * @implements Node<RefactorAlbumModel_AlbumModel>
  */
 class RefactorAlbumModel_AlbumModel extends Model implements Node
 {
-	/** @phpstan-use NodeTrait<string,RefactorAlbumModel_AlbumModel> */
+	/** @phpstan-use NodeTrait<RefactorAlbumModel_AlbumModel> */
 	use NodeTrait;
 
 	protected $table = 'albums';
diff --git a/package-lock.json b/package-lock.json
index 0181bed437d..f90e7b282cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -70,27 +70,27 @@
             }
         },
         "node_modules/@babel/helper-string-parser": {
-            "version": "7.25.7",
-            "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.7.tgz",
-            "integrity": "sha512-CbkjYdsJNHFk8uqpEkpCvRs3YRp9tY6FmFY7wLMSYuGYkrdUi7r2lc4/wqsvlHoMznX3WJ9IP8giGPq68T/Y6g==",
+            "version": "7.25.9",
+            "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+            "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/helper-validator-identifier": {
-            "version": "7.25.7",
-            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.7.tgz",
-            "integrity": "sha512-AM6TzwYqGChO45oiuPqwL2t20/HdMC1rTPAesnBCgPCSF1x3oN9MVUwQV2iyz4xqWrctwK5RNC8LV22kaQCNYg==",
+            "version": "7.25.9",
+            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+            "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/parser": {
-            "version": "7.25.8",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.8.tgz",
-            "integrity": "sha512-HcttkxzdPucv3nNFmfOOMfFf64KgdJVqm1KaCm25dPGMLElo9nsLvXeJECQg8UzPuBGLyTSA0ZzqCtDSzKTEoQ==",
+            "version": "7.25.9",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.9.tgz",
+            "integrity": "sha512-aI3jjAAO1fh7vY/pBGsn1i9LDbRP43+asrRlkPuTXW5yHXtd1NgTEMudbBoDDxrf1daEEfPJqR+JBMakzrR4Dg==",
             "dependencies": {
-                "@babel/types": "^7.25.8"
+                "@babel/types": "^7.25.9"
             },
             "bin": {
                 "parser": "bin/babel-parser.js"
@@ -100,13 +100,12 @@
             }
         },
         "node_modules/@babel/types": {
-            "version": "7.25.8",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.8.tgz",
-            "integrity": "sha512-JWtuCu8VQsMladxVz/P4HzHUGCAwpuqacmowgXFs5XjxIgKuNjnLokQzuVjlTvIzODaDmpjT3oxcC48vyk9EWg==",
+            "version": "7.25.9",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.9.tgz",
+            "integrity": "sha512-OwS2CM5KocvQ/k7dFJa8i5bNGJP0hXWfVCfDkqRFP1IreH1JDC7wG6eCYCi0+McbfT8OR/kNqsI0UU0xP9H6PQ==",
             "dependencies": {
-                "@babel/helper-string-parser": "^7.25.7",
-                "@babel/helper-validator-identifier": "^7.25.7",
-                "to-fast-properties": "^2.0.0"
+                "@babel/helper-string-parser": "^7.25.9",
+                "@babel/helper-validator-identifier": "^7.25.9"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -925,9 +924,9 @@
             }
         },
         "node_modules/@primevue/core": {
-            "version": "4.1.0",
-            "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.1.0.tgz",
-            "integrity": "sha512-YulYm+PtoYSyLv/pNl3oyjvN+C9Ba/RSpW3bZAVkMRz9SWSA6lj2QaN+/9uxhokWZPL63zCHsHzIBV5YMvZshQ==",
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.1.1.tgz",
+            "integrity": "sha512-jUDrTh3g0FskTdD6rCCsoWfxKky0R7959p7vnaNYI6wMLreaTL3yC3nzYlEniIpb+F51Sm3KJ1eSJBN6DnSB8Q==",
             "dependencies": {
                 "@primeuix/styled": "^0.2.0",
                 "@primeuix/utils": "^0.2.0"
@@ -940,21 +939,21 @@
             }
         },
         "node_modules/@primevue/icons": {
-            "version": "4.1.0",
-            "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.1.0.tgz",
-            "integrity": "sha512-npY8Jy3HX1+Qbv1jCRdAevOcOj355b0x1Wmepa7omhgQFIUVs2o18HGohYml4HJpmEAu6aKnUIhhodFMuglMeQ==",
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.1.1.tgz",
+            "integrity": "sha512-Ybeb+AHUsVybITuYNwS7goqWcXLLgCDSiCPoymyYwYkzn5qLakvJbQH1EX8lGOsrvqK0hG+s+n7Wm2MHJ8A72w==",
             "dependencies": {
                 "@primeuix/utils": "^0.2.0",
-                "@primevue/core": "4.1.0"
+                "@primevue/core": "4.1.1"
             },
             "engines": {
                 "node": ">=12.11.0"
             }
         },
         "node_modules/@primevue/themes": {
-            "version": "4.1.0",
-            "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.1.0.tgz",
-            "integrity": "sha512-EfAvNAI78rq8uPA+XFmHlACUXj2YpSM+PFjnFrTwHjqdSkmrBDweysNEI0p+/rj7l3rZBZLedEvbHcjP+9iumA==",
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.1.1.tgz",
+            "integrity": "sha512-ec2gBN2vP0ydGtGAzC0nYCFqYN7CzvXxnlJqcvcPIo3rP/pcdj+FkzAe3y2DMG3OorYtqdzoyGtBefQrx3v5ag==",
             "dependencies": {
                 "@primeuix/styled": "^0.2.0"
             },
@@ -1208,9 +1207,9 @@
             "integrity": "sha512-q2ybP0u0NVj87oMnGZOGxY2iUN8ddr48zPOBHBdbOLpsMTA/keGj+93ou+OMCnJk0xewzlNIaVEkxM6VBD3E2w=="
         },
         "node_modules/@types/leaflet": {
-            "version": "1.9.12",
-            "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.12.tgz",
-            "integrity": "sha512-BK7XS+NyRI291HIo0HCfE18Lp8oA30H1gpi1tf0mF3TgiCEzanQjOqNZ4x126SXzzi2oNSZhZ5axJp1k0iM6jg==",
+            "version": "1.9.14",
+            "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.14.tgz",
+            "integrity": "sha512-sx2q6MDJaajwhKeVgPSvqXd8rhNJSTA3tMidQGduZn9S6WBYxDkCpSpV5xXEmSg7Cgdk/5vJGhVF1kMYLzauBg==",
             "dev": true,
             "dependencies": {
                 "@types/geojson": "*"
@@ -1241,9 +1240,9 @@
             "dev": true
         },
         "node_modules/@types/node": {
-            "version": "20.16.11",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.11.tgz",
-            "integrity": "sha512-y+cTCACu92FyA5fgQSAI8A1H429g7aSK2HsO7K4XYUWc4dY5IUz55JSDIYT6/VsOLfGy8vmvQYC2hfb0iF16Uw==",
+            "version": "20.16.15",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.15.tgz",
+            "integrity": "sha512-DV58qQz9dBMqVVn+qnKwGa51QzCD4YM/tQM16qLKxdf5tqz5W4QwtrMzjSTbabN1cFTSuyxVYBy+QWHjWW8X/g==",
             "dependencies": {
                 "undici-types": "~6.19.2"
             }
@@ -1685,9 +1684,9 @@
             "peer": true
         },
         "node_modules/acorn": {
-            "version": "8.12.1",
-            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
-            "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
+            "version": "8.13.0",
+            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.13.0.tgz",
+            "integrity": "sha512-8zSiw54Oxrdym50NlZ9sUusyO1Z1ZchgRLWRaK6c86XJFClyCgFKetdowBg5bKxyp/u+CDBJG4Mpp0m3HLZl9w==",
             "bin": {
                 "acorn": "bin/acorn"
             },
@@ -1828,9 +1827,9 @@
             }
         },
         "node_modules/axios-cache-interceptor": {
-            "version": "1.6.0",
-            "resolved": "https://registry.npmjs.org/axios-cache-interceptor/-/axios-cache-interceptor-1.6.0.tgz",
-            "integrity": "sha512-xuo4mZckPQmNV50bJpsMmGfpFV8SXsUWWUVKf1DXQy7t9p+6Pan9zrD3icAlCIdoYFw/ZJFKV6nUVqy8j0XCLQ==",
+            "version": "1.6.2",
+            "resolved": "https://registry.npmjs.org/axios-cache-interceptor/-/axios-cache-interceptor-1.6.2.tgz",
+            "integrity": "sha512-YLbAODIHZZIcD4b3WYFVQOa5W2TY/WnJ6sBHqAg6Z+hx+RVj8/OcjQyRopO6awn7/kOkGL5X9TP16AucnlJ/lw==",
             "dependencies": {
                 "cache-parser": "1.2.5",
                 "fast-defer": "1.1.8",
@@ -1882,9 +1881,9 @@
             }
         },
         "node_modules/browserslist": {
-            "version": "4.24.0",
-            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.0.tgz",
-            "integrity": "sha512-Rmb62sR1Zpjql25eSanFGEhAxcFwfA1K0GuQcLoaJBAcENegrQut3hYdhXFF1obQfiDyqIW/cLM5HSJ/9k884A==",
+            "version": "4.24.2",
+            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz",
+            "integrity": "sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -1900,10 +1899,10 @@
                 }
             ],
             "dependencies": {
-                "caniuse-lite": "^1.0.30001663",
-                "electron-to-chromium": "^1.5.28",
+                "caniuse-lite": "^1.0.30001669",
+                "electron-to-chromium": "^1.5.41",
                 "node-releases": "^2.0.18",
-                "update-browserslist-db": "^1.1.0"
+                "update-browserslist-db": "^1.1.1"
             },
             "bin": {
                 "browserslist": "cli.js"
@@ -1940,9 +1939,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001668",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001668.tgz",
-            "integrity": "sha512-nWLrdxqCdblixUO+27JtGJJE/txpJlyUy5YN1u53wLZkP0emYCo5zgS6QYft7VUYR42LGgi/S5hdLZTrnyIddw==",
+            "version": "1.0.30001669",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001669.tgz",
+            "integrity": "sha512-DlWzFDJqstqtIVx1zeSpIMLjunf5SmwOw0N2Ck/QSQdS8PLS4+9HrLaYei4w8BIAL7IB/UEDu889d8vhCTPA0w==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -2182,9 +2181,9 @@
             "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.5.38",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.38.tgz",
-            "integrity": "sha512-VbeVexmZ1IFh+5EfrYz1I0HTzHVIlJa112UEWhciPyeOcKJGeTv6N8WnG4wsQB81DGCaVEGhpSb6o6a8WYFXXg=="
+            "version": "1.5.43",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.43.tgz",
+            "integrity": "sha512-NxnmFBHDl5Sachd2P46O7UJiMaMHMLSofoIWVJq3mj8NJgG0umiSeljAVP9lGzjI0UDLJJ5jjoGjcrB8RSbjLQ=="
         },
         "node_modules/emoji-regex": {
             "version": "9.2.2",
@@ -3045,9 +3044,9 @@
             "integrity": "sha512-hPvBmnRYPqWEtMfIFOlyjQv1q75UUtxt4U+YscKIQViGmEE2Xa4BuS1B1/cZdjy7MVcwtnr0WkEsr915LgRKOw=="
         },
         "node_modules/picocolors": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
-            "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+            "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
         },
         "node_modules/picomatch": {
             "version": "2.3.1",
@@ -3314,14 +3313,14 @@
             "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw=="
         },
         "node_modules/primevue": {
-            "version": "4.1.0",
-            "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.1.0.tgz",
-            "integrity": "sha512-iR/RysaTnZeIG3UVxdhazU7MA8nEODOpHk8WSINwYU0WMsA/ZghbchHOD5a/LYuLuZa3V03j7mX4LMKroeV+ag==",
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.1.1.tgz",
+            "integrity": "sha512-FeJkv7FhfePfUBoApW0qAhid6Znq18VgbGFZdmhUcxvOD49Y2Eo/k2Yn7ypPhRbRApWiaSRN0v/2G1I4AMj3xg==",
             "dependencies": {
                 "@primeuix/styled": "^0.2.0",
                 "@primeuix/utils": "^0.2.0",
-                "@primevue/core": "4.1.0",
-                "@primevue/icons": "4.1.0"
+                "@primevue/core": "4.1.1",
+                "@primevue/icons": "4.1.1"
             },
             "engines": {
                 "node": ">=12.11.0"
@@ -3521,9 +3520,9 @@
             "peer": true
         },
         "node_modules/sass": {
-            "version": "1.79.5",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.79.5.tgz",
-            "integrity": "sha512-W1h5kp6bdhqFh2tk3DsI771MoEJjvrSY/2ihJRJS4pjIyfJCw0nTsxqhnrUzaLMOJjFchj8rOvraI/YUVjtx5g==",
+            "version": "1.80.3",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.3.tgz",
+            "integrity": "sha512-ptDWyVmDMVielpz/oWy3YP3nfs7LpJTHIJZboMVs8GEC9eUmtZTZhMHlTW98wY4aEorDfjN38+Wr/XjskFWcfA==",
             "devOptional": true,
             "dependencies": {
                 "@parcel/watcher": "^2.4.1",
@@ -3892,9 +3891,9 @@
             }
         },
         "node_modules/terser": {
-            "version": "5.34.1",
-            "resolved": "https://registry.npmjs.org/terser/-/terser-5.34.1.tgz",
-            "integrity": "sha512-FsJZ7iZLd/BXkz+4xrRTGJ26o/6VTjQytUk8b8OxkwcD2I+79VPJlz7qss1+zE7h8GNIScFqXcDyJ/KqBYZFVA==",
+            "version": "5.36.0",
+            "resolved": "https://registry.npmjs.org/terser/-/terser-5.36.0.tgz",
+            "integrity": "sha512-IYV9eNMuFAV4THUspIRXkLakHnV6XO7FEdtKjf/mDyrnqUg9LnlOn6/RwRvM9SZjR4GUq8Nk8zj67FzVARr74w==",
             "peer": true,
             "dependencies": {
                 "@jridgewell/source-map": "^0.3.3",
@@ -3973,14 +3972,6 @@
             "resolved": "https://registry.npmjs.org/tinygesture/-/tinygesture-3.0.0.tgz",
             "integrity": "sha512-UawUggtPCHy+N65ULpR/i6VLH8AzB7jWVvTNoXRFTJNh+ub6lP/SJCxzV/Ua7sJbCt9U9I79wKkKk3wbjcLdbQ=="
         },
-        "node_modules/to-fast-properties": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-            "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-            "engines": {
-                "node": ">=4"
-            }
-        },
         "node_modules/to-regex-range": {
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -4077,9 +4068,9 @@
             "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
         },
         "node_modules/vite": {
-            "version": "5.4.9",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.9.tgz",
-            "integrity": "sha512-20OVpJHh0PAM0oSOELa5GaZNWeDjcAvQjGXy2Uyr+Tp+/D2/Hdz6NLgpJLsarPTA2QJ6v8mX2P1ZfbsSKvdMkg==",
+            "version": "5.4.10",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.10.tgz",
+            "integrity": "sha512-1hvaPshuPUtxeQ0hsVH3Mud0ZanOLwVTneA1EgbAM5LhaZEqyPWGRQ7BtaMvUrTDeEaC8pxtj6a6jku3x4z6SQ==",
             "dependencies": {
                 "esbuild": "^0.21.3",
                 "postcss": "^8.4.43",
diff --git a/phpstan.neon b/phpstan.neon
index 4c3ccc686f3..9a92ba42b59 100644
--- a/phpstan.neon
+++ b/phpstan.neon
@@ -50,18 +50,18 @@ parameters:
 		- '#Dynamic call to static method (Illuminate\\Database\\Query\\Builder|Illuminate\\Database\\Eloquent\\(Builder|Relations\\.*)|App\\Models\\Builders\\.*|App\\Eloquent\\FixedQueryBuilder|App\\Relations\\.*)(<.*>)?::exists\(\).#'
 		- '#Dynamic call to static method App\\Models\\Builders\\.*::orderByDesc\(\).#'
 		- '#Dynamic call to static method App\\Models\\Builders\\.*::selectRaw\(\).#'
-		- '#Call to an undefined method Illuminate\\Database\\Eloquent\\.*::with(Only)?\(\)#'
+		# - '#Call to an undefined method Illuminate\\Database\\Eloquent\\.*::with(Only)?\(\)#'
 		# - '#Call to an undefined method App\\Relations\\HasManyPhotosRecursively::whereNotNull\(\)#'
 		# - '#Call to an undefined method Illuminate\\Database\\Eloquent\\Builder|Illuminate\\Database\\Eloquent\\Relations\\Relation::whereNotNull\(\).#'
 		- '#Call to protected method asDateTime\(\) of class Illuminate\\Database\\Eloquent\\Model.#'
 
 		# Covariance - LSP princinple: https://en.wikipedia.org/wiki/Liskov_substitution_principle
-		-
-			message: '#Parameter \#1 \$column \(array<string>\|Closure\|Illuminate\\Database\\Query\\Expression\|string\) of method .* should be contravariant with parameter \$column \(array<int\|string, mixed>\|\(Closure.*\)\|\(Closure.*\)\|Illuminate\\Contracts\\Database\\Query\\Expression\|string\) of method .*#'
-			paths:
-				- app/Eloquent/FixedQueryBuilderTrait.php
-		- '#Parameter \#1 \$models .* of method .*::initRelation\(\) should be contravariant with parameter \$models .* of method .*::initRelation\(\)#'
-		- '#Parameter \#(1|2) \$(models|albums|photos|results) .* of method .*::(match|addEagerConstraints)\(\) should be contravariant with parameter \$(models|albums|photos|results) .* of method .*::(match|addEagerConstraints)\(\)#'
+		# -
+		# 	message: '#Parameter \#1 \$column \(array<string>\|Closure\|Illuminate\\Database\\Query\\Expression\|string\) of method .* should be contravariant with parameter \$column \(array<int\|string, mixed>\|\(Closure.*\)\|\(Closure.*\)\|Illuminate\\Contracts\\Database\\Query\\Expression\|string\) of method .*#'
+		# 	paths:
+		# 		- app/Eloquent/FixedQueryBuilderTrait.php
+		# - '#Parameter \#1 \$models .* of method .*::initRelation\(\) should be contravariant with parameter \$models .* of method .*::initRelation\(\)#'
+		# - '#Parameter \#(1|2) \$(models|albums|photos|results) .* of method .*::(match|addEagerConstraints)\(\) should be contravariant with parameter \$(models|albums|photos|results) .* of method .*::(match|addEagerConstraints)\(\)#'
 		- '#Parameter .* of method .*::replicate\(\) should be contravariant with parameter .* of method .*::replicate\(\)#' 
 		- '#Parameter .* of method .*::save\(\) should be contravariant with parameter .* of method .*::save\(\)#' 
 		- '#Parameter .* of method .*::newEloquentBuilder\(\) should be contravariant with parameter .* of method Kalnoy\\Nestedset\\Node<.*>::newEloquentBuilder\(\)#'
diff --git a/resources/js/components/forms/album/AlbumCreateDialog.vue b/resources/js/components/forms/album/AlbumCreateDialog.vue
index cde263c3fe8..21af97ddfd5 100644
--- a/resources/js/components/forms/album/AlbumCreateDialog.vue
+++ b/resources/js/components/forms/album/AlbumCreateDialog.vue
@@ -13,7 +13,7 @@
 					<Button @click="closeCallback" severity="secondary" class="w-full font-bold border-none rounded-bl-xl">
 						{{ $t("lychee.CANCEL") }}
 					</Button>
-					<Button @click="create" severity="contrast" class="font-bold w-full border-none rounded-none rounded-br-xl">
+					<Button @click="create" severity="contrast" class="font-bold w-full border-none rounded-none rounded-br-xl" :disabled="!isValid">
 						{{ $t("lychee.CREATE_ALBUM") }}
 					</Button>
 				</div>
@@ -25,10 +25,11 @@
 import AlbumService from "@/services/album-service";
 import Dialog from "primevue/dialog";
 import InputText from "@/components/forms/basic/InputText.vue";
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import FloatLabel from "primevue/floatlabel";
 import Button from "primevue/button";
+import { useToast } from "primevue/usetoast";
 
 const props = defineProps<{
 	parentId: string | null;
@@ -37,24 +38,31 @@ const props = defineProps<{
 const visible = defineModel("visible", { default: false });
 const parentId = ref(props.parentId);
 
+const toast = useToast();
 const router = useRouter();
 
 const title = ref(undefined as undefined | string);
 
+const isValid = computed(() => title.value !== undefined && title.value.length > 0 && title.value.length <= 100);
+
 function create() {
-	if (!title.value) {
+	if (!isValid.value) {
 		return;
 	}
 
 	AlbumService.createAlbum({
-		title: title.value,
+		title: title.value as string,
 		parent_id: parentId.value,
-	}).then((response) => {
-		title.value = undefined;
-		visible.value = false;
-		AlbumService.clearCache(parentId.value);
-		router.push(`/gallery/${response.data}`);
-	});
+	})
+		.then((response) => {
+			title.value = undefined;
+			visible.value = false;
+			AlbumService.clearCache(parentId.value);
+			router.push(`/gallery/${response.data}`);
+		})
+		.catch((error) => {
+			toast.add({ severity: "error", summary: "Oups", detail: error.message });
+		});
 }
 
 watch(
diff --git a/resources/js/components/forms/album/AlbumCreateTagDialog.vue b/resources/js/components/forms/album/AlbumCreateTagDialog.vue
index 71461eadce3..d030506ba36 100644
--- a/resources/js/components/forms/album/AlbumCreateTagDialog.vue
+++ b/resources/js/components/forms/album/AlbumCreateTagDialog.vue
@@ -24,7 +24,7 @@
 					<Button @click="closeCallback" severity="secondary" class="w-full font-bold border-none rounded-bl-xl">
 						{{ $t("lychee.CANCEL") }}
 					</Button>
-					<Button @click="create" severity="contrast" class="font-bold w-full border-none rounded-none rounded-br-xl">
+					<Button @click="create" severity="contrast" class="font-bold w-full border-none rounded-none rounded-br-xl" :disabled="!isValid">
 						{{ $t("lychee.CREATE_TAG_ALBUM") }}
 					</Button>
 				</div>
@@ -36,34 +36,42 @@
 import AlbumService from "@/services/album-service";
 import Dialog from "primevue/dialog";
 import FloatLabel from "primevue/floatlabel";
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import InputText from "@/components/forms/basic/InputText.vue";
 import Button from "primevue/button";
 import AutoComplete from "primevue/autocomplete";
+import { useToast } from "primevue/usetoast";
 
 const props = defineProps<{
 	visible: boolean;
 }>();
 
+const toast = useToast();
 const router = useRouter();
 const visible = ref(props.visible);
 
 const title = ref(undefined as undefined | string);
 const tags = ref([] as string[]);
 
+const isValid = computed(() => title.value !== undefined && title.value.length > 0 && title.value.length <= 100);
+
 function create() {
-	if (!title.value || tags.value.length === 0) {
+	if (!isValid.value) {
 		return;
 	}
 
 	AlbumService.createTag({
-		title: title.value,
+		title: title.value as string,
 		tags: tags.value,
-	}).then((response) => {
-		AlbumService.clearAlbums();
-		router.push(`/gallery/${response.data}`);
-	});
+	})
+		.then((response) => {
+			AlbumService.clearAlbums();
+			router.push(`/gallery/${response.data}`);
+		})
+		.catch((error) => {
+			toast.add({ severity: "error", summary: "Oups", detail: error.message });
+		});
 }
 
 watch(
diff --git a/resources/js/components/forms/album/AlbumProperties.vue b/resources/js/components/forms/album/AlbumProperties.vue
index 640633ac71a..bc946c90b03 100644
--- a/resources/js/components/forms/album/AlbumProperties.vue
+++ b/resources/js/components/forms/album/AlbumProperties.vue
@@ -182,6 +182,30 @@
 						</FloatLabel>
 					</div>
 				</template>
+				<div class="h-10 my-2 pt-4">
+					<FloatLabel variant="on">
+						<Select
+							id="photoLayout"
+							class="w-72 border-none"
+							v-model="photoLayout"
+							:options="photoLayoutOptions"
+							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="photoLayout">Set photo layout</label>
+					</FloatLabel>
+				</div>
 				<div v-if="!is_model_album" class="mb-8 h-10">
 					<FloatLabel variant="on">
 						<AutoComplete
@@ -217,6 +241,7 @@ import {
 	sortingOrdersOptions,
 	licenseOptions,
 	aspectRationOptions,
+	photoLayoutOptions,
 	SelectOption,
 	SelectBuilders,
 } from "@/config/constants";
@@ -244,6 +269,7 @@ const photoSortingColumn = ref(undefined as SelectOption<App.Enum.ColumnSortingP
 const photoSortingOrder = ref(undefined as SelectOption<App.Enum.OrderSortingType> | undefined);
 const albumSortingColumn = ref(undefined as SelectOption<App.Enum.ColumnSortingAlbumType> | undefined);
 const albumSortingOrder = ref(undefined as SelectOption<App.Enum.OrderSortingType> | undefined);
+const photoLayout = ref(undefined as SelectOption<App.Enum.PhotoLayoutType> | undefined);
 const license = ref(undefined as SelectOption<App.Enum.LicenseType> | undefined);
 const copyright = ref(undefined as undefined | string);
 const tags = ref([] as string[]);
@@ -294,6 +320,7 @@ function load(editable: App.Http.Resources.Editable.EditableBaseAlbumResource, p
 	photoSortingOrder.value = SelectBuilders.buildSortingOrder(editable.photo_sorting?.order);
 	albumSortingColumn.value = SelectBuilders.buildAlbumSorting(editable.album_sorting?.column);
 	albumSortingOrder.value = SelectBuilders.buildSortingOrder(editable.album_sorting?.order);
+	photoLayout.value = SelectBuilders.buildPhotoLayout(editable.photo_layout);
 	license.value = SelectBuilders.buildLicense(editable.license);
 	aspectRatio.value = SelectBuilders.buildAspectRatio(editable.aspect_ratio);
 	header_id.value = buildHeaderId(editable.header_id, photos);
@@ -324,6 +351,7 @@ function saveAlbum() {
 		copyright: copyright.value ?? null,
 		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,
 	};
 	AlbumService.updateAlbum(data)
 		.then(() => {
@@ -349,6 +377,7 @@ function saveTagAlbum() {
 		photo_sorting_column: photoSortingColumn.value?.value ?? null,
 		photo_sorting_order: photoSortingOrder.value?.value ?? null,
 		copyright: copyright.value ?? null,
+		photo_layout: photoLayout.value?.value ?? null,
 	};
 	AlbumService.updateTag(data)
 		.then(() => {
diff --git a/resources/js/components/forms/album/AlbumShare.vue b/resources/js/components/forms/album/AlbumShare.vue
index 87cd6664c1d..9692db199c6 100644
--- a/resources/js/components/forms/album/AlbumShare.vue
+++ b/resources/js/components/forms/album/AlbumShare.vue
@@ -1,7 +1,7 @@
 <template>
 	<Card class="sm:p-4 xl:px-9 max-w-3xl w-full" v-if="perms !== undefined">
 		<template #content>
-			<div class="flex text-muted-color">
+			<div class="flex text-muted-color-emphasis">
 				<div class="w-5/12 flex">
 					<span class="w-full">{{ $t("lychee.USERNAME") }}</span>
 				</div>
diff --git a/resources/js/components/forms/basic/InputPassword.vue b/resources/js/components/forms/basic/InputPassword.vue
index ff9d0225b00..d7687b9f999 100644
--- a/resources/js/components/forms/basic/InputPassword.vue
+++ b/resources/js/components/forms/basic/InputPassword.vue
@@ -16,7 +16,7 @@
 import { ref } from "vue";
 import InputText, { InputTextPassThroughOptions } from "primevue/inputtext";
 import type { PassThroughOptions } from "primevue/passthrough";
-import type { DesignToken, PassThrough } from "@primevue/core";
+import type { DesignToken, Nullable, PassThrough } from "@primevue/core";
 
 const props = defineProps<{
 	size?: "small" | "large" | undefined;
@@ -30,6 +30,6 @@ const props = defineProps<{
 	class?: string;
 }>();
 
-const modelValue = defineModel();
+const modelValue = defineModel<Nullable<string>>();
 const classValue = ref((props.class ?? "") + " border-0 p-3 w-full border-b hover:border-b-danger-600 focus:border-b-danger-600");
 </script>
diff --git a/resources/js/components/forms/basic/InputText.vue b/resources/js/components/forms/basic/InputText.vue
index 3fb44208d1f..c8a644fb17c 100644
--- a/resources/js/components/forms/basic/InputText.vue
+++ b/resources/js/components/forms/basic/InputText.vue
@@ -17,7 +17,7 @@
 import { ref } from "vue";
 import InputText, { InputTextPassThroughOptions } from "primevue/inputtext";
 import type { PassThroughOptions } from "primevue/passthrough";
-import type { DesignToken, PassThrough } from "@primevue/core";
+import type { DesignToken, Nullable, PassThrough } from "@primevue/core";
 
 const props = defineProps<{
 	size?: "small" | "large" | undefined;
@@ -32,6 +32,6 @@ const props = defineProps<{
 }>();
 
 const emits = defineEmits(["updated"]);
-const modelValue = defineModel();
+const modelValue = defineModel<Nullable<string>>();
 const classValue = ref((props.class ?? "") + " border-0 p-3 w-full border-b hover:border-b-primary-400 focus:border-b-primary-400");
 </script>
diff --git a/resources/js/components/forms/basic/Password.vue b/resources/js/components/forms/basic/Password.vue
index d335003bddc..c00e0088247 100644
--- a/resources/js/components/forms/basic/Password.vue
+++ b/resources/js/components/forms/basic/Password.vue
@@ -216,6 +216,6 @@ const props = defineProps<{
 // 	class?: string;
 // }>();
 
-const modelValue = defineModel();
+const modelValue = defineModel<Nullable<string>>();
 const inputClass = ref((props.inputClass ?? "") + " border-0 p-3 w-full border-b hover:border-b-danger-600 focus:border-b-danger-600");
 </script>
diff --git a/resources/js/components/forms/basic/Textarea.vue b/resources/js/components/forms/basic/Textarea.vue
index dea4c825c5e..0267c8286ea 100644
--- a/resources/js/components/forms/basic/Textarea.vue
+++ b/resources/js/components/forms/basic/Textarea.vue
@@ -16,7 +16,7 @@
 import { ref } from "vue";
 import Textarea, { TextareaPassThroughOptions } from "primevue/textarea";
 import type { PassThroughOptions } from "primevue/passthrough";
-import type { DesignToken, PassThrough } from "@primevue/core";
+import type { DesignToken, Nullable, PassThrough } from "@primevue/core";
 
 const props = defineProps<{
 	autoResize?: boolean | undefined;
@@ -30,7 +30,7 @@ const props = defineProps<{
 	class?: string;
 }>();
 
-const modelValue = defineModel();
+const modelValue = defineModel<Nullable<string>>();
 const classValue = ref(
 	(props.class ?? "") +
 		" p-3 w-full border-t-transparent border-r-transparent border-b border-l hover:border-b-primary-400 hover:border-l-primary-400 focus:border-b-primary-400 focus:border-l-primary-400",
diff --git a/resources/js/components/forms/profile/ApiToken.vue b/resources/js/components/forms/profile/ApiToken.vue
index 1c4670b7314..acdd5b00dc5 100644
--- a/resources/js/components/forms/profile/ApiToken.vue
+++ b/resources/js/components/forms/profile/ApiToken.vue
@@ -62,7 +62,7 @@ import InputText from "@/components/forms/basic/InputText.vue";
 import ProfileService from "@/services/profile-service";
 import { useToast } from "primevue/usetoast";
 
-const visible = defineModel();
+const visible = defineModel<boolean>();
 
 const isDisabled = ref(true);
 const token = ref(undefined as undefined | string);
diff --git a/resources/js/components/forms/search/SearchBox.vue b/resources/js/components/forms/search/SearchBox.vue
index 5adcd49a605..ab3ce22ac0a 100644
--- a/resources/js/components/forms/search/SearchBox.vue
+++ b/resources/js/components/forms/search/SearchBox.vue
@@ -33,6 +33,7 @@ const search = defineModel<string>("search", { required: true });
 
 const emits = defineEmits<{
 	search: [terms: string];
+	clear: [];
 }>();
 
 const isValid = computed<boolean>(() => {
@@ -40,6 +41,13 @@ const isValid = computed<boolean>(() => {
 });
 
 const debouncedFn = useDebounceFn(() => {
-	emits("search", search.value);
+	if (search.value === "" || !isValid.value) {
+		emits("clear");
+		return;
+	}
+
+	if (search.value !== undefined && search.value.length >= props.searchMinimumLengh) {
+		emits("search", search.value);
+	}
 }, 1000);
 </script>
diff --git a/resources/js/components/forms/settings/VersionField.vue b/resources/js/components/forms/settings/VersionField.vue
deleted file mode 100644
index 5154a50fa9b..00000000000
--- a/resources/js/components/forms/settings/VersionField.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-	<div class="flex justify-between gap-4">
-		<span class="mr-4 text-muted-color-emphasis">{{ props.config.documentation }}:</span>
-		<Inplace style="--p-inplace-padding: 0">
-			<template #display>{{ computedVersion }}</template>
-			<template #content>
-				<InputOtp v-model="val" :length="6" style="gap: 0" integerOnly @update:modelValue="update">
-					<template #default="{ attrs, events, index }">
-						<input type="text" v-bind="attrs" v-on="events" class="h-4 w-3 text-center border-b border-primary-500" />
-						<div v-if="index === 2 || index === 4" class="">.</div>
-					</template>
-				</InputOtp>
-			</template>
-		</Inplace>
-		<i
-			class="ml-4 pi pi-exclamation-triangle text-danger-700 mt-1 cursor-pointer"
-			v-tooltip="'Click me to reset!'"
-			v-if="changed"
-			@click="reset"
-		></i>
-	</div>
-	<Message v-if="changed" severity="error">We strongly recommend you do not modify this value.</Message>
-</template>
-<script setup lang="ts">
-import { computed, ref, watch } from "vue";
-import InputOtp from "primevue/inputotp";
-import Inplace from "primevue/inplace";
-import Message from "primevue/message";
-
-const props = defineProps<{
-	config: App.Http.Resources.Models.ConfigResource;
-}>();
-
-const val = ref(props.config.value);
-
-const changed = computed(() => val.value !== props.config.value);
-
-const computedVersion = computed(() => {
-	const value = val.value;
-	let version = "";
-	for (let i = 0; i < 6; i += 2) {
-		if (version !== "") {
-			version += ".";
-		}
-		if (value[i] !== "0") {
-			version += value[i];
-		}
-		version += value[i + 1];
-	}
-	return version;
-});
-
-const emits = defineEmits<{
-	filled: [key: string, value: string];
-	reset: [key: string];
-}>();
-
-function update() {
-	emits("filled", props.config.key, val.value);
-}
-
-function reset() {
-	emits("reset", props.config.key);
-	val.value = props.config.value;
-}
-
-// We watch props in case of updates.
-watch(
-	() => props.config,
-	(newValue, _oldValue) => (val.value = newValue.value),
-);
-</script>
diff --git a/resources/js/components/forms/sharing/ShareLine.vue b/resources/js/components/forms/sharing/ShareLine.vue
index 7ed144ae55f..08f1a2924c7 100644
--- a/resources/js/components/forms/sharing/ShareLine.vue
+++ b/resources/js/components/forms/sharing/ShareLine.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="flex">
-		<div class="w-5/12 flex items-center">
+		<div class="w-5/12 flex items-center text-muted-color">
 			<span v-if="props.withAlbum" class="w-full">{{ props.perm.album_title }}</span>
 			<span class="w-full">{{ props.perm.username }}</span>
 		</div>
diff --git a/resources/js/components/forms/upload/UploadingLine.vue b/resources/js/components/forms/upload/UploadingLine.vue
index 2f33be7997f..1d766b9e652 100644
--- a/resources/js/components/forms/upload/UploadingLine.vue
+++ b/resources/js/components/forms/upload/UploadingLine.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="w-full flex flex-col" :id="'upload' + index">
 		<div class="flex gap-x-4 justify-between relative" :class="errorFlexClass">
-			<span class="text-ellipsis min-w-0 w-full overflow-hidden text-nowrap">{{ file.name }}</span>
+			<span class="text-ellipsis min-w-0 w-full overflow-hidden text-nowrap text-muted-color">{{ file.name }}</span>
 			<span :class="statusClass" v-if="progress < 100 && progress > 0">{{ progress }}%</span>
 			<span :class="statusClass">{{ statusMessage }}</span>
 		</div>
diff --git a/resources/js/components/forms/users/CreateEditUser.vue b/resources/js/components/forms/users/CreateEditUser.vue
index 1ca0f22f297..f886af0369b 100644
--- a/resources/js/components/forms/users/CreateEditUser.vue
+++ b/resources/js/components/forms/users/CreateEditUser.vue
@@ -89,7 +89,7 @@ const password = ref(undefined as string | undefined);
 const may_edit_own_settings = ref(props.user?.may_edit_own_settings ?? false);
 const may_upload = ref(props.user?.may_upload ?? false);
 const has_quota = ref(props.user?.quota_kb !== undefined && props.user?.quota_kb !== null);
-const quota_kb = ref(props.user?.quota_kb ?? 0);
+const quota_kb = ref(props.user?.quota_kb?.toString() ?? "0");
 
 const toast = useToast();
 const emits = defineEmits<{
@@ -107,7 +107,7 @@ function createUser() {
 		may_edit_own_settings: may_edit_own_settings.value,
 		may_upload: may_upload.value,
 		has_quota: is_se_enabled ? has_quota.value : undefined,
-		quota_kb: is_se_enabled ? quota_kb.value : undefined,
+		quota_kb: is_se_enabled ? parseInt(quota_kb.value) : undefined,
 		note: is_se_enabled ? note.value : undefined,
 	})
 		.then(() => {
@@ -117,7 +117,7 @@ function createUser() {
 			may_edit_own_settings.value = false;
 			username.value = undefined;
 			has_quota.value = false;
-			quota_kb.value = 0;
+			quota_kb.value = "0";
 			toast.add({ severity: "success", summary: "Success", detail: "User created", life: 3000 });
 			emits("refresh");
 		})
@@ -138,7 +138,7 @@ function editUser() {
 		may_edit_own_settings: may_edit_own_settings.value,
 		may_upload: may_upload.value,
 		has_quota: is_se_enabled ? has_quota.value : undefined,
-		quota_kb: is_se_enabled ? quota_kb.value : undefined,
+		quota_kb: is_se_enabled ? parseInt(quota_kb.value) : undefined,
 		note: is_se_enabled ? note.value : undefined,
 	})
 		.then(() => {
@@ -148,7 +148,7 @@ function editUser() {
 			may_edit_own_settings.value = false;
 			username.value = undefined;
 			has_quota.value = false;
-			quota_kb.value = 0;
+			quota_kb.value = "0";
 			toast.add({ severity: "success", summary: "Change saved!", detail: "User updated", life: 3000 });
 			emits("refresh");
 		})
@@ -165,7 +165,7 @@ watch(
 		may_edit_own_settings.value = newUser?.may_edit_own_settings ?? false;
 		may_upload.value = newUser?.may_upload ?? false;
 		has_quota.value = newUser?.quota_kb !== undefined && newUser?.quota_kb !== null;
-		quota_kb.value = newUser?.quota_kb ?? 0;
+		quota_kb.value = newUser?.quota_kb?.toString() ?? "0";
 	},
 );
 </script>
diff --git a/resources/js/components/gallery/PhotoThumbPanel.vue b/resources/js/components/gallery/PhotoThumbPanel.vue
index cc33f1415c2..9af17f2f63e 100644
--- a/resources/js/components/gallery/PhotoThumbPanel.vue
+++ b/resources/js/components/gallery/PhotoThumbPanel.vue
@@ -1,20 +1,16 @@
 <template>
 	<Panel id="lychee_view_content" :header="$t(props.header)" class="w-full border-0">
 		<template #icons>
-			<a class="px-1 cursor-pointer group" @click="(layout.photos_layout = 'square') && activateLayout()" :title="$t('lychee.LAYOUT_SQUARES')">
+			<a class="px-1 cursor-pointer group" @click="(layout = 'square') && activateLayout()" :title="$t('lychee.LAYOUT_SQUARES')">
 				<MiniIcon icon="squares" fill="fill-transparent" :class="squareClass" />
 			</a>
-			<a
-				class="px-1 cursor-pointer group"
-				@click="(layout.photos_layout = 'justified') && activateLayout()"
-				:title="$t('lychee.LAYOUT_JUSTIFIED')"
-			>
+			<a class="px-1 cursor-pointer group" @click="(layout = 'justified') && activateLayout()" :title="$t('lychee.LAYOUT_JUSTIFIED')">
 				<MiniIcon icon="justified" fill="" :class="justifiedClass" />
 			</a>
-			<a class="px-1 cursor-pointer group" @click="(layout.photos_layout = 'masonry') && activateLayout()" :title="$t('lychee.LAYOUT_MASONRY')">
+			<a class="px-1 cursor-pointer group" @click="(layout = 'masonry') && activateLayout()" :title="$t('lychee.LAYOUT_MASONRY')">
 				<MiniIcon icon="masonry" fill="fill-transparent" :class="masonryClass" />
 			</a>
-			<a class="px-1 cursor-pointer group" @click="(layout.photos_layout = 'grid') && activateLayout()" :title="$t('lychee.LAYOUT_GRID')">
+			<a class="px-1 cursor-pointer group" @click="(layout = 'grid') && activateLayout()" :title="$t('lychee.LAYOUT_GRID')">
 				<MiniIcon icon="grid" fill="fill-transparent" :class="gridClass" />
 			</a>
 		</template>
@@ -41,6 +37,7 @@ import { useLayouts } from "@/layouts/PhotoLayout";
 const props = defineProps<{
 	header: string;
 	photos: { [key: number]: App.Http.Resources.Models.PhotoResource };
+	photoLayout: App.Enum.PhotoLayoutType;
 	album:
 		| App.Http.Resources.Models.AlbumResource
 		| App.Http.Resources.Models.TagAlbumResource
@@ -59,7 +56,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, layout, squareClass, justifiedClass, masonryClass, gridClass } = useLayouts(props.galleryConfig);
+const { activateLayout, layout, squareClass, justifiedClass, masonryClass, gridClass } = useLayouts(props.galleryConfig, props.photoLayout);
 onMounted(() => activateLayout());
 onUpdated(() => activateLayout());
 </script>
diff --git a/resources/js/components/headers/AlbumHeader.vue b/resources/js/components/headers/AlbumHeader.vue
index fb7e081cbe6..930c7f4f4d4 100644
--- a/resources/js/components/headers/AlbumHeader.vue
+++ b/resources/js/components/headers/AlbumHeader.vue
@@ -60,7 +60,10 @@
 			<Divider v-if="item.is_divider" />
 			<a v-else v-ripple v-bind="props.action" @click="item.callback">
 				<span :class="item.icon" />
-				<span class="ml-2">{{ $t(item.label) }}</span>
+				<span class="ml-2">
+					<!-- @vue-ignore -->
+					{{ $t(item.label) }}
+				</span>
 			</a>
 		</template>
 	</ContextMenu>
diff --git a/resources/js/components/headers/AlbumsHeader.vue b/resources/js/components/headers/AlbumsHeader.vue
index 19b1bb7dc56..20e5048843e 100644
--- a/resources/js/components/headers/AlbumsHeader.vue
+++ b/resources/js/components/headers/AlbumsHeader.vue
@@ -24,7 +24,7 @@
 				@click="lycheeStore.toggleLogin()"
 			/>
 			<!-- Logged in. -->
-			<Button v-if="user.id" @click="openLeftMenu" icon="pi pi-bars" class="mr-2 border-none" severity="secondary" text />
+			<OpenLeftMenu v-if="user.id" />
 		</template>
 
 		<template #center>
@@ -74,7 +74,10 @@
 			<Divider v-if="item.is_divider" />
 			<a v-else v-ripple v-bind="props.action" @click="item.callback">
 				<span :class="item.icon" />
-				<span class="ml-2">{{ $t(item.label) }}</span>
+				<span class="ml-2">
+					<!-- @vue-ignore -->
+					{{ $t(item.label) }}
+				</span>
 			</a>
 		</template>
 	</ContextMenu>
@@ -103,6 +106,7 @@ import { useGalleryModals } from "@/composables/modalsTriggers/galleryModals";
 import WebAuthnService from "@/services/webauthn-service";
 import { useRouter } from "vue-router";
 import DropBox from "../modals/DropBox.vue";
+import OpenLeftMenu from "./OpenLeftMenu.vue";
 
 const props = defineProps<{
 	user: App.Http.Resources.Models.UserResource;
diff --git a/resources/js/components/headers/OpenLeftMenu.vue b/resources/js/components/headers/OpenLeftMenu.vue
new file mode 100644
index 00000000000..670b4622554
--- /dev/null
+++ b/resources/js/components/headers/OpenLeftMenu.vue
@@ -0,0 +1,12 @@
+<template>
+	<Button @click="openLeftMenu" icon="pi pi-bars" class="mr-2 border-none" severity="secondary" text />
+</template>
+<script setup lang="ts">
+import { useLycheeStateStore } from "@/stores/LycheeState";
+import { storeToRefs } from "pinia";
+import Button from "primevue/button";
+
+const lycheeStore = useLycheeStateStore();
+const { left_menu_open } = storeToRefs(lycheeStore);
+const openLeftMenu = () => (left_menu_open.value = !left_menu_open.value);
+</script>
diff --git a/resources/js/components/maintenance/MaintenanceCleaning.vue b/resources/js/components/maintenance/MaintenanceCleaning.vue
index fac6706391d..399b889f57b 100644
--- a/resources/js/components/maintenance/MaintenanceCleaning.vue
+++ b/resources/js/components/maintenance/MaintenanceCleaning.vue
@@ -51,10 +51,15 @@ function load() {
 
 function exec() {
 	loading.value = true;
-	MaintenanceService.cleaningDo(props.path).then((response) => {
-		toast.add({ severity: "success", summary: "Success", life: 3000 });
-		loading.value = false;
-	});
+	MaintenanceService.cleaningDo(props.path)
+		.then((response) => {
+			toast.add({ severity: "success", summary: "Success", life: 3000 });
+			loading.value = false;
+		})
+		.catch((e) => {
+			toast.add({ severity: "error", summary: "Error", detail: e.response.data.message, life: 3000 });
+			loading.value = false;
+		});
 }
 
 load();
diff --git a/resources/js/components/maintenance/MaintenanceFilesize.vue b/resources/js/components/maintenance/MaintenanceFilesize.vue
index 9d09fdaabfb..3fa32d862b9 100644
--- a/resources/js/components/maintenance/MaintenanceFilesize.vue
+++ b/resources/js/components/maintenance/MaintenanceFilesize.vue
@@ -46,10 +46,15 @@ function load() {
 
 function exec() {
 	loading.value = true;
-	MaintenanceService.missingFileSizesDo().then((response) => {
-		toast.add({ severity: "success", summary: "Success", life: 3000 });
-		loading.value = false;
-	});
+	MaintenanceService.missingFileSizesDo()
+		.then((response) => {
+			toast.add({ severity: "success", summary: "Success", life: 3000 });
+			loading.value = false;
+		})
+		.catch((e) => {
+			toast.add({ severity: "error", summary: "Error", detail: e.response.data.message, life: 3000 });
+			loading.value = false;
+		});
 }
 
 load();
diff --git a/resources/js/components/maintenance/MaintenanceFixJobs.vue b/resources/js/components/maintenance/MaintenanceFixJobs.vue
index 0a9d6ecce84..e2ce88eeec9 100644
--- a/resources/js/components/maintenance/MaintenanceFixJobs.vue
+++ b/resources/js/components/maintenance/MaintenanceFixJobs.vue
@@ -46,10 +46,15 @@ function load() {
 
 function exec() {
 	loading.value = true;
-	MaintenanceService.jobsDo().then((response) => {
-		toast.add({ severity: "success", summary: "Success", life: 3000 });
-		loading.value = false;
-	});
+	MaintenanceService.jobsDo()
+		.then((response) => {
+			toast.add({ severity: "success", summary: "Success", life: 3000 });
+			loading.value = false;
+		})
+		.catch((e) => {
+			toast.add({ severity: "error", summary: "Error", detail: e.response.data.message, life: 3000 });
+			loading.value = false;
+		});
 }
 
 load();
diff --git a/resources/js/components/maintenance/MaintenanceFixTree.vue b/resources/js/components/maintenance/MaintenanceFixTree.vue
index 8381c601bfa..78ac777977e 100644
--- a/resources/js/components/maintenance/MaintenanceFixTree.vue
+++ b/resources/js/components/maintenance/MaintenanceFixTree.vue
@@ -51,6 +51,9 @@ function load() {
 // 	MaintenanceService.treeDo().then((response) => {
 // 		toast.add({ severity: "success", summary: "Success", life: 3000 });
 // 		loading.value = false;
+// 	}).catch((e) => {
+// 		toast.add({ severity: "error", summary: "Error", detail: e.response.data.message,  life: 3000 });
+// 		loading.value = false;
 // 	});
 // }
 
diff --git a/resources/js/components/maintenance/MaintenanceGenSizevariants.vue b/resources/js/components/maintenance/MaintenanceGenSizevariants.vue
index 9725694319b..7acf0a1c8c9 100644
--- a/resources/js/components/maintenance/MaintenanceGenSizevariants.vue
+++ b/resources/js/components/maintenance/MaintenanceGenSizevariants.vue
@@ -73,10 +73,15 @@ function load() {
 
 function exec() {
 	loading.value = true;
-	MaintenanceService.genSizeVariantsDo(props.sv).then((response) => {
-		toast.add({ severity: "success", summary: "Success", life: 3000 });
-		load();
-	});
+	MaintenanceService.genSizeVariantsDo(props.sv)
+		.then((response) => {
+			toast.add({ severity: "success", summary: "Success", life: 3000 });
+			load();
+		})
+		.catch((e) => {
+			toast.add({ severity: "error", summary: "Error", detail: e.response.data.message, life: 3000 });
+			loading.value = false;
+		});
 }
 
 load();
diff --git a/resources/js/components/maintenance/MaintenanceOptimize.vue b/resources/js/components/maintenance/MaintenanceOptimize.vue
index cfbc6b53499..b86aad2d5d4 100644
--- a/resources/js/components/maintenance/MaintenanceOptimize.vue
+++ b/resources/js/components/maintenance/MaintenanceOptimize.vue
@@ -27,15 +27,22 @@ import Card from "primevue/card";
 import ProgressSpinner from "primevue/progressspinner";
 import ScrollPanel from "primevue/scrollpanel";
 import MaintenanceService from "@/services/maintenance-service";
+import { useToast } from "primevue/usetoast";
 
 const data = ref([] as string[]);
 const loading = ref(false);
+const toast = useToast();
 
 function exec() {
 	loading.value = true;
-	MaintenanceService.optimizeDo().then((response) => {
-		data.value = response.data;
-	});
+	MaintenanceService.optimizeDo()
+		.then((response) => {
+			data.value = response.data;
+		})
+		.catch((e) => {
+			toast.add({ severity: "error", summary: "Error", detail: e.response.data.message, life: 3000 });
+			loading.value = false;
+		});
 }
 </script>
 
diff --git a/resources/js/components/maintenance/MaintenanceUpdate.vue b/resources/js/components/maintenance/MaintenanceUpdate.vue
index 2b3c4fbf5f3..41c1e33e87c 100644
--- a/resources/js/components/maintenance/MaintenanceUpdate.vue
+++ b/resources/js/components/maintenance/MaintenanceUpdate.vue
@@ -30,11 +30,13 @@ import Button from "primevue/button";
 import Card from "primevue/card";
 import ScrollPanel from "primevue/scrollpanel";
 import MaintenanceService from "@/services/maintenance-service";
+import { useToast } from "primevue/usetoast";
 
 const data = ref(undefined as App.Http.Resources.Diagnostics.UpdateInfo | undefined);
 const canCheck = ref(true);
 const canUpdate = ref(false);
 const loading = ref(false);
+const toast = useToast();
 
 function load() {
 	MaintenanceService.updateGet().then((response) => {
@@ -49,11 +51,16 @@ function check() {
 	loading.value = true;
 	canCheck.value = false;
 
-	MaintenanceService.updateCheck().then((response) => {
-		(data.value as App.Http.Resources.Diagnostics.UpdateInfo).extra = response.data.extra;
-		canUpdate.value = response.data.can_update;
-		loading.value = false;
-	});
+	MaintenanceService.updateCheck()
+		.then((response) => {
+			(data.value as App.Http.Resources.Diagnostics.UpdateInfo).extra = response.data.extra;
+			canUpdate.value = response.data.can_update;
+			loading.value = false;
+		})
+		.catch((e) => {
+			toast.add({ severity: "error", summary: "Error", detail: e.response.data.message, life: 3000 });
+			loading.value = false;
+		});
 }
 
 load();
diff --git a/resources/js/components/modals/UploadPanel.vue b/resources/js/components/modals/UploadPanel.vue
index 745ae66c43a..9b9a1229a6d 100644
--- a/resources/js/components/modals/UploadPanel.vue
+++ b/resources/js/components/modals/UploadPanel.vue
@@ -3,12 +3,14 @@
 		<template #container="{ closeCallback }">
 			<div v-if="setup">
 				<div v-if="counts.files > 0" class="m-4 flex flex-wrap justify-center">
-					<span class="w-full text-center">Completed: {{ counts.completed }} / {{ counts.files }}</span>
+					<span v-if="counts.completed === counts.files" class="w-full text-center text-muted-color-emphasis font-bold">Completed</span>
+					<span v-else class="w-full text-center">Uploaded: {{ counts.completed }} / {{ counts.files }}</span>
 					<ProgressBar
-						:class="'w-full'"
+						class="w-full"
 						:value="Math.round((counts.completed * 100) / counts.files)"
 						:show-value="false"
 						:pt:value:class="'duration-300'"
+						:class="counts.completed === counts.files ? 'successProgressBarSeverity' : ''"
 					></ProgressBar>
 				</div>
 				<ScrollPanel v-if="counts.files > 0" class="w-96 h-48 m-4 p-1 mr-5" :pt:scrollbar:class="'opacity-100'">
@@ -149,12 +151,9 @@ function uploadNext(searchIndex = 0, max_processing_limit: number | undefined =
 			break;
 		}
 	}
-	console.log("searchIndex", searchIndex);
-	console.log("offset", offset);
 
 	// Compute processing limit : min between the provided max and the number of waiting.
 	const processing_limit = Math.min(max_processing_limit ?? setup.value?.upload_processing_limit ?? 1, counts.value.waiting);
-	console.log("processing limit", processing_limit);
 
 	// Start uploading chunks.
 	for (let i = 0; i < processing_limit; i++) {
diff --git a/resources/js/components/settings/AllSettings.vue b/resources/js/components/settings/AllSettings.vue
index 2d0ff944a74..da80e941081 100644
--- a/resources/js/components/settings/AllSettings.vue
+++ b/resources/js/components/settings/AllSettings.vue
@@ -14,6 +14,7 @@
 					<a
 						:href="item.link"
 						class="nav-link block hover:text-primary-400 border-l border-solid border-surface-700 hover:border-primary-400 px-4 capitalize"
+						@click.prevent="goto(item.link)"
 					>
 						<span>{{ item.label }}</span>
 					</a>
@@ -22,7 +23,7 @@
 			<div class="max-w-3xl" id="allSettings">
 				<Fieldset
 					v-for="(configGroup, key, index) in configs.configs"
-					:legend="key"
+					:legend="key.toString()"
 					:toggleable="true"
 					class="border-b-0 border-r-0 rounded-r-none rounded-b-none mb-4 hover:border-primary-500 pt-2"
 					:pt:legendlabel:class="'capitalize'"
@@ -37,7 +38,9 @@
 								</template>
 								<template v-else>
 									<!-- Special keys -->
-									<VersionField v-if="config.key === 'version'" :config="config" />
+									<template v-if="config.key === 'version'">
+										<!-- version is not modifiable in easy settings. -->
+									</template>
 									<ZipSliderField v-else-if="config.key === 'zip_deflate_level'" :config="config" @filled="update" @reset="reset" />
 									<SelectOptionsField
 										v-else-if="config.key === 'default_license'"
@@ -175,7 +178,6 @@ import { useToast } from "primevue/usetoast";
 import StringField from "@/components/forms/settings/StringField.vue";
 import BoolField from "@/components/forms/settings/BoolField.vue";
 import NumberField from "@/components/forms/settings/NumberField.vue";
-import VersionField from "@/components/forms/settings/VersionField.vue";
 import SliderField from "@/components/forms/settings/SliderField.vue";
 import SelectField from "@/components/forms/settings/SelectField.vue";
 import SelectOptionsField from "@/components/forms/settings/SelectOptionsField.vue";
@@ -255,6 +257,13 @@ function save() {
 		});
 }
 
+function goto(section: string) {
+	const el = document.getElementById(section.slice(1));
+	if (el) {
+		el.scrollIntoView({ behavior: "smooth" });
+	}
+}
+
 load();
 
 function show(config: App.Http.Resources.Editable.EditableConfigResource) {
diff --git a/resources/js/components/settings/EasySettings.vue b/resources/js/components/settings/EasySettings.vue
index 39c1889207a..4df7a6c0648 100644
--- a/resources/js/components/settings/EasySettings.vue
+++ b/resources/js/components/settings/EasySettings.vue
@@ -302,7 +302,6 @@ function load() {
 		const configurations = [] as App.Http.Resources.Models.ConfigResource[];
 		Object.values(decapsulated.configs).forEach((value) => Object.values(value).forEach((value) => configurations.push(value)));
 
-		// console.log(configurations);
 		lang.value = configurations.find((config) => config.key === "lang");
 
 		dark_mode_enabled.value = configurations.find((config) => config.key === "dark_mode_enabled");
diff --git a/resources/js/components/statistics/SizeVariantMeter.vue b/resources/js/components/statistics/SizeVariantMeter.vue
index b5c9a44cdb4..855fe888c5c 100644
--- a/resources/js/components/statistics/SizeVariantMeter.vue
+++ b/resources/js/components/statistics/SizeVariantMeter.vue
@@ -32,11 +32,12 @@ import Card from "primevue/card";
 import MeterGroup from "primevue/metergroup";
 import { ref } from "vue";
 
-type SizeVairantData = {
+type SizeVariantData = {
 	label: string;
 	value: number;
 	size: string;
 	color: string;
+	icon: string;
 };
 
 const props = defineProps<{
@@ -45,7 +46,7 @@ const props = defineProps<{
 
 const lycheeStore = useLycheeStateStore();
 const sizeVariantSpace = ref(undefined as undefined | App.Http.Resources.Statistics.Sizes[]);
-const sizeVariantSpaceMeter = ref(undefined as undefined | SizeVairantData[]);
+const sizeVariantSpaceMeter = ref(undefined as undefined | SizeVariantData[]);
 
 const { is_se_preview_enabled } = storeToRefs(lycheeStore);
 
@@ -68,6 +69,7 @@ function prepSizeVariantData() {
 			value: (sv.size / total) * 100,
 			size: sizeToUnit(sv.size),
 			color: sizeVariantToColour(sv.type),
+			icon: "",
 		};
 	});
 }
diff --git a/resources/js/composables/album/albumsRefresher.ts b/resources/js/composables/album/albumsRefresher.ts
index e0db8583e2d..0a663f9e4fc 100644
--- a/resources/js/composables/album/albumsRefresher.ts
+++ b/resources/js/composables/album/albumsRefresher.ts
@@ -3,15 +3,21 @@ import { AuthStore } from "@/stores/Auth";
 import { LycheeStateStore } from "@/stores/LycheeState";
 import { computed, ref, Ref } from "vue";
 
+export type SharedAlbums = {
+	owner: string;
+	albums: App.Http.Resources.Models.ThumbAlbumResource[];
+	iter: number;
+};
+
 export function useAlbumsRefresher(auth: AuthStore, lycheeStore: LycheeStateStore, isLoginOpen: Ref<boolean>) {
 	const user = ref(undefined) as Ref<undefined | App.Http.Resources.Models.UserResource>;
 	const isKeybindingsHelpOpen = ref(false);
 	const smartAlbums = ref([]) as Ref<App.Http.Resources.Models.ThumbAlbumResource[]>;
 	const albums = ref([]) as Ref<App.Http.Resources.Models.ThumbAlbumResource[]>;
-	const sharedAlbums = ref([]) as Ref<App.Http.Resources.Models.ThumbAlbumResource[]>;
+	const sharedAlbums = ref([]) as Ref<SharedAlbums[]>;
 	const rootConfig = ref(undefined) as Ref<undefined | App.Http.Resources.GalleryConfigs.RootConfig>;
 	const rootRights = ref(undefined) as Ref<undefined | App.Http.Resources.Rights.RootAlbumRightsResource>;
-	const selectableAlbums = computed(() => albums.value.concat(sharedAlbums.value));
+	const selectableAlbums = computed(() => albums.value.concat(sharedAlbums.value.map((album) => album.albums).flat()));
 
 	function refresh() {
 		auth.getUser().then((data) => {
@@ -29,7 +35,10 @@ export function useAlbumsRefresher(auth: AuthStore, lycheeStore: LycheeStateStor
 				smartAlbums.value = (data.data.smart_albums as App.Http.Resources.Models.ThumbAlbumResource[]) ?? [];
 				albums.value = data.data.albums as App.Http.Resources.Models.ThumbAlbumResource[];
 				smartAlbums.value = smartAlbums.value.concat(data.data.tag_albums as App.Http.Resources.Models.ThumbAlbumResource[]);
-				sharedAlbums.value = (data.data.shared_albums as App.Http.Resources.Models.ThumbAlbumResource[]) ?? [];
+				sharedAlbums.value = [];
+
+				prepSharedAlbum((data.data.shared_albums as App.Http.Resources.Models.ThumbAlbumResource[]) ?? []);
+
 				rootConfig.value = data.data.config;
 				rootRights.value = data.data.rights;
 
@@ -47,6 +56,23 @@ export function useAlbumsRefresher(auth: AuthStore, lycheeStore: LycheeStateStor
 			});
 	}
 
+	function prepSharedAlbum(sharedAlbumsData: App.Http.Resources.Models.ThumbAlbumResource[]) {
+		// In this specific case, album owner is not null.
+		const sharedOwners: string[] = [...new Set(sharedAlbumsData.map((album) => album.owner as string))];
+		sharedOwners.forEach((owner) => {
+			const albums = sharedAlbumsData.filter((album) => album.owner === owner);
+			sharedAlbums.value.push({ owner, albums, iter: 0 });
+		});
+
+		// loop over all the shared albums to prep the indexes.
+		let idx = 0;
+		let sum = albums.value.length;
+		for (idx = 0; idx < sharedAlbums.value.length; idx++) {
+			sharedAlbums.value[idx].iter = sum;
+			sum += sharedAlbums.value[idx].albums.length;
+		}
+	}
+
 	return {
 		user,
 		isKeybindingsHelpOpen,
diff --git a/resources/js/composables/album/searchRefresher.ts b/resources/js/composables/album/searchRefresher.ts
index 98587b52810..27af286fb29 100644
--- a/resources/js/composables/album/searchRefresher.ts
+++ b/resources/js/composables/album/searchRefresher.ts
@@ -59,6 +59,14 @@ export function useSearch(albumid: Ref<string>, lycheeStore: LycheeStateStore, s
 		});
 	}
 
+	function clear() {
+		albums.value = [];
+		photos.value = [];
+		from.value = 0;
+		per_page.value = 0;
+		total.value = 0;
+	}
+
 	return {
 		albums,
 		photos,
@@ -72,6 +80,7 @@ export function useSearch(albumid: Ref<string>, lycheeStore: LycheeStateStore, s
 		albumHeader,
 		searchInit,
 		search,
+		clear,
 		refresh,
 	};
 }
diff --git a/resources/js/composables/album/uploadEvents.ts b/resources/js/composables/album/uploadEvents.ts
index 1cc84c2d725..c9f7d0bf945 100644
--- a/resources/js/composables/album/uploadEvents.ts
+++ b/resources/js/composables/album/uploadEvents.ts
@@ -16,7 +16,7 @@ export function useMouseEvents(
 	}
 
 	function dropUpload(e: DragEvent) {
-		console.log("dropUpload");
+		// console.log("dropUpload");
 		if (rights.value?.can_upload !== true) {
 			return;
 		}
@@ -26,7 +26,7 @@ export function useMouseEvents(
 		if (e.dataTransfer === null) {
 			return;
 		}
-		console.log(e.dataTransfer.files.length);
+		// console.log(e.dataTransfer.files.length);
 
 		if (e.dataTransfer.files.length > 0) {
 			for (let i = 0; i < e.dataTransfer.files.length; i++) {
@@ -41,7 +41,7 @@ export function useMouseEvents(
 	}
 
 	function onPaste(e: ClipboardEvent) {
-		console.log("onPaste");
+		// console.log("onPaste");
 		if (shouldIgnoreKeystroke()) {
 			return;
 		}
diff --git a/resources/js/composables/contextMenus/contextMenuAlbumAdd.ts b/resources/js/composables/contextMenus/contextMenuAlbumAdd.ts
index da00d47864c..8b4ae94b6a5 100644
--- a/resources/js/composables/contextMenus/contextMenuAlbumAdd.ts
+++ b/resources/js/composables/contextMenus/contextMenuAlbumAdd.ts
@@ -1,5 +1,17 @@
 import { computed, Ref, ref } from "vue";
 
+export type AddMenuItem =
+	| {
+			label: string;
+			icon: string;
+			callback: () => void;
+			if?: boolean;
+	  }
+	| {
+			is_divider: boolean;
+			if?: boolean;
+	  };
+
 type Callbacks = {
 	toggleCreateAlbum: () => void;
 	toggleUpload: () => void;
@@ -19,7 +31,7 @@ export function useContextMenuAlbumAdd(
 ) {
 	const addmenu = ref(); // ! Reference to the context menu
 	const addMenu = computed(function () {
-		const menu = [
+		const menu: AddMenuItem[] = [
 			{
 				label: "lychee.UPLOAD_PHOTO",
 				icon: "pi pi-upload",
diff --git a/resources/js/layouts/PhotoLayout.ts b/resources/js/layouts/PhotoLayout.ts
index 83340ecd015..c4eb5f6cf76 100644
--- a/resources/js/layouts/PhotoLayout.ts
+++ b/resources/js/layouts/PhotoLayout.ts
@@ -4,13 +4,14 @@ import { useJustify } from "./useJustify";
 import { useMasonry } from "./useMasonry";
 import { useGrid } from "./useGrid";
 
-export function useLayouts(config: App.Http.Resources.GalleryConfigs.PhotoLayoutConfig) {
-	const layout = ref(config);
+export function useLayouts(config: App.Http.Resources.GalleryConfigs.PhotoLayoutConfig, photo_layout: App.Enum.PhotoLayoutType) {
+	const configRef = ref(config);
+	const layout = ref(photo_layout);
 	const BASE = "my-0 w-5 h-5 mr-0 ml-0 transition-all duration-300 group-hover:scale-150 group-hover:stroke-black dark:group-hover:stroke-white ";
-	const squareClass = computed(() => BASE + (layout.value.photos_layout === "square" ? "stroke-primary-400" : "stroke-neutral-400"));
-	const justifiedClass = computed(() => BASE + (layout.value.photos_layout === "justified" ? "fill-primary-400" : "fill-neutral-400"));
-	const masonryClass = computed(() => BASE + (layout.value.photos_layout === "masonry" ? "stroke-primary-400" : "stroke-neutral-400"));
-	const gridClass = computed(() => BASE + (layout.value.photos_layout === "grid" ? "stroke-primary-400" : "stroke-neutral-400"));
+	const squareClass = computed(() => BASE + (layout.value === "square" ? "stroke-primary-400" : "stroke-neutral-400"));
+	const justifiedClass = computed(() => BASE + (layout.value === "justified" ? "fill-primary-400" : "fill-neutral-400"));
+	const masonryClass = computed(() => BASE + (layout.value === "masonry" ? "stroke-primary-400" : "stroke-neutral-400"));
+	const gridClass = computed(() => BASE + (layout.value === "grid" ? "stroke-primary-400" : "stroke-neutral-400"));
 
 	function activateLayout() {
 		const photoListing = document.getElementById("photoListing");
@@ -18,16 +19,16 @@ export function useLayouts(config: App.Http.Resources.GalleryConfigs.PhotoLayout
 			return; // Nothing to do
 		}
 
-		switch (layout.value.photos_layout) {
+		switch (layout.value) {
 			case "square":
-				return useSquare(photoListing, layout.value.photo_layout_square_column_width, layout.value.photo_layout_gap);
+				return useSquare(photoListing, configRef.value.photo_layout_square_column_width, configRef.value.photo_layout_gap);
 			case "justified":
 			case "unjustified":
-				return useJustify(photoListing, layout.value.photo_layout_justified_row_height);
+				return useJustify(photoListing, configRef.value.photo_layout_justified_row_height);
 			case "masonry":
-				return useMasonry(photoListing, layout.value.photo_layout_masonry_column_width, layout.value.photo_layout_gap);
+				return useMasonry(photoListing, configRef.value.photo_layout_masonry_column_width, configRef.value.photo_layout_gap);
 			case "grid":
-				return useGrid(photoListing, layout.value.photo_layout_grid_column_width, layout.value.photo_layout_gap);
+				return useGrid(photoListing, configRef.value.photo_layout_grid_column_width, config.photo_layout_gap);
 		}
 	}
 
diff --git a/resources/js/lychee.d.ts b/resources/js/lychee.d.ts
index 9e8721352b4..6561bb4628a 100644
--- a/resources/js/lychee.d.ts
+++ b/resources/js/lychee.d.ts
@@ -143,6 +143,7 @@ declare namespace App.Http.Resources.Editable {
 		photo_sorting: App.DTO.PhotoSortingCriterion | null;
 		album_sorting: App.DTO.AlbumSortingCriterion | null;
 		aspect_ratio: App.Enum.AspectRatioType | null;
+		photo_layout: any | null;
 		header_id: string | null;
 		cover_id: string | null;
 		tags: Array<string>;
@@ -179,6 +180,7 @@ declare namespace App.Http.Resources.GalleryConfigs {
 		is_search_accessible: boolean;
 		is_nsfw_warning_visible: boolean;
 		album_thumb_css_aspect_ratio: App.Enum.AspectRatioCSSType;
+		photo_layout: App.Enum.PhotoLayoutType;
 	};
 	export type FooterConfig = {
 		footer_additional_text: string;
@@ -229,7 +231,6 @@ declare namespace App.Http.Resources.GalleryConfigs {
 		attribution: string;
 	};
 	export type PhotoLayoutConfig = {
-		photos_layout: App.Enum.PhotoLayoutType;
 		photo_layout_justified_row_height: number;
 		photo_layout_masonry_column_width: number;
 		photo_layout_grid_column_width: number;
@@ -412,6 +413,7 @@ declare namespace App.Http.Resources.Models {
 		num_photos: number;
 		created_at: string;
 		formatted_min_max: string | null;
+		owner: string | null;
 		rights: App.Http.Resources.Rights.AlbumRightsResource;
 	};
 	export type ThumbResource = {
diff --git a/resources/js/menus/LeftMenu.vue b/resources/js/menus/LeftMenu.vue
index 59f21a342f2..412ea99c242 100644
--- a/resources/js/menus/LeftMenu.vue
+++ b/resources/js/menus/LeftMenu.vue
@@ -1,26 +1,47 @@
 <template>
-	<Drawer v-model:visible="left_menu_open">
+	<Drawer v-model:visible="left_menu_open" :pt:content:class="'flex flex-col justify-start gap-10'">
+		<template #header>
+			<div class="flex items-center gap-2 text-muted-color hover:text-primary-400">
+				<router-link v-if="!isGallery" v-slot="{ href, navigate }" to="/gallery" custom>
+					<a v-ripple :href="href" @click="navigate">
+						<span class="text-lg font-bold pl-3">Back to Gallery</span>
+					</a>
+				</router-link>
+			</div>
+		</template>
 		<Menu :model="items" v-if="initData" class="!border-none">
-			<template #submenulabel="{ item }">
-				<span class="text-primary-emphasis font-bold" :class="item.access !== false ? '' : 'hidden'">{{ $t(item.label) }}</span>
+			<template #submenuheader="{ item }">
+				<span class="text-primary-emphasis font-bold" :class="item.access !== false ? '' : 'hidden'">
+					<!-- @vue-ignore -->
+					{{ $t(item.label) }}
+				</span>
 			</template>
 			<template #item="{ item, props }">
 				<template v-if="item.access">
 					<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
 						<a v-ripple :href="href" v-bind="props.action" @click="navigate">
-							<MiniIcon :icon="item.icon" :class="'w-3 h-3'" />
-							<span class="ml-2">{{ $t(item.label) }}</span>
+							<MiniIcon :icon="item.icon ?? ''" :class="'w-3 h-3'" />
+							<span class="ml-2">
+								<!-- @vue-ignore -->
+								{{ $t(item.label) }}
+							</span>
 							<SETag v-if="item.seTag" />
 						</a>
 					</router-link>
 					<a v-if="item.url" v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-						<MiniIcon :icon="item.icon" :class="'w-3 h-3'" />
-						<span class="ml-2">{{ $t(item.label) }}</span>
+						<MiniIcon :icon="item.icon ?? ''" :class="'w-3 h-3'" />
+						<span class="ml-2">
+							<!-- @vue-ignore -->
+							{{ $t(item.label) }}
+						</span>
 						<SETag v-if="item.seTag" />
 					</a>
 					<a v-if="!item.route && !item.url" v-ripple v-bind="props.action">
-						<MiniIcon :icon="item.icon" :class="'w-3 h-3'" />
-						<span class="ml-2">{{ $t(item.label) }}</span>
+						<MiniIcon :icon="item.icon ?? ''" :class="'w-3 h-3'" />
+						<span class="ml-2">
+							<!-- @vue-ignore -->
+							{{ $t(item.label) }}
+						</span>
 						<SETag v-if="item.seTag" />
 					</a>
 				</template>
@@ -43,6 +64,7 @@ import { useLycheeStateStore } from "@/stores/LycheeState";
 import AlbumService from "@/services/album-service";
 import SETag from "@/components/icons/SETag.vue";
 import Constants from "@/services/constants";
+import { useRoute } from "vue-router";
 
 type MenyType =
 	| {
@@ -62,14 +84,14 @@ type MenyType =
 
 const initData = ref(undefined) as Ref<undefined | App.Http.Resources.Rights.GlobalRightsResource>;
 const openLycheeAbout = ref(false);
-const items = ref([] as MenyType[]);
 const logsEnabled = ref(true);
 
+const route = useRoute();
 const authStore = useAuthStore();
 const lycheeStore = useLycheeStateStore();
 lycheeStore.init();
 
-const { left_menu_open, clockwork_url, is_se_enabled, is_se_preview_enabled } = storeToRefs(lycheeStore);
+const { left_menu_open, clockwork_url, is_se_enabled, is_se_preview_enabled, is_se_info_hidden } = storeToRefs(lycheeStore);
 const { user } = storeToRefs(authStore);
 authStore.getUser();
 
@@ -92,7 +114,6 @@ function load() {
 	InitService.fetchGlobalRights()
 		.then((data) => {
 			initData.value = data.data;
-			loadMenu();
 		})
 		.catch((error) => {
 			console.error(error);
@@ -119,12 +140,16 @@ const canSeeAdmin = computed(() => {
 	);
 });
 
-function loadMenu() {
+const isGallery = computed(() => {
+	return route.name === "gallery";
+});
+
+const items = computed<MenyType[]>(() => {
 	if (!initData.value) {
-		return;
+		return [];
 	}
 
-	items.value = [
+	return [
 		{
 			label: "Admin",
 			access: canSeeAdmin.value,
@@ -170,6 +195,12 @@ function loadMenu() {
 					route: "/jobs",
 					access: initData.value.settings.can_see_logs ?? false,
 				},
+				{
+					label: "Clockwork App",
+					icon: "telescope",
+					url: clockwork_url.value ?? "",
+					access: clockwork_url.value !== null && (initData.value.settings.can_access_dev_tools ?? false),
+				},
 			],
 		},
 		{
@@ -191,13 +222,13 @@ function loadMenu() {
 					label: "Statistics",
 					icon: "bar-chart",
 					route: "/statistics",
-					access: is_se_enabled.value,
+					access: is_se_enabled.value === true,
 				},
 				{
 					label: "Statistics",
 					icon: "bar-chart",
 					route: "/statistics",
-					access: is_se_preview_enabled.value,
+					access: is_se_preview_enabled.value === true,
 					seTag: true,
 				},
 				{
@@ -208,22 +239,29 @@ function loadMenu() {
 				},
 			],
 		},
-
 		{
-			label: "lychee.ABOUT_LYCHEE",
-			icon: "info",
-			access: true,
-			command: () => (openLycheeAbout.value = true),
+			label: "Lychee",
+			items: [
+				{
+					label: "About",
+					icon: "info",
+					access: true,
+					command: () => (openLycheeAbout.value = true),
+				},
+				{
+					label: "Source",
+					icon: "book",
+					access: is_se_info_hidden.value === false,
+					url: "https://github.com/LycheeOrg/Lychee",
+				},
+				{
+					label: "Support",
+					icon: "heart",
+					access: is_se_info_hidden.value === false,
+					url: "https://lycheeorg.github.io/get-supporter-edition/",
+				},
+			],
 		},
 	];
-
-	if (clockwork_url.value && initData.value.settings.can_access_dev_tools) {
-		items.value.push({
-			label: "Clockwork App",
-			icon: "telescope",
-			url: clockwork_url.value,
-			access: initData.value.settings.can_edit ?? false,
-		});
-	}
-}
+});
 </script>
diff --git a/resources/js/services/album-service.ts b/resources/js/services/album-service.ts
index 7434a3b0d29..39b520f95ac 100644
--- a/resources/js/services/album-service.ts
+++ b/resources/js/services/album-service.ts
@@ -22,6 +22,7 @@ export type UpdateAbumData = {
 	album_sorting_column: App.Enum.ColumnSortingAlbumType | null;
 	album_sorting_order: App.Enum.OrderSortingType | null;
 	album_aspect_ratio: App.Enum.AspectRatioType | null;
+	photo_layout: App.Enum.PhotoLayoutType | null;
 	copyright: string | null;
 	header_id: string | null;
 	is_compact: boolean;
@@ -35,6 +36,7 @@ export type UpdateTagAlbumData = {
 	photo_sorting_column: App.Enum.ColumnSortingPhotoType | null;
 	photo_sorting_order: App.Enum.OrderSortingType | null;
 	copyright: string | null;
+	photo_layout: App.Enum.PhotoLayoutType | null;
 };
 
 export type UpdateProtectionPolicyData = {
@@ -51,6 +53,7 @@ const AlbumService = {
 	clearCache(album_id: string | null = null): void {
 		const axiosWithCache = axios as unknown as AxiosCacheInstance;
 		if (!album_id) {
+			// @ts-expect-error
 			axiosWithCache.storage.clear();
 		} else {
 			axiosWithCache.storage.remove("album_" + album_id);
diff --git a/resources/js/views/Diagnostics.vue b/resources/js/views/Diagnostics.vue
index 56f2dd6047d..17cc656c998 100644
--- a/resources/js/views/Diagnostics.vue
+++ b/resources/js/views/Diagnostics.vue
@@ -1,9 +1,10 @@
 <template>
 	<Toolbar class="w-full border-0 h-14">
 		<template #start>
-			<router-link :to="{ name: 'gallery' }">
+			<Button @click="openLeftMenu" icon="pi pi-bars" class="mr-2 border-none" severity="secondary" text />
+			<!-- <router-link :to="{ name: 'gallery' }">
 				<Button icon="pi pi-angle-left" class="mr-2" severity="secondary" text />
-			</router-link>
+			</router-link> -->
 		</template>
 
 		<template #center>
@@ -26,8 +27,13 @@ import ErrorsDiagnotics from "@/components/diagnostics/ErrorsDiagnostics.vue";
 import SpaceDiagnostics from "@/components/diagnostics/SpaceDiagnostics.vue";
 import { useAuthStore } from "@/stores/Auth";
 import { storeToRefs } from "pinia";
+import { useLycheeStateStore } from "@/stores/LycheeState";
 
 const authStore = useAuthStore();
 const { user } = storeToRefs(authStore);
 authStore.getUser();
+
+const lycheeStore = useLycheeStateStore();
+const { left_menu_open } = storeToRefs(lycheeStore);
+const openLeftMenu = () => (left_menu_open.value = !left_menu_open.value);
 </script>
diff --git a/resources/js/views/Jobs.vue b/resources/js/views/Jobs.vue
index bc3a3f9c80e..26268a97884 100644
--- a/resources/js/views/Jobs.vue
+++ b/resources/js/views/Jobs.vue
@@ -1,9 +1,7 @@
 <template>
 	<Toolbar class="w-full border-0 h-14">
 		<template #start>
-			<router-link :to="{ name: 'gallery' }">
-				<Button icon="pi pi-angle-left" class="mr-2" severity="secondary" text />
-			</router-link>
+			<OpenLeftMenu />
 		</template>
 
 		<template #center>
@@ -25,10 +23,10 @@
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
-import Button from "primevue/button";
 import Panel from "primevue/panel";
 import Toolbar from "primevue/toolbar";
 import JobService from "@/services/jobs-service";
+import OpenLeftMenu from "@/components/headers/OpenLeftMenu.vue";
 
 const jobs = ref([] as App.Http.Resources.Models.JobHistoryResource[]);
 function load() {
diff --git a/resources/js/views/Landing.vue b/resources/js/views/Landing.vue
index 98ffa111c71..d0fe1d757b6 100644
--- a/resources/js/views/Landing.vue
+++ b/resources/js/views/Landing.vue
@@ -68,18 +68,23 @@
 </template>
 <script setup lang="ts">
 import { Ref, ref } from "vue";
-import { RouterLink } from "vue-router";
+import { RouterLink, useRouter } from "vue-router";
 import InitService from "@/services/init-service";
 import LandingFooter from "@/components/footers/LandingFooter.vue";
 
 const introVisible = ref(true);
 
 const initdata = ref(undefined) as Ref<undefined | App.Http.Resources.GalleryConfigs.LandingPageResource>;
+const router = useRouter();
 
 InitService.fetchLandingData()
 	.then((data) => {
-		initdata.value = data.data;
-		setTimeout(() => (introVisible.value = false), 4000);
+		if (data.data.landing_page_enable === false) {
+			router.push("/gallery");
+		} else {
+			initdata.value = data.data;
+			setTimeout(() => (introVisible.value = false), 4000);
+		}
 	})
 	.catch((error) => {
 		console.error(error);
diff --git a/resources/js/views/Maintenance.vue b/resources/js/views/Maintenance.vue
index 513b60999c8..38ae0d3688c 100644
--- a/resources/js/views/Maintenance.vue
+++ b/resources/js/views/Maintenance.vue
@@ -1,9 +1,7 @@
 <template>
 	<Toolbar class="w-full border-0 h-14">
 		<template #start>
-			<router-link :to="{ name: 'gallery' }">
-				<Button icon="pi pi-angle-left" class="mr-2" severity="secondary" text />
-			</router-link>
+			<OpenLeftMenu />
 		</template>
 
 		<template #center>
@@ -33,7 +31,6 @@
 	</div>
 </template>
 <script setup lang="ts">
-import Button from "primevue/button";
 import Toolbar from "primevue/toolbar";
 import MaintenanceCleaning from "@/components/maintenance/MaintenanceCleaning.vue";
 import MaintenanceFilesize from "@/components/maintenance/MaintenanceFilesize.vue";
@@ -42,4 +39,5 @@ import MaintenanceFixTree from "@/components/maintenance/MaintenanceFixTree.vue"
 import MaintenanceGenSizevariants from "@/components/maintenance/MaintenanceGenSizevariants.vue";
 import MaintenanceOptimize from "@/components/maintenance/MaintenanceOptimize.vue";
 import MaintenanceUpdate from "@/components/maintenance/MaintenanceUpdate.vue";
+import OpenLeftMenu from "@/components/headers/OpenLeftMenu.vue";
 </script>
diff --git a/resources/js/views/Profile.vue b/resources/js/views/Profile.vue
index 90067606366..edb81d274d8 100644
--- a/resources/js/views/Profile.vue
+++ b/resources/js/views/Profile.vue
@@ -2,9 +2,7 @@
 	<div class="h-svh overflow-y-auto">
 		<Toolbar class="w-full border-0 h-14">
 			<template #start>
-				<router-link :to="{ name: 'gallery' }">
-					<Button icon="pi pi-angle-left" class="mr-2" severity="secondary" text />
-				</router-link>
+				<OpenLeftMenu />
 			</template>
 
 			<template #center>
@@ -24,4 +22,5 @@ import Toolbar from "primevue/toolbar";
 import SetLogin from "@/components/forms/profile/SetLogin.vue";
 import SetSecondFactor from "@/components/forms/profile/SetSecondFactor.vue";
 import SetOauth from "@/components/forms/profile/SetOauth.vue";
+import OpenLeftMenu from "@/components/headers/OpenLeftMenu.vue";
 </script>
diff --git a/resources/js/views/Settings.vue b/resources/js/views/Settings.vue
index 847dabd3f6f..c4c5ce53c64 100644
--- a/resources/js/views/Settings.vue
+++ b/resources/js/views/Settings.vue
@@ -1,9 +1,7 @@
 <template>
 	<Toolbar class="w-full border-0 h-14">
 		<template #start>
-			<router-link :to="{ name: 'gallery' }">
-				<Button icon="pi pi-angle-left" class="mr-2" severity="secondary" text />
-			</router-link>
+			<OpenLeftMenu />
 		</template>
 
 		<template #center>
@@ -19,7 +17,7 @@
 	<Tabs value="0" class="max-w-5xl mx-auto">
 		<TabList>
 			<Tab value="0">Basic</Tab>
-			<Tab value="1"><i class="pi pi-exclamation-triangle mr-2" />{{ $t("lychee.MORE") }}</Tab>
+			<Tab value="1"><i class="pi pi-exclamation-triangle mr-2 text-orange-500" />All settings</Tab>
 		</TabList>
 		<TabPanels :pt:root:class="'px-0'">
 			<TabPanel value="0">
@@ -33,7 +31,6 @@
 	</Tabs>
 </template>
 <script setup lang="ts">
-import Button from "primevue/button";
 import Tabs from "primevue/tabs";
 import TabList from "primevue/tablist";
 import Tab from "primevue/tab";
@@ -42,4 +39,5 @@ import TabPanel from "primevue/tabpanel";
 import Toolbar from "primevue/toolbar";
 import AllSettings from "@/components/settings/AllSettings.vue";
 import EasySettings from "@/components/settings/EasySettings.vue";
+import OpenLeftMenu from "@/components/headers/OpenLeftMenu.vue";
 </script>
diff --git a/resources/js/views/Sharing.vue b/resources/js/views/Sharing.vue
index 29a68bc1bb8..78b8e00d1cf 100644
--- a/resources/js/views/Sharing.vue
+++ b/resources/js/views/Sharing.vue
@@ -1,9 +1,7 @@
 <template>
 	<Toolbar class="w-full border-0 h-14">
 		<template #start>
-			<router-link :to="{ name: 'gallery' }">
-				<Button icon="pi pi-angle-left" class="mr-2" severity="secondary" text />
-			</router-link>
+			<OpenLeftMenu />
 		</template>
 		<template #center>
 			{{ $t("lychee.SHARING") }}
@@ -11,28 +9,24 @@
 		<template #end> </template>
 	</Toolbar>
 	<Panel class="border-none p-9 mx-auto max-w-3xl" v-if="perms !== undefined" pt:header:class="hidden">
-		<div class="w-full mb-9 text-center">This page gives an overview and edit the sharing rights associated with albums.</div>
-		<div class="flex flex-col">
-			<div class="flex text-muted-color items-center">
+		<div class="w-full mb-9 text-center text-muted-color-emphasis">
+			This page gives an overview of and the ability to edit the sharing rights associated with albums.
+		</div>
+		<div class="flex flex-col text-muted-color-emphasis">
+			<div class="flex items-center">
 				<div class="w-5/12 flex items-center">
 					<span class="w-full">{{ $t("lychee.ALBUM_TITLE") }}</span>
 					<span class="w-full">{{ $t("lychee.USERNAME") }}</span>
 				</div>
-				<div class="w-1/12 flex justify-center items-center">
+				<div class="w-1/2 flex items-center justify-around">
+					<i class="pi pi-eye" v-tooltip.top="'Grants read access'" />
 					<i class="pi pi-window-maximize" v-tooltip.top="'Grants full photo access'" />
-				</div>
-				<div class="w-1/12 flex justify-center items-center">
 					<i class="pi pi-download" v-tooltip.top="'Grants download'" />
-				</div>
-				<div class="w-1/12 flex justify-center items-center">
 					<i class="pi pi-upload" v-tooltip.top="'Grants upload'" />
-				</div>
-				<div class="w-1/12 flex justify-center items-center">
 					<i class="pi pi-file-edit" v-tooltip.top="'Grants edit'" />
-				</div>
-				<div class="w-1/12 flex justify-center items-center">
 					<i class="pi pi-trash" v-tooltip.top="'Grants delete'" />
 				</div>
+				<div class="w-1/6"></div>
 			</div>
 			<template v-if="perms?.length > 0">
 				<ShareLine v-for="perm in perms" :perm="perm" @delete="deletePermission" :with-album="true" />
@@ -43,8 +37,8 @@
 </template>
 <script setup lang="ts">
 import ShareLine from "@/components/forms/sharing/ShareLine.vue";
+import OpenLeftMenu from "@/components/headers/OpenLeftMenu.vue";
 import SharingService from "@/services/sharing-service";
-import Button from "primevue/button";
 import Panel from "primevue/panel";
 import Toolbar from "primevue/toolbar";
 import { useToast } from "primevue/usetoast";
diff --git a/resources/js/views/Statistics.vue b/resources/js/views/Statistics.vue
index c24ec6b8709..8cb4a3d083b 100644
--- a/resources/js/views/Statistics.vue
+++ b/resources/js/views/Statistics.vue
@@ -1,9 +1,7 @@
 <template>
 	<Toolbar class="w-full border-0 h-14">
 		<template #start>
-			<router-link :to="{ name: 'gallery' }">
-				<Button icon="pi pi-angle-left" class="mr-2" severity="secondary" text />
-			</router-link>
+			<OpenLeftMenu />
 		</template>
 
 		<template #center>
@@ -43,6 +41,7 @@ import { shouldIgnoreKeystroke } from "@/utils/keybindings-utils";
 import SizeVariantMeter from "@/components/statistics/SizeVariantMeter.vue";
 import TotalCard, { TotalAlbum } from "@/components/statistics/TotalCard.vue";
 import AlbumsTable from "@/components/statistics/AlbumsTable.vue";
+import OpenLeftMenu from "@/components/headers/OpenLeftMenu.vue";
 
 const router = useRouter();
 const user = ref(undefined as undefined | App.Http.Resources.Models.UserResource);
diff --git a/resources/js/views/Users.vue b/resources/js/views/Users.vue
index b0e02b86c37..2976141d2f7 100644
--- a/resources/js/views/Users.vue
+++ b/resources/js/views/Users.vue
@@ -2,9 +2,7 @@
 	<CreateEditUser class="mt-10" @refresh="load" v-model:visible="isCreateUserVisible" :user="selectedUser" :is-edit="isEdit" />
 	<Toolbar class="w-full border-0 h-14">
 		<template #start>
-			<router-link :to="{ name: 'gallery' }">
-				<Button icon="pi pi-angle-left" class="mr-2" severity="secondary" text />
-			</router-link>
+			<OpenLeftMenu />
 		</template>
 
 		<template #center>
@@ -74,6 +72,7 @@ import ListUser from "@/components/forms/users/ListUser.vue";
 import { useToast } from "primevue/usetoast";
 import { storeToRefs } from "pinia";
 import { useLycheeStateStore } from "@/stores/LycheeState";
+import OpenLeftMenu from "@/components/headers/OpenLeftMenu.vue";
 
 const lycheeStore = useLycheeStateStore();
 lycheeStore.init();
diff --git a/resources/js/views/gallery-panels/Album.vue b/resources/js/views/gallery-panels/Album.vue
index fc966302973..598cd733d4f 100644
--- a/resources/js/views/gallery-panels/Album.vue
+++ b/resources/js/views/gallery-panels/Album.vue
@@ -61,6 +61,7 @@
 					:photos="photos"
 					:album="album"
 					:gallery-config="layout"
+					:photo-layout="config.photo_layout"
 					:selected-photos="selectedPhotosIds"
 					@clicked="photoClick"
 					@contexted="photoMenuOpen"
@@ -154,7 +155,10 @@
 					<Divider v-if="item.is_divider" />
 					<a v-else v-ripple v-bind="props.action" @click="item.callback">
 						<span :class="item.icon" />
-						<span class="ml-2">{{ $t(item.label) }}</span>
+						<span class="ml-2">
+							<!-- @vue-ignore -->
+							{{ $t(item.label) }}
+						</span>
 					</a>
 				</template>
 			</ContextMenu>
diff --git a/resources/js/views/gallery-panels/Albums.vue b/resources/js/views/gallery-panels/Albums.vue
index e46a86b6ab2..e5b9f3d8de2 100644
--- a/resources/js/views/gallery-panels/Albums.vue
+++ b/resources/js/views/gallery-panels/Albums.vue
@@ -38,20 +38,22 @@
 			@clicked="albumClick"
 			@contexted="albumMenuOpen"
 		/>
-		<AlbumThumbPanel
-			v-if="sharedAlbums.length > 0"
-			header="lychee.SHARED_ALBUMS"
-			:album="undefined"
-			:albums="sharedAlbums"
-			:user="user"
-			:config="albumPanelConfig"
-			:is-alone="!albums.length"
-			:are-nsfw-visible="are_nsfw_visible"
-			:idx-shift="albums.length"
-			:selected-albums="selectedAlbumsIds"
-			@clicked="albumClick"
-			@contexted="albumMenuOpen"
-		/>
+		<template v-for="sharedAlbum in sharedAlbums">
+			<AlbumThumbPanel
+				v-if="sharedAlbums.length > 0"
+				:header="sharedAlbum.owner"
+				:album="undefined"
+				:albums="sharedAlbum.albums"
+				:user="user"
+				:config="albumPanelConfig"
+				:is-alone="!albums.length"
+				:are-nsfw-visible="are_nsfw_visible"
+				:idx-shift="sharedAlbum.iter"
+				:selected-albums="selectedAlbumsIds"
+				@clicked="albumClick"
+				@contexted="albumMenuOpen"
+			/>
+		</template>
 		<GalleryFooter v-once />
 	</div>
 	<ContextMenu ref="menu" :model="Menu" :class="Menu.length === 0 ? 'hidden' : ''">
@@ -59,7 +61,10 @@
 			<Divider v-if="item.is_divider" />
 			<a v-else v-ripple v-bind="props.action" @click="item.callback">
 				<span :class="item.icon" />
-				<span class="ml-2">{{ $t(item.label) }}</span>
+				<span class="ml-2">
+					<!-- @vue-ignore -->
+					{{ $t(item.label) }}
+				</span>
 			</a>
 		</template>
 	</ContextMenu>
diff --git a/resources/js/views/gallery-panels/Map.vue b/resources/js/views/gallery-panels/Map.vue
index da2144f1176..a02e4d4157c 100644
--- a/resources/js/views/gallery-panels/Map.vue
+++ b/resources/js/views/gallery-panels/Map.vue
@@ -182,7 +182,6 @@ function addContentsToMap() {
 
 	data.value.photos.forEach(function (element: App.Http.Resources.Models.PhotoResource) {
 		if (element.latitude || element.longitude) {
-			// console.log(element);
 			photos.push({
 				lat: element.latitude,
 				lng: element.longitude,
diff --git a/resources/js/views/gallery-panels/Search.vue b/resources/js/views/gallery-panels/Search.vue
index 35b678ee2ff..2b34a82bc0b 100644
--- a/resources/js/views/gallery-panels/Search.vue
+++ b/resources/js/views/gallery-panels/Search.vue
@@ -15,15 +15,21 @@
 				<template #end> </template>
 			</Toolbar>
 		</Collapse>
-		<SearchBox v-if="searchMinimumLengh !== undefined" :search-minimum-lengh="searchMinimumLengh" v-model:search="search_term" @search="search" />
-		<template v-if="isSearching">
+		<SearchBox
+			v-if="searchMinimumLengh !== undefined"
+			:search-minimum-lengh="searchMinimumLengh"
+			v-model:search="search_term"
+			@search="search"
+			@clear="clear"
+		/>
+		<template v-if="isSearching === true">
 			<div class="flex w-full h-full items-center justify-center text-xl text-muted-color">
 				<span class="block">
 					{{ "Searching..." }}
 				</span>
 			</div>
 		</template>
-		<template v-if="noData">
+		<template v-if="isSearching === false && noData">
 			<div class="flex w-full h-full items-center justify-center text-xl text-muted-color">
 				<span class="block">
 					{{ "Nothing to see here" }}
@@ -53,6 +59,7 @@
 				</div>
 				<PhotoThumbPanel
 					v-if="layout !== null && photos.length > 0"
+					:photo-layout="configForMenu.photo_layout"
 					:header="photoHeader"
 					:photos="photos"
 					:album="undefined"
@@ -110,7 +117,10 @@
 					<Divider v-if="item.is_divider" />
 					<a v-else v-ripple v-bind="props.action" @click="item.callback">
 						<span :class="item.icon" />
-						<span class="ml-2">{{ $t(item.label) }}</span>
+						<span class="ml-2">
+							<!-- @vue-ignore -->
+							{{ $t(item.label) }}
+						</span>
 					</a>
 				</template>
 			</ContextMenu>
@@ -133,9 +143,9 @@ import { storeToRefs } from "pinia";
 import Button from "primevue/button";
 import Toolbar from "primevue/toolbar";
 import Paginator from "primevue/paginator";
-import { computed, Ref, ref } from "vue";
+import { computed, ref } from "vue";
 import { Collapse } from "vue-collapsed";
-import { useRoute, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
 import { useSearch } from "@/composables/album/searchRefresher";
 import { trans } from "laravel-vue-i18n";
 import Divider from "primevue/divider";
@@ -167,8 +177,22 @@ const auth = useAuthStore();
 const lycheeStore = useLycheeStateStore();
 lycheeStore.init();
 const { are_nsfw_visible, is_full_screen, search_page, search_term, is_login_open, nsfw_consented, is_upload_visible } = storeToRefs(lycheeStore);
-const { albums, photos, noData, searchMinimumLengh, isSearching, from, per_page, total, photoHeader, albumHeader, searchInit, search, refresh } =
-	useSearch(albumid, lycheeStore, search_term, search_page);
+const {
+	albums,
+	photos,
+	noData,
+	searchMinimumLengh,
+	isSearching,
+	from,
+	per_page,
+	total,
+	photoHeader,
+	albumHeader,
+	searchInit,
+	search,
+	clear,
+	refresh,
+} = useSearch(albumid, lycheeStore, search_term, search_page);
 const { album, config, layout, loadAlbum, loadLayout } = useAlbumRefresher(albumid, auth, is_login_open, nsfw_consented);
 
 const configForMenu = computed<App.Http.Resources.GalleryConfigs.AlbumConfig>(() => {
@@ -185,6 +209,7 @@ const configForMenu = computed<App.Http.Resources.GalleryConfigs.AlbumConfig>(()
 		is_search_accessible: false,
 		is_nsfw_warning_visible: false,
 		album_thumb_css_aspect_ratio: "aspect-square",
+		photo_layout: "justified",
 	};
 });
 const albumForMenu = albumid.value !== "" ? album : null;
diff --git a/tests/Feature_v2/Album/AlbumUpdateTest.php b/tests/Feature_v2/Album/AlbumUpdateTest.php
index c9e09249707..2113ec68b3f 100644
--- a/tests/Feature_v2/Album/AlbumUpdateTest.php
+++ b/tests/Feature_v2/Album/AlbumUpdateTest.php
@@ -28,6 +28,7 @@ public function testUpdateAlbumUnauthorizedForbidden(): void
 			'album_sorting_column' => 'title',
 			'album_sorting_order' => 'DESC',
 			'album_aspect_ratio' => '1/1',
+			'photo_layout' => null,
 			'copyright' => '',
 			'is_compact' => false,
 			'header_id' => null,
@@ -44,6 +45,7 @@ public function testUpdateAlbumUnauthorizedForbidden(): void
 			'album_sorting_column' => 'title',
 			'album_sorting_order' => 'DESC',
 			'album_aspect_ratio' => '1/1',
+			'photo_layout' => null,
 			'copyright' => '',
 			'is_compact' => false,
 			'header_id' => null,
@@ -63,6 +65,7 @@ public function testUpdateAlbumAuthorized(): void
 			'album_sorting_column' => 'title',
 			'album_sorting_order' => 'DESC',
 			'album_aspect_ratio' => '1/1',
+			'photo_layout' => null,
 			'copyright' => '',
 			'is_compact' => false,
 			'header_id' => null,
@@ -80,6 +83,7 @@ public function testUpdateTagAlbumUnauthorizedForbidden(): void
 			'photo_sorting_column' => 'title',
 			'photo_sorting_order' => 'ASC',
 			'copyright' => '',
+			'photo_layout' => null,
 		]);
 		$this->assertUnauthorized($response);
 
@@ -91,6 +95,7 @@ public function testUpdateTagAlbumUnauthorizedForbidden(): void
 			'photo_sorting_column' => 'title',
 			'photo_sorting_order' => 'ASC',
 			'copyright' => '',
+			'photo_layout' => null,
 		]);
 		$this->assertForbidden($response);
 	}
@@ -105,6 +110,7 @@ public function testUpdateTagAlbumAuthorized(): void
 			'photo_sorting_column' => 'title',
 			'photo_sorting_order' => 'ASC',
 			'copyright' => '',
+			'photo_layout' => null,
 		]);
 		$this->assertOk($response);