Skip to content

UNIFIED_REPO_INTERFACE_SUMMARY.md

Latest commit

 

History

History
164 lines (134 loc) · 5.61 KB

UNIFIED_REPO_INTERFACE_SUMMARY.md

File metadata and controls

164 lines (134 loc) · 5.61 KB

Unified Repository Interface with Auto-Universe Creation

Summary

Unified the two repository import flows into one component (RepositorySelectionModal) and added the ability to create a new repository + universe in one step with auto-naming.

What Was Already There

Both flows already used the same RepositorySelectionModal component:

  1. Load → From Repository (import mode) - Creates a new universe from a repo
  2. Add Repository (attach mode) - Links a repo to an existing universe

The modal already had a "+ New Repo" button that could create repositories on GitHub.

What We Added

1. Auto-Create Universe When Creating New Repo (Import Mode)

File: src/components/modals/RepositorySelectionModal.jsx

When in import mode and user clicks "+ New Repo & Universe":

  • Creates the GitHub repository
  • Auto-generates a universe name from the repo name (e.g., "my-cool-project" → "My Cool Project")
  • Creates a local universe with that name
  • Links the universe to the new repository
  • Switches to the new universe
  • Closes the modal

Key Features:

  • Universe name is auto-generated by capitalizing and replacing hyphens with spaces
  • Repository slug becomes the universe slug
  • The universe is immediately linked to Git as source of truth
  • User is switched to the newly created universe

2. Enhanced UI with Better Labeling

File: src/components/modals/RepositorySelectionModal.jsx

"+ New Repo" Button:

  • Now red-themed (#7A0000 background) to match app style
  • Better padding and styling (4px 8px)
  • Dynamic label based on intent:
    • Import mode: "New Repo & Universe"
    • Attach mode: "New Repo"

"Create" Button:

  • Red-themed (#7A0000 background)
  • Better padding (6px 12px)
  • Disabled when repo name is empty
  • Dynamic label based on intent:
    • Import mode: "Create Repo & Universe"
    • Attach mode: "Create Repository"

3. Backend Support for New Universe Creation

File: src/services/universeBackend.js

Updated linkToDiscoveredUniverse() to handle the isNew flag:

  • When discoveredUniverse.isNew is true:
    1. Creates a new local universe
    2. Configures it with Git settings
    3. Sets Git as source of truth
    4. Sets up Git sync engine
    5. Switches to the new universe
    6. Shows success notification

User Workflows

Workflow 1: Create New Repo + Universe

  1. Click "Load" in Universes header
  2. Select "From Repository"
  3. Click "+ New Repo & Universe" button
  4. Enter repository name (e.g., "my-project")
  5. Choose public/private
  6. Click "Create Repo & Universe"
  7. ✨ Magic happens:
    • GitHub repo "my-project" is created
    • Local universe "My Project" is created
    • Universe is linked to the repo
    • You're switched to the new universe
    • Ready to start working!

Workflow 2: Link Existing Repo to New Universe

  1. Click "Load" in Universes header
  2. Select "From Repository"
  3. Browse your repositories
  4. Click a repo to expand it
  5. Select a universe file to import
  6. Universe is created and linked

Workflow 3: Link Repo to Existing Universe

  1. Open an existing universe
  2. In Storage section, click "Add Repository"
  3. Browse and select a repository
  4. Link it to the current universe

Technical Details

Auto-Naming Logic

const universeName = trimmedName.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
// "my-cool-project" → "My Cool Project"
// "data-analysis" → "Data Analysis"

Discovered Universe Object Structure

{
  name: "My Project",           // Auto-generated display name
  slug: "my-project",           // Repo name as slug
  repo: {
    user: "username",
    repo: "my-project"
  },
  isNew: true                   // Flag to trigger universe creation
}

Universe Configuration

  • Source of Truth: Git (repository)
  • Local File: Disabled (using Git)
  • Git Repo: Enabled and linked
  • Metadata: Includes createdWithRepo timestamp

Benefits

  1. Streamlined Workflow: Create repo + universe in one step
  2. Consistent Naming: Auto-naming ensures universe name matches repo
  3. One Interface: Both import and attach flows use the same well-styled modal
  4. Clear Intent: Button labels change based on context
  5. Git-First: New universes are immediately set up with Git as source of truth
  6. Auto-Switch: User is automatically switched to the new universe
  7. Visual Consistency: Red-themed buttons match the app's design language

Testing Checklist

  • Create new repo in import mode creates universe
  • Universe name is properly formatted from repo name
  • Universe is linked to repository
  • Git is set as source of truth
  • User is switched to new universe
  • Modal closes after creation
  • Button labels change based on intent
  • Buttons are red-themed (#7A0000)
  • Create button is disabled when name is empty
  • Existing repo import still works
  • Attach mode still works for existing universes
  • No linting errors

Files Modified

  1. src/components/modals/RepositorySelectionModal.jsx

    • Enhanced handleCreateRepository() to create universe in import mode
    • Updated button styling to red theme
    • Added dynamic button labels based on intent

  2. src/services/universeBackend.js

    • Updated linkToDiscoveredUniverse() to handle isNew flag
    • Added logic to create universe locally before linking
    • Added auto-switching to new universe

Future Enhancements

  • Add template selection when creating universe
  • Allow customizing universe name before creation
  • Support importing from other sources (GitLab, Bitbucket)
  • Add universe visibility settings (public/private)
  • Batch create multiple universes from multiple repos