From f6eb39ee99e7af1ac98241dd48b4093f5b36c8a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Beno=C3=AEt=20Viguier?= <ildyria@users.noreply.github.com>
Date: Wed, 20 Nov 2024 10:39:03 +0100
Subject: [PATCH] Fix duplicate upload + add scroll remembering (#2693)

---
 .../diagnostics/ConfigurationsDiagnostics.vue |  2 +-
 .../diagnostics/ErrorsDiagnostics.vue         |  2 +-
 .../diagnostics/InfoDiagnostics.vue           |  2 +-
 .../diagnostics/SpaceDiagnostics.vue          |  2 +-
 resources/js/components/drawers/AlbumEdit.vue |  8 +-
 .../js/components/drawers/AlbumStatistics.vue |  4 +-
 resources/js/components/drawers/PhotoEdit.vue | 14 ++--
 .../forms/album/AlbumCreateDialog.vue         | 18 ++++-
 .../forms/album/AlbumCreateTagDialog.vue      | 29 ++++---
 .../js/components/forms/album/AlbumMove.vue   |  4 +-
 .../forms/album/AlbumProperties.vue           | 22 +++---
 .../js/components/forms/album/AlbumShare.vue  |  2 +-
 .../components/forms/album/AlbumTransfer.vue  |  2 +-
 .../forms/album/SearchTargetAlbum.vue         |  6 +-
 .../forms/album/SearchTargetUser.vue          |  6 +-
 .../gallery-dialogs/AlbumMergeDialog.vue      |  4 +-
 .../forms/gallery-dialogs/MoveDialog.vue      |  4 +-
 .../forms/gallery-dialogs/RenameDialog.vue    |  2 +-
 .../forms/photo/PhotoCopyDialog.vue           |  4 +-
 .../components/forms/photo/PhotoTagDialog.vue |  2 +-
 .../js/components/forms/profile/ApiToken.vue  |  2 +-
 .../js/components/forms/profile/SetLogin.vue  | 12 +--
 .../js/components/forms/profile/SetOauth.vue  |  2 +-
 .../forms/profile/SetSecondFactor.vue         |  2 +-
 .../components/forms/settings/BoolField.vue   |  2 +-
 .../components/forms/settings/NumberField.vue |  2 +-
 .../js/components/forms/settings/OldField.vue |  2 +-
 .../components/forms/settings/SelectLang.vue  |  2 +-
 .../components/forms/settings/SliderField.vue |  2 +-
 .../components/forms/settings/StringField.vue |  2 +-
 .../forms/settings/ZipSliderField.vue         |  2 +-
 .../forms/sharing/CreateSharing.vue           |  2 +-
 .../components/forms/upload/UploadingLine.vue |  2 +-
 .../components/forms/users/CreateEditUser.vue |  8 +-
 .../components/gallery/thumbs/AlbumThumb.vue  |  6 +-
 .../js/components/headers/AlbumHeader.vue     | 39 ++--------
 .../js/components/headers/AlbumsHeader.vue    | 36 ++++-----
 .../js/components/headers/OpenLeftMenu.vue    |  6 +-
 .../js/components/headers/PhotoHeader.vue     | 13 ++--
 .../maintenance/MaintenanceCleaning.vue       |  2 +-
 .../maintenance/MaintenanceFilesize.vue       |  2 +-
 .../maintenance/MaintenanceFixJobs.vue        |  2 +-
 .../maintenance/MaintenanceFixTree.vue        |  2 +-
 .../MaintenanceGenSizevariants.vue            |  2 +-
 .../maintenance/MaintenanceOptimize.vue       |  2 +-
 .../maintenance/MaintenanceUpdate.vue         |  2 +-
 .../js/components/modals/AboutLychee.vue      |  2 +-
 resources/js/components/modals/LoginModal.vue |  2 +-
 .../js/components/modals/RegisterLychee.vue   |  2 +-
 .../js/components/modals/UploadPanel.vue      |  8 +-
 .../js/components/modals/WebauthnModal.vue    |  2 +-
 .../js/components/settings/AllSettings.vue    |  6 +-
 .../js/components/settings/EasySettings.vue   |  2 +-
 .../js/components/statistics/AlbumsTable.vue  |  2 +-
 .../statistics/SizeVariantMeter.vue           |  4 +-
 .../js/composables/album/albumRefresher.ts    | 30 +++----
 .../js/composables/album/albumsRefresher.ts   | 16 ++--
 resources/js/composables/album/scrollable.ts  | 28 +++++++
 .../js/composables/album/searchRefresher.ts   |  8 +-
 .../contextMenus/contextMenuAlbumsAdd.ts      |  7 +-
 .../modalsTriggers/galleryModals.ts           | 17 ++--
 resources/js/composables/photo/basePhoto.ts   |  6 +-
 resources/js/composables/photo/slideshow.ts   |  2 +-
 .../js/composables/selections/selections.ts   |  8 +-
 resources/js/menus/LeftMenu.vue               |  9 ++-
 resources/js/services/sidebar-map.ts          |  4 +-
 resources/js/stores/LycheeState.ts            | 39 ----------
 resources/js/stores/ModalsState.ts            | 78 +++++++++++++++++++
 resources/js/views/Diagnostics.vue            |  9 +--
 resources/js/views/Error.vue                  |  4 +-
 resources/js/views/Jobs.vue                   |  2 +-
 resources/js/views/Landing.vue                |  2 +-
 resources/js/views/Permissions.vue            |  4 +-
 resources/js/views/Sharing.vue                |  2 +-
 resources/js/views/Statistics.vue             |  5 +-
 resources/js/views/Users.vue                  |  2 +-
 resources/js/views/gallery-panels/Album.vue   | 24 ++++--
 resources/js/views/gallery-panels/Albums.vue  | 26 +++++--
 resources/js/views/gallery-panels/Map.vue     | 14 ++--
 resources/js/views/gallery-panels/Photo.vue   | 24 +++---
 resources/js/views/gallery-panels/Search.vue  | 13 ++--
 81 files changed, 396 insertions(+), 314 deletions(-)
 create mode 100644 resources/js/composables/album/scrollable.ts
 create mode 100644 resources/js/stores/ModalsState.ts

diff --git a/resources/js/components/diagnostics/ConfigurationsDiagnostics.vue b/resources/js/components/diagnostics/ConfigurationsDiagnostics.vue
index ff4db3a6a18..0a3d7ca1e09 100644
--- a/resources/js/components/diagnostics/ConfigurationsDiagnostics.vue
+++ b/resources/js/components/diagnostics/ConfigurationsDiagnostics.vue
@@ -9,7 +9,7 @@ import { ref } from "vue";
 import Panel from "primevue/panel";
 import DiagnosticsService from "@/services/diagnostics-service";
 
-const configs = ref(undefined as string[] | undefined);
+const configs = ref<string[] | undefined>(undefined);
 
 function load() {
 	DiagnosticsService.config().then((response) => {
diff --git a/resources/js/components/diagnostics/ErrorsDiagnostics.vue b/resources/js/components/diagnostics/ErrorsDiagnostics.vue
index e64581967c6..9e233012fc3 100644
--- a/resources/js/components/diagnostics/ErrorsDiagnostics.vue
+++ b/resources/js/components/diagnostics/ErrorsDiagnostics.vue
@@ -12,7 +12,7 @@ import { ref } from "vue";
 import Panel from "primevue/panel";
 import DiagnosticsService from "@/services/diagnostics-service";
 
-const errors = ref(undefined as App.Http.Resources.Diagnostics.ErrorLine[] | undefined);
+const errors = ref<App.Http.Resources.Diagnostics.ErrorLine[] | undefined>(undefined);
 
 function load() {
 	DiagnosticsService.errors().then((response) => {
diff --git a/resources/js/components/diagnostics/InfoDiagnostics.vue b/resources/js/components/diagnostics/InfoDiagnostics.vue
index 913f5f0aa64..4e1e3a39914 100644
--- a/resources/js/components/diagnostics/InfoDiagnostics.vue
+++ b/resources/js/components/diagnostics/InfoDiagnostics.vue
@@ -9,7 +9,7 @@ import { ref } from "vue";
 import Panel from "primevue/panel";
 import DiagnosticsService from "@/services/diagnostics-service";
 
-const infos = ref(undefined as string[] | undefined);
+const infos = ref<string[] | undefined>(undefined);
 
 function load() {
 	DiagnosticsService.info().then((response) => {
diff --git a/resources/js/components/diagnostics/SpaceDiagnostics.vue b/resources/js/components/diagnostics/SpaceDiagnostics.vue
index 643b68999a7..8d9e69f46a2 100644
--- a/resources/js/components/diagnostics/SpaceDiagnostics.vue
+++ b/resources/js/components/diagnostics/SpaceDiagnostics.vue
@@ -13,7 +13,7 @@ import Panel from "primevue/panel";
 import DiagnosticsService from "@/services/diagnostics-service";
 
 const requested = ref(false);
-const space = ref(undefined as string[] | undefined);
+const space = ref<string[] | undefined>(undefined);
 
 function load() {
 	requested.value = true;
diff --git a/resources/js/components/drawers/AlbumEdit.vue b/resources/js/components/drawers/AlbumEdit.vue
index 481fba697d8..37d1acb9fca 100644
--- a/resources/js/components/drawers/AlbumEdit.vue
+++ b/resources/js/components/drawers/AlbumEdit.vue
@@ -78,18 +78,16 @@ import AlbumDelete from "@/components/forms/album/AlbumDelete.vue";
 import AlbumMove from "../forms/album/AlbumMove.vue";
 import AlbumTransfer from "../forms/album/AlbumTransfer.vue";
 import AlbumShare from "../forms/album/AlbumShare.vue";
-import { useLycheeStateStore } from "@/stores/LycheeState";
 import { storeToRefs } from "pinia";
+import { useTogglablesStateStore } from "@/stores/ModalsState";
 
 const props = defineProps<{
 	album: App.Http.Resources.Models.AlbumResource | App.Http.Resources.Models.SmartAlbumResource | App.Http.Resources.Models.TagAlbumResource;
 	config: App.Http.Resources.GalleryConfigs.AlbumConfig;
 }>();
 
-const lycheeStore = useLycheeStateStore();
-lycheeStore.init();
-
-const { are_details_open } = storeToRefs(lycheeStore);
+const togglableStore = useTogglablesStateStore();
+const { are_details_open } = storeToRefs(togglableStore);
 
 const activeTab = ref(0);
 const numUsers = ref(0);
diff --git a/resources/js/components/drawers/AlbumStatistics.vue b/resources/js/components/drawers/AlbumStatistics.vue
index fbf5cd3c27b..f6dd2c81885 100644
--- a/resources/js/components/drawers/AlbumStatistics.vue
+++ b/resources/js/components/drawers/AlbumStatistics.vue
@@ -88,9 +88,9 @@ const props = defineProps<{
 const { getStatistics } = useAlbumsStatistics();
 
 const photosData = ref(getStatistics(props.photos));
-const totalAlbumSpace = ref(undefined as undefined | App.Http.Resources.Statistics.Album);
+const totalAlbumSpace = ref<App.Http.Resources.Statistics.Album | undefined>(undefined);
 
-const total = ref(undefined as undefined | TotalAlbum);
+const total = ref<TotalAlbum | undefined>(undefined);
 
 if (props.config.is_model_album) {
 	StatisticsService.getTotalAlbumSpace(props.album.id).then((response) => {
diff --git a/resources/js/components/drawers/PhotoEdit.vue b/resources/js/components/drawers/PhotoEdit.vue
index 6d9ea2e9817..8911dbe9685 100644
--- a/resources/js/components/drawers/PhotoEdit.vue
+++ b/resources/js/components/drawers/PhotoEdit.vue
@@ -82,13 +82,13 @@ const props = defineProps<{
 const toast = useToast();
 const isEditOpen = defineModel("isEditOpen", { default: false }) as Ref<boolean>;
 
-const photo_id = ref(undefined as string | undefined);
-const title = ref(undefined as string | undefined);
-const description = ref(undefined as string | undefined);
-const uploadDate = ref(undefined as Date | undefined);
-const tags = ref([] as string[]);
-const license = ref(undefined as SelectOption<App.Enum.LicenseType> | undefined);
-const uploadTz = ref(undefined as string | undefined);
+const photo_id = ref<string | undefined>(undefined);
+const title = ref<string | undefined>(undefined);
+const description = ref<string | undefined>(undefined);
+const uploadDate = ref<Date | undefined>(undefined);
+const tags = ref<string[]>([]);
+const license = ref<SelectOption<App.Enum.LicenseType> | undefined>(undefined);
+const uploadTz = ref<string | undefined>(undefined);
 
 // TODO: updating exif data later
 
diff --git a/resources/js/components/forms/album/AlbumCreateDialog.vue b/resources/js/components/forms/album/AlbumCreateDialog.vue
index 21af97ddfd5..a724e5b9683 100644
--- a/resources/js/components/forms/album/AlbumCreateDialog.vue
+++ b/resources/js/components/forms/album/AlbumCreateDialog.vue
@@ -1,5 +1,11 @@
 <template>
-	<Dialog v-model:visible="visible" pt:root:class="border-none" modal :dismissable-mask="true">
+	<Dialog
+		v-model:visible="is_create_album_visible"
+		pt:root:class="border-none"
+		modal
+		:dismissable-mask="true"
+		@close="is_create_album_visible = false"
+	>
 		<template #container="{ closeCallback }">
 			<div v-focustrap class="flex flex-col relative max-w-full text-sm rounded-md pt-9">
 				<p class="mb-5 px-9">{{ $t("lychee.TITLE_NEW_ALBUM") }}</p>
@@ -30,18 +36,22 @@ import { useRouter } from "vue-router";
 import FloatLabel from "primevue/floatlabel";
 import Button from "primevue/button";
 import { useToast } from "primevue/usetoast";
+import { useTogglablesStateStore } from "@/stores/ModalsState";
+import { storeToRefs } from "pinia";
 
 const props = defineProps<{
 	parentId: string | null;
 }>();
 
-const visible = defineModel("visible", { default: false });
+const togglableStore = useTogglablesStateStore();
+const { is_create_album_visible } = storeToRefs(togglableStore);
+
 const parentId = ref(props.parentId);
 
 const toast = useToast();
 const router = useRouter();
 
-const title = ref(undefined as undefined | string);
+const title = ref<string | undefined>(undefined);
 
 const isValid = computed(() => title.value !== undefined && title.value.length > 0 && title.value.length <= 100);
 
@@ -56,7 +66,7 @@ function create() {
 	})
 		.then((response) => {
 			title.value = undefined;
-			visible.value = false;
+			is_create_album_visible.value = false;
 			AlbumService.clearCache(parentId.value);
 			router.push(`/gallery/${response.data}`);
 		})
diff --git a/resources/js/components/forms/album/AlbumCreateTagDialog.vue b/resources/js/components/forms/album/AlbumCreateTagDialog.vue
index d030506ba36..1cd0300971a 100644
--- a/resources/js/components/forms/album/AlbumCreateTagDialog.vue
+++ b/resources/js/components/forms/album/AlbumCreateTagDialog.vue
@@ -1,5 +1,11 @@
 <template>
-	<Dialog v-model:visible="visible" pt:root:class="border-none" modal :dismissable-mask="true">
+	<Dialog
+		v-model:visible="is_create_tag_album_visible"
+		pt:root:class="border-none"
+		modal
+		:dismissable-mask="true"
+		@close="is_create_tag_album_visible = false"
+	>
 		<template #container="{ closeCallback }">
 			<div v-focustrap class="flex flex-col relative max-w-full text-sm rounded-md pt-9">
 				<p class="mb-5 px-9">{{ $t("lychee.NEW_TAG_ALBUM") }}</p>
@@ -42,17 +48,17 @@ 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;
-}>();
+import { useTogglablesStateStore } from "@/stores/ModalsState";
+import { storeToRefs } from "pinia";
 
 const toast = useToast();
 const router = useRouter();
-const visible = ref(props.visible);
 
-const title = ref(undefined as undefined | string);
-const tags = ref([] as string[]);
+const togglableStore = useTogglablesStateStore();
+const { is_create_tag_album_visible } = storeToRefs(togglableStore);
+
+const title = ref<string | undefined>(undefined);
+const tags = ref<string[]>([]);
 
 const isValid = computed(() => title.value !== undefined && title.value.length > 0 && title.value.length <= 100);
 
@@ -73,13 +79,6 @@ function create() {
 			toast.add({ severity: "error", summary: "Oups", detail: error.message });
 		});
 }
-
-watch(
-	() => props.visible,
-	(newVisible, _oldVisible) => {
-		visible.value = newVisible;
-	},
-);
 </script>
 <style lang="css">
 .p-inputchips-input {
diff --git a/resources/js/components/forms/album/AlbumMove.vue b/resources/js/components/forms/album/AlbumMove.vue
index 7f1feb1c23f..77bdf4979fe 100644
--- a/resources/js/components/forms/album/AlbumMove.vue
+++ b/resources/js/components/forms/album/AlbumMove.vue
@@ -34,8 +34,8 @@ const props = defineProps<{
 
 const toast = useToast();
 const router = useRouter();
-const titleMovedTo = ref(undefined as string | undefined);
-const destination_id = ref(undefined as string | undefined | null);
+const titleMovedTo = ref<string | undefined>(undefined);
+const destination_id = ref<string | undefined | null>(undefined);
 const confirmation = computed(() => sprintf(trans("lychee.ALBUM_MOVE"), props.album.title, titleMovedTo.value));
 const error_no_target = ref(false);
 
diff --git a/resources/js/components/forms/album/AlbumProperties.vue b/resources/js/components/forms/album/AlbumProperties.vue
index daf2ad4f4ca..eff5d46e6c0 100644
--- a/resources/js/components/forms/album/AlbumProperties.vue
+++ b/resources/js/components/forms/album/AlbumProperties.vue
@@ -264,17 +264,17 @@ const toast = useToast();
 const is_model_album = ref(true);
 const albumId = ref("");
 const title = ref("");
-const description = ref(null as null | string);
-const photoSortingColumn = ref(undefined as SelectOption<App.Enum.ColumnSortingPhotoType> | undefined);
-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[]);
-const aspectRatio = ref(undefined as SelectOption<App.Enum.AspectRatioType> | undefined);
-const header_id = ref(undefined as HeaderOption | undefined);
+const description = ref<string | null>(null);
+const photoSortingColumn = ref<SelectOption<App.Enum.ColumnSortingPhotoType> | undefined>(undefined);
+const photoSortingOrder = ref<SelectOption<App.Enum.OrderSortingType> | undefined>(undefined);
+const albumSortingColumn = ref<SelectOption<App.Enum.ColumnSortingAlbumType> | undefined>(undefined);
+const albumSortingOrder = ref<SelectOption<App.Enum.OrderSortingType> | undefined>(undefined);
+const photoLayout = ref<SelectOption<App.Enum.PhotoLayoutType> | undefined>(undefined);
+const license = ref<SelectOption<App.Enum.LicenseType> | undefined>(undefined);
+const copyright = ref<string | undefined>(undefined);
+const tags = ref<string[]>([]);
+const aspectRatio = ref<SelectOption<App.Enum.AspectRatioType> | undefined>(undefined);
+const header_id = ref<HeaderOption | undefined>(undefined);
 
 const headersOptions = computed(() => {
 	const list: HeaderOption[] = [
diff --git a/resources/js/components/forms/album/AlbumShare.vue b/resources/js/components/forms/album/AlbumShare.vue
index 9692db199c6..478a45659e6 100644
--- a/resources/js/components/forms/album/AlbumShare.vue
+++ b/resources/js/components/forms/album/AlbumShare.vue
@@ -36,7 +36,7 @@ const props = defineProps<{
 
 const toast = useToast();
 
-const perms = ref(undefined as undefined | App.Http.Resources.Models.AccessPermissionResource[]);
+const perms = ref<App.Http.Resources.Models.AccessPermissionResource[] | undefined>(undefined);
 
 function load() {
 	SharingService.get(props.album.id).then((response) => {
diff --git a/resources/js/components/forms/album/AlbumTransfer.vue b/resources/js/components/forms/album/AlbumTransfer.vue
index 670e0676c44..dc571f23bfc 100644
--- a/resources/js/components/forms/album/AlbumTransfer.vue
+++ b/resources/js/components/forms/album/AlbumTransfer.vue
@@ -33,7 +33,7 @@ const props = defineProps<{
 }>();
 
 const router = useRouter();
-const newOwner = ref(undefined as undefined | App.Http.Resources.Models.LightUserResource);
+const newOwner = ref<App.Http.Resources.Models.LightUserResource | undefined>(undefined);
 const confirmation = computed(() =>
 	sprintf(
 		"Are you sure you want to transfer to %s the ownership of album “%s” and all the photos it contains? Your access to this album will be lost.",
diff --git a/resources/js/components/forms/album/SearchTargetAlbum.vue b/resources/js/components/forms/album/SearchTargetAlbum.vue
index c456944015b..d643aaa23f2 100644
--- a/resources/js/components/forms/album/SearchTargetAlbum.vue
+++ b/resources/js/components/forms/album/SearchTargetAlbum.vue
@@ -33,14 +33,14 @@ const props = defineProps<{
 	albumId: string | undefined;
 }>();
 
-const albumId = ref(props.albumId ?? (null as string | null));
+const albumId = ref<string | null>(props.albumId ?? null);
 const emits = defineEmits<{
 	selected: [target: App.Http.Resources.Models.TargetAlbumResource];
 	"no-target": [];
 }>();
 
-const options = ref(undefined as undefined | App.Http.Resources.Models.TargetAlbumResource[]);
-const selectedTarget = ref(undefined as App.Http.Resources.Models.TargetAlbumResource | undefined);
+const options = ref<App.Http.Resources.Models.TargetAlbumResource[] | undefined>(undefined);
+const selectedTarget = ref<App.Http.Resources.Models.TargetAlbumResource | undefined>(undefined);
 
 function load() {
 	AlbumService.getTargetListAlbums(albumId.value).then((response) => {
diff --git a/resources/js/components/forms/album/SearchTargetUser.vue b/resources/js/components/forms/album/SearchTargetUser.vue
index b13604fb2ea..fc06203117f 100644
--- a/resources/js/components/forms/album/SearchTargetUser.vue
+++ b/resources/js/components/forms/album/SearchTargetUser.vue
@@ -42,9 +42,9 @@ const emits = defineEmits<{
 	"no-target": [];
 }>();
 
-const options = ref(undefined as undefined | App.Http.Resources.Models.LightUserResource[]);
-const selectedTarget = ref(undefined as App.Http.Resources.Models.LightUserResource | undefined);
-const userList = ref(undefined as App.Http.Resources.Models.LightUserResource[] | undefined);
+const options = ref<App.Http.Resources.Models.LightUserResource[] | undefined>(undefined);
+const selectedTarget = ref<App.Http.Resources.Models.LightUserResource | undefined>(undefined);
+const userList = ref<App.Http.Resources.Models.LightUserResource[] | undefined>(undefined);
 
 function load() {
 	UsersService.get().then((response) => {
diff --git a/resources/js/components/forms/gallery-dialogs/AlbumMergeDialog.vue b/resources/js/components/forms/gallery-dialogs/AlbumMergeDialog.vue
index e4250a849d2..4a704a657af 100644
--- a/resources/js/components/forms/gallery-dialogs/AlbumMergeDialog.vue
+++ b/resources/js/components/forms/gallery-dialogs/AlbumMergeDialog.vue
@@ -55,8 +55,8 @@ const emits = defineEmits<{
 }>();
 
 const toast = useToast();
-const titleMovedTo = ref(undefined as string | undefined);
-const destination_id = ref(undefined as string | undefined | null);
+const titleMovedTo = ref<string | undefined>(undefined);
+const destination_id = ref<string | undefined | null>(undefined);
 const error_no_target = ref(false);
 const confirmation = computed(() => {
 	if (props.album) {
diff --git a/resources/js/components/forms/gallery-dialogs/MoveDialog.vue b/resources/js/components/forms/gallery-dialogs/MoveDialog.vue
index 82aaf7ee4f9..b4188c6a6b2 100644
--- a/resources/js/components/forms/gallery-dialogs/MoveDialog.vue
+++ b/resources/js/components/forms/gallery-dialogs/MoveDialog.vue
@@ -55,8 +55,8 @@ const emits = defineEmits<{
 }>();
 
 const toast = useToast();
-const titleMovedTo = ref(undefined as string | undefined);
-const destination_id = ref(undefined as string | undefined | null);
+const titleMovedTo = ref<string | undefined>(undefined);
+const destination_id = ref<string | undefined | null>(undefined);
 const error_no_target = ref(false);
 
 function selected(target: App.Http.Resources.Models.TargetAlbumResource) {
diff --git a/resources/js/components/forms/gallery-dialogs/RenameDialog.vue b/resources/js/components/forms/gallery-dialogs/RenameDialog.vue
index 41e9c6d88f0..07bc06b0f13 100644
--- a/resources/js/components/forms/gallery-dialogs/RenameDialog.vue
+++ b/resources/js/components/forms/gallery-dialogs/RenameDialog.vue
@@ -42,7 +42,7 @@ const emits = defineEmits<{
 	updated: [];
 }>();
 
-const title = ref(undefined as undefined | string);
+const title = ref<string | undefined>(undefined);
 
 const question = computed(() => {
 	if (props.photo) {
diff --git a/resources/js/components/forms/photo/PhotoCopyDialog.vue b/resources/js/components/forms/photo/PhotoCopyDialog.vue
index 0f9f5e455ee..4ff4c3a578f 100644
--- a/resources/js/components/forms/photo/PhotoCopyDialog.vue
+++ b/resources/js/components/forms/photo/PhotoCopyDialog.vue
@@ -52,8 +52,8 @@ const emits = defineEmits<{
 }>();
 
 const toast = useToast();
-const titleCopyTo = ref(undefined as string | undefined);
-const destination_id = ref(undefined as string | undefined | null);
+const titleCopyTo = ref<string | undefined>(undefined);
+const destination_id = ref<string | undefined | null>(undefined);
 const error_no_target = ref(false);
 
 function selected(target: App.Http.Resources.Models.TargetAlbumResource) {
diff --git a/resources/js/components/forms/photo/PhotoTagDialog.vue b/resources/js/components/forms/photo/PhotoTagDialog.vue
index 10ceecfea01..d339044e630 100644
--- a/resources/js/components/forms/photo/PhotoTagDialog.vue
+++ b/resources/js/components/forms/photo/PhotoTagDialog.vue
@@ -66,7 +66,7 @@ const question = computed(() => {
 });
 
 const shallOverride = ref(false);
-const tags = ref([] as string[]);
+const tags = ref<string[]>([]);
 
 function close() {
 	visible.value = false;
diff --git a/resources/js/components/forms/profile/ApiToken.vue b/resources/js/components/forms/profile/ApiToken.vue
index acdd5b00dc5..9f67f0021c0 100644
--- a/resources/js/components/forms/profile/ApiToken.vue
+++ b/resources/js/components/forms/profile/ApiToken.vue
@@ -65,7 +65,7 @@ import { useToast } from "primevue/usetoast";
 const visible = defineModel<boolean>();
 
 const isDisabled = ref(true);
-const token = ref(undefined as undefined | string);
+const token = ref<string | undefined>(undefined);
 const tokenText = ref("");
 const toast = useToast();
 
diff --git a/resources/js/components/forms/profile/SetLogin.vue b/resources/js/components/forms/profile/SetLogin.vue
index 53ad8d996e7..c8e16a349d6 100644
--- a/resources/js/components/forms/profile/SetLogin.vue
+++ b/resources/js/components/forms/profile/SetLogin.vue
@@ -74,12 +74,12 @@ import { trans } from "laravel-vue-i18n";
 
 const isApiTokenOpen = ref(false);
 
-const user = ref(undefined as undefined | App.Http.Resources.Models.UserResource);
-const oldPassword = ref(undefined as undefined | string);
-const username = ref(undefined as undefined | string);
-const password = ref(undefined as undefined | string);
-const password_confirmation = ref(undefined as undefined | string);
-const email = ref(undefined as undefined | string);
+const user = ref<App.Http.Resources.Models.UserResource | undefined>(undefined);
+const oldPassword = ref<string | undefined>(undefined);
+const username = ref<string | undefined>(undefined);
+const password = ref<string | undefined>(undefined);
+const password_confirmation = ref<string | undefined>(undefined);
+const email = ref<string | undefined>(undefined);
 
 const loginTitle = computed(() => trans("lychee.PROFILE"));
 
diff --git a/resources/js/components/forms/profile/SetOauth.vue b/resources/js/components/forms/profile/SetOauth.vue
index 1339db98435..88e9fa17fbd 100644
--- a/resources/js/components/forms/profile/SetOauth.vue
+++ b/resources/js/components/forms/profile/SetOauth.vue
@@ -39,7 +39,7 @@ type OauthData = {
 	icon: string;
 };
 
-const oauths = ref(undefined as undefined | OauthData[]);
+const oauths = ref<OauthData[] | undefined>(undefined);
 const title = computed(() => {
 	if (oauths.value === undefined) {
 		return trans("lychee.LOADING");
diff --git a/resources/js/components/forms/profile/SetSecondFactor.vue b/resources/js/components/forms/profile/SetSecondFactor.vue
index f78aa2a82d0..6d9a4cc10e9 100644
--- a/resources/js/components/forms/profile/SetSecondFactor.vue
+++ b/resources/js/components/forms/profile/SetSecondFactor.vue
@@ -31,7 +31,7 @@ import { trans } from "laravel-vue-i18n";
 import Button from "primevue/button";
 import Fieldset from "primevue/fieldset";
 
-const u2f = ref(undefined as App.Http.Resources.Models.WebAuthnResource[] | undefined);
+const u2f = ref<App.Http.Resources.Models.WebAuthnResource[] | undefined>(undefined);
 const toast = useToast();
 
 const isWebAuthnUnavailable = computed(() => WebAuthnService.isWebAuthnUnavailable());
diff --git a/resources/js/components/forms/settings/BoolField.vue b/resources/js/components/forms/settings/BoolField.vue
index 88073f18755..11b598e9fc0 100644
--- a/resources/js/components/forms/settings/BoolField.vue
+++ b/resources/js/components/forms/settings/BoolField.vue
@@ -26,7 +26,7 @@ const props = defineProps<{
 	config: App.Http.Resources.Models.ConfigResource;
 }>();
 
-const val = ref((props.config.value === "1") as boolean);
+const val = ref<boolean>(props.config.value === "1");
 
 const changed = computed(() => val.value !== (props.config.value === "1"));
 
diff --git a/resources/js/components/forms/settings/NumberField.vue b/resources/js/components/forms/settings/NumberField.vue
index afa04c1de17..7c7a0efd0f7 100644
--- a/resources/js/components/forms/settings/NumberField.vue
+++ b/resources/js/components/forms/settings/NumberField.vue
@@ -37,7 +37,7 @@ const props = defineProps<{
 	config: App.Http.Resources.Models.ConfigResource;
 }>();
 
-const val = ref(Number(props.config.value));
+const val = ref<number>(Number(props.config.value));
 
 const changed = computed(() => val.value !== Number(props.config.value));
 
diff --git a/resources/js/components/forms/settings/OldField.vue b/resources/js/components/forms/settings/OldField.vue
index c099d12a19d..40e72cfbdd8 100644
--- a/resources/js/components/forms/settings/OldField.vue
+++ b/resources/js/components/forms/settings/OldField.vue
@@ -24,7 +24,7 @@ const props = defineProps<{
 	config: App.Http.Resources.Models.ConfigResource;
 }>();
 
-const val = ref(props.config.value as string);
+const val = ref<string>(props.config.value);
 
 const changed = computed(() => val.value !== props.config.value);
 const isVersion = computed(() => props.config.key === "version");
diff --git a/resources/js/components/forms/settings/SelectLang.vue b/resources/js/components/forms/settings/SelectLang.vue
index 09f86982141..5e9b7b68596 100644
--- a/resources/js/components/forms/settings/SelectLang.vue
+++ b/resources/js/components/forms/settings/SelectLang.vue
@@ -21,7 +21,7 @@ type Props = {
 const props = defineProps<Props>();
 
 const val = ref(props.config.value);
-const options = ref([] as string[]);
+const options = ref<string[]>([]);
 
 const changed = computed(() => val.value !== props.config.value);
 
diff --git a/resources/js/components/forms/settings/SliderField.vue b/resources/js/components/forms/settings/SliderField.vue
index 0a33369d7db..11f2f49fa85 100644
--- a/resources/js/components/forms/settings/SliderField.vue
+++ b/resources/js/components/forms/settings/SliderField.vue
@@ -13,7 +13,7 @@ const props = defineProps<{
 	config: App.Http.Resources.Models.ConfigResource;
 }>();
 
-const val = ref(props.config.value as string);
+const val = ref<string>(props.config.value);
 const options = ref(props.config.type.split("|"));
 
 const changed = computed(() => val.value !== props.config.value);
diff --git a/resources/js/components/forms/settings/StringField.vue b/resources/js/components/forms/settings/StringField.vue
index 6532ca3592b..752f6f4cc2a 100644
--- a/resources/js/components/forms/settings/StringField.vue
+++ b/resources/js/components/forms/settings/StringField.vue
@@ -30,7 +30,7 @@ const props = defineProps<{
 	config: App.Http.Resources.Models.ConfigResource;
 }>();
 
-const val = ref(props.config.value as string);
+const val = ref<string>(props.config.value);
 
 const changed = computed(() => val.value !== props.config.value);
 
diff --git a/resources/js/components/forms/settings/ZipSliderField.vue b/resources/js/components/forms/settings/ZipSliderField.vue
index 3521a7ab8f3..3a3340da8e7 100644
--- a/resources/js/components/forms/settings/ZipSliderField.vue
+++ b/resources/js/components/forms/settings/ZipSliderField.vue
@@ -20,7 +20,7 @@ const props = defineProps<{
 	config: App.Http.Resources.Models.ConfigResource;
 }>();
 
-const val = ref(props.config.value as string);
+const val = ref<string>(props.config.value);
 const options = ref(props.config.type.split("|"));
 
 const changed = computed(() => val.value !== props.config.value);
diff --git a/resources/js/components/forms/sharing/CreateSharing.vue b/resources/js/components/forms/sharing/CreateSharing.vue
index 96e2740a8ae..1c88670089e 100644
--- a/resources/js/components/forms/sharing/CreateSharing.vue
+++ b/resources/js/components/forms/sharing/CreateSharing.vue
@@ -45,7 +45,7 @@ const emits = defineEmits<{
 	createdPermission: [];
 }>();
 
-const newShareUser = ref(undefined as undefined | App.Http.Resources.Models.LightUserResource);
+const newShareUser = ref<App.Http.Resources.Models.LightUserResource | undefined>(undefined);
 const grantsFullPhotoAccess = ref(false);
 const grantsDownload = ref(false);
 const grantsUpload = ref(false);
diff --git a/resources/js/components/forms/upload/UploadingLine.vue b/resources/js/components/forms/upload/UploadingLine.vue
index 1d766b9e652..46fcef5c680 100644
--- a/resources/js/components/forms/upload/UploadingLine.vue
+++ b/resources/js/components/forms/upload/UploadingLine.vue
@@ -49,7 +49,7 @@ const meta = ref({
 	total_chunks: Math.ceil(size.value / props.chunkSize),
 } as App.Http.Resources.Editable.UploadMetaResource);
 const controller = ref(new AbortController());
-const errorMessage = ref(undefined as string | undefined);
+const errorMessage = ref<string | undefined>(undefined);
 
 // prettier-ignore
 const statusMessage = computed(() => {
diff --git a/resources/js/components/forms/users/CreateEditUser.vue b/resources/js/components/forms/users/CreateEditUser.vue
index f886af0369b..ad077a2c8bd 100644
--- a/resources/js/components/forms/users/CreateEditUser.vue
+++ b/resources/js/components/forms/users/CreateEditUser.vue
@@ -82,10 +82,10 @@ const props = defineProps<{
 	isEdit: boolean;
 }>();
 
-const id = ref(props.user?.id);
-const username = ref(props.user?.username);
-const note = ref(props.user?.note ?? undefined);
-const password = ref(undefined as string | undefined);
+const id = ref<number | undefined>(props.user?.id);
+const username = ref<string | undefined>(props.user?.username);
+const note = ref<string | undefined>(props.user?.note ?? undefined);
+const password = ref<string | undefined>(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);
diff --git a/resources/js/components/gallery/thumbs/AlbumThumb.vue b/resources/js/components/gallery/thumbs/AlbumThumb.vue
index 0c09f8ea46e..b179ca5dd65 100644
--- a/resources/js/components/gallery/thumbs/AlbumThumb.vue
+++ b/resources/js/components/gallery/thumbs/AlbumThumb.vue
@@ -25,7 +25,7 @@
 		/>
 		<AlbumThumbOverlay v-if="props.config.display_thumb_album_overlay !== 'never'" :album="props.album" :config="props.config" />
 		<span v-if="album.thumb?.type.includes('video')" class="w-full h-full absolute hover:opacity-70 transition-opacity duration-300">
-			<img class="h-full w-full" alt="play" :src="play_icon" />
+			<img class="h-full w-full" alt="play" :src="getPlayIcon()" />
 		</span>
 		<div v-if="user?.id !== null" class="badges absolute mt-[-1px] ml-1 top-0 left-0">
 			<ThumbBadge v-if="props.album.is_nsfw" class="bg-[#ff82ee]" icon="warning" />
@@ -53,6 +53,7 @@ import AlbumThumbOverlay from "./AlbumThumbOverlay.vue";
 import AlbumThumbDecorations from "./AlbumThumbDecorations.vue";
 import { storeToRefs } from "pinia";
 import Constants from "@/services/constants";
+import { useImageHelpers } from "@/utils/Helpers";
 
 export type AlbumThumbConfig = {
 	album_thumb_css_aspect_ratio: string;
@@ -71,6 +72,7 @@ const props = defineProps<{
 
 const auth = useAuthStore();
 const lycheeStore = useLycheeStateStore();
+const { getPlayIcon } = useImageHelpers();
 const { user } = storeToRefs(auth);
 
 const cssClass = computed(() => {
@@ -85,6 +87,4 @@ const linkClass = computed(
 	() => props.config.album_thumb_css_aspect_ratio + (lycheeStore.is_nsfw_background_blurred && props.album.is_nsfw ? " blurred" : ""),
 );
 auth.getUser();
-
-const play_icon = ref(Constants.BASE_URL + "/img/play-icon.png");
 </script>
diff --git a/resources/js/components/headers/AlbumHeader.vue b/resources/js/components/headers/AlbumHeader.vue
index e38f1622e29..0c914330f12 100644
--- a/resources/js/components/headers/AlbumHeader.vue
+++ b/resources/js/components/headers/AlbumHeader.vue
@@ -1,14 +1,6 @@
 <template>
-	<UploadPanel v-if="canUpload" @refresh="refresh" key="upload_modal" />
 	<DropBox v-if="canUpload" v-model:visible="isImportFromDropboxOpen" :album-id="props.album.id" />
 	<ImportFromLink v-if="canUpload" v-model:visible="isImportFromLinkOpen" :parent-id="props.album.id" @refresh="refresh" />
-	<AlbumCreateDialog
-		v-if="canUpload && props.config.is_model_album"
-		v-model:visible="isCreateAlbumOpen"
-		v-model:parent-id="props.album.id"
-		@close="isCreateAlbumOpen = false"
-		key="create_album_modal"
-	/>
 	<Toolbar class="w-full border-0 h-14" v-if="album">
 		<template #start>
 			<Button icon="pi pi-angle-left" class="mr-2 border-none" severity="secondary" text @click="goBack" />
@@ -73,9 +65,8 @@
 <script setup lang="ts">
 import Button from "primevue/button";
 import Toolbar from "primevue/toolbar";
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import { useRouter } from "vue-router";
-import UploadPanel from "@/components/modals/UploadPanel.vue";
 import { onKeyStroke } from "@vueuse/core";
 import AlbumCreateDialog from "@/components/forms/album/AlbumCreateDialog.vue";
 import ContextMenu from "primevue/contextmenu";
@@ -88,6 +79,7 @@ import { useLycheeStateStore } from "@/stores/LycheeState";
 import { storeToRefs } from "pinia";
 import AlbumService from "@/services/album-service";
 import DropBox from "../modals/DropBox.vue";
+import { useTogglablesStateStore } from "@/stores/ModalsState";
 
 const props = defineProps<{
 	config: App.Http.Resources.GalleryConfigs.AlbumConfig;
@@ -96,31 +88,16 @@ const props = defineProps<{
 }>();
 
 const toggleDetails = () => (are_details_open.value = !are_details_open.value);
+const togglableStore = useTogglablesStateStore();
 const lycheeStore = useLycheeStateStore();
 lycheeStore.init();
-const { are_details_open, is_login_open, dropbox_api_key, is_upload_visible } = storeToRefs(lycheeStore);
+const { dropbox_api_key } = storeToRefs(lycheeStore);
+const { are_details_open, is_login_open, is_upload_visible, is_create_album_visible } = storeToRefs(togglableStore);
 
 const hasCoordinates = computed(() => props.album.photos.find((photo) => photo.latitude !== null && photo.longitude !== null) !== undefined);
 
-const {
-	isCreateAlbumOpen,
-	toggleCreateAlbum,
-	isDeleteVisible,
-	toggleDelete,
-	isMergeAlbumVisible,
-	toggleMergeAlbum,
-	isMoveVisible,
-	toggleMove,
-	isRenameVisible,
-	toggleRename,
-	isShareAlbumVisible,
-	toggleShareAlbum,
-	isImportFromLinkOpen,
-	toggleImportFromLink,
-	isImportFromDropboxOpen,
-	toggleImportFromDropbox,
-	toggleUpload,
-} = useGalleryModals(is_upload_visible);
+const { toggleCreateAlbum, isImportFromLinkOpen, toggleImportFromLink, isImportFromDropboxOpen, toggleImportFromDropbox, toggleUpload } =
+	useGalleryModals(togglableStore);
 
 const emits = defineEmits<{
 	refresh: [];
@@ -182,7 +159,7 @@ function refresh() {
 	emits("refresh");
 }
 
-onKeyStroke("n", () => !shouldIgnoreKeystroke() && (isCreateAlbumOpen.value = true));
+onKeyStroke("n", () => !shouldIgnoreKeystroke() && (is_create_album_visible.value = true));
 onKeyStroke("u", () => !shouldIgnoreKeystroke() && (is_upload_visible.value = true));
 onKeyStroke("i", () => !shouldIgnoreKeystroke() && toggleDetails());
 onKeyStroke("l", () => !shouldIgnoreKeystroke() && props.user.id === null && (is_login_open.value = true));
diff --git a/resources/js/components/headers/AlbumsHeader.vue b/resources/js/components/headers/AlbumsHeader.vue
index a26a29965d5..98d2bb91edb 100644
--- a/resources/js/components/headers/AlbumsHeader.vue
+++ b/resources/js/components/headers/AlbumsHeader.vue
@@ -1,12 +1,9 @@
 <template>
 	<LoginModal v-if="props.user.id === null" v-model:visible="is_login_open" @logged-in="refresh" @open-webauthn="isWebAuthnOpen = true" />
 	<WebauthnModal v-if="props.user.id === null && !isWebAuthnUnavailable" v-model:visible="isWebAuthnOpen" @logged-in="refresh" />
-	<UploadPanel v-if="canUpload" @refresh="refresh" key="upload_modal" />
 	<ImportFromServer v-if="canUpload" v-model:visible="isImportFromServerOpen" />
 	<ImportFromLink v-if="canUpload" v-model:visible="isImportFromLinkOpen" :parent-id="null" />
 	<DropBox v-if="canUpload" v-model:visible="isImportFromDropboxOpen" :album-id="null" />
-	<AlbumCreateDialog v-if="canUpload" v-model:visible="isCreateAlbumOpen" :parent-id="null" key="create_album_modal" />
-	<AlbumCreateTagDialog v-if="canUpload" v-model:visible="isCreateTagAlbumOpen" key="create_tag_album_modal" />
 	<Toolbar
 		class="w-full border-0 h-14"
 		:pt:root:class="'flex-nowrap relative'"
@@ -21,7 +18,7 @@
 				class="border-none"
 				severity="secondary"
 				text
-				@click="lycheeStore.toggleLogin()"
+				@click="togglableStore.toggleLogin()"
 			/>
 			<!-- Logged in. -->
 			<OpenLeftMenu v-if="user.id" />
@@ -87,13 +84,10 @@ import Button from "primevue/button";
 import SpeedDial from "primevue/speeddial";
 import Toolbar from "primevue/toolbar";
 import ContextMenu from "primevue/contextmenu";
-import UploadPanel from "@/components/modals/UploadPanel.vue";
 import WebauthnModal from "@/components/modals/WebauthnModal.vue";
 import LoginModal from "@/components/modals/LoginModal.vue";
 import ImportFromLink from "@/components/modals/ImportFromLink.vue";
 import ImportFromServer from "@/components/modals/ImportFromServer.vue";
-import AlbumCreateDialog from "@/components/forms/album/AlbumCreateDialog.vue";
-import AlbumCreateTagDialog from "@/components/forms/album/AlbumCreateTagDialog.vue";
 import { computed, ComputedRef, ref } from "vue";
 import { onKeyStroke } from "@vueuse/core";
 import { useLycheeStateStore } from "@/stores/LycheeState";
@@ -107,6 +101,7 @@ import WebAuthnService from "@/services/webauthn-service";
 import { useRouter } from "vue-router";
 import DropBox from "../modals/DropBox.vue";
 import OpenLeftMenu from "./OpenLeftMenu.vue";
+import { useTogglablesStateStore } from "@/stores/ModalsState";
 
 const props = defineProps<{
 	user: App.Http.Resources.Models.UserResource;
@@ -138,13 +133,17 @@ const emits = defineEmits<{
 // 	'UPLOAD_TRACK' => 'Upload track',
 // 	'DELETE_TRACK' => 'Delete track',
 const lycheeStore = useLycheeStateStore();
-const { is_login_open, dropbox_api_key, is_upload_visible } = storeToRefs(lycheeStore);
+const togglableStore = useTogglablesStateStore();
+
+const { dropbox_api_key } = storeToRefs(lycheeStore);
+const { is_login_open, is_upload_visible, is_create_album_visible, is_create_tag_album_visible } = storeToRefs(togglableStore);
+
 const isWebAuthnOpen = ref(false);
 const router = useRouter();
 
 const {
-	isCreateAlbumOpen,
 	toggleCreateAlbum,
+	toggleCreateTagAlbum,
 	isDeleteVisible,
 	toggleDelete,
 	isMergeAlbumVisible,
@@ -160,14 +159,15 @@ const {
 	isImportFromDropboxOpen,
 	toggleImportFromDropbox,
 	toggleUpload,
-} = useGalleryModals(is_upload_visible);
+} = useGalleryModals(togglableStore);
 
-const { addmenu, addMenu, isImportFromServerOpen, isCreateTagAlbumOpen } = useContextMenuAlbumsAdd(
+const { addmenu, addMenu, isImportFromServerOpen } = useContextMenuAlbumsAdd(
 	{
 		toggleUpload: toggleUpload,
 		toggleCreateAlbum: toggleCreateAlbum,
 		toggleImportFromLink: toggleImportFromLink,
 		toggleImportFromDropbox: toggleImportFromDropbox,
+		toggleCreateTagAlbum: toggleCreateTagAlbum,
 	},
 	dropbox_api_key,
 );
@@ -189,7 +189,7 @@ function openSearch() {
 	router.push({ name: "search" });
 }
 
-onKeyStroke("n", () => !shouldIgnoreKeystroke() && props.rights.can_upload && (isCreateAlbumOpen.value = true));
+onKeyStroke("n", () => !shouldIgnoreKeystroke() && props.rights.can_upload && (is_create_album_visible.value = true));
 onKeyStroke("u", () => !shouldIgnoreKeystroke() && props.rights.can_upload && (is_upload_visible.value = true));
 onKeyStroke("l", () => !shouldIgnoreKeystroke() && props.user.id === null && (is_login_open.value = true));
 onKeyStroke("k", () => !shouldIgnoreKeystroke() && props.user.id === null && !isWebAuthnUnavailable.value && (isWebAuthnOpen.value = true));
@@ -216,12 +216,12 @@ onKeyStroke("escape", () => {
 		is_upload_visible.value = false;
 		return;
 	}
-	if (isCreateAlbumOpen.value) {
-		isCreateAlbumOpen.value = false;
+	if (is_create_album_visible.value) {
+		is_create_album_visible.value = false;
 		return;
 	}
-	if (isCreateTagAlbumOpen.value) {
-		isCreateTagAlbumOpen.value = false;
+	if (is_create_tag_album_visible.value) {
+		is_create_tag_album_visible.value = false;
 		return;
 	}
 	if (isImportFromServerOpen.value) {
@@ -229,7 +229,7 @@ onKeyStroke("escape", () => {
 		return;
 	}
 
-	lycheeStore.left_menu_open = false;
+	togglableStore.left_menu_open = false;
 });
 
 type Link = {
@@ -269,7 +269,7 @@ const menu = computed(() =>
 		{
 			icon: "pi pi-sign-in",
 			type: "fn",
-			callback: lycheeStore.toggleLogin,
+			callback: togglableStore.toggleLogin,
 			if: props.user.id === null && !isLoginLeft.value,
 		},
 		{
diff --git a/resources/js/components/headers/OpenLeftMenu.vue b/resources/js/components/headers/OpenLeftMenu.vue
index 670b4622554..db9cd0de19a 100644
--- a/resources/js/components/headers/OpenLeftMenu.vue
+++ b/resources/js/components/headers/OpenLeftMenu.vue
@@ -2,11 +2,11 @@
 	<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 { useTogglablesStateStore } from "@/stores/ModalsState";
 import { storeToRefs } from "pinia";
 import Button from "primevue/button";
 
-const lycheeStore = useLycheeStateStore();
-const { left_menu_open } = storeToRefs(lycheeStore);
+const togglableStore = useTogglablesStateStore();
+const { left_menu_open } = storeToRefs(togglableStore);
 const openLeftMenu = () => (left_menu_open.value = !left_menu_open.value);
 </script>
diff --git a/resources/js/components/headers/PhotoHeader.vue b/resources/js/components/headers/PhotoHeader.vue
index 019bad7a9aa..35f510ed58b 100644
--- a/resources/js/components/headers/PhotoHeader.vue
+++ b/resources/js/components/headers/PhotoHeader.vue
@@ -41,8 +41,8 @@ import { useRouter } from "vue-router";
 import { onKeyStroke } from "@vueuse/core";
 import { shouldIgnoreKeystroke } from "@/utils/keybindings-utils";
 import DownloadPhoto from "../modals/DownloadPhoto.vue";
-import { useLycheeStateStore } from "@/stores/LycheeState";
 import { storeToRefs } from "pinia";
+import { useTogglablesStateStore } from "@/stores/ModalsState";
 
 const router = useRouter();
 const emits = defineEmits<{
@@ -54,21 +54,20 @@ const props = defineProps<{
 	photo: App.Http.Resources.Models.PhotoResource;
 }>();
 
-const lycheeStore = useLycheeStateStore();
-lycheeStore.init();
-const { is_full_screen, is_edit_open, are_details_open, is_slideshow_active } = storeToRefs(lycheeStore);
+const togglableStore = useTogglablesStateStore();
+const { is_full_screen, is_edit_open, are_details_open, is_slideshow_active } = storeToRefs(togglableStore);
 const isDownloadOpen = ref(false);
 
 onKeyStroke("i", () => !shouldIgnoreKeystroke() && toggleDetails());
 onKeyStroke("e", () => !shouldIgnoreKeystroke() && props.photo.rights.can_edit && toggleEdit());
 
 function goBack() {
-	if (lycheeStore.isSearchActive && !lycheeStore.search_album_id) {
+	if (togglableStore.isSearchActive && !togglableStore.search_album_id) {
 		router.push({ name: "search" });
 		return;
 	}
-	if (lycheeStore.isSearchActive) {
-		router.push({ name: "search-with-album", params: { albumid: lycheeStore.search_album_id } });
+	if (togglableStore.isSearchActive) {
+		router.push({ name: "search-with-album", params: { albumid: togglableStore.search_album_id } });
 		return;
 	}
 	router.push({ name: "album", params: { albumid: props.albumid } });
diff --git a/resources/js/components/maintenance/MaintenanceCleaning.vue b/resources/js/components/maintenance/MaintenanceCleaning.vue
index 399b889f57b..2cbbedf8ac7 100644
--- a/resources/js/components/maintenance/MaintenanceCleaning.vue
+++ b/resources/js/components/maintenance/MaintenanceCleaning.vue
@@ -32,7 +32,7 @@ import { trans } from "laravel-vue-i18n";
 
 const props = defineProps<{ path: string }>();
 
-const data = ref(undefined as App.Http.Resources.Diagnostics.CleaningState | undefined);
+const data = ref<App.Http.Resources.Diagnostics.CleaningState | undefined>(undefined);
 const loading = ref(false);
 const toast = useToast();
 
diff --git a/resources/js/components/maintenance/MaintenanceFilesize.vue b/resources/js/components/maintenance/MaintenanceFilesize.vue
index 3fa32d862b9..eb0002d9c16 100644
--- a/resources/js/components/maintenance/MaintenanceFilesize.vue
+++ b/resources/js/components/maintenance/MaintenanceFilesize.vue
@@ -30,7 +30,7 @@ import MaintenanceService from "@/services/maintenance-service";
 import { sprintf } from "sprintf-js";
 import { trans } from "laravel-vue-i18n";
 
-const data = ref(undefined as number | undefined);
+const data = ref<number | undefined>(undefined);
 const loading = ref(false);
 const toast = useToast();
 
diff --git a/resources/js/components/maintenance/MaintenanceFixJobs.vue b/resources/js/components/maintenance/MaintenanceFixJobs.vue
index e2ce88eeec9..bfac6c24269 100644
--- a/resources/js/components/maintenance/MaintenanceFixJobs.vue
+++ b/resources/js/components/maintenance/MaintenanceFixJobs.vue
@@ -30,7 +30,7 @@ import MaintenanceService from "@/services/maintenance-service";
 import { sprintf } from "sprintf-js";
 import { trans } from "laravel-vue-i18n";
 
-const data = ref(undefined as number | undefined);
+const data = ref<number | undefined>(undefined);
 const loading = ref(false);
 const toast = useToast();
 
diff --git a/resources/js/components/maintenance/MaintenanceFixTree.vue b/resources/js/components/maintenance/MaintenanceFixTree.vue
index 78ac777977e..94dd152c907 100644
--- a/resources/js/components/maintenance/MaintenanceFixTree.vue
+++ b/resources/js/components/maintenance/MaintenanceFixTree.vue
@@ -33,7 +33,7 @@ import ProgressSpinner from "primevue/progressspinner";
 import ScrollPanel from "primevue/scrollpanel";
 import MaintenanceService from "@/services/maintenance-service";
 
-const data = ref(undefined as App.Http.Resources.Diagnostics.TreeState | undefined);
+const data = ref<App.Http.Resources.Diagnostics.TreeState | undefined>(undefined);
 const loading = ref(false);
 const toast = useToast();
 
diff --git a/resources/js/components/maintenance/MaintenanceGenSizevariants.vue b/resources/js/components/maintenance/MaintenanceGenSizevariants.vue
index 5251c64ff6f..84e8a092b6f 100644
--- a/resources/js/components/maintenance/MaintenanceGenSizevariants.vue
+++ b/resources/js/components/maintenance/MaintenanceGenSizevariants.vue
@@ -34,7 +34,7 @@ const props = defineProps<{
 	sv: App.Enum.SizeVariantType;
 }>();
 
-const data = ref(undefined as number | undefined);
+const data = ref<number | undefined>(undefined);
 const loading = ref(false);
 const toast = useToast();
 
diff --git a/resources/js/components/maintenance/MaintenanceOptimize.vue b/resources/js/components/maintenance/MaintenanceOptimize.vue
index b86aad2d5d4..9c24eb4f01c 100644
--- a/resources/js/components/maintenance/MaintenanceOptimize.vue
+++ b/resources/js/components/maintenance/MaintenanceOptimize.vue
@@ -29,7 +29,7 @@ import ScrollPanel from "primevue/scrollpanel";
 import MaintenanceService from "@/services/maintenance-service";
 import { useToast } from "primevue/usetoast";
 
-const data = ref([] as string[]);
+const data = ref<string[]>([]);
 const loading = ref(false);
 const toast = useToast();
 
diff --git a/resources/js/components/maintenance/MaintenanceUpdate.vue b/resources/js/components/maintenance/MaintenanceUpdate.vue
index 41c1e33e87c..3e06eae7b7b 100644
--- a/resources/js/components/maintenance/MaintenanceUpdate.vue
+++ b/resources/js/components/maintenance/MaintenanceUpdate.vue
@@ -32,7 +32,7 @@ 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 data = ref<App.Http.Resources.Diagnostics.UpdateInfo | undefined>(undefined);
 const canCheck = ref(true);
 const canUpdate = ref(false);
 const loading = ref(false);
diff --git a/resources/js/components/modals/AboutLychee.vue b/resources/js/components/modals/AboutLychee.vue
index 5b54e474bd2..23aecd834e1 100644
--- a/resources/js/components/modals/AboutLychee.vue
+++ b/resources/js/components/modals/AboutLychee.vue
@@ -70,7 +70,7 @@ import RegisterLychee from "./RegisterLychee.vue";
 const visible = defineModel("visible") as Ref<boolean>;
 const registerLycheeVisible = ref(false);
 const description = ref(sprintf(trans("lychee.ABOUT_DESCRIPTION"), "https://LycheeOrg.github.io"));
-const version = ref(undefined) as Ref<undefined | App.Http.Resources.Root.VersionResource>;
+const version = ref<App.Http.Resources.Root.VersionResource | undefined>(undefined);
 const lycheeStore = useLycheeStateStore();
 
 const { is_se_enabled, is_se_info_hidden } = storeToRefs(lycheeStore);
diff --git a/resources/js/components/modals/LoginModal.vue b/resources/js/components/modals/LoginModal.vue
index c0386c5424f..7b0f7de80e5 100644
--- a/resources/js/components/modals/LoginModal.vue
+++ b/resources/js/components/modals/LoginModal.vue
@@ -83,7 +83,7 @@ const lycheeStore = useLycheeStateStore();
 const { is_se_enabled } = storeToRefs(lycheeStore);
 const invalidPassword = ref(false);
 
-const oauths = ref(undefined as undefined | OauthProvider[]);
+const oauths = ref<OauthProvider[] | undefined>(undefined);
 
 function login() {
 	AuthService.login(username.value, password.value)
diff --git a/resources/js/components/modals/RegisterLychee.vue b/resources/js/components/modals/RegisterLychee.vue
index 285c91977ff..0bff6556a54 100644
--- a/resources/js/components/modals/RegisterLychee.vue
+++ b/resources/js/components/modals/RegisterLychee.vue
@@ -47,7 +47,7 @@ import MaintenanceService from "@/services/maintenance-service";
 import { useToast } from "primevue/usetoast";
 
 const visible = defineModel("visible") as Ref<boolean>;
-const licenseKey = ref(undefined) as Ref<undefined | string>;
+const licenseKey = ref<string | undefined>(undefined);
 const lycheeStore = useLycheeStateStore();
 const toast = useToast();
 
diff --git a/resources/js/components/modals/UploadPanel.vue b/resources/js/components/modals/UploadPanel.vue
index d9c09e04bd7..bfeec9b217c 100644
--- a/resources/js/components/modals/UploadPanel.vue
+++ b/resources/js/components/modals/UploadPanel.vue
@@ -89,19 +89,19 @@ import UploadService from "@/services/upload-service";
 import ProgressBar from "primevue/progressbar";
 import AlbumService from "@/services/album-service";
 import { useRoute } from "vue-router";
-import { useLycheeStateStore } from "@/stores/LycheeState";
 import { storeToRefs } from "pinia";
+import { useTogglablesStateStore } from "@/stores/ModalsState";
 
 export type Uploadable = {
 	file: File;
 	status: "uploading" | "waiting" | "done" | "error";
 };
 
-const lycheeStore = useLycheeStateStore();
-const { is_upload_visible, list_upload_files } = storeToRefs(lycheeStore);
+const togglableStore = useTogglablesStateStore();
+const { is_upload_visible, list_upload_files } = storeToRefs(togglableStore);
 const route = useRoute();
 
-const setup = ref(undefined as undefined | App.Http.Resources.GalleryConfigs.UploadConfig);
+const setup = ref<App.Http.Resources.GalleryConfigs.UploadConfig | undefined>(undefined);
 const albumId = ref(route.params.albumid ?? (null as string | null)) as Ref<string | null>;
 
 const emits = defineEmits<{
diff --git a/resources/js/components/modals/WebauthnModal.vue b/resources/js/components/modals/WebauthnModal.vue
index 03d3ad206fa..af188c354a9 100644
--- a/resources/js/components/modals/WebauthnModal.vue
+++ b/resources/js/components/modals/WebauthnModal.vue
@@ -40,7 +40,7 @@ const emits = defineEmits<{
 
 const authStore = useAuthStore();
 const username = ref("");
-const userId = ref(null as null | number);
+const userId = ref<number | null>(null);
 
 function login() {
 	WebAuthnService.login(username.value, userId.value)
diff --git a/resources/js/components/settings/AllSettings.vue b/resources/js/components/settings/AllSettings.vue
index a29f5b3a0b9..5b7970d3828 100644
--- a/resources/js/components/settings/AllSettings.vue
+++ b/resources/js/components/settings/AllSettings.vue
@@ -202,9 +202,9 @@ import SettingsService from "@/services/settings-service";
 
 const toast = useToast();
 const oldStyle = ref(false);
-const active = ref([] as string[]);
-const configs = ref(undefined as undefined | App.Http.Resources.Collections.ConfigCollectionResource);
-const modified = ref([] as App.Http.Resources.Editable.EditableConfigResource[]);
+const active = ref<string[]>([]);
+const configs = ref<App.Http.Resources.Collections.ConfigCollectionResource | undefined>(undefined);
+const modified = ref<App.Http.Resources.Editable.EditableConfigResource[]>([]);
 const sections = computed(function () {
 	if (!configs.value) {
 		return [];
diff --git a/resources/js/components/settings/EasySettings.vue b/resources/js/components/settings/EasySettings.vue
index dca96bf442d..0e5381b2ede 100644
--- a/resources/js/components/settings/EasySettings.vue
+++ b/resources/js/components/settings/EasySettings.vue
@@ -238,7 +238,7 @@ import MaintenanceService from "@/services/maintenance-service";
 
 const toast = useToast();
 
-const configs = ref(undefined as undefined | App.Http.Resources.Collections.ConfigCollectionResource);
+const configs = ref<App.Http.Resources.Collections.ConfigCollectionResource | undefined>(undefined);
 const dropbox_key = ref<string | undefined>(undefined);
 const photoSortingColumn = ref<App.Http.Resources.Models.ConfigResource | undefined>(undefined);
 const photoSortingOrder = ref<App.Http.Resources.Models.ConfigResource | undefined>(undefined);
diff --git a/resources/js/components/statistics/AlbumsTable.vue b/resources/js/components/statistics/AlbumsTable.vue
index 920265c2b2e..523f8792c8a 100644
--- a/resources/js/components/statistics/AlbumsTable.vue
+++ b/resources/js/components/statistics/AlbumsTable.vue
@@ -43,7 +43,7 @@ const emits = defineEmits<{
 	total: [total: TotalAlbum];
 }>();
 
-const albumSpace = ref(undefined as undefined | App.Http.Resources.Statistics.Album[]);
+const albumSpace = ref<App.Http.Resources.Statistics.Album[] | undefined>(undefined);
 const albumData = computed(() => {
 	return albumSpace.value?.filter((a) => !a.is_nsfw || are_nsfw_visible.value);
 });
diff --git a/resources/js/components/statistics/SizeVariantMeter.vue b/resources/js/components/statistics/SizeVariantMeter.vue
index 855fe888c5c..b551a7aaa62 100644
--- a/resources/js/components/statistics/SizeVariantMeter.vue
+++ b/resources/js/components/statistics/SizeVariantMeter.vue
@@ -45,8 +45,8 @@ const props = defineProps<{
 }>();
 
 const lycheeStore = useLycheeStateStore();
-const sizeVariantSpace = ref(undefined as undefined | App.Http.Resources.Statistics.Sizes[]);
-const sizeVariantSpaceMeter = ref(undefined as undefined | SizeVariantData[]);
+const sizeVariantSpace = ref<App.Http.Resources.Statistics.Sizes[] | undefined>(undefined);
+const sizeVariantSpaceMeter = ref<SizeVariantData[] | undefined>(undefined);
 
 const { is_se_preview_enabled } = storeToRefs(lycheeStore);
 
diff --git a/resources/js/composables/album/albumRefresher.ts b/resources/js/composables/album/albumRefresher.ts
index f31beefb291..7e3a9cdb74f 100644
--- a/resources/js/composables/album/albumRefresher.ts
+++ b/resources/js/composables/album/albumRefresher.ts
@@ -4,27 +4,27 @@ import { computed, Ref, ref } from "vue";
 
 export function useAlbumRefresher(albumId: Ref<string>, auth: AuthStore, isLoginOpen: Ref<boolean>, nsfw_consented: Ref<string[]>) {
 	const isPasswordProtected = ref(false);
-	const user = ref(undefined) as Ref<undefined | App.Http.Resources.Models.UserResource>;
-	const modelAlbum = ref(undefined as undefined | App.Http.Resources.Models.AlbumResource);
-	const tagAlbum = ref(undefined as undefined | App.Http.Resources.Models.TagAlbumResource);
-	const smartAlbum = ref(undefined as undefined | App.Http.Resources.Models.SmartAlbumResource);
+	const user = ref<App.Http.Resources.Models.UserResource | undefined>(undefined);
+	const modelAlbum = ref<App.Http.Resources.Models.AlbumResource | undefined>(undefined);
+	const tagAlbum = ref<App.Http.Resources.Models.TagAlbumResource | undefined>(undefined);
+	const smartAlbum = ref<App.Http.Resources.Models.SmartAlbumResource | undefined>(undefined);
 	const album = computed(() => modelAlbum.value || tagAlbum.value || smartAlbum.value);
-	const layout = ref(null) as Ref<null | App.Http.Resources.GalleryConfigs.PhotoLayoutConfig>;
+	const layout = ref<App.Http.Resources.GalleryConfigs.PhotoLayoutConfig | null>(null);
 	const isAlbumConsented = ref(false);
 
-	const photos = ref([]) as Ref<App.Http.Resources.Models.PhotoResource[]>;
-	const config = ref(undefined) as Ref<undefined | App.Http.Resources.GalleryConfigs.AlbumConfig>;
+	const photos = ref<App.Http.Resources.Models.PhotoResource[]>([]);
+	const config = ref<App.Http.Resources.GalleryConfigs.AlbumConfig | undefined>(undefined);
 	const rights = computed(() => album.value?.rights ?? undefined);
 
-	function loadUser() {
-		auth.getUser().then((data: App.Http.Resources.Models.UserResource) => {
+	function loadUser(): Promise<void> {
+		return auth.getUser().then((data: App.Http.Resources.Models.UserResource) => {
 			user.value = data;
 			loadAlbum();
 		});
 	}
 
-	function loadAlbum() {
-		AlbumService.get(albumId.value)
+	function loadAlbum(): Promise<void> {
+		return AlbumService.get(albumId.value)
 			.then((data) => {
 				isPasswordProtected.value = false;
 				config.value = data.data.config;
@@ -54,14 +54,14 @@ export function useAlbumRefresher(albumId: Ref<string>, auth: AuthStore, isLogin
 			});
 	}
 
-	function loadLayout() {
-		AlbumService.getLayout().then((data) => {
+	function loadLayout(): Promise<void> {
+		return AlbumService.getLayout().then((data) => {
 			layout.value = data.data;
 		});
 	}
 
-	function refresh() {
-		loadUser();
+	function refresh(): Promise<void> {
+		return loadUser();
 	}
 
 	return {
diff --git a/resources/js/composables/album/albumsRefresher.ts b/resources/js/composables/album/albumsRefresher.ts
index e78fa4f5228..36399efb5f8 100644
--- a/resources/js/composables/album/albumsRefresher.ts
+++ b/resources/js/composables/album/albumsRefresher.ts
@@ -6,16 +6,16 @@ import { SplitData, useSplitter } from "./splitter";
 
 export function useAlbumsRefresher(auth: AuthStore, lycheeStore: LycheeStateStore, isLoginOpen: Ref<boolean>) {
 	const { spliter } = useSplitter();
-	const user = ref(undefined) as Ref<undefined | App.Http.Resources.Models.UserResource>;
+	const user = ref<App.Http.Resources.Models.UserResource | undefined>(undefined);
 	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<SplitData<App.Http.Resources.Models.ThumbAlbumResource>[]>;
-	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 smartAlbums = ref<App.Http.Resources.Models.ThumbAlbumResource[]>([]);
+	const albums = ref<App.Http.Resources.Models.ThumbAlbumResource[]>([]);
+	const sharedAlbums = ref<SplitData<App.Http.Resources.Models.ThumbAlbumResource>[]>([]);
+	const rootConfig = ref<App.Http.Resources.GalleryConfigs.RootConfig | undefined>(undefined);
+	const rootRights = ref<App.Http.Resources.Rights.RootAlbumRightsResource | undefined>(undefined);
 	const selectableAlbums = computed(() => albums.value.concat(sharedAlbums.value.map((album) => album.data).flat()));
 
-	function refresh() {
+	function refresh(): Promise<void> {
 		auth.getUser().then((data) => {
 			user.value = data;
 
@@ -26,7 +26,7 @@ export function useAlbumsRefresher(auth: AuthStore, lycheeStore: LycheeStateStor
 			}
 		});
 
-		AlbumService.getAll()
+		return AlbumService.getAll()
 			.then((data) => {
 				smartAlbums.value = (data.data.smart_albums as App.Http.Resources.Models.ThumbAlbumResource[]) ?? [];
 				albums.value = data.data.albums as App.Http.Resources.Models.ThumbAlbumResource[];
diff --git a/resources/js/composables/album/scrollable.ts b/resources/js/composables/album/scrollable.ts
new file mode 100644
index 00000000000..0e0a1fdfd81
--- /dev/null
+++ b/resources/js/composables/album/scrollable.ts
@@ -0,0 +1,28 @@
+import { TogglablesStateStore } from "@/stores/ModalsState";
+import { Ref } from "vue";
+
+export function useScrollable(toggleableStore: TogglablesStateStore, path: Ref<string>) {
+	function onScroll() {
+		const e = document.getElementById("galleryView") as HTMLElement;
+		toggleableStore.rememberScrollPage(e, path.value);
+	}
+
+	async function setScroll(_v: void, iter = 0) {
+		// Abort. We tried 10 times (waited 1s).
+		if (iter == 10) {
+			return;
+		}
+
+		let e = document.getElementById("galleryView");
+		if (e === null) {
+			setTimeout(() => setScroll(_v, iter + 1), 100);
+		} else {
+			toggleableStore.recoverScrollPage(e, path.value);
+		}
+	}
+
+	return {
+		onScroll,
+		setScroll,
+	};
+}
diff --git a/resources/js/composables/album/searchRefresher.ts b/resources/js/composables/album/searchRefresher.ts
index 27af286fb29..12c0e859249 100644
--- a/resources/js/composables/album/searchRefresher.ts
+++ b/resources/js/composables/album/searchRefresher.ts
@@ -1,13 +1,13 @@
 import SearchService from "@/services/search-service";
-import { LycheeStateStore } from "@/stores/LycheeState";
+import { TogglablesStateStore } from "@/stores/ModalsState";
 import { trans } from "laravel-vue-i18n";
 import { computed, ref, Ref } from "vue";
 
-export function useSearch(albumid: Ref<string>, lycheeStore: LycheeStateStore, search_term: Ref<string>, search_page: Ref<number>) {
+export function useSearch(albumid: Ref<string>, togglableStore: TogglablesStateStore, search_term: Ref<string>, search_page: Ref<number>) {
 	const albums = ref<App.Http.Resources.Models.ThumbAlbumResource[]>([]);
 	const photos = ref<App.Http.Resources.Models.PhotoResource[]>([]);
 	const noData = computed<boolean>(() => albums.value.length === 0 && photos.value.length === 0);
-	const searchMinimumLengh = ref(undefined as number | undefined);
+	const searchMinimumLengh = ref<number | undefined>(undefined);
 	const isSearching = ref(false);
 	const from = ref(0);
 	const per_page = ref(0);
@@ -33,7 +33,7 @@ export function useSearch(albumid: Ref<string>, lycheeStore: LycheeStateStore, s
 			photos.value = [];
 			return;
 		}
-		lycheeStore.search_album_id = albumid.value;
+		togglableStore.search_album_id = albumid.value;
 		search_term.value = terms;
 		isSearching.value = true;
 		SearchService.search(albumid.value, search_term.value, search_page.value).then((response) => {
diff --git a/resources/js/composables/contextMenus/contextMenuAlbumsAdd.ts b/resources/js/composables/contextMenus/contextMenuAlbumsAdd.ts
index 8a2f5ef2300..ce316447821 100644
--- a/resources/js/composables/contextMenus/contextMenuAlbumsAdd.ts
+++ b/resources/js/composables/contextMenus/contextMenuAlbumsAdd.ts
@@ -1,14 +1,14 @@
-import { computed, Ref, ref } from "vue";
+import { Ref, ref } from "vue";
 
 type Callbacks = {
 	toggleUpload: () => void;
 	toggleImportFromLink: () => void;
 	toggleCreateAlbum: () => void;
+	toggleCreateTagAlbum: () => void;
 	toggleImportFromDropbox: () => void;
 };
 
 export function useContextMenuAlbumsAdd(callbacks: Callbacks, dropbox_api_key: Ref<string>) {
-	const isCreateTagAlbumOpen = ref(false);
 	const isImportFromServerOpen = ref(false);
 
 	const addmenu = ref(); // ! Reference to the context menu
@@ -49,7 +49,7 @@ export function useContextMenuAlbumsAdd(callbacks: Callbacks, dropbox_api_key: R
 			{
 				label: "lychee.NEW_TAG_ALBUM",
 				icon: "pi pi-tags",
-				callback: () => (isCreateTagAlbumOpen.value = true),
+				callback: () => callbacks.toggleCreateTagAlbum,
 			},
 		].filter((item) => item.if === undefined || item.if !== false),
 	);
@@ -62,7 +62,6 @@ export function useContextMenuAlbumsAdd(callbacks: Callbacks, dropbox_api_key: R
 		addmenu,
 		addMenu,
 		openAddMenu,
-		isCreateTagAlbumOpen,
 		isImportFromServerOpen,
 	};
 }
diff --git a/resources/js/composables/modalsTriggers/galleryModals.ts b/resources/js/composables/modalsTriggers/galleryModals.ts
index 445a69a2f4d..6b4f14311ad 100644
--- a/resources/js/composables/modalsTriggers/galleryModals.ts
+++ b/resources/js/composables/modalsTriggers/galleryModals.ts
@@ -1,10 +1,13 @@
-import { Ref, ref } from "vue";
-
-export function useGalleryModals(is_upload_visible: Ref<boolean>) {
-	const isCreateAlbumOpen = ref(false);
+import { TogglablesStateStore } from "@/stores/ModalsState";
+import { ref } from "vue";
 
+export function useGalleryModals(togglableStore: TogglablesStateStore) {
 	function toggleCreateAlbum() {
-		isCreateAlbumOpen.value = !isCreateAlbumOpen.value;
+		togglableStore.is_create_album_visible = !togglableStore.is_create_album_visible;
+	}
+
+	function toggleCreateTagAlbum() {
+		togglableStore.is_create_tag_album_visible = !togglableStore.is_create_tag_album_visible;
 	}
 
 	const isRenameVisible = ref(false);
@@ -50,7 +53,7 @@ export function useGalleryModals(is_upload_visible: Ref<boolean>) {
 	}
 
 	function toggleUpload() {
-		is_upload_visible.value = !is_upload_visible.value;
+		togglableStore.is_upload_visible = !togglableStore.is_upload_visible;
 	}
 
 	const isTagVisible = ref(false);
@@ -66,8 +69,8 @@ export function useGalleryModals(is_upload_visible: Ref<boolean>) {
 	}
 
 	return {
-		isCreateAlbumOpen,
 		toggleCreateAlbum,
+		toggleCreateTagAlbum,
 		isDeleteVisible,
 		toggleDelete,
 		isMergeAlbumVisible,
diff --git a/resources/js/composables/photo/basePhoto.ts b/resources/js/composables/photo/basePhoto.ts
index 094852d4892..b27923e049b 100644
--- a/resources/js/composables/photo/basePhoto.ts
+++ b/resources/js/composables/photo/basePhoto.ts
@@ -1,9 +1,9 @@
 import { computed, Ref, ref } from "vue";
 
 export function usePhotoBaseFunction(photoId: Ref<string>) {
-	const photo = ref(undefined) as Ref<App.Http.Resources.Models.PhotoResource | undefined>;
-	const album = ref(null) as Ref<App.Http.Resources.Models.AbstractAlbumResource | null>;
-	const photos = ref([]) as Ref<App.Http.Resources.Models.PhotoResource[]>;
+	const photo = ref<App.Http.Resources.Models.PhotoResource | undefined>(undefined);
+	const album = ref<App.Http.Resources.Models.AbstractAlbumResource | null>(null);
+	const photos = ref<App.Http.Resources.Models.PhotoResource[]>([]);
 
 	function hasPrevious(): boolean {
 		return photo.value?.previous_photo_id !== null;
diff --git a/resources/js/composables/photo/slideshow.ts b/resources/js/composables/photo/slideshow.ts
index dd60b0fc56d..36bbfa3cfd0 100644
--- a/resources/js/composables/photo/slideshow.ts
+++ b/resources/js/composables/photo/slideshow.ts
@@ -1,4 +1,4 @@
-import { Ref, ref } from "vue";
+import { Ref } from "vue";
 
 export function useSlideshowFunction(
 	delay: number,
diff --git a/resources/js/composables/selections/selections.ts b/resources/js/composables/selections/selections.ts
index efb1ea1c535..714da7a06a5 100644
--- a/resources/js/composables/selections/selections.ts
+++ b/resources/js/composables/selections/selections.ts
@@ -5,8 +5,8 @@ export function useSelection(
 	photos: Ref<{ [key: number]: App.Http.Resources.Models.PhotoResource }>,
 	albums: Ref<{ [key: number]: App.Http.Resources.Models.ThumbAlbumResource }>,
 ) {
-	const selectedPhotosIdx = ref([] as number[]);
-	const selectedAlbumsIdx = ref([] as number[]);
+	const selectedPhotosIdx = ref<number[]>([]);
+	const selectedAlbumsIdx = ref<number[]>([]);
 	const selectedPhoto = computed(() => (selectedPhotosIdx.value.length === 1 ? photos.value[selectedPhotosIdx.value[0]] : undefined));
 	const selectedAlbum = computed(() => (selectedAlbumsIdx.value.length === 1 ? albums.value[selectedAlbumsIdx.value[0]] : undefined));
 	const selectedPhotos = computed(() =>
@@ -19,8 +19,8 @@ export function useSelection(
 	const selectedAlbumsIds = computed(() => selectedAlbums.value.map((a) => a.id));
 
 	// We save the last clicked index so we can do selections with shift.
-	const lastPhotoClicked = ref(undefined as number | undefined);
-	const lastAlbumClicked = ref(undefined as number | undefined);
+	const lastPhotoClicked = ref<number | undefined>(undefined);
+	const lastAlbumClicked = ref<number | undefined>(undefined);
 
 	const isPhotoSelected = (idx: number) => selectedPhotosIdx.value.includes(idx);
 	const isAlbumSelected = (idx: number) => selectedAlbumsIdx.value.includes(idx);
diff --git a/resources/js/menus/LeftMenu.vue b/resources/js/menus/LeftMenu.vue
index bc83bc0a2cf..e1f72cd39ae 100644
--- a/resources/js/menus/LeftMenu.vue
+++ b/resources/js/menus/LeftMenu.vue
@@ -65,6 +65,7 @@ import AlbumService from "@/services/album-service";
 import SETag from "@/components/icons/SETag.vue";
 import Constants from "@/services/constants";
 import { useRoute } from "vue-router";
+import { useTogglablesStateStore } from "@/stores/ModalsState";
 
 type MenyType =
 	| {
@@ -82,16 +83,18 @@ type MenyType =
 			items: MenyType[];
 	  };
 
-const initData = ref(undefined) as Ref<undefined | App.Http.Resources.Rights.GlobalRightsResource>;
+const initData = ref<App.Http.Resources.Rights.GlobalRightsResource | undefined>(undefined);
 const openLycheeAbout = ref(false);
 const logsEnabled = ref(true);
 
 const route = useRoute();
 const authStore = useAuthStore();
 const lycheeStore = useLycheeStateStore();
+const togglableStore = useTogglablesStateStore();
 lycheeStore.init();
 
-const { left_menu_open, clockwork_url, is_se_enabled, is_se_preview_enabled, is_se_info_hidden } = storeToRefs(lycheeStore);
+const { left_menu_open } = storeToRefs(togglableStore);
+const { clockwork_url, is_se_enabled, is_se_preview_enabled, is_se_info_hidden } = storeToRefs(lycheeStore);
 const { user } = storeToRefs(authStore);
 authStore.getUser();
 
@@ -120,7 +123,7 @@ function load() {
 
 function logout() {
 	AuthService.logout().then(() => {
-		lycheeStore.left_menu_open = false;
+		left_menu_open.value = false;
 		initData.value = undefined;
 		authStore.setUser(null);
 		AlbumService.clearCache();
diff --git a/resources/js/services/sidebar-map.ts b/resources/js/services/sidebar-map.ts
index 5188f2ad8d9..af2e2626668 100644
--- a/resources/js/services/sidebar-map.ts
+++ b/resources/js/services/sidebar-map.ts
@@ -52,8 +52,8 @@ export function useSidebarMap(latitudeValue: number | null, longitudeValue: numb
 	const latitude = ref(latitudeValue);
 	const longitude = ref(longitudeValue);
 
-	const map = ref(undefined) as Ref<undefined | SidebarMap>;
-	const map_provider = ref(undefined) as Ref<undefined | App.Http.Resources.GalleryConfigs.MapProviderData>;
+	const map = ref<SidebarMap | undefined>(undefined);
+	const map_provider = ref<App.Http.Resources.GalleryConfigs.MapProviderData | undefined>(undefined);
 
 	function onMount() {
 		if (!map.value) {
diff --git a/resources/js/stores/LycheeState.ts b/resources/js/stores/LycheeState.ts
index 7f5a929f6cd..904e3fc18ef 100644
--- a/resources/js/stores/LycheeState.ts
+++ b/resources/js/stores/LycheeState.ts
@@ -1,4 +1,3 @@
-import { Uploadable } from "@/components/modals/UploadPanel.vue";
 import InitService from "@/services/init-service";
 import { defineStore } from "pinia";
 
@@ -13,28 +12,9 @@ export const useLycheeStateStore = defineStore("lychee-store", {
 		// Debug mode (is default to true to see the first crash)
 		is_debug_enabled: true,
 
-		// togglables
-		left_menu_open: false,
-		is_full_screen: false,
-		is_login_open: false,
-
-		// upload
-		is_upload_visible: false,
-		list_upload_files: [] as Uploadable[],
-
-		// Photo toggleables
-		is_edit_open: false,
-		are_details_open: false,
-		is_slideshow_active: false,
-
 		// Photo config
 		slideshow_timeout: 5,
 
-		// Search stuff
-		search_term: "",
-		search_album_id: undefined as string | undefined,
-		search_page: 1,
-
 		// configs for nsfw
 		are_nsfw_visible: false,
 		is_nsfw_background_blurred: false,
@@ -70,11 +50,6 @@ export const useLycheeStateStore = defineStore("lychee-store", {
 		is_se_preview_enabled: false,
 		is_se_info_hidden: false,
 	}),
-	getters: {
-		isSearchActive(): boolean {
-			return this.search_term !== "";
-		},
-	},
 	actions: {
 		init() {
 			// Check if already initialized
@@ -136,19 +111,5 @@ export const useLycheeStateStore = defineStore("lychee-store", {
 					window.dispatchEvent(event);
 				});
 		},
-
-		toggleFullScreen() {
-			this.is_full_screen = !this.is_full_screen;
-		},
-
-		toggleLogin() {
-			this.is_login_open = !this.is_login_open;
-		},
-
-		resetSearch() {
-			this.search_term = "";
-			this.search_album_id = undefined;
-			this.search_page = 1;
-		},
 	},
 });
diff --git a/resources/js/stores/ModalsState.ts b/resources/js/stores/ModalsState.ts
new file mode 100644
index 00000000000..95fa70181e4
--- /dev/null
+++ b/resources/js/stores/ModalsState.ts
@@ -0,0 +1,78 @@
+import { Uploadable } from "@/components/modals/UploadPanel.vue";
+
+import { defineStore } from "pinia";
+
+export type TogglablesStateStore = ReturnType<typeof useTogglablesStateStore>;
+
+export const useTogglablesStateStore = defineStore("togglables-store", {
+	state: () => ({
+		// togglables
+		left_menu_open: false,
+		is_full_screen: false,
+		is_login_open: false,
+
+		// upload
+		is_upload_visible: false,
+		list_upload_files: [] as Uploadable[],
+
+		// create albums
+		is_create_album_visible: false,
+		is_create_tag_album_visible: false,
+
+		// Photo toggleables
+		is_edit_open: false,
+		are_details_open: false,
+		is_slideshow_active: false,
+
+		// Search stuff
+		search_term: "",
+		search_album_id: undefined as string | undefined,
+		search_page: 1,
+
+		// Scroll memory
+		scroll_memory: {} as Record<string, number>,
+	}),
+	getters: {
+		isSearchActive(): boolean {
+			return this.search_term !== "";
+		},
+	},
+	actions: {
+		toggleFullScreen() {
+			this.is_full_screen = !this.is_full_screen;
+		},
+
+		toggleLogin() {
+			this.is_login_open = !this.is_login_open;
+		},
+
+		toggleLeftMenu() {
+			this.left_menu_open = !this.left_menu_open;
+		},
+
+		resetSearch() {
+			this.search_term = "";
+			this.search_album_id = undefined;
+			this.search_page = 1;
+		},
+
+		rememberScrollPage(elem: HTMLElement, path: string) {
+			this.scroll_memory[path] = elem.scrollTop;
+		},
+
+		recoverScrollPage(elem: HTMLElement, path: string) {
+			if (!(path in this.scroll_memory)) {
+				return;
+			}
+			const scroll = this.scroll_memory[path];
+			if (scroll) {
+				elem.scrollTop = scroll;
+				// Smooth scrolling
+				// elem.scrollTo({
+				// 	top: scroll,
+				// 	behavior: "smooth",
+				// });
+			}
+		},
+	},
+});
diff --git a/resources/js/views/Diagnostics.vue b/resources/js/views/Diagnostics.vue
index 17cc656c998..7653515f13b 100644
--- a/resources/js/views/Diagnostics.vue
+++ b/resources/js/views/Diagnostics.vue
@@ -1,7 +1,7 @@
 <template>
 	<Toolbar class="w-full border-0 h-14">
 		<template #start>
-			<Button @click="openLeftMenu" icon="pi pi-bars" class="mr-2 border-none" severity="secondary" text />
+			<Button @click="togglableStore.toggleLeftMenu" 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> -->
@@ -27,13 +27,10 @@ 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";
+import { useTogglablesStateStore } from "@/stores/ModalsState";
 
 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);
+const togglableStore = useTogglablesStateStore();
 </script>
diff --git a/resources/js/views/Error.vue b/resources/js/views/Error.vue
index 6ed022b5606..fb17546c72e 100644
--- a/resources/js/views/Error.vue
+++ b/resources/js/views/Error.vue
@@ -70,8 +70,8 @@ type LycheeException = {
 const lycheeStore = useLycheeStateStore();
 const { is_debug_enabled } = storeToRefs(lycheeStore);
 
-const lycheeError = ref(null) as Ref<null | LycheeException>;
-const jsError = ref(null) as Ref<null | ErrorEvent>;
+const lycheeError = ref<LycheeException | null>(null);
+const jsError = ref<ErrorEvent | null>(null);
 
 window.addEventListener("error", function (e: Event) {
 	console.log("error", e);
diff --git a/resources/js/views/Jobs.vue b/resources/js/views/Jobs.vue
index 26268a97884..4370a830499 100644
--- a/resources/js/views/Jobs.vue
+++ b/resources/js/views/Jobs.vue
@@ -28,7 +28,7 @@ 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[]);
+const jobs = ref<App.Http.Resources.Models.JobHistoryResource[]>([]);
 function load() {
 	JobService.list().then((response) => {
 		jobs.value = response.data.data;
diff --git a/resources/js/views/Landing.vue b/resources/js/views/Landing.vue
index d0fe1d757b6..c25a6001629 100644
--- a/resources/js/views/Landing.vue
+++ b/resources/js/views/Landing.vue
@@ -74,7 +74,7 @@ import LandingFooter from "@/components/footers/LandingFooter.vue";
 
 const introVisible = ref(true);
 
-const initdata = ref(undefined) as Ref<undefined | App.Http.Resources.GalleryConfigs.LandingPageResource>;
+const initdata = ref<App.Http.Resources.GalleryConfigs.LandingPageResource | undefined>(undefined);
 const router = useRouter();
 
 InitService.fetchLandingData()
diff --git a/resources/js/views/Permissions.vue b/resources/js/views/Permissions.vue
index c2a9c760ca6..5469dd07111 100644
--- a/resources/js/views/Permissions.vue
+++ b/resources/js/views/Permissions.vue
@@ -39,8 +39,8 @@ import Button from "primevue/button";
 import DiagnosticsService from "@/services/diagnostics-service";
 
 const same = ref(true);
-const left = ref([] as string[]);
-const right = ref([] as string[]);
+const left = ref<string[]>([]);
+const right = ref<string[]>([]);
 
 DiagnosticsService.permissions().then((response) => {
 	left.value = response.data.left.split("\n");
diff --git a/resources/js/views/Sharing.vue b/resources/js/views/Sharing.vue
index b74a0a110a8..4a2b2679913 100644
--- a/resources/js/views/Sharing.vue
+++ b/resources/js/views/Sharing.vue
@@ -44,7 +44,7 @@ import Toolbar from "primevue/toolbar";
 import { useToast } from "primevue/usetoast";
 import { ref } from "vue";
 
-const perms = ref(undefined as undefined | App.Http.Resources.Models.AccessPermissionResource[]);
+const perms = ref<App.Http.Resources.Models.AccessPermissionResource[] | undefined>(undefined);
 const toast = useToast();
 
 SharingService.list().then((response) => {
diff --git a/resources/js/views/Statistics.vue b/resources/js/views/Statistics.vue
index 87492744c47..556abfa33dd 100644
--- a/resources/js/views/Statistics.vue
+++ b/resources/js/views/Statistics.vue
@@ -27,7 +27,6 @@
 	</Panel>
 </template>
 <script setup lang="ts">
-import Button from "primevue/button";
 import Toolbar from "primevue/toolbar";
 import Panel from "primevue/panel";
 import { useAuthStore } from "@/stores/Auth";
@@ -44,12 +43,12 @@ 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);
+const user = ref<App.Http.Resources.Models.UserResource | undefined>(undefined);
 const authStore = useAuthStore();
 const lycheeStore = useLycheeStateStore();
 lycheeStore.init();
 
-const total = ref(undefined as undefined | TotalAlbum);
+const total = ref<TotalAlbum | undefined>(undefined);
 const is_collapsed = ref(false);
 const load = ref(false);
 
diff --git a/resources/js/views/Users.vue b/resources/js/views/Users.vue
index ae76f1eb730..b9ca09c71c7 100644
--- a/resources/js/views/Users.vue
+++ b/resources/js/views/Users.vue
@@ -78,7 +78,7 @@ const lycheeStore = useLycheeStateStore();
 lycheeStore.init();
 const { is_se_preview_enabled, is_se_enabled } = storeToRefs(lycheeStore);
 
-const users = ref([] as App.Http.Resources.Models.UserManagementResource[]);
+const users = ref<App.Http.Resources.Models.UserManagementResource[]>([]);
 const isCreateUserVisible = ref(false);
 const totalUsedSpace = ref(0);
 
diff --git a/resources/js/views/gallery-panels/Album.vue b/resources/js/views/gallery-panels/Album.vue
index 445cc7bc38e..d38b204ef70 100644
--- a/resources/js/views/gallery-panels/Album.vue
+++ b/resources/js/views/gallery-panels/Album.vue
@@ -1,4 +1,6 @@
 <template>
+	<UploadPanel v-if="album?.rights.can_upload" @refresh="refresh" key="upload_modal" />
+	<AlbumCreateDialog v-if="album?.rights.can_upload && config?.is_model_album" v-model:parent-id="album.id" key="create_album_modal" />
 	<div class="h-svh overflow-y-hidden">
 		<!-- Trick to avoid the scroll bar to appear on the right when switching to full screen -->
 		<Collapse :when="!is_full_screen">
@@ -15,8 +17,10 @@
 		<Unlock :albumid="albumid" :visible="isPasswordProtected" @reload="refresh" @fail="is_login_open = true" />
 		<template v-if="config && album">
 			<div
+				id="galleryView"
 				class="relative flex flex-wrap content-start w-full justify-start overflow-y-auto"
 				:class="is_full_screen ? 'h-svh' : 'h-[calc(100vh-3.5rem)]'"
+				v-on:scroll="onScroll"
 			>
 				<AlbumEdit v-if="album.rights.can_edit" :album="album" :config="config" />
 				<div v-if="noData" class="flex w-full flex-col h-full items-center justify-center text-xl text-muted-color gap-8">
@@ -201,6 +205,10 @@ 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";
+import { useTogglablesStateStore } from "@/stores/ModalsState";
+import UploadPanel from "@/components/modals/UploadPanel.vue";
+import AlbumCreateDialog from "@/components/forms/album/AlbumCreateDialog.vue";
+import { useScrollable } from "@/composables/album/scrollable";
 
 const route = useRoute();
 const router = useRouter();
@@ -212,12 +220,14 @@ const props = defineProps<{
 const albumid = ref(props.albumid);
 // flag to open login modal if necessary
 const auth = useAuthStore();
+const togglableStore = useTogglablesStateStore();
 const lycheeStore = useLycheeStateStore();
 lycheeStore.init();
-lycheeStore.resetSearch();
+togglableStore.resetSearch();
 
-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);
+const { onScroll, setScroll } = useScrollable(togglableStore, albumid);
+const { is_full_screen, is_login_open, is_slideshow_active, is_upload_visible, list_upload_files } = storeToRefs(togglableStore);
+const { are_nsfw_visible, nsfw_consented, is_se_enabled } = storeToRefs(lycheeStore);
 
 // Reset the slideshow.
 is_slideshow_active.value = false;
@@ -258,7 +268,7 @@ const {
 	isCopyVisible,
 	toggleCopy,
 	toggleUpload,
-} = useGalleryModals(is_upload_visible);
+} = useGalleryModals(togglableStore);
 
 const areStatisticsOpen = ref(false);
 
@@ -361,10 +371,10 @@ function consent() {
 
 loadLayout();
 
-refresh();
+refresh().then(setScroll);
 
 onKeyStroke("h", () => !shouldIgnoreKeystroke() && (are_nsfw_visible.value = !are_nsfw_visible.value));
-onKeyStroke("f", () => !shouldIgnoreKeystroke() && lycheeStore.toggleFullScreen());
+onKeyStroke("f", () => !shouldIgnoreKeystroke() && togglableStore.toggleFullScreen());
 onKeyStroke(" ", () => !shouldIgnoreKeystroke() && unselect());
 
 // Privileged actions
@@ -393,7 +403,7 @@ watch(
 		window.addEventListener("paste", onPaste);
 		window.addEventListener("dragover", dragEnd);
 		window.addEventListener("drop", dropUpload);
-		refresh();
+		refresh().then(setScroll);
 	},
 );
 </script>
diff --git a/resources/js/views/gallery-panels/Albums.vue b/resources/js/views/gallery-panels/Albums.vue
index 7fd356e3255..671a162a2ac 100644
--- a/resources/js/views/gallery-panels/Albums.vue
+++ b/resources/js/views/gallery-panels/Albums.vue
@@ -1,6 +1,10 @@
 <template>
+	<UploadPanel v-if="rootRights?.can_upload" @refresh="refresh" key="upload_modal" />
 	<KeybindingsHelp v-model:visible="isKeybindingsHelpOpen" v-if="user?.id" />
-	<div v-if="rootConfig && rootRights" @click="unselect" class="h-svh overflow-y-auto">
+	<AlbumCreateDialog v-if="rootRights?.can_upload" :parent-id="null" key="create_album_modal" />
+	<AlbumCreateTagDialog v-if="rootRights?.can_upload" key="create_tag_album_modal" />
+
+	<div v-if="rootConfig && rootRights" @click="unselect" class="h-svh overflow-y-auto" id="galleryView" v-on:scroll="onScroll">
 		<Collapse :when="!is_full_screen">
 			<AlbumsHeader
 				v-if="user"
@@ -141,14 +145,24 @@ import AlbumService from "@/services/album-service";
 import { useRouter } from "vue-router";
 import { useMouseEvents } from "@/composables/album/uploadEvents";
 import GalleryFooter from "@/components/footers/GalleryFooter.vue";
+import { useTogglablesStateStore } from "@/stores/ModalsState";
+import UploadPanel from "@/components/modals/UploadPanel.vue";
+import AlbumCreateDialog from "@/components/forms/album/AlbumCreateDialog.vue";
+import AlbumCreateTagDialog from "@/components/forms/album/AlbumCreateTagDialog.vue";
+import { useScrollable } from "@/composables/album/scrollable";
 
 const auth = useAuthStore();
 const router = useRouter();
 const lycheeStore = useLycheeStateStore();
+const togglableStore = useTogglablesStateStore();
+
 lycheeStore.init();
-lycheeStore.resetSearch();
+togglableStore.resetSearch();
+const albumid = ref("gallery");
 
-const { are_nsfw_visible, is_full_screen, is_login_open, title, is_upload_visible, list_upload_files } = storeToRefs(lycheeStore);
+const { onScroll, setScroll } = useScrollable(togglableStore, albumid);
+const { is_full_screen, is_login_open, is_upload_visible, list_upload_files } = storeToRefs(togglableStore);
+const { are_nsfw_visible, title } = storeToRefs(lycheeStore);
 
 const photos = ref([]); // unused.
 
@@ -165,7 +179,7 @@ const { selectedAlbum, selectedAlbumsIdx, selectedAlbums, selectedAlbumsIds, alb
 
 // Modals for Albums
 const { isDeleteVisible, toggleDelete, isMergeAlbumVisible, toggleMergeAlbum, isMoveVisible, toggleMove, isRenameVisible, toggleRename } =
-	useGalleryModals(is_upload_visible);
+	useGalleryModals(togglableStore);
 
 // Unused.
 const photoCallbacks = {
@@ -215,10 +229,10 @@ const albumPanelConfig = computed<AlbumThumbConfig>(() => ({
 	album_decoration_orientation: lycheeStore.album_decoration_orientation,
 }));
 
-refresh();
+refresh().then(setScroll);
 
 onKeyStroke("h", () => !shouldIgnoreKeystroke() && (are_nsfw_visible.value = !are_nsfw_visible.value));
-onKeyStroke("f", () => !shouldIgnoreKeystroke() && lycheeStore.toggleFullScreen());
+onKeyStroke("f", () => !shouldIgnoreKeystroke() && togglableStore.toggleFullScreen());
 onKeyStroke(" ", () => !shouldIgnoreKeystroke() && unselect());
 onKeyStroke("m", () => !shouldIgnoreKeystroke() && rootRights.value?.can_edit && hasSelection() && toggleMove());
 onKeyStroke(["Delete", "Backspace"], () => !shouldIgnoreKeystroke() && rootRights.value?.can_edit && hasSelection() && toggleDelete());
diff --git a/resources/js/views/gallery-panels/Map.vue b/resources/js/views/gallery-panels/Map.vue
index d1bd08ae137..dae72f04ea9 100644
--- a/resources/js/views/gallery-panels/Map.vue
+++ b/resources/js/views/gallery-panels/Map.vue
@@ -38,6 +38,7 @@ import { useToast } from "primevue/usetoast";
 import Toolbar from "primevue/toolbar";
 import { onKeyStroke } from "@vueuse/core";
 import Constants from "@/services/constants";
+import { useTogglablesStateStore } from "@/stores/ModalsState";
 
 type MapPhotoEntry = {
 	lat?: number | null;
@@ -58,6 +59,7 @@ const props = defineProps<{
 
 const toast = useToast();
 const router = useRouter();
+const togglableStore = useTogglablesStateStore();
 const lycheeStore = useLycheeStateStore();
 lycheeStore.init();
 
@@ -68,16 +70,16 @@ function goBack() {
 		router.push({ name: "gallery" });
 	}
 }
-const { is_full_screen } = storeToRefs(lycheeStore);
+const { is_full_screen } = storeToRefs(togglableStore);
 
 // Map stuff.
 const camera_date = trans("lychee.CAMERA_DATE");
-const map_provider = ref(undefined) as Ref<undefined | App.Http.Resources.GalleryConfigs.MapProviderData>;
+const map_provider = ref<App.Http.Resources.GalleryConfigs.MapProviderData | undefined>(undefined);
 const map = ref(undefined) as Ref<L.Map | undefined>;
-const bounds = ref(undefined as undefined | LatLngBoundsLiteral);
-const photoLayer = ref(undefined as any);
-const trackLayer = ref(undefined as any);
-const data = ref(undefined as undefined | App.Http.Resources.Collections.PositionDataResource);
+const bounds = ref<LatLngBoundsLiteral | undefined>(undefined);
+const photoLayer = ref<any>(undefined);
+const trackLayer = ref<any>(undefined);
+const data = ref<App.Http.Resources.Collections.PositionDataResource | undefined>(undefined);
 
 function loadMapProvider() {
 	AlbumService.getMapProvider().then((data) => {
diff --git a/resources/js/views/gallery-panels/Photo.vue b/resources/js/views/gallery-panels/Photo.vue
index ad44ed38246..d461ba863ae 100644
--- a/resources/js/views/gallery-panels/Photo.vue
+++ b/resources/js/views/gallery-panels/Photo.vue
@@ -166,6 +166,7 @@ import { useToast } from "primevue/usetoast";
 import type { UseSwipeDirection } from "@vueuse/core";
 import { useSwipe } from "@vueuse/core";
 import { useImageHelpers } from "@/utils/Helpers";
+import { useTogglablesStateStore } from "@/stores/ModalsState";
 
 const swipe = ref<HTMLElement | null>(null);
 
@@ -177,18 +178,19 @@ const props = defineProps<{
 const router = useRouter();
 const route = useRoute();
 const toast = useToast();
+const togglableStore = useTogglablesStateStore();
 const lycheeStore = useLycheeStateStore();
 lycheeStore.init();
-const { is_upload_visible } = storeToRefs(lycheeStore);
+const { is_full_screen, is_edit_open, are_details_open, is_slideshow_active } = storeToRefs(togglableStore);
 
-const { isDeleteVisible, toggleDelete, isMoveVisible, toggleMove } = useGalleryModals(is_upload_visible);
+const { isDeleteVisible, toggleDelete, isMoveVisible, toggleMove } = useGalleryModals(togglableStore);
 
 const photoId = ref(props.photoid);
 const { photo, album, photos, previousStyle, nextStyle, srcSetMedium, style, imageViewMode, refresh, hasPrevious, hasNext } =
 	usePhotoBaseFunction(photoId);
 const { getPlaceholderIcon } = useImageHelpers();
 
-const { is_full_screen, is_edit_open, are_details_open, is_slideshow_active, slideshow_timeout } = storeToRefs(lycheeStore);
+const { slideshow_timeout } = storeToRefs(lycheeStore);
 
 function getNext() {
 	router.push({ name: "photo", params: { albumid: props.albumid, photoid: photo.value?.next_photo_id ?? "" } });
@@ -201,10 +203,10 @@ function getPrevious() {
 const { slideshow, start, next, previous } = useSlideshowFunction(1000, is_slideshow_active, slideshow_timeout, getNext, getPrevious);
 
 function load() {
-	if (lycheeStore.isSearchActive) {
-		const albumId = lycheeStore.search_album_id;
-		const page = lycheeStore.search_page;
-		const term = lycheeStore.search_term;
+	if (togglableStore.isSearchActive) {
+		const albumId = togglableStore.search_album_id;
+		const page = togglableStore.search_page;
+		const term = togglableStore.search_term;
 		SearchService.search(albumId, term, page).then((response) => {
 			photos.value = response.data.photos;
 			refresh();
@@ -231,12 +233,12 @@ function updated() {
 }
 
 function goBack() {
-	if (lycheeStore.isSearchActive && lycheeStore.search_album_id === null) {
+	if (togglableStore.isSearchActive && togglableStore.search_album_id === null) {
 		router.push({ name: "search" });
 		return;
 	}
-	if (lycheeStore.isSearchActive) {
-		router.push({ name: "search-with-album", params: { albumid: lycheeStore.search_album_id } });
+	if (togglableStore.isSearchActive) {
+		router.push({ name: "search-with-album", params: { albumid: togglableStore.search_album_id } });
 		return;
 	}
 
@@ -292,7 +294,7 @@ onKeyStroke("ArrowLeft", () => !shouldIgnoreKeystroke() && hasPrevious() && prev
 onKeyStroke("ArrowRight", () => !shouldIgnoreKeystroke() && hasNext() && next(true));
 onKeyStroke("o", () => !shouldIgnoreKeystroke() && rotateOverlay());
 onKeyStroke(" ", () => !shouldIgnoreKeystroke() && slideshow());
-onKeyStroke("f", () => !shouldIgnoreKeystroke() && lycheeStore.toggleFullScreen());
+onKeyStroke("f", () => !shouldIgnoreKeystroke() && togglableStore.toggleFullScreen());
 
 // Priviledged operations
 onKeyStroke("m", () => !shouldIgnoreKeystroke() && photo.value?.rights.can_edit && toggleMove());
diff --git a/resources/js/views/gallery-panels/Search.vue b/resources/js/views/gallery-panels/Search.vue
index 2b34a82bc0b..44cad51e9d9 100644
--- a/resources/js/views/gallery-panels/Search.vue
+++ b/resources/js/views/gallery-panels/Search.vue
@@ -158,6 +158,7 @@ import MoveDialog from "@/components/forms/gallery-dialogs/MoveDialog.vue";
 import DeleteDialog from "@/components/forms/gallery-dialogs/DeleteDialog.vue";
 import PhotoService from "@/services/photo-service";
 import AlbumService from "@/services/album-service";
+import { useTogglablesStateStore } from "@/stores/ModalsState";
 
 const router = useRouter();
 const props = defineProps<{
@@ -175,8 +176,10 @@ function goBack() {
 
 const auth = useAuthStore();
 const lycheeStore = useLycheeStateStore();
+const togglableStore = useTogglablesStateStore();
 lycheeStore.init();
-const { are_nsfw_visible, is_full_screen, search_page, search_term, is_login_open, nsfw_consented, is_upload_visible } = storeToRefs(lycheeStore);
+const { is_full_screen, search_page, search_term, is_login_open, is_upload_visible } = storeToRefs(togglableStore);
+const { are_nsfw_visible, nsfw_consented } = storeToRefs(lycheeStore);
 const {
 	albums,
 	photos,
@@ -192,7 +195,7 @@ const {
 	search,
 	clear,
 	refresh,
-} = useSearch(albumid, lycheeStore, search_term, search_page);
+} = useSearch(albumid, togglableStore, 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>(() => {
@@ -234,7 +237,7 @@ const {
 	toggleTag,
 	isCopyVisible,
 	toggleCopy,
-} = useGalleryModals(is_upload_visible);
+} = useGalleryModals(togglableStore);
 
 const {
 	selectedPhotosIdx,
@@ -317,8 +320,8 @@ if (albumid.value !== "") {
 searchInit();
 loadLayout();
 
-if (lycheeStore.isSearchActive) {
-	search(lycheeStore.search_term);
+if (togglableStore.isSearchActive) {
+	search(togglableStore.search_term);
 }
 
 onKeyStroke("Escape", () => {