Option for bigger sized previous/next buttons

app/Enum/SmallLargeType.php

@@ -0,0 +1,18 @@
+<?php
+
+/**
+ * SPDX-License-Identifier: MIT
+ * Copyright (c) 2017-2018 Tobias Reich
+ * Copyright (c) 2018-2025 LycheeOrg.
+ */
+
+namespace App\Enum;
+
+/**
+ * Enum SmallLargeType.
+ */
+enum SmallLargeType: string
+{
+	case SMALL = 'small';
+	case LARGE = 'large';
+}

app/Http/Resources/GalleryConfigs/InitConfig.php

@@ -12,6 +12,7 @@
 use App\Enum\AlbumDecorationType;
 use App\Enum\ImageOverlayType;
 use App\Enum\PhotoThumbInfoType;
+use App\Enum\SmallLargeType;
 use App\Enum\ThumbAlbumSubtitleType;
 use App\Enum\ThumbOverlayVisibilityType;
 use App\Models\Configs;
@@ -43,6 +44,7 @@ class InitConfig extends Data
 	public bool $can_autoplay;
 	public bool $is_exif_disabled;
 	public bool $is_favourite_enabled;
+	public SmallLargeType $photo_previous_next_size;
 
 	// Thumbs configuration
 	public ThumbOverlayVisibilityType $display_thumb_album_overlay;
@@ -106,6 +108,7 @@ public function __construct()
 		$this->can_autoplay = Configs::getValueAsBool('autoplay_enabled');
 		$this->is_exif_disabled = Configs::getValueAsBool('exif_disabled_for_all');
 		$this->is_favourite_enabled = Configs::getValueAsBool('client_side_favourite_enabled');
+		$this->photo_previous_next_size = Configs::getValueAsEnum('photo_previous_next_size', SmallLargeType::class);
 
 		// Thumbs configuration
 		$this->display_thumb_album_overlay = Configs::getValueAsEnum('display_thumb_album_overlay', ThumbOverlayVisibilityType::class);

database/migrations/2025_05_17_075632_optional-bigger-left-right-icons.php

@@ -0,0 +1,32 @@
+<?php
+
+/**
+ * SPDX-License-Identifier: MIT
+ * Copyright (c) 2017-2018 Tobias Reich
+ * Copyright (c) 2018-2025 LycheeOrg.
+ */
+
+use App\Models\Extensions\BaseConfigMigration;
+
+return new class() extends BaseConfigMigration {
+	public const CAT = 'Gallery';
+
+	public function getConfigs(): array
+	{
+		// landing_background
+		return [
+			[
+				'key' => 'photo_previous_next_size',
+				'value' => 'small',
+				'cat' => self::CAT,
+				'type_range' => 'small|large',
+				'description' => 'Select the size of the previous/next buttons in photo view.',
+				'details' => 'Those buttons are hidden by default and only visible when the mouse get close to the left/right side of the screen.',
+				'is_expert' => true,
+				'is_secret' => true,
+				'level' => 0,
+				'order' => 36,
+			],
+		];
+	}
+};

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

@@ -4,20 +4,29 @@
 			:to="photoRoute(props.photoId)"
 			:id="props.is_next ? 'nextButton' : 'previousButton'"
 			:class="{
-				'absolute top-1/2 border border-solid border-neutral-200 -mt-5 py-2 px-3 transition-all opacity-0 group-hover:opacity-100 bg-cover': true,
+				'absolute top-1/2 border border-solid border-neutral-200 dark:border-neutral-700': true,
+				'-mt-5 transition-all opacity-0 group-hover:opacity-100 bg-cover': true,
+				'py-10.75 px-11': photo_previous_next_size === 'large',
+				'py-2 px-3': photo_previous_next_size === 'small',
+				'hover:border-primary-400 fill-neutral-400 hover:fill-primary-400': true,
 				'-right-px group-hover:translate-x-0 translate-x-full': props.is_next,
 				'-left-px group-hover:translate-x-0 -translate-x-full': !props.is_next,
 			}"
 			:style="props.style"
 		>
-			<MiniIcon :icon="props.is_next ? 'caret-right' : 'caret-left'" class="my-0 h-6 w-5 mr-0 ml-0" />
+			<MiniIcon :icon="props.is_next ? 'caret-right' : 'caret-left'" :fill="''" class="m-0 h-6 w-5" />
 		</router-link>
 	</div>
 </template>
 <script setup lang="ts">
 import MiniIcon from "@/components/icons/MiniIcon.vue";
 import { usePhotoRoute } from "@/composables/photo/photoRoute";
 import { useRouter } from "vue-router";
+import { useLycheeStateStore } from "@/stores/LycheeState";
+import { storeToRefs } from "pinia";
+
+const lycheeStateStore = useLycheeStateStore();
+const { photo_previous_next_size } = storeToRefs(lycheeStateStore);
 
 const props = defineProps<{
 	is_next: boolean;

resources/js/lychee.d.ts

@@ -95,6 +95,7 @@ declare namespace App.Enum {
 	export type PhotoThumbInfoType = "title" | "description";
 	export type SeverityType = "emergency" | "alert" | "critical" | "error" | "warning" | "notice" | "info" | "debug";
 	export type SizeVariantType = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
+	export type SmallLargeType = "small" | "large";
 	export type SmartAlbumType = "unsorted" | "starred" | "recent" | "on_this_day";
 	export type StorageDiskType = "images" | "s3";
 	export type ThumbAlbumSubtitleType = "description" | "takedate" | "creation" | "oldstyle";
@@ -241,6 +242,7 @@ declare namespace App.Http.Resources.GalleryConfigs {
 		can_autoplay: boolean;
 		is_exif_disabled: boolean;
 		is_favourite_enabled: boolean;
+		photo_previous_next_size: App.Enum.SmallLargeType;
 		display_thumb_album_overlay: App.Enum.ThumbOverlayVisibilityType;
 		display_thumb_photo_overlay: App.Enum.ThumbOverlayVisibilityType;
 		album_subtitle_type: App.Enum.ThumbAlbumSubtitleType;

resources/js/stores/LycheeState.ts

@@ -29,6 +29,7 @@ export const useLycheeStateStore = defineStore("lychee-store", {
 		can_autoplay: false,
 		is_exif_disabled: false,
 		is_favourite_enabled: false,
+		photo_previous_next_size: "small" as App.Enum.SmallLargeType,
 
 		// keybinding help
 		show_keybinding_help_popup: false,
@@ -137,6 +138,7 @@ export const useLycheeStateStore = defineStore("lychee-store", {
 					this.is_small2x_download_enabled = data.is_small2x_download_enabled;
 					this.is_medium_download_enabled = data.is_medium_download_enabled;
 					this.is_medium2x_download_enabled = data.is_medium2x_download_enabled;
+					this.photo_previous_next_size = data.photo_previous_next_size;
 				})
 				.catch((error) => {
 					// In this specific case, even though it has been possibly disabled, we really need to see the error.