refactor(fuselage): SidebarV2Banner divider, elevated surface & flexible layout

.changeset/sidebar-banner-explicit-divider.md

@@ -0,0 +1,11 @@
+---
+'@rocket.chat/fuselage': minor
+---
+
+`SidebarV2Banner`: make the divider explicit, elevate the default surface, and make the layout more flexible.
+
+- Remove the built-in `border-bottom`. The separator is no longer forced by the component; place a `SidebarV2Divider` explicitly when a divider is needed. This lets the banner sit flush (e.g. as a bottom-pinned player) or with a divider on either side.
+- Change the default variant background from `surface(sidebar)` to `surface(tint)`, so the banner is visually distinct from the sidebar instead of blending into it (matching the legacy `Sidebar` banner, which used an elevated surface).
+- The content column now grows to fill the available width, so children (e.g. media controls) can span the full banner width.
+- Render the addon/close column only when an `addon` or `onClose` is provided, so the content is full-width when there is no close button.
+- Add `closePlacement?: 'center' | 'top'` (default `'center'`) to align the close button with the banner header instead of centering it vertically — useful when the banner has taller content below the title.

packages/fuselage/fuselage.api.md

@@ -2289,6 +2289,7 @@ export type SidebarV2BannerProps = {
     onClick?: () => void;
     variant?: SidebarV2BannerVariant;
     onClose?: () => void;
+    closePlacement?: SidebarV2BannerVariantPlacement;
     children?: ReactNode;
     addon?: ReactNode;
 };
@@ -3067,6 +3068,10 @@ show: () => void
 // @public (undocumented)
 export type VisibilityType = 'hidden' | 'visible' | 'hiding' | 'unhiding' | undefined;
 
+// Warnings were encountered during analysis:
+//
+// src/components/SidebarV2/SidebarBanner.tsx:27:3 - (ae-forgotten-export) The symbol "SidebarV2BannerVariantPlacement" needs to be exported by the entry point index.d.ts
+
 // (No @packageDocumentation comment for this package)
 
 ```

packages/fuselage/src/components/SidebarV2/Sidebar.stories.tsx

@@ -9,6 +9,7 @@ import {
   SidebarV2AccordionItem as SidebarAccordionItem,
   SidebarV2Banner as SidebarBanner,
   SidebarV2CollapseGroup as SidebarCollapseGroup,
+  SidebarV2Divider as SidebarDivider,
   SidebarV2FooterContent as SidebarFooterContent,
   SidebarV2ItemAction as SidebarItemAction,
   SidebarV2Link as SidebarLink,
@@ -38,6 +39,7 @@ export const Default: StoryFn<typeof Sidebar> = (props) => (
         onClick={action('click')}
         addon={<Icon name='warning' color='danger' size='x24' />}
       />
+      <SidebarDivider />
       <SidebarSection>
         <TextInput
           endAddon={<Icon name='magnifier' size='x20' />}
@@ -183,3 +185,50 @@ export const Default: StoryFn<typeof Sidebar> = (props) => (
     </Sidebar>
   </Box>
 );
+
+export const MediaPlayerBanner: StoryFn<typeof Sidebar> = (props) => (
+  <Box h='90vh' w='x280'>
+    <Sidebar {...props}>
+      <SidebarSection>
+        <TextInput
+          endAddon={<Icon name='magnifier' size='x20' />}
+          small
+          placeholder='Search'
+        />
+      </SidebarSection>
+      <Box flexGrow={1} />
+      <SidebarDivider />
+      <SidebarBanner
+        closePlacement='top'
+        onClose={action('close')}
+        title={
+          <Box display='flex' alignItems='center' style={{ gap: 8 }}>
+            <Icon name='mic' size='x24' />
+            <Box minWidth={0}>
+              <Box fontScale='p2b' color='default' withTruncatedText>
+                Jane Doe
+              </Box>
+              <Box fontScale='micro' color='hint' withTruncatedText>
+                Audio record.mp3 (455.93 kB)
+              </Box>
+            </Box>
+          </Box>
+        }
+      >
+        <Box display='flex' alignItems='center' width='full' style={{ gap: 8 }}>
+          <IconButton small icon='play' onClick={action('play')} />
+          <Box fontScale='c1' color='hint'>
+            00:00
+          </Box>
+          <Box
+            flexGrow={1}
+            height='x4'
+            borderRadius='x4'
+            backgroundColor='surface-selected'
+          />
+          <IconButton small icon='chevron-down' onClick={action('speed')} />
+        </Box>
+      </SidebarBanner>
+    </Sidebar>
+  </Box>
+);

packages/fuselage/src/components/SidebarV2/Sidebar.styles.scss

@@ -183,13 +183,31 @@ $sidebar-color-stroke-extra-light: theme(
     padding: lengths.padding(16);
 
     color: $sidebar-banner-color-default;
-    border-bottom: lengths.border-width(default) solid
-      $sidebar-accordion-border-color;
     background-color: $sidebar-banner-background-default;
     gap: lengths.padding(12);
 
+    &--close-top {
+      position: relative;
+
+      align-items: flex-start;
+
+      .rcx-sidebar-v2-banner__addon {
+        position: absolute;
+
+        inset-block-start: lengths.padding(16);
+        inset-inline-end: lengths.padding(16);
+      }
+    }
+
+    &__content {
+      flex: 1 1 auto;
+
+      min-width: 0;
+    }
+
     &__addon {
       display: flex;
+      flex: 0 0 auto;
       align-items: center;
     }
 

packages/fuselage/src/components/SidebarV2/SidebarBanner.tsx

@@ -9,13 +9,22 @@ export type SidebarV2BannerVariant =
   | 'warning'
   | 'danger';
 
+export type SidebarV2BannerVariantPlacement = 'center' | 'top';
+
 export type SidebarV2BannerProps = {
   title?: ReactNode;
   linkText?: string;
   linkProps?: AllHTMLAttributes<HTMLAnchorElement>;
   onClick?: () => void;
   variant?: SidebarV2BannerVariant;
   onClose?: () => void;
+  /**
+   * Vertical alignment of the close button / addon column. Use `'top'` to align
+   * the close button with the banner header (title) instead of centering it on
+   * the whole banner — useful when the banner has taller content below the title.
+   * @default 'center'
+   */
+  closePlacement?: SidebarV2BannerVariantPlacement;
   children?: ReactNode;
   addon?: ReactNode;
 };
@@ -25,13 +34,20 @@ export const SidebarBanner = ({
   linkText,
   linkProps,
   variant = 'default',
+  closePlacement = 'center',
   addon,
   onClose,
   children,
   ...props
 }: SidebarV2BannerProps) => (
   <div
-    className={`rcx-box rcx-box--full rcx-sidebar-v2-banner rcx-sidebar-v2-banner--${variant}`}
+    className={[
+      'rcx-box rcx-box--full rcx-sidebar-v2-banner',
+      `rcx-sidebar-v2-banner--${variant}`,
+      closePlacement === 'top' && 'rcx-sidebar-v2-banner--close-top',
+    ]
+      .filter(Boolean)
+      .join(' ')}
     {...props}
   >
     <div className='rcx-box rcx-box--full rcx-sidebar-v2-banner__content'>
@@ -50,9 +66,11 @@ export const SidebarBanner = ({
       )}
       {children}
     </div>
-    <div className='rcx-box rcx-box--full rcx-sidebar-v2-banner__addon'>
-      {addon}
-      {onClose && <IconButton onClick={onClose} tiny icon='cross' />}
-    </div>
+    {(addon || onClose) && (
+      <div className='rcx-box rcx-box--full rcx-sidebar-v2-banner__addon'>
+        {addon}
+        {onClose && <IconButton onClick={onClose} tiny icon='cross' />}
+      </div>
+    )}
   </div>
 );

packages/fuselage/src/components/SidebarV2/variables.scss

@@ -28,7 +28,7 @@ $sidebar-link-color: theme('sidebar-link-color', colors.font(titles-labels));
 
 $sidebar-banner-background-default: theme(
   'sidebar-banner-background-default',
-  colors.surface(sidebar)
+  colors.surface(tint)
 );
 $sidebar-banner-color-default: theme(
   'sidebar-banner-color-default',