# IDE Mode (Tree View)

The "IDE Mode", also known as the "Tree View" allows you to work with multiple files.

## Features

- **File Explorer:** The Tree View displays your project's files in a hierarchical structure, similar to a traditional IDE.
- **File Operations:** You can perform various file operations directly from the Tree View:
    - **Add new files:** Create new source files.
    - **Rename files:** Change the names of existing files.
    - **Delete files:** Remove files from your project.
    - **Include/exclude files from the build:** Choose which files to include in a compilation.
- **Project Management:**
    - **Save and Load:** Save your entire project, including all files and settings, as a `.zip` archive. You can later load this `.zip` file to restore your project.
    - **CMake Support:** The Tree View supports CMake projects. You can enable CMake mode and provide custom arguments for your build. Note that you will need a file called `CMakeLists.txt` in your project for this to work. CMake mode is only available when the selected language is C, C++, Fortran, CUDA, or Assembly.
- **Drag and Drop:** You can drag and drop files from your computer directly into the Tree View to add them to your project.
- **Language Support:** The Tree View is language-aware and allows you to select the primary language for your project.

## Ctrl+S Behaviour

When a Tree View is active, pressing **Ctrl+S** (or **Cmd+S** on macOS) in any editor will include that editor's file in the tree and refresh it. If the file has not yet been named, a dialog will appear prompting you to enter a filename before it is included. This is controlled by the **"In Tree (IDE) mode, Ctrl+S includes the current file"** setting, which is enabled by default.

If the setting is disabled, or if there is no active Tree View, Ctrl+S falls back to the behaviour configured in the general **"Ctrl+S"** setting:

- **Save To Local File** (default) — downloads the editor content as a file.
- **Create Short Link** — generates and copies a short link.
- **Reformat code** — runs the code formatter.
- **Do nothing** — ignores the keypress.

## Tab Behaviour

When a Tree View is active, opening files from the tree will add their editors as tabs in the same editor panel rather than creating separate panels. Clicking a file that is already open will switch to its existing tab instead of opening a duplicate. New panes added from the top menu (such as editors or diff views) are also stacked into the editor area rather than being placed at the root of the layout.

## Adding Compilers and Executors

> **Important:** In IDE mode, compilers and executors must be added from the Tree View panel using its **"Add compiler"** and **"Add executor"** buttons. Do **not** add compilers from an individual source editor's dropdown — those are not associated with the tree and will not participate in multi-file builds. Only compilers and executors that belong to the tree can see all the files managed by it.

## How to Access

You can open the Tree View by clicking on the "Add..." button in the top menu and selecting "Tree (IDE Mode)".

## Implementation Details

The core logic for the Tree View is implemented in the `static/panes/tree.ts` file. This file handles the UI, file operations, and communication with other parts of Compiler Explorer, such as the editors and compilers. The UI template for the tree view is in `views/templates/panes/tree.pug`.