feat: style editor for blog

tests/renderer/components/PagesShortcut.test.tsx

@@ -156,4 +156,26 @@ describe('Pages shortcut UI', () => {
     expect(wrappers.length).toBeGreaterThanOrEqual(2);
     expect((wrappers[0] as HTMLElement).style.display).toBe('flex');
   });
+
+  it('opens style tab from settings sidebar navigation', async () => {
+    useAppStore.setState({
+      sidebarVisible: true,
+      tabs: [],
+      activeTabId: null,
+    });
+    useAppStore.getState().setActiveView('settings');
+
+    render(<Sidebar />);
+
+    const styleButton = await screen.findByRole('button', { name: /style/i });
+    styleButton.click();
+
+    const state = useAppStore.getState();
+    expect(state.tabs).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ type: 'style', id: 'style' }),
+      ])
+    );
+    expect(state.activeTabId).toBe('style');
+  });
 });

tests/renderer/components/StatusBar.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { StatusBar } from '../../../src/renderer/components/StatusBar/StatusBar';
+import { useAppStore } from '../../../src/renderer/store';
+
+vi.mock('../../../src/renderer/components/ProjectSelector', () => ({
+  ProjectSelector: () => <div data-testid="project-selector">Project</div>,
+}));
+
+describe('StatusBar', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    useAppStore.setState({
+      media: [],
+      tasks: [],
+      selectedPostId: null,
+      totalPosts: 0,
+      picoTheme: 'slate',
+    } as any);
+  });
+
+  it('shows the currently applied theme', () => {
+    render(<StatusBar />);
+
+    expect(screen.getByText('Theme: slate')).toBeInTheDocument();
+  });
+});

tests/renderer/components/StyleView.test.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { StyleView } from '../../../src/renderer/components/StyleView/StyleView';
+import { useAppStore } from '../../../src/renderer/store';
+
+describe('StyleView', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    useAppStore.setState({
+      activeProject: {
+        id: 'project-1',
+        name: 'Test Project',
+        slug: 'test-project',
+        isActive: true,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+      },
+      picoTheme: 'slate',
+    } as any);
+
+    (window as any).electronAPI = {
+      ...(window as any).electronAPI,
+      meta: {
+        ...(window as any).electronAPI?.meta,
+        getProjectMetadata: vi.fn().mockResolvedValue({ picoTheme: 'slate' }),
+        updateProjectMetadata: vi.fn().mockResolvedValue({ picoTheme: 'blue' }),
+      },
+    };
+  });
+
+  it('lets users select a theme and apply it', async () => {
+    render(<StyleView />);
+
+    const blueButton = await screen.findByRole('button', { name: /blue/i });
+    fireEvent.click(blueButton);
+
+    const applyButton = screen.getByRole('button', { name: /apply theme/i });
+    fireEvent.click(applyButton);
+
+    expect((window as any).electronAPI.meta.updateProjectMetadata).toHaveBeenCalledWith(
+      expect.objectContaining({ picoTheme: 'blue' })
+    );
+  });
+
+  it('renders the style preview iframe for top posts with selected theme', async () => {
+    render(<StyleView />);
+
+    const iframe = await screen.findByTitle('Theme preview');
+    expect(iframe.getAttribute('src')).toContain('/__style-preview');
+    expect(iframe.getAttribute('src')).toContain('theme=slate');
+    expect(iframe.getAttribute('src')).toContain('mode=auto');
+  });
+
+  it('lets users force dark/light mode for preview iframe', async () => {
+    render(<StyleView />);
+
+    const modeSelect = await screen.findByLabelText(/preview mode/i);
+    fireEvent.change(modeSelect, { target: { value: 'dark' } });
+
+    const iframe = await screen.findByTitle('Theme preview');
+    expect(iframe.getAttribute('src')).toContain('mode=dark');
+  });
+
+  it('renders each theme swatch with accent, light, and dark tones', async () => {
+    const { container } = render(<StyleView />);
+
+    await screen.findByRole('button', { name: /blue/i });
+
+    const blueSwatch = container.querySelector('.style-theme-swatch-blue');
+    expect(blueSwatch).not.toBeNull();
+
+    const tones = blueSwatch?.querySelectorAll('.style-theme-tone') ?? [];
+    expect(tones.length).toBe(3);
+    expect(blueSwatch?.textContent).toContain('Blue');
+  });
+});

tests/renderer/components/TabBar.test.tsx

@@ -86,4 +86,15 @@ describe('TabBar', () => {
 
     expect(container.querySelector('.tab-bar')).toBeNull();
   });
+
+  it('renders style tab label', async () => {
+    useAppStore.setState({
+      tabs: [{ type: 'style', id: 'style', isTransient: false }],
+      activeTabId: 'style',
+    });
+
+    render(<TabBar />);
+
+    expect(await screen.findByText('Style')).toBeInTheDocument();
+  });
 });

tests/renderer/documentationStructure.test.ts

@@ -23,7 +23,8 @@ describe('documentation structure and presentation', () => {
     );
     const source = readFileSync(viewPath, 'utf8');
 
-    expect(source).toContain('@picocss/pico/css/pico.conditional.slate.min.css');
+    expect(source).toContain('ensureRendererPicoThemeStylesheet');
+    expect(source).toContain('getRendererPicoTheme');
     expect(source).toContain('className="documentation-content markdown-body pico"');
     expect(source).toContain('data-theme="auto"');
   });

tests/renderer/store/tabStore.test.ts

@@ -343,6 +343,29 @@ describe('Tab Management', () => {
 
       expect(getStore().tabs).toHaveLength(1);
     });
+
+    it('should open style as a dedicated tab', () => {
+      getStore().openTab({ type: 'style', id: 'style', isTransient: false });
+
+      expect(getStore().tabs).toHaveLength(1);
+      expect(getStore().tabs[0].type).toBe('style');
+      expect(getStore().activeTabId).toBe('style');
+    });
+
+    it('should restore style tab from persisted state', () => {
+      const tabState = {
+        tabs: [
+          { type: 'style' as const, id: 'style', isTransient: false },
+        ],
+        activeTabId: 'style',
+      };
+
+      getStore().restoreTabState(tabState);
+
+      expect(getStore().tabs).toHaveLength(1);
+      expect(getStore().tabs[0].type).toBe('style');
+      expect(getStore().activeTabId).toBe('style');
+    });
   });
 
   describe('Multiple Tab Types', () => {