Merge pull request #1927 from AtCoder-NoviSteps/#1924

🎨 Save tab and button choices to local storage (#1924)

Author: KATO-Hiro

src/lib/components/TaskTables/TaskTable.svelte

@@ -34,6 +34,12 @@
   // Prepare contest table provider based on the active contest type.
   let activeContestType = $derived(activeContestTypeStore.get());
 
+  // Note: This is necessary to ensure that the active contest type is updated correctly.
+  function updateActiveContestType(type: ContestTableProviders): void {
+    activeContestType = type;
+    activeContestTypeStore.set(type);
+  }
+
   let provider: ContestTableProvider = $derived(
     contestTableProviders[activeContestType as ContestTableProviders],
   );
@@ -113,7 +119,7 @@
 <ButtonGroup class="m-4 contents-center">
   {#each Object.entries(contestTableProviders) as [type, config]}
     <Button
-      onclick={() => activeContestTypeStore.set(type as ContestTableProviders)}
+      onclick={() => updateActiveContestType(type as ContestTableProviders)}
       class={activeContestTypeStore.isSame(type as ContestTableProviders)
         ? 'active-button-class'
         : ''}

src/lib/stores/active_contest_type.svelte.ts

@@ -1,3 +1,4 @@
+import { useLocalStorage } from '$lib/stores/local_storage_helper.svelte';
 import { type ContestTableProviders } from '$lib/utils/contest_table_provider';
 
 /**
@@ -12,7 +13,10 @@ import { type ContestTableProviders } from '$lib/utils/contest_table_provider';
  * with a default value of 'abcLatest20Rounds'.
  */
 export class ActiveContestTypeStore {
-  value = $state<ContestTableProviders>('abcLatest20Rounds');
+  private storage = useLocalStorage<ContestTableProviders>(
+    'contest_table_providers',
+    'abcLatest20Rounds',
+  );
 
   /**
    * Creates an instance with the specified contest type.
@@ -21,7 +25,9 @@ export class ActiveContestTypeStore {
    * Defaults to 'abcLatest20Rounds'.
    */
   constructor(defaultContestType: ContestTableProviders = 'abcLatest20Rounds') {
-    this.value = defaultContestType;
+    if (defaultContestType !== 'abcLatest20Rounds' || !this.storage.value) {
+      this.storage.value = defaultContestType;
+    }
   }
 
   /**
@@ -30,7 +36,7 @@ export class ActiveContestTypeStore {
    * @returns The current value of contest table providers.
    */
   get(): ContestTableProviders {
-    return this.value;
+    return this.storage.value;
   }
 
   /**
@@ -39,7 +45,7 @@ export class ActiveContestTypeStore {
    * @param newContestType - The contest type to set as the current value
    */
   set(newContestType: ContestTableProviders): void {
-    this.value = newContestType;
+    this.storage.value = newContestType;
   }
 
   /**
@@ -48,16 +54,27 @@ export class ActiveContestTypeStore {
    * @returns `true` if the current contest type matches the provided contest type, `false` otherwise
    */
   isSame(contestType: ContestTableProviders): boolean {
-    return this.value === contestType;
+    return this.storage.value === contestType;
   }
 
   /**
    * Resets the active contest type to the default value.
    * Sets the internal value to 'abcLatest20Rounds'.
    */
   reset(): void {
-    this.value = 'abcLatest20Rounds';
+    this.storage.value = 'abcLatest20Rounds';
   }
 }
 
-export const activeContestTypeStore = new ActiveContestTypeStore();
+let instance: ActiveContestTypeStore | null = null;
+
+export function getActiveContestTypeStore(): ActiveContestTypeStore {
+  if (!instance) {
+    instance = new ActiveContestTypeStore();
+  }
+
+  return instance;
+}
+
+// Export the singleton instance of the store.
+export const activeContestTypeStore = getActiveContestTypeStore();

src/lib/stores/active_problem_list_tab.svelte.ts

@@ -1,7 +1,12 @@
+import { useLocalStorage } from '$lib/stores/local_storage_helper.svelte';
+
 export type ActiveProblemListTab = 'contestTable' | 'listByGrade' | 'gradeGuidelineTable';
 
 export class ActiveProblemListTabStore {
-  value = $state<ActiveProblemListTab>('contestTable');
+  private storage = useLocalStorage<ActiveProblemListTab>(
+    'active_problem_list_tab',
+    'contestTable',
+  );
 
   /**
    * Creates an instance with the specified problem list tab.
@@ -10,7 +15,9 @@ export class ActiveProblemListTabStore {
    * Defaults to 'contestTable'.
    */
   constructor(activeTab: ActiveProblemListTab = 'contestTable') {
-    this.value = activeTab;
+    if (activeTab !== 'contestTable' || !this.storage.value) {
+      this.storage.value = activeTab;
+    }
   }
 
   /**
@@ -19,7 +26,7 @@ export class ActiveProblemListTabStore {
    * @returns The current active tab.
    */
   get(): ActiveProblemListTab {
-    return this.value;
+    return this.storage.value;
   }
 
   /**
@@ -28,7 +35,7 @@ export class ActiveProblemListTabStore {
    * @param activeTab - The active tab to set as the current value
    */
   set(activeTab: ActiveProblemListTab): void {
-    this.value = activeTab;
+    this.storage.value = activeTab;
   }
 
   /**
@@ -37,16 +44,27 @@ export class ActiveProblemListTabStore {
    * @returns `true` if the active tab matches the task list, `false` otherwise
    */
   isSame(activeTab: ActiveProblemListTab): boolean {
-    return this.value === activeTab;
+    return this.storage.value === activeTab;
   }
 
   /**
    * Resets the active tab to the default value.
    * Sets the internal value to 'contestTable'.
    */
   reset(): void {
-    this.value = 'contestTable';
+    this.storage.value = 'contestTable';
+  }
+}
+
+let instance: ActiveProblemListTabStore | null = null;
+
+export function getActiveProblemListTabStore(): ActiveProblemListTabStore {
+  if (!instance) {
+    instance = new ActiveProblemListTabStore();
   }
+
+  return instance;
 }
 
-export const activeProblemListTabStore = new ActiveProblemListTabStore();
+// Export the singleton instance of the store.
+export const activeProblemListTabStore = getActiveProblemListTabStore();

src/lib/stores/local_storage_helper.svelte.ts

@@ -0,0 +1,65 @@
+// See:
+// https://svelte.dev/docs/kit/$app-environment#browser
+import { browser } from '$app/environment';
+
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  return new LocalStorageWrapper<T>(key, initialValue);
+}
+
+/**
+ * A type-safe wrapper for interacting with localStorage.
+ *
+ * This class provides a convenient way to store and retrieve typed data from localStorage
+ * with automatic JSON serialization/deserialization. It gracefully handles server-side
+ * rendering environments where localStorage is not available.
+ *
+ * @template T The type of value being stored
+ *
+ * @example
+ * ```typescript
+ * // Create a wrapper for a user settings object
+ * const userSettings = new LocalStorageWrapper<UserSettings>('user_settings', defaultSettings);
+ *
+ * // Read the current value
+ * const currentSettings = userSettings.value;
+ *
+ * // Update the value (automatically persists to localStorage)
+ * userSettings.value = { ...currentSettings, theme: 'dark' };
+ * ```
+ */
+class LocalStorageWrapper<T> {
+  private _value: T;
+  private key: string;
+
+  constructor(key: string, initialValue: T) {
+    this.key = key;
+    this._value = this.getInitialValue(initialValue);
+  }
+
+  private getInitialValue(defaultValue: T): T {
+    // WHY: Cannot access localStorage during SSR (server-side rendering).
+    if (!browser) {
+      return defaultValue;
+    }
+
+    try {
+      const item = localStorage.getItem(this.key);
+      return item ? JSON.parse(item) : defaultValue;
+    } catch (error) {
+      console.error(`Failed to parse ${this.key} from local storage:`, error);
+      return defaultValue;
+    }
+  }
+
+  get value(): T {
+    return this._value;
+  }
+
+  set value(newValue: T) {
+    this._value = newValue;
+
+    if (browser) {
+      localStorage.setItem(this.key, JSON.stringify(newValue));
+    }
+  }
+}

src/test/lib/stores/active_contest_type.svelte.test.ts

@@ -1,13 +1,41 @@
-import { describe, test, expect, beforeEach } from 'vitest';
+import { describe, test, expect, vi, beforeEach } from 'vitest';
 
 import type { ContestTableProviders } from '$lib/utils/contest_table_provider';
-import { ActiveContestTypeStore } from '$lib/stores/active_contest_type.svelte';
+import {
+  activeContestTypeStore,
+  ActiveContestTypeStore,
+} from '$lib/stores/active_contest_type.svelte';
+
+vi.mock('$app/environment', () => ({
+  browser: true,
+}));
 
 describe('ActiveContestTypeStore', () => {
   let store: ActiveContestTypeStore;
 
+  const mockLocalStorage: Storage = {
+    getItem: vi.fn((key) => mockStorage[key] || null),
+    setItem: vi.fn((key, value) => {
+      mockStorage[key] = value;
+    }),
+    removeItem: vi.fn(),
+    clear: vi.fn(),
+    length: 0,
+    key: vi.fn(),
+  };
+  const mockStorage: Record<string, string> = {};
+
   beforeEach(() => {
+    vi.clearAllMocks();
+    // Setup mock for localStorage
+    vi.stubGlobal('localStorage', mockLocalStorage);
+
     store = new ActiveContestTypeStore();
+    store.reset();
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
   });
 
   test('expects to initialize with default value', () => {
@@ -29,11 +57,9 @@ describe('ActiveContestTypeStore', () => {
 
   test('expects to update the value when calling set()', () => {
     store.set('fromAbc212ToAbc318' as ContestTableProviders);
-    expect(store.value).toBe('fromAbc212ToAbc318');
     expect(store.get()).toBe('fromAbc212ToAbc318');
 
     store.set('abc319Onwards' as ContestTableProviders);
-    expect(store.value).toBe('abc319Onwards');
     expect(store.get()).toBe('abc319Onwards');
   });
 
@@ -70,3 +96,20 @@ describe('ActiveContestTypeStore', () => {
     expect(store.get()).toBe('abcLatest20Rounds');
   });
 });
+
+describe('Active contest type store in SSR', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    vi.mock('$app/environment', () => ({
+      browser: false,
+    }));
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test('handles SSR gracefully', () => {
+    expect(activeContestTypeStore.get()).toBe('abcLatest20Rounds');
+  });
+});

src/test/lib/stores/active_problem_list_tab.svelte.test.ts

@@ -1,12 +1,40 @@
-import { describe, test, expect, beforeEach } from 'vitest';
+import { describe, test, expect, vi, beforeEach } from 'vitest';
 
-import { ActiveProblemListTabStore } from '$lib/stores/active_problem_list_tab.svelte';
+import {
+  activeProblemListTabStore,
+  ActiveProblemListTabStore,
+} from '$lib/stores/active_problem_list_tab.svelte';
+
+vi.mock('$app/environment', () => ({
+  browser: true,
+}));
 
 describe('ActiveProblemListTabStore', () => {
   let store: ActiveProblemListTabStore;
 
+  const mockLocalStorage: Storage = {
+    getItem: vi.fn((key) => mockStorage[key] || null),
+    setItem: vi.fn((key, value) => {
+      mockStorage[key] = value;
+    }),
+    removeItem: vi.fn(),
+    clear: vi.fn(),
+    length: 0,
+    key: vi.fn(),
+  };
+  const mockStorage: Record<string, string> = {};
+
   beforeEach(() => {
+    vi.clearAllMocks();
+    // Setup mock for localStorage
+    vi.stubGlobal('localStorage', mockLocalStorage);
+
     store = new ActiveProblemListTabStore();
+    store.reset();
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
   });
 
   describe('constructor', () => {
@@ -59,3 +87,20 @@ describe('ActiveProblemListTabStore', () => {
     });
   });
 });
+
+describe('Active problem list tab store in SSR', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    vi.mock('$app/environment', () => ({
+      browser: false,
+    }));
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test('handles SSR gracefully', () => {
+    expect(activeProblemListTabStore.get()).toBe('contestTable');
+  });
+});