Enable full support of Livewire + Tailwind: New front-end

.env.example

@@ -8,6 +8,7 @@ APP_FORCE_HTTPS=false
 # enable or disable debug bar. By default it is disabled.
 # Do note that this disable CSP!!
 DEBUGBAR_ENABLED=false
+LIVEWIRE_ENABLED=false
 
 # enable or disable log viewer. By default it is enabled.
 LOG_VIEWER_ENABLED=true
@@ -101,3 +102,6 @@ TRUSTED_PROXIES=null
 
 # Comma-separated list of class names of diagnostics checks that should be skipped.
 #SKIP_DIAGNOSTICS_CHECKS=
+
+VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

.github/workflows/CICD.yml

@@ -69,6 +69,32 @@ jobs:
       - name: Check source code for code style errors
         run: PHP_CS_FIXER_IGNORE_ENV=1 vendor/bin/php-cs-fixer fix --config=.php-cs-fixer.php --verbose --diff --dry-run
 
+  check_js:
+    name: 2️⃣ JS Node ${{ matrix.node-version }} - Code Style errors & Compilation
+    runs-on: ubuntu-latest
+    needs:
+      - php_syntax_errors
+    strategy:
+        matrix:
+            node-version: [16, 18, 20]
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+            node-version: ${{ matrix.node-version }}
+
+      - name: Install
+        run: npm install
+
+      - name: Check Style
+        run: npm run check-formatting
+
+      - name: Compile Front-end
+        run: npm run build
+
   phpstan:
     name: 2️⃣ PHP 8.1 - PHPStan
     runs-on: ubuntu-latest
@@ -106,6 +132,7 @@ jobs:
           - sqlite
         test-suite:
           - Feature
+          - Livewire
     # Service containers to run with `container-job`
     services:
       # Label used to access the service container
@@ -282,6 +309,17 @@ jobs:
         with:
           composer-options: --no-dev
 
+      - name: Use Node.js 20
+        uses: actions/setup-node@v3
+        with:
+            node-version: 20
+
+      - name: Install
+        run: npm install
+
+      - name: Compile Front-end
+        run: npm run build
+
       - name: Build Dist
         run: |
           make clean dist

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+	"printWidth": 150
+}

app/Actions/Diagnostics/Pipes/Infos/SystemInfo.php

@@ -4,6 +4,8 @@
 
 use App\Actions\Diagnostics\Diagnostics;
 use App\Contracts\DiagnosticPipe;
+use App\Facades\Helpers;
+use App\Livewire\Components\Forms\Add\Upload;
 use Carbon\CarbonTimeZone;
 use Illuminate\Database\QueryException;
 use Illuminate\Support\Facades\DB;
@@ -53,10 +55,18 @@ public function handle(array &$data, \Closure $next): array
 		$data[] = Diagnostics::line('Timezone:', ($timeZone !== false ? $timeZone : null)?->getName());
 		$data[] = Diagnostics::line('Max uploaded file size:', ini_get('upload_max_filesize'));
 		$data[] = Diagnostics::line('Max post size:', ini_get('post_max_size'));
+		$this->getUploadLimit($data);
 		$data[] = Diagnostics::line('Max execution time: ', ini_get('max_execution_time'));
 		$data[] = Diagnostics::line($dbtype . ' Version:', $dbver);
 		$data[] = '';
 
 		return $next($data);
 	}
+
+	private function getUploadLimit(array &$data): void
+	{
+		$size = Upload::getUploadLimit();
+
+		$data[] = Diagnostics::line('Livewire chunk size:', Helpers::getSymbolByQuantity($size));
+	}
 }

app/Contracts/Livewire/Openable.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Contracts\Livewire;
+
+/**
+ * This defines components which have an openable state.
+ *
+ * @property bool $isOpen whether the Openable component is open or not.
+ */
+interface Openable
+{
+	/**
+	 * Open the component.
+	 *
+	 * @return void
+	 */
+	public function open(): void;
+
+	/**
+	 * Close the component.
+	 *
+	 * @return void
+	 */
+	public function close(): void;
+
+	/**
+	 * Toggle the component.
+	 *
+	 * @return void
+	 */
+	public function toggle(): void;
+}

app/Contracts/Livewire/Params.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Contracts\Livewire;
+
+/**
+ * This defines constants which are used as keys when sending dispatch messages between components.
+ */
+interface Params
+{
+	public const PARENT_ID = 'parentID';
+
+	public const ALBUM_ID = 'albumID';
+	public const ALBUM_IDS = 'albumIDs';
+
+	public const PHOTO_ID = 'photoID';
+	public const PHOTO_IDS = 'photoIDs';
+}

app/Contracts/Livewire/Reloadable.php

@@ -0,0 +1,8 @@
+<?php
+
+namespace App\Contracts\Livewire;
+
+interface Reloadable
+{
+	public function reloadPage(): void;
+}

app/Enum/AlbumDecorationOrientation.php

@@ -13,4 +13,20 @@ enum AlbumDecorationOrientation: string
 	case ROW_REVERSE = 'row-reverse';
 	case COLUMN = 'column';
 	case COLUMN_REVERSE = 'column-reverse';
+
+	/**
+	 * Convert the enum into it's translated format.
+	 * Note that it is missing owner.
+	 *
+	 * @return array<string,string>
+	 */
+	public static function localized(): array
+	{
+		return [
+			self::ROW->value => __('lychee.ALBUM_DECORATION_ORIENTATION_ROW'),
+			self::ROW_REVERSE->value => __('lychee.ALBUM_DECORATION_ORIENTATION_ROW_REVERSE'),
+			self::COLUMN->value => __('lychee.ALBUM_DECORATION_ORIENTATION_COLUMN'),
+			self::COLUMN_REVERSE->value => __('lychee.ALBUM_DECORATION_ORIENTATION_COLUMN_REVERSE'),
+		];
+	}
 }

app/Enum/AlbumDecorationType.php

@@ -14,4 +14,21 @@ enum AlbumDecorationType: string
 	case ALBUM = 'album';
 	case PHOTO = 'photo';
 	case ALL = 'all';
+
+	/**
+	 * Convert the enum into it's translated format.
+	 * Note that it is missing owner.
+	 *
+	 * @return array<string,string>
+	 */
+	public static function localized(): array
+	{
+		return [
+			self::NONE->value => __('lychee.ALBUM_DECORATION_NONE'),
+			self::LAYERS->value => __('lychee.ALBUM_DECORATION_ORIGINAL'),
+			self::ALBUM->value => __('lychee.ALBUM_DECORATION_ALBUM'),
+			self::PHOTO->value => __('lychee.ALBUM_DECORATION_PHOTO'),
+			self::ALL->value => __('lychee.ALBUM_DECORATION_ALL'),
+		];
+	}
 }

app/Enum/AlbumLayoutType.php

@@ -11,5 +11,24 @@ enum AlbumLayoutType: string
 {
 	case SQUARE = 'square';
 	case JUSTIFIED = 'justified';
-	case UNJUSTIFIED = 'unjustified';
+	case UNJUSTIFIED = 'unjustified'; // ! Legcay
+	case MASONRY = 'masonry';
+	case GRID = 'grid';
+
+	/**
+	 * Convert the enum into it's translated format.
+	 * Note that it is missing owner.
+	 *
+	 * @return array<string,string>
+	 */
+	public static function localized(): array
+	{
+		// yes, the UNJUSTIFIED is dropped.
+		return [
+			self::SQUARE->value => __('lychee.LAYOUT_SQUARES'),
+			self::JUSTIFIED->value => __('lychee.LAYOUT_JUSTIFIED'),
+			self::MASONRY->value => __('lychee.LAYOUT_MASONRY'),
+			self::GRID->value => __('lychee.LAYOUT_GRID'),
+		];
+	}
 }

app/Enum/ImageOverlayType.php

@@ -13,4 +13,20 @@ enum ImageOverlayType: string
 	case DESC = 'desc';
 	case DATE = 'date';
 	case EXIF = 'exif';
+
+	/**
+	 * Convert the enum into it's translated format.
+	 * Note that it is missing owner.
+	 *
+	 * @return array<string,string>
+	 */
+	public static function localized(): array
+	{
+		return [
+			self::EXIF->value => __('lychee.OVERLAY_EXIF'),
+			self::DESC->value => __('lychee.OVERLAY_DESCRIPTION'),
+			self::DATE->value => __('lychee.OVERLAY_DATE'),
+			self::NONE->value => __('lychee.OVERLAY_NONE'),
+		];
+	}
 }

app/Enum/Livewire/FileStatus.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Enum\Livewire;
+
+enum FileStatus: string
+{
+	case UPLOADING = 'uploading';
+	case PROCESSING = 'processing';
+	case READY = 'ready';
+	case SKIPPED = 'skipped';
+	case DONE = 'done';
+	case ERROR = 'error';
+}

app/Enum/Livewire/NotificationType.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Enum\Livewire;
+
+enum NotificationType: string
+{
+	case SUCCESS = 'success';
+	case ERROR = 'error';
+	case INFO = 'info';
+	case WARNING = 'warning';
+}

app/Enum/Traits/WireableEnumTrait.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Enum\Traits;
+
+use App\Exceptions\Internal\LycheeLogicException;
+use Closure;
+
+trait WireableEnumTrait
+{
+	public function toLivewire(): string|int
+	{
+		return $this->value;
+	}
+
+	public static function fromLivewire(mixed $value): self
+	{
+		if (!is_string($value) && !is_int($value)) {
+			throw new LycheeLogicException('Enum could not be instanciated from ' . strval($value), null);
+		}
+
+		return self::from($value);
+	}
+
+	/**
+	 * @return string[]|int[]|\Closure
+	 *
+	 * @psalm-return array<string, string|int> | Closure(string):(int|string)
+	 */
+	protected static function values()
+	{
+		return function (string $name): string {
+			return mb_strtolower($name);
+		};
+	}
+}

app/Exceptions/PhotoCollectionEmptyException.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Exceptions;
+
+use Symfony\Component\HttpFoundation\Response;
+
+/**
+ * PhotoCollectionEmptyException.
+ *
+ * This exception is thrown, if a user request a frame but no pictures can be found.
+ * We throw an error 500 because it is likely to be a server error.
+ */
+class PhotoCollectionEmptyException extends BaseLycheeException
+{
+	public const DEFAULT_MESSAGE = 'Photo collection is empty.';
+
+	public function __construct(string $msg = self::DEFAULT_MESSAGE, ?\Throwable $previous = null)
+	{
+		parent::__construct(Response::HTTP_INTERNAL_SERVER_ERROR, $msg, $previous);
+	}
+}

app/Http/Controllers/RedirectController.php

@@ -73,6 +73,13 @@ public function photo(Request $request, string $albumID, ?string $photoID): Symf
 				$this->unlock->do($album, $request['password']);
 			}
 
+			// If we are using livewire by default, we redirect to Livewire url intead.
+			if (config('app.livewire') === true) {
+				return $photoID === null ?
+					redirect(route('livewire-gallery-album', ['albumId' => $albumID])) :
+					redirect(route('livewire-gallery-photo', ['albumId' => $albumID, 'photoId' => $photoID]));
+			}
+
 			return $photoID === null ?
 				redirect('gallery#' . $albumID) :
 				redirect('gallery#' . $albumID . '/' . $photoID);

app/Http/Kernel.php

@@ -92,5 +92,6 @@ class Kernel extends HttpKernel
 		'content_type' => \App\Http\Middleware\ContentType::class,
 		'accept_content_type' => \App\Http\Middleware\AcceptContentType::class,
 		'redirect-legacy-id' => \App\Http\Middleware\RedirectLegacyPhotoID::class,
+		'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
 	];
 }