From 708f8e3972b8d2ca42a2d5b49991490bd21be6e1 Mon Sep 17 00:00:00 2001
From: ildyria <beviguier@gmail.com>
Date: Wed, 18 Sep 2024 18:40:15 +0200
Subject: [PATCH] move should be working for both photo and albums

---
 .../forms/album/AlbumDeleteDialog.vue         |  62 +++++++++++
 .../forms/album/AlbumMoveDialog.vue           | 102 ++++++++++++++++++
 .../forms/photo/DialogPhotoDelete.vue         |   4 +-
 .../forms/photo/DialogPhotoMove.vue           |   5 +
 .../js/composables/album/albumsRefresher.ts   |  60 +++++++++++
 .../composables/contextMenus/contextMenu.ts   |   3 -
 .../modalsTriggers/deleteAlbumOpen.ts         |  14 +++
 .../modalsTriggers/moveAlbumOpen.ts           |  14 +++
 .../js/composables/selections/selections.ts   |  14 +--
 resources/js/services/album-service.ts        |   5 +
 resources/js/views/gallery-panels/Album.vue   |  81 ++++++++++++--
 resources/js/views/gallery-panels/Albums.vue  |  83 +++++++-------
 resources/js/views/gallery-panels/Photo.vue   |   2 +-
 13 files changed, 380 insertions(+), 69 deletions(-)
 create mode 100644 resources/js/components/forms/album/AlbumDeleteDialog.vue
 create mode 100644 resources/js/components/forms/album/AlbumMoveDialog.vue
 create mode 100644 resources/js/composables/album/albumsRefresher.ts
 create mode 100644 resources/js/composables/modalsTriggers/deleteAlbumOpen.ts
 create mode 100644 resources/js/composables/modalsTriggers/moveAlbumOpen.ts

diff --git a/resources/js/components/forms/album/AlbumDeleteDialog.vue b/resources/js/components/forms/album/AlbumDeleteDialog.vue
new file mode 100644
index 0000000000..2a71cc6032
--- /dev/null
+++ b/resources/js/components/forms/album/AlbumDeleteDialog.vue
@@ -0,0 +1,62 @@
+<template>
+	<Dialog v-model:visible="visible" pt:root:class="border-none" modal :dismissable-mask="true">
+		<template #container="{ closeCallback }">
+			<div>
+				<p class="p-9 text-center text-muted-color max-w-xl text-wrap">{{ confirmation }}</p>
+				<div class="flex">
+					<Button severity="secondary" class="w-full border-none rounded-none rounded-bl-xl font-bold" @click="closeCallback">
+						{{ $t("lychee.CANCEL") }}
+					</Button>
+					<Button severity="danger" class="w-full border-none rounded-none rounded-br-xl font-bold" @click="execute">{{
+						$t("lychee.DELETE")
+					}}</Button>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Button from "primevue/button";
+import AlbumService from "@/services/album-service";
+import { trans } from "laravel-vue-i18n";
+import { sprintf } from "sprintf-js";
+import Dialog from "primevue/dialog";
+
+const props = defineProps<{
+	parentId: string | undefined;
+	album?: App.Http.Resources.Models.ThumbAlbumResource;
+	albumIds: string[];
+}>();
+
+const visible = defineModel<boolean>("visible", { default: false });
+const emit = defineEmits<{
+	(e: "deleted"): void;
+}>();
+
+const confirmation = computed(() => {
+	if (props.album) {
+		return sprintf(trans("lychee.DELETE_ALBUM_CONFIRMATION"), props.album.title);
+	}
+	return sprintf(trans("lychee.DELETE_ALBUMS_CONFIRMATION"), props.albumIds.length);
+});
+
+function execute() {
+	let albumDeletedIds = [];
+	if (props.album) {
+		albumDeletedIds.push(props.album.id);
+	} else {
+		albumDeletedIds = props.albumIds as string[];
+	}
+
+	AlbumService.delete(albumDeletedIds).then(() => {
+		if (props.parentId === undefined) {
+			AlbumService.clearAlbums();
+		} else {
+			AlbumService.clearCache(props.parentId);
+		}
+		emit("deleted");
+	});
+}
+</script>
diff --git a/resources/js/components/forms/album/AlbumMoveDialog.vue b/resources/js/components/forms/album/AlbumMoveDialog.vue
new file mode 100644
index 0000000000..818030ebd3
--- /dev/null
+++ b/resources/js/components/forms/album/AlbumMoveDialog.vue
@@ -0,0 +1,102 @@
+<template>
+	<Dialog v-model:visible="visible" pt:root:class="border-none" modal :dismissable-mask="true">
+		<template #container="{ closeCallback }">
+			<div v-if="titleMovedTo !== undefined">
+				<p class="p-9 text-center text-muted-color">{{ confirmation }}</p>
+				<div class="flex">
+					<Button severity="secondary" class="font-bold w-full border-none rounded-none rounded-bl-xl" @click="close">
+						{{ $t("lychee.CANCEL") }}
+					</Button>
+					<Button severity="contrast" class="font-bold w-full border-none rounded-none rounded-br-xl" @click="execute">
+						{{ $t("lychee.MOVE") }}
+					</Button>
+				</div>
+			</div>
+			<div v-else>
+				<div class="p-9">
+					<span v-if="props.album" class="font-bold">
+						{{ sprintf("Move %s to:", props.album.title) }}
+					</span>
+					<span v-else class="font-bold">
+						{{ sprintf("Move %d albums to:", props.albumIds?.length) }}
+					</span>
+					<SearchTargetAlbum :album-id="parentId" @selected="selected" />
+				</div>
+				<Button class="w-full font-bold rounded-none rounded-bl-xl rounded-br-xl border-none" severity="secondary" @click="closeCallback">
+					{{ $t("lychee.CANCEL") }}
+				</Button>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import Button from "primevue/button";
+import { trans } from "laravel-vue-i18n";
+import { sprintf } from "sprintf-js";
+import SearchTargetAlbum from "@/components/forms/album/SearchTargetAlbum.vue";
+import AlbumService from "@/services/album-service";
+import { useToast } from "primevue/usetoast";
+import Dialog from "primevue/dialog";
+
+const props = defineProps<{
+	parentId: string | undefined;
+	album?: App.Http.Resources.Models.ThumbAlbumResource;
+	albumIds: string[];
+}>();
+
+const visible = defineModel<boolean>("visible", { default: false });
+
+const emit = defineEmits<{
+	(e: "moved"): void;
+}>();
+
+const toast = useToast();
+const titleMovedTo = ref(undefined as string | undefined);
+const destination_id = ref(undefined as string | undefined | null);
+const confirmation = computed(() => {
+	if (props.album) {
+		return sprintf(trans("lychee.ALBUM_MOVE"), props.album.title, titleMovedTo.value);
+	}
+	return sprintf(trans("lychee.ALBUMS_MOVE"), titleMovedTo.value);
+});
+
+function selected(target: App.Http.Resources.Models.TargetAlbumResource) {
+	titleMovedTo.value = target.original;
+	destination_id.value = target.id;
+}
+
+function close() {
+	titleMovedTo.value = undefined;
+	destination_id.value = undefined;
+	visible.value = false;
+}
+
+function execute() {
+	if (destination_id.value === undefined) {
+		return;
+	}
+	let albumMovedIds = [];
+	if (props.album) {
+		albumMovedIds.push(props.album.id);
+	} else {
+		albumMovedIds = props.albumIds as string[];
+	}
+
+	AlbumService.move(destination_id.value, albumMovedIds).then(() => {
+		AlbumService.clearCache(destination_id.value);
+		toast.add({
+			severity: "success",
+			summary: "Album(s) moved to " + titleMovedTo.value,
+			life: 3000,
+		});
+		AlbumService.clearCache(destination_id.value);
+		if (props.parentId === undefined) {
+			AlbumService.clearAlbums();
+		} else {
+			AlbumService.clearCache(props.parentId);
+		}
+		emit("moved");
+	});
+}
+</script>
diff --git a/resources/js/components/forms/photo/DialogPhotoDelete.vue b/resources/js/components/forms/photo/DialogPhotoDelete.vue
index bce4fb6c7f..377af3aefa 100644
--- a/resources/js/components/forms/photo/DialogPhotoDelete.vue
+++ b/resources/js/components/forms/photo/DialogPhotoDelete.vue
@@ -7,7 +7,6 @@
 					<Button severity="secondary" class="w-full border-none rounded-none rounded-bl-xl font-bold" @click="closeCallback">
 						{{ $t("lychee.CANCEL") }}
 					</Button>
-					<!-- class="text-danger-600 font-bold hover:text-white hover:bg-danger-700 w-full bg-transparent border-none" -->
 					<Button severity="danger" class="w-full border-none rounded-none rounded-br-xl font-bold" @click="execute">{{
 						$t("lychee.DELETE")
 					}}</Button>
@@ -24,11 +23,13 @@ import { sprintf } from "sprintf-js";
 import { computed } from "vue";
 import Button from "primevue/button";
 import { trans } from "laravel-vue-i18n";
+import AlbumService from "@/services/album-service";
 const toast = useToast();
 
 const props = defineProps<{
 	photo?: App.Http.Resources.Models.PhotoResource;
 	photoIds?: string[];
+	albumId: string;
 }>();
 
 const visible = defineModel<boolean>("visible", { default: false });
@@ -56,6 +57,7 @@ function execute() {
 			summary: "Photo deleted",
 			life: 3000,
 		});
+		AlbumService.clearCache(props.albumId);
 		emit("deleted");
 		// Todo emit that we moved things.
 	});
diff --git a/resources/js/components/forms/photo/DialogPhotoMove.vue b/resources/js/components/forms/photo/DialogPhotoMove.vue
index 5e054ba328..9dc2f9414b 100644
--- a/resources/js/components/forms/photo/DialogPhotoMove.vue
+++ b/resources/js/components/forms/photo/DialogPhotoMove.vue
@@ -37,6 +37,7 @@ import { computed, ref } from "vue";
 import SearchTargetAlbum from "../album/SearchTargetAlbum.vue";
 import Button from "primevue/button";
 import Dialog from "primevue/dialog";
+import AlbumService from "@/services/album-service";
 
 const props = defineProps<{
 	photo?: App.Http.Resources.Models.PhotoResource;
@@ -87,6 +88,10 @@ function execute() {
 			summary: "Photo moved",
 			life: 3000,
 		});
+		// Clear the cache for the current album and the destination album
+		AlbumService.clearCache(props.albumId);
+		AlbumService.clearCache(destination_id.value);
+
 		emit("moved");
 		// Todo emit that we moved things.
 	});
diff --git a/resources/js/composables/album/albumsRefresher.ts b/resources/js/composables/album/albumsRefresher.ts
new file mode 100644
index 0000000000..22c2261b27
--- /dev/null
+++ b/resources/js/composables/album/albumsRefresher.ts
@@ -0,0 +1,60 @@
+import AlbumService from "@/services/album-service";
+import { AuthStore } from "@/stores/Auth";
+import { LycheeStateStore } from "@/stores/LycheeState";
+import { computed, ref, Ref } from "vue";
+
+export function useAlbumsRefresher(auth: AuthStore, lycheeStore: LycheeStateStore, isLoginOpen: Ref<boolean>) {
+	const user = ref(undefined) as Ref<undefined | App.Http.Resources.Models.UserResource>;
+	const isKeybindingsHelpOpen = ref(false);
+	const smartAlbums = ref([]) as Ref<App.Http.Resources.Models.ThumbAlbumResource[]>;
+	const albums = ref([]) as Ref<App.Http.Resources.Models.ThumbAlbumResource[]>;
+	const sharedAlbums = ref([]) as Ref<App.Http.Resources.Models.ThumbAlbumResource[]>;
+	const rootConfig = ref(undefined) as Ref<undefined | App.Http.Resources.GalleryConfigs.RootConfig>;
+	const rootRights = ref(undefined) as Ref<undefined | App.Http.Resources.Rights.RootAlbumRightsResource>;
+	const selectableAlbums = computed(() => albums.value.concat(sharedAlbums.value));
+
+	function refresh() {
+		auth.getUser().then((data) => {
+			user.value = data;
+
+			// display popup if logged in and set..
+			if (user.value.id && lycheeStore.show_keybinding_help_popup) {
+				isKeybindingsHelpOpen.value = true;
+			}
+		});
+
+		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[];
+				smartAlbums.value = smartAlbums.value.concat(data.data.tag_albums as App.Http.Resources.Models.ThumbAlbumResource[]);
+				sharedAlbums.value = (data.data.shared_albums as App.Http.Resources.Models.ThumbAlbumResource[]) ?? [];
+				rootConfig.value = data.data.config;
+				rootRights.value = data.data.rights;
+
+				if (albums.value.length === 0 && smartAlbums.value.length === 0 && sharedAlbums.value.length === 0) {
+					isLoginOpen.value = true;
+				}
+			})
+			.catch((error) => {
+				// We are required to login :)
+				if (error.response.status === 401) {
+					isLoginOpen.value = true;
+				} else {
+					console.error(error);
+				}
+			});
+	}
+
+	return {
+		user,
+		isKeybindingsHelpOpen,
+		smartAlbums,
+		albums,
+		sharedAlbums,
+		rootConfig,
+		rootRights,
+		selectableAlbums,
+		refresh,
+	};
+}
diff --git a/resources/js/composables/contextMenus/contextMenu.ts b/resources/js/composables/contextMenus/contextMenu.ts
index bcd7cafe8e..f7009f1d6e 100644
--- a/resources/js/composables/contextMenus/contextMenu.ts
+++ b/resources/js/composables/contextMenus/contextMenu.ts
@@ -81,9 +81,6 @@ export function useContextMenu(selectors: Selectors, photoCallbacks: PhotoCallba
 		if (selectors.selectedAlbums.value.length > 0) {
 			return albumsMenu();
 		}
-
-		//! Should not happen.
-		console.log("No menu available??");
 		return [];
 	});
 
diff --git a/resources/js/composables/modalsTriggers/deleteAlbumOpen.ts b/resources/js/composables/modalsTriggers/deleteAlbumOpen.ts
new file mode 100644
index 0000000000..9bf007a78e
--- /dev/null
+++ b/resources/js/composables/modalsTriggers/deleteAlbumOpen.ts
@@ -0,0 +1,14 @@
+import { ref } from "vue";
+
+export function useDeleteAlbumOpen() {
+	const isDeleteAlbumVisible = ref(false);
+
+	function toggleDeleteAlbum() {
+		isDeleteAlbumVisible.value = !isDeleteAlbumVisible.value;
+	}
+
+	return {
+		isDeleteAlbumVisible,
+		toggleDeleteAlbum,
+	};
+}
diff --git a/resources/js/composables/modalsTriggers/moveAlbumOpen.ts b/resources/js/composables/modalsTriggers/moveAlbumOpen.ts
new file mode 100644
index 0000000000..6e990bd097
--- /dev/null
+++ b/resources/js/composables/modalsTriggers/moveAlbumOpen.ts
@@ -0,0 +1,14 @@
+import { ref } from "vue";
+
+export function useMoveAlbumOpen() {
+	const isMoveAlbumVisible = ref(false);
+
+	function toggleMoveAlbum() {
+		isMoveAlbumVisible.value = !isMoveAlbumVisible.value;
+	}
+
+	return {
+		isMoveAlbumVisible,
+		toggleMoveAlbum,
+	};
+}
diff --git a/resources/js/composables/selections/selections.ts b/resources/js/composables/selections/selections.ts
index b5dc383bbf..4001abe4a1 100644
--- a/resources/js/composables/selections/selections.ts
+++ b/resources/js/composables/selections/selections.ts
@@ -3,12 +3,14 @@ import { computed, ComputedRef, Ref, ref } from "vue";
 
 export function useSelection(
 	config: Ref<App.Http.Resources.GalleryConfigs.AlbumConfig | null>,
-	album: ComputedRef<
-		| App.Http.Resources.Models.AlbumResource
-		| App.Http.Resources.Models.TagAlbumResource
-		| App.Http.Resources.Models.SmartAlbumResource
-		| undefined
-	>,
+	album:
+		| ComputedRef<
+				| App.Http.Resources.Models.AlbumResource
+				| App.Http.Resources.Models.TagAlbumResource
+				| App.Http.Resources.Models.SmartAlbumResource
+				| undefined
+		  >
+		| undefined,
 	photos: Ref<{ [key: number]: App.Http.Resources.Models.PhotoResource }>,
 	albums: ComputedRef<{ [key: number]: App.Http.Resources.Models.ThumbAlbumResource }>,
 ) {
diff --git a/resources/js/services/album-service.ts b/resources/js/services/album-service.ts
index ab82c74905..47558f2fa4 100644
--- a/resources/js/services/album-service.ts
+++ b/resources/js/services/album-service.ts
@@ -55,6 +55,11 @@ const AlbumService = {
 		}
 	},
 
+	clearAlbums(): void {
+		const axiosWithCache = axios as unknown as AxiosCacheInstance;
+		axiosWithCache.storage.remove("albums");
+	},
+
 	getAll(): Promise<AxiosResponse<App.Http.Resources.Collections.RootAlbumResource>> {
 		const requester = axios as unknown as AxiosCacheInstance;
 		return requester.get(`${Constants.API_URL}Albums`, { data: {}, id: "albums" });
diff --git a/resources/js/views/gallery-panels/Album.vue b/resources/js/views/gallery-panels/Album.vue
index 4acfa4462c..7ee6124be5 100644
--- a/resources/js/views/gallery-panels/Album.vue
+++ b/resources/js/views/gallery-panels/Album.vue
@@ -42,8 +42,38 @@
 			/>
 		</div>
 		<ShareAlbum v-model:visible="isShareAlbumVisible" :title="album.title" :url="route.path" />
-		<DialogPhotoMove v-model:visible="isMovePhotoVisible" :photo="selectedPhoto" :photo-ids="selectedPhotosIds" />
-		<DialogPhotoDelete v-model:visible="isDeletePhotoVisible" :photo="selectedPhoto" :photo-ids="selectedPhotosIds" />
+		<!-- Dialogs for photos -->
+		<DialogPhotoMove
+			v-model:visible="isMovePhotoVisible"
+			:photo="selectedPhoto"
+			:photo-ids="selectedPhotosIds"
+			:album-id="albumid"
+			@moved="refresh"
+		/>
+		<DialogPhotoDelete
+			v-model:visible="isDeletePhotoVisible"
+			:photo="selectedPhoto"
+			:photo-ids="selectedPhotosIds"
+			:album-id="albumid"
+			@deleted="refresh"
+		/>
+
+		<!-- Dialogs for albums -->
+		<AlbumMoveDialog
+			v-model:visible="isMoveAlbumVisible"
+			:parent-id="albumid"
+			:album="selectedAlbum"
+			:album-ids="selectedAlbumsIds"
+			@moved="refresh"
+		/>
+		<AlbumDeleteDialog
+			v-model:visible="isDeleteAlbumVisible"
+			:parent-id="albumid"
+			:album="selectedAlbum"
+			:album-ids="selectedAlbumsIds"
+			@deleted="refresh"
+		/>
+
 		<ContextMenu ref="menu" :model="Menu">
 			<template #item="{ item, props }">
 				<Divider v-if="item.is_divider" />
@@ -80,6 +110,12 @@ import Divider from "primevue/divider";
 import ContextMenu from "primevue/contextmenu";
 import { useAlbumRefresher } from "@/composables/album/albumRefresher";
 import { useContextMenu } from "@/composables/contextMenus/contextMenu";
+import PhotoService from "@/services/photo-service";
+import AlbumService from "@/services/album-service";
+import { useDeleteAlbumOpen } from "@/composables/modalsTriggers/deleteAlbumOpen";
+import AlbumDeleteDialog from "@/components/forms/album/AlbumDeleteDialog.vue";
+import { useMoveAlbumOpen } from "@/composables/modalsTriggers/moveAlbumOpen";
+import AlbumMoveDialog from "@/components/forms/album/AlbumMoveDialog.vue";
 
 const route = useRoute();
 
@@ -89,6 +125,9 @@ const props = defineProps<{
 
 const albumid = ref(props.albumid);
 
+// Sharing stuff
+const { isShareAlbumVisible, toggleShareAlbum } = useShareAlbumOpen();
+
 // binding between hero and header. We use a boolean instead of events to avoid de-sync
 const areDetailsOpen = ref(false);
 // flag to open login modal if necessary
@@ -117,9 +156,13 @@ watch(
 const children = computed<App.Http.Resources.Models.ThumbAlbumResource[]>(() => modelAlbum.value?.albums ?? []);
 const noData = computed(() => children.value.length === 0 && (photos.value === null || photos.value.length === 0));
 
+// Modals for Photos
 const { isMovePhotoVisible, toggleMovePhoto } = useMovePhotoOpen();
 const { isDeletePhotoVisible, toggleDeletePhoto } = useDeletePhotoOpen();
-const { isShareAlbumVisible, toggleShareAlbum } = useShareAlbumOpen();
+
+// Modals for Albums
+const { isMoveAlbumVisible, toggleMoveAlbum } = useMoveAlbumOpen();
+const { isDeleteAlbumVisible, toggleDeleteAlbum } = useDeleteAlbumOpen();
 
 const {
 	selectedPhotosIdx,
@@ -135,15 +178,31 @@ const {
 } = useSelection(config, album, photos, children);
 
 const photoCallbacks = {
-	star: () => {},
-	unstar: () => {},
-	setAsCover: () => {},
-	setAsHeader: () => {},
+	star: () => {
+		PhotoService.star(selectedPhotosIds.value, true);
+		AlbumService.clearCache(albumid.value);
+		refresh();
+	},
+	unstar: () => {
+		PhotoService.star(selectedPhotosIds.value, false);
+		AlbumService.clearCache(albumid.value);
+		refresh();
+	},
+	setAsCover: () => {
+		PhotoService.setAsCover(selectedPhoto.value!.id, albumid.value);
+		AlbumService.clearCache(albumid.value);
+		refresh();
+	},
+	setAsHeader: () => {
+		PhotoService.setAsHeader(selectedPhoto.value!.id, albumid.value, false);
+		AlbumService.clearCache(albumid.value);
+		refresh();
+	},
 	toggleTag: () => {},
 	toggleRename: () => {},
 	toggleCopyTo: () => {},
-	toggleMove: () => {},
-	toggleDelete: () => {},
+	toggleMove: toggleMovePhoto,
+	toggleDelete: toggleDeletePhoto,
 	toggleDownload: () => {},
 };
 
@@ -151,8 +210,8 @@ const albumCallbacks = {
 	setAsCover: () => {},
 	toggleRename: () => {},
 	toggleMerge: () => {},
-	toggleMove: () => {},
-	toggleDelete: () => {},
+	toggleMove: toggleMoveAlbum,
+	toggleDelete: toggleDeleteAlbum,
 	toggleDownload: () => {},
 };
 
diff --git a/resources/js/views/gallery-panels/Albums.vue b/resources/js/views/gallery-panels/Albums.vue
index 4ab636c8ad..90632aac07 100644
--- a/resources/js/views/gallery-panels/Albums.vue
+++ b/resources/js/views/gallery-panels/Albums.vue
@@ -61,12 +61,26 @@
 			</a>
 		</template>
 	</ContextMenu>
+	<!-- Dialogs for albums -->
+	<AlbumMoveDialog
+		v-model:visible="isMoveAlbumVisible"
+		:parent-id="undefined"
+		:album="selectedAlbum"
+		:album-ids="selectedAlbumsIds"
+		@moved="refresh"
+	/>
+	<AlbumDeleteDialog
+		v-model:visible="isDeleteAlbumVisible"
+		:parent-id="undefined"
+		:album="selectedAlbum"
+		:album-ids="selectedAlbumsIds"
+		@deleted="refresh"
+	/>
 </template>
 <script setup lang="ts">
 import AlbumThumbPanel from "@/components/gallery/AlbumThumbPanel.vue";
 import { useAuthStore } from "@/stores/Auth";
-import AlbumService from "@/services/album-service";
-import { computed, Ref, ref } from "vue";
+import { ref } from "vue";
 import AlbumsHeader from "@/components/headers/AlbumsHeader.vue";
 import { useLycheeStateStore } from "@/stores/LycheeState";
 import { storeToRefs } from "pinia";
@@ -76,27 +90,35 @@ import KeybindingsHelp from "@/components/modals/KeybindingsHelp.vue";
 import { useSelection } from "@/composables/selections/selections";
 import { useContextMenu } from "@/composables/contextMenus/contextMenu";
 import ContextMenu from "primevue/contextmenu";
+import { useAlbumsRefresher } from "@/composables/album/albumsRefresher";
+import AlbumDeleteDialog from "@/components/forms/album/AlbumDeleteDialog.vue";
+import { useDeleteAlbumOpen } from "@/composables/modalsTriggers/deleteAlbumOpen";
+import AlbumMoveDialog from "@/components/forms/album/AlbumMoveDialog.vue";
+import { useMoveAlbumOpen } from "@/composables/modalsTriggers/moveAlbumOpen";
 
 const isLoginOpen = ref(false);
 
-const user = ref(undefined) as Ref<undefined | App.Http.Resources.Models.UserResource>;
-const isKeybindingsHelpOpen = ref(false);
-const smartAlbums = ref([]) as Ref<App.Http.Resources.Models.ThumbAlbumResource[]>;
-const albums = ref([]) as Ref<App.Http.Resources.Models.ThumbAlbumResource[]>;
-const sharedAlbums = ref([]) as Ref<App.Http.Resources.Models.ThumbAlbumResource[]>;
-const rootConfig = ref(undefined) as Ref<undefined | App.Http.Resources.GalleryConfigs.RootConfig>;
-const rootRights = ref(undefined) as Ref<undefined | App.Http.Resources.Rights.RootAlbumRightsResource>;
 const auth = useAuthStore();
 const lycheeStore = useLycheeStateStore();
 lycheeStore.init();
 const { are_nsfw_visible } = storeToRefs(lycheeStore);
 
 const config = ref(null); // unused for now.
-const root = computed(() => undefined);
 const photos = ref([]); // unused.
-const selectableAlbums = computed(() => albums.value.concat(sharedAlbums.value));
 
-const { selectedAlbum, selectedAlbumsIdx, selectedAlbums, selectedAlbumsIds, albumClick } = useSelection(config, root, photos, selectableAlbums);
+const { user, isKeybindingsHelpOpen, smartAlbums, albums, sharedAlbums, rootConfig, rootRights, selectableAlbums, refresh } = useAlbumsRefresher(
+	auth,
+	lycheeStore,
+	isLoginOpen,
+);
+
+const { selectedAlbum, selectedAlbumsIdx, selectedAlbums, selectedAlbumsIds, albumClick } = useSelection(config, undefined, photos, selectableAlbums);
+
+// Modals for Albums
+const { isMoveAlbumVisible, toggleMoveAlbum } = useMoveAlbumOpen();
+const { isDeleteAlbumVisible, toggleDeleteAlbum } = useDeleteAlbumOpen();
+
+// Unused.
 const photoCallbacks = {
 	star: () => {},
 	unstar: () => {},
@@ -114,8 +136,8 @@ const albumCallbacks = {
 	setAsCover: () => {},
 	toggleRename: () => {},
 	toggleMerge: () => {},
-	toggleMove: () => {},
-	toggleDelete: () => {},
+	toggleMove: toggleMoveAlbum,
+	toggleDelete: toggleDeleteAlbum,
 	toggleDownload: () => {},
 };
 
@@ -134,39 +156,6 @@ const { menu, Menu, albumMenuOpen } = useContextMenu(
 	albumCallbacks,
 );
 
-function refresh() {
-	auth.getUser().then((data) => {
-		user.value = data;
-
-		// display popup if logged in and set..
-		if (user.value.id && lycheeStore.show_keybinding_help_popup) {
-			isKeybindingsHelpOpen.value = true;
-		}
-	});
-
-	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[];
-			smartAlbums.value = smartAlbums.value.concat(data.data.tag_albums as App.Http.Resources.Models.ThumbAlbumResource[]);
-			sharedAlbums.value = (data.data.shared_albums as App.Http.Resources.Models.ThumbAlbumResource[]) ?? [];
-			rootConfig.value = data.data.config;
-			rootRights.value = data.data.rights;
-
-			if (albums.value.length === 0 && smartAlbums.value.length === 0 && sharedAlbums.value.length === 0) {
-				isLoginOpen.value = true;
-			}
-		})
-		.catch((error) => {
-			// We are required to login :)
-			if (error.response.status === 401) {
-				isLoginOpen.value = true;
-			} else {
-				console.error(error);
-			}
-		});
-}
-
 refresh();
 
 onKeyStroke("h", () => !shouldIgnoreKeystroke() && (are_nsfw_visible.value = !are_nsfw_visible.value));
diff --git a/resources/js/views/gallery-panels/Photo.vue b/resources/js/views/gallery-panels/Photo.vue
index b8fbdb3767..ede57ff91c 100644
--- a/resources/js/views/gallery-panels/Photo.vue
+++ b/resources/js/views/gallery-panels/Photo.vue
@@ -114,7 +114,7 @@
 	</div>
 	<PhotoEdit v-if="photo?.rights.can_edit" :photo="photo" v-model:visible="isEditOpen" />
 	<DialogPhotoMove :photo="photo" v-model:visible="isMovePhotoVisible" @moved="updated" />
-	<DialogPhotoDelete :photo="photo" v-model:visible="isDeletePhotoVisible" @deleted="updated" />
+	<DialogPhotoDelete :photo="photo" v-model:visible="isDeletePhotoVisible" :album-id="props.albumid" @deleted="updated" />
 </template>
 <script setup lang="ts">
 import DockButton from "@/components/gallery/photo/DockButton.vue";