HiveSuite Development Update: Feed Media Strip UI & Notification System Improvements

Words
401
Reading
2 min
Listen
Play
4M

HiveSuite improves feed UI consistency, media strip layouts, and PeakD-style on-chain notification handling.

HiveSuite

Right-Side Media Strip Across All Feeds

Unified Feed Media Experience

  • feat(ui): apply right-side media strip across feeds.
  • Auto-applied the new right-side media strip layout across all feeds using BlogPostList.
  • Applied across:
    • Blogs
    • Communities
    • MyFriends
    • Profile tabs
  • Improved media rendering consistency across the application.

  • Unified feed presentation and visual spacing throughout all feed views.

  • Outcome:
    • Cleaner and more modern feed experience
    • Better multi-media presentation consistency
    • Improved visual hierarchy across HiveSuite feeds

Right-Side Media Strip

Right-Side Media Strip - Desktop

Mobile View media Strip

Unified Feed Layout
Unified Feed Layout - My Friends

Unified Feed Layout - My Communities


Feed Card UI & Community UX Improvements

Feed & Community Experience Updates

  • feat(feed): adopt new card UI + community UX.
  • Applied the new media strip card UI across:
    • All feeds
    • Profile pages
  • Improved mobile card sizing for better responsive rendering.

  • Updated skeleton loaders for layout consistency across devices.

Community Page UX Improvements

  • Updated CommunityDetail page behavior:
    • Sticky tabs support
    • Scroll reset improvements
  • Feed updates automatically propagated through HiveReactKit shared components.
  • Outcome:
    • Improved responsive experience on mobile devices
    • Better community browsing workflow
    • Consistent feed behavior across the platform

Mobile Feed Cards
Mobile Feed Cards

Community UX Improvements
Community UX Improvements


Notifications System Improvements

PeakD-Style On-Chain Read State

  • feat(notifications): peakd-style mark-as-read + chain unread state.

  • Notifications now use on-chain unread state handling aligned with PeakD behavior.

  • Replaced localStorage-based notification cursor with:

    • lastReadDate from API
  • Implemented mark-as-read using:
    • aioha.customJSON
    • Clean typed transaction handling
  • Uses current timestamp instead of latest notification timestamp for safer synchronization.

  • Added optimistic UI updates with automatic resync on success or failure.

  • Mark-as-read button remains always enabled:

    • Supports idempotent interaction behavior
  • Outcome:
    • Improved notification synchronization reliability
    • Better alignment with Hive ecosystem notification standards
    • More consistent unread state management across devices

On-Chain Notification Read State & Notification UX Improvements

On-Chain Notification Read State & Notification UX Improvements


Powering the Hive Ecosystem

  • Continuously improving HiveSuite applications with focus on consistency, scalability, and creator experience
  • Building reusable feed infrastructure and standardized UI systems for the Hive community
  • Contributing towards a more reliable and feature-rich Hive ecosystem experience

Final Note

  • This post has been refined with the help of AI to improve readability and structure
  • The original development updates and optimized version are both available for reference

More Links
HiveSuite AppVote as WitnessSupport via Discord


▶️ 3Speak