The eye does nothing if there are no hidden albums (#2857)

* The eye does nothing if there are no hidden albums, so better hide it to avoid confusing users

Author: ildyria

resources/js/components/gallery/AlbumHero.vue

@@ -59,6 +59,24 @@
 				>
 					<i class="pi pi-chart-scatter" />
 				</a>
+				<template v-if="isTouchDevice() && user?.id !== null">
+					<a
+						v-if="props.hasHidden && lycheeStore.are_nsfw_visible"
+						class="flex-shrink-0 px-3 cursor-pointer text-muted-color inline-block transform duration-300 hover:scale-150 hover:text-color"
+						:title="'hide hidden'"
+						@click="lycheeStore.are_nsfw_visible = false"
+					>
+						<i class="pi pi pi-eye-slash" />
+					</a>
+					<a
+						v-if="props.hasHidden && !lycheeStore.are_nsfw_visible"
+						class="flex-shrink-0 px-3 cursor-pointer text-muted-color inline-block transform duration-300 hover:scale-150 hover:text-color"
+						:title="'show hidden'"
+						@click="lycheeStore.are_nsfw_visible = true"
+					>
+						<i class="pi pi-eye" />
+					</a>
+				</template>
 			</div>
 			<div
 				v-if="props.album.preFormattedData.description"
@@ -72,16 +90,18 @@
 import AlbumService from "@/services/album-service";
 import { useAuthStore } from "@/stores/Auth";
 import { useLycheeStateStore } from "@/stores/LycheeState";
+import { isTouchDevice } from "@/utils/keybindings-utils";
 import { storeToRefs } from "pinia";
 import Card from "primevue/card";
 
 const auth = useAuthStore();
 const lycheeStore = useLycheeStateStore();
-const { is_se_enabled, is_se_preview_enabled } = storeToRefs(lycheeStore);
+const { is_se_enabled, is_se_preview_enabled, are_nsfw_visible } = storeToRefs(lycheeStore);
 const { user } = storeToRefs(auth);
 
 const props = defineProps<{
 	album: App.Http.Resources.Models.AlbumResource | App.Http.Resources.Models.TagAlbumResource | App.Http.Resources.Models.SmartAlbumResource;
+	hasHidden: boolean;
 }>();
 
 const emits = defineEmits<{

resources/js/components/headers/AlbumsHeader.vue

@@ -112,6 +112,7 @@ const props = defineProps<{
 		back_button_url: string;
 		login_button_position: string;
 	};
+	hasHidden: boolean;
 }>();
 
 const emits = defineEmits<{
@@ -279,13 +280,13 @@ const menu = computed(() =>
 			icon: "pi pi-eye-slash",
 			type: "fn",
 			callback: () => (lycheeStore.are_nsfw_visible = false),
-			if: isTouchDevice() && lycheeStore.are_nsfw_visible,
+			if: isTouchDevice() && props.hasHidden && lycheeStore.are_nsfw_visible,
 		},
 		{
 			icon: "pi pi-eye",
 			type: "fn",
 			callback: () => (lycheeStore.are_nsfw_visible = true),
-			if: isTouchDevice() && !lycheeStore.are_nsfw_visible,
+			if: isTouchDevice() && props.hasHidden && !lycheeStore.are_nsfw_visible,
 		},
 	].filter((item) => item.if),
 ) as ComputedRef<MenuRight[]>;

resources/js/composables/album/albumRefresher.ts

@@ -11,6 +11,7 @@ export function useAlbumRefresher(albumId: Ref<string>, auth: AuthStore, isLogin
 	const smartAlbum = ref<App.Http.Resources.Models.SmartAlbumResource | undefined>(undefined);
 	const album = computed(() => modelAlbum.value || tagAlbum.value || smartAlbum.value);
 	const isAlbumConsented = ref(false);
+	const hasHidden = computed(() => modelAlbum.value !== undefined && modelAlbum.value.albums.filter((album) => album.is_nsfw).length > 0);
 
 	const photos = ref<App.Http.Resources.Models.PhotoResource[]>([]);
 	const config = ref<App.Http.Resources.GalleryConfigs.AlbumConfig | undefined>(undefined);
@@ -76,6 +77,7 @@ export function useAlbumRefresher(albumId: Ref<string>, auth: AuthStore, isLogin
 		rights,
 		photos,
 		config,
+		hasHidden,
 		loadUser,
 		loadAlbum,
 		refresh,

resources/js/composables/album/albumsRefresher.ts

@@ -15,6 +15,7 @@ export function useAlbumsRefresher(auth: AuthStore, lycheeStore: LycheeStateStor
 	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()));
+	const hasHidden = computed(() => selectableAlbums.value.filter((album) => album.is_nsfw).length > 0);
 
 	function refresh(): Promise<[void, void]> {
 		isLoading.value = true;
@@ -73,6 +74,7 @@ export function useAlbumsRefresher(auth: AuthStore, lycheeStore: LycheeStateStor
 		rootConfig,
 		rootRights,
 		selectableAlbums,
+		hasHidden,
 		refresh,
 	};
 }

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

@@ -39,7 +39,13 @@
 						>{{ $t("lychee.UPLOAD_PHOTO") }}</Button
 					>
 				</div>
-				<AlbumHero v-if="!noData" :album="album" @open-sharing-modal="toggleShareAlbum" @open-statistics="toggleStatistics" />
+				<AlbumHero
+					v-if="!noData"
+					:album="album"
+					:has-hidden="hasHidden"
+					@open-sharing-modal="toggleShareAlbum"
+					@open-statistics="toggleStatistics"
+				/>
 				<template v-if="is_se_enabled && user?.id !== null">
 					<AlbumStatistics
 						:photos="photos"
@@ -249,7 +255,7 @@ function toggleSlideShow() {
 const { layoutConfig, loadLayoutConfig } = useGetLayoutConfig();
 
 // Set up Album ID reference. This one is updated at each page change.
-const { isAlbumConsented, isPasswordProtected, isLoading, user, modelAlbum, album, rights, photos, config, refresh } = useAlbumRefresher(
+const { isAlbumConsented, isPasswordProtected, isLoading, user, modelAlbum, album, rights, photos, config, hasHidden, refresh } = useAlbumRefresher(
 	albumid,
 	auth,
 	is_login_open,

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

@@ -17,6 +17,7 @@
 				@refresh="refresh"
 				@help="isKeybindingsHelpOpen = true"
 				:config="rootConfig"
+				:has-hidden="hasHidden"
 			/>
 		</Collapse>
 		<AlbumThumbPanel
@@ -177,7 +178,7 @@ const { are_nsfw_visible, title } = storeToRefs(lycheeStore);
 
 const photos = ref([]); // unused.
 
-const { user, isLoading, isKeybindingsHelpOpen, smartAlbums, albums, sharedAlbums, rootConfig, rootRights, selectableAlbums, refresh } =
+const { user, isLoading, isKeybindingsHelpOpen, smartAlbums, albums, sharedAlbums, rootConfig, rootRights, selectableAlbums, hasHidden, refresh } =
 	useAlbumsRefresher(auth, lycheeStore, is_login_open);
 
 const { selectedAlbum, selectedAlbumsIdx, selectedAlbums, selectedAlbumsIds, albumClick, selectEverything, unselect, hasSelection } = useSelection(