Building a VS Code-style File Browser Panel for Mattermost

The Problem

When working inside Mattermost, I often need to check the server's file structure while keeping the chat window open. The usual workaround — a Mattermost window plus an SSH terminal side by side — felt clunky.

The requirement was simple: a right-side panel with a VS Code-style file tree. The default Thread panel was barely used, so we'd replace it entirely.

Technical Approach

Mattermost has a plugin system that lets you inject React components into the web client. The Right-Hand Sidebar (RHS) accepts custom panels registered via registerRightHandSidebarComponent.

The overall architecture:

Mattermost Plugin (Go backend + React frontend)
  └── RHS Panel → File Tree Component
        ├── SSH connection → target server
        └── File list API → tree rendering

Frontend: React + TypeScript, following Mattermost's own design language.

Challenges Encountered

1. Style Conflicts

Plugin CSS fights with Mattermost's theme styles. After repeatedly hitting CSS specificity issues with external stylesheets, I switched to inline styles: all styling goes directly into JSX style={{}} props, bypassing the CSS cascade entirely.

Not elegant, but rock-solid.

2. Theme Adaptation

Mattermost supports both light and dark themes. Hardcoded colors cause the panel background to clash with the rest of the UI.

The fix: read Mattermost's window.theme object and generate colors dynamically:

const theme = window.theme || {};
const bgColor = theme.sidebarBg || '#1e1e1e';
const textColor = theme.sidebarText || '#d4d4d4';

The panel now follows the active Mattermost theme automatically.

3. File Tree UX Details

VS Code's file tree has some subtle behaviors worth replicating:

• Expand/collapse folders with chevron icons
• File icons vary by type
• Selection state highlight
• Right-click context menu (deferred to Phase 2)

I implemented the core expand/collapse first, used emoji for file type icons (simplicity wins), and pushed the context menu to the next iteration.

Current Status

Basic functionality is working, deployed to the dev environment. Awaiting UI feedback.

Remaining work:

• [ ] Full theme color adaptation (currently only default dark theme)
• [ ] Right-click menu (copy path, download)
• [ ] File name search
• [ ] Performance optimization (lazy loading for large directories)

Takeaways

Extending an existing product like Mattermost is more interesting than building from scratch. You have to find the gaps in someone else's architecture, leverage their APIs, and avoid breaking the overall experience.

VS Code's file browser is itself the product of decades of tree UI evolution. Reimplementing its core interactions made me appreciate how much intentional design hides in the details.

Planning to clean it up and open-source once it stabilizes.