Open pages without geo data in a separate fullscreen route

[Copilot]

Problem

Currently, all pages open with the map view visible regardless of whether they have geographic coordinates. Pages without geo data would benefit from opening in fullscreen mode to maximize content visibility, since there's nothing to show on the map.

Solution

This PR implements a route-based approach to handle pages without geographic data by creating a separate fullscreen route outside of the map layout:

• Pages with geo data: Continue to open at /main/explore/page/[pageId] with map view and automatically zoom to the coordinates
• Pages without geo data: Redirect to /main/explore/page-fullscreen/[pageId] which displays content without the map layout

Implementation Details

1. Created Shared Components (app/main/explore/_shared/)

To eliminate code duplication, common logic has been extracted into reusable components:

• page-content.tsx - Shared page content and section cards with configurable base paths
• scroll-container.tsx - Conditional scroll view wrapper (uses BottomSheetScrollView for map layout, ScrollView for fullscreen)
• use-section-bookmarks.ts - Shared bookmark management logic

2. Created New Fullscreen Route (app/main/explore/page-fullscreen/[pageId]/)

A separate route structure for pages without geographic data that reuses shared components:

• _layout.tsx - Simple Stack layout with fullscreen mode enabled
• index.tsx - Main fullscreen page component using shared PageContent
• section/[title].tsx - Section view using shared ScrollContainer and bookmark logic

3. Refactored Existing Page Route

Both the regular page route and fullscreen route now use the same shared components:

• _page-root-view.tsx - Simplified to use ScrollContainer and PageContent
• section/[title].tsx - Simplified to use ScrollContainer and useSectionBookmarks
• index.tsx - Added redirect logic to route to fullscreen when no geo data detected

const hasGeo = 
  pageQuery.data.properties.geo &&
  pageQuery.data.properties.geo["1"] &&
  pageQuery.data.properties.geo["2"];

if (!hasGeo) {
  return <Redirect href={`/main/explore/page-fullscreen/${pageId}`} />;
}

Architecture Benefits

• Clean Separation: Map layout and fullscreen content are completely separate routes
• No Code Duplication: Shared components eliminate ~75 lines of duplicated code
• Better Performance: No map rendering overhead for pages without geo data
• Clearer Intent: Route structure explicitly shows which pages use maps vs fullscreen
• Easier Maintenance: Shared components are maintained in one place, reducing maintenance burden

Benefits

• Improved user experience for pages without geographic data
• Content is immediately visible without the map layout
• Seamless navigation between pages with different geo data availability
• No breaking changes to existing functionality
• Cleaner code architecture with better separation of concerns and minimal duplication

Fixes #52

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Open Page in full screen mode if it has no geo data.</issue_title>
<issue_description>Currently a page is opened normally with the map view where isFullscreen defaults to false and then zooms to the coords found in geo.

It would be great to open pages that don't have that with isFullscreen on.</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #52

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[bcye]

This isn't a nice solution. How about making full screen mode it's own route, outside of the map _layout and navigating to that when full screen should be used

[bcye]

@copilot can you implement the changes requested in my review?

[Copilot]

@copilot can you implement the changes requested in my review?

Done! I've refactored the implementation to use a separate fullscreen route as you requested (commit 0673701).

Changes:

• Reverted the previous state-based fullscreen approach
• Created new /main/explore/page-fullscreen/[pageId] route for pages without geo data
• This route has its own layout without the map component
• The main page route now redirects to the fullscreen route when no geo data is detected
• Both routes maintain full functionality including sections and bookmarks

The fullscreen mode is now a completely separate route outside the map layout, as suggested.

[bcye]

@copilot this looks incredibly duplicated. Make a good effort.

[Copilot]

@copilot this looks incredibly duplicated. Make a good effort.

Refactored to eliminate duplication (commit d137bcd).

Changes:

• Created _shared/ directory with reusable components:
  • page-content.tsx - Shared page content and section cards
  • scroll-container.tsx - Conditional scroll view wrapper
  • use-section-bookmarks.ts - Shared bookmark logic
• Both regular and fullscreen routes now use the same components
• Reduced codebase by ~75 lines (from 503 to 428 lines)
• Fullscreen files are now minimal wrappers that configure the shared components

The duplication is eliminated while maintaining clean separation between map and fullscreen routes.