## Implementation Plan: New-line Support in Chat Messages

**Target files and changes** (derived from investigation findings; unstaged changes in working tree are not assumed—agent will apply all modifications explicitly):

### 1. `templates/messages.html` (line 61)
Replace the single‑line `<input>` with a multi‑line `<textarea>`, preserving attributes that are still needed:
```html
<textarea name="content" rows="1" placeholder="Type a message..." autocomplete="off" data-mention aria-label="Type a message"></textarea>
```
- Remove `maxlength` (server‑side cap at 2000 remains, no client‑side truncation needed).
- Keep `name`, `placeholder`, `autocomplete`, `data-mention`, `aria-label`.

### 2. `static/js/MessagesLayout.js`
- **Line 17** – Change selector:
  ```javascript
  // Before
  const inputEl = form.querySelector('input[name="content"]');
  // After
  const inputEl = form.querySelector('textarea[name="content"]');
  ```
- **Add a keydown handler** (e.g., after line 154, before the existing submit logic) that intercepts Enter and allows Shift+Enter for newline:
  ```javascript
  inputEl.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      form.dispatchEvent(new Event('submit'));
    }
  });
  ```
  This ensures Enter sends the message and Shift+Enter inserts a newline (browser default behaviour).

### 3. `static/css/messages.css`
Replace every CSS selector that currently targets `input[type="text"]` inside the message input area with `textarea`. Affected lines: 306, 458, 476 (approximate; use project’s exact line numbers).  
Add the following properties to the textarea rule (ensuring it looks and behaves like a growing input box):
```css
.messages-input-area textarea {
  resize: none;
  overflow-y: auto;
  max-height: 150px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}
```
Remove or update any rules that specifically target `input[type="text"]` and are no longer applicable.

### 4. Test files – update selectors to `textarea[name='content']`

| File | Line | Current selector | New selector |
|---|---|---|---|
| `tests/e2e/messages.py` | 179 | `page.fill("input[name='content']", msg)` | `page.fill("textarea[name='content']", msg)` |
| `tests/e2e/notifications/index.py` | 443 | `pb.locator("input[name='content']").first` | `pb.locator("textarea[name='content']").first` |
| `tests/e2e/notifications/index.py` | 756 | `pb.locator("input[name='content']").first` | `pb.locator("textarea[name='content']").first` |

No changes needed in `bot/social.py` – its locator already includes both `input[name='content']` and `textarea[name='content']`.

### 5. Verification commands
After applying all changes, execute:
```bash
pip install -e '.[dev]' -q && make test-unit
pip install -q ruff && ruff check .
```

---

## Definition of Done

- [ ] `templates/messages.html` – the `<input type="text">` has been replaced with a `<textarea>` (attributes as specified).
- [ ] `static/js/MessagesLayout.js` – the element selector uses `textarea[name="content"]` and a `keydown` handler sends the form on Enter (no Shift) and allows Shift+Enter for newlines.
- [ ] `static/css/messages.css` – all message‑input styles target `textarea`, with `resize: none`, `white-space: pre-wrap`, `max-height: 150px`, and `overflow-y: auto`.
- [ ] `tests/e2e/messages.py` and `tests/e2e/notifications/index.py` – all three `input[name='content']` selectors updated to `textarea[name='content']`.
- [ ] `make test-unit` exits with code 0 (all unit tests pass).
- [ ] `ruff check .` produces no warnings or errors.
- [ ] No other references to `input[name='content']` remain in the three changed source files (template, JS, CSS) or the three test files. *(Optional but recommended.)*