73e8372b0e
- Bulk replace text-white → text-foreground across 116 component files (preserving text-white/ opacity variants) - Remove hover-glow-cyan, shadow-card-glow-cyan, shadow-button-primary-glow classes from all components - Replace --duration-normal/--duration-immersive/--duration-slow with --sumi-duration-normal/--sumi-duration-slow across 130+ files - Replace --ease-out/--ease-in-out with --sumi-ease-out/--sumi-ease-in-out - Replace focus:ring-blue-500 → focus:ring-primary (4 files) - Remove hover:scale-105/110 and hover:-translate-y-1/0.5 transforms (SUMI anti-pattern: no scale on hover) - Clean up stale kodo- references in comments Co-authored-by: Cursor <cursoragent@cursor.com>
94 lines
3.3 KiB
TypeScript
94 lines
3.3 KiB
TypeScript
/**
|
|
* PWA Install Banner Component
|
|
* Shows a banner prompting users to install the app
|
|
*/
|
|
|
|
import { Download, Smartphone } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { usePWAInstallBanner } from '@/hooks/usePWA';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export function PWAInstallBanner() {
|
|
const { showBanner, isInstalling, handleInstall, handleDismiss } =
|
|
usePWAInstallBanner();
|
|
const { t } = useTranslation();
|
|
|
|
if (!showBanner) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'fixed bottom-8 right-8 z-50 w-80 glass-hud rounded-2xl border-white/10 p-6 shadow-2xl animate-slideInRight hud-corner group overflow-hidden',
|
|
'before:absolute before:inset-0 before:bg-gradient-to-br before:from-primary/5 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity',
|
|
)}
|
|
>
|
|
<div className="flex flex-col gap-4 relative z-10">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2.5">
|
|
<div className="w-8 h-8 rounded-lg bg-muted/10 flex items-center justify-center border border-border/30 animate-pulse-glow">
|
|
<Smartphone className="h-4 w-4 text-muted-foreground" />
|
|
</div>
|
|
<div>
|
|
<div className="text-hud">System.Uplink</div>
|
|
<h3 className="font-heading font-black text-xs text-foreground uppercase tracking-wider">
|
|
{t('pwa.install.title', 'Native_Access')}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={handleDismiss}
|
|
className="p-1 px-2 rounded-md bg-white/5 text-muted-foreground hover:text-foreground transition-all text-xs font-mono border border-transparent hover:border-white/10"
|
|
>
|
|
DISMISS
|
|
</button>
|
|
</div>
|
|
|
|
<p className="text-[11px] font-mono text-white/50 leading-relaxed uppercase tracking-tighter">
|
|
{t(
|
|
'pwa.install.description',
|
|
'ESTABLISH_LOCAL_UPLINK_FOR_LOW_LATENCY_OPERATIONS',
|
|
)}
|
|
</p>
|
|
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="glass"
|
|
className="flex-1 h-9 text-xs font-black font-mono tracking-widest bg-primary group hover:opacity-90 transition-opacity"
|
|
onClick={handleInstall}
|
|
disabled={isInstalling}
|
|
>
|
|
<Download className="h-3.5 w-3.5 mr-2 transition-opacity group-hover:opacity-80" />
|
|
{isInstalling ? 'RUNNING...' : 'INITIATE_INSTALL'}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="absolute -bottom-8 -right-8 w-16 h-16 bg-muted/10 blur-2xl rounded-full" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* PWA Update Banner Component
|
|
* Shows a banner when app update is available
|
|
*/
|
|
export function PWAUpdateBanner() {
|
|
// This would need to be implemented with the PWA hook
|
|
// For now, returning null as it requires more complex state management
|
|
|
|
return null;
|
|
}
|
|
|
|
/**
|
|
* Offline Banner Component
|
|
* Shows when the app is offline
|
|
*/
|
|
export function OfflineBanner() {
|
|
// This would integrate with the offline detection hook
|
|
// For now, returning null as it requires more complex state management
|
|
|
|
return null;
|
|
}
|