Fix fallback messages

src/app/components/message/content/FallbackContent.tsx

@@ -20,28 +20,28 @@ export const MessageDeletedContent = as<'div', { children?: never; reason?: stri
 export const MessageUnsupportedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
   <Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}>
     <Icon size="50" src={Icons.Warning} />
-    <i>Unsupported message</i>
+    <i>Unsupported message.</i>
   </Box>
 ));
 
 export const MessageFailedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
   <Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}>
     <Icon size="50" src={Icons.Warning} />
-    <i>Failed to load message</i>
+    <i>Failed to load message.</i>
   </Box>
 ));
 
 export const MessageBadEncryptedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
   <Box as="span" alignItems="Center" gap="100" style={warningStyle} {...props} ref={ref}>
     <Icon size="50" src={Icons.Lock} />
-    <i>Unable to decrypt message</i>
+    <i>Unable to decrypt message. Please verify your session or restore your backup.</i>
   </Box>
 ));
 
 export const MessageNotDecryptedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
   <Box as="span" alignItems="Center" gap="100" style={warningStyle} {...props} ref={ref}>
     <Icon size="50" src={Icons.Lock} />
-    <i>This message is not decrypted yet</i>
+    <i>This message is not decrypted yet. Please wait.</i>
   </Box>
 ));
 

src/app/features/room/RoomInput.tsx

@@ -580,14 +580,27 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
             )
           }
           before={
-            <IconButton
+            room.hasEncryptionStateEvent() ?
-              onClick={() => pickFile('*')}
+              [
-              variant="SurfaceVariant"
+                <IconButton
-              size="300"
+                  onClick={() => pickFile('*')}
-              radii="300"
+                  variant="SurfaceVariant"
-            >
+                  size="300"
-              <Icon src={Icons.PlusCircle} />
+                  radii="300"
-            </IconButton>
+                >
+                  <Icon src={Icons.PlusCircle} />
+                </IconButton>,
+                <Icon src={Icons.ShieldLock} />,
+              ] : (
+                < IconButton
+                  onClick={() => pickFile('*')}
+                  variant="SurfaceVariant"
+                  size="300"
+                  radii="300"
+                >
+                  <Icon src={Icons.PlusCircle} />
+                </IconButton>
+              )
           }
           after={
             <>