[GH-ISSUE #64] Add Contextual Documentation Sidebar for In-App Help #45

New issue

Closed

opened 2026-03-03 10:56:21 +03:00 by kerem · 1 comment

kerem commented

2026-03-03 10:56:21 +03:00

Owner

Originally created by @malla-lokesh on GitHub (Apr 17, 2025).
Original GitHub issue: https://github.com/dflow-sh/dflow/issues/64

Originally assigned to: @malla-lokesh on GitHub.

Summary:

Introduce a contextual documentation sidebar to provide inline, non-blocking help throughout the dFlow application. This will improve the user experience by offering just-in-time documentation access via info buttons placed near key UI components (e.g., onboarding process, deploy button, S3 backup toggle). The sidebar should be non-modal, allowing users to continue interacting with the main UI while the documentation is open.

Background & Motivation:

As dFlow grows, users (especially new ones) may encounter confusion when interacting with deployment flows, environment variables, backup settings, etc. A lightweight, always-accessible help system is needed to reduce friction and support self-serve onboarding — without redirecting users to an external documentation site or blocking their interaction.

We want to keep the experience clean, contextual, and embedded into the app.

Feature Requirements:

Place info buttons near relevant UI components (e.g., buttons, toggles)
Clicking an info button should open a right-side
The sidebar must:
- Not overlay or block the main UI
- Be fixed-position on the right side of the screen
- Be dismissible (close button)
- Pull content from existing content collection docs (based on a slug/key)
Docs should support markdown/MDX (rendered using existing content pipeline)
User should be able to interact with the main app even when the sidebar is open

Implementation Details:

Build a lightweight custom sidebar (avoid using shadcn/ui Sheet due to its modal overlay nature)
Suggested tech stack:
- framer-motion for slide-in animation
- TailwindCSS for layout/styling
- Use MDX content from the content/docs collection
Info buttons should pass a unique slug or docId to open the correct help entry
Render content dynamically (lazy-load or preload)
Consider wrapping the sidebar in a shared layout component for global access

Originally created by @malla-lokesh on GitHub (Apr 17, 2025). Original GitHub issue: https://github.com/dflow-sh/dflow/issues/64 Originally assigned to: @malla-lokesh on GitHub. ### Summary: Introduce a contextual documentation sidebar to provide inline, non-blocking help throughout the dFlow application. This will improve the user experience by offering just-in-time documentation access via info buttons placed near key UI components (e.g., onboarding process, deploy button, S3 backup toggle). The sidebar should be non-modal, allowing users to continue interacting with the main UI while the documentation is open. ### Background & Motivation: As dFlow grows, users (especially new ones) may encounter confusion when interacting with deployment flows, environment variables, backup settings, etc. A lightweight, always-accessible help system is needed to reduce friction and support self-serve onboarding — without redirecting users to an external documentation site or blocking their interaction. We want to keep the experience clean, contextual, and embedded into the app. --- ### Feature Requirements: - [x] Place info buttons near relevant UI components (e.g., buttons, toggles) - [x] Clicking an info button should open a right-side - The sidebar must: - [x] Not overlay or block the main UI - [x] Be fixed-position on the right side of the screen - [x] Be dismissible (close button) - [x] Pull content from existing content collection docs (based on a slug/key) - [x] Docs should support markdown/MDX (rendered using existing content pipeline) - [x] User should be able to interact with the main app even when the sidebar is open --- ### Implementation Details: - Build a lightweight custom sidebar (avoid using shadcn/ui Sheet due to its modal overlay nature) - Suggested tech stack: - framer-motion for slide-in animation - TailwindCSS for layout/styling - Use MDX content from the content/docs collection - Info buttons should pass a unique slug or docId to open the correct help entry - Render content dynamically (lazy-load or preload) - Consider wrapping the sidebar in a shared layout component for global access