Skip to content

The Real Neighbors - Release Notes

Choose a tag to compare

View all tags
@CyberSphinxxx CyberSphinxxx released this 02 Jun 04:01
· 268 commits to main since this release
v1.1.0
d990756

Version v1.1.0

This release introduces a fully featured, real-time chat infrastructure supporting both public channels and private direct messages. It also overhauls the navigation system, updates the global layout architecture to be more consistent, improves cross-user interactions, and provides a polished, responsive Settings page that matches the design language of the platform.

A total of 16 files were created or modified. Below is a detailed breakdown of all the changes.

Key Features and Enhancements

1. Real-Time Chat System (Channels and Direct Messages)

  • Structured Channels: Implemented public chat channels grouped by category (General, Interests, and Utility) with support for channel descriptions and custom emojis.
  • Direct Messages (DMs): Enabled direct messaging between neighborhood members. The DM list is populated automatically with all registered users to make it easy to start conversations.
  • Rich Text and Images: Added support for normal text messages, replies to specific messages with a quoted message preview, and automatic detection/rendering of image URLs.
  • Typing Indicators: Integrated real-time typing indicators powered by the Firebase Realtime Database. Users can see when someone else in the channel/DM is currently typing.
  • Reactions: Added a quick-reaction menu with popular emojis (thumbs up, heart, laugh, surprise, sad) allowing users to add or remove reactions to messages.
  • Seen Receipts: Implemented DM read receipts showing the avatar of the recipient at the bottom-right of the last message they read.
  • Message Management: Allowed users to edit or delete their own messages. Deleted messages display a system notification that the content was removed.

2. Navigation and Layout Reorganization

  • Grouped Sidebar Navigation: The left sidebar navigation has been cleaned up and categorized into logical headers (MAIN, ENTERTAINMENT, NEIGHBORHOOD).
  • Anchored Settings and Profile: My Profile and Settings have been moved to the absolute bottom of the left sidebar. The redundant user card component has been removed for a cleaner visual flow.
  • Dynamic Page Header: The desktop navigation tabs ("Our Feed" and "Explore") inside the global header are now context-aware and only display when the user is viewing the Feed page.
  • Main Shell Scaling: Refactored the main application container to support full-height scroll-independent pages (like Chat and Playlist) without causing double scrollbars or clipping.
  • Responsive Sidebars: Built toggleable slide-out menus for channels and members list on mobile devices, ensuring the chat experience is clean and accessible on any screen size.

3. Redesigned Settings Page

  • Unified Layout: Relocated the Settings page under the main AppShell. It now keeps the global header and left sidebar consistent instead of acting as a standalone screen.
  • Two-Column Design: Redesigned the page to utilize a double-column desktop layout (navigation tabs on the left, settings form content on the right) and horizontal scroll pills on mobile.

4. Interactive Profile Actions

  • Message Shortcut: Added a dedicated "Message" button on user profile pages. Clicking this button auto-initializes a direct message conversation and redirects to the chat screen.
  • Quick Chat from Online Widget: Integrated message action buttons directly inside the online/offline members widget on the right sidebar.

Detailed File Changes

Below is the list of all 16 uncommitted files that were created or modified in this release:

New Files Created (7)

1. chat.ts

  • Implements core communication logic with Firebase Firestore and Realtime Database.
  • Provides listener subscriptions for channel lists, messages, and direct messages.
  • Exposes methods to send, update, react to, and delete messages.
  • Manages typing statuses and read receipts.

2. ChatPage.tsx

  • Serves as the main container for the chat interface.
  • Coordinates the 3-pane layout: Channel/DM Sidebar on the left, Message Area in the center, and Member List on the right.
  • Implements mobile toggle buttons to drawer-slide the sidebars on touch devices.

3. ChannelSidebar.tsx

  • Displays channels sorted by category and registered members in a Direct Messages list.
  • Features green indicators for online participants.
  • Calculates and renders unread badges for incoming messages based on seen receipts.

4. MembersSidebar.tsx

  • Renders list of online and offline users active in the neighborhood.
  • Allows clicking on members to navigate directly to their user profiles.

5. MessageArea.tsx

  • Displays message history and groups consecutive messages sent by the same user within a 5-minute window.
  • Includes relative date separators (e.g., "Today", "Yesterday", or custom weekday formats).
  • Monitors viewport focus and triggers typing and read-status database updates.

6. MessageItem.tsx

  • Renders individual chat message blocks, attachments, edit markers, and reply references.
  • Features a hover action menu to trigger emoji reactions, nested replies, editing, or deletion.
  • Displays small user avatar indicators indicating who has seen the message in DMs.

7. ChatInput.tsx

  • Provides an input area with an auto-expanding text box for message entry.
  • Supports typing event hooks, reply context bars, and send submission triggers.

Existing Files Modified (9)

8. firestore.rules

  • Added database security rules for /channels and /dms paths.
  • Restricted channel creation/deletion to admin roles, while allowing authenticated users to read.
  • Locked DM room visibility and messages only to authenticated users who are explicit participants in the conversation.

9. index.ts

  • Added TypeScript interfaces for Channel, ChatMessage, and DirectMessage data structures.

10. App.tsx

  • Registered lazy-loaded ChatPage and configured paths: /chat, /chat/:channelId, /chat/dm/:dmId.
  • Nested the /settings path inside the parent route using AppShell for consistent navigation.

11. AppShell.tsx

  • Configured flexible columns that allow full-height layouts on /chat routes.
  • Hid the desktop right sidebar on both /playlist and /chat sub-pages to maximize screen workspace.

12. Header.tsx

  • Added a conditional filter so that feed tabs ("Our Feed" and "Explore") are only displayed when the user is on the main landing feed page.

13. Sidebar.tsx

  • Reorganized main list into MAIN, ENTERTAINMENT, and NEIGHBORHOOD sections with uppercase header markers.
  • Moved profile and settings links to the bottom layout bar.
  • Cleaned up and deleted the redundant user dashboard block from the footer.

14. OnlineWidget.tsx

  • Added chat message action buttons next to online/offline user lists.
  • Improved spacing and overflow text truncation constraints.

15. ProfilePage.tsx

  • Introduced a "Message" button in the profile banner for other users.
  • Hooks up initialization commands to create a direct message room between the visitor and the profile owner.

16. SettingsPage.tsx

  • Replaced the fullscreen configuration modal with a standard workspace page.
  • Migrated the mobile selector from flat tables to a swipeable horizontal pill list.
  • Implemented vertical option tabs on the desktop screen view.

Full Changelog: https://github.com/CyberSphinxxx/The-Real-Neighbors/commits/v1.1.0

Assets 2
Loading