Completely new front-end & version 5.0.0! (#2035)

Author: ildyria

.env.example

@@ -9,6 +9,9 @@ APP_FORCE_HTTPS=false
 # Do note that this disable CSP!!
 DEBUGBAR_ENABLED=false
 
+# enable or disable the v5 layout.
+LIVEWIRE_ENABLED=true
+
 # enable or disable log viewer. By default it is enabled.
 LOG_VIEWER_ENABLED=true
 
@@ -101,3 +104,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/.env.mariadb

@@ -3,6 +3,7 @@ APP_URL=https://localhost
 APP_ENV=dev
 APP_KEY=SomeRandomString
 APP_DEBUG=true
+LIVEWIRE_ENABLED=false
 
 DB_CONNECTION=mysql
 DB_HOST=localhost

.github/workflows/.env.postgresql

@@ -3,6 +3,7 @@ APP_URL=https://localhost
 APP_ENV=dev
 APP_KEY=SomeRandomString
 APP_DEBUG=true
+LIVEWIRE_ENABLED=false
 
 DB_CONNECTION=pgsql
 DB_HOST=localhost

.github/workflows/.env.sqlite

@@ -3,6 +3,7 @@ APP_URL=https://localhost
 APP_ENV=dev
 APP_KEY=SomeRandomString
 APP_DEBUG=true
+LIVEWIRE_ENABLED=false
 
 DB_CONNECTION=sqlite
 DB_LIST_FOREIGN_KEYS=true

.github/workflows/CICD.yml

@@ -69,6 +69,35 @@ 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 -D
+
+      - name: Check Style
+        run: npm run check-formatting
+
+      - name: Check TypeScript
+        run: npm run check
+
+      - name: Compile Front-end
+        run: npm run build
+
   phpstan:
     name: 2️⃣ PHP 8.2 - PHPStan
     runs-on: ubuntu-latest
@@ -106,6 +135,7 @@ jobs:
           - sqlite
         test-suite:
           - Feature
+          - Livewire
     # Service containers to run with `container-job`
     services:
       # Label used to access the service container
@@ -282,6 +312,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

.gitignore

@@ -5,9 +5,11 @@ build/*
 # Those are personal
 public/dist/user.css
 public/dist/custom.js
+public/build/*
 
 # Pictures we do not commit
 public/uploads/**
+public/uploads-*/**
 
 # Storage stuff: useless
 /storage/*.key

.prettierrc.json

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

Makefile

@@ -5,7 +5,13 @@ composer:
 	composer install --prefer-dist --no-dev
 	php artisan vendor:publish --tag=log-viewer-asset
 
-dist-gen: clean composer
+npm-build:
+	rm -r public/build 2> /dev/null || true
+	rm -r node_modules 2> /dev/null || true
+	npm install
+	npm run build
+
+dist-gen: clean composer npm-build
 	@echo "packaging..."
 	@mkdir Lychee
 	@mkdir Lychee/public
@@ -19,6 +25,7 @@ dist-gen: clean composer
 	@cp -r config                           Lychee
 	@cp -r composer-cache                   Lychee
 	@cp -r database                         Lychee
+	@cp -r public/build                     Lychee/public
 	@cp -r public/dist                      Lychee/public
 	@cp -r public/vendor                    Lychee/public
 	@cp -r public/installer                 Lychee/public
@@ -46,6 +53,7 @@ dist-gen: clean composer
 	@cp -r version.md                       Lychee
 	@touch Lychee/storage/logs/laravel.log
 	@touch Lychee/public/dist/user.css
+	@touch Lychee/public/dist/custom.js
 	@touch Lychee/public/uploads/import/index.html
 	@touch Lychee/public/sym/index.html
 
@@ -63,6 +71,12 @@ dist: dist-clean
 clean:
 	@rm build/* 2> /dev/null || true
 	@rm -r Lychee 2> /dev/null || true
+	@rm -r public/build 2> /dev/null || true
+	@rm -r node_modules 2> /dev/null || true
+	@rm -r vendor  2> /dev/null || true
+
+install: composer npm-build
+	php artisan migrate
 
 test:
 	@if [ -x "vendor/bin/phpunit" ]; then \
@@ -90,6 +104,7 @@ formatting:
 phpstan:
 	vendor/bin/phpstan analyze
 
+# Generating new versions
 gen_minor:
 	php scripts/gen_release.php
 	git add database
@@ -106,6 +121,8 @@ gen_major:
 release_major: gen_major
 	git commit -m "bump to version $(shell cat version.md)"
 
+# Building tests 1 by 1
+
 TESTS_PHP := $(shell find tests/Feature -name "*Test.php" -printf "%f\n")
 TEST_DONE := $(addprefix build/,$(TESTS_PHP:.php=.done))
 

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/Actions/Search/PhotoSearch.php

@@ -8,6 +8,7 @@
 use App\Models\Extensions\SortingDecorator;
 use App\Models\Photo;
 use App\Policies\PhotoQueryPolicy;
+use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Collection;
 
 class PhotoSearch
@@ -20,9 +21,27 @@ public function __construct(PhotoQueryPolicy $photoQueryPolicy)
 	}
 
 	/**
+	 * Apply search directly.
+	 *
 	 * @throws InternalLycheeException
 	 */
 	public function query(array $terms): Collection
+	{
+		$query = $this->sqlQuery($terms);
+		$sorting = PhotoSortingCriterion::createDefault();
+
+		return (new SortingDecorator($query))
+			->orderBy($sorting->column, $sorting->order)->get();
+	}
+
+	/**
+	 * Create the query manually.
+	 *
+	 * @param array $terms
+	 *
+	 * @return Builder
+	 */
+	public function sqlQuery(array $terms): Builder
 	{
 		$query = $this->photoQueryPolicy->applySearchabilityFilter(
 			Photo::query()->with(['album', 'size_variants', 'size_variants.sym_links'])
@@ -40,10 +59,6 @@ public function query(array $terms): Collection
 			);
 		}
 
-		$sorting = PhotoSortingCriterion::createDefault();
-
-		return (new SortingDecorator($query))
-			->orderBy($sorting->column, $sorting->order)
-			->get();
+		return $query;
 	}
 }