langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-21 12:05:30 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

[PR #23490] Enhance API documentation TOC with modern design and improved UX #30285

New Issue
Closed
opened 2026-02-21 20:47:12 -05:00 by yindo · 0 comments
yindo commented 2026-02-21 20:47:12 -05:00
Owner
Copy Link
Copy Source

Original Pull Request: https://github.com/langgenius/dify/pull/23490

State: closed
Merged: Yes

Summary

This PR enhances the API documentation Table of Contents (TOC) components across the Dify web application with modern design improvements and better user experience.

Key Improvements:

  • Modern Design: Updated TOC components with contemporary minimalist aesthetic using proper design system tokens
  • Enhanced Dark Mode: Improved color contrast and visual hierarchy for better readability in dark mode
  • Smooth Scrolling UX: Added gradient fade masks at top/bottom borders for seamless scrolling experience
  • Active Section Tracking: Implemented real-time section highlighting with smooth scroll position monitoring
  • Interactive Enhancements: Added visual indicators and consistent hover/active state feedback
  • Performance Optimization: Maintained rendering efficiency with proper React optimization patterns
  • Design Consistency: Synchronized design across both API documentation components

Components Updated:

  • web/app/(commonLayout)/datasets/Doc.tsx - Main API documentation TOC
  • web/app/components/develop/doc.tsx - Development documentation TOC

Technical Details:

  • Faster animation timing (150ms) for responsive interactions
  • Proper design system token usage for maintainability
  • Enhanced accessibility with ARIA labels
  • Optimized positioning and sizing for better touch targets

Screenshots

Before After
Original basic TOC design Modern enhanced TOC with gradient effects and active tracking

Checklist

  • This change requires a documentation update, included: Dify Document
  • I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
  • I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
  • I've updated the documentation accordingly.
  • I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods
**Original Pull Request:** https://github.com/langgenius/dify/pull/23490 **State:** closed **Merged:** Yes --- ## Summary This PR enhances the API documentation Table of Contents (TOC) components across the Dify web application with modern design improvements and better user experience. ### Key Improvements: - **Modern Design**: Updated TOC components with contemporary minimalist aesthetic using proper design system tokens - **Enhanced Dark Mode**: Improved color contrast and visual hierarchy for better readability in dark mode - **Smooth Scrolling UX**: Added gradient fade masks at top/bottom borders for seamless scrolling experience - **Active Section Tracking**: Implemented real-time section highlighting with smooth scroll position monitoring - **Interactive Enhancements**: Added visual indicators and consistent hover/active state feedback - **Performance Optimization**: Maintained rendering efficiency with proper React optimization patterns - **Design Consistency**: Synchronized design across both API documentation components ### Components Updated: - `web/app/(commonLayout)/datasets/Doc.tsx` - Main API documentation TOC - `web/app/components/develop/doc.tsx` - Development documentation TOC ### Technical Details: - Faster animation timing (150ms) for responsive interactions - Proper design system token usage for maintainability - Enhanced accessibility with ARIA labels - Optimized positioning and sizing for better touch targets ## Screenshots | Before | After | |--------|-------| | Original basic TOC design | Modern enhanced TOC with gradient effects and active tracking | ## Checklist - [ ] This change requires a documentation update, included: [Dify Document](https://github.com/langgenius/dify-docs) - [x] I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos\!) - [x] I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change. - [x] I've updated the documentation accordingly. - [x] I ran `dev/reformat`(backend) and `cd web && npx lint-staged`(frontend) to appease the lint gods
yindo added the pull-request label 2026-02-21 20:47:12 -05:00
yindo closed this issue 2026-02-21 20:47:12 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#30285
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?