feat: Reportes, chat de discusión y mejoras de navegación

- Tab "Reportados" en Contratos (cliente) y tab "Reportadas" en Postulaciones (proveedor) con skeleton loading e ionViewWillEnter
- Modal de chat para discusión de reportes: burbujas por rol (propio/otro/moderador), skeleton, input con cámara y envío
- Endpoints GET/POST contracts/reports/{id}/comments en ichamba.service
- userId guardado en AuthService desde auth/user para identificar mensajes propios
- Botón "Postularse" corregido con slot=end en ion-item
- Todas las secciones de tabs migradas de ngOnInit a ionViewWillEnter + ChangeDetectorRef.detectChanges()
- Android navigation bar reactiva al tema del sistema vía values/values-night styles.xml

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-18 21:05:24 -06:00
parent aa8b0061c9
commit c677fdcb59
34 changed files with 901 additions and 102 deletions

View File

@@ -0,0 +1,117 @@
.messages-container {
display: flex;
flex-direction: column;
padding: 16px;
min-height: 100%;
}
.message-wrapper {
display: flex;
margin-bottom: 10px;
&.right { justify-content: flex-end; }
&.left { justify-content: flex-start; }
&.center { justify-content: center; }
}
.message-bubble {
max-width: 72%;
padding: 10px 14px;
border-radius: 18px;
word-break: break-word;
p {
margin: 0 0 4px 0;
font-size: 0.95rem;
line-height: 1.4;
}
.sender-name {
display: block;
font-size: 0.72rem;
font-weight: 600;
margin-bottom: 4px;
opacity: 0.75;
}
.timestamp {
display: block;
font-size: 0.68rem;
margin-top: 4px;
opacity: 0.65;
text-align: right;
}
&.mine {
background: var(--ion-color-primary);
color: #fff;
border-bottom-right-radius: 4px;
}
&.other {
background: var(--ion-color-light);
color: var(--ion-color-dark);
border-bottom-left-radius: 4px;
}
&.moderator {
background: var(--ion-color-medium);
color: #fff;
max-width: 80%;
text-align: center;
border-radius: 10px;
font-style: italic;
.sender-name {
text-align: center;
font-weight: 700;
opacity: 1;
}
.timestamp {
text-align: center;
}
}
}
.empty-state {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 16px;
color: var(--ion-color-medium);
p {
margin: 0;
font-size: 0.95rem;
}
}
.input-bar {
display: flex;
align-items: flex-end;
padding: 6px 6px;
gap: 2px;
background: var(--ion-background-color, #fff);
border-top: 1px solid var(--ion-color-light-shade);
ion-textarea {
flex: 1;
--padding-start: 14px;
--padding-end: 14px;
--padding-top: 8px;
--padding-bottom: 8px;
background: var(--ion-color-light);
border-radius: 20px;
margin: 0;
max-height: 120px;
}
ion-button {
--padding-start: 6px;
--padding-end: 6px;
min-height: 40px;
}
}