fix(settings): allow text selection in settings panel (#122)

Signed-off-by: Logan Nguyen <lg.131.dev@gmail.com>

Author: quiet-node

src/settings/SettingsWindow.test.tsx

@@ -273,6 +273,33 @@ describe('SettingsWindow', () => {
     expect(__mockWindow.startDragging).not.toHaveBeenCalled();
   });
 
+  it('mousedown on a text-bearing element does NOT trigger drag (so users can highlight + copy)', async () => {
+    const marker: CorruptMarker = { path: '/tmp/config.toml.corrupt-9', ts: 9 };
+    invokeMock.mockImplementation(async (cmd: string) => {
+      if (cmd === 'get_corrupt_marker') return marker;
+      return defaultInvoke(cmd);
+    });
+    render(<SettingsWindow />);
+    // Banner renders <code>config.toml</code> directly inside the
+    // banner text — a text-bearing leaf. Mousedown on it must NOT drag.
+    const banner = await screen.findByRole('alert');
+    const codeEl = banner.querySelector('code')!;
+    __mockWindow.startDragging.mockClear();
+    fireEvent.mouseDown(codeEl, { target: codeEl, button: 0 });
+    expect(__mockWindow.startDragging).not.toHaveBeenCalled();
+  });
+
+  it('mousedown with a non-primary button is ignored (no drag, lets context menus through)', async () => {
+    render(<SettingsWindow />);
+    await waitFor(() => screen.getByRole('tab', { name: /AI/ }));
+    __mockWindow.startDragging.mockClear();
+    const root = screen
+      .getByRole('tab', { name: /AI/ })
+      .closest('[role="tablist"]')!.parentElement!;
+    fireEvent.mouseDown(root, { target: root, button: 2 });
+    expect(__mockWindow.startDragging).not.toHaveBeenCalled();
+  });
+
   it('basename helper handles paths without a slash by rendering them verbatim', async () => {
     const marker: CorruptMarker = { path: 'config.toml.corrupt-7', ts: 7 };
     invokeMock.mockImplementation(async (cmd: string) => {

src/settings/SettingsWindow.tsx

@@ -208,16 +208,28 @@ export function SettingsWindow() {
   }, []);
 
   /**
-   * Native window drag from any non-interactive surface — mirrors the
-   * chat overlay's `handleDragStart` in App.tsx. Walks up the DOM from
-   * the click target and bails if it hits a form control or button so
-   * those keep working; otherwise calls `startDragging()`. We do this
-   * via JS instead of `data-tauri-drag-region` because the attribute
-   * only initiates drag from the element it's set on (and form
-   * children inside the body block the attribute from working there).
+   * Native window drag from non-interactive, non-text surfaces. Walks
+   * up the DOM and bails on:
+   *   1. Interactive tags (form controls, buttons, links, SVGs) so
+   *      clicks on them still register as clicks, not drags.
+   *   2. Text-bearing leaves — any element that directly contains a
+   *      non-empty text node. This lets users click-drag to highlight
+   *      labels, values, and descriptions inside the body, then Cmd+C
+   *      to copy. Without this check the whole window would slide
+   *      under the cursor and the selection would never start.
+   *
+   * We do this via JS instead of `data-tauri-drag-region` because the
+   * attribute only initiates drag from the element it's set on, and
+   * form children inside the body block it from working at the root.
+   *
+   * Only the primary mouse button initiates a drag; secondary/middle
+   * clicks pass through so context menus and middle-click behaviors
+   * are unaffected.
    */
   const handleDragStart = useCallback((e: React.MouseEvent) => {
-    const el = e.target as HTMLElement | null;
+    if (e.button !== 0) return;
+    const el = e.target as HTMLElement;
+
     const INTERACTIVE_TAGS = new Set([
       'TEXTAREA',
       'INPUT',
@@ -228,11 +240,24 @@ export function SettingsWindow() {
       'SVG',
       'LABEL',
     ]);
-    let current = el;
+    let current: HTMLElement | null = el;
     while (current) {
       if (INTERACTIVE_TAGS.has(current.tagName.toUpperCase())) return;
       current = current.parentElement;
     }
+
+    // Bail if the click landed directly on a text node. Layout
+    // wrappers (DIV/SECTION) without their own text still drag.
+    for (const node of Array.from(el.childNodes)) {
+      if (
+        node.nodeType === Node.TEXT_NODE &&
+        node.textContent &&
+        node.textContent.trim().length > 0
+      ) {
+        return;
+      }
+    }
+
     e.preventDefault();
     void getCurrentWindow().startDragging();
   }, []);

src/styles/settings.module.css

@@ -86,6 +86,10 @@
   font-size: 12.5px;
   color: var(--color-text-primary);
   flex-shrink: 0;
+  /* Banner content (corrupt-config path, file name) must be selectable
+   * so users can copy the path. The window-wide `user-select: none` on
+   * `.window` is overridden here. */
+  user-select: text;
   box-shadow:
     0 2px 8px -2px rgba(0, 0, 0, 0.3),
     inset 0 1px 0 rgba(255, 255, 255, 0.04);
@@ -181,6 +185,13 @@
   position: relative;
   padding: 18px 22px 24px;
   min-width: 0;
+  /* Body content (labels, descriptions, values) must be selectable so
+   * users can highlight + Cmd+C. Window chrome stays unselectable via
+   * the `user-select: none` on `.window`. The drag handler in
+   * `SettingsWindow.tsx` is the matching half: it bails out when the
+   * mousedown target carries a direct text node, so dragging from text
+   * runs the selection instead of moving the window. */
+  user-select: text;
 }
 .bodyScrollable {
   overflow-y: auto;