Skip to content

feat: UI/UX enhancements with responsive design and new components#5

Merged
dev-Ninjaa merged 11 commits into
mainfrom
ui-ux
Feb 4, 2026
Merged

feat: UI/UX enhancements with responsive design and new components#5
dev-Ninjaa merged 11 commits into
mainfrom
ui-ux

Conversation

@dev-Ninjaa

Copy link
Copy Markdown
Member

Summary

This PR introduces significant UI/UX improvements to PulmNotes with comprehensive responsive design and new component features.

Changes

  • New NoteTabs Component: Manages open notes with tab close functionality
  • SecondarySidebar: Extended library view with improved file organization
  • TopBar Enhancements: Added Pages, Tasks, Discussions tabs with Edit/Read mode toggle
  • Responsive Design: Full mobile-first responsive implementation across all views
  • File Type Icons: Added support for video, audio, archive, and text file icons
  • Layout Reorganization: Improved layout with TopBar positioned above SecondarySidebar
  • Icon Color Theming: Enhanced icon colors based on view mode for better visibility

Files Modified (16)

  • AllNotesView, AssetModal, BinView, CategoryModal, NoteCard
  • NoteTabs (NEW), NoteView, PinsView, RecentView, RichContentRenderer
  • SearchView, SecondarySidebar, Sidebar, SubCategoryModal, TopBar, page.tsx

Statistics

  • 11 commits
  • 1,461 additions
  • 564 deletions
  • No breaking changes

Testing

  • All components properly typed with TypeScript
  • Responsive breakpoints verified (sm, md, lg, xl)
  • No conflicts with main branch

…nd desktop

- Update page.tsx layout with responsive flex direction (flex-col lg:flex-row)
- Make Sidebar responsive with adaptive widths (w-60 sm:w-64 / w-16 sm:w-20)
- Update TopBar with responsive padding, height, and hidden tabs on small screens
- Make SecondarySidebar responsive (w-full md:w-72)
- Update all view components (AllNotes, Recent, Pins, Bin, Search) with responsive grid layouts
- Make NoteCard responsive with adaptive text sizes and spacing
- Update NoteView with responsive padding and max-widths
- Make all modals (Category, SubCategory, Asset) responsive with mobile-first approach
- Add responsive text scaling to RichContentRenderer
- Use Tailwind breakpoints: sm (640px), md (768px), lg (1024px) throughout
@dev-Ninjaa dev-Ninjaa merged commit cd683d4 into main Feb 4, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants