1.4 Pop Interface Structure Guide
To help you quickly understand Pop’s overall layout, this chapter provides a detailed introduction to Pop’s interface structure. Pop uses a modular design consisting of a left sidebar navigation + main workspace + dynamic right panel, allowing users to focus on tasks without distraction.
🧭 1. Left Sidebar Navigation
The left sidebar is the primary entry to all Pop features and includes the following modules:
- Document Center
- Online Documents (Notes / Markdown / Whiteboard / Mind Map)
- Knowledge Base
- AI Copilot (Global AI Assistant)
- Workflows
- App Center
- Website Analytics
- AI Customer Service
- System Settings
The sidebar supports:
- Collapsible navigation
- Icon mode / text mode
- Automatic memory of the last location
💡 You can think of the left sidebar as a “feature map”—all modules start here.
🏞 2. Top Bar
The top bar changes depending on the page but usually contains:
- Page title
- Search bar
- Theme switch (Light / Dark / Auto)
- Language selector
- User menu (Account, Version, Help, etc.)
- Module-specific quick tools
Some modules may also include:
- Run button (e.g., for workflows)
- Filters & query options
- Layout switch buttons
📄 3. Main Workspace
This is the core working area of Pop. Its layout changes depending on the selected module.
Document Center
- Left: Document tree / list
- Center: Document viewer (PDF / Word / PPT, etc.)
- Right: Optional AI Copilot panel or document outline
- Supports zooming, pagination, search, and text highlight
Online Documents
- Markdown / rich-text editor
- Toolbar supports headings, paragraphs, lists, code blocks, etc.
- Whiteboard / mind map provides canvas interactions and draggable nodes
Workflows
- Visual canvas (drag-and-drop nodes)
- Supports zooming, grid alignment, grouping
- Run & debug tools
- View input/output for every node
App Center
- App list
- App runtime interface (layout manager)
- Multi-component responsive layouts
Website Analytics
- Charts dashboard (line, bar, pie, etc.)
- Visitor lists & detail views
- Time-range filters and group analysis
🔎 The main workspace always focuses on the selected module and is where you spend most of your time in Pop.
📌 4. Right Dynamic Panel
The right panel is Pop’s “extended functionality zone,” showing different content based on context.
Common right-panel types:
AI Copilot Panel
- Document Q&A
- Knowledge base Q&A
- Content/code generation
- Context analysis & summaries
Property Panel (Workflows)
- Node info (name, description)
- Input/output parameter definitions
- Variable bindings, default values, validation rules
- AI node prompt configuration & model selection
Run Logs Panel
- Workflow execution logs
- Node execution time
- Error stack traces
- Variable snapshots
App Layout Settings
- Layout sizes (width, height, responsive rules)
- Component attributes (title, ratio, position)
- Style adjustments (background, borders, spacing)
The right panel can be toggled manually or activated automatically when selecting a node or running a workflow.
🧩 5. Status Bar
The bottom area displays global status, including:
- AI service connection
- Save status (saved / unsaved)
- Environment (development / production)
- Version info & update notifications
- Number of running tasks
In some layouts, status information may appear in the top bar instead.
🪟 6. Dialogs & Overlays
Pop uses dialogs for focused tasks and actions, such as:
- File picker
- Create project / create workflow
- Workflow run result preview
- Resource selectors (API resources, knowledge base items, etc.)
- App settings dialogs
All dialogs follow consistent UI guidelines and support both light and dark themes.
✅ Design principle: Dialogs appear only when user focus is needed, avoiding unnecessary interruptions.
🧱 7. Structure Overview Table
A quick comparison of each interface area:
| Area | Main Purpose | Typical Interaction |
|---|---|---|
| Left Sidebar | Select functional modules | Switch to Document Center / Workflows / KB |
| Top Bar | Global & contextual tools | Search, theme switch, run, filter |
| Main Workspace | Execute primary tasks | Read documents, edit workflows, run apps |
| Right Dynamic Panel | Show detailed settings & AI tools | Edit properties, view logs, AI Q&A |
| Status Bar | Display global status | Connection, save status, version, tasks |
| Dialogs | Handle focused actions | Create, import, adjust advanced settings |
🔚 Summary
Pop’s interface design follows these core principles:
- Primary content is centered; secondary content stays on side panels
- AI is always available without interrupting workflows
- Modular and flexible task switching
- Clear and intuitive layout for new users
Once familiar with the interface, you’ll navigate Pop efficiently—managing documents, querying with AI, designing workflows, and building applications with ease.