onboarding tracking is now wired, the tour can be replayed from Settings, install‑banner reset is included, and empty states in Tasks/Members/Guest Messages now have guided CTAs.

What changed:
  - Onboarding tracking: admin_app_opened on first authenticated dashboard load; event_created, branding_configured,
    and invite_created on their respective actions.
  - Tour replay: Settings now has an “Experience” section to replay the tour (clears tour seen flag and opens via ?tour=1).
  - Empty states: Tasks, Members, and Guest Messages now include richer copy + quick actions.
  - New helpers + copy: Tour storage helpers, new translations, and related UI wiring.

resources/js/admin/mobile/components/MobileInstallBanner.test.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+
+vi.mock('@tamagui/core', () => ({
+  useTheme: () => ({
+    color12: { val: '#111827' },
+    color: { val: '#111827' },
+    gray11: { val: '#6b7280' },
+    gray6: { val: '#e5e7eb' },
+    gray2: { val: '#f8fafc' },
+    blue3: { val: '#dbeafe' },
+    primary: { val: '#2563eb' },
+  }),
+}));
+
+vi.mock('@tamagui/stacks', () => ({
+  YStack: ({ children, ...props }: { children: React.ReactNode }) => <div {...props}>{children}</div>,
+  XStack: ({ children, ...props }: { children: React.ReactNode }) => <div {...props}>{children}</div>,
+}));
+
+vi.mock('@tamagui/text', () => ({
+  SizableText: ({ children, ...props }: { children: React.ReactNode }) => <span {...props}>{children}</span>,
+}));
+
+vi.mock('@tamagui/react-native-web-lite', () => ({
+  Pressable: ({ children, ...props }: { children: React.ReactNode }) => <button {...props}>{children}</button>,
+}));
+
+import { MobileInstallBanner } from './MobileInstallBanner';
+
+describe('MobileInstallBanner', () => {
+  it('renders install action for prompt variant', () => {
+    render(
+      <MobileInstallBanner
+        state={{ variant: 'prompt' }}
+        density="compact"
+        onInstall={() => {}}
+        onDismiss={() => {}}
+      />,
+    );
+
+    expect(screen.getByText('installBanner.title')).toBeInTheDocument();
+    expect(screen.getByText('installBanner.action')).toBeInTheDocument();
+    expect(screen.getByLabelText('actions.dismiss')).toBeInTheDocument();
+  });
+
+  it('renders iOS hint without install action', () => {
+    render(
+      <MobileInstallBanner
+        state={{ variant: 'ios' }}
+        density="default"
+        onDismiss={() => {}}
+      />,
+    );
+
+    expect(screen.getByText('installBanner.iosHint')).toBeInTheDocument();
+    expect(screen.queryByText('installBanner.action')).toBeNull();
+  });
+});

resources/js/admin/mobile/components/MobileInstallBanner.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { Download, Share2 } from 'lucide-react';
+import { Download, Share2, X } from 'lucide-react';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { useTheme } from '@tamagui/core';
+import { Pressable } from '@tamagui/react-native-web-lite';
 import { InstallBannerState } from '../lib/installBanner';
 import { CTAButton, MobileCard } from './Primitives';
 import { useTranslation } from 'react-i18next';
@@ -10,49 +11,78 @@ import { useTranslation } from 'react-i18next';
 type MobileInstallBannerProps = {
   state: InstallBannerState | null;
   onInstall?: () => void;
+  onDismiss?: () => void;
+  density?: 'default' | 'compact';
 };
 
-export function MobileInstallBanner({ state, onInstall }: MobileInstallBannerProps) {
+export function MobileInstallBanner({
+  state,
+  onInstall,
+  onDismiss,
+  density = 'default',
+}: MobileInstallBannerProps) {
   const { t } = useTranslation('common');
   const theme = useTheme();
   const text = String(theme.color12?.val ?? theme.color?.val ?? '#0f172a');
   const muted = String(theme.gray11?.val ?? theme.gray?.val ?? '#6b7280');
-  const border = String(theme.borderColor?.val ?? '#e5e7eb');
+  const border = String(theme.gray6?.val ?? theme.borderColor?.val ?? '#e5e7eb');
   const accent = String(theme.primary?.val ?? '#2563eb');
+  const surface = String(theme.gray2?.val ?? '#f8fafc');
+  const accentSoft = String(theme.blue3?.val ?? '#dbeafe');
 
   if (!state) {
     return null;
   }
 
   const isPrompt = state.variant === 'prompt';
+  const isCompact = density === 'compact';
 
   return (
-    <MobileCard space="$2" borderColor={border} backgroundColor={String(theme.blue2?.val ?? '#eff6ff')}>
+    <MobileCard
+      space={isCompact ? '$1.5' : '$2'}
+      borderColor={border}
+      backgroundColor={surface}
+      padding={isCompact ? '$2' : '$3'}
+    >
       <XStack alignItems="center" justifyContent="space-between" gap="$2">
         <XStack alignItems="center" space="$2" flex={1}>
           <XStack
-            width={36}
-            height={36}
+            width={isCompact ? 32 : 36}
+            height={isCompact ? 32 : 36}
             borderRadius={12}
             alignItems="center"
             justifyContent="center"
-            backgroundColor={String(theme.blue3?.val ?? '#dbeafe')}
+            backgroundColor={accentSoft}
           >
-            {isPrompt ? <Download size={18} color={accent} /> : <Share2 size={18} color={accent} />}
+            {isPrompt ? <Download size={16} color={accent} /> : <Share2 size={16} color={accent} />}
           </XStack>
           <YStack flex={1} space="$0.5">
-            <Text fontSize="$sm" fontWeight="800" color={text}>
+            <Text fontSize={isCompact ? '$xs' : '$sm'} fontWeight="800" color={text}>
               {t('installBanner.title', 'Install Fotospiel Admin')}
             </Text>
-            <Text fontSize="$xs" color={muted}>
+            <Text fontSize={isCompact ? 10 : '$xs'} color={muted}>
               {isPrompt
                 ? t('installBanner.body', 'Add the app to your home screen for faster access and offline support.')
                 : t('installBanner.iosHint', 'On iOS: Share → Add to Home Screen.')}
             </Text>
           </YStack>
         </XStack>
+        <XStack alignItems="center" space="$2">
+          {isPrompt && onInstall && isCompact ? (
+            <Pressable onPress={onInstall}>
+              <Text fontSize={10} fontWeight="700" color={accent}>
+                {t('installBanner.action', 'Install')}
+              </Text>
+            </Pressable>
+          ) : null}
+          {onDismiss ? (
+            <Pressable onPress={onDismiss} aria-label={t('actions.dismiss', 'Dismiss')}>
+              <X size={14} color={muted} />
+            </Pressable>
+          ) : null}
+        </XStack>
       </XStack>
-      {isPrompt && onInstall ? (
+      {isPrompt && onInstall && !isCompact ? (
         <CTAButton
           label={t('installBanner.action', 'Install')}
           onPress={onInstall}