# The interface in detail

{/* AUTO-SYNCED SOURCE: this page lives in apps/app/src/modules/files/docs/ and is mirrored into the docs app by `bun sync:module-docs`. Edit it in the module, not in apps/docs. */}
<Lead>
The file explorer works like a file manager on your computer: select, drag, right-click, preview. This page walks through every surface and menu in detail.
</Lead>

## Page layout

The page has three zones: the **sidebar** on the left, the **file area** in the middle and the dockable **details panel** on the right. There is no classic folder tree: you navigate via the sidebar areas, the breadcrumbs at the top and by double-clicking into folders.

Every view has its own address and can be linked directly: `/files` (Start), `/files/recent` (Recent), `/files/favorites` (Favourites), `/files/trash` (Trash) and `/files/f/<id>` for a specific folder or a file with its preview open.

## Sidebar

- **Start**, **Recent** (Zuletzt) and **Favourites** (Favoriten) for quick access.
- The **Areas** (Bereiche) group with **Tools**, **Properties** (Objekte) and **My files** (Meine Dateien), see [Folders and areas](/tools/dateien/ordner-und-bereiche).
- The **Trash** (Papierkorb).
- A **search button**; faster still is <Kbd>Cmd/Ctrl</Kbd> + <Kbd>K</Kbd>, see [Search](/tools/dateien/suche).
- The **storage tile** with a gauge and "X of Y used". It is visible to owners and admins only and links to **Settings > Files**.

## Views and sorting

- **Grid or list**, switchable in the toolbar. The choice is **remembered per folder**: your photo folder can stay a grid while the contracts folder stays a list.
- The list shows the columns **Name**, **Size** (Größe) and **Modified** (Geändert).
- **Sorting** through a menu where every entry states the outcome: "Name (A bis Z)", "Name (Z bis A)", "Zuletzt geändert zuerst", "Älteste zuerst", "Größte zuerst", "Kleinste zuerst" and "Nach Dateityp". The button shows what is currently applied. Folders always come before files.

## Navigation and breadcrumbs

- **Double click** opens a folder; the **breadcrumbs** at the top lead back, every level is clickable.
- <Kbd>Alt</Kbd> + <Kbd>↑</Kbd> goes one level up.
- Typing a letter jumps to the next matching name.

## Multi-select and the bulk bar

Selection follows the **Finder semantics** you know from your computer:

- **Click** selects an entry.
- <Kbd>Cmd/Ctrl</Kbd> + click adds or removes individual entries.
- <Kbd>Shift</Kbd> + click spans a range.
- <Kbd>Cmd/Ctrl</Kbd> + <Kbd>A</Kbd> selects everything, <Kbd>Esc</Kbd> clears the selection.

As soon as something is selected, the status bar appears with "{n} selected" plus the total size and the bulk actions **Download** (Herunterladen), **As ZIP** (Als ZIP), **Move to trash** (In den Papierkorb) and **Clear selection** (Auswahl aufheben).

## Context menu

Right-click (on the phone: long press) opens an entry's context menu:

- **Open** (Öffnen) for folders, **Download** (Herunterladen) for files
- **Open with** (Öffnen mit): shows tools that accept the file type. Images, for example, can be opened directly in AI-Homestaging.
- **Rename** (Umbenennen)
- **Move to...** (Verschieben nach...), or "{n} entries" when multiple are selected
- **Duplicate** (Duplizieren)
- **Mark as favourite** (Als Favorit markieren) or **Remove favourite** (Favorit entfernen)
- **Manage access...** (Zugriff verwalten...), folders only, see [Folder access](/tools/dateien/zugriff)
- **Share...** (Freigeben...), see [Sharing externally](/tools/dateien/freigeben)
- **Folder colour** (Ordner-Farbe), folders only
- **As ZIP** (Als ZIP)
- **Move to trash** (In den Papierkorb)

## Folder colours

Via the context menu you can give folders one of six accent colours: **blue**, **violet**, **green**, **amber**, **rosé** or **slate blue**; the default colour is gold. The colour is visible workspace-wide, so everyone sees the same marking. System folders such as Tools or Properties may carry a colour too.

## Details panel

You dock the details panel via the toolbar. For the selected entry it shows:

- **Preview**, **size**, **type** and **origin** (uploaded, imported, tool result or system folder)
- for restricted folders the line **Access: Restricted** (Zugriff: Eingeschränkt)
- **Created** (Erstellt) and **Modified** (Geändert)

Below that come four sections:

<DefinitionList>
  <DefItem term="Labels">Free-form tags shown as chips, visible team-wide. Adding and removing requires write permission; existing labels are suggested as you type.</DefItem>
  <DefItem term="History (Verlauf)">The saved versions of a file, with restore. Details: [Uploads and versions](/tools/dateien/upload-und-versionen).</DefItem>
  <DefItem term="Activity (Aktivität)">The latest actions on the entry, for example "Uploaded", "Renamed" or "Moved to trash".</DefItem>
  <DefItem term="Shares (Freigaben)">The entry's active external links, revocable right there.</DefItem>
</DefinitionList>

## Favourites

The star in the context menu marks files and folders as favourites. The sidebar area of the same name collects them all.

## Preview

- <Kbd>Space</Kbd> or double click opens the quick preview; the arrow keys flip to the next entry.
- **Images, PDFs, videos and audio** are displayed or played directly.
- **Markdown** renders formatted, **CSV** as a table, **code** with line numbers.

## Keyboard shortcuts

The <Kbd>?</Kbd> key (or the help button at the bottom right) opens the **keyboard shortcuts** overlay:

- **Navigation**: <Kbd>↑</Kbd> <Kbd>↓</Kbd> <Kbd>←</Kbd> <Kbd>→</Kbd> move the selection (in the grid too), <Kbd>Alt</Kbd> + <Kbd>↑</Kbd> goes one level up, <Kbd>Enter</Kbd> opens a folder or shows the file, typing jumps to a name.
- **Selection**: <Kbd>Cmd/Ctrl</Kbd> + <Kbd>A</Kbd> selects everything, <Kbd>Esc</Kbd> clears the selection.
- **Actions**: <Kbd>Space</Kbd> for the quick preview, <Kbd>F2</Kbd> to rename, <Kbd>Del</Kbd> for the trash.
- **Search and help**: <Kbd>Cmd/Ctrl</Kbd> + <Kbd>K</Kbd> opens search, <Kbd>?</Kbd> this help.

## Live updates

If a tool stores a file while the page is open, it appears immediately in the file area and a notice reports: "{Tool} stored a new file." No reload needed.

## Empty states

The most important notices when nothing is there yet (original German wording in quotes):

- Empty root: "Dein Dateispeicher ist noch leer. Lade deine ersten Dateien hoch oder lege einen Ordner an. Tool-Ergebnisse und Objekt-Dateien landen automatisch hier." (Your file store is still empty; upload your first files or create a folder, tool results and property files land here automatically.)
- Empty folder: "Dieser Ordner ist leer. Zieh Dateien oder ganze Ordner hierher. Auch Einfügen aus der Zwischenablage funktioniert." (This folder is empty; drag files or whole folders here, pasting from the clipboard works too.)
- Empty trash: "Der Papierkorb ist leer." (The trash is empty.)

## On the phone

On the phone a **long press** opens the context menu, and instead of dragging you use the **Move to...** dialog. Every function stays reachable.

## Further reading

Continue with [Uploads and versions](/tools/dateien/upload-und-versionen) or go back to the [overview](/tools/dateien).
