First Commit

docs/15_wireframes.md

@@ -0,0 +1,362 @@
+# 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