[WIP] Add User Tagging, Post Images, and Time-First 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, Post Images, and Enhanced Timestamps

Overview

Enhance BePro's social platform with user tagging, post image support, and proper timestamp formatting. Keep notifications simple like existing like/follow notifications.

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. Ping Table for Tagging Storage

Use the provided ping table to store tagging data:

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. Simple Notifications (Like Existing Like/Follow Notifications)

• Read from ping table and display in notifications
• Same simple format as existing like/follow notifications
• Examples:
  • "User X tagged you in a post"
  • "User Y mentioned you in a comment"
• Dashboard bell with badge count (like existing system)
• Real-time updates when new pings are created

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
   • Apply to posts, comments, notifications, etc.

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

3. Ping Table Integration

   • When user gets tagged, create record in ping table
   • Store: user_id, mentioned_by, post_id/comment_id, type
   • Types: 'mention_post', 'mention_comment'

Simple Notification System

1. Read from Ping Table

   • Query ping table for user notifications
   • Display exactly like existing like/follow notifications
   • Same UI components and styling

2. Notification Display

   • "User X tagged you in a post" (from ping table)
   • "User Y mentioned you in a comment" (from ping table)
   • Same timestamp format: HH:MM:SS YYYY-MM-DD
   • Same read/unread functionality as existing

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

Ping Data Flow

1. User types @ in post/comment
2. Real-time autocomplete appears
3. User selects from suggestions
4. @ mention is parsed and highlighted
5. Record created in ping table for mentioned user
6. Notification displays reading from ping table (like likes/follows)

Notification Types in Ping Table

• mention_post: When tagged in a post
• mention_comment: When tagged in a comment
• Display as simple text notifications like existing system

Success Criteria

• Posts support multiple image uploads with drag & drop
• All timestamps show Time first, then Date format (HH:MM:SS YYYY-MM-DD)
• @ symbol triggers real-time autocomplete with dropdown/markdown interface
• Tagging data stored in ping table
• Notifications display ping data exactly like existing like/follow notifications
• Notification bell updates in real-time with badge count
• Mentions are clickable and link to profiles
• Image upload integrates seamlessly with "post-images" bucket

---

💬 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:32pm