style: decouple Playlist and player. (#27464)

Co-authored-by: Paul D'Ambra <[email protected]>
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Aleksandr Veryayskiy <[email protected]>

frontend/src/lib/components/DateFilter/DateFilter.tsx

@@ -35,6 +35,7 @@ export interface DateFilterProps {
     dateOptions?: DateMappingOption[]
     isDateFormatted?: boolean
     size?: LemonButtonProps['size']
+    type?: LemonButtonProps['type']
     dropdownPlacement?: Placement
     /* True when we're not dealing with ranges, but a single date / relative date */
     isFixedDateMode?: boolean
@@ -60,6 +61,7 @@ export function DateFilter({
     dateOptions = dateMapping,
     isDateFormatted = true,
     size,
+    type,
     dropdownPlacement = 'bottom-start',
     max,
     isFixedDateMode = false,
@@ -242,7 +244,7 @@ export function DateFilter({
             <LemonButton
                 id="daterange_selector"
                 size={size ?? 'small'}
-                type="secondary"
+                type={type ?? 'secondary'}
                 disabledReason={disabledReason}
                 data-attr="date-filter"
                 icon={<IconCalendar />}

frontend/src/lib/components/Playlist/Playlist.scss

@@ -22,7 +22,6 @@
         &:not(.Playlist__list--collapsed) {
             width: 25%;
             min-width: 285px;
-            max-width: 320px;
         }
 
         .text-link {
@@ -49,9 +48,17 @@
     }
 }
 
+.NotebookNode__box .Playlist__filters {
+    display: none;
+}
+
+.NotebookNode__box .Playlist__list {
+    border-right: 1px solid var(--border);
+}
+
 .SessionRecordingPlaylistHeightWrapper {
     // NOTE: Somewhat random way to offset the various headers and tabs above the playlist
-    height: calc(100vh - 15rem);
+    height: calc(100vh - 10rem);
     min-height: 25rem;
 }
 

frontend/src/lib/components/Playlist/Playlist.stories.tsx

@@ -1,6 +1,8 @@
 import { Meta, StoryFn, StoryObj } from '@storybook/react'
 import { range } from 'lib/utils'
 
+import { SessionRecordingType } from '~/types'
+
 import { Playlist, PlaylistProps } from './Playlist'
 
 type Story = StoryObj<typeof Playlist>
@@ -14,8 +16,8 @@ type ObjectType = { id: string | number }
 
 const ListItem = ({ item }: { item: ObjectType }): JSX.Element => <div className="p-1">Object {item.id}</div>
 
-const Template: StoryFn<typeof Playlist> = (props: Partial<PlaylistProps<any>>) => {
-    const mainContent = ({ activeItem }: { activeItem: ObjectType }): JSX.Element => (
+const Template: StoryFn<typeof Playlist> = (props: Partial<PlaylistProps>) => {
+    const mainContent = ({ activeItem }: { activeItem: SessionRecordingType }): JSX.Element => (
         <div className="flex items-center justify-center h-full">
             {activeItem ? `Object ${activeItem.id} selected` : 'Select an item from the list'}
         </div>
@@ -40,7 +42,7 @@ Default.args = {
         {
             key: 'default',
             title: 'Default section',
-            items: range(0, 100).map((idx) => ({ id: idx })),
+            items: range(0, 100).map((idx) => ({ id: idx } as unknown as SessionRecordingType)),
             render: ListItem,
         },
     ],
@@ -52,14 +54,14 @@ MultipleSections.args = {
         {
             key: 'one',
             title: 'First section',
-            items: range(0, 5).map((idx) => ({ id: idx })),
+            items: range(0, 5).map((idx) => ({ id: idx } as unknown as SessionRecordingType)),
             render: ListItem,
             initiallyOpen: true,
         },
         {
             key: 'two',
             title: 'Second section',
-            items: range(0, 5).map((idx) => ({ id: idx })),
+            items: range(0, 5).map((idx) => ({ id: idx } as unknown as SessionRecordingType)),
             render: ListItem,
         },
     ],
@@ -71,7 +73,7 @@ WithFooter.args = {
         {
             key: 'default',
             title: 'Section with footer',
-            items: range(0, 100).map((idx) => ({ id: idx })),
+            items: range(0, 100).map((idx) => ({ id: idx } as unknown as SessionRecordingType)),
             render: ListItem,
             footer: <div className="px-1 py-3">Section footer</div>,
         },