# Pages Template System

This directory contains a template system for creating consistent Gradio pages that load and display apps from the `apps` directory.

## Architecture

- `__init__.py`: Contains the `BasePage` class and helper functions
- `apps.py`: Main apps page using the template
- `example.py`: Example showing how to create custom pages

## Creating a New Page

To create a new page, follow these steps:

1. Create a new Python file in the `pages` directory (e.g., `my_page.py`)
2. Import and extend the `BasePage` class
3. Implement the required abstract methods
4. Provide a mandatory `page_name` parameter when creating the page instance
5. Optionally specify a custom `apps_dir` parameter

### Example:

```python
import gradio as gr
from . import BasePage
from typing import Dict

class MyPage(BasePage):
    """Custom page for specific functionality."""
    
    def get_page_title(self) -> str:
        return "My Custom Page"
    
    def get_page_theme(self) -> gr.Theme:
        return gr.themes.Ocean()
    
    # Optional: Add custom content before tabs
    def create_additional_content(self) -> None:
        gr.Markdown("## Custom content goes here")
    
    # Optional: Filter which apps to show
    def filter_apps(self, app_configs: Dict[str, any]) -> Dict[str, any]:
        # Return only apps you want to display
        return {k: v for k, v in app_configs.items() if k in ['app1', 'app2']}

# Create the page
my_page = MyPage("my_page")  # page_name is mandatory
# Or specify custom apps directory:
# my_page = MyPage("my_page", "custom_apps")
app = my_page.create_page()
```

## BasePage Methods

### Required Methods (Abstract)
- `get_page_title()`: Return the page title
- `get_page_theme()`: Return a Gradio theme

### Optional Methods (Can Override)
- `create_additional_content()`: Add content before the tabs
- `filter_apps(app_configs)`: Filter which apps to display
- `create_home_tab(app_configs)`: Customize the home tab
- `create_app_tab(app_id, app_config)`: Customize individual app tabs

## Multiple Apps Directories

The template system supports multiple apps directories, allowing you to organize apps by category or functionality:

```
.devcontainer/core/gradio/
├── apps/                    # Default apps directory
│   ├── configs/
│   │   └── apps.yaml
│   ├── winget.py
│   └── configure.py
├── dashboard_apps/          # Custom apps directory
│   ├── configs/
│   │   └── apps.yaml
│   ├── analytics.py
│   └── reports.py
└── pages/
    ├── apps.py             # Uses "apps" directory
    └── dashboard.py        # Uses "dashboard_apps" directory
```

### Configuration Structure

Each apps directory should have its own `configs/apps.yaml` file:

```yaml
# apps/configs/apps.yaml
apps:
  winget:
    title: Winget
    icon: 🪟
    description: Install winget packages
    enabled: true

# dashboard_apps/configs/apps.yaml  
apps:
  analytics:
    title: Analytics
    icon: 📊
    description: View analytics data
    enabled: true
```

### Helper Functions Auto-Detection

The `load()` and `cache_dir()` functions automatically detect which apps directory they're called from:

- App in `apps/winget.py` → uses `apps/configs/apps.yaml` → cache in `~/.spikingneurons/.core/apps/winget/`
- App in `dashboard_apps/analytics.py` → uses `dashboard_apps/configs/apps.yaml` → cache in `~/.spikingneurons/.core/dashboard_apps/analytics/`

## Benefits of This Template

1. **Consistency**: All pages have the same structure and behavior
2. **Reusability**: Common code is centralized in `BasePage`
3. **Flexibility**: Easy to customize individual pages
4. **Maintainability**: Changes to common functionality only need to be made in one place
5. **Extensibility**: New pages can be created quickly using the template

## Constructor Parameters

The `BasePage` constructor accepts the following parameters:

- `page_name` (required): The name of the page, used as identifier
- `apps_dir` (optional): Directory name for apps. If not provided, uses `page_name` as the apps directory

### Examples:

```python
# Use default apps directory (same as page_name)
page = MyPage("my_page")  # Will look for apps in "my_page" directory

# Use custom apps directory  
page = MyPage("dashboard", "apps")  # Will look for apps in "apps" directory
```
