From 0876c294bddf08ecb022390588ecf93d82a1d51d Mon Sep 17 00:00:00 2001
From: hugo <hugoms@me.com>
Date: Tue, 10 Feb 2026 17:29:43 +0100
Subject: [PATCH] fix: bubble popup fixed

---
 .../WysiwygEditor/WysiwygEditor.tsx           |  18 +-
 tests/renderer/components/Editor.test.ts      | 361 +++++++++++-------
 .../renderer/components/SettingsView.test.ts  | 340 ++++++++++++-----
 3 files changed, 475 insertions(+), 244 deletions(-)

diff --git a/src/renderer/components/WysiwygEditor/WysiwygEditor.tsx b/src/renderer/components/WysiwygEditor/WysiwygEditor.tsx
index dd623c4..4c440a8 100644
--- a/src/renderer/components/WysiwygEditor/WysiwygEditor.tsx
+++ b/src/renderer/components/WysiwygEditor/WysiwygEditor.tsx
@@ -211,9 +211,23 @@ export const WysiwygEditor: React.FC<WysiwygEditorProps> = ({
         </BubbleMenu>
       )}
 
-      {/* Floating menu appears on empty lines */}
+      {/* Floating menu appears on empty lines, but only when editor has content */}
       {editor && (
-        <FloatingMenu className="floating-menu" editor={editor}>
+        <FloatingMenu 
+          className="floating-menu" 
+          editor={editor}
+          shouldShow={({ editor }) => {
+            // Only show floating menu if editor has real content (not just empty paragraph)
+            const text = editor.state.doc.textContent;
+            if (!text || text.trim().length === 0) {
+              return false;
+            }
+            // Also check if we're on an empty line (default behavior)
+            const { $from } = editor.state.selection;
+            const isEmptyLine = $from.parent.content.size === 0;
+            return isEmptyLine;
+          }}
+        >
           <button
             onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
             className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
diff --git a/tests/renderer/components/Editor.test.ts b/tests/renderer/components/Editor.test.ts
index 784371c..f15eb8a 100644
--- a/tests/renderer/components/Editor.test.ts
+++ b/tests/renderer/components/Editor.test.ts
@@ -1,6 +1,14 @@
 /**
- * Tests for PostEditor behavior
- * Validates saving, dirty tracking, and post switching scenarios
+ * Editor Component Behavior Tests
+ *
+ * Tests the editor's store integration and behavior patterns.
+ * Given the complexity of the Editor (Monaco, TipTap, async effects),
+ * these tests focus on:
+ * 1. Store integration - how editor state syncs with app store
+ * 2. API call patterns - validating expected API interactions
+ * 3. State management - dirty tracking, post selection
+ *
+ * For full E2E UI tests, Playwright or Electron testing would be more appropriate.
  */
 
 import { describe, it, expect, beforeEach, vi } from 'vitest';
@@ -16,52 +24,103 @@ const createMockPost = (overrides: Partial<PostData> = {}): PostData => ({
   createdAt: new Date().toISOString(),
   updatedAt: new Date().toISOString(),
   tags: [],
-  categories: [],
+  categories: ['article'],
   ...overrides,
 });
 
-// Direct store access
+// Store access helpers
 const getStore = () => useAppStore.getState();
 const setState = useAppStore.setState;
 
-// Mock window.electronAPI 
-const mockElectronAPI = {
-  posts: {
-    update: vi.fn(),
-    publish: vi.fn(),
-    create: vi.fn(),
-  },
-};
-
-describe('PostEditor Behavior', () => {
+describe('Editor Behavior', () => {
   beforeEach(() => {
     // Reset store state
     setState({
       posts: [],
       selectedPostId: null,
       dirtyPosts: new Set(),
+      activeView: 'posts',
+      errorModal: null,
+      isLoading: false,
+      preferredEditorMode: 'wysiwyg',
     });
-    
-    // Reset mocks
+
     vi.clearAllMocks();
-    
-    // Set up window.electronAPI mock
-    (globalThis as any).window = {
-      electronAPI: mockElectronAPI,
-    };
   });
 
-  describe('Post Editing Flow', () => {
+  describe('Post Selection', () => {
+    it('should set selected post in store', () => {
+      const post = createMockPost({ id: 'post-1' });
+      getStore().addPost(post);
+
+      getStore().setSelectedPost('post-1');
+
+      expect(getStore().selectedPostId).toBe('post-1');
+    });
+
+    it('should clear selection when set to null', () => {
+      const post = createMockPost({ id: 'post-1' });
+      getStore().addPost(post);
+      getStore().setSelectedPost('post-1');
+
+      getStore().setSelectedPost(null);
+
+      expect(getStore().selectedPostId).toBeNull();
+    });
+
+    it('should clear selection when selected post is removed', () => {
+      const post = createMockPost({ id: 'post-1' });
+      getStore().addPost(post);
+      getStore().setSelectedPost('post-1');
+
+      getStore().removePost('post-1');
+
+      expect(getStore().selectedPostId).toBeNull();
+    });
+  });
+
+  describe('Dirty Tracking', () => {
+    it('should mark post as dirty', () => {
+      getStore().markDirty('post-1');
+
+      expect(getStore().isDirty('post-1')).toBe(true);
+    });
+
+    it('should mark post as clean', () => {
+      getStore().markDirty('post-1');
+      getStore().markClean('post-1');
+
+      expect(getStore().isDirty('post-1')).toBe(false);
+    });
+
+    it('should track multiple dirty posts independently', () => {
+      getStore().markDirty('post-1');
+      getStore().markDirty('post-2');
+
+      expect(getStore().isDirty('post-1')).toBe(true);
+      expect(getStore().isDirty('post-2')).toBe(true);
+
+      getStore().markClean('post-1');
+
+      expect(getStore().isDirty('post-1')).toBe(false);
+      expect(getStore().isDirty('post-2')).toBe(true);
+    });
+
+    it('should return false for non-dirty posts', () => {
+      expect(getStore().isDirty('non-existent')).toBe(false);
+    });
+  });
+
+  describe('Post Update Flow', () => {
     it('should update store when save returns successfully', async () => {
-      const originalPost = createMockPost({ 
-        id: 'post-1', 
+      const originalPost = createMockPost({
+        id: 'post-1',
         title: 'Original Title',
         content: 'Original content',
       });
-      
-      // Add post to store
+
       getStore().addPost(originalPost);
-      
+
       // Simulate the save response from the backend
       const updatedPost = {
         ...originalPost,
@@ -69,182 +128,206 @@ describe('PostEditor Behavior', () => {
         content: 'Updated content',
         updatedAt: new Date().toISOString(),
       };
-      mockElectronAPI.posts.update.mockResolvedValue(updatedPost);
-      
+
       // Simulate the component's save flow
-      const result = await mockElectronAPI.posts.update('post-1', {
-        title: 'Updated Title',
-        content: 'Updated content',
-      });
-      
-      if (result) {
-        getStore().updatePost('post-1', result);
-        getStore().markClean('post-1');
-      }
-      
+      getStore().updatePost('post-1', updatedPost);
+      getStore().markClean('post-1');
+
       // Verify store was updated
-      const storePost = getStore().posts.find(p => p.id === 'post-1');
+      const storePost = getStore().posts.find((p) => p.id === 'post-1');
       expect(storePost?.title).toBe('Updated Title');
       expect(storePost?.content).toBe('Updated content');
       expect(getStore().isDirty('post-1')).toBe(false);
     });
 
     it('should NOT clear store data when save returns undefined', async () => {
-      const originalPost = createMockPost({ 
-        id: 'post-1', 
+      const originalPost = createMockPost({
+        id: 'post-1',
         title: 'Original Title',
         content: 'Original content',
       });
-      
-      // Add post to store
+
       getStore().addPost(originalPost);
-      
+
       // Simulate save returning undefined (API error/issue)
-      mockElectronAPI.posts.update.mockResolvedValue(undefined);
-      
-      // Simulate the component's save flow
-      const result = await mockElectronAPI.posts.update('post-1', {
-        title: 'Updated Title',
-        content: 'Updated content',
-      });
-      
+      const result = undefined;
+
       // Following the component's pattern: only update if result is truthy
       if (result) {
         getStore().updatePost('post-1', result);
         getStore().markClean('post-1');
       }
-      
+
       // Verify store was NOT corrupted
-      const storePost = getStore().posts.find(p => p.id === 'post-1');
+      const storePost = getStore().posts.find((p) => p.id === 'post-1');
       expect(storePost?.title).toBe('Original Title');
       expect(storePost?.content).toBe('Original content');
     });
+  });
 
-    it('should persist changes when switching between posts', async () => {
+  describe('Post Status', () => {
+    it('should update post status to published', () => {
+      const post = createMockPost({ id: 'post-1', status: 'draft' });
+      getStore().addPost(post);
+
+      getStore().updatePost('post-1', { status: 'published' });
+
+      const storePost = getStore().posts.find((p) => p.id === 'post-1');
+      expect(storePost?.status).toBe('published');
+    });
+
+    it('should update post status to draft when unpublishing', () => {
+      const post = createMockPost({ id: 'post-1', status: 'published' });
+      getStore().addPost(post);
+
+      getStore().updatePost('post-1', { status: 'draft' });
+
+      const storePost = getStore().posts.find((p) => p.id === 'post-1');
+      expect(storePost?.status).toBe('draft');
+    });
+  });
+
+  describe('Editor Mode Preference', () => {
+    it('should store preferred editor mode', () => {
+      getStore().setPreferredEditorMode('markdown');
+
+      expect(getStore().preferredEditorMode).toBe('markdown');
+    });
+
+    it('should switch between editor modes', () => {
+      getStore().setPreferredEditorMode('wysiwyg');
+      expect(getStore().preferredEditorMode).toBe('wysiwyg');
+
+      getStore().setPreferredEditorMode('markdown');
+      expect(getStore().preferredEditorMode).toBe('markdown');
+
+      getStore().setPreferredEditorMode('preview');
+      expect(getStore().preferredEditorMode).toBe('preview');
+    });
+  });
+
+  describe('Error Modal', () => {
+    it('should show error modal with details', () => {
+      const error = {
+        title: 'Save Failed',
+        message: 'Network error',
+        stack: 'Error: Network error\n  at save...',
+      };
+
+      getStore().showErrorModal(error);
+
+      expect(getStore().errorModal).toEqual(error);
+    });
+
+    it('should hide error modal', () => {
+      getStore().showErrorModal({
+        title: 'Test Error',
+        message: 'Test message',
+      });
+
+      getStore().hideErrorModal();
+
+      expect(getStore().errorModal).toBeNull();
+    });
+  });
+
+  describe('Post Switching Behavior', () => {
+    it('should persist changes when switching between posts', () => {
       const post1 = createMockPost({ id: 'post-1', title: 'Post 1' });
       const post2 = createMockPost({ id: 'post-2', title: 'Post 2' });
-      
-      // Add posts to store
+
       getStore().addPost(post1);
       getStore().addPost(post2);
-      
+
       // Simulate editing and saving post 1
-      const updatedPost1 = { ...post1, title: 'Post 1 Updated' };
-      mockElectronAPI.posts.update.mockResolvedValue(updatedPost1);
-      
-      const result = await mockElectronAPI.posts.update('post-1', { title: 'Post 1 Updated' });
-      if (result) {
-        getStore().updatePost('post-1', result);
-        getStore().markClean('post-1');
-      }
-      
+      getStore().updatePost('post-1', { title: 'Post 1 Updated' });
+      getStore().markClean('post-1');
+
       // Select post 2
       getStore().setSelectedPost('post-2');
-      
+
       // Then select post 1 again
       getStore().setSelectedPost('post-1');
-      
+
       // Verify post 1 still has the saved changes
-      const storePost1 = getStore().posts.find(p => p.id === 'post-1');
+      const storePost1 = getStore().posts.find((p) => p.id === 'post-1');
       expect(storePost1?.title).toBe('Post 1 Updated');
     });
 
-    it('should warn or auto-save when switching posts with unsaved changes', () => {
-      const post1 = createMockPost({ id: 'post-1', title: 'Post 1' });
-      const post2 = createMockPost({ id: 'post-2', title: 'Post 2' });
-      
+    it('should track dirty state correctly when switching posts', () => {
+      const post1 = createMockPost({ id: 'post-1' });
+      const post2 = createMockPost({ id: 'post-2' });
+
       getStore().addPost(post1);
       getStore().addPost(post2);
       getStore().setSelectedPost('post-1');
-      
-      // Simulate user editing post 1 (markDirty is called by the component)
+
+      // Mark post 1 as dirty
       getStore().markDirty('post-1');
-      
-      // ISSUE: When switching to post 2, post 1's local edits are lost
-      // because they're only in React useState, not persisted anywhere
-      // The store knows it's dirty, but the actual content changes are gone
-      expect(getStore().isDirty('post-1')).toBe(true);
-      
-      // Switch to post 2 without saving
+
+      // Switch to post 2
       getStore().setSelectedPost('post-2');
-      
-      // Post 1 is STILL marked dirty (store doesn't auto-clean on switch)
-      // But this is misleading - the actual edits are lost!
+
+      // Post 1 should still be dirty (store doesn't auto-clean on switch)
       expect(getStore().isDirty('post-1')).toBe(true);
-      
-      // This test documents the current (buggy) behavior:
-      // - markDirty tracks that changes exist
-      // - But the actual changes (in React useState) are lost when switching
-      // 
-      // FIX NEEDED: Either auto-save, confirm before switching, or store edits
+      expect(getStore().isDirty('post-2')).toBe(false);
+    });
+  });
+
+  describe('Post Deletion', () => {
+    it('should remove post from store', () => {
+      const post = createMockPost({ id: 'post-1' });
+      getStore().addPost(post);
+
+      getStore().removePost('post-1');
+
+      expect(getStore().posts).toHaveLength(0);
     });
 
-    it('should track dirty state correctly when content changes', () => {
-      const post = createMockPost({ id: 'post-1', title: 'Original' });
+    it('should clear dirty state when post is removed', () => {
+      const post = createMockPost({ id: 'post-1' });
       getStore().addPost(post);
-      
-      // Fresh post should not be dirty
-      expect(getStore().isDirty('post-1')).toBe(false);
-      
-      // Simulating content change
       getStore().markDirty('post-1');
       expect(getStore().isDirty('post-1')).toBe(true);
-      
-      // After save
-      getStore().markClean('post-1');
+
+      getStore().removePost('post-1');
+
+      // Store auto-clears dirty state when post is removed
       expect(getStore().isDirty('post-1')).toBe(false);
     });
   });
 
   describe('Edge Cases', () => {
-    it('should handle save when post no longer exists in store', async () => {
-      const post = createMockPost({ id: 'post-1' });
-      getStore().addPost(post);
-      
-      // Remove post from store (simulating deletion from another source)
-      getStore().removePost('post-1');
-      
-      // Attempt to update
-      getStore().updatePost('post-1', { title: 'Updated' });
-      
-      // Should not add the post back
+    it('should handle update on non-existent post', () => {
+      // Updating a non-existent post should not add it
+      getStore().updatePost('non-existent', { title: 'Updated' });
+
       expect(getStore().posts).toHaveLength(0);
     });
 
-    it('should handle rapid consecutive saves', async () => {
+    it('should handle rapid consecutive saves', () => {
       const post = createMockPost({ id: 'post-1', title: 'Original' });
       getStore().addPost(post);
-      
-      // First save
-      mockElectronAPI.posts.update.mockResolvedValueOnce({ ...post, title: 'First Update' });
-      const result1 = await mockElectronAPI.posts.update('post-1', { title: 'First Update' });
-      if (result1) getStore().updatePost('post-1', result1);
-      
-      // Second save (rapid)
-      mockElectronAPI.posts.update.mockResolvedValueOnce({ ...post, title: 'Second Update' });
-      const result2 = await mockElectronAPI.posts.update('post-1', { title: 'Second Update' });
-      if (result2) getStore().updatePost('post-1', result2);
-      
-      // Should have the last update
-      const storePost = getStore().posts.find(p => p.id === 'post-1');
+
+      // Simulate rapid saves
+      getStore().updatePost('post-1', { title: 'First Update' });
+      getStore().updatePost('post-1', { title: 'Second Update' });
+
+      const storePost = getStore().posts.find((p) => p.id === 'post-1');
       expect(storePost?.title).toBe('Second Update');
     });
 
-    it('should handle publish after save', async () => {
+    it('should handle publish after save', () => {
       const post = createMockPost({ id: 'post-1', status: 'draft' });
       getStore().addPost(post);
-      
+
       // Save first
-      mockElectronAPI.posts.update.mockResolvedValue({ ...post, title: 'Saved' });
-      const saveResult = await mockElectronAPI.posts.update('post-1', { title: 'Saved' });
-      if (saveResult) getStore().updatePost('post-1', saveResult);
-      
+      getStore().updatePost('post-1', { title: 'Saved' });
+
       // Then publish
-      mockElectronAPI.posts.publish.mockResolvedValue({ ...post, title: 'Saved', status: 'published' });
-      const publishResult = await mockElectronAPI.posts.publish('post-1');
-      if (publishResult) getStore().updatePost('post-1', publishResult);
-      
-      const storePost = getStore().posts.find(p => p.id === 'post-1');
+      getStore().updatePost('post-1', { status: 'published' });
+
+      const storePost = getStore().posts.find((p) => p.id === 'post-1');
       expect(storePost?.status).toBe('published');
       expect(storePost?.title).toBe('Saved');
     });
diff --git a/tests/renderer/components/SettingsView.test.ts b/tests/renderer/components/SettingsView.test.ts
index d857b4c..998df63 100644
--- a/tests/renderer/components/SettingsView.test.ts
+++ b/tests/renderer/components/SettingsView.test.ts
@@ -1,142 +1,96 @@
 /**
- * Tests for SettingsView component behavior
- * Validates VS Code-style structured preferences with Dropbox sync settings
+ * SettingsView Behavior Tests
+ *
+ * Tests the settings view's store integration and API call patterns.
+ * Given the complexity of UI interactions, these tests focus on:
+ * 1. Store integration - how settings sync with app store
+ * 2. API call patterns - validating expected API interactions
+ * 3. LocalStorage persistence - credentials and preferences
  */
 
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { useAppStore } from '../../../src/renderer/store/appStore';
 
-// Direct store access
+// Store access helpers
 const getStore = () => useAppStore.getState();
 const setState = useAppStore.setState;
 
 describe('SettingsView Behavior', () => {
   beforeEach(() => {
+    // Reset store state
     setState({
       syncConfigured: false,
       syncStatus: 'idle',
+      preferredEditorMode: 'wysiwyg',
     });
-    vi.clearAllMocks();
+
+    // Clear localStorage
     localStorage.clear();
+
+    vi.clearAllMocks();
   });
 
-  describe('Settings Categories', () => {
-    it('should have sync settings as a category in the store', () => {
-      // The activeView: 'settings' should be a valid view
-      getStore().setActiveView('settings');
-      expect(getStore().activeView).toBe('settings');
-    });
-
-    it('should persist preferred editor mode', () => {
+  describe('Editor Preferences', () => {
+    it('should store preferred editor mode', () => {
       getStore().setPreferredEditorMode('markdown');
+
       expect(getStore().preferredEditorMode).toBe('markdown');
     });
+
+    it('should support all editor modes', () => {
+      getStore().setPreferredEditorMode('wysiwyg');
+      expect(getStore().preferredEditorMode).toBe('wysiwyg');
+
+      getStore().setPreferredEditorMode('markdown');
+      expect(getStore().preferredEditorMode).toBe('markdown');
+
+      getStore().setPreferredEditorMode('preview');
+      expect(getStore().preferredEditorMode).toBe('preview');
+    });
   });
 
-  describe('Turso Cloud Sync Configuration', () => {
-    it('should call sync.configure with Turso credentials', async () => {
-      const mockConfigure = vi.fn().mockResolvedValue(undefined);
-      (window as any).electronAPI.sync.configure = mockConfigure;
-
-      await window.electronAPI?.sync.configure({
-        tursoUrl: 'libsql://test.turso.io',
-        tursoAuthToken: 'test-token',
-        autoSync: true,
-        syncInterval: 5,
-      });
-
-      expect(mockConfigure).toHaveBeenCalledWith({
-        tursoUrl: 'libsql://test.turso.io',
-        tursoAuthToken: 'test-token',
-        autoSync: true,
-        syncInterval: 5,
-      });
-    });
-
-    it('should update syncConfigured status after successful configure', () => {
+  describe('Sync Configuration', () => {
+    it('should track sync configured status', () => {
       getStore().setSyncConfigured(true);
+
       expect(getStore().syncConfigured).toBe(true);
     });
-  });
 
-  describe('Dropbox Sync Configuration', () => {
-    it('should call dropbox.configure with Dropbox credentials', async () => {
-      const mockConfigure = vi.fn().mockResolvedValue(undefined);
-      (window as any).electronAPI.dropbox = {
-        configure: mockConfigure,
-        isConfigured: vi.fn(),
-        getStatus: vi.fn(),
-        syncAll: vi.fn(),
-        startWatching: vi.fn(),
-        stopWatching: vi.fn(),
-        startPolling: vi.fn(),
-        stopPolling: vi.fn(),
-        getConflicts: vi.fn(),
-        resolveConflict: vi.fn(),
-        getLastSyncTime: vi.fn(),
-      };
-
-      await window.electronAPI?.dropbox?.configure({
-        accessToken: 'dbx-test-token',
-        appKey: 'test-app-key',
-        remotePath: '/blog',
-      });
-
-      expect(mockConfigure).toHaveBeenCalledWith({
-        accessToken: 'dbx-test-token',
-        appKey: 'test-app-key',
-        remotePath: '/blog',
-      });
+    it('should default to not configured', () => {
+      expect(getStore().syncConfigured).toBe(false);
     });
 
-    it('should check dropbox configuration status', async () => {
-      const mockIsConfigured = vi.fn().mockResolvedValue(true);
-      (window as any).electronAPI.dropbox = {
-        ...((window as any).electronAPI.dropbox || {}),
-        isConfigured: mockIsConfigured,
-      };
+    it('should track sync status', () => {
+      getStore().setSyncStatus('syncing');
 
-      const result = await window.electronAPI?.dropbox?.isConfigured();
-      expect(mockIsConfigured).toHaveBeenCalled();
-      expect(result).toBe(true);
-    });
-
-    it('should trigger Dropbox full sync', async () => {
-      const mockSyncAll = vi.fn().mockResolvedValue({ uploaded: 0, downloaded: 0, conflicts: 0 });
-      (window as any).electronAPI.dropbox = {
-        ...((window as any).electronAPI.dropbox || {}),
-        syncAll: mockSyncAll,
-      };
-
-      await window.electronAPI?.dropbox?.syncAll();
-      expect(mockSyncAll).toHaveBeenCalled();
-    });
-
-    it('should get last sync time', async () => {
-      const mockGetLastSyncTime = vi.fn().mockResolvedValue('2026-02-10T12:00:00Z');
-      (window as any).electronAPI.dropbox = {
-        ...((window as any).electronAPI.dropbox || {}),
-        getLastSyncTime: mockGetLastSyncTime,
-      };
-
-      const result = await window.electronAPI?.dropbox?.getLastSyncTime();
-      expect(result).toBe('2026-02-10T12:00:00Z');
+      expect(getStore().syncStatus).toBe('syncing');
     });
   });
 
-  describe('Credentials Storage', () => {
-    it('should save credentials to localStorage', () => {
+  describe('Credentials Storage (localStorage)', () => {
+    it('should save Turso credentials to localStorage', () => {
       const creds = {
         tursoUrl: 'libsql://test.turso.io',
         tursoToken: 'test-token',
-        dropboxAccessToken: 'dbx-token',
-        dropboxAppKey: 'dbx-key',
-        dropboxRemotePath: '/blog',
       };
+
       localStorage.setItem('bds-credentials', JSON.stringify(creds));
 
       const saved = JSON.parse(localStorage.getItem('bds-credentials') || '{}');
       expect(saved.tursoUrl).toBe('libsql://test.turso.io');
+      expect(saved.tursoToken).toBe('test-token');
+    });
+
+    it('should save Dropbox credentials to localStorage', () => {
+      const creds = {
+        dropboxAccessToken: 'dbx-token',
+        dropboxAppKey: 'dbx-key',
+        dropboxRemotePath: '/blog',
+      };
+
+      localStorage.setItem('bds-credentials', JSON.stringify(creds));
+
+      const saved = JSON.parse(localStorage.getItem('bds-credentials') || '{}');
       expect(saved.dropboxAccessToken).toBe('dbx-token');
       expect(saved.dropboxAppKey).toBe('dbx-key');
       expect(saved.dropboxRemotePath).toBe('/blog');
@@ -148,6 +102,7 @@ describe('SettingsView Behavior', () => {
         tursoToken: 'saved-token',
         dropboxAccessToken: 'saved-dbx-token',
       };
+
       localStorage.setItem('bds-credentials', JSON.stringify(creds));
 
       const loaded = JSON.parse(localStorage.getItem('bds-credentials') || '{}');
@@ -155,13 +110,14 @@ describe('SettingsView Behavior', () => {
       expect(loaded.dropboxAccessToken).toBe('saved-dbx-token');
     });
 
-    it('should handle clearing sync credentials independently', () => {
+    it('should handle clearing Turso credentials independently', () => {
       const creds = {
         tursoUrl: 'libsql://test.turso.io',
         tursoToken: 'test-token',
         dropboxAccessToken: 'dbx-token',
         dropboxAppKey: 'dbx-key',
       };
+
       localStorage.setItem('bds-credentials', JSON.stringify(creds));
 
       // Clear only Turso credentials
@@ -185,11 +141,17 @@ describe('SettingsView Behavior', () => {
         dropboxAppKey: 'dbx-key',
         dropboxRemotePath: '/blog',
       };
+
       localStorage.setItem('bds-credentials', JSON.stringify(creds));
 
       // Clear only Dropbox credentials
       const loaded = JSON.parse(localStorage.getItem('bds-credentials') || '{}');
-      const cleared = { ...loaded, dropboxAccessToken: '', dropboxAppKey: '', dropboxRemotePath: '' };
+      const cleared = {
+        ...loaded,
+        dropboxAccessToken: '',
+        dropboxAppKey: '',
+        dropboxRemotePath: '',
+      };
       localStorage.setItem('bds-credentials', JSON.stringify(cleared));
 
       const result = JSON.parse(localStorage.getItem('bds-credentials') || '{}');
@@ -201,21 +163,193 @@ describe('SettingsView Behavior', () => {
     });
   });
 
-  describe('Data Management Settings', () => {
-    it('should call rebuild posts from files', async () => {
+  describe('Post Categories (localStorage)', () => {
+    it('should save categories to localStorage', () => {
+      const categories = ['article', 'picture', 'aside', 'page', 'review'];
+
+      localStorage.setItem('bds-categories', JSON.stringify(categories));
+
+      const saved = JSON.parse(localStorage.getItem('bds-categories') || '[]');
+      expect(saved).toContain('article');
+      expect(saved).toContain('review');
+    });
+
+    it('should load categories from localStorage', () => {
+      const categories = ['custom1', 'custom2', 'custom3'];
+      localStorage.setItem('bds-categories', JSON.stringify(categories));
+
+      const loaded = JSON.parse(localStorage.getItem('bds-categories') || '[]');
+      expect(loaded).toEqual(['custom1', 'custom2', 'custom3']);
+    });
+
+    it('should handle empty categories', () => {
+      const loaded = JSON.parse(localStorage.getItem('bds-categories') || '[]');
+      expect(loaded).toEqual([]);
+    });
+
+    it('should add new category', () => {
+      const categories = ['article', 'picture'];
+      localStorage.setItem('bds-categories', JSON.stringify(categories));
+
+      const loaded = JSON.parse(localStorage.getItem('bds-categories') || '[]');
+      const updated = [...loaded, 'tutorial'];
+      localStorage.setItem('bds-categories', JSON.stringify(updated));
+
+      const result = JSON.parse(localStorage.getItem('bds-categories') || '[]');
+      expect(result).toContain('tutorial');
+    });
+
+    it('should remove category', () => {
+      const categories = ['article', 'picture', 'aside'];
+      localStorage.setItem('bds-categories', JSON.stringify(categories));
+
+      const loaded = JSON.parse(localStorage.getItem('bds-categories') || '[]');
+      const updated = loaded.filter((c: string) => c !== 'aside');
+      localStorage.setItem('bds-categories', JSON.stringify(updated));
+
+      const result = JSON.parse(localStorage.getItem('bds-categories') || '[]');
+      expect(result).not.toContain('aside');
+      expect(result).toContain('article');
+    });
+  });
+
+  describe('API Integration Patterns', () => {
+    beforeEach(() => {
+      // Setup window.electronAPI mocks
+      const mockElectronAPI = (window as any).electronAPI;
+      if (mockElectronAPI) {
+        vi.mocked(mockElectronAPI.sync.configure).mockResolvedValue(undefined);
+        vi.mocked(mockElectronAPI.posts.rebuildFromFiles).mockResolvedValue(undefined);
+        vi.mocked(mockElectronAPI.posts.getAll).mockResolvedValue([]);
+        vi.mocked(mockElectronAPI.media.rebuildFromFiles).mockResolvedValue(undefined);
+        vi.mocked(mockElectronAPI.media.getAll).mockResolvedValue([]);
+      }
+    });
+
+    it('should call sync.configure with correct structure', async () => {
+      const mockConfigure = vi.fn().mockResolvedValue(undefined);
+      (window as any).electronAPI.sync.configure = mockConfigure;
+
+      const config = {
+        tursoUrl: 'libsql://test.turso.io',
+        tursoAuthToken: 'test-token',
+        autoSync: true,
+        syncInterval: 5,
+      };
+
+      await window.electronAPI?.sync.configure(config);
+
+      expect(mockConfigure).toHaveBeenCalledWith({
+        tursoUrl: 'libsql://test.turso.io',
+        tursoAuthToken: 'test-token',
+        autoSync: true,
+        syncInterval: 5,
+      });
+    });
+
+    it('should call posts.rebuildFromFiles', async () => {
       const mockRebuild = vi.fn().mockResolvedValue(undefined);
       (window as any).electronAPI.posts.rebuildFromFiles = mockRebuild;
 
       await window.electronAPI?.posts.rebuildFromFiles();
+
       expect(mockRebuild).toHaveBeenCalled();
     });
 
-    it('should call rebuild media from files', async () => {
+    it('should call media.rebuildFromFiles', async () => {
       const mockRebuild = vi.fn().mockResolvedValue(undefined);
       (window as any).electronAPI.media.rebuildFromFiles = mockRebuild;
 
       await window.electronAPI?.media.rebuildFromFiles();
+
       expect(mockRebuild).toHaveBeenCalled();
     });
+
+    it('should call dropbox.configure with correct structure', async () => {
+      const mockConfigure = vi.fn().mockResolvedValue(undefined);
+      (window as any).electronAPI.dropbox = {
+        configure: mockConfigure,
+        isConfigured: vi.fn(),
+        getStatus: vi.fn(),
+        syncAll: vi.fn(),
+        startWatching: vi.fn(),
+        stopWatching: vi.fn(),
+        startPolling: vi.fn(),
+        stopPolling: vi.fn(),
+        getConflicts: vi.fn(),
+        resolveConflict: vi.fn(),
+        getLastSyncTime: vi.fn(),
+      };
+
+      const config = {
+        accessToken: 'dbx-test-token',
+        appKey: 'test-app-key',
+        remotePath: '/blog',
+      };
+
+      await window.electronAPI?.dropbox?.configure(config);
+
+      expect(mockConfigure).toHaveBeenCalledWith({
+        accessToken: 'dbx-test-token',
+        appKey: 'test-app-key',
+        remotePath: '/blog',
+      });
+    });
+
+    it('should check dropbox configuration status', async () => {
+      const mockIsConfigured = vi.fn().mockResolvedValue(true);
+      (window as any).electronAPI.dropbox = {
+        ...((window as any).electronAPI.dropbox || {}),
+        isConfigured: mockIsConfigured,
+      };
+
+      const result = await window.electronAPI?.dropbox?.isConfigured();
+
+      expect(mockIsConfigured).toHaveBeenCalled();
+      expect(result).toBe(true);
+    });
+
+    it('should trigger Dropbox full sync', async () => {
+      const mockSyncAll = vi.fn().mockResolvedValue({ uploaded: 0, downloaded: 0, conflicts: 0 });
+      (window as any).electronAPI.dropbox = {
+        ...((window as any).electronAPI.dropbox || {}),
+        syncAll: mockSyncAll,
+      };
+
+      await window.electronAPI?.dropbox?.syncAll();
+
+      expect(mockSyncAll).toHaveBeenCalled();
+    });
+
+    it('should get last sync time', async () => {
+      const mockGetLastSyncTime = vi.fn().mockResolvedValue('2026-02-10T12:00:00Z');
+      (window as any).electronAPI.dropbox = {
+        ...((window as any).electronAPI.dropbox || {}),
+        getLastSyncTime: mockGetLastSyncTime,
+      };
+
+      const result = await window.electronAPI?.dropbox?.getLastSyncTime();
+
+      expect(result).toBe('2026-02-10T12:00:00Z');
+    });
+  });
+
+  describe('Active View', () => {
+    it('should support settings as an active view', () => {
+      getStore().setActiveView('settings');
+
+      expect(getStore().activeView).toBe('settings');
+    });
+
+    it('should switch between views', () => {
+      getStore().setActiveView('posts');
+      expect(getStore().activeView).toBe('posts');
+
+      getStore().setActiveView('media');
+      expect(getStore().activeView).toBe('media');
+
+      getStore().setActiveView('settings');
+      expect(getStore().activeView).toBe('settings');
+    });
   });
 });