[camielvs]

Description

You can now add a document from a file: drop one onto the Add a document dialog, or click browse. Its name becomes the Title and its text the Content. The Content field is now the shared code editor, so long files scroll and long lines wrap instead of pushing the dialog off the page.

File drop

• A dashed strip above Title reads "Drop a text file here, or browse", and highlights while a file is dragged over the form.
• The whole form accepts the drop, so a file that misses the strip by a little doesn't open in the tab.
• Title is filled only when it's empty or still holds the name from the previous file, so a title you typed is kept. Content is always replaced.
• Only UTF-8 text up to 1 MB is accepted, checked by decoding the bytes rather than by extension, so extensionless files work. Anything else shows an error under the strip and leaves the fields alone.
• Text dragged within the form still drops into the fields as usual.

Code editor

• Content is CodeEditor (Monaco) in a fixed-height box styled like an input, with word wrap and line numbers.
• It highlights by the title's extension through languageFor, the same rule the document viewers use when a saved document is shown later. That's why a dropped file keeps its extension in the title (train.py, not train), and why the Title placeholder is now model-card.md.
• CodeEditor takes an optional options prop that overrides its defaults; it's used here for the aria label and placeholder. Other callers are unchanged.
• Both document dialogs are now sm:max-w-4xl (896px) instead of 512px, to give the editor room.

Shared helpers

• readTextFile in src/utils/textFile.ts reads a file as strict UTF-8 under an optional byte limit. It returns a reason (too_large, not_text or unreadable) instead of a message, so each caller words its own errors.
• useFileDrop in src/hooks/ handles dragging and dropping a file onto any element, and reports while a file is over it.
• The app's other file pickers read files three other ways, and none checks that a file is text or caps its size. Both helpers are general so those pickers can move to them in the follow-up.

Analytics

• projects.add_document_from_file_completed fires with method: "drop" | "browse". The file name is never sent.
• Clicks on browse are tracked as projects.add_document_browse_file.click.

Related Issue and Pull requests

None.

Type of Change

• New feature
• Improvement

Line Breakdown

Category	Added	Removed
Production code	246	14
Comments	5	2
Tests	419	0
Config / CI / tooling	1	0
Total	671	16

Checklist

• I have tested this does not break current pipelines / runs functionality
• I have tested the changes on staging

Test Instructions

1. Open a project, in Tangent or on its project page, and choose Add → Add a document.
2. Drop a .md, .yaml or .py file anywhere on the form. Title should become the file name, and Content the file's text, highlighted for that language.
3. Type a title, then drop a file. Your title should stay.
4. Drop an image or a PDF. An error should appear under the strip, and the fields should not change.
5. Drop a file with long lines and a few hundred lines. The editor should scroll, lines should wrap, and the dialog should stay on screen.
6. Click browse and pick a file. It should fill the fields the same way.

Additional Comments

• Drag-and-drop was checked in Chromium with simulated drag events, in light and dark themes, at 1280×900 and 640×700. A file dropped onto the editor itself fills it with exactly the file's text, with nothing inserted by Monaco. Pressing Escape while a word suggestion is open closes the suggestion, not the dialog. Dragging a real file from the OS hasn't been tried.
• Known rough edge, not changed here: in windows 640–928px wide the dialog runs edge to edge, because DialogContent's sm:max-w-* replaces its max-w-[calc(100%-2rem)] margin. Every large dialog in the app already does this.

🤖 Generated with Claude Code

future follow-up: standardize our various file picker workflows into a filepicker component.

[github-actions]

🎩 Preview

A preview build has been created at: cvs/document-file-drop/e1caf41