fix(ui): show the name of the uploaded file

[thoda-dev]

What this changes

Closes #39

Two props on the UFileUpload in pages/index.vue: layout="list", so the file name and size are rendered instead of hidden, and position="inside", so the card appears in the dropzone rather than under it.

Why

Picking a file left the control unchanged, so nothing said which file was about to be encrypted — and since the name is encrypted along with the content, a wrong pick is only discovered by the recipient, after a read has been spent. Issue #39 has the longer version.

Two things about the shape of the fix:

Nothing is built. UFileUpload already renders an icon, the name, a formatted size and a delete button. The Nuxt UI theme hides that block in the default grid layout (fileWrapper: "hidden") and hands the tile to a full-frame image preview, which is the right default for an avatar picker and the wrong one here. list is the layout the component ships for exactly this.

position="inside" is not only cosmetic. The default puts the card below the dropzone, which adds its height to the min-h-40 and makes the form jump at the moment of selection. Inside, the component swaps the upload icon for the card within the same box, so the height is stable. The dropzone stays clickable to replace the file, and the delete button keeps its @click.stop.prevent, so neither gesture triggers the other.

No behaviour around the file itself changes: the same File reaches submit(), and it is still selectedFile.name that gets encrypted into fileNameEnc.

Checks

• pnpm lint, pnpm typecheck and pnpm test pass
• Schema change? A migration is committed alongside it (pnpm db:generate) — no schema change
• Touches crypto, authorization, or the paste read counter? Say so here — those get a closer read

None of the three. No server code changes, no i18n key is added or removed, and the diff is two props and a comment on one component.

Worth knowing when reviewing: nothing in the suite covers this. The tests are unit tests over pure logic and none of them mounts a page, so this was verified by reading the resolved theme (.nuxt/ui/file-upload.ts) rather than by a test. It is worth a look in the browser with a long file name, where the theme relies on truncate.

AI assistance

See CONTRIBUTING.md. Disclosure is not held against you: it tells
the reviewer where to look hardest.

• No AI tool was used
• An AI tool was used — which one, and roughly how much of the change: Claude Code, all of it. I reported the missing file name, it traced the cause to the theme's grid layout and made the change; putting the card inside the control rather than below it was my call.

[Copilot]

🟢 Approval recommended

The change is small, localized to a single component usage, and aligns with the stated issue/behavior without altering file-handling logic.

Pull request overview

This PR updates the home page’s file-upload UI so that selecting a file clearly shows the chosen file (name/size) and keeps the dropzone height stable, addressing Issue #39.

Changes:

• Switches UFileUpload to layout="list" so the selected file’s name/size card is rendered instead of hidden by the default grid theme behavior.
• Sets position="inside" so the file card replaces the upload icon within the dropzone rather than appearing beneath it (avoids layout jump).
• Adds an inline comment documenting why these props are set.

File summaries

File	Description
apps/app/app/pages/index.vue	Adjusts UFileUpload props to display selected file details and keep the upload area layout stable.

Review details

• Files reviewed: 1/1 changed files
• Comments generated: 0
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.