# Wireframes — Cloudsy ☁️🎧

---

# 🧠 Objetivo

Definir a estrutura visual, comportamento e fluxo de cada ecrã da aplicação.

Este documento complementa:
- 07_ui_ux.md (design system)
- 01_architecture.md (estrutura)

---

# ☁️ Princípios Globais

- UI arredondada (cloud style)
- Botões com bordas suaves
- Azul como cor principal
- Tema automático (system)
- Layout limpo e espaçado

---

# 🏠 1. HOME SCREEN

## 🎯 Objetivo
Mostrar músicas do utilizador + acesso rápido

---

## 🧱 Layout

### Top Bar
- Logo "Cloudsy"
- Avatar do utilizador
- Botão Settings (⚙️)

---

### Secção principal

#### Lista de músicas
Cada item:
- Capa (rounded)
- Título
- Artista
- Tag (mood IA)

---

### Floating Action Button (FAB)
- Forma: circular arredondada
- Cor: azul
- Ícone: +
- Ação: Upload música

---

## ⚡ Estados

- Loading → skeleton list
- Empty → "Ainda não tens músicas ☁️"
- Error → mensagem + retry

---

# 🎧 2. PLAYER SCREEN

## 🎯 Objetivo
Reprodução completa de música

---

## 🧱 Layout

### Top
- Botão back
- Nome da playlist

---

### Centro
- Capa da música (grande, rounded)
- Título
- Artista

---

### Barra de progresso
- Linha suave
- Thumb arredondado

---

### Controlos
- Play / Pause (botão principal azul)
- Next / Previous

---

### Ações extra
- Adicionar à playlist
- Ver lyrics
- Partilhar (DM)

---

## ✨ UX
- Animação ao trocar música
- Feedback visual nos controlos

---

# 📂 3. PLAYLISTS SCREEN

## 🎯 Objetivo
Gestão de playlists

---

## 🧱 Layout

### Lista de playlists
Cada item:
- Nome
- Nº de músicas
- Estilo rounded card

---

### Botão criar
- Botão azul arredondado

---

## 📂 Dentro da playlist

- Lista de músicas
- Botões:
  - remover
  - reorder

---

## ⚡ Estados

- Empty → “Cria a tua primeira playlist ☁️”

---

# 💬 4. CHAT IA (Clou)

## 🎯 Objetivo
Interação com IA

---

## 🧱 Layout

### Chat area
- Bolhas arredondadas
- User → azul
- Clou → cinza

---

### Input
- Campo rounded
- Botão enviar

---

## 🤖 Funcionalidades

- Perguntas livres
- Recomendações
- Análise de gosto

---

## ✨ UX

- Scroll automático
- Loading message (typing...)

---

# 👥 5. DMs (Mensagens)

## 🎯 Objetivo
Comunicação entre utilizadores

---

## 🧱 Lista de conversas

- Nome
- Última mensagem
- Timestamp

---

## 🧱 Chat individual

### Mensagens
- Texto
- Música (card)

---

### Input
- Campo texto
- Botão enviar
- Botão enviar música 🎵

---

## 🎵 Mensagem de música

- Capa
- Nome
- Botão play

---

# 📤 6. UPLOAD SCREEN

## 🎯 Objetivo
Adicionar música

---

## 🧱 Layout

- Selecionar ficheiro
- Input:
  - título
  - artista

---

### Botão upload
- Azul
- Rounded

---

## 🤖 Após upload

- IA gera:
  - género
  - mood

---

# ⚙️ 7. SETTINGS SCREEN

## 🎯 Objetivo
Personalização da app

---

## 🧱 Layout

### ☁️ Perfil
- Nome
- Email

---

### 🎨 Aparência

#### Tema
- System (default)
- Light
- Dark

#### Cor
- Azul (default)
- Custom picker

---

### 🌍 Idioma
- Português
- English

---

### 🎵 Preferências
- Géneros favoritos
- Moods favoritos

---

### 🔐 Conta
- Logout

---

# 📊 8. ESTADOS GLOBAIS

## Loading
- Skeleton
- Shimmer

---

## Empty
- Mensagens amigáveis
- UI leve

---

## Error
- Mensagem clara
- Botão retry

---

## Offline
- Aviso “Sem internet”

---

# 🔄 9. FLUXO PRINCIPAL

## 🎯 Jornada do utilizador

1. Login
2. Upload música
3. IA gera tags
4. Música aparece na Home
5. Criar playlist
6. Ouvir música
7. Chat com Clou
8. Enviar música via DM

---

# ☁️ Assinatura Cloudsy

- UI suave
- Bordas arredondadas
- Azul elegante
- Layout respirável
- Experiência fluida

---

# 🚀 Conclusão

Wireframes definem:
- Estrutura
- UX
- Comportamento

E garantem que a app Cloudsy:
- parece moderna
- é intuitiva
- tem identidade única