Add shield icon when messaging in an encrypted room

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={
             <>