Improve reports layout

- Create new `ReportLayout` and `ReportHeader` components to ensure consistent layout across reports
- Remove title from report header, and place tabs in the top left corner
- Move the details button to the top right corner, rather than the bottom of the report, to reduce vertical space and improve readability. Reduce it to a simple icon with a 'View details' tooltip.
- Update the Search terms report to use the new `ReportLayout` and `ReportHeader` components.
- Update dashboard to use a simple grid layout, simplifying the html markup and css.
- Change 'Screen sizes' title to 'Devices' in the devices report.
- Change 'Top pages' title to 'Conversion pages' in the pages report, whenever a conversion goal filter is applied.
- Add 'last 30min' pill to the behaviour report when on realtime dashboard, rather than displaying this in the title.
- Remove the Combobox input from the custom properties report, and use the same tab dropdown pattern as used for funnels and UTM campaigns.

Author: sanne-san

assets/css/app.css

@@ -31,6 +31,10 @@
   *:focus-visible {
     @apply ring-2 ring-indigo-500 ring-offset-2 dark:ring-offset-gray-900 outline-none;
   }
+
+  :focus:not(:focus-visible) {
+    @apply outline-none;
+  }
 }
 
 @layer components {

assets/js/dashboard/components/pill.tsx

@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react'
+import classNames from 'classnames'
+
+export type PillProps = {
+  className?: string
+  children: ReactNode
+}
+
+export function Pill({ className, children }: PillProps) {
+  return (
+    <div
+      className={classNames(
+        'flex items-center shrink-0 h-fit rounded-md bg-green-50 dark:bg-green-900/60 text-green-700 dark:text-green-300 text-xs font-medium px-2.5 py-1',
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}

assets/js/dashboard/components/popover.tsx

@@ -55,8 +55,7 @@ const items = {
       'data-[selected=true]:bg-gray-100',
       'data-[selected=true]:dark:bg-gray-700',
       'data-[selected=true]:text-gray-900',
-      'data-[selected=true]:dark:text-gray-100',
-      'data-[selected=true]:font-semibold'
+      'data-[selected=true]:dark:text-gray-100'
     ),
     hoverLink: classNames(
       'hover:bg-gray-100',

assets/js/dashboard/components/tabs.tsx

@@ -1,6 +1,6 @@
 import { Popover, Transition } from '@headlessui/react'
 import classNames from 'classnames'
-import React, { ReactNode, useRef } from 'react'
+import React, { ReactNode, useRef, useEffect } from 'react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { popover, BlurMenuButtonOnEscape } from './popover'
 import { useSearchableItems } from '../hooks/use-searchable-items'
@@ -16,7 +16,7 @@ export const TabWrapper = ({
 }) => (
   <div
     className={classNames(
-      'flex text-xs font-medium text-gray-500 dark:text-gray-400 space-x-2 items-baseline',
+      'flex items-baseline gap-x-3 text-xs font-medium text-gray-500 dark:text-gray-400',
       className
     )}
   >
@@ -32,12 +32,15 @@ const TabButtonText = ({
   active: boolean
 }) => (
   <span
-    className={classNames('truncate text-left transition-colors duration-150', {
-      'hover:text-indigo-700 dark:hover:text-indigo-400 cursor-pointer':
-        !active,
-      'text-indigo-600 dark:text-indigo-500 font-bold underline decoration-2 decoration-indigo-600 dark:decoration-indigo-500':
-        active
-    })}
+    className={classNames(
+      '-mb-px pb-4 truncate text-left text-xs font-semibold uppercase transition-colors duration-150',
+      {
+        'text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 cursor-pointer':
+          !active,
+        'border-b-2 border-gray-900 dark:border-gray-100 text-gray-900 dark:text-gray-100':
+          active
+      }
+    )}
   >
     {children}
   </span>
@@ -54,7 +57,10 @@ export const TabButton = ({
   onClick: () => void
   active: boolean
 }) => (
-  <button className={classNames('rounded-sm', className)} onClick={onClick}>
+  <button
+    className={classNames('flex rounded-sm', className)}
+    onClick={onClick}
+  >
     <TabButtonText active={active}>{children}</TabButtonText>
   </button>
 )
@@ -84,19 +90,16 @@ export const DropdownTabButton = ({
           >
             <TabButtonText active={active}>{children}</TabButtonText>
 
-            <div
-              className="flex self-stretch -mr-1 ml-1 items-center"
-              aria-hidden="true"
-            >
-              <ChevronDownIcon className="h-4 w-4" />
+            <div className="ml-1 pb-4" aria-hidden="true">
+              <ChevronDownIcon className="size-4" />
             </div>
           </Popover.Button>
 
           <Transition
             as="div"
             {...popover.transition.props}
             className={classNames(
-              popover.transition.classNames.fullwidth,
+              popover.transition.classNames.left,
               'mt-2',
               transitionClassName
             )}
@@ -115,15 +118,9 @@ type ItemsProps = {
   closeDropdown: () => void
   options: Array<{ selected: boolean; onClick: () => void; label: string }>
   searchable?: boolean
-  collectionTitle?: string
 }
 
-const Items = ({
-  options,
-  searchable,
-  collectionTitle,
-  closeDropdown
-}: ItemsProps) => {
+const Items = ({ options, searchable, closeDropdown }: ItemsProps) => {
   const {
     filteredData,
     showableData,
@@ -136,7 +133,7 @@ const Items = ({
     countOfMoreToShow
   } = useSearchableItems({
     data: options,
-    maxItemsInitially: searchable ? 5 : options.length,
+    maxItemsInitially: searchable ? 10 : options.length,
     itemMatchesSearchValue: (option, trimmedSearchString) =>
       option.label.toLowerCase().includes(trimmedSearchString.toLowerCase())
   })
@@ -148,24 +145,32 @@ const Items = ({
     popover.items.classNames.hoverLink
   )
 
+  useEffect(() => {
+    if (searchable && showSearch && searchRef.current) {
+      const timeoutId = setTimeout(() => {
+        searchRef.current?.focus()
+      }, 100)
+      return () => clearTimeout(timeoutId)
+    }
+  }, [searchable, showSearch, searchRef])
+
   return (
     <>
       {searchable && showSearch && (
-        <div className="flex items-center py-2 px-4">
-          {collectionTitle && (
-            <div className="text-sm font-bold uppercase text-indigo-500 dark:text-indigo-400 mr-4">
-              {collectionTitle}
-            </div>
-          )}
+        <div className="flex items-center p-1">
           <SearchInput
             searchRef={searchRef}
             placeholderUnfocused="Press / to search"
-            className="ml-auto w-full py-1"
+            className="w-full !max-w-none"
             onSearch={handleSearchInput}
           />
         </div>
       )}
-      <div className={'max-h-[210px] overflow-y-scroll'}>
+      <div
+        className={
+          'max-h-[224px] overflow-y-scroll flex flex-col gap-y-0.5 p-1'
+        }
+      >
         {showableData.map(({ selected, label, onClick }, index) => {
           return (
             <button
@@ -177,7 +182,7 @@ const Items = ({
               data-selected={selected}
               className={itemClassName}
             >
-              {label}
+              <span className="line-clamp-1">{label}</span>
             </button>
           )
         })}
@@ -186,7 +191,7 @@ const Items = ({
             onClick={handleShowAll}
             className={classNames(
               itemClassName,
-              'w-full text-left font-bold hover:text-indigo-700 dark:hover:text-indigo-500'
+              'w-full text-left text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'
             )}
           >
             {`Show ${countOfMoreToShow} more`}
@@ -197,11 +202,14 @@ const Items = ({
           <button
             className={classNames(
               itemClassName,
-              'w-full text-left font-bold hover:text-indigo-700 dark:hover:text-indigo-500'
+              'w-full text-left !justify-start'
             )}
             onClick={handleClearSearch}
           >
-            No items found. Clear search to show all.
+            No items found.{' '}
+            <span className="ml-1 text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-500">
+              Click to clear search.
+            </span>
           </button>
         )}
       </div>

assets/js/dashboard/extra/funnel.js

@@ -294,7 +294,9 @@ export default function Funnel({ funnelName, tabs }) {
   const header = () => {
     return (
       <div className="flex justify-between w-full">
-        <h4 className="mt-2 text-sm dark:text-gray-100">{funnelName}</h4>
+        <h4 className="mt-2 text-base font-semibold dark:text-gray-100">
+          {funnelName}
+        </h4>
         {tabs}
       </div>
     )
@@ -346,7 +348,7 @@ export default function Funnel({ funnelName, tabs }) {
       return (
         <div className="mb-8">
           {header()}
-          <p className="mt-1 text-gray-500 text-sm">
+          <p className="mt-0.5 text-gray-500 text-sm">
             {funnel.steps.length}-step funnel • {conversionRate}% conversion
             rate
           </p>

assets/js/dashboard/hooks/use-more-link-data.tsx

@@ -0,0 +1,31 @@
+import { useCallback, useState } from 'react'
+import { AppNavigationLinkProps } from '../navigation/use-app-navigate'
+
+export function useMoreLinkData() {
+  const [listData, setListData] = useState<unknown[] | null>(null)
+  const [linkProps, setLinkProps] = useState<AppNavigationLinkProps | null>(
+    null
+  )
+  const [listLoading, setListLoading] = useState(true)
+
+  const onListUpdate = useCallback(
+    (
+      list: unknown[] | null,
+      linkProps: AppNavigationLinkProps | undefined,
+      loading: boolean
+    ) => {
+      setListData(list)
+      setLinkProps(linkProps ?? null)
+      setListLoading(loading)
+    },
+    []
+  )
+
+  const reset = useCallback(() => {
+    setListData(null)
+    setLinkProps(null)
+    setListLoading(true)
+  }, [])
+
+  return { onListUpdate, listData, linkProps, listLoading, reset }
+}

assets/js/dashboard/index.tsx

@@ -50,37 +50,21 @@ function DashboardStats({
     }
   }, [onLiveNavigate])
 
-  const statsBoxClass =
-    'relative min-h-[436px] w-full mt-5 p-4 flex flex-col bg-white dark:bg-gray-900 shadow-sm rounded-md md:min-h-initial md:h-27.25rem md:w-[calc(50%-10px)] md:ml-[10px] md:mr-[10px] first:ml-0 last:mr-0'
-
   return (
     <>
       <VisitorGraph updateImportedDataInView={updateImportedDataInView} />
-      <div className="w-full md:flex">
-        <div className={statsBoxClass}>
-          <Sources />
-        </div>
-        <div className={statsBoxClass}>
-          {site.flags.live_dashboard ? (
-            <LiveViewPortal
-              id="pages-breakdown-live"
-              className="w-full h-full border-0 overflow-hidden"
-            />
-          ) : (
-            <Pages />
-          )}
-        </div>
-      </div>
-
-      <div className="w-full md:flex">
-        <div className={statsBoxClass}>
-          <Locations />
-        </div>
-        <div className={statsBoxClass}>
-          <Devices />
-        </div>
-      </div>
+      <Sources />
+      {site.flags.live_dashboard ? (
+        <LiveViewPortal
+          id="pages-breakdown-live"
+          className="w-full h-full border-0 overflow-hidden"
+        />
+      ) : (
+        <Pages />
+      )}
 
+      <Locations />
+      <Devices />
       <Behaviours importedDataInView={importedDataInView} />
     </>
   )
@@ -98,7 +82,7 @@ function Dashboard() {
   const [importedDataInView, setImportedDataInView] = useState(false)
 
   return (
-    <div className="mb-16">
+    <div className="mb-16 grid grid-cols-1 md:grid-cols-2 gap-5">
       <TopBar showCurrentVisitors={!isRealTimeDashboard} />
       <DashboardStats
         importedDataInView={

assets/js/dashboard/nav-menu/top-bar.tsx

@@ -27,10 +27,10 @@ function TopBarStickyWrapper({ children }: { children: ReactNode }) {
 
   return (
     <>
-      <div id="stats-container-top" ref={ref} />
+      <div id="stats-container-top" className="col-span-full" ref={ref} />
       <div
         className={classNames(
-          'relative top-0 py-2 sm:py-3 z-10',
+          'col-span-full relative top-0 py-2 sm:py-3 -my-3 sm:-my-4 z-10',
           !site.embedded &&
             !inView &&
             'sticky fullwidth-shadow bg-gray-50 dark:bg-gray-950'
@@ -47,7 +47,7 @@ function TopBarInner({ showCurrentVisitors }: TopBarProps) {
 
   return (
     <div className="flex items-center w-full">
-      <div className="flex items-center gap-x-4 shrink-0" ref={leftActionsRef}>
+      <div className="flex items-center gap-x-5 shrink-0" ref={leftActionsRef}>
         <SiteSwitcher />
         {showCurrentVisitors && (
           <CurrentVisitors tooltipBoundaryRef={leftActionsRef} />

assets/js/dashboard/site-switcher.tsx

@@ -170,7 +170,7 @@ export const SiteSwitcher = () => {
           <Popover.Button
             ref={buttonRef}
             className={classNames(
-              'flex items-center rounded h-9 leading-5 font-bold dark:text-gray-100',
+              'flex items-center rounded h-9 text-sm leading-5 font-semibold dark:text-gray-100',
               'hover:bg-gray-100 dark:hover:bg-gray-800'
             )}
             title={currentSite.domain}
@@ -188,7 +188,7 @@ export const SiteSwitcher = () => {
                 ? 'All sites'
                 : currentSite.domain}
             </span>
-            <ChevronDownIcon className="hidden lg:block h-5 w-5 ml-2 dark:text-gray-100" />
+            <ChevronDownIcon className="hidden lg:block size-4 ml-2 dark:text-gray-100" />
           </Popover.Button>
           <Transition
             as="div"

assets/js/dashboard/stats/behaviours/conversions.js

@@ -8,7 +8,11 @@ import { useSiteContext } from '../../site-context'
 import { useQueryContext } from '../../query-context'
 import { conversionsRoute } from '../../router'
 
-export default function Conversions({ afterFetchData, onGoalFilterClick }) {
+export default function Conversions({
+  afterFetchData,
+  onGoalFilterClick,
+  onListUpdate
+}) {
   const site = useSiteContext()
   const { query } = useQueryContext()
 
@@ -56,6 +60,7 @@ export default function Conversions({ afterFetchData, onGoalFilterClick }) {
       }}
       color="bg-red-50 group-hover/row:bg-red-100"
       colMinWidth={90}
+      onListUpdate={onListUpdate}
     />
   )
 }