[WIP] Add Real-time User Tagging, Post Images, and Enhanced Timestamps

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original description:

Implement Real-time User Tagging and Notifications with Image Support for Posts

Overview

Enhance BePro's social platform with comprehensive user tagging, real-time notifications (like the existing like notifications), and image support specifically for posts. Posts should display timestamps in Time-then-Date format.

Core Features to Implement

1. Enhanced Posts with Image Support

• Image Upload System with "post-images" bucket integration
• Multiple image support with preview functionality
• Drag & drop interface for easy image uploads
• Timestamps format: Always show Time first, then Date (HH:MM:SS YYYY-MM-DD)
• Image compression and optimization
• Proper error handling for upload failures

2. Real-time User Tagging System

• Real-time autocomplete when typing @ symbol in posts/comments
• Autocompletion interface: Little markdown or dropdown for user selection
• Smart parsing and highlighting of user mentions in content
• Clickable mentions that link to user profiles
• User search functionality for @ mentions

3. Notification System (Similar to existing like notifications)

Use the provided ping table schema to store notifications (following the same pattern as existing like notifications in home dashboard):

create table public.ping (
  id serial not null,
  user_id uuid null,
  type character varying(50) not null,
  content text null,
  mentioned_by uuid null,
  post_id uuid null,
  comment_id uuid null,
  is_read boolean null default false,
  created_at timestamp without time zone null default now(),
  constraint notifications_pkey1 primary key (id),
  constraint notifications_comment_id_fkey1 foreign KEY (comment_id) references comments (id) on delete CASCADE,
  constraint notifications_mentioned_by_fkey1 foreign KEY (mentioned_by) references profile (id) on delete CASCADE,
  constraint notifications_post_id_fkey1 foreign KEY (post_id) references posts (id) on delete CASCADE,
  constraint notifications_user_id_fkey1 foreign KEY (user_id) references profile (id) on delete CASCADE
) TABLESPACE pg_default;

4. Real-time Notifications (No Images in Notifications)

• Instant notifications when tagged (similar to like notifications)
• Dashboard bell with badge count (like existing notification system)
• Real-time Supabase subscriptions for immediate delivery
• Follow the same UI pattern as existing like notifications in home dashboard

Technical Requirements

Posts Enhancement

1. Image Integration

   • "post-images" Supabase Storage bucket setup
   • Multiple image upload with previews
   • Drag & drop functionality
   • Support common formats (JPG, PNG, GIF, WebP)

2. Timestamp Format

   • Always Time first: HH:MM:SS YYYY-MM-DD (UTC)
   • Update all existing timestamp displays
   • Real-time timestamp updates

User Tagging System

1. @ Mention Detection

   • Trigger autocomplete on @ symbol
   • Little markdown or dropdown interface for user selection
   • Real-time user search
   • Parse and validate mentioned users

2. Mention Rendering

   • Highlight @mentions in posts/comments
   • Make mentions clickable (link to profiles)
   • Proper parsing in both creation and display

Notification System (Text Only)

1. Integration with Existing System

   • Follow same pattern as like notifications in home dashboard
   • Use ping table for storage
   • Same notification types and structure

2. Real-time Delivery

   • Supabase subscriptions (like existing notifications)
   • Dashboard bell with badge count
   • Instant delivery when tagged

Implementation Details

Post Image System

• Maximum file size limits
• Image compression before upload
• Generate thumbnails for previews
• CDN integration for optimal loading
• Error handling and retry mechanisms

Notification Types (Text Only - No Images)

• mention_post: When tagged in a post
• mention_comment: When tagged in a comment
• Follow existing notification pattern (like likes, comments, etc.)

User Mention Flow

1. User types @ in post/comment
2. Real-time autocomplete appears (dropdown/markdown style)
3. User selects from suggestions
4. @ mention is parsed and highlighted
5. Notification created for mentioned user
6. Real-time notification delivered (like existing system)

Success Criteria

• Posts support multiple image uploads with drag & drop
• All timestamps show Time first, then Date format
• @ symbol triggers real-time autocomplete with dropdown/markdown interface
• Users receive instant notifications when tagged (following existing notification pattern)
• Notification bell updates in real-time with badge count
• Mentions are clickable and link to profiles
• Image upload integrates seamlessly with "post-images" bucket
• Notifications display in home dashboard like existing like notifications (NO IMAGES)

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
bepro	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 9, 2025 6:30pm