feat: implement persistent state management for generator

- Introduced utilities for loading and saving generator state to localStorage and query parameters.
- Added tests for persistent state functionality, ensuring correct handling of boolean and malformed values.
- Updated generator components to clear localStorage and history state before each test.
- Enhanced useGeneratorControls composable to support state hydration and persistence.
- Refactored Onlyfans component styles for improved layout and consistency.

Author: bestony

src/__tests__/generators.test.js

@@ -83,6 +83,8 @@ describe('generator components', () => {
   beforeEach(() => {
     document.body.innerHTML = '';
     setActivePinia(createPinia());
+    window.localStorage.clear();
+    window.history.replaceState(null, '', '/');
   });
 
   it('synchronizes text updates and highlight order in Pornhub generator', async () => {

src/__tests__/persistentState.test.js

@@ -0,0 +1,103 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import {
+  loadGeneratorState,
+  saveGeneratorState,
+  GENERATOR_STATE_STORAGE_KEY
+} from '@/utils/persistentState';
+
+describe('persistentState utilities', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    window.history.replaceState(null, '', '/');
+  });
+
+  it('parses boolean query params and preserves false values', () => {
+    window.history.replaceState(null, '', '/?transparentBg=0&reverseHighlight=yes');
+    const state = loadGeneratorState();
+    expect(state.transparentBg).toBe(false);
+    expect(state.reverseHighlight).toBe(true);
+  });
+
+  it('ignores malformed booleans and swallows storage parse errors', () => {
+    window.history.replaceState(null, '', '/?transparentBg=maybe&prefixColor=%23fff');
+    window.localStorage.setItem(GENERATOR_STATE_STORAGE_KEY, '{');
+
+    const state = loadGeneratorState();
+    expect(state.transparentBg).toBeUndefined();
+    expect(state.prefixColor).toBe('#fff');
+  });
+
+  it('normalizes payloads before saving and updates the URL', () => {
+    saveGeneratorState({
+      prefix: 'Share',
+      suffix: 'Logo',
+      font: 'Lora',
+      fontSize: '120',
+      transparentBg: '1',
+      reverseHighlight: 'no',
+      postfixBgColor: '#123456',
+      extraneous: 'ignore-me'
+    });
+
+    const saved = JSON.parse(window.localStorage.getItem(GENERATOR_STATE_STORAGE_KEY));
+    expect(saved.fontSize).toBe(120);
+    expect(saved.transparentBg).toBe(true);
+    expect(saved.reverseHighlight).toBe(false);
+    expect(saved.extraneous).toBeUndefined();
+
+    expect(window.location.search).toContain('prefix=Share');
+    expect(window.location.search).toContain('reverseHighlight=0');
+  });
+
+  it('no-ops when window APIs are unavailable', () => {
+    const originalWindow = window;
+    // eslint-disable-next-line no-global-assign
+    window = undefined;
+
+    expect(loadGeneratorState()).toEqual({});
+    expect(() => saveGeneratorState({ prefix: 'SSR' })).not.toThrow();
+
+    // eslint-disable-next-line no-global-assign
+    window = originalWindow;
+  });
+
+  it('ignores null, empty, or non-string values', () => {
+    saveGeneratorState({
+      prefix: 'Keep',
+      suffix: '',
+      transparentBg: null,
+      postfixBgColor: 123
+    });
+
+    const saved = JSON.parse(window.localStorage.getItem(GENERATOR_STATE_STORAGE_KEY));
+    expect(saved.prefix).toBe('Keep');
+    expect(saved.suffix).toBe('');
+    expect(saved.transparentBg).toBeUndefined();
+    expect(saved.postfixBgColor).toBeUndefined();
+
+    window.history.replaceState(null, '', '/?reverseHighlight=&fontSize=');
+    const state = loadGeneratorState();
+    expect(state.reverseHighlight).toBeUndefined();
+    expect(state.fontSize).toBeUndefined();
+  });
+
+  it('skips invalid storage payloads', () => {
+    window.localStorage.setItem(
+      GENERATOR_STATE_STORAGE_KEY,
+      JSON.stringify({
+        prefix: 123,
+        suffix: 'Share',
+        fontSize: 'huge'
+      })
+    );
+    const state = loadGeneratorState();
+    expect(state.prefix).toBeUndefined();
+    expect(state.suffix).toBe('Share');
+    expect(state.fontSize).toBeUndefined();
+  });
+
+  it('handles malformed JSON in storage as empty state', () => {
+    window.localStorage.setItem(GENERATOR_STATE_STORAGE_KEY, '"no-object"');
+    expect(loadGeneratorState()).toEqual({});
+  });
+});

src/__tests__/useGeneratorControls.test.js

@@ -1,9 +1,12 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 import { defineComponent, nextTick } from 'vue';
 import { createPinia, setActivePinia } from 'pinia';
 import { useGeneratorControls } from '@/composables/useGeneratorControls';
 import { useStore } from '@/stores/store';
+import { GENERATOR_STATE_STORAGE_KEY } from '@/utils/persistentState';
+
+const mountedWrappers = new Set();
 
 const mountComposable = (options) => {
   let api;
@@ -16,12 +19,24 @@ const mountComposable = (options) => {
   });
 
   const wrapper = mount(Comp);
+  mountedWrappers.add(wrapper);
   return { wrapper, api };
 };
 
 describe('useGeneratorControls', () => {
   beforeEach(() => {
     setActivePinia(createPinia());
+    window.localStorage.clear();
+    window.history.replaceState(null, '', '/');
+  });
+
+  afterEach(() => {
+    mountedWrappers.forEach((wrapper) => {
+      if (wrapper.exists()) {
+        wrapper.unmount();
+      }
+    });
+    mountedWrappers.clear();
   });
 
   it('provides sensible defaults and computed helpers', () => {
@@ -58,7 +73,7 @@ describe('useGeneratorControls', () => {
     expect(suffixSpy).toHaveBeenLastCalledWith('');
   });
 
-  it('hydrates initial text on mount and resets on unmount', async () => {
+  it('hydrates initial text on mount when nothing is persisted', async () => {
     const store = useStore();
     const prefixSpy = vi.spyOn(store, 'updatePrefix');
     const suffixSpy = vi.spyOn(store, 'updateSuffix');
@@ -75,11 +90,11 @@ describe('useGeneratorControls', () => {
 
     wrapper.unmount();
     await nextTick();
-    expect(prefixSpy).toHaveBeenLastCalledWith('edit');
-    expect(suffixSpy).toHaveBeenLastCalledWith('me');
+    expect(prefixSpy).not.toHaveBeenCalledWith('edit');
+    expect(suffixSpy).not.toHaveBeenCalledWith('me');
   });
 
-  it('handles partial initial and reset payloads', async () => {
+  it('handles partial initial payloads without clobbering other fields', async () => {
     const store = useStore();
     const prefixSpy = vi.spyOn(store, 'updatePrefix');
     const suffixSpy = vi.spyOn(store, 'updateSuffix');
@@ -100,24 +115,67 @@ describe('useGeneratorControls', () => {
     expect(suffixSpy).not.toHaveBeenCalled();
     prefixOnly.wrapper.unmount();
     await nextTick();
+  });
 
-    prefixSpy.mockClear();
-    suffixSpy.mockClear();
+  it('persists generator state to localStorage and query params', async () => {
+    const store = useStore();
+    const { api } = mountComposable();
 
-    const resetPrefixOnly = mountComposable({ resetText: { prefix: 'reset' } });
-    resetPrefixOnly.wrapper.unmount();
+    await store.updatePrefix('Share');
+    await store.updateSuffix('Logo');
+    store.font = 'Open Sans';
+    api.prefixColor.value = '#123123';
+    api.suffixColor.value = '#abcdef';
+    api.postfixBgColor.value = '#654321';
+    api.fontSize.value = 110;
+    api.transparentBg.value = true;
+    api.reverseHighlight.value = true;
     await nextTick();
-    expect(prefixSpy).toHaveBeenCalledWith('reset');
-    expect(suffixSpy).not.toHaveBeenCalled();
 
-    prefixSpy.mockClear();
-    suffixSpy.mockClear();
+    const saved = JSON.parse(window.localStorage.getItem(GENERATOR_STATE_STORAGE_KEY));
+    expect(saved.prefix).toBe('Share');
+    expect(saved.suffix).toBe('Logo');
+    expect(saved.font).toBe('Open Sans');
+    expect(saved.prefixColor).toBe('#123123');
+    expect(saved.transparentBg).toBe(true);
+    expect(window.location.search).toContain('prefix=Share');
+    expect(window.location.search).toContain('reverseHighlight=1');
+  });
 
-    const resetSuffixOnly = mountComposable({ resetText: { suffix: 'again' } });
-    resetSuffixOnly.wrapper.unmount();
+  it('restores state from storage and lets query params override it', async () => {
+    window.localStorage.setItem(
+      GENERATOR_STATE_STORAGE_KEY,
+      JSON.stringify({
+        prefix: 'StoredPrefix',
+        suffix: 'StoredSuffix',
+        font: 'Lora',
+        prefixColor: '#101010',
+        suffixColor: '#202020',
+        postfixBgColor: '#303030',
+        fontSize: 80,
+        transparentBg: true,
+        reverseHighlight: false
+      })
+    );
+    window.history.replaceState(
+      null,
+      '',
+      '/?prefix=QueryPrefix&suffixColor=%23aa00aa&reverseHighlight=1'
+    );
+
+    const { api } = mountComposable({ initialText: { prefix: 'Default', suffix: 'Values' } });
+    const store = useStore();
     await nextTick();
-    expect(suffixSpy).toHaveBeenCalledWith('again');
-    expect(prefixSpy).not.toHaveBeenCalled();
+
+    expect(store.prefix).toBe('QueryPrefix');
+    expect(store.suffix).toBe('StoredSuffix');
+    expect(store.font).toBe('Lora');
+    expect(api.prefixColor.value).toBe('#101010');
+    expect(api.suffixColor.value).toBe('#aa00aa');
+    expect(api.postfixBgColor.value).toBe('#303030');
+    expect(api.fontSize.value).toBe(80);
+    expect(api.transparentBg.value).toBe(true);
+    expect(api.reverseHighlight.value).toBe(true);
   });
 
   it('builds the Twitter intent url with the expected payload', () => {
@@ -132,4 +190,111 @@ describe('useGeneratorControls', () => {
 
     openSpy.mockRestore();
   });
+
+  it('hydrates correctly even when store updates resolve synchronously', async () => {
+    const store = useStore();
+    const originalPrefix = store.updatePrefix;
+    const originalSuffix = store.updateSuffix;
+
+    store.updatePrefix = vi.fn((text) => {
+      store.prefix = text;
+      return text;
+    });
+    store.updateSuffix = vi.fn((text) => {
+      store.suffix = text;
+      return text;
+    });
+
+    mountComposable({ initialText: { prefix: 'Sync', suffix: 'State' } });
+    await nextTick();
+    expect(store.updatePrefix).toHaveBeenCalledWith('Sync');
+    expect(store.updateSuffix).toHaveBeenCalledWith('State');
+    expect(store.prefix).toBe('Sync');
+    expect(store.suffix).toBe('State');
+
+    store.updatePrefix = originalPrefix;
+    store.updateSuffix = originalSuffix;
+  });
+
+  it('resets text on unmount when persistence is disabled', async () => {
+    const store = useStore();
+    await store.updatePrefix('Tmp');
+    await store.updateSuffix('State');
+
+    const prefixSpy = vi.spyOn(store, 'updatePrefix');
+    const suffixSpy = vi.spyOn(store, 'updateSuffix');
+
+    const { wrapper } = mountComposable({
+      resetText: { prefix: 'edit', suffix: 'me' },
+      persistenceEnabled: false
+    });
+
+    await nextTick();
+    prefixSpy.mockClear();
+    suffixSpy.mockClear();
+
+    wrapper.unmount();
+    await nextTick();
+
+    expect(prefixSpy).toHaveBeenCalledWith('edit');
+    expect(suffixSpy).toHaveBeenCalledWith('me');
+  });
+
+  it('does not reset prefix when resetText omits it', async () => {
+    const store = useStore();
+    const prefixSpy = vi.spyOn(store, 'updatePrefix');
+    const suffixSpy = vi.spyOn(store, 'updateSuffix');
+
+    const { wrapper } = mountComposable({
+      resetText: { suffix: 'stay' },
+      persistenceEnabled: false
+    });
+
+    await nextTick();
+    prefixSpy.mockClear();
+    suffixSpy.mockClear();
+
+    wrapper.unmount();
+    await nextTick();
+
+    expect(prefixSpy).not.toHaveBeenCalled();
+    expect(suffixSpy).toHaveBeenCalledWith('stay');
+  });
+
+  it('does not reset suffix when resetText omits it', async () => {
+    const store = useStore();
+    const prefixSpy = vi.spyOn(store, 'updatePrefix');
+    const suffixSpy = vi.spyOn(store, 'updateSuffix');
+
+    const { wrapper } = mountComposable({
+      resetText: { prefix: 'back' },
+      persistenceEnabled: false
+    });
+
+    await nextTick();
+    prefixSpy.mockClear();
+    suffixSpy.mockClear();
+
+    wrapper.unmount();
+    await nextTick();
+
+    expect(prefixSpy).toHaveBeenCalledWith('back');
+    expect(suffixSpy).not.toHaveBeenCalled();
+  });
+
+  it('continues hydrating when a task rejects', async () => {
+    const store = useStore();
+    const originalPrefix = store.updatePrefix;
+    const rejection = new Error('hydrate failure');
+    store.updatePrefix = vi.fn(() => Promise.reject(rejection));
+    const suffixSpy = vi.spyOn(store, 'updateSuffix');
+
+    mountComposable({ initialText: { prefix: 'Only', suffix: 'Fans' } });
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(store.updatePrefix).toHaveBeenCalledWith('Only');
+    expect(suffixSpy).toHaveBeenCalledWith('Fans');
+
+    store.updatePrefix = originalPrefix;
+  });
 });