refactor(components): add prefix to localStorage key

Author: remarkablemark

specs/002-toggle-diff-options/data-model.md

@@ -18,7 +18,7 @@ The granularity of comparison. A string union type with three possible values.
 - `'lines'` — line-level diff (`diffLines`)
 
 **Default**: `'words'` (preserves current behavior)
-**Persistence**: localStorage key `'diffMethod'`
+**Persistence**: localStorage key `'diff.diffMethod'`
 
 ## Modified Entities
 
@@ -30,7 +30,7 @@ The `DiffResult` interface (`segments` + `hasChanges`) remains unchanged. The di
 
 The `ViewMode` type (`'unified' | 'side-by-side'`) remains unchanged. It gains localStorage persistence via the same `useLocalStorage` hook.
 
-**Persistence**: localStorage key `'viewMode'`
+**Persistence**: localStorage key `'diff.viewMode'`
 
 ## Hooks
 

specs/002-toggle-diff-options/tasks.md

@@ -58,7 +58,7 @@
 - [x] T008 [P] [US1] Create `DiffMethodToggleProps` interface in src/components/DiffMethodToggle/DiffMethodToggle.types.ts
 - [x] T009 [P] [US1] Create barrel export in src/components/DiffMethodToggle/index.ts
 - [x] T010 [US1] Implement `DiffMethodToggle` component with 3-button segmented group (Characters | Words | Lines), `role="group"`, `aria-label`, active/inactive Tailwind styling per research.md in src/components/DiffMethodToggle/DiffMethodToggle.tsx
-- [x] T011 [US1] Update `App` component: add `diffMethod` state via `useLocalStorage('diffMethod', 'words')`, migrate `viewMode` to `useLocalStorage('viewMode', 'unified')`, pass `diffMethod` to `useDiff` and `DiffMethodToggle`, place `DiffMethodToggle` on left side of diff header in src/components/App/App.tsx
+- [x] T011 [US1] Update `App` component: add `diffMethod` state via `useLocalStorage('diff.diffMethod', 'words')`, migrate `viewMode` to `useLocalStorage('diff.viewMode', 'unified')`, pass `diffMethod` to `useDiff` and `DiffMethodToggle`, place `DiffMethodToggle` on left side of diff header in src/components/App/App.tsx
 
 **Checkpoint**: User Story 1 is fully functional — diff method toggle works, selections persist to localStorage, all tests pass.
 

src/components/App/App.test.tsx

@@ -371,11 +371,13 @@ describe('App component', () => {
 
     await user.click(screen.getByRole('button', { name: 'Lines' }));
 
-    expect(localStorage.getItem('diffMethod')).toBe(JSON.stringify('lines'));
+    expect(localStorage.getItem('diff.diffMethod')).toBe(
+      JSON.stringify('lines'),
+    );
   });
 
   it('restores diff method from localStorage on mount', async () => {
-    localStorage.setItem('diffMethod', JSON.stringify('characters'));
+    localStorage.setItem('diff.diffMethod', JSON.stringify('characters'));
 
     const user = userEvent.setup();
     render(<App />);
@@ -405,15 +407,15 @@ describe('App component', () => {
 
     await user.click(screen.getByRole('button', { name: /side-by-side/i }));
 
-    expect(localStorage.getItem('viewMode')).toBe(
+    expect(localStorage.getItem('diff.viewMode')).toBe(
       JSON.stringify('side-by-side'),
     );
   });
 
   it('restores view mode from localStorage on mount', async () => {
     const { mockMatchMedia } = createMockMatchMedia(true);
     window.matchMedia = mockMatchMedia;
-    localStorage.setItem('viewMode', JSON.stringify('side-by-side'));
+    localStorage.setItem('diff.viewMode', JSON.stringify('side-by-side'));
 
     const user = userEvent.setup();
     const { container } = render(<App />);
@@ -550,11 +552,13 @@ describe('App component', () => {
 
     await user.click(screen.getByRole('button', { name: 'Lines' }));
 
-    expect(localStorage.getItem('diffMethod')).toBe(JSON.stringify('lines'));
+    expect(localStorage.getItem('diff.diffMethod')).toBe(
+      JSON.stringify('lines'),
+    );
   });
 
   it('restores diff method from localStorage on mount', async () => {
-    localStorage.setItem('diffMethod', JSON.stringify('characters'));
+    localStorage.setItem('diff.diffMethod', JSON.stringify('characters'));
 
     const user = userEvent.setup();
     render(<App />);
@@ -581,13 +585,13 @@ describe('App component', () => {
 
     await user.click(screen.getByRole('button', { name: /side-by-side/i }));
 
-    expect(localStorage.getItem('viewMode')).toBe(
+    expect(localStorage.getItem('diff.viewMode')).toBe(
       JSON.stringify('side-by-side'),
     );
   });
 
   it('restores view mode from localStorage on mount', async () => {
-    localStorage.setItem('viewMode', JSON.stringify('side-by-side'));
+    localStorage.setItem('diff.viewMode', JSON.stringify('side-by-side'));
 
     window.matchMedia = vi.fn().mockReturnValue({
       matches: true,

src/components/App/App.tsx

@@ -12,11 +12,11 @@ export default function App() {
   const [originalText, setOriginalText] = useState('');
   const [modifiedText, setModifiedText] = useState('');
   const [viewMode, setViewMode] = useLocalStorage<ViewMode>(
-    'viewMode',
+    'diff.viewMode',
     'unified',
   );
   const [diffMethod, setDiffMethod] = useLocalStorage<DiffMethod>(
-    'diffMethod',
+    'diff.diffMethod',
     'words',
   );