Skip to content

TASK_CHECKLIST.md

Latest commit

 

History

History
166 lines (143 loc) · 5.56 KB

TASK_CHECKLIST.md

File metadata and controls

166 lines (143 loc) · 5.56 KB

Quick Task Checklist

✅ Completed

Core Application

  • Initialize Vite + React + TypeScript project with pnpm
  • Install dependencies (zustand, react-markdown, @octokit/rest, etc.)
  • Create VSCode-inspired dark theme (green/black color scheme)
  • Build file system state management (Zustand)
  • Build authentication state management (Zustand)
  • Implement Sidebar component with file tree
  • Implement recursive folder rendering
  • Add context menu (right-click) functionality
  • Implement file/folder creation dialogs
  • Add inline file/folder renaming
  • Add file/folder deletion
  • Implement Editor component with split-pane layout
  • Add markdown textarea with syntax highlighting
  • Add live markdown preview (react-markdown)
  • Implement auto-save with 500ms debounce
  • Add Header component with branding
  • Implement GitHub OAuth login UI
  • Add GitHub user display (avatar + username)
  • Set up localStorage persistence for files
  • Set up localStorage persistence for auth
  • Add GitHub repository auto-creation function
  • Support nested folders (unlimited depth)
  • Custom scrollbar styling

Documentation

  • Create comprehensive AI_AGENT_GUIDE.md
  • Create user-facing README.md
  • Create GITHUB_OAUTH_SETUP.md guide
  • Create PROJECT_STRUCTURE.md overview
  • Create .env.example template

Code Quality

  • Fix TypeScript errors
  • Add proper type definitions (GitHubUser interface)
  • Use type-only imports where needed
  • Handle errors properly
  • Add ESLint suppression comments where appropriate

UI/UX Enhancements

  • Implement inline code rendering (VSCode-style with amber color)
  • Add color highlight syntax (red:text, blue:text, etc.)
  • Add VSCode-style footer with sync status indicators
  • Implement sidebar toggle functionality
  • Add gradient headers for code blocks with copy button
  • Implement line-by-line WYSIWYG editor (MarkText-style)
  • Add line numbers to editor
  • Add keyboard navigation (Enter, Backspace, Arrow keys, Escape)
  • Add blockquote styling (GitHub-style with left border)

⏳ Pending (Requires Backend)

GitHub Integration

  • Create backend service for OAuth token exchange (Vercel serverless)
  • Implement token exchange API endpoint (/api/auth.js)
  • Update Header.tsx to call backend API
  • Test complete OAuth flow
  • Implement file syncing to GitHub repository (auto-sync with 10s debounce)
  • Add commit functionality (automatic)
  • Handle file deletions in sync
  • Add pull/sync-down for multi-device sync (currently push-only)

🚀 Future Enhancements

Priority 1

  • Add keyboard shortcuts (Cmd+S, Cmd+N, Cmd+P, etc.)
  • Implement file search (Cmd+P)
  • Implement content search (Cmd+Shift+F)
  • Add drag-and-drop file reorganization
  • Add image upload and embedding
  • Improve WYSIWYG mode (hide more markdown syntax like headers)

Priority 2

  • Export functionality (download as .md, PDF, HTML)
  • Dark/Light theme toggle
  • Markdown templates
  • Split editor mode (two files side-by-side)
  • Version history viewer
  • Conflict resolution UI

Priority 3

  • Real-time collaboration (WebSockets)
  • Vim/Emacs keybindings option
  • Spell checker
  • Custom CSS themes
  • Mobile responsive design
  • Progressive Web App (PWA)
  • Offline mode with service worker

🧪 Testing Checklist

Manual Tests to Run

  • Create new file via sidebar button
  • Create new folder via sidebar button
  • Create file via context menu
  • Create folder via context menu
  • Rename file
  • Rename folder
  • Delete file
  • Delete folder
  • Edit markdown and see live preview
  • Verify auto-save (refresh page, check persistence)
  • Test nested folders (folder in folder)
  • Test folder expand/collapse
  • Test multiple files switching
  • Test GitHub login (after backend setup)
  • Test repository creation (after backend setup)
  • Test file sync (after implementation)

Markdown Features to Test

  • Headers (H1-H6)
  • Bold and italic
  • Lists (ordered and unordered)
  • Code blocks (with gradient headers and copy button)
  • Inline code (VSCode-style rendering)
  • Color highlights (red:text, blue:text, etc.)
  • Links
  • Images
  • Blockquotes (with GitHub-style left border)
  • Tables
  • Horizontal rules
  • GitHub Flavored Markdown (strikethrough, task lists, etc.)

📝 Next Immediate Steps

  1. Test the Application

    # The dev server is already running at http://localhost:5173
# Open in browser and test all file operations

  2. Set Up GitHub OAuth (Optional but recommended)

    • Follow instructions in GITHUB_OAUTH_SETUP.md
    • Create GitHub OAuth App
    • Set up backend for token exchange
    • Test login flow

  3. Deploy to Production (When ready)

    • Build: pnpm build
    • Deploy dist/ folder to Vercel/Netlify
    • Set environment variables
    • Update GitHub OAuth callback URLs

  4. Continue Development

    • Pick tasks from "Future Enhancements" list
    • Use AI_AGENT_GUIDE.md for development guidance
    • Keep documentation updated

🐛 Known Issues

  • No keyboard shortcuts yet
  • No search functionality yet
  • No true WYSIWYG mode (shows markdown syntax)
  • Sync is push-only (no pull/sync-down from GitHub)
  • No conflict resolution for concurrent edits

📚 Resources

  • App URL: http://localhost:5173
  • Documentation: See AI_AGENT_GUIDE.md
  • OAuth Setup: See GITHUB_OAUTH_SETUP.md
  • Project Structure: See PROJECT_STRUCTURE.md