📄 Pages Management System

The GoGrab Space Editor provides a comprehensive page management system that supports three distinct page scopes: Space, Universe, and Global. This guide covers how to create, edit, manage, and understand the differences between each page type.

🎯 Overview

Pages in GoGrab Space are the building blocks of your platform. Each page contains widgets, layouts, and configurations that define what users see and interact with. The page management system is accessible through the Pages tab in the editor's right sidebar.

Quick Access

• Location: Editor → Right Sidebar → "Pages" Tab
• Component: PageBrowserComponent
• Backend API: POST/GET/PUT/DELETE /api/spaces/:spaceId/space-pages

📊 Page Scope Types

graph TD
    A[Pages] --> B[📄 Space Pages]
    A --> C[📦 Universe Pages]
    A --> D[🌐 Global Pages]

    B --> B1[User-created]
    B --> B2[Reusable within your space]
    B --> B3[Stored in space_pages collection]

    C --> C1[Bound to specific universe]
    C --> C2[Part of universe module tree]
    C --> C3[Stored in universe.modules]

    D --> D1[Pre-made templates]
    D --> D2[Created by GoGrab team]
    D --> D3[Available to all users]

    style B fill:#3b82f6,color:#fff
    style C fill:#8b5cf6,color:#fff
    style D fill:#10b981,color:#fff

📄 Space Pages (Blue)

Icon: 📄 | Color: Blue (#3b82f6)

Space pages are user-created pages that can be reused across multiple universes within your space.

When to use Space Pages:

• Creating a layout you want to use in multiple universes
• Building reusable components like headers, footers, or navigation
• Designing template pages for consistent branding

📦 Universe Pages (Purple)

Icon: 📦 | Color: Purple (#8b5cf6)

Universe pages are bound to a specific universe and are part of that universe's module tree.

When to use Universe Pages:

• Building pages specific to one project/universe
• Creating unique content that doesn't need to be shared
• Pages that depend on universe-specific data or modules

🌐 Global Pages (Green)

Icon: 🌐 | Color: Green (#10b981)

Global pages are pre-made templates created by the GoGrab team, available to all users.

Note: Global pages are a future feature. Currently, the tab shows a count of 0.

🛠️ How to Create Pages

Creating a Space Page

1. Open the Editor

   • Navigate to your space
   • Open the editor for any universe or the space dashboard

2. Access the Pages Tab

   • Click on the "Pages" tab in the right sidebar
   • You'll see the scope filter tabs: All | Space | Universe | Global

3. Click "Create Page"

   • Click the + button in the header
   • Or click "Create your first page" if no pages exist

4. Configure Your Page

   • The page will be created with default settings
   • Use the inline title editor in the toolbar to rename it
   • Click the settings icon (⚙️) to edit metadata (slug, description, status)

5. Add Widgets

   • Drag widgets from the left sidebar onto the canvas
   • Configure widget properties in the properties panel

6. Save

   • Click "Save" in the toolbar dropdown
   • The page is automatically saved to space_pages collection

Creating a Universe Page

1. Navigate to a Universe

   • Open a specific universe from your space

2. Open the Editor

   • The editor will detect you're in a universe context

3. Create Page

   • When creating a page while in a universe, it will be scoped to that universe
   • The page becomes part of the universe's module tree

✏️ How to Edit Pages

Editing Page Title (Inline)

The page title can be edited directly in the toolbar:

┌─────────────────────────────────────────────────────────┐
│ [📄] My Page Title  [✏️]  [📦 Universe: my-universe]    │
└─────────────────────────────────────────────────────────┘

1. Click on the title in the toolbar
2. Type the new title
3. Press Enter or click away to save
4. Changes are immediately persisted to MongoDB

Editing Page Settings

For more detailed editing (slug, description, status, tags):

1. Click the settings icon (⚙️) next to the title

   • Or click the edit button (✏️) on a page in the browser

2. The Page Settings Modal opens with:

   • Title: Page display name
   • Slug: URL-friendly identifier (e.g., my-page)
   • Description: Brief description for SEO and search
   • Status: Draft, Published, Archived, or Review
   • Tags: Categorization tags

3. Click Save to persist changes

Page Status Options

🔍 How to Browse & Select Pages

Using the Page Browser

The Page Browser component provides a comprehensive view of all pages:

┌─────────────────────────────────────────────────────┐
│ 📄 Pages                                    [+]     │
├─────────────────────────────────────────────────────┤
│ 🔍 Search pages...                                  │
├─────────────────────────────────────────────────────┤
│ [All 5] [📄 Space 3] [📦 Universe 2] [🌐 Global 0] │
├─────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────┐ │
│ │ [📄] Homepage           [PUBLISHED]             │ │
│ │      /homepage                                  │ │
│ │                                   [↗️][✏️][🗑️] │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ [📦] Product Page       [DRAFT]                 │ │
│ │      /product                                   │ │
│ │      my-universe                                │ │
│ │                                   [↗️][✏️][🗑️] │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ [🌐] Landing Template   [PUBLISHED]             │ │
│ │      /landing-template                          │ │
│ │                                   [↗️][ℹ️]      │ │
│ └─────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────┤
│ 5 of 5 pages                              [🔄]      │
└─────────────────────────────────────────────────────┘

Action Buttons

Each page item has action buttons that appear on hover:

Note: Global templates are read-only. You cannot edit or delete them, but you can open them and save as a new Space page.

Filtering by Scope

Click on the scope tabs to filter pages:

• All: Shows all pages regardless of scope
• 📄 Space: Shows only space-scoped pages (blue)
• 📦 Universe: Shows only universe-scoped pages (purple)
• 🌐 Global: Shows only global templates (green)

Searching Pages

Use the search input to filter pages by:

• Page title
• Page slug
• Universe name (for universe pages)

Selecting a Page

Click on any page item to load it into the editor canvas.

Opening Pages via URL

Pages can be accessed directly via URL based on their scope:

Route Parameters:

• {spaceSlug}: Your space's URL-friendly identifier
• {universeId}: The universe ID (for universe-scoped pages)
• {pageId}: The unique page identifier
• ?template=true: Query param indicating read-only template mode

🗑️ How to Delete Pages

From the Page Browser

1. Hover over the page you want to delete
2. Click the delete button (🗑️) on the right
3. Confirm the deletion in the confirmation dialog

Important Notes

• Space pages: Deleted from space_pages collection
• Universe pages: Removed from universe's module tree
• Deletion is permanent - consider archiving instead

🏗️ Technical Architecture

Data Flow

sequenceDiagram
    participant UI as Editor UI
    participant Action as SaveCurrentPageAction
    participant SpaceAPI as SpaceApiService
    participant Backend as Backend API
    participant DB as MongoDB

    UI->>Action: Save page (pageToSave)
    Action->>Action: Detect scope (space vs universe)

    alt Space Page
        Action->>SpaceAPI: saveSpacePage(spaceId, page)
        SpaceAPI->>Backend: PUT /api/spaces/:id/space-pages/:pageId
        Backend->>DB: Update space_<id>.space_pages
    else Universe Page
        Action->>SpaceAPI: saveUniversePage(universeId, page)
        SpaceAPI->>Backend: PUT /api/universes/:id/modules
        Backend->>DB: Update universe.modules[]
    end

    DB-->>UI: Success response

Key Components

Backend Endpoints

MongoDB Collections

// Space pages stored in per-space database
space_<spaceId>.space_pages: [
  {
    _id: "page-123...",
    id: "page-123...",
    title: "My Page",
    slug: "my-page",
    widgets: [...],
    metadata: { scope: "global", isReusable: true },
    spaceId: "space-abc...",
    status: "draft",
    createdAt: "2025-11-25T...",
    updatedAt: "2025-11-25T..."
  }
]

// Universe pages stored in universe document
universes: [
  {
    _id: "universe-456...",
    modules: [
      {
        id: "page-789...",
        type: "page",
        metadata: { scope: "universe" },
        // ... page data
      }
    ]
  }
]

🎨 UI/UX Guidelines

Page Item Card Design

Each page in the browser displays:

1. Scope Indicator (left): Icon showing page type (📄/📦/🌐)
2. Page Info (center):
   • Title (bold, truncates with ellipsis)
   • Status badge (inline with title)
   • Slug (monospace, below title)
   • Universe name (if applicable, purple badge)
3. Actions (right, on hover): Edit and Delete buttons

Color Coding

Status Badge Colors

🔮 Future Enhancements

• Global Templates API: Backend endpoints for GoGrab team templates
• Page Duplication: Copy pages between scopes
• Page Versioning: Track page history and rollback
• Collaborative Editing: Real-time multi-user editing
• Page Analytics: View page performance metrics
• Drag-and-Drop Reordering: Reorder pages in the browser

📚 Related Documentation

• Editor Web Library Overview
• Widget System
• Storage System
• Module Architecture

Last Updated: November 25, 2025 Session ID: 11.25.2.5 Status: ✅ Complete