Saves Filters to Local Storage

The filters on the mod listing page are now also saved to the browser's local storage system. This means you can set a bunch of filters and a sort order, browse away (or close the browser), and the next time you visit the page the site will remember the filters that you had set.

app/Livewire/Mod/Index.php

@@ -6,6 +6,7 @@ use App\Http\Filters\ModFilter;
 use App\Models\SptVersion;
 use Illuminate\Contracts\View\View;
 use Illuminate\Database\Eloquent\Collection;
+use Livewire\Attributes\Computed;
 use Livewire\Attributes\Url;
 use Livewire\Component;
 use Livewire\WithPagination;
@@ -89,12 +90,16 @@ class Index extends Component
         $this->query = '';
         $this->sptVersion = $this->getLatestMinorVersions()->pluck('version')->toArray();
         $this->featured = 'include';
+
+        // Clear local storage
+        $this->dispatch('clear-filters');
     }
 
     /**
      * Compute the count of active filters.
      */
-    public function getFilterCountProperty(): int
+    #[Computed]
+    public function filterCount(): int
     {
         $count = 0;
         if ($this->query !== '') {

resources/js/app.js

@@ -1,3 +1,12 @@
 import "./registerViteAssets";
 import "./registerAlpineLivewire";
 import "./themeToggle";
+
+document.addEventListener("livewire:init", () => {
+    Livewire.on("clear-filters", (event) => {
+        localStorage.removeItem("filter-query");
+        localStorage.removeItem("filter-order");
+        localStorage.removeItem("filter-sptVersion");
+        localStorage.removeItem("filter-featured");
+    });
+});

resources/views/livewire/mod/index.blade.php

@@ -1,4 +1,35 @@
-<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+<div class="max-w-7xl mx-auto sm:px-6 lg:px-8"
+     x-data="{
+         query: @entangle('query'),
+         order: @entangle('order'),
+         sptVersion: @entangle('sptVersion'),
+         featured: @entangle('featured'),
+         init() {
+             this.loadFiltersFromLocalStorage();
+             $wire.$refresh();
+
+             $watch('query', value => this.saveFilterToLocalStorage('query', value));
+             $watch('order', value => this.saveFilterToLocalStorage('order', value));
+             $watch('sptVersion', value => this.saveFilterToLocalStorage('sptVersion', value));
+             $watch('featured', value => this.saveFilterToLocalStorage('featured', value));
+         },
+         saveFilterToLocalStorage(key, value) {
+             localStorage.setItem(`filter-${key}`, JSON.stringify(value));
+         },
+         loadFiltersFromLocalStorage() {
+             const query = localStorage.getItem('filter-query');
+             if (query) this.query = JSON.parse(query);
+
+             const order = localStorage.getItem('filter-order');
+             if (order) this.order = JSON.parse(order);
+
+             const sptVersion = localStorage.getItem('filter-sptVersion');
+             if (sptVersion) this.sptVersion = JSON.parse(sptVersion);
+
+             const featured = localStorage.getItem('filter-featured');
+             if (featured) this.featured = JSON.parse(featured);
+         },
+     }">
     <div class="px-4 py-8 sm:px-6 lg:px-8 bg-white dark:bg-gray-900 overflow-hidden shadow-xl dark:shadow-gray-900 rounded-none sm:rounded-lg">
         <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-200">{{ __('Mods') }}</h1>
         <p class="mt-4 text-base text-slate-500 dark:text-gray-300">{!! __('Explore an enhanced <abbr title="Single Player Tarkov">SPT</abbr> experience with the mods available below. Check out the featured mods for a tailored solo-survival game with maximum immersion.') !!}</p>