Added Phase‑1 continuation work across deep links, offline moderation queue, and admin push.
resources/js/admin/mobile/lib.
- Admin push is end‑to‑end: new backend model/migration/service/job + API endpoints, admin runtime config, push‑aware
service worker, and a settings toggle via useAdminPushSubscription. Notifications now auto‑refresh on push.
- New PHP/JS tests: admin push API feature test and queue/haptics unit tests
Added admin-specific PWA icon assets and wired them into the admin manifest, service worker, and admin shell, plus a
new “Device & permissions” card in mobile Settings with a persistent storage action and translations.
Details: public/manifest.json, public/admin-sw.js, resources/views/admin.blade.php, new icons in public/; new hook
resources/js/admin/mobile/hooks/useDevicePermissions.ts, helpers/tests in resources/js/admin/mobile/lib/
devicePermissions.ts + resources/js/admin/mobile/lib/devicePermissions.test.ts, and Settings UI updates in resources/
js/admin/mobile/SettingsPage.tsx with copy in resources/js/admin/i18n/locales/en/management.json and resources/js/
admin/i18n/locales/de/management.json.
This commit is contained in:
Codex Agent
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Shield, Bell, User } from 'lucide-react';
|
||||
import { Shield, Bell, User, Smartphone } from 'lucide-react';
|
||||
import { YStack, XStack } from '@tamagui/stacks';
|
||||
import { YGroup } from '@tamagui/group';
|
||||
import { ListItem } from '@tamagui/list-item';
|
||||
@@ -18,6 +18,9 @@ import {
|
||||
} from '../api';
|
||||
import { getApiErrorMessage } from '../lib/apiError';
|
||||
import { adminPath } from '../constants';
|
||||
import { useAdminPushSubscription } from './hooks/useAdminPushSubscription';
|
||||
import { useDevicePermissions } from './hooks/useDevicePermissions';
|
||||
import { type PermissionStatus, type StorageStatus } from './lib/devicePermissions';
|
||||
|
||||
type PreferenceKey = keyof NotificationPreferences;
|
||||
|
||||
@@ -47,6 +50,48 @@ export default function MobileSettingsPage() {
|
||||
const [loading, setLoading] = React.useState(true);
|
||||
const [saving, setSaving] = React.useState(false);
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
const [storageSaving, setStorageSaving] = React.useState(false);
|
||||
const [storageError, setStorageError] = React.useState<string | null>(null);
|
||||
const pushState = useAdminPushSubscription();
|
||||
const devicePermissions = useDevicePermissions();
|
||||
|
||||
const pushDescription = React.useMemo(() => {
|
||||
if (!pushState.supported) {
|
||||
return t('mobileSettings.pushUnsupported', 'Push wird auf diesem Gerät nicht unterstützt.');
|
||||
}
|
||||
if (pushState.permission === 'denied') {
|
||||
return t('mobileSettings.pushDenied', 'Benachrichtigungen sind im Browser blockiert.');
|
||||
}
|
||||
if (pushState.subscribed) {
|
||||
return t('mobileSettings.pushActive', 'Push aktiv');
|
||||
}
|
||||
return t('mobileSettings.pushInactive', 'Push deaktiviert');
|
||||
}, [pushState.permission, pushState.subscribed, pushState.supported, t]);
|
||||
|
||||
const permissionTone = (status: PermissionStatus) => {
|
||||
if (status === 'granted') {
|
||||
return 'success';
|
||||
}
|
||||
if (status === 'denied' || status === 'prompt') {
|
||||
return 'warning';
|
||||
}
|
||||
return 'muted';
|
||||
};
|
||||
|
||||
const storageTone = (status: StorageStatus) => {
|
||||
if (status === 'persisted') {
|
||||
return 'success';
|
||||
}
|
||||
if (status === 'available') {
|
||||
return 'warning';
|
||||
}
|
||||
return 'muted';
|
||||
};
|
||||
|
||||
const permissionLabel = (status: PermissionStatus) =>
|
||||
t(`mobileSettings.deviceStatusValues.${status}`, status);
|
||||
const storageLabel = (status: StorageStatus) =>
|
||||
t(`mobileSettings.deviceStatusValues.${status}`, status);
|
||||
|
||||
React.useEffect(() => {
|
||||
(async () => {
|
||||
@@ -71,6 +116,12 @@ export default function MobileSettingsPage() {
|
||||
})();
|
||||
}, [t]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (devicePermissions.storage === 'persisted') {
|
||||
setStorageError(null);
|
||||
}
|
||||
}, [devicePermissions.storage]);
|
||||
|
||||
const togglePref = (key: PreferenceKey) => {
|
||||
setPreferences((prev) => ({
|
||||
...prev,
|
||||
@@ -98,6 +149,20 @@ export default function MobileSettingsPage() {
|
||||
setPreferences(defaults);
|
||||
};
|
||||
|
||||
const handleStoragePersist = async () => {
|
||||
setStorageSaving(true);
|
||||
const granted = await devicePermissions.requestPersistentStorage();
|
||||
setStorageSaving(false);
|
||||
if (granted) {
|
||||
setStorageError(null);
|
||||
void devicePermissions.refresh();
|
||||
} else {
|
||||
setStorageError(
|
||||
t('mobileSettings.deviceStorageError', 'Offline-Schutz konnte nicht aktiviert werden.')
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<MobileShell activeTab="profile" title={t('mobileSettings.title', 'Settings')} onBack={() => navigate(-1)}>
|
||||
{error ? (
|
||||
@@ -140,6 +205,43 @@ export default function MobileSettingsPage() {
|
||||
</Text>
|
||||
) : (
|
||||
<YGroup borderRadius="$4" borderWidth={1} borderColor={border} overflow="hidden">
|
||||
<YGroup.Item bordered>
|
||||
<ListItem
|
||||
hoverTheme
|
||||
pressTheme
|
||||
paddingVertical="$2"
|
||||
paddingHorizontal="$3"
|
||||
title={
|
||||
<Text fontSize="$sm" color={text} fontWeight="700">
|
||||
{t('mobileSettings.pushTitle', 'App Push')}
|
||||
</Text>
|
||||
}
|
||||
subTitle={
|
||||
<Text fontSize="$xs" color={muted}>
|
||||
{pushState.loading
|
||||
? t('mobileSettings.pushLoading', 'Lädt ...')
|
||||
: pushDescription}
|
||||
</Text>
|
||||
}
|
||||
iconAfter={
|
||||
<Switch
|
||||
size="$4"
|
||||
checked={pushState.subscribed}
|
||||
onCheckedChange={(value) => {
|
||||
if (value) {
|
||||
void pushState.enable();
|
||||
} else {
|
||||
void pushState.disable();
|
||||
}
|
||||
}}
|
||||
disabled={!pushState.supported || pushState.permission === 'denied' || pushState.loading}
|
||||
aria-label={t('mobileSettings.pushTitle', 'App Push')}
|
||||
>
|
||||
<Switch.Thumb />
|
||||
</Switch>
|
||||
}
|
||||
/>
|
||||
</YGroup.Item>
|
||||
{AVAILABLE_PREFS.map((key, index) => (
|
||||
<YGroup.Item key={key} bordered={index < AVAILABLE_PREFS.length - 1}>
|
||||
<ListItem
|
||||
@@ -172,12 +274,88 @@ export default function MobileSettingsPage() {
|
||||
))}
|
||||
</YGroup>
|
||||
)}
|
||||
{pushState.error ? (
|
||||
<Text fontSize="$xs" color="#b91c1c">
|
||||
{pushState.error}
|
||||
</Text>
|
||||
) : null}
|
||||
<XStack space="$2">
|
||||
<CTAButton label={saving ? t('common.processing', '...') : t('settings.notifications.actions.save', 'Speichern')} onPress={() => handleSave()} />
|
||||
<CTAButton label={t('common.reset', 'Reset')} tone="ghost" onPress={() => handleReset()} />
|
||||
</XStack>
|
||||
</MobileCard>
|
||||
|
||||
<MobileCard space="$3">
|
||||
<XStack alignItems="center" space="$2">
|
||||
<Smartphone size={18} color={text} />
|
||||
<Text fontSize="$md" fontWeight="800" color={text}>
|
||||
{t('mobileSettings.deviceTitle', 'Device & permissions')}
|
||||
</Text>
|
||||
</XStack>
|
||||
<Text fontSize="$sm" color={muted}>
|
||||
{t('mobileSettings.deviceDescription', 'Check permissions so the admin app stays fast and offline-ready.')}
|
||||
</Text>
|
||||
{devicePermissions.loading ? (
|
||||
<Text fontSize="$sm" color={muted}>
|
||||
{t('mobileSettings.deviceLoading', 'Checking device status ...')}
|
||||
</Text>
|
||||
) : (
|
||||
<YStack space="$2">
|
||||
<XStack alignItems="center" justifyContent="space-between" gap="$2">
|
||||
<YStack flex={1} space="$1">
|
||||
<Text fontSize="$sm" fontWeight="700" color={text}>
|
||||
{t('mobileSettings.deviceStatus.notifications.label', 'Notifications')}
|
||||
</Text>
|
||||
<Text fontSize="$xs" color={muted}>
|
||||
{t('mobileSettings.deviceStatus.notifications.description', 'Allow alerts and admin updates.')}
|
||||
</Text>
|
||||
</YStack>
|
||||
<PillBadge tone={permissionTone(devicePermissions.notifications)}>
|
||||
{permissionLabel(devicePermissions.notifications)}
|
||||
</PillBadge>
|
||||
</XStack>
|
||||
<XStack alignItems="center" justifyContent="space-between" gap="$2">
|
||||
<YStack flex={1} space="$1">
|
||||
<Text fontSize="$sm" fontWeight="700" color={text}>
|
||||
{t('mobileSettings.deviceStatus.camera.label', 'Camera')}
|
||||
</Text>
|
||||
<Text fontSize="$xs" color={muted}>
|
||||
{t('mobileSettings.deviceStatus.camera.description', 'Needed for QR scans and quick capture.')}
|
||||
</Text>
|
||||
</YStack>
|
||||
<PillBadge tone={permissionTone(devicePermissions.camera)}>
|
||||
{permissionLabel(devicePermissions.camera)}
|
||||
</PillBadge>
|
||||
</XStack>
|
||||
<XStack alignItems="center" justifyContent="space-between" gap="$2">
|
||||
<YStack flex={1} space="$1">
|
||||
<Text fontSize="$sm" fontWeight="700" color={text}>
|
||||
{t('mobileSettings.deviceStatus.storage.label', 'Offline storage')}
|
||||
</Text>
|
||||
<Text fontSize="$xs" color={muted}>
|
||||
{t('mobileSettings.deviceStatus.storage.description', 'Protect cached data from eviction.')}
|
||||
</Text>
|
||||
</YStack>
|
||||
<PillBadge tone={storageTone(devicePermissions.storage)}>
|
||||
{storageLabel(devicePermissions.storage)}
|
||||
</PillBadge>
|
||||
</XStack>
|
||||
</YStack>
|
||||
)}
|
||||
{devicePermissions.storage === 'available' ? (
|
||||
<CTAButton
|
||||
label={storageSaving ? t('common.processing', '...') : t('mobileSettings.deviceStorageAction', 'Enable offline protection')}
|
||||
onPress={() => handleStoragePersist()}
|
||||
disabled={storageSaving}
|
||||
/>
|
||||
) : null}
|
||||
{storageError ? (
|
||||
<Text fontSize="$xs" color="#b91c1c">
|
||||
{storageError}
|
||||
</Text>
|
||||
) : null}
|
||||
</MobileCard>
|
||||
|
||||
<MobileCard space="$3">
|
||||
<XStack alignItems="center" space="$2">
|
||||
<User size={18} color={text} />
|
||||
|
||||
Reference in New Issue
Block a user