A lot of things.

resources/js/SubmissionsClass/GalleryManager.js

@@ -72,8 +72,9 @@ export function GalleryManager() {
                     break;
 
                 const IMG = GalleryImage();
-                IMG.getOldImage( PATH );
+                IMG.serverFilePath = PATH;
                 this.images.push(IMG);
+                this.images[this.images.length - 1].getOldImage( PATH );
             }
         },
 

resources/js/SubmissionsClass/MainImageManager.js

@@ -2,6 +2,12 @@ export function MainImageManager() {
 
     return {
 
+        /**
+         * Used for gallery managament and indexation.
+         * @type {string}
+         */
+        key: crypto.randomUUID(),
+
         /**
          * If an image has been uploaded or not.
          * @type {boolean}

resources/js/app.js

@@ -6,7 +6,16 @@ import { calculate as calculateHashes } from "./hashes.js";
 import hovercard from "./hovercard.js";
 import notifications from "./notifications.js";
 import conversations from "./conversations.js";
+import settings from "./settings.js";
 
+/**
+ * Get config defined in meta.blade.php
+ * @param {string} key
+ * @return {string|null}
+ */
+window.getConfig = function( key ){
+    return document.querySelector('meta[name="config-' + key +  '"]').getAttribute('content') ?? null;
+}
 
 // Lucide icons.
 createIcons({ icons });
@@ -31,3 +40,6 @@ Alpine.store('notifications', notifications() );
 
 // Conversations
 Alpine.store('conversations', conversations() );
+
+// Settings
+Alpine.store('settings', settings() );

resources/js/settings.js

@@ -0,0 +1,83 @@
+import Cookies from 'js-cookie';
+
+export default function settings() {
+    return {
+
+        /**
+         * @type {boolean}
+         */
+        start: false,
+
+        /**
+         * Two keys, default and alternate.
+         * @type {Object}
+         */
+        xfUrls: {},
+
+        /**
+         * @type {number[]}
+         */
+        entriesPerPage: [ 12, 30, 48 ],
+
+        /**
+         * @type {string}
+         */
+        currentTheme: Cookies.get("theme") ?? 'default',
+
+        /**
+         * @type {number}
+         */
+        currentEntriesPerPage: Cookies.get("entries_per_page") ?? 30,
+
+        /**
+         *
+         * @param {string} newTheme default|alternate
+         */
+        themeChanged( newTheme ){
+            if( newTheme !== "default" && newTheme !== "alternate" )
+                return;
+
+            if( newTheme === this.currentTheme )
+                return;
+
+            this.currentTheme = newTheme;
+            document.documentElement.classList.toggle('light-mode', this.currentTheme === 'alternate');
+
+            Cookies.set('theme', this.currentTheme, { expires: 365, path: '/', domain: window.getConfig('session-domain') } );
+            this.syncXF();
+        },
+
+        /**
+         *
+         * @return {Promise<void>}
+         */
+        async syncXF(){
+            await fetch(this.xfUrls[this.currentTheme ?? 'default'], { method: "GET", credentials: "include", mode: "no-cors" });
+        },
+
+        /**
+         *
+         */
+        toggleTheme(){
+            this.themeChanged(this.currentTheme === 'default' ? 'alternate' : 'default');
+        },
+
+        /**
+         *
+         * @param n
+         */
+        entriesPerPageChanged( n ){
+           if( !this.entriesPerPage.includes(n) )
+               return;
+
+           this.entriesPerPage = n;
+           Cookies.set('entries_per_page', this.entriesPerPage, { expires: 365, path: '/', domain: window.getConfig('session-domain') } );
+           if( window.Livewire ){
+               Livewire.dispatch('entriesPerPageChanged', {n});
+           }
+        },
+
+        open(){ this.start = !this.start; },
+        close(){ this.start = false; },
+    }
+}