Skip to content

Home

Jump to bottom
ॐ PrAkAsH edited this page Jan 2, 2026 · 1 revision

Welcome to the CollabPad wiki!

CollabPad - Feature Issues

Use these templates to create GitHub issues for CollabPad enhancements.

🔥 High Priority Issues

Issue #1: Language/Syntax Selector

Title: [Feature] Add language/syntax highlighting selector

Labels: enhancement, high-priority, ui

Description:

Summary

Add a dropdown selector to switch between different programming languages for syntax highlighting.

Requirements

  • Add dropdown in header with language options
  • Support languages: JavaScript, TypeScript, Python, HTML, CSS, Markdown, JSON, SQL, Java, C/C++, Go, Rust, PHP, Ruby
  • Persist language choice per room (sync to all users)
  • Update file extension for download feature
  • Store language preference on server

UI/UX

  • Dropdown should be styled to match dark/light theme
  • Show current language icon/name
  • Group languages by category (Web, Systems, Scripting, etc.)

Technical Notes

  • CodeMirror modes to load dynamically
  • Emit language-change event via Socket.IO
  • Server should store room.language property

Acceptance Criteria

  • User can switch language and syntax updates immediately
  • All users in room see the language change
  • New users joining see correct language

Issue #2: Remote Cursors with Labels

Title: [Feature] Show remote user cursors with name labels

Labels: enhancement, high-priority, collaboration

Description:

Summary

Display other users' cursor positions in real-time with colored labels showing their names.

Requirements

  • Track cursor position for each user
  • Render colored cursor line at position
  • Show username label above cursor
  • Animate cursor movements smoothly
  • Handle cursor cleanup when user leaves
  • Show selection ranges for remote users

UI/UX

  • Cursor color matches user's avatar color
  • Label appears on hover or always visible
  • Fade out label after 3 seconds of inactivity
  • Smooth animation for cursor movement

Technical Notes

// Cursor data structure
{
  oduserId: "socket-id",
  name: "SwiftCoder42",
  color: "#ff79c6",
  cursor: { line: 10, ch: 5 },
  selection: { anchor: {line: 10, ch: 0}, head: {line: 10, ch: 15} }
}

Acceptance Criteria

  • Can see all other users' cursors in real-time
  • Cursors are correctly colored per user
  • Labels show correct usernames
  • Cursors disappear when users leave

Issue #3: Download/Export Code

Title: [Feature] Download code as file

Labels: enhancement, high-priority, export

Description:

Summary

Allow users to download the current editor content as a file with appropriate extension.

Requirements

  • Add "Download" button in header
  • Auto-detect file extension from language mode
  • Generate filename: collabpad-{roomId}.{ext}
  • Support custom filename input (optional)
  • Trigger browser download

File Extension Mapping

Language Extension
JavaScript .js
TypeScript .ts
Python .py
HTML .html
CSS .css
Markdown .md
JSON .json
SQL .sql

Technical Notes

function downloadFile(content, filename) {
  const blob = new Blob([content], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

Acceptance Criteria

  • Clicking download saves file to user's device
  • File extension matches current language
  • File content matches editor content exactly

Issue #4: Password Protected Rooms

Title: [Feature] Add password protection for rooms

Labels: enhancement, high-priority, security

Description:

Summary

Allow room creators to set a password that others must enter to join.

Requirements

  • Add "Set Password" option when creating room
  • Show password modal when joining protected room
  • Store hashed password on server
  • Validate password before allowing join
  • Show lock icon for protected rooms
  • Allow room owner to change/remove password

UI/UX

  • Password modal with input field and submit button
  • Show error message for incorrect password
  • Lock icon indicator in header for protected rooms
  • Toast notification on successful unlock

Technical Notes

// Server-side room structure
{
  id: "room-abc123",
  passwordHash: "bcrypt-hash", // null if not protected
  owner: "socket-id",
  content: "...",
  users: Map
}

Security Considerations

  • Use bcrypt for password hashing
  • Rate limit password attempts (max 5 per minute)
  • Clear password from memory after validation

Acceptance Criteria

  • Room creator can set optional password
  • Users must enter correct password to join
  • Incorrect password shows error, doesn't allow entry
  • Password can be changed by room owner

Issue #5: Run JavaScript Code

Title: [Feature] Execute JavaScript code with console output

Labels: enhancement, high-priority, interactive

Description:

Summary

Add ability to run JavaScript code and display console output in a panel.

Requirements

  • Add "Run" button (▶️) in header
  • Create console output panel (collapsible)
  • Capture console.log, warn, error, info
  • Display output with syntax coloring
  • Show execution errors with stack trace
  • Add "Clear" button for console
  • Keyboard shortcut: Ctrl/Cmd + Enter

UI/UX

  • Console panel slides up from bottom (resizable)
  • Color coding: log (white), warn (yellow), error (red)
  • Timestamp for each output line
  • Monospace font matching editor

Technical Notes

// Safe code execution in iframe sandbox
const iframe = document.createElement('iframe');
iframe.sandbox = 'allow-scripts';
iframe.srcdoc = `
  <script>
    const _log = [];
    console.log = (...args) => parent.postMessage({type:'log', args}, '*');
    console.error = (...args) => parent.postMessage({type:'error', args}, '*');
    try {
      ${userCode}
    } catch(e) {
      parent.postMessage({type:'error', args:[e.message]}, '*');
    }
  </script>
`;

Security Considerations

  • Execute in sandboxed iframe
  • Set execution timeout (5 seconds max)
  • Prevent infinite loops with loop counter
  • No access to parent DOM or cookies

Acceptance Criteria

  • User can run JS code and see output
  • Console shows logs, warnings, errors correctly
  • Errors display with helpful messages
  • Infinite loops are terminated with warning

⭐ Medium Priority Issues

Issue #6: Chat Panel

Title: [Feature] Add real-time chat panel for collaboration

Labels: enhancement, medium-priority, collaboration

Description:

Summary

Side panel for team members to communicate while coding.

Requirements

  • Collapsible chat panel on right side
  • Real-time message sync via Socket.IO
  • Show sender name, avatar color, timestamp
  • Message input with Enter to send
  • Unread message indicator/badge
  • Emoji picker (optional)
  • Chat history persistence (last 100 messages)

UI/UX

  • Panel width: 300px (resizable)
  • Toggle button in header
  • Messages grouped by sender
  • Smooth slide-in/out animation
  • Badge shows unread count when closed

Message Structure

{
  oduserId: "socket-id",
  name: "SwiftCoder42",
  color: "#ff79c6",
  message: "Hey, check line 42!",
  timestamp: 1699999999999
}

Acceptance Criteria

  • Users can send and receive messages in real-time
  • Messages show correct sender info
  • Chat history preserved during session
  • Unread indicator works when panel is closed

Issue #7: Multiple Files/Tabs

Title: [Feature] Support multiple files with tab interface

Labels: enhancement, medium-priority, files

Description:

Summary

Allow users to work on multiple files within the same room.

Requirements

  • Tab bar below header
  • Add new file button (+)
  • Rename file (double-click tab)
  • Close file (x button on tab)
  • Sync file changes across all users
  • Each file has independent language mode
  • Maximum 10 files per room

UI/UX

  • Horizontal scrolling tab bar
  • Active tab highlighted
  • Unsaved indicator (dot) on tab
  • Confirm dialog before closing

Data Structure

{
  roomId: "room-abc123",
  files: [
    { id: "file-1", name: "index.js", language: "javascript", content: "..." },
    { id: "file-2", name: "styles.css", language: "css", content: "..." }
  ],
  activeFile: "file-1"
}

Acceptance Criteria

  • Users can create, rename, delete files
  • Switching tabs shows correct content
  • All users see file changes in real-time
  • File state syncs for new users joining

Issue #8: Find and Replace

Title: [Feature] Add find and replace functionality

Labels: enhancement, medium-priority, editor

Description:

Summary

Search and replace text within the editor.

Requirements

  • Open with Ctrl/Cmd + F
  • Find input with match highlighting
  • Replace input with replace/replace all buttons
  • Match case toggle
  • Regex toggle
  • Match count display (e.g., "3 of 15")
  • Navigate between matches (↑/↓ arrows)

UI/UX

  • Floating panel at top-right of editor
  • Highlight all matches in document
  • Current match highlighted differently
  • Close with Escape key

Technical Notes

  • Use CodeMirror's built-in search addon
  • codemirror/addon/search/search.js
  • codemirror/addon/search/searchcursor.js

Acceptance Criteria

  • User can find text and see matches highlighted
  • Can navigate between matches
  • Replace single or all occurrences works
  • Regex and case-sensitive options work

Issue #9: Font Size Controls

Title: [Feature] Add font size zoom controls

Labels: enhancement, medium-priority, accessibility

Description:

Summary

Allow users to increase/decrease editor font size.

Requirements

  • Zoom in button (+)
  • Zoom out button (-)
  • Reset button (or double-click)
  • Font size range: 10px - 24px
  • Persist preference in localStorage
  • Keyboard shortcuts: Ctrl/Cmd + Plus/Minus

UI/UX

  • Small button group in header
  • Show current size on hover/tooltip
  • Smooth font size transition

Technical Notes

function setFontSize(size) {
  document.querySelector('.CodeMirror').style.fontSize = size + 'px';
  editor.refresh();
  localStorage.setItem('collabpad-fontsize', size);
}

Acceptance Criteria

  • User can zoom in/out smoothly
  • Font size preference persists across sessions
  • Keyboard shortcuts work correctly

Issue #10: Code Minimap

Title: [Feature] Add VS Code-style minimap

Labels: enhancement, medium-priority, editor

Description:

Summary

Show a zoomed-out overview of the code on the right side.

Requirements

  • Minimap panel on right side of editor
  • Shows miniature version of all code
  • Highlights visible viewport area
  • Click to navigate to position
  • Drag viewport indicator to scroll
  • Toggle on/off in settings

UI/UX

  • Width: 80-100px
  • Slightly transparent
  • Current view shown as highlighted region
  • Smooth scroll animation on click

Technical Notes

  • Consider using codemirror-minimap package
  • Or custom canvas-based implementation
  • Performance: throttle updates on large files

Acceptance Criteria

  • Minimap shows accurate code representation
  • Clicking minimap navigates to that position
  • Viewport indicator shows current view
  • Performance is smooth on large files

Issue #11: Version History

Title: [Feature] Add version history with restore capability

Labels: enhancement, medium-priority, history

Description:

Summary

Track document versions and allow restoring previous states.

Requirements

  • Auto-save versions every 5 minutes
  • Save version on significant changes (100+ char diff)
  • Version list panel/modal
  • Preview version before restoring
  • Restore button with confirmation
  • Show diff between versions
  • Keep last 20 versions per file

UI/UX

  • History button in header (clock icon)
  • Modal with version list
  • Each entry shows: timestamp, author, preview
  • Diff view with additions (green) and deletions (red)

Data Structure

{
  roomId: "room-abc123",
  versions: [
    {
      id: "v1",
      timestamp: 1699999999999,
      author: "SwiftCoder42",
      content: "...",
      changeCount: 47
    }
  ]
}

Acceptance Criteria

  • Versions are auto-saved periodically
  • User can view list of past versions
  • Can preview and restore any version
  • Restore syncs to all users

Issue #12: Markdown Preview

Title: [Feature] Add live Markdown preview panel

Labels: enhancement, medium-priority, markdown

Description:

Summary

Show rendered Markdown preview alongside the editor.

Requirements

  • Split view: editor | preview
  • Real-time preview updates
  • Synchronized scrolling
  • Toggle preview on/off
  • Support GFM (GitHub Flavored Markdown)
  • Syntax highlighting in code blocks
  • Only show when language is Markdown

UI/UX

  • Preview panel on right (50% width)
  • Toggle button in header
  • Styled like GitHub Markdown
  • Smooth transitions

Technical Notes

  • Use marked or markdown-it library
  • Use highlight.js for code block highlighting
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

Acceptance Criteria

  • Markdown renders correctly in preview
  • Preview updates in real-time as user types
  • Code blocks have syntax highlighting
  • Scrolling is synchronized between panels

💡 Nice to Have Issues

Issue #13: Code Formatting (Prettier)

Title: [Feature] Add automatic code formatting with Prettier

Labels: enhancement, nice-to-have, formatting

Description:

Summary

One-click code formatting using Prettier.

Requirements

  • Format button in header
  • Keyboard shortcut: Shift + Alt + F
  • Support JS, TS, HTML, CSS, JSON, Markdown
  • Show error toast if formatting fails
  • Preserve cursor position after format

Technical Notes

<script src="https://unpkg.com/prettier@3.0.0/standalone.js"></script>
<script src="https://unpkg.com/prettier@3.0.0/plugins/babel.js"></script>

Acceptance Criteria

  • Code is formatted on button click
  • Formatting works for supported languages
  • Errors are handled gracefully

Issue #14: Keyboard Shortcuts Modal

Title: [Feature] Add keyboard shortcuts help modal

Labels: enhancement, nice-to-have, help

Description:

Summary

Modal showing all available keyboard shortcuts.

Requirements

  • Help button (?) in header
  • Open with Ctrl/Cmd + /
  • List all shortcuts with descriptions
  • Categorized: Editor, Navigation, Actions
  • Close with Escape or click outside

Shortcuts to Document

Shortcut Action
Ctrl+S Save (Download)
Ctrl+F Find
Ctrl+H Replace
Ctrl+/ Toggle comment
Ctrl+Enter Run code
Ctrl+B Toggle bold (Markdown)
Ctrl++ Zoom in
Ctrl+- Zoom out

Acceptance Criteria

  • Modal opens with shortcut or button
  • All shortcuts are listed and accurate
  • Modal is styled for dark/light themes

Issue #15: Zen Mode (Distraction-free)

Title: [Feature] Add Zen mode for distraction-free editing

Labels: enhancement, nice-to-have, ui

Description:

Summary

Full-screen, minimal UI mode for focused coding.

Requirements

  • Toggle with button or F11
  • Hide header, user list, all UI chrome
  • Center editor with max-width
  • Subtle fade effect on transition
  • Press Escape to exit
  • Optional: hide line numbers

UI/UX

  • Smooth fade transition (0.3s)
  • Slightly dimmed background
  • Floating exit hint at bottom

Acceptance Criteria

  • Zen mode hides all distractions
  • Editor is centered and focused
  • Easy to enter and exit

Issue #16: Export to GitHub Gist

Title: [Feature] Export code to GitHub Gist

Labels: enhancement, nice-to-have, export

Description:

Summary

One-click publish code to GitHub Gist.

Requirements

  • "Export to Gist" button
  • GitHub OAuth or Personal Access Token input
  • Create public or secret gist
  • Show Gist URL after creation
  • Copy Gist URL to clipboard

Technical Notes

  • GitHub Gist API: POST /gists
  • Requires OAuth token with gist scope

Acceptance Criteria

  • User can authenticate with GitHub
  • Gist is created successfully
  • User receives link to created Gist

Issue #17: Emoji Reactions on Lines

Title: [Feature] Add emoji reactions to code lines

Labels: enhancement, nice-to-have, collaboration

Description:

Summary

Allow users to add emoji reactions to specific lines.

Requirements

  • Right-click line → Add reaction
  • Emoji picker with common reactions
  • Show reactions in gutter
  • Click reaction to toggle/add
  • Sync reactions to all users
  • Remove reaction on second click

Common Reactions

👍 ❤️ 🎉 🤔 👀 🔥 🐛 💡

Acceptance Criteria

  • Users can add reactions to any line
  • Reactions sync in real-time
  • Can remove own reactions

Issue #18: Voice Chat (WebRTC Audio)

Title: [Feature] Add voice chat for pair programming

Labels: enhancement, nice-to-have, collaboration, complex

Description:

Summary

Real-time voice communication between collaborators.

Requirements

  • Mute/unmute button in header
  • Push-to-talk option
  • Volume indicator showing who's speaking
  • Individual user mute controls
  • Connection quality indicator

Technical Notes

  • Use WebRTC for peer-to-peer audio
  • Simple-peer or PeerJS library
  • TURN server may be needed for NAT traversal

Acceptance Criteria

  • Users can voice chat in real-time
  • Mute controls work correctly
  • Audio quality is acceptable

Issue #19: Mobile Keyboard Optimization

Title: [Feature] Improve mobile touch/keyboard support

Labels: enhancement, nice-to-have, mobile

Description:

Summary

Better editing experience on mobile devices.

Requirements

  • Larger touch targets
  • Virtual keyboard code helpers (brackets, etc.)
  • Swipe to indent/outdent
  • Pinch to zoom
  • Better cursor positioning

UI/UX

  • Floating toolbar above keyboard
  • Quick insert buttons: {} [] () "" '' ; :
  • Undo/Redo buttons

Acceptance Criteria

  • Editing on mobile is comfortable
  • Common symbols are easy to insert
  • Cursor is easy to position

Issue #20: Room Listing / Recent Rooms

Title: [Feature] Add room listing and recent rooms

Labels: enhancement, nice-to-have, navigation

Description:

Summary

Show user's recent rooms and allow creating named rooms.

Requirements

  • Landing page with room options
  • "Create New Room" with optional name
  • "Join Room" with room ID input
  • Recent rooms list (localStorage)
  • Last accessed timestamp
  • Clear history option

UI/UX

  • Clean landing page design
  • Room cards with name, date, preview
  • Quick join with one click

Data Structure

// localStorage: collabpad-recent-rooms
[
  { id: "room-abc", name: "Project X", lastAccessed: 1699999999 },
  { id: "room-xyz", name: "Untitled", lastAccessed: 1699888888 }
]

Acceptance Criteria

  • Users see their recent rooms
  • Can create named rooms
  • Can join by room ID
  • History persists across sessions

📋 Issue Creation Checklist

When creating issues on GitHub:

  1. Copy the Title - Use as issue title
  2. Add Labels - Apply suggested labels
  3. Copy Description - Paste as issue body
  4. Assign Milestone - Group by priority
  5. Link Related Issues - Add dependencies

🏷️ Suggested Labels

Create these labels in your repository:

Label Color Description
enhancement #a2eeef New feature or request
high-priority #d73a4a Critical for MVP
medium-priority #fbca04 Important but not urgent
nice-to-have #0e8a16 Polish and extras
ui #7057ff User interface related
collaboration #008672 Multi-user features
editor #e99695 Code editor features
security #b60205 Security related
accessibility #0052cc A11y improvements
mobile #5319e7 Mobile support
complex #c5def5 Requires significant work

🚀 Suggested Milestones

Milestone Issues Target
v1.0 - MVP #1, #2, #3, #4, #5 Week 1-2
v1.1 - Collaboration #6, #7, #8 Week 3-4
v1.2 - Polish #9, #10, #11, #12 Week 5-6
v2.0 - Advanced #13-#20 Future

Generated for CollabPad - Real-time Collaborative Code Editor

Clone this wiki locally