arebynd/promptstory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Arek Bykowski
2026-02-15 18:43:34 +01:00
parent 78a34498d0
commit 981ce1d1b2
13 changed files with 459 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
components/StepContext.tsx
View File

@@ -1,6 +1,8 @@
import React from 'react';
import { WizardState, Step } from '../types';
import { WizardState } from '../types';
import { Camera, BookOpen, Ghost, Sword } from 'lucide-react';
import { UI_TEXT } from '../_EDITABLE_CONFIG/ui_text';
interface StepContextProps {
data: WizardState;
@@ -11,13 +13,11 @@ interface StepContextProps {
const StepContext: React.FC<StepContextProps> = ({ data, updateData, nextStep }) => {
const handleContextSelect = (context: WizardState['context']) => {
// If selecting Relacja, clear storyStyle and move on
if (context === 'relacja') {
updateData({ context, storyStyle: null });
setTimeout(nextStep, 150);
} else {
// If selecting Opowiesc, just update context and stay for sub-step
updateData({ context, storyStyle: null }); // Reset style if switching back to opowiesc
updateData({ context, storyStyle: null });
}
};
@@ -29,10 +29,9 @@ const StepContext: React.FC<StepContextProps> = ({ data, updateData, nextStep })
return (
<div className="space-y-8 animate-fade-in">
<div>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Kontekst</h2>
<p className="text-gray-500 mb-8 text-lg">Jaki rodzaj historii chcesz opowiedzieć?</p>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">{UI_TEXT.stepContext.title}</h2>
<p className="text-gray-500 mb-8 text-lg">{UI_TEXT.stepContext.subtitle}</p>
{/* Main Context Selection */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<button
onClick={() => handleContextSelect('relacja')}
@@ -43,8 +42,8 @@ const StepContext: React.FC<StepContextProps> = ({ data, updateData, nextStep })
}`}
>
<Camera size={48} className={`mb-5 stroke-1 transition-colors ${data.context === 'relacja' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
<span className="text-xl font-bold tracking-tight">Relacja (Vlog)</span>
<span className="text-sm opacity-75 mt-2 font-medium">Tu i teraz, emocje, akcja.</span>
<span className="text-xl font-bold tracking-tight">{UI_TEXT.stepContext.relacja.title}</span>
<span className="text-sm opacity-75 mt-2 font-medium">{UI_TEXT.stepContext.relacja.desc}</span>
</button>
<button
@@ -56,16 +55,15 @@ const StepContext: React.FC<StepContextProps> = ({ data, updateData, nextStep })
}`}
>
<BookOpen size={48} className={`mb-5 stroke-1 transition-colors ${data.context === 'opowiesc' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
<span className="text-xl font-bold tracking-tight">Opowieść</span>
<span className="text-sm opacity-75 mt-2 font-medium">Wspomnienia, refleksja, morał.</span>
<span className="text-xl font-bold tracking-tight">{UI_TEXT.stepContext.opowiesc.title}</span>
<span className="text-sm opacity-75 mt-2 font-medium">{UI_TEXT.stepContext.opowiesc.desc}</span>
</button>
</div>
{/* Sub-step for Opowiesc: Story Style */}
{data.context === 'opowiesc' && (
<div className="animate-fade-in border-t border-gray-100 pt-8">
<h3 className="text-xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Styl Opowieści</h3>
<p className="text-gray-500 mb-6 text-sm">Nadaj historii unikalny klimat.</p>
<h3 className="text-xl font-bold tracking-tight text-gray-900 mb-3">{UI_TEXT.stepContext.styles.title}</h3>
<p className="text-gray-500 mb-6 text-sm">{UI_TEXT.stepContext.styles.subtitle}</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<button
@@ -78,8 +76,8 @@ const StepContext: React.FC<StepContextProps> = ({ data, updateData, nextStep })
>
<Ghost size={32} className={`mr-4 stroke-1 ${data.storyStyle === 'noir' ? 'text-white' : 'text-gray-400 group-hover:text-gray-900'}`} />
<div>
<span className="text-lg font-bold tracking-tight block">Kryminał NOIR</span>
<span className={`text-xs block mt-1 ${data.storyStyle === 'noir' ? 'text-gray-400' : 'text-gray-500'}`}>Mrok, deszcz, cyniczny detektyw.</span>
<span className="text-lg font-bold tracking-tight block">{UI_TEXT.stepContext.styles.noir.title}</span>
<span className={`text-xs block mt-1 ${data.storyStyle === 'noir' ? 'text-gray-400' : 'text-gray-500'}`}>{UI_TEXT.stepContext.styles.noir.desc}</span>
</div>
</button>
@@ -93,17 +91,16 @@ const StepContext: React.FC<StepContextProps> = ({ data, updateData, nextStep })
>
<Sword size={32} className={`mr-4 stroke-1 ${data.storyStyle === 'fantasy' ? 'text-purple-600' : 'text-gray-400 group-hover:text-purple-600'}`} />
<div>
<span className="text-lg font-bold tracking-tight block">Przygoda Fantasy</span>
<span className="text-xs text-gray-500 block mt-1">Epicka podróż, magia, artefakty.</span>
<span className="text-lg font-bold tracking-tight block">{UI_TEXT.stepContext.styles.fantasy.title}</span>
<span className="text-xs text-gray-500 block mt-1">{UI_TEXT.stepContext.styles.fantasy.desc}</span>
</div>
</button>
</div>
</div>
)}
</div>
</div>
);
};
export default StepContext;
export default StepContext;

169
components/StepDetails.tsx
View File

@@ -1,9 +1,10 @@
import React, { useRef, useState, useEffect } from 'react';
import { WizardState } from '../types';
import { UploadCloud, FileText, X, Image as ImageIcon, Sparkles, Loader2, MapPin, Navigation, Plus, Trash2, Flag, Target, AlertCircle, CheckCircle2, Car, Footprints } from 'lucide-react';
import { UploadCloud, FileText, X, Image as ImageIcon, Sparkles, Loader2, MapPin, Navigation, Plus, Trash2, Flag, Target, AlertCircle, CheckCircle2, Car, Footprints, Eye } from 'lucide-react';
import { processFile } from '../utils/fileUtils';
import { getEnvVar } from '../utils/envUtils';
import { UI_TEXT } from '../_EDITABLE_CONFIG/ui_text';
// --- HELPER COMPONENT: PLACE AUTOCOMPLETE INPUT (WIDGET VERSION) ---
interface PlaceAutocompleteInputProps {
@@ -21,33 +22,20 @@ const PlaceAutocompleteInput: React.FC<PlaceAutocompleteInputProps> = ({ value,
const inputRef = useRef<HTMLInputElement>(null);
const autocompleteRef = useRef<any>(null);
// Initialize Google Autocomplete Widget
useEffect(() => {
if (!scriptLoaded || !inputRef.current || !(window as any).google || autocompleteRef.current) return;
try {
const google = (window as any).google;
// Use the standard Autocomplete widget attached to the input
const autocomplete = new google.maps.places.Autocomplete(inputRef.current, {
fields: ["place_id", "geometry", "name", "formatted_address"],
types: ["geocode", "establishment"]
});
autocompleteRef.current = autocomplete;
autocomplete.addListener("place_changed", () => {
const place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
// FIX: Use formatted_address as fallback if name is empty/missing
if (!place.geometry) return;
const name = place.name || place.formatted_address || "";
const address = place.formatted_address;
// Update parent state
onChange(name, address);
});
} catch (e) {
@@ -71,8 +59,6 @@ const PlaceAutocompleteInput: React.FC<PlaceAutocompleteInputProps> = ({ value,
placeholder={placeholder}
autoComplete="off"
/>
{/* Address Confirmation Hint */}
{addressPreview && (
<div className="text-[10px] text-gray-500 mt-1 ml-1 flex items-center gap-1 animate-fade-in">
<CheckCircle2 size={10} className="text-green-500" />
@@ -84,7 +70,6 @@ const PlaceAutocompleteInput: React.FC<PlaceAutocompleteInputProps> = ({ value,
};
// --- MAIN COMPONENT ---
interface StepDetailsProps {
data: WizardState;
updateData: (updates: Partial<WizardState> | ((prev: WizardState) => Partial<WizardState>)) => void;
@@ -97,27 +82,24 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
const [error, setError] = useState<string | null>(null);
const [mapError, setMapError] = useState<{title: string, msg: string} | null>(null);
const [scriptLoaded, setScriptLoaded] = useState(false);
// State for GPX Text Preview
const [showGpxPreview, setShowGpxPreview] = useState(false);
// STRICT MODE: Use VITE_GOOGLE_MAPS_KEY
const getEffectiveKey = () => {
if (data.tripData?.googleMapsKey) return data.tripData.googleMapsKey;
return getEnvVar('VITE_GOOGLE_MAPS_KEY');
};
const effectiveKey = getEffectiveKey();
// Warning if no key is found at all
const isKeyMissing = !effectiveKey;
// --- GOOGLE MAPS LOADING ---
const loadMapsScript = (apiKey: string) => {
if (!apiKey) return;
if ((window as any).google?.maps?.places) {
setScriptLoaded(true);
return;
}
const existingScript = document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`);
if (existingScript) {
const interval = setInterval(() => {
@@ -129,7 +111,6 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
}, 500);
return;
}
const script = document.createElement('script');
script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&loading=async&v=weekly`;
script.async = true;
@@ -157,7 +138,6 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
}
}, [data.eventType, effectiveKey]);
// Initialize Trip Data if missing
useEffect(() => {
if (data.eventType === 'trip') {
if (!data.tripData) {
@@ -167,7 +147,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
endPoint: { place: '', description: '' },
stops: [{ id: crypto.randomUUID(), place: '', description: '' }],
travelMode: null,
googleMapsKey: '' // Don't auto-fill undefined keys
googleMapsKey: ''
}
});
}
@@ -190,7 +170,6 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
updateData(prev => ({ files: prev.files.filter(f => f.id !== id) }));
};
// --- TRIP DATA HELPERS ---
const updateApiKey = (val: string) => {
updateData(prev => ({
tripData: prev.tripData ? { ...prev.tripData, googleMapsKey: val } : prev.tripData
@@ -202,13 +181,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
updateData(prev => {
if (!prev.tripData) return {};
return {
tripData: {
...prev.tripData,
[pointType]: {
...prev.tripData[pointType],
[field]: value
}
}
tripData: { ...prev.tripData, [pointType]: { ...prev.tripData[pointType], [field]: value } }
};
});
};
@@ -217,79 +190,97 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
updateData(prev => {
if (!prev.tripData) return {};
const newStops = prev.tripData.stops.map(s => s.id === id ? { ...s, [field]: value } : s);
return {
tripData: { ...prev.tripData, stops: newStops }
};
return { tripData: { ...prev.tripData, stops: newStops } };
});
};
const addStop = () => {
updateData(prev => {
if (!prev.tripData) return {};
return {
tripData: {
...prev.tripData,
stops: [...prev.tripData.stops, { id: crypto.randomUUID(), place: '', description: '' }]
}
};
return { tripData: { ...prev.tripData, stops: [...prev.tripData.stops, { id: crypto.randomUUID(), place: '', description: '' }] } };
});
};
const removeStop = (id: string) => {
updateData(prev => {
if (!prev.tripData) return {};
return {
tripData: {
...prev.tripData,
stops: prev.tripData.stops.filter(s => s.id !== id)
}
};
return { tripData: { ...prev.tripData, stops: prev.tripData.stops.filter(s => s.id !== id) } };
});
};
const setTravelMode = (mode: 'DRIVING' | 'WALKING') => {
updateData(prev => {
if (!prev.tripData) return {};
return {
tripData: { ...prev.tripData, travelMode: mode }
};
return { tripData: { ...prev.tripData, travelMode: mode } };
});
};
// Validation Check
const isTripModeValid = data.eventType !== 'trip' || (data.tripData && data.tripData.travelMode !== null);
const isReadyToGenerate = data.title && isTripModeValid;
return (
<div className="space-y-10 animate-fade-in">
<div className="space-y-10 animate-fade-in relative">
{/* GPX PREVIEW MODAL */}
{showGpxPreview && (
<div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4 backdrop-blur-sm animate-fade-in">
<div className="bg-white rounded-lg shadow-xl max-w-lg w-full overflow-hidden flex flex-col max-h-[80vh]">
<div className="p-4 border-b border-gray-100 flex justify-between items-center bg-gray-50">
<h3 className="font-bold text-gray-900 flex items-center gap-2">
<FileText size={18} className="text-[#EA4420]" />
Podgląd kontekstu GPX
</h3>
<button onClick={() => setShowGpxPreview(false)} className="text-gray-400 hover:text-gray-600">
<X size={20} />
</button>
</div>
<div className="p-4 overflow-y-auto font-mono text-xs text-gray-700 bg-gray-50/50">
<p className="mb-2 text-gray-400 font-sans uppercase font-bold tracking-wider">To widzi AI:</p>
<div className="bg-white border border-gray-200 p-3 rounded">
<p>DYSTANS: {data.stats.distance || "0"}</p>
<p>CZAS TRWANIA: {data.stats.duration || "0"}</p>
<p>PRZEWYŻSZENIA: {data.stats.elevation || "0"}</p>
</div>
</div>
<div className="p-4 border-t border-gray-100 flex justify-end">
<button
onClick={() => setShowGpxPreview(false)}
className="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded text-sm font-bold transition-colors"
>
Zamknij
</button>
</div>
</div>
</div>
)}
<div>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Szczegóły</h2>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">{UI_TEXT.stepDetails.title}</h2>
<p className="text-gray-500 mb-8 text-lg">
{data.eventType === 'trip' ? 'Zaplanuj trasę i opisz przebieg podróży.' : 'Uzupełnij informacje o wydarzeniu.'}
{data.eventType === 'trip' ? UI_TEXT.stepDetails.subtitleTrip : UI_TEXT.stepDetails.subtitleEvent}
</p>
</div>
<div className="space-y-8">
{/* SEKCJA DLA WYCIECZEK (TRIP) */}
{/* TRIP SECTION */}
{data.eventType === 'trip' && data.tripData && (
<div className="bg-gray-50 border border-gray-200 rounded-xl p-6 space-y-6">
{/* Manual Input if Env key is missing */}
{isKeyMissing && !data.tripData.googleMapsKey && (
<div className="bg-yellow-50 p-4 rounded-md border border-yellow-200 mb-2">
<div className="flex items-start gap-3">
<AlertCircle className="text-yellow-600 mt-0.5" size={20} />
<div className="flex-1">
<h4 className="font-bold text-yellow-800 text-sm">Brak klucza w konfiguracji (VITE_GOOGLE_MAPS_KEY)</h4>
<h4 className="font-bold text-yellow-800 text-sm">{UI_TEXT.stepDetails.tripSection.apiKeyMissing}</h4>
<p className="text-xs text-yellow-700 mt-1 mb-2">
Wklej klucz ręcznie poniżej, aby mapy zadziałały.
{UI_TEXT.stepDetails.tripSection.apiKeyMissingDesc}
</p>
<input
type="text"
value={data.tripData?.googleMapsKey || ''}
onChange={(e) => updateApiKey(e.target.value)}
placeholder="Wklej klucz Google Maps API (AIza...)"
placeholder={UI_TEXT.stepDetails.tripSection.apiKeyPlaceholder}
className="w-full p-2 text-sm border border-yellow-300 rounded bg-white focus:border-[#EA4420] outline-none"
/>
</div>
@@ -297,7 +288,6 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
</div>
)}
{/* Detailed Error Banner for Maps */}
{mapError && (
<div className="bg-red-50 border border-red-200 p-4 rounded-lg flex items-start gap-3 text-red-700">
<AlertCircle className="flex-shrink-0 mt-0.5" size={20} />
@@ -311,7 +301,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
<div className="flex items-center justify-between gap-2 mb-2 pt-1">
<div className="flex items-center gap-2">
<Navigation className="text-[#EA4420]" size={24} />
<h3 className="text-xl font-bold text-gray-900">Plan Podróży</h3>
<h3 className="text-xl font-bold text-gray-900">{UI_TEXT.stepDetails.tripSection.title}</h3>
{scriptLoaded && !mapError && (
<span className="hidden sm:flex text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full font-bold items-center gap-1">
<CheckCircle2 size={12} /> API OK
@@ -330,7 +320,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
}`}
>
<Car size={32} className="mb-2" />
<span className="font-bold text-sm sm:text-base">Samochód / Droga</span>
<span className="font-bold text-sm sm:text-base">{UI_TEXT.stepDetails.tripSection.modeDriving}</span>
</button>
<button
onClick={() => setTravelMode('WALKING')}
@@ -341,13 +331,13 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
}`}
>
<Footprints size={32} className="mb-2" />
<span className="font-bold text-sm sm:text-base">Pieszo / Szlak</span>
<span className="font-bold text-sm sm:text-base">{UI_TEXT.stepDetails.tripSection.modeWalking}</span>
</button>
</div>
{!data.tripData.travelMode && (
<p className="text-center text-xs text-red-500 font-bold animate-pulse">
* Wybór rodzaju trasy jest wymagany
{UI_TEXT.stepDetails.tripSection.modeRequired}
</p>
)}
@@ -362,7 +352,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
if(preview) updatePoint('startPoint', 'addressPreview', preview);
}}
addressPreview={data.tripData.startPoint.addressPreview}
placeholder="Punkt Startowy (np. Kraków)"
placeholder={UI_TEXT.stepDetails.tripSection.startPoint}
icon={<Flag size={16} className="text-green-600" />}
scriptLoaded={scriptLoaded}
onError={(msg) => setMapError({title: "Błąd API Places", msg})}
@@ -373,7 +363,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
value={data.tripData.startPoint.description}
onChange={(e) => updatePoint('startPoint', 'description', e.target.value)}
className="w-full p-3 border border-gray-300 rounded-md focus:border-[#EA4420] outline-none"
placeholder="Opis startu (np. Zbiórka o 6:00)"
placeholder={UI_TEXT.stepDetails.tripSection.startDesc}
/>
</div>
<div className="w-[42px]"></div>
@@ -390,7 +380,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
if(preview) updateStop(stop.id, 'addressPreview', preview);
}}
addressPreview={stop.addressPreview}
placeholder={`Przystanek ${index + 1}`}
placeholder={`${UI_TEXT.stepDetails.tripSection.stopPlaceholder} ${index + 1}`}
icon={<MapPin size={16} className="text-blue-500" />}
scriptLoaded={scriptLoaded}
onError={(msg) => setMapError({title: "Błąd API Places", msg})}
@@ -401,7 +391,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
value={stop.description}
onChange={(e) => updateStop(stop.id, 'description', e.target.value)}
className="w-full p-3 border border-gray-200 rounded-md focus:border-[#EA4420] outline-none"
placeholder="Co tam robiliście?"
placeholder={UI_TEXT.stepDetails.tripSection.stopDescPlaceholder}
/>
</div>
<button
@@ -420,7 +410,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
className="flex items-center space-x-2 text-sm font-bold text-[#EA4420] hover:bg-[#EA4420]/5 px-4 py-2 rounded-md transition-colors"
>
<Plus size={16} />
<span>Dodaj przystanek</span>
<span>{UI_TEXT.stepDetails.tripSection.addStop}</span>
</button>
</div>
@@ -434,7 +424,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
if(preview) updatePoint('endPoint', 'addressPreview', preview);
}}
addressPreview={data.tripData.endPoint.addressPreview}
placeholder="Punkt Końcowy (np. Zakopane)"
placeholder={UI_TEXT.stepDetails.tripSection.endPoint}
icon={<Target size={16} className="text-red-600" />}
scriptLoaded={scriptLoaded}
onError={(msg) => setMapError({title: "Błąd API Places", msg})}
@@ -445,7 +435,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
value={data.tripData.endPoint.description}
onChange={(e) => updatePoint('endPoint', 'description', e.target.value)}
className="w-full p-3 border border-gray-300 rounded-md focus:border-[#EA4420] outline-none"
placeholder="Opis końca (np. Nareszcie piwo)"
placeholder={UI_TEXT.stepDetails.tripSection.endDesc}
/>
</div>
<div className="w-[42px]"></div>
@@ -457,29 +447,29 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
{/* Standard Fields */}
<div className="space-y-6">
<div>
<label className="block text-sm font-bold text-gray-700 mb-2">Tytuł wydarzenia</label>
<label className="block text-sm font-bold text-gray-700 mb-2">{UI_TEXT.stepDetails.fields.title}</label>
<input
type="text"
value={data.title}
onChange={(e) => updateData({ title: e.target.value })}
className="w-full p-4 border border-gray-200 rounded-md focus:ring-1 focus:ring-[#EA4420] focus:border-[#EA4420] outline-none transition-all font-medium text-gray-900 placeholder-gray-300"
placeholder="np. Roadtrip po Bałkanach"
placeholder={UI_TEXT.stepDetails.fields.titlePlaceholder}
/>
</div>
<div>
<label className="block text-sm font-bold text-gray-700 mb-2">Krótki opis / Notatki</label>
<label className="block text-sm font-bold text-gray-700 mb-2">{UI_TEXT.stepDetails.fields.desc}</label>
<textarea
value={data.description}
onChange={(e) => updateData({ description: e.target.value })}
placeholder="Ogólny klimat, emocje, dodatkowe szczegóły, których nie ma w planie wycieczki..."
placeholder={UI_TEXT.stepDetails.fields.descPlaceholder}
rows={4}
className="w-full border border-gray-200 rounded-md p-4 text-base text-gray-700 focus:ring-1 focus:ring-[#EA4420] focus:border-[#EA4420] outline-none resize-none placeholder-gray-300"
/>
</div>
<div>
<label className="block text-sm font-bold text-gray-700 mb-2">Materiały pomocnicze (Max 3)</label>
<label className="block text-sm font-bold text-gray-700 mb-2">{UI_TEXT.stepDetails.fields.files}</label>
<div
className={`border-2 border-dashed rounded-md p-8 flex flex-col items-center justify-center text-center transition-all cursor-pointer group ${
error ? 'border-red-300 bg-red-50' : 'border-gray-200 hover:border-[#EA4420] hover:bg-[#EA4420]/5'
@@ -495,8 +485,8 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
className="hidden"
/>
<UploadCloud size={32} className="text-gray-300 group-hover:text-[#EA4420] mb-3 transition-colors" />
<p className="text-gray-600 font-medium">Kliknij, aby dodać pliki</p>
<p className="text-gray-400 text-xs mt-1">GPX, PDF, JPG, PNG</p>
<p className="text-gray-600 font-medium">{UI_TEXT.stepDetails.fields.filesDrop}</p>
<p className="text-gray-400 text-xs mt-1">{UI_TEXT.stepDetails.fields.filesSub}</p>
</div>
{error && <p className="text-red-500 text-sm mt-2">{error}</p>}
@@ -522,6 +512,19 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
</div>
)}
</div>
{/* GPX Preview Button */}
{(data.stats.distance || data.stats.duration || data.files.some(f => f.file.name.endsWith('.gpx'))) && (
<div className="flex justify-end">
<button
onClick={() => setShowGpxPreview(true)}
className="text-xs font-bold text-[#EA4420] flex items-center gap-1 hover:underline"
>
<Eye size={14} />
{UI_TEXT.stepDetails.fields.gpxPreviewBtn}
</button>
</div>
)}
</div>
</div>
@@ -534,12 +537,12 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
{isGenerating ? (
<>
<Loader2 size={24} className="animate-spin" />
<span>Generowanie Historii...</span>
<span>{UI_TEXT.stepDetails.generateBtn.loading}</span>
</>
) : (
<>
<Sparkles size={24} />
<span>Generuj Relację</span>
<span>{UI_TEXT.stepDetails.generateBtn.idle}</span>
</>
)}
</button>

20
components/StepEventType.tsx
View File

@@ -1,6 +1,8 @@
import React from 'react';
import { WizardState, EventType } from '../types';
import { Trophy, Tent, Ticket, PartyPopper, Briefcase, Sparkles } from 'lucide-react';
import { UI_TEXT } from '../_EDITABLE_CONFIG/ui_text';
interface StepEventTypeProps {
data: WizardState;
@@ -16,19 +18,19 @@ const StepEventType: React.FC<StepEventTypeProps> = ({ data, updateData, nextSte
};
const types: { id: EventType; label: string; icon: React.ReactNode }[] = [
{ id: 'sport', label: 'Wydarzenie Sportowe', icon: <Trophy size={32} /> },
{ id: 'culture', label: 'Wydarzenie Kulturalne', icon: <Ticket size={32} /> },
{ id: 'trip', label: 'Wycieczka / Podróż', icon: <Tent size={32} /> },
{ id: 'party', label: 'Impreza', icon: <PartyPopper size={32} /> },
{ id: 'work', label: 'Praca / Konferencja', icon: <Briefcase size={32} /> },
{ id: 'other', label: 'Inne', icon: <Sparkles size={32} /> },
{ id: 'sport', label: UI_TEXT.stepType.types.sport, icon: <Trophy size={32} /> },
{ id: 'culture', label: UI_TEXT.stepType.types.culture, icon: <Ticket size={32} /> },
{ id: 'trip', label: UI_TEXT.stepType.types.trip, icon: <Tent size={32} /> },
{ id: 'party', label: UI_TEXT.stepType.types.party, icon: <PartyPopper size={32} /> },
{ id: 'work', label: UI_TEXT.stepType.types.work, icon: <Briefcase size={32} /> },
{ id: 'other', label: UI_TEXT.stepType.types.other, icon: <Sparkles size={32} /> },
];
return (
<div className="space-y-8 animate-fade-in">
<div>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Rodzaj Wydarzenia</h2>
<p className="text-gray-500 mb-8 text-lg">Czego dotyczy Twoja relacja?</p>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">{UI_TEXT.stepType.title}</h2>
<p className="text-gray-500 mb-8 text-lg">{UI_TEXT.stepType.subtitle}</p>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
{types.map((type) => (
@@ -53,4 +55,4 @@ const StepEventType: React.FC<StepEventTypeProps> = ({ data, updateData, nextSte
);
};
export default StepEventType;
export default StepEventType;

20
components/StepPlatform.tsx
View File

@@ -1,6 +1,8 @@
import React from 'react';
import { WizardState } from '../types';
import { Instagram, Youtube, Activity } from 'lucide-react';
import { UI_TEXT } from '../_EDITABLE_CONFIG/ui_text';
interface StepPlatformProps {
data: WizardState;
@@ -18,8 +20,8 @@ const StepPlatform: React.FC<StepPlatformProps> = ({ data, updateData, nextStep
return (
<div className="space-y-8 animate-fade-in">
<div>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Platformę</h2>
<p className="text-gray-500 mb-8 text-lg">Gdzie opublikujesz materiał?</p>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">{UI_TEXT.stepPlatform.title}</h2>
<p className="text-gray-500 mb-8 text-lg">{UI_TEXT.stepPlatform.subtitle}</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<button
@@ -31,8 +33,8 @@ const StepPlatform: React.FC<StepPlatformProps> = ({ data, updateData, nextStep
}`}
>
<Instagram size={48} className={`mb-5 stroke-1 transition-colors ${data.platform === 'instagram' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
<span className="text-xl font-bold tracking-tight">Instagram</span>
<span className="text-sm opacity-75 mt-2 font-medium">Carousel / Post</span>
<span className="text-xl font-bold tracking-tight">{UI_TEXT.stepPlatform.instagram.title}</span>
<span className="text-sm opacity-75 mt-2 font-medium">{UI_TEXT.stepPlatform.instagram.desc}</span>
</button>
<button
@@ -44,8 +46,8 @@ const StepPlatform: React.FC<StepPlatformProps> = ({ data, updateData, nextStep
}`}
>
<Youtube size={48} className={`mb-5 stroke-1 transition-colors ${data.platform === 'youtube' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
<span className="text-xl font-bold tracking-tight">YouTube</span>
<span className="text-sm opacity-75 mt-2 font-medium">Shorts / Video</span>
<span className="text-xl font-bold tracking-tight">{UI_TEXT.stepPlatform.youtube.title}</span>
<span className="text-sm opacity-75 mt-2 font-medium">{UI_TEXT.stepPlatform.youtube.desc}</span>
</button>
<button
@@ -57,8 +59,8 @@ const StepPlatform: React.FC<StepPlatformProps> = ({ data, updateData, nextStep
}`}
>
<Activity size={48} className={`mb-5 stroke-1 transition-colors ${data.platform === 'strava' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
<span className="text-xl font-bold tracking-tight">Strava</span>
<span className="text-sm opacity-75 mt-2 font-medium">Activity / Photos</span>
<span className="text-xl font-bold tracking-tight">{UI_TEXT.stepPlatform.strava.title}</span>
<span className="text-sm opacity-75 mt-2 font-medium">{UI_TEXT.stepPlatform.strava.desc}</span>
</button>
</div>
</div>
@@ -66,4 +68,4 @@ const StepPlatform: React.FC<StepPlatformProps> = ({ data, updateData, nextStep
);
};
export default StepPlatform;
export default StepPlatform;

57
components/StepResult.tsx
View File

@@ -3,33 +3,18 @@ import React, { useState } from 'react';
import { GeneratedContent, WizardState } from '../types';
import { Copy, Check, Instagram, Image as ImageIcon, MessageSquare, Edit2, RefreshCw, X } from 'lucide-react';
import TripMap from './TripMap';
import { UI_TEXT } from '../_EDITABLE_CONFIG/ui_text';
interface StepResultProps {
interface ExtendedStepResultProps {
content: GeneratedContent;
onRegenerate: (slideCount: number, feedback: string) => void;
isRegenerating: boolean;
// We need to access the wizard state to check for trip data
// But standard props here only have content.
// Ideally, StepResult should receive `data` too, but for now I'll check if I can pass it from App.tsx or infer it.
// Wait, I can't access `data` unless I modify App.tsx to pass it to StepResult.
// Let's assume the parent updates the props.
// Actually, I'll modify the StepResultProps in this file, but I also need to modify App.tsx to pass 'data'.
// However, looking at App.tsx, StepResult is rendered inside App.tsx. I can pass `data` there easily.
// But wait, the previous code block for StepResult didn't show 'data' in props.
// I will add `tripData` to the props.
}
// Extending interface to include tripData optionally passed from parent
// Note: I will update App.tsx to pass this prop.
interface ExtendedStepResultProps extends StepResultProps {
tripData?: WizardState['tripData'];
tripData?: WizardState['tripData'];
}
const StepResult: React.FC<ExtendedStepResultProps> = ({ content, onRegenerate, isRegenerating, tripData }) => {
const [copiedSection, setCopiedSection] = useState<string | null>(null);
const [copiedSlideIndex, setCopiedSlideIndex] = useState<number | null>(null);
// Edit Mode State
const [isEditing, setIsEditing] = useState(false);
const [slideCount, setSlideCount] = useState(content.slides.length || 12);
const [feedback, setFeedback] = useState("");
@@ -48,16 +33,15 @@ const StepResult: React.FC<ExtendedStepResultProps> = ({ content, onRegenerate,
const handleApplyChanges = () => {
onRegenerate(slideCount, feedback);
setIsEditing(false); // Close edit panel on submit, assumes success or loading state handles visual feedback
setIsEditing(false);
};
return (
<div className="space-y-12 animate-fade-in pb-20 relative">
{/* Top Header with Edit Button */}
<div className="text-center max-w-2xl mx-auto relative">
<h2 className="text-4xl font-bold tracking-tight text-gray-900 mb-3">Twój Vibe Gotowy! 🎉</h2>
<p className="text-gray-500 text-lg mb-6">Oto kompletna struktura Twojego posta. Skopiuj i publikuj.</p>
<h2 className="text-4xl font-bold tracking-tight text-gray-900 mb-3">{UI_TEXT.stepResult.title}</h2>
<p className="text-gray-500 text-lg mb-6">{UI_TEXT.stepResult.subtitle}</p>
{!isEditing && !isRegenerating && (
<button
@@ -65,25 +49,24 @@ const StepResult: React.FC<ExtendedStepResultProps> = ({ content, onRegenerate,
className="inline-flex items-center space-x-2 text-sm font-bold text-gray-600 bg-gray-100 hover:bg-gray-200 px-5 py-2.5 rounded-full transition-colors"
>
<Edit2 size={16} />
<span>Edytuj / Popraw</span>
<span>{UI_TEXT.stepResult.editBtn}</span>
</button>
)}
</div>
{/* Edit Panel (Conditional) */}
{(isEditing || isRegenerating) && (
<div className="bg-white border-2 border-[#EA4420]/20 rounded-xl p-6 shadow-sm mb-10 animate-fade-in relative overflow-hidden">
{isRegenerating && (
<div className="absolute inset-0 bg-white/80 z-10 flex flex-col items-center justify-center backdrop-blur-[1px]">
<RefreshCw size={32} className="text-[#EA4420] animate-spin mb-3" />
<p className="font-bold text-gray-800">Nanuszę poprawki...</p>
<p className="font-bold text-gray-800">{UI_TEXT.stepResult.editPanel.regenerating}</p>
</div>
)}
<div className="flex justify-between items-start mb-6">
<h3 className="text-xl font-bold text-gray-900 flex items-center gap-2">
<Edit2 size={20} className="text-[#EA4420]" />
Wprowadź poprawki
{UI_TEXT.stepResult.editPanel.title}
</h3>
{!isRegenerating && (
<button onClick={() => setIsEditing(false)} className="text-gray-400 hover:text-gray-600">
@@ -93,10 +76,9 @@ const StepResult: React.FC<ExtendedStepResultProps> = ({ content, onRegenerate,
</div>
<div className="space-y-6">
{/* Slider */}
<div>
<label className="flex justify-between text-sm font-bold text-gray-700 mb-3">
<span>Liczba slajdów / Elementów</span>
<span>{UI_TEXT.stepResult.editPanel.slidesLabel}</span>
<span className="text-[#EA4420]">{slideCount}</span>
</label>
<input
@@ -113,50 +95,46 @@ const StepResult: React.FC<ExtendedStepResultProps> = ({ content, onRegenerate,
</div>
</div>
{/* Feedback Textarea */}
<div>
<label className="block text-sm font-bold text-gray-700 mb-2">Co chcesz zmienić w treści?</label>
<label className="block text-sm font-bold text-gray-700 mb-2">{UI_TEXT.stepResult.editPanel.feedbackLabel}</label>
<textarea
value={feedback}
onChange={(e) => setFeedback(e.target.value)}
placeholder="np. Zmień 'ból szczęki' na 'ból głowy'. Dodaj więcej emoji w slajdzie nr 3. Zrób bardziej agresywny wstęp."
placeholder={UI_TEXT.stepResult.editPanel.feedbackPlaceholder}
rows={3}
className="w-full border border-gray-200 rounded-md p-3 text-sm focus:ring-1 focus:ring-[#EA4420] focus:border-[#EA4420] outline-none"
/>
</div>
{/* Action Buttons */}
<div className="flex justify-end pt-2">
<button
onClick={handleApplyChanges}
className="bg-[#EA4420] text-white px-6 py-3 rounded-md font-bold hover:bg-[#d63b1a] transition-colors flex items-center gap-2"
>
<RefreshCw size={18} />
Zastosuj poprawki
{UI_TEXT.stepResult.editPanel.applyBtn}
</button>
</div>
</div>
</div>
)}
{/* TRIP MAP (IF APPLICABLE) */}
{tripData && tripData.startPoint && (
<TripMap tripData={tripData} />
)}
{/* Caption Section */}
<div className="bg-white rounded-md border border-gray-200 overflow-hidden">
<div className="bg-gray-50 px-8 py-5 border-b border-gray-200 flex justify-between items-center">
<div className="flex items-center space-x-3 text-gray-900">
<MessageSquare size={20} className="text-[#EA4420]" />
<span className="font-bold">Post Caption (Opis)</span>
<span className="font-bold">{UI_TEXT.stepResult.captionTitle}</span>
</div>
<button
onClick={() => copyToClipboard(content.caption, 'caption')}
className="flex items-center space-x-2 text-sm font-semibold text-[#EA4420] hover:text-[#d63b1a] transition-colors bg-white border border-gray-200 px-4 py-2 rounded-md hover:bg-gray-50"
>
{copiedSection === 'caption' ? <Check size={16} /> : <Copy size={16} />}
<span>{copiedSection === 'caption' ? 'Skopiowano!' : 'Kopiuj'}</span>
<span>{copiedSection === 'caption' ? UI_TEXT.stepResult.copied : UI_TEXT.stepResult.copy}</span>
</button>
</div>
<div className="p-8 text-gray-700 whitespace-pre-wrap font-sans text-base leading-relaxed">
@@ -164,11 +142,10 @@ const StepResult: React.FC<ExtendedStepResultProps> = ({ content, onRegenerate,
</div>
</div>
{/* Slides Grid */}
<div>
<div className="flex items-center space-x-3 text-gray-900 mb-8 px-1">
<ImageIcon size={28} className="text-[#EA4420]" />
<h3 className="text-2xl font-bold tracking-tight">Struktura Wizualna (Slajdy / Zdjęcia)</h3>
<h3 className="text-2xl font-bold tracking-tight">{UI_TEXT.stepResult.slidesTitle}</h3>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -186,7 +163,7 @@ const StepResult: React.FC<ExtendedStepResultProps> = ({ content, onRegenerate,
<button
onClick={() => copySlideText(slide.overlay_text, idx)}
className="text-gray-300 hover:text-[#EA4420] transition-colors"
title="Kopiuj tekst"
title={UI_TEXT.stepResult.copy}
>
{copiedSlideIndex === idx ? <Check size={14} className="text-green-500" /> : <Copy size={14} />}
</button>

27
components/StepToneGoal.tsx
View File

@@ -1,6 +1,8 @@
import React from 'react';
import { WizardState, Tone, Goal } from '../types';
import { Laugh, Brain, Zap, MessageCircle, Share2, ShoppingBag } from 'lucide-react';
import { UI_TEXT } from '../_EDITABLE_CONFIG/ui_text';
interface StepToneGoalProps {
data: WizardState;
@@ -21,15 +23,15 @@ const StepToneGoal: React.FC<StepToneGoalProps> = ({ data, updateData, nextStep
const isComplete = data.tone && data.goal;
const tones: { id: Tone; label: string; desc: string; icon: React.ReactNode }[] = [
{ id: 'funny', label: 'Luzak', desc: 'Humor, dystans, memy', icon: <Laugh size={32} /> },
{ id: 'serious', label: 'Ekspert', desc: 'Konkrety, wiedza, liczby', icon: <Brain size={32} /> },
{ id: 'inspirational', label: 'Mentor', desc: 'Emocje, głębia, lekcja', icon: <Zap size={32} /> },
{ id: 'funny', label: UI_TEXT.stepToneGoal.tones.funny.label, desc: UI_TEXT.stepToneGoal.tones.funny.desc, icon: <Laugh size={32} /> },
{ id: 'serious', label: UI_TEXT.stepToneGoal.tones.serious.label, desc: UI_TEXT.stepToneGoal.tones.serious.desc, icon: <Brain size={32} /> },
{ id: 'inspirational', label: UI_TEXT.stepToneGoal.tones.inspirational.label, desc: UI_TEXT.stepToneGoal.tones.inspirational.desc, icon: <Zap size={32} /> },
];
const goals: { id: Goal; label: string; desc: string; icon: React.ReactNode }[] = [
{ id: 'engagement', label: 'Społeczność', desc: 'Komentarze i dyskusja', icon: <MessageCircle size={32} /> },
{ id: 'viral', label: 'Zasięg', desc: 'Udostępnienia (Share)', icon: <Share2 size={32} /> },
{ id: 'sales', label: 'Sprzedaż', desc: 'Kliknięcie w link / Zakup', icon: <ShoppingBag size={32} /> },
{ id: 'engagement', label: UI_TEXT.stepToneGoal.goals.engagement.label, desc: UI_TEXT.stepToneGoal.goals.engagement.desc, icon: <MessageCircle size={32} /> },
{ id: 'viral', label: UI_TEXT.stepToneGoal.goals.viral.label, desc: UI_TEXT.stepToneGoal.goals.viral.desc, icon: <Share2 size={32} /> },
{ id: 'sales', label: UI_TEXT.stepToneGoal.goals.sales.label, desc: UI_TEXT.stepToneGoal.goals.sales.desc, icon: <ShoppingBag size={32} /> },
];
return (
@@ -37,8 +39,8 @@ const StepToneGoal: React.FC<StepToneGoalProps> = ({ data, updateData, nextStep
{/* Sekcja 1: TON */}
<div>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Ton (Vibe)</h2>
<p className="text-gray-500 mb-6 text-lg">Jak chcesz brzmieć?</p>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">{UI_TEXT.stepToneGoal.toneTitle}</h2>
<p className="text-gray-500 mb-6 text-lg">{UI_TEXT.stepToneGoal.toneSubtitle}</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{tones.map((t) => (
@@ -63,8 +65,8 @@ const StepToneGoal: React.FC<StepToneGoalProps> = ({ data, updateData, nextStep
{/* Sekcja 2: CEL */}
<div>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Cel</h2>
<p className="text-gray-500 mb-6 text-lg">Co chcesz osiągnąć tym postem?</p>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">{UI_TEXT.stepToneGoal.goalTitle}</h2>
<p className="text-gray-500 mb-6 text-lg">{UI_TEXT.stepToneGoal.goalSubtitle}</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{goals.map((g) => (
@@ -87,14 +89,13 @@ const StepToneGoal: React.FC<StepToneGoalProps> = ({ data, updateData, nextStep
</div>
</div>
{/* Next Button */}
<div className="flex justify-end pt-4">
<button
onClick={nextStep}
disabled={!isComplete}
className="bg-[#EA4420] text-white px-8 py-3 rounded-md font-bold hover:bg-[#d63b1a] transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-md"
>
Przejdź do szczegółów
{UI_TEXT.stepToneGoal.nextBtn}
</button>
</div>
@@ -102,4 +103,4 @@ const StepToneGoal: React.FC<StepToneGoalProps> = ({ data, updateData, nextStep
);
};
export default StepToneGoal;
export default StepToneGoal;