wip

Author: PanchoutNathan

.gitignore

@@ -82,3 +82,8 @@ db.sqlite3
 
 # Cursor rules
 .cursorrules
+
+# Claude
+CLAUDE.md
+.claude/
+openspec/

src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
 import AddLinkSVG from '@/assets/icons/ui-kit/add_link.svg';
+import CoPresentSVG from '@/assets/icons/ui-kit/co_present.svg';
 import ContentCopySVG from '@/assets/icons/ui-kit/content_copy.svg';
 import DeleteSVG from '@/assets/icons/ui-kit/delete.svg';
 import DownloadSVG from '@/assets/icons/ui-kit/download.svg';
@@ -79,6 +80,14 @@ const ModalExport =
       )
     : null;
 
+const PresenterOverlay = dynamic(
+  () =>
+    import('@/docs/doc-presenter').then((mod) => ({
+      default: mod.PresenterOverlay,
+    })),
+  { ssr: false },
+);
+
 interface DocToolBoxProps {
   doc: Doc;
 }
@@ -93,6 +102,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
 
   const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false);
   const [isModalExportOpen, setIsModalExportOpen] = useState(false);
+  const [isPresenterOpen, setIsPresenterOpen] = useState(false);
   const selectHistoryModal = useModal();
   const modalShare = useModal();
 
@@ -176,6 +186,15 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
       showSeparator: true,
       show: !emoji && doc.abilities.partial_update && !isTopRoot,
     },
+    {
+      label: t('Present'),
+      icon: <CoPresentSVG width={24} height={24} aria-hidden="true" />,
+      callback: () => {
+        setIsPresenterOpen(true);
+      },
+      show: !doc.deleted_at && !isSmallMobile,
+      testId: `docs-actions-present-${doc.id}`,
+    },
     {
       label: t('Copy link'),
       icon: <AddLinkSVG width={24} height={24} aria-hidden="true" />,
@@ -320,6 +339,15 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
           doc={doc}
         />
       )}
+      {isPresenterOpen && (
+        <PresenterOverlay
+          doc={doc}
+          onClose={() => {
+            setIsPresenterOpen(false);
+            restoreFocus();
+          }}
+        />
+      )}
     </Box>
   );
 };

src/frontend/apps/impress/src/features/docs/doc-presenter/__tests__/PresenterOverlay.spec.tsx

@@ -0,0 +1,141 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  test,
+  vi,
+} from 'vitest';
+
+import { AppWrapper } from '@/tests/utils';
+
+const requestFullscreen = vi.fn(async () => {});
+const exitFullscreen = vi.fn(async () => {});
+
+vi.mock('@/docs/doc-editor/components/BlockNoteEditor', () => ({
+  blockNoteSchema: {},
+}));
+
+vi.mock('@/docs/doc-editor/styles', () => ({
+  cssEditor: '',
+}));
+
+vi.mock('@blocknote/mantine', () => ({
+  BlockNoteView: ({ editor: _editor }: { editor: unknown }) => (
+    <div data-testid="blocknote-view" />
+  ),
+}));
+
+vi.mock('@blocknote/react', () => ({
+  useCreateBlockNote: () => ({}),
+}));
+
+const editorDocument = [
+  { type: 'heading', content: [{ type: 'text', text: 'Slide 1' }] },
+  { type: 'divider' },
+  { type: 'paragraph', content: [{ type: 'text', text: 'Slide 2 body' }] },
+  { type: 'divider' },
+  { type: 'paragraph', content: [{ type: 'text', text: 'Slide 3 body' }] },
+  { type: 'divider' },
+  // Empty group between two dividers — must be dropped.
+  { type: 'paragraph', content: [{ type: 'text', text: '   ' }] },
+];
+
+vi.mock('@/docs/doc-editor/stores', () => ({
+  useEditorStore: (selector: (s: unknown) => unknown) =>
+    selector({ editor: { document: editorDocument } }),
+}));
+
+import { PresenterOverlay } from '../components/PresenterOverlay';
+
+describe('PresenterOverlay', () => {
+  beforeEach(() => {
+    Object.defineProperty(document, 'fullscreenElement', {
+      configurable: true,
+      get: () => null,
+    });
+    Object.defineProperty(document.documentElement, 'requestFullscreen', {
+      configurable: true,
+      value: requestFullscreen,
+    });
+    Object.defineProperty(document, 'exitFullscreen', {
+      configurable: true,
+      value: exitFullscreen,
+    });
+    requestFullscreen.mockClear();
+    exitFullscreen.mockClear();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  const doc = { id: 'd1', deleted_at: null } as never;
+
+  test('renders 3 slides (empty group dropped) and starts at slide 1/3', () => {
+    render(
+      <AppWrapper>
+        <PresenterOverlay doc={doc} onClose={vi.fn()} />
+      </AppWrapper>,
+    );
+    expect(screen.getByText('1 / 3')).toBeInTheDocument();
+  });
+
+  test('ArrowRight navigates to the next slide', () => {
+    render(
+      <AppWrapper>
+        <PresenterOverlay doc={doc} onClose={vi.fn()} />
+      </AppWrapper>,
+    );
+    fireEvent.keyDown(window, { code: 'ArrowRight' });
+    expect(screen.getByText('2 / 3')).toBeInTheDocument();
+  });
+
+  test('clicking close invokes onClose', () => {
+    const onClose = vi.fn();
+    render(
+      <AppWrapper>
+        <PresenterOverlay doc={doc} onClose={onClose} />
+      </AppWrapper>,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Close presenter' }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  test('next is disabled on the last slide', () => {
+    render(
+      <AppWrapper>
+        <PresenterOverlay doc={doc} onClose={vi.fn()} />
+      </AppWrapper>,
+    );
+    fireEvent.keyDown(window, { code: 'End' });
+    expect(screen.getByText('3 / 3')).toBeInTheDocument();
+    expect(
+      (screen.getByRole('button', { name: 'Next slide' }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(true);
+  });
+
+  test('mounting does NOT auto-enter fullscreen', () => {
+    render(
+      <AppWrapper>
+        <PresenterOverlay doc={doc} onClose={vi.fn()} />
+      </AppWrapper>,
+    );
+    expect(requestFullscreen).not.toHaveBeenCalled();
+  });
+
+  test('clicking the fullscreen toggle calls requestFullscreen on documentElement', () => {
+    render(
+      <AppWrapper>
+        <PresenterOverlay doc={doc} onClose={vi.fn()} />
+      </AppWrapper>,
+    );
+    requestFullscreen.mockClear();
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Enter fullscreen' }),
+    );
+    expect(requestFullscreen).toHaveBeenCalled();
+  });
+});

src/frontend/apps/impress/src/features/docs/doc-presenter/__tests__/useBrowserFullscreen.spec.ts

@@ -0,0 +1,94 @@
+import { act, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+
+import { useBrowserFullscreen } from '../hooks/useBrowserFullscreen';
+
+describe('useBrowserFullscreen', () => {
+  let fullscreenElement: Element | null = null;
+  const requestFullscreen = vi.fn(async () => {
+    fullscreenElement = document.documentElement;
+    document.dispatchEvent(new Event('fullscreenchange'));
+  });
+  const exitFullscreen = vi.fn(async () => {
+    fullscreenElement = null;
+    document.dispatchEvent(new Event('fullscreenchange'));
+  });
+
+  beforeEach(() => {
+    fullscreenElement = null;
+    Object.defineProperty(document, 'fullscreenElement', {
+      configurable: true,
+      get: () => fullscreenElement,
+    });
+    Object.defineProperty(document.documentElement, 'requestFullscreen', {
+      configurable: true,
+      value: requestFullscreen,
+    });
+    Object.defineProperty(document, 'exitFullscreen', {
+      configurable: true,
+      value: exitFullscreen,
+    });
+    requestFullscreen.mockClear();
+    exitFullscreen.mockClear();
+  });
+
+  afterEach(() => {
+    fullscreenElement = null;
+  });
+
+  test('initial state reflects current fullscreen state', () => {
+    const { result } = renderHook(() => useBrowserFullscreen());
+    expect(result.current.isFullscreen).toBe(false);
+  });
+
+  test('enter() requests fullscreen and updates state', async () => {
+    const { result } = renderHook(() => useBrowserFullscreen());
+    await act(async () => {
+      await result.current.enter();
+    });
+    expect(requestFullscreen).toHaveBeenCalledTimes(1);
+    expect(result.current.isFullscreen).toBe(true);
+  });
+
+  test('enter() is a no-op if already fullscreen', async () => {
+    fullscreenElement = document.documentElement;
+    const { result } = renderHook(() => useBrowserFullscreen());
+    await act(async () => {
+      await result.current.enter();
+    });
+    expect(requestFullscreen).not.toHaveBeenCalled();
+  });
+
+  test('exit() leaves fullscreen and updates state', async () => {
+    const { result } = renderHook(() => useBrowserFullscreen());
+    await act(async () => {
+      await result.current.enter();
+    });
+    await act(async () => {
+      await result.current.exit();
+    });
+    expect(exitFullscreen).toHaveBeenCalledTimes(1);
+    expect(result.current.isFullscreen).toBe(false);
+  });
+
+  test('toggle() flips state', async () => {
+    const { result } = renderHook(() => useBrowserFullscreen());
+    await act(async () => {
+      await result.current.toggle();
+    });
+    expect(result.current.isFullscreen).toBe(true);
+    await act(async () => {
+      await result.current.toggle();
+    });
+    expect(result.current.isFullscreen).toBe(false);
+  });
+
+  test('reacts to external fullscreenchange events', () => {
+    const { result } = renderHook(() => useBrowserFullscreen());
+    act(() => {
+      fullscreenElement = document.documentElement;
+      document.dispatchEvent(new Event('fullscreenchange'));
+    });
+    expect(result.current.isFullscreen).toBe(true);
+  });
+});