showing encrypted state

app/client/web/src/constants/Strings.ts

@@ -1,5 +1,6 @@
 export const en = {
   unknownContact: 'Unknown Contact',
+  encrypted: 'Encrypted',
   unknown: 'Unknown',
   sealed: 'Sealed',
   notes: 'Notes',
@@ -254,6 +255,7 @@ export const en = {
 
 export const fr = {
   unknownContact: 'Contact inconnu',
+  encrypted: 'Crypté',
   unknown: 'Inconnu',
   sealed: 'Scellé',
   notes: 'Notes',
@@ -509,6 +511,7 @@ export const fr = {
 
 export const sp = {
   unkownContact: 'Contacto Desconocido',
+  encrypted: 'Cifrado',
   unknown: 'Desconocido',
   sealed: 'Sellado',
   notes: 'Notas',
@@ -763,6 +766,7 @@ export const sp = {
 
 export const pt = {
   unknownContact: 'Contato Desconhecido',
+  encrypted: 'Criptografado',
   unknown: 'Desconhecido',
   sealed: 'Selado',
   notes: 'Notas',
@@ -1017,6 +1021,7 @@ export const pt = {
 
 export const de = {
   unknwonContact: 'Unbekannter Kontakt',
+  encrypted: 'Verschlüsselt',
   unknown: 'Unbekannt',
   sealed: 'Versiegelt',
   notes: 'Notizen',
@@ -1271,6 +1276,7 @@ export const de = {
 
 export const ru = {
   unknownContact: 'Неизвестный контакт',
+  encrypted: 'Зашифрованный',
   unknown: 'Неизвестно',
   sealed: 'Запечатано',
   notes: 'Заметки',

app/client/web/src/message/Message.module.css

@@ -8,6 +8,7 @@
     width: 100%;
     height: 128px;
     padding-left: 72px;
+    padding-right: 32px;
     margin-top: 8px;
     display: flex;
     flex-grow: 1;
@@ -47,6 +48,11 @@
         word-wrap:break-word;
         white-space: pre-wrap;
       }
+
+      .locked {
+        font-style: italic;
+        color: var(--mantine-color-text-7);
+      }
     
       .header {
         display: flex;

app/client/web/src/message/Message.tsx

@@ -53,14 +53,17 @@ export function Message({ topic, card, profile, host }: { topic: Topic, card: Ca
             </div>
             <div className={classes.options}>OPTIONS</div>
           </div>
-          { text && (
+          { !locked && text && (
             <div style={textStyle}>
               <span className={classes.text}>{ text }</span>
             </div>
           )}
+          { locked && (
+            <div className={classes.locked}>{ state.strings.encrypted }</div>
+          )}
         </div>
       </div>
-      { media.length > 0 && (
+      { !locked && media.length > 0 && (
         <div className={classes.assets}>
           { media }
         </div>