CodeForPhilly / CodeForPhilly/balancer-main

[Insighy extractor] Feature: Resizable Right-Hand Panel

Aperta
#375 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
Good for newcomers
Lingua principale
TypeScript
Stelle
21
Fork
19
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

### 🎨 Feature: Resizable Right-Hand Panel

**User Story**
As a user, I want to be able to drag and resize the right-hand panel (chat/insights panel) so I can adjust how much space the PDF vs. the chat takes up, depending on my workflow.

---

### 📝 Current Behavior
- The right-hand panel has a fixed width.
- Users cannot resize it.
- On smaller screens, the panel can take up too much space or not enough.

---

### 🎯 Expected Behavior
- Right-hand panel should be **resizable by dragging its left border**.
- Default size remains as it is now.
- Users can drag to make it wider or narrower.
- The PDF/content area should automatically adjust to fill the remaining space.
- The chosen width should persist during the session (optional: save in local storage for user preference).

---

### ✅ Acceptance Criteria
- [ ] User can click and drag the divider between PDF and chat panel.
- [ ] Panel smoothly resizes without breaking layout.
- [ ] Panel width stays within sensible min/max limits (e.g., min 250px, max 50% of screen).
- [ ] Resizing works across all supported browsers.
- [ ] Resizing works across different screen sizes (desktop, tablet).
- [ ] (Optional) Width preference persists per user session.

---

### 🔨 Task Breakdown
- [ ] **Frontend**
- Add draggable divider between PDF viewer and chat panel.
- Implement resize logic with min/max constraints.
- Update layout to re-render dynamically as width changes.
- (Optional) Save width to local storage and reload on next visit.

Image

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Direzione di ricerca

Inizia individuando i componenti frontend che eseguono il rendering del visualizzatore PDF e del pannello chat/insights, quindi esamina come vengono dimensionati nel layout condiviso. Il lavoro è completato quando il divisore può essere trascinato con larghezze minima e massima sensate, l’area PDF riempie lo spazio rimanente e il comportamento funziona nei browser e alle dimensioni dello schermo supportati.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
typescript
Ambito
frontend, web-dev
Tipo di issue
Funzionalità
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.