Implement feedback

- Refactor site switcher to use a static component when not logged in
- Add test for static site switcher
- Fix padding on period picker when arrows are hidden
- Fix focus-visible ring on period picker
- Update typography for site switcher and current visitors

Author: sanne-san

assets/js/dashboard/nav-menu/query-periods/dashboard-period-menu.tsx

@@ -36,7 +36,7 @@ import {
 import { DateRangeCalendar } from './date-range-calendar'
 import { formatISO, nowForSite } from '../../util/date'
 import { MenuSeparator } from '../nav-menu-components'
-import { MovePeriodArrows } from './move-period-arrows'
+import { MovePeriodArrows, periodsWithArrows } from './move-period-arrows'
 
 function DashboardPeriodMenuKeybinds({
   closeDropdown,
@@ -102,12 +102,18 @@ export const DashboardPeriodMenu = ({
           'flex rounded-md h-8 transition-all duration-150',
           'hover:bg-gray-150/80 dark:hover:bg-gray-800',
           'has-[[aria-expanded=true]]:bg-gray-150/80 dark:has-[[aria-expanded=true]]:bg-gray-800',
+          'has-[button:focus-visible]:ring-2 has-[button:focus-visible]:ring-indigo-500 has-[button:focus-visible]:ring-offset-2 dark:has-[button:focus-visible]:ring-offset-gray-900',
           isComparing && 'bg-gray-150/80 dark:bg-gray-800'
         )}
       >
         <Popover.Button
           ref={buttonRef}
-          className="flex items-center gap-x-1.5 pl-2.5 pr-1.5 text-sm font-medium text-gray-700 dark:text-gray-100 leading-tight h-full rounded-md"
+          className={classNames(
+            'flex items-center gap-x-1.5 pl-2.5 text-sm font-medium text-gray-700 dark:text-gray-100 leading-tight h-full rounded-md focus-visible:ring-0 focus-visible:ring-offset-0',
+            periodsWithArrows.includes(dashboardState.period)
+              ? 'pr-1.5'
+              : 'pr-2.5'
+          )}
         >
           <DateMenuCalendarIcon />
           <span

assets/js/dashboard/nav-menu/query-periods/move-period-arrows.tsx

@@ -72,7 +72,7 @@ function ArrowIcon({
   )
 }
 
-const periodsWithArrows = [
+export const periodsWithArrows = [
   DashboardPeriod.year,
   DashboardPeriod.month,
   DashboardPeriod.day

assets/js/dashboard/site-switcher.tsx

@@ -67,6 +67,27 @@ const getSwitchToSiteURL = (
   return `/${encodeURIComponent(site.domain)}`
 }
 
+const SiteSwitcherStatic = () => {
+  const currentSite = useSiteContext()
+
+  return (
+    <div
+      data-testid="site-switcher-static"
+      className={classNames(
+        popover.toggleButton.classNames.rounded,
+        'gap-x-1.5 px-2.5 font-medium text-gray-700 dark:text-gray-100',
+        '!pl-0'
+      )}
+      title={currentSite.domain}
+    >
+      <Favicon domain={currentSite.domain} className="block size-4" />
+      <span className="truncate hidden sm:block sm:mr-1 lg:mr-0 font-semibold">
+        {currentSite.domain}
+      </span>
+    </div>
+  )
+}
+
 export const SiteSwitcher = () => {
   const dashboardRouteMatch = useMatch(rootRoute.path)
   const { modal } = useRoutelessModalsContext()
@@ -83,10 +104,11 @@ export const SiteSwitcher = () => {
     placeholderData: (previousData) => previousData
   })
 
-  const sitesInDropdown = user.loggedIn
-    ? sitesQuery.data?.data
-    : // show only current site in dropdown when viewing public / embedded dashboard
-      [{ domain: currentSite.domain }]
+  if (!user.loggedIn) {
+    return <SiteSwitcherStatic />
+  }
+
+  const sitesInDropdown = sitesQuery.data?.data
 
   const canSeeSiteSettings: boolean =
     user.loggedIn &&
@@ -160,7 +182,9 @@ export const SiteSwitcher = () => {
             )}
             <span
               data-testid="site-switcher-current-site"
-              className={'truncate hidden sm:block sm:mr-1 lg:mr-0'}
+              className={
+                'truncate hidden sm:block sm:mr-1 lg:mr-0 font-semibold'
+              }
             >
               {currentSite.isConsolidatedView
                 ? 'All sites'

assets/js/dashboard/stats/current-visitors.js

@@ -65,7 +65,7 @@ export default function CurrentVisitors({ className = '' }) {
           >
             <circle cx="8" cy="8" r="8" />
           </svg>
-          <div className="inline-block">
+          <div className="inline-block text-gray-500 dark:text-gray-400">
             {currentVisitors}
             <span className="hidden lg:inline">
               {' '}

e2e/tests/dashboard/general.spec.ts

@@ -28,7 +28,7 @@ test('dashboard renders for anonymous viewer', async ({ page, request }) => {
 
   await expect(page).toHaveTitle(/Plausible/)
 
-  await expect(page.getByRole('button', { name: domain })).toBeVisible()
+  await expect(page.getByTestId('site-switcher-static')).toContainText(domain)
 })
 
 test('dashboard renders via shared link', async ({ page, request }) => {
@@ -46,7 +46,7 @@ test('dashboard renders via shared link', async ({ page, request }) => {
   await test.step('public link', async () => {
     await page.goto(link, { waitUntil: 'commit' })
 
-    await expect(page.getByRole('button', { name: domain })).toBeVisible()
+    await expect(page.getByTestId('site-switcher-static')).toContainText(domain)
 
     await expect(page.locator('#visitors')).toHaveText('1')
   })
@@ -58,12 +58,31 @@ test('dashboard renders via shared link', async ({ page, request }) => {
 
     await page.getByRole('button', { name: 'Continue' }).click()
 
-    await expect(page.getByRole('button', { name: domain })).toBeVisible()
+    await expect(page.getByTestId('site-switcher-static')).toContainText(domain)
 
     await expect(page.locator('#visitors')).toHaveText('1')
   })
 })
 
+test('site switcher is not shown when viewing without being logged in', async ({
+  page,
+  request
+}) => {
+  const { domain } = await setupSite({ page, request })
+  await makeSitePublic({ page, domain })
+  await populateStats({ request, domain, events: [{ name: 'pageview' }] })
+  await logout(page)
+
+  await page.goto('/' + domain, { waitUntil: 'commit' })
+
+  const siteSwitcherStatic = page.getByTestId('site-switcher-static')
+  await expect(siteSwitcherStatic).toContainText(domain)
+  await expect(siteSwitcherStatic).not.toHaveRole('button')
+
+  await siteSwitcherStatic.click()
+  await expect(page.getByTestId('sitemenu')).not.toBeVisible()
+})
+
 test('dashboard renders with imported data', async ({ page, request }) => {
   const { domain } = await setupSite({ page, request })
   await populateStats({