Sprzątanie projektu - dodanie podglądu gpx - dodanie obsługi logo i avatara - dodanie editable config do prostej edycji tekstów na stronie

App.tsx

@@ -11,11 +11,13 @@ import { ChevronLeft, ExternalLink, Sparkles, User, Lock, ArrowRight, AlertCircl
 import { generateStoryContent } from './services/geminiService';
 import { getEnvVar } from './utils/envUtils';
 
+// --- CONFIG IMPORT ---
+import { AUTHOR_CONFIG } from './_EDITABLE_CONFIG/author';
+import { UI_TEXT } from './_EDITABLE_CONFIG/ui_text';
+
 const STORAGE_KEY = 'gpx-storyteller-state-v6';
 const AUTH_KEY = 'promptstory-auth-token';
 
-// --- PASSWORD CONFIGURATION ---
-// STRICT MODE: No fallbacks. The environment variable must be set in Coolify/Vercel/Netlify.
 const APP_PASSWORD = getEnvVar('VITE_APP_PASSWORD');
 
 const INITIAL_STATE: WizardState = {
@@ -44,12 +46,9 @@ const INITIAL_STATE: WizardState = {
   }
 };
 
-// --- LOGIN SCREEN COMPONENT ---
 const LoginScreen: React.FC<{ onLogin: (success: boolean) => void }> = ({ onLogin }) => {
     const [input, setInput] = useState('');
     const [error, setError] = useState(false);
-    
-    // Check if password is misconfigured (empty)
     const isConfigMissing = !APP_PASSWORD;
 
     const handleSubmit = (e: React.FormEvent) => {
@@ -67,16 +66,10 @@ const LoginScreen: React.FC<{ onLogin: (success: boolean) => void }> = ({ onLogi
              <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
                 <div className="bg-white p-8 rounded-xl shadow-lg border border-red-200 max-w-md w-full text-center">
                     <Bug className="mx-auto text-red-500 mb-4" size={48} />
-                    <h2 className="text-xl font-bold text-gray-900">Błąd Konfiguracji</h2>
+                    <h2 className="text-xl font-bold text-gray-900">{UI_TEXT.login.configError}</h2>
                     <p className="text-gray-600 mt-2 text-sm">
-                        Aplikacja nie wykryła hasła w zmiennych środowiskowych.
+                        Missing VITE_APP_PASSWORD.
                     </p>
-                    <div className="mt-4 bg-gray-100 p-3 rounded text-left text-xs font-mono text-gray-700">
-                        <p>Brakuje zmiennej: <span className="font-bold">VITE_APP_PASSWORD</span></p>
-                        <p className="mt-2">Jeśli używasz Coolify/Vercel:</p>
-                        <p>1. Dodaj zmienną w panelu.</p>
-                        <p>2. Przebuduj projekt (Re-deploy).</p>
-                    </div>
                 </div>
              </div>
         );
@@ -85,83 +78,66 @@ const LoginScreen: React.FC<{ onLogin: (success: boolean) => void }> = ({ onLogi
     return (
         <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center p-4">
             <div className="bg-white p-8 rounded-xl shadow-lg border border-gray-100 max-w-md w-full text-center space-y-6 animate-fade-in relative">
-                
                 <div className="flex justify-center mb-2">
                     <div className="bg-[#EA4420]/10 p-4 rounded-full text-[#EA4420]">
                         <Lock size={32} />
                     </div>
                 </div>
-                
                 <div>
-                    <h2 className="text-2xl font-bold text-gray-900">Dostęp Chroniony</h2>
-                    <p className="text-gray-500 mt-2">Wprowadź hasło, aby uzyskać dostęp.</p>
+                    <h2 className="text-2xl font-bold text-gray-900">{UI_TEXT.login.title}</h2>
+                    <p className="text-gray-500 mt-2">{UI_TEXT.login.desc}</p>
                 </div>
-
                 <form onSubmit={handleSubmit} className="space-y-4">
-                    <div className="relative">
-                        <input 
-                            type="password" 
-                            value={input}
-                            onChange={(e) => {
-                                setInput(e.target.value);
-                                setError(false);
-                            }}
-                            placeholder="Hasło..."
-                            className={`w-full p-4 border rounded-lg outline-none transition-all font-medium text-center tracking-widest ${
-                                error 
-                                ? 'border-red-300 bg-red-50 focus:border-red-500' 
-                                : 'border-gray-200 focus:border-[#EA4420] focus:ring-1 focus:ring-[#EA4420]'
-                            }`}
-                            autoFocus
-                        />
-                    </div>
-                    
+                    <input 
+                        type="password" 
+                        value={input}
+                        onChange={(e) => {
+                            setInput(e.target.value);
+                            setError(false);
+                        }}
+                        placeholder="Hasło..."
+                        className={`w-full p-4 border rounded-lg outline-none transition-all font-medium text-center tracking-widest ${
+                            error 
+                            ? 'border-red-300 bg-red-50 focus:border-red-500' 
+                            : 'border-gray-200 focus:border-[#EA4420] focus:ring-1 focus:ring-[#EA4420]'
+                        }`}
+                        autoFocus
+                    />
                     {error && (
                         <div className="flex items-center justify-center gap-2 text-red-500 text-sm font-medium animate-pulse">
                             <AlertCircle size={16} />
-                            <span>Nieprawidłowe hasło</span>
+                            <span>{UI_TEXT.login.error}</span>
                         </div>
                     )}
-
                     <button 
                         type="submit"
                         className="w-full bg-[#EA4420] text-white py-4 rounded-lg font-bold hover:bg-[#d63b1a] transition-colors flex items-center justify-center gap-2"
                     >
-                        <span>Odblokuj</span>
+                        <span>{UI_TEXT.login.btn}</span>
                         <ArrowRight size={20} />
                     </button>
                 </form>
-                
-                <p className="text-xs text-gray-300 pt-4">
-                    PromptStory v1.2 • Secure Production Build
-                </p>
             </div>
         </div>
     );
 };
 
 const App: React.FC = () => {
-  // Auth State
   const [isAuthenticated, setIsAuthenticated] = useState(false);
   const [isAuthChecking, setIsAuthChecking] = useState(true);
-
-  // App State
   const [data, setData] = useState<WizardState>(INITIAL_STATE);
   const [generatedContent, setGeneratedContent] = useState<GeneratedContent | null>(null);
   const [isGenerating, setIsGenerating] = useState(false);
   const [isLoaded, setIsLoaded] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   
-  // Image loading states
-  const [logoError, setLogoError] = useState(false);
-  const [avatarError, setAvatarError] = useState(false);
+  // LOGO & AVATAR STATE
+  const [logoLoaded, setLogoLoaded] = useState(false);
+  const [avatarLoaded, setAvatarLoaded] = useState(false);
 
-  // 1. Check Auth on Mount
   useEffect(() => {
       const storedAuth = localStorage.getItem(AUTH_KEY);
-      if (storedAuth === 'true') {
-          setIsAuthenticated(true);
-      }
+      if (storedAuth === 'true') setIsAuthenticated(true);
       setIsAuthChecking(false);
   }, []);
 
@@ -178,21 +154,18 @@ const App: React.FC = () => {
       resetApp();
   };
 
-  // 2. Load Data Persistence Logic
   useEffect(() => {
     const saved = localStorage.getItem(STORAGE_KEY);
     if (saved) {
       try {
         const parsed = JSON.parse(saved);
-        parsed.files = []; // Reset files
-        
+        parsed.files = []; 
         if (!parsed.stats) parsed.stats = { distance: '', duration: '', elevation: '' };
         if (!parsed.waypoints) parsed.waypoints = [];
         if (!parsed.tripData) parsed.tripData = { ...INITIAL_STATE.tripData };
         if (!parsed.tone) parsed.tone = null;
         if (!parsed.goal) parsed.goal = null;
         if (!parsed.storyStyle) parsed.storyStyle = null;
-
         setData(parsed);
       } catch (e) {
         console.error("Failed to load state", e);
@@ -216,37 +189,28 @@ const App: React.FC = () => {
   };
 
   const nextStep = () => {
-    if (data.step < Step.RESULT) {
-      updateData({ step: data.step + 1 });
-    }
+    if (data.step < Step.RESULT) updateData({ step: data.step + 1 });
   };
 
   const prevStep = () => {
-    if (data.step > Step.CONTEXT) {
-      updateData({ step: data.step - 1 });
-    }
+    if (data.step > Step.CONTEXT) updateData({ step: data.step - 1 });
   };
 
   const handleGenerate = async () => {
     setIsGenerating(true);
     setErrorMessage(null);
-    
-    // STRICT MODE: Use VITE_API_KEY
     const apiKey = getEnvVar('VITE_API_KEY');
-    
     if (!apiKey) {
-        setErrorMessage("BŁĄD KRYTYCZNY: Brak klucza API (VITE_API_KEY). Skonfiguruj zmienne w panelu Coolify.");
+        setErrorMessage("BŁĄD: Brak VITE_API_KEY.");
         setIsGenerating(false);
         return;
     }
-
     try {
       const content = await generateStoryContent(data, apiKey);
       setGeneratedContent(content);
       updateData({ step: Step.RESULT });
     } catch (error: any) {
-      console.error("Generowanie nie powiodło się:", error);
-      setErrorMessage("Błąd generowania: " + (error.message || 'Sprawdź konsolę'));
+      setErrorMessage("Błąd: " + (error.message || 'Unknown'));
     } finally {
       setIsGenerating(false);
     }
@@ -255,15 +219,12 @@ const App: React.FC = () => {
   const handleRegenerate = async (slideCount: number, feedback: string) => {
     setIsGenerating(true);
     setErrorMessage(null);
-    
     const apiKey = getEnvVar('VITE_API_KEY');
-    
     try {
       const content = await generateStoryContent(data, apiKey || '', { slideCount, feedback });
       setGeneratedContent(content);
     } catch (error: any) {
-      console.error("Regenerowanie nie powiodło się:", error);
-      setErrorMessage("Błąd regenerowania: " + (error.message || ''));
+      setErrorMessage("Błąd: " + (error.message || ''));
     } finally {
       setIsGenerating(false);
     }
@@ -277,39 +238,34 @@ const App: React.FC = () => {
   };
 
   if (isAuthChecking || !isLoaded) return null;
-
-  if (!isAuthenticated) {
-      return <LoginScreen onLogin={handleLogin} />;
-  }
-
-  const stepsLabels = ['Kontekst', 'Typ', 'Platforma', 'Vibe & Cel', 'Szczegóły'];
+  if (!isAuthenticated) return <LoginScreen onLogin={handleLogin} />;
 
   return (
     <div className="min-h-screen bg-white text-gray-900 flex flex-col font-sans">
       <header className="bg-white sticky top-0 z-10 border-b border-gray-100">
         <div className="max-w-4xl mx-auto px-6 py-4 flex justify-between items-center">
           <div className="flex items-center space-x-3">
-             {!logoError ? (
-               <img 
+             {/* LOGO LOGIC: Image is hidden by default. If it loads, it shows and text hides. */}
+             <img 
                 src="logo.png" 
-                onError={() => setLogoError(true)}
-                alt="PromptStory Logo" 
-                className="w-10 h-10 object-contain" 
-               />
-             ) : (
-               <div className="text-[#EA4420]">
-                  <Sparkles size={32} strokeWidth={2} />
+                alt="Logo" 
+                onLoad={() => setLogoLoaded(true)}
+                className={`h-10 object-contain ${logoLoaded ? 'block' : 'hidden'}`} 
+             />
+             {!logoLoaded && (
+               <div className="flex items-center gap-2">
+                 <div className="text-[#EA4420]"><Sparkles size={32} strokeWidth={2} /></div>
+                 <h1 className="text-xl font-bold tracking-tight text-gray-900">{UI_TEXT.header.appTitle}</h1>
                </div>
              )}
-             <h1 className="text-xl font-bold tracking-tight text-gray-900">PromptStory</h1>
           </div>
           
           <div className="flex items-center gap-4">
               <button onClick={resetApp} className="text-xs font-medium text-gray-400 hover:text-[#EA4420] transition-colors uppercase tracking-wide">
-                Resetuj
+                {UI_TEXT.header.resetBtn}
               </button>
               <button onClick={handleLogout} className="text-xs font-medium text-gray-400 hover:text-red-500 transition-colors uppercase tracking-wide">
-                Wyloguj
+                {UI_TEXT.header.logoutBtn}
               </button>
           </div>
         </div>
@@ -319,17 +275,14 @@ const App: React.FC = () => {
         {data.step !== Step.RESULT && (
           <div className="mb-12">
             <div className="flex justify-between mb-3">
-               {stepsLabels.map((label, idx) => (
+               {UI_TEXT.steps.labels.map((label, idx) => (
                  <span key={label} className={`text-xs font-bold uppercase tracking-wider transition-colors ${data.step >= idx ? 'text-[#EA4420]' : 'text-gray-300'}`}>
                    0{idx + 1}. {label}
                  </span>
                ))}
             </div>
             <div className="h-1 bg-gray-100 rounded-full overflow-hidden">
-               <div 
-                  className="h-full bg-[#EA4420] transition-all duration-500 ease-out"
-                  style={{ width: `${((data.step + 1) / 5) * 100}%` }}
-               />
+               <div className="h-full bg-[#EA4420] transition-all duration-500 ease-out" style={{ width: `${((data.step + 1) / 5) * 100}%` }} />
             </div>
           </div>
         )}
@@ -339,22 +292,8 @@ const App: React.FC = () => {
           {data.step === Step.EVENT_TYPE && <StepEventType data={data} updateData={updateData} nextStep={nextStep} />}
           {data.step === Step.PLATFORM && <StepPlatform data={data} updateData={updateData} nextStep={nextStep} />}
           {data.step === Step.TONE_GOAL && <StepToneGoal data={data} updateData={updateData} nextStep={nextStep} />}
-          {data.step === Step.DETAILS && (
-            <StepDetails 
-                data={data} 
-                updateData={updateData as any} 
-                onGenerate={handleGenerate} 
-                isGenerating={isGenerating} 
-            />
-          )}
-          {data.step === Step.RESULT && generatedContent && (
-            <StepResult 
-              content={generatedContent} 
-              onRegenerate={handleRegenerate}
-              isRegenerating={isGenerating}
-              tripData={data.tripData}
-            />
-          )}
+          {data.step === Step.DETAILS && <StepDetails data={data} updateData={updateData as any} onGenerate={handleGenerate} isGenerating={isGenerating} />}
+          {data.step === Step.RESULT && generatedContent && <StepResult content={generatedContent} onRegenerate={handleRegenerate} isRegenerating={isGenerating} tripData={data.tripData} />}
           
           {errorMessage && (
             <div className="mt-6 p-4 bg-red-50 text-red-600 rounded-md border border-red-100 text-sm text-center">
@@ -372,26 +311,28 @@ const App: React.FC = () => {
                   className="flex items-center space-x-2 text-gray-500 hover:text-gray-900 font-semibold px-6 py-3 rounded-md border border-gray-200 hover:bg-gray-50 transition-colors disabled:opacity-50"
                 >
                   <ChevronLeft size={20} />
-                  <span>Wróć</span>
+                  <span>{UI_TEXT.steps.nav.back}</span>
                 </button>
              </div>
            </div>
         )}
       </main>
 
+      {/* FOOTER - Uses AUTHOR_CONFIG */}
       <footer className="border-t border-gray-100 py-10 bg-gray-50/30 mt-auto">
         <div className="max-w-4xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-8">
            <div className="flex items-start md:items-center gap-5">
               <div className="relative group cursor-pointer flex-shrink-0">
                   <div className="absolute -inset-0.5 bg-gradient-to-r from-[#EA4420] to-orange-400 rounded-full opacity-30 group-hover:opacity-100 transition duration-500 blur"></div>
-                  {!avatarError ? (
-                    <img 
-                      src="avatar.jpeg"
-                      onError={() => setAvatarError(true)}
-                      alt="Arkadiusz Bykowski" 
-                      className="relative w-20 h-20 rounded-full object-cover border border-gray-100 bg-white"
-                    />
-                  ) : (
+                  
+                  {/* AVATAR LOGIC */}
+                  <img 
+                    src={AUTHOR_CONFIG.avatarImage} 
+                    alt={AUTHOR_CONFIG.name}
+                    onLoad={() => setAvatarLoaded(true)}
+                    className={`relative w-20 h-20 rounded-full object-cover border border-gray-100 bg-white ${avatarLoaded ? 'block' : 'hidden'}`}
+                  />
+                  {!avatarLoaded && (
                      <div className="relative w-20 h-20 rounded-full border border-gray-100 bg-white flex items-center justify-center text-gray-300">
                         <User size={40} />
                      </div>
@@ -399,20 +340,25 @@ const App: React.FC = () => {
               </div>
               
               <div className="text-left">
-                 <h3 className="text-gray-900 font-bold text-xl leading-tight">Arkadiusz Bykowski</h3>
+                 <h3 className="text-gray-900 font-bold text-xl leading-tight">{AUTHOR_CONFIG.name}</h3>
                  <p className="text-gray-600 text-sm mt-2 leading-relaxed max-w-lg">
-                    Zamieniam Twoją stronę w maszynkę do zarabiania pieniędzy.
+                    {AUTHOR_CONFIG.description}
                  </p>
+                 <div className="flex flex-wrap gap-2 mt-3">
+                    {AUTHOR_CONFIG.tags.map(tag => (
+                        <span key={tag} className="text-xs font-medium text-gray-500 bg-gray-100 px-2 py-1 rounded-md">{tag}</span>
+                    ))}
+                 </div>
               </div>
            </div>
 
            <a 
-            href="https://bykowski.pro/" 
+            href={AUTHOR_CONFIG.websiteUrl} 
             target="_blank" 
             rel="noopener noreferrer"
             className="flex-shrink-0 flex items-center space-x-2 text-sm font-bold text-gray-700 hover:text-[#EA4420] transition-all bg-white border border-gray-200 px-6 py-3 rounded-full hover:shadow-md hover:border-[#EA4420]/30 active:scale-95"
            >
-             <span>Odwiedź stronę</span>
+             <span>{AUTHOR_CONFIG.websiteLabel}</span>
              <ExternalLink size={16} />
            </a>
         </div>