7.6 KiB
7.6 KiB
TripPlanner Layout Replacement Guide
Lines to Replace: 1008-1320 (Main Content Section)
Replace the section starting with:
{/* Main Content */}
<div className="flex-1 flex overflow-hidden">
{/* Left Panel - Timeline & Explore (60%) */}
With the new 3-panel layout below:
{/* Main Content - NEW 3-PANEL LAYOUT */}
<div className="flex-1 flex overflow-hidden">
{/* LEFT PANEL - Day Selector (Narrow) - Desktop Only */}
<div className={cn(
"w-20 md:w-24 border-r bg-muted/30 hidden lg:block",
activeTab === 'map' && "hidden"
)}>
<DaySelector
days={trip.days || []}
activeDayId={activeDayId}
onDaySelect={(dayId) => {
setActiveDayId(dayId);
setSelectedPlaceId(null);
setHoveredPlaceId(null);
}}
/>
</div>
{/* MOBILE - Horizontal Day Selector */}
<div className="lg:hidden w-full">
<MobileDaySelector
days={trip.days || []}
activeDayId={activeDayId}
onDaySelect={(dayId) => {
setActiveDayId(dayId);
setSelectedPlaceId(null);
setHoveredPlaceId(null);
}}
/>
</div>
{/* CENTER PANEL - Timeline (Main Work Area) */}
<div className={cn(
"flex-1 bg-background overflow-hidden",
activeTab === 'map' && "hidden lg:block"
)}>
<ScrollArea className="h-full">
<div className="p-4 lg:p-6 space-y-6">
{/* Empty State: No Days */}
{!trip.days || trip.days.length === 0 ? (
<EmptyState type="no-days" />
) : !activeDayId ? (
<EmptyState type="no-active-day" />
) : (
<>
{/* Active Day Header */}
{(() => {
const activeDay = trip.days.find((d: any) => d.id === activeDayId);
if (!activeDay) return null;
return (
<>
<Card className="rounded-2xl border-2 border-primary/20 bg-primary/5">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div>
<h2 className="text-2xl font-bold mb-1">
Gün {activeDay.dayNumber} - {activeDay.dayName}
</h2>
<p className="text-sm text-muted-foreground">{activeDay.date}</p>
</div>
<AddPlaceSheet
dayNumber={activeDay.dayNumber}
searchQuery={searchQuery}
searchResults={searchResults}
isSearching={isSearching}
onSearchChange={handleSearchPlaces}
onAddPlace={handleAddPlaceToDay}
trigger={
<Button size="lg" className="rounded-full">
<Plus className="h-5 w-5 mr-2" />
Yer Ekle
</Button>
}
/>
</div>
</CardContent>
</Card>
{/* Timeline Content */}
{activeDay.places && activeDay.places.length > 0 ? (
<div className="space-y-6">
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragStart={handleDragStart}
onDragEnd={handleDragEnd}
onDragCancel={handleDragCancel}
>
<SortableContext
items={activeDay.places.map((p: any) => p.tripPlaceId)}
strategy={verticalListSortingStrategy}
>
<div className="space-y-4">
{activeDay.places.map((place: any, index: number) => (
<TimelinePlace
key={place.tripPlaceId}
place={place}
isHovered={hoveredPlaceId === place.id}
isSelected={selectedPlaceId === place.id}
onPlaceClick={onPlaceClick}
onPlaceHover={onPlaceHover}
onRemove={handleRemovePlace}
placeRefs={placeRefs}
orderNumber={index + 1}
/>
))}
</div>
</SortableContext>
<DragOverlay>
{activeId ? (
<div className="p-4 rounded-xl bg-card border-2 border-primary shadow-2xl">
Sürükleniyor...
</div>
) : null}
</DragOverlay>
</DndContext>
{/* AI Suggestions */}
<AISuggestions
suggestions={[]}
onAddSuggestion={(id) => console.log('Add suggestion:', id)}
onDismissSuggestion={(id) => console.log('Dismiss:', id)}
dayNumber={activeDay.dayNumber}
/>
</div>
) : (
<EmptyState
type="no-places"
dayNumber={activeDay.dayNumber}
onAction={() => {
// Open add place sheet
}}
/>
)}
</>
);
})()}
</>
)}
</div>
</ScrollArea>
</div>
{/* RIGHT PANEL - Map (Helper) */}
<div className={cn(
"w-full lg:w-[40%] bg-muted relative",
activeTab === 'timeline' && "hidden lg:block"
)}>
<GoogleMap
places={activeDayMapPlaces}
className="w-full h-full"
hoveredPlaceId={hoveredPlaceId}
selectedPlaceId={selectedPlaceId}
activeDayId={activeDayId}
onMarkerClick={handleMarkerClick}
onMarkerHover={handleMarkerHover}
showPolyline={true}
/>
</div>
</div>
Additional Helper Functions Needed
Add these after the existing helper functions (around line 800):
// Place interaction handlers
const onPlaceClick = (placeId: string) => {
setSelectedPlaceId(placeId);
onPlaceClick(placeId);
};
const onPlaceHover = (placeId: string | null) => {
setHoveredPlaceId(placeId);
onPlaceHover(placeId);
};