Show owner instead of just Shared albums

app/Http/Resources/Models/ThumbAlbumResource.php

@@ -37,6 +37,7 @@ class ThumbAlbumResource extends Data
 	private ?string $min_taken_at = null;
 	private ?string $max_taken_at = null;
 	public ?string $formatted_min_max = null;
+	public ?string $owner = null;
 
 	public AlbumRightsResource $rights;
 
@@ -60,6 +61,7 @@ public function __construct(AbstractAlbum $data)
 			$this->created_at = $data->created_at->format($date_format);
 			$policy = AlbumProtectionPolicy::ofBaseAlbum($data);
 			$this->description = Str::limit($data->description, 100);
+			$this->owner = $data->owner->username;
 		}
 
 		if ($data instanceof Album) {

resources/js/composables/album/albumsRefresher.ts

@@ -3,15 +3,21 @@ import { AuthStore } from "@/stores/Auth";
 import { LycheeStateStore } from "@/stores/LycheeState";
 import { computed, ref, Ref } from "vue";
 
+export type SharedAlbums = {
+	owner: string;
+	albums: App.Http.Resources.Models.ThumbAlbumResource[];
+	iter: number;
+};
+
 export function useAlbumsRefresher(auth: AuthStore, lycheeStore: LycheeStateStore, isLoginOpen: Ref<boolean>) {
 	const user = ref(undefined) as Ref<undefined | App.Http.Resources.Models.UserResource>;
 	const isKeybindingsHelpOpen = ref(false);
 	const smartAlbums = ref([]) as Ref<App.Http.Resources.Models.ThumbAlbumResource[]>;
 	const albums = ref([]) as Ref<App.Http.Resources.Models.ThumbAlbumResource[]>;
-	const sharedAlbums = ref([]) as Ref<App.Http.Resources.Models.ThumbAlbumResource[]>;
+	const sharedAlbums = ref([]) as Ref<SharedAlbums[]>;
 	const rootConfig = ref(undefined) as Ref<undefined | App.Http.Resources.GalleryConfigs.RootConfig>;
 	const rootRights = ref(undefined) as Ref<undefined | App.Http.Resources.Rights.RootAlbumRightsResource>;
-	const selectableAlbums = computed(() => albums.value.concat(sharedAlbums.value));
+	const selectableAlbums = computed(() => albums.value.concat(sharedAlbums.value.map((album) => album.albums).flat()));
 
 	function refresh() {
 		auth.getUser().then((data) => {
@@ -29,7 +35,10 @@ export function useAlbumsRefresher(auth: AuthStore, lycheeStore: LycheeStateStor
 				smartAlbums.value = (data.data.smart_albums as App.Http.Resources.Models.ThumbAlbumResource[]) ?? [];
 				albums.value = data.data.albums as App.Http.Resources.Models.ThumbAlbumResource[];
 				smartAlbums.value = smartAlbums.value.concat(data.data.tag_albums as App.Http.Resources.Models.ThumbAlbumResource[]);
-				sharedAlbums.value = (data.data.shared_albums as App.Http.Resources.Models.ThumbAlbumResource[]) ?? [];
+				sharedAlbums.value = [];
+
+				prepSharedAlbum((data.data.shared_albums as App.Http.Resources.Models.ThumbAlbumResource[]) ?? []);
+
 				rootConfig.value = data.data.config;
 				rootRights.value = data.data.rights;
 
@@ -47,6 +56,23 @@ export function useAlbumsRefresher(auth: AuthStore, lycheeStore: LycheeStateStor
 			});
 	}
 
+	function prepSharedAlbum(sharedAlbumsData: App.Http.Resources.Models.ThumbAlbumResource[]) {
+		// In this specific case, album owner is not null.
+		const sharedOwners: string[] = [...new Set(sharedAlbumsData.map((album) => album.owner as string))];
+		sharedOwners.forEach((owner) => {
+			const albums = sharedAlbumsData.filter((album) => album.owner === owner);
+			sharedAlbums.value.push({ owner, albums, iter: 0 });
+		});
+
+		// loop over all the shared albums to prep the indexes.
+		let idx = 0;
+		let sum = albums.value.length;
+		for (idx = 0; idx < sharedAlbums.value.length; idx++) {
+			sharedAlbums.value[idx].iter = sum;
+			sum += sharedAlbums.value[idx].albums.length;
+		}
+	}
+
 	return {
 		user,
 		isKeybindingsHelpOpen,

resources/js/lychee.d.ts

@@ -410,6 +410,7 @@ declare namespace App.Http.Resources.Models {
 		num_photos: number;
 		created_at: string;
 		formatted_min_max: string | null;
+		owner: string | null;
 		rights: App.Http.Resources.Rights.AlbumRightsResource;
 	};
 	export type ThumbResource = {

resources/js/views/gallery-panels/Albums.vue

@@ -38,20 +38,23 @@
 			@clicked="albumClick"
 			@contexted="albumMenuOpen"
 		/>
-		<AlbumThumbPanel
-			v-if="sharedAlbums.length > 0"
-			header="lychee.SHARED_ALBUMS"
-			:album="undefined"
-			:albums="sharedAlbums"
-			:user="user"
-			:config="albumPanelConfig"
-			:is-alone="!albums.length"
-			:are-nsfw-visible="are_nsfw_visible"
-			:idx-shift="albums.length"
-			:selected-albums="selectedAlbumsIds"
-			@clicked="albumClick"
-			@contexted="albumMenuOpen"
-		/>
+
+		<template v-for="sharedAlbum in sharedAlbums">
+			<AlbumThumbPanel
+				v-if="sharedAlbums.length > 0"
+				:header="sharedAlbum.owner"
+				:album="undefined"
+				:albums="sharedAlbum.albums"
+				:user="user"
+				:config="albumPanelConfig"
+				:is-alone="!albums.length"
+				:are-nsfw-visible="are_nsfw_visible"
+				:idx-shift="sharedAlbum.iter"
+				:selected-albums="selectedAlbumsIds"
+				@clicked="albumClick"
+				@contexted="albumMenuOpen"
+			/>
+		</template>
 	</div>
 	<ContextMenu ref="menu" :model="Menu" :class="Menu.length === 0 ? 'hidden' : ''">
 		<template #item="{ item, props }">
@@ -136,7 +139,6 @@ import Divider from "primevue/divider";
 import { Collapse } from "vue-collapsed";
 import AlbumService from "@/services/album-service";
 import { useRouter } from "vue-router";
-import { Uploadable } from "@/components/modals/UploadPanel.vue";
 import { useMouseEvents } from "@/composables/album/uploadEvents";
 
 const auth = useAuthStore();