Added onboarding + a lightweight install banner to both the mobile login screen and the settings screen, with Android/Chromium

install prompt support and iOS “Share → Add to Home Screen” guidance. Also added a small helper + tests to decide when/which banner variant should show, and shared copy in common.json.
2025-12-28 18:26:17 +01:00
parent b780d82d62
commit d5f038d098
17 changed files with 831 additions and 8 deletions
--- a/resources/js/admin/mobile/components/MobileInstallBanner.tsx
+++ b/resources/js/admin/mobile/components/MobileInstallBanner.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { Download, Share2 } from 'lucide-react';
+import { YStack, XStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { useTheme } from '@tamagui/core';
+import { InstallBannerState } from '../lib/installBanner';
+import { CTAButton, MobileCard } from './Primitives';
+import { useTranslation } from 'react-i18next';
+
+type MobileInstallBannerProps = {
+  state: InstallBannerState | null;
+  onInstall?: () => void;
+};
+
+export function MobileInstallBanner({ state, onInstall }: 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 accent = String(theme.primary?.val ?? '#2563eb');
+
+  if (!state) {
+    return null;
+  }
+
+  const isPrompt = state.variant === 'prompt';
+
+  return (
+    <MobileCard space="$2" borderColor={border} backgroundColor={String(theme.blue2?.val ?? '#eff6ff')}>
+      <XStack alignItems="center" justifyContent="space-between" gap="$2">
+        <XStack alignItems="center" space="$2" flex={1}>
+          <XStack
+            width={36}
+            height={36}
+            borderRadius={12}
+            alignItems="center"
+            justifyContent="center"
+            backgroundColor={String(theme.blue3?.val ?? '#dbeafe')}
+          >
+            {isPrompt ? <Download size={18} color={accent} /> : <Share2 size={18} color={accent} />}
+          </XStack>
+          <YStack flex={1} space="$0.5">
+            <Text fontSize="$sm" fontWeight="800" color={text}>
+              {t('installBanner.title', 'Install Fotospiel Admin')}
+            </Text>
+            <Text fontSize="$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>
+      {isPrompt && onInstall ? (
+        <CTAButton
+          label={t('installBanner.action', 'Install')}
+          onPress={onInstall}
+          fullWidth={false}
+          tone="ghost"
+        />
+      ) : null}
+    </MobileCard>
+  );
+}