# 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);
  };
```
