fix(oc-docs): UI improvements, playground's sidebar icon and request method bg

packages/oc-docs/e2e/tests/playground/playground.spec.ts

@@ -106,10 +106,13 @@ test.describe('playground docks (desktop)', () => {
   test('header toggle hides and restores the playground sidebar', async ({ page, playground }) => {
     await page.goto(openAt('bottom'));
     await expect(playground.sidebarPanel).toBeVisible();
+    await expect(playground.sidebarToggle).toHaveAttribute('aria-pressed', 'true');
     await playground.sidebarToggle.click();
     await expect(playground.sidebarPanel).toHaveCount(0);
+    await expect(playground.sidebarToggle).toHaveAttribute('aria-pressed', 'false');
     await playground.sidebarToggle.click();
     await expect(playground.sidebarPanel).toBeVisible();
+    await expect(playground.sidebarToggle).toHaveAttribute('aria-pressed', 'true');
   });
 
   test('clicking a request in the sidebar loads it, gear opens environments', async ({ page, playground }) => {

packages/oc-docs/src/assets/icons/SidebarToggleIcon.tsx

@@ -1,9 +1,15 @@
 import React from 'react';
 import { baseIconProps } from './baseIconProps';
 
-export const SidebarToggleIcon: React.FC = () => (
+interface SidebarToggleIconProps {
+  /** Fills the sidebar column when the playground sidebar is open. */
+  active?: boolean;
+}
+
+export const SidebarToggleIcon: React.FC<SidebarToggleIconProps> = ({ active = false }) => (
   <svg {...baseIconProps}>
     <rect width="18" height="18" x="3" y="3" rx="2" />
     <path d="M9 3v18" />
+    {active && <rect x="3" y="3.75" width="6" height="16.5" fill="currentColor" stroke="none" />}
   </svg>
 );

packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/QueryBar/StyledWrapper.ts

@@ -58,9 +58,7 @@ export const StyledWrapper = styled.div`
   }
 
   .method-badge {
-    padding: 0.125rem 0.5rem;
-    border-radius: var(--oc-radius);
-    background-color: color-mix(in srgb, currentColor 12%, transparent);
+    padding: 0;
   }
 
   .actions {

packages/oc-docs/src/components/Playground/Playground.tsx

@@ -67,6 +67,7 @@ const Playground: React.FC<PlaygroundProps> = ({ openNonce }) => {
   const shared = {
     dock: effectiveDock,
     onDockChange: setDock,
+    sidebarOpen,
     onToggleSidebar: () => setSidebarOpen((value) => !value),
     onClose: closePlayground,
   };

packages/oc-docs/src/components/Playground/PlaygroundHeader/PlaygroundHeader.spec.tsx

@@ -22,4 +22,20 @@ describe('PlaygroundHeader', () => {
     expect(html).toContain('playground-sidebar-toggle');
     expect(html).toContain('playground-close');
   });
+
+  it('marks the sidebar toggle pressed and fills the icon when the sidebar is open', () => {
+    const html = renderToStaticMarkup(
+      <PlaygroundHeader dock="bottom" onDockChange={noop} onToggleSidebar={noop} onClose={noop} sidebarOpen />
+    );
+    expect(html).toContain('aria-pressed="true"');
+    expect(html).toContain('fill="currentColor"');
+  });
+
+  it('leaves the sidebar toggle unpressed and the icon unfilled when the sidebar is closed', () => {
+    const html = renderToStaticMarkup(
+      <PlaygroundHeader dock="bottom" onDockChange={noop} onToggleSidebar={noop} onClose={noop} />
+    );
+    expect(html).toContain('aria-pressed="false"');
+    expect(html).not.toContain('fill="currentColor"');
+  });
 });

packages/oc-docs/src/components/Playground/PlaygroundHeader/PlaygroundHeader.tsx

@@ -9,6 +9,7 @@ interface PlaygroundHeaderProps {
   dock: DockMode;
   onDockChange: (dock: DockMode) => void;
   showDockSwitcher?: boolean;
+  sidebarOpen?: boolean;
   onToggleSidebar: () => void;
   onClose: () => void;
   collapsed?: boolean;
@@ -20,6 +21,7 @@ const PlaygroundHeader: React.FC<PlaygroundHeaderProps> = ({
   dock,
   onDockChange,
   showDockSwitcher = true,
+  sidebarOpen = false,
   onToggleSidebar,
   onClose,
   collapsed,
@@ -32,10 +34,11 @@ const PlaygroundHeader: React.FC<PlaygroundHeaderProps> = ({
         className="header-sidebar-toggle"
         label="Toggle playground sidebar"
         title="Toggle sidebar"
+        aria-pressed={sidebarOpen}
         data-testid="playground-sidebar-toggle"
         onClick={onToggleSidebar}
       >
-        <SidebarToggleIcon />
+        <SidebarToggleIcon active={sidebarOpen} />
       </IconButton>
       <span className="header-brand">
         <BrunoGlyph />

packages/oc-docs/src/components/Playground/docks/BottomSheetDock/BottomSheetDock.tsx

@@ -12,6 +12,7 @@ const COLLAPSE_EPSILON = 8;
 interface BottomSheetDockProps {
   dock: DockMode;
   onDockChange: (dock: DockMode) => void;
+  sidebarOpen: boolean;
   onToggleSidebar: () => void;
   onClose: () => void;
   /** Bumped on each Try click; re-expands the sheet when it is collapsed. */
@@ -22,6 +23,7 @@ interface BottomSheetDockProps {
 const BottomSheetDock: React.FC<BottomSheetDockProps> = ({
   dock,
   onDockChange,
+  sidebarOpen,
   onToggleSidebar,
   onClose,
   openNonce,
@@ -72,6 +74,7 @@ const BottomSheetDock: React.FC<BottomSheetDockProps> = ({
       <PlaygroundHeader
         dock={dock}
         onDockChange={onDockChange}
+        sidebarOpen={sidebarOpen}
         onToggleSidebar={onToggleSidebar}
         onClose={onClose}
         collapsed={collapsed}

packages/oc-docs/src/components/Playground/docks/InlineDock/InlineDock.tsx

@@ -7,12 +7,13 @@ import { StyledWrapper } from './StyledWrapper';
 interface InlineDockProps {
   dock: DockMode;
   onDockChange: (dock: DockMode) => void;
+  sidebarOpen: boolean;
   onToggleSidebar: () => void;
   onClose: () => void;
   children: React.ReactNode;
 }
 
-const InlineDock: React.FC<InlineDockProps> = ({ dock, onDockChange, onToggleSidebar, onClose, children }) => {
+const InlineDock: React.FC<InlineDockProps> = ({ dock, onDockChange, sidebarOpen, onToggleSidebar, onClose, children }) => {
   const { size, dragging, startDrag } = useDockResize({
     axis: 'x',
     initial: Math.round(window.innerWidth * 0.4),
@@ -31,6 +32,7 @@ const InlineDock: React.FC<InlineDockProps> = ({ dock, onDockChange, onToggleSid
         <PlaygroundHeader
           dock={dock}
           onDockChange={onDockChange}
+          sidebarOpen={sidebarOpen}
           onToggleSidebar={onToggleSidebar}
           onClose={onClose}
         />

packages/oc-docs/src/components/Playground/docks/MobileDock/MobileDock.tsx

@@ -8,12 +8,13 @@ import { StyledWrapper } from './StyledWrapper';
 interface MobileDockProps {
   dock: DockMode;
   onDockChange: (dock: DockMode) => void;
+  sidebarOpen: boolean;
   onToggleSidebar: () => void;
   onClose: () => void;
   children: React.ReactNode;
 }
 
-const MobileDock: React.FC<MobileDockProps> = ({ dock, onDockChange, onToggleSidebar, onClose, children }) => {
+const MobileDock: React.FC<MobileDockProps> = ({ dock, onDockChange, sidebarOpen, onToggleSidebar, onClose, children }) => {
   // Full-screen phone presentation: lock the docs scroll behind it. No dock
   // switcher or collapse - there is nowhere to dock on a phone.
   useLockBodyScroll();
@@ -24,6 +25,7 @@ const MobileDock: React.FC<MobileDockProps> = ({ dock, onDockChange, onToggleSid
         <PlaygroundHeader
           dock={dock}
           onDockChange={onDockChange}
+          sidebarOpen={sidebarOpen}
           onToggleSidebar={onToggleSidebar}
           onClose={onClose}
           showDockSwitcher={false}

packages/oc-docs/src/components/Playground/docks/ModalDock/ModalDock.tsx

@@ -8,12 +8,13 @@ import { StyledWrapper } from './StyledWrapper';
 interface ModalDockProps {
   dock: DockMode;
   onDockChange: (dock: DockMode) => void;
+  sidebarOpen: boolean;
   onToggleSidebar: () => void;
   onClose: () => void;
   children: React.ReactNode;
 }
 
-const ModalDock: React.FC<ModalDockProps> = ({ dock, onDockChange, onToggleSidebar, onClose, children }) => {
+const ModalDock: React.FC<ModalDockProps> = ({ dock, onDockChange, sidebarOpen, onToggleSidebar, onClose, children }) => {
   // Modal is a true full-screen overlay: lock the docs body scroll behind it and
   // close on Escape (the inline/bottom docks are persistent panels, so they get
   // neither). Focus containment / focus-return is a tracked follow-up.
@@ -28,6 +29,7 @@ const ModalDock: React.FC<ModalDockProps> = ({ dock, onDockChange, onToggleSideb
           <PlaygroundHeader
             dock={dock}
             onDockChange={onDockChange}
+            sidebarOpen={sidebarOpen}
             onToggleSidebar={onToggleSidebar}
             onClose={onClose}
           />