feat(size/M):UI improvements - Changed the placement of opencollection and theme toggle button (#129)

* Changed the placement of opencollection and theme toggle button

* Fix E2E test cases

* Improved E2E test cases and UI chnages

* UI fixes

* Comments addressed

* Comments addressed

* E2E improvement comments addressed

Author: sachin-bruno

packages/oc-docs/e2e/components/sidebar.component.ts

@@ -6,7 +6,6 @@ export class SidebarComponent extends BaseComponent {
   readonly inline = this.page.getByTestId('app-sidebar');
   readonly overview = this.page.getByTestId('sidebar-overview');
   readonly environments = this.page.getByTestId('sidebar-environments');
-  readonly footer = this.page.getByTestId('sidebar-footer');
   readonly collapseButton = this.page.getByTestId('sidebar-collapse');
   readonly expandButton = this.page.getByTestId('sidebar-expand');
   readonly drawer = this.page.getByTestId('sidebar-drawer');

packages/oc-docs/e2e/tests/layout/page-header.spec.ts

@@ -1,9 +1,10 @@
 import { test, expect } from '../../playwright';
 
 /**
- * The page header (sticky top navigation bar): brand cluster + Open-in-Bruno
- * CTA. These tests cover what the mounted app actually renders — the search and
- * env-switcher slots ship empty here, so they aren't exercised in this suite.
+ * The page header (sticky top navigation bar): brand cluster, Open-in-Bruno
+ * CTA and theme toggle. These tests cover what the mounted app actually
+ * renders — the search and env-switcher slots ship empty here, so they aren't
+ * exercised in this suite.
  */
 test.use({ colorScheme: 'light' });
 
@@ -22,7 +23,7 @@ test.describe('Page header', () => {
     // Sticky: header stays at the top after the page scrolls.
     await page.mouse.wheel(0, 600);
     const box = await pageHeader.root.boundingBox();
-    if (!box) throw new Error('header has no bounding box');
+    if (box === null) throw new Error('header has no bounding box');
     expect(box.y).toBeLessThanOrEqual(1);
   });
 
@@ -35,7 +36,14 @@ test.describe('Page header', () => {
     await expect(pageHeader.brandInitials).toHaveText('BT');
   });
 
-  test('Open-in-Bruno CTA links to the Fetch-in-Bruno page (new tab) and is pinned right', async ({ page, pageHeader }) => {
+  test('shows the theme toggle in the header', async ({ page, themeToggle }) => {
+    await page.setViewportSize(DESKTOP);
+    await page.goto('/');
+
+    await expect(themeToggle.button).toBeVisible();
+  });
+
+  test('shows the Open-in-Bruno CTA linking to Fetch-in-Bruno when the collection has a git url', async ({ page, pageHeader }) => {
     await page.setViewportSize(DESKTOP);
     await page.goto('/');
 
@@ -44,13 +52,6 @@ test.describe('Page header', () => {
     expect(href).toMatch(/^https:\/\/fetch\.usebruno\.com\?url=/);
     expect(await pageHeader.openInBruno.getAttribute('target')).toBe('_blank');
     expect(await pageHeader.openInBruno.getAttribute('rel')).toContain('noopener');
-
-    // CTA hugs the right edge (within the 20px bar padding), not the brand.
-    const headerBox = await pageHeader.root.boundingBox();
-    const ctaBox = await pageHeader.openInBruno.boundingBox();
-    const brandBox = await pageHeader.brand.boundingBox();
-    expect((headerBox!.x + headerBox!.width) - (ctaBox!.x + ctaBox!.width)).toBeLessThanOrEqual(24);
-    expect(ctaBox!.x).toBeGreaterThan(brandBox!.x + brandBox!.width + 100);
   });
 
   test('mobile condenses: hamburger shows, Open-in-Bruno becomes a glyph, brand compact', async ({ page, pageHeader }) => {

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

@@ -7,12 +7,10 @@ const MOBILE = { width: 390, height: 800 };
 test.describe('sidebar - desktop (inline, collapsible)', () => {
   test.use({ viewport: DESKTOP });
 
-  test('renders inline with the overview link and a pinned footer, no hamburger or drawer', async ({ page, sidebar }) => {
+  test('renders inline with the overview link, no hamburger or drawer', async ({ page, sidebar }) => {
     await page.goto(FOLDERS);
     await expect(sidebar.inline).toBeVisible();
     await expect(sidebar.overview).toBeVisible();
-    await expect(sidebar.footer).toBeVisible();
-    await expect(sidebar.footer).toContainText('Powered by');
     await expect(sidebar.hamburger).toHaveCount(0);
     await expect(sidebar.drawer).toHaveCount(0);
   });

packages/oc-docs/src/assets/OpenCollectionWordmark.tsx

@@ -3,6 +3,7 @@ import { useLocation } from 'react-router-dom';
 import Topbar from '../Topbar/Topbar';
 import EnvSwitcher from '../EnvSwitcher/EnvSwitcher';
 import ShowVarsToggle from '../ShowVarsToggle/ShowVarsToggle';
+import ThemeToggle from '../ThemeToggle/ThemeToggle';
 import Sidebar from '../Docs/Sidebar/Sidebar';
 import SidebarDrawer from '../SidebarDrawer/SidebarDrawer';
 import IconButton from '../../ui/IconButton/IconButton';
@@ -120,6 +121,7 @@ const AppShell: React.FC<AppShellProps> = ({ logo, testId = 'app-shell' }) => {
             </>
           }
           openInBrunoHref={buildFetchInBrunoUrl(gitCollectionUrl)}
+          themeToggleSlot={<ThemeToggle />}
         />
 
         <div className="appshell-main">

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

@@ -2,7 +2,6 @@ import React, { useEffect, useMemo, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
 import SidebarNavLink from './SidebarNavLink/SidebarNavLink';
 import SidebarTree from './SidebarTree/SidebarTree';
-import SidebarFooter from './SidebarFooter/SidebarFooter';
 import { CubeIcon, GlobeIcon } from '../../../assets/icons';
 import { StyledWrapper } from './StyledWrapper';
 import { computeAutoReveal } from './autoReveal';
@@ -105,8 +104,6 @@ const Sidebar: React.FC<SidebarProps> = ({ onNavigate, testId = 'sidebar' }) =>
           />
         ) : null}
       </div>
-
-      <SidebarFooter />
     </StyledWrapper>
   );
 };

packages/oc-docs/src/components/Docs/Sidebar/Sidebar.tsx

@@ -217,6 +217,10 @@
   min-width: 0;
 }
 
+.key-value-table .col-value .secret-value {
+  padding: 0.625rem;
+}
+
 .key-value-table .value-cell-trailing {
   flex: none;
   display: flex;