improve useability of photo rating

Author: ildyria

resources/js/components/gallery/photoModule/PhotoRatingOverlay.vue

@@ -1,18 +1,46 @@
 <template>
 	<div
-		v-if="isRatingEnabled && !are_details_open && displayedRating > 0"
+		v-if="isRatingEnabled && !are_details_open"
 		:class="{
-			'absolute bottom-0 w-full sm:w-1/2 left-1/2 -translate-x-1/2 z-20 sm:h-1/8 h-14': true,
-			'lg:hover:opacity-100 transition-opacity duration-500 ease-in-out': isHoverMode && !isTouchDevice(),
+			'group absolute bottom-0 w-full sm:w-1/2 left-1/2 -translate-x-1/2 z-20 sm:h-1/8 h-14': true,
 			'opacity-50 lg:opacity-20': isHoverMode && !isTouchDevice() && !isFullTransparency,
+			'hover:opacity-100 transition-opacity duration-500 ease-in-out': isHoverMode && !isTouchDevice(),
 			'opacity-75': isHoverMode && isTouchDevice() && !isFullTransparency,
 			'opacity-0': isHoverMode && isFullTransparency,
 			hidden: is_slideshow_active,
 		}"
 	>
-		<div class="absolute left-1/2 -translate-x-1/2 bottom-7 flex items-center gap-1 text-shadow">
+		<div v-if="displayedRating > 0" class="absolute left-1/2 -translate-x-1/2 bottom-7 text-shadow group-hover:opacity-0">
 			<StarRow :rating="displayedRating" size="large" />
 		</div>
+		<div
+			v-if="userStore.user !== undefined && photoStore?.photo && photoStore?.photo.rating"
+			class="absolute left-1/2 -translate-x-1/2 bottom-7 text-shadow"
+		>
+			<!-- Star rating buttons (1-5) -->
+			<div class="flex items-center h-6 gap-0.5">
+				<button
+					v-for="rating in [1, 2, 3, 4, 5]"
+					:key="`rate-${rating}`"
+					:disabled="loading"
+					:class="{
+						'w-6 h-6 transition-colors rounded block': true,
+						'cursor-pointer': !loading,
+						'cursor-not-allowed opacity-50': loading,
+					}"
+					@mouseenter="handleMouseEnter(rating)"
+					@mouseleave="handleMouseLeave()"
+					@click="handleRatingClick(photoStore?.photo.id, rating as 1 | 2 | 3 | 4 | 5)"
+				>
+					<i
+						:class="{
+							'text-xl pi pi-star-fill text-amber-500': rating <= (hoverRating ?? photoStore?.photo.rating.rating_user),
+							'text-xl pi pi-star text-muted-color': rating > (hoverRating ?? photoStore?.photo.rating.rating_user),
+						}"
+					/>
+				</button>
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -24,13 +52,30 @@ import { isTouchDevice } from "@/utils/keybindings-utils";
 import { useTogglablesStateStore } from "@/stores/ModalsState";
 import { storeToRefs } from "pinia";
 import StarRow from "@/components/icons/StarRow.vue";
+import { useUserStore } from "@/stores/UserState";
+import { useToast } from "primevue/usetoast";
+import { useRating } from "@/composables/photo/useRating";
 
 const photoStore = usePhotoStore();
 const lycheeStore = useLycheeStateStore();
 const togglableStore = useTogglablesStateStore();
+const userStore = useUserStore();
+const toast = useToast();
 
 const { is_slideshow_active, are_details_open } = storeToRefs(togglableStore);
 
+const { hoverRating, loading, handleRatingClick } = useRating(photoStore, toast, userStore);
+
+function handleMouseEnter(rating: number) {
+	if (!loading.value) {
+		hoverRating.value = rating;
+	}
+}
+
+function handleMouseLeave() {
+	hoverRating.value = null;
+}
+
 // Compute which rating should be shown on thumbnails
 const displayedRating = computed(() => {
 	if (lycheeStore.is_rating_show_avg_in_photo_view_enabled) {

resources/js/components/icons/StarRow.vue

@@ -8,7 +8,7 @@
 		}"
 	>
 		<span
-			class="block"
+			class="block px-0.5"
 			v-for="index in 5"
 			:key="`avg-star-${index}`"
 			:class="{

resources/js/composables/photo/useRating.ts

@@ -24,6 +24,11 @@ export function useRating(photoStore: PhotoStore, toast: ToastServiceMethods, us
 
 		loading.value = true;
 
+		if (photoStore.photo.rating.rating_user === rating) {
+			// If the clicked rating is the same as the current rating, remove the rating
+			rating = 0;
+		}
+
 		PhotoService.setRating(photoId, rating)
 			.then((response) => {
 				// Update only the rating field in the current photo store
@@ -43,7 +48,7 @@ export function useRating(photoStore: PhotoStore, toast: ToastServiceMethods, us
 					severity: "success",
 					summary: trans("toasts.success"),
 					detail: trans(message),
-					life: 3000,
+					life: 1000,
 				});
 			})
 			.catch((error) => {