Fix critical PWA and mobile responsiveness issues

index.html

@@ -35,9 +35,7 @@
 
     <!-- Favicon -->
     <link rel="icon" type="image/svg+xml" href="/vspec-logo-official.svg" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="apple-touch-icon" href="/vspec-logo-official.svg" />
 
     <!-- PWA Manifest -->
     <link rel="manifest" href="/manifest.json" />
@@ -49,8 +47,8 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="apple-mobile-web-app-title" content="VSPEC" />
 
-    <!-- iOS Splash Screens - using SVG with fallback colors -->
-    <link rel="apple-touch-startup-image" href="/apple-touch-icon.png" />
+    <!-- iOS Splash Screens - using SVG -->
+    <link rel="apple-touch-startup-image" href="/vspec-logo-official.svg" />
 
     <!-- Additional PWA Meta -->
     <meta name="mobile-web-app-capable" content="yes" />

public/manifest.json

@@ -21,25 +21,9 @@
     },
     {
       "src": "/vspec-logo-official.svg",
-      "sizes": "192x192 512x512",
+      "sizes": "any",
       "type": "image/svg+xml",
       "purpose": "maskable"
-    },
-    {
-      "src": "/apple-touch-icon.png",
-      "sizes": "180x180",
-      "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "/favicon-32x32.png",
-      "sizes": "32x32",
-      "type": "image/png"
-    },
-    {
-      "src": "/favicon-16x16.png",
-      "sizes": "16x16",
-      "type": "image/png"
     }
   ],
   "shortcuts": [

src/app/App.tsx

@@ -135,7 +135,7 @@ export default function App() {
 
                 {/* Protected Routes */}
                 <Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
-                <Route path="/workspace" element={<NewWorkspace />} />
+                <Route path="/workspace" element={<ProtectedRoute><NewWorkspace /></ProtectedRoute>} />
                 <Route path="/documents" element={<ProtectedRoute><DocumentsPage /></ProtectedRoute>} />
                 <Route path="/collaboration" element={<ProtectedRoute><CollaborationPage /></ProtectedRoute>} />
 

src/app/components/LusionNav.tsx

@@ -11,6 +11,7 @@ import VspecLogo from './VspecLogo';
 import { DefaultAvatar, getDisplayName, type UserForAvatar } from './DefaultAvatar';
 import LanguageSelector from './LanguageSelector';
 import { useTranslation } from '../stores/i18nStore';
+import { clearAllUserData } from '../utils/security';
 
 interface LusionNavProps {
   variant?: 'light' | 'dark' | 'transparent';
@@ -100,11 +101,8 @@ export function LusionNav({ variant = 'transparent' }: LusionNavProps) {
     return () => { document.body.style.overflow = ''; };
   }, [isMenuOpen]);
 
-  const handleLogout = useCallback(() => {
-    localStorage.removeItem('vdid_user');
-    localStorage.removeItem('auth_method');
-    localStorage.removeItem('vspec_subscription');
-    localStorage.removeItem('vspec_user_profile');
+  const handleLogout = useCallback(async () => {
+    await clearAllUserData();
     setIsLoggedIn(false);
     setUser(null);
     setIsMenuOpen(false);

src/app/pages/LandingPageNew.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { motion } from 'motion/react';
-import { Menu, X, Sparkles, FileText, GitBranch, Users, Lock, Zap, Check, Network, XCircle, LayoutDashboard, Settings, LogOut } from 'lucide-react';
+import { Sparkles, FileText, GitBranch, Users, Lock, Zap, Check, Network, XCircle } from 'lucide-react';
 import Group from '../../imports/Group-115-1581';
 import Group1000006259 from '../../imports/Group1000006259';
 import VspecGradientBackground from '../components/VspecGradientBackground';
@@ -47,7 +47,6 @@ export default function LandingPageNew() {
   // Authentication state
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [user, setUser] = useState<UserForAvatar | null>(null);
-  const [showUserMenu, setShowUserMenu] = useState(false);
 
   // Check authentication state
   useEffect(() => {
@@ -114,15 +113,6 @@ export default function LandingPageNew() {
     }
   }, [isLoggedIn, navigate]);
 
-  const handleLogout = () => {
-    localStorage.removeItem('vdid_user');
-    localStorage.removeItem('auth_method');
-    localStorage.removeItem('vspec_subscription');
-    setIsLoggedIn(false);
-    setUser(null);
-    setShowUserMenu(false);
-  };
-
   useEffect(() => {
     const interval = setInterval(() => {
       setCurrentWordIndex((prev) => (prev + 1) % words.length);