196 lines
7.6 KiB
Markdown
196 lines
7.6 KiB
Markdown
# 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:
|
|
|
|
```tsx
|
|
{/* 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):
|
|
|
|
```tsx
|
|
// Place interaction handlers
|
|
const onPlaceClick = (placeId: string) => {
|
|
setSelectedPlaceId(placeId);
|
|
onPlaceClick(placeId);
|
|
};
|
|
|
|
const onPlaceHover = (placeId: string | null) => {
|
|
setHoveredPlaceId(placeId);
|
|
onPlaceHover(placeId);
|
|
};
|
|
```
|