Change how content warnings and filters are displayed in web UI (#31365)

app/javascript/images/filter-stripes.svg

@@ -0,0 +1,24 @@
+<svg width="5" height="80" viewBox="0 0 5 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_954_5239)">
+<rect width="5" height="80" transform="matrix(1 0 0 -1 0 80)" fill="#2F0C7A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.35524 84C6.46234 83.9609 6.57112 83.9208 6.68172 83.8795C6.79039 83.839 7.16116 83.7 7.21197 83.681C10.0919 82.6043 11.8941 82.2 15 82.2C18.0813 82.2 19.6086 82.5665 22.3886 83.6785C22.6753 83.7932 22.9494 83.9003 23.2136 84H25.0812C24.3279 83.7808 23.5395 83.4927 22.6114 83.1215C19.7664 81.9835 18.1687 81.6 15 81.6C11.8122 81.6 9.94344 82.0192 7.00185 83.119C6.95066 83.1381 6.58016 83.277 6.47198 83.3174C5.72954 83.5944 5.0738 83.8198 4.45483 84H6.35524ZM6.35524 78C3.97726 78.8676 2.42302 79.2 0 79.2L0 78.6C1.72318 78.6 2.98542 78.4277 4.45483 78H6.35524ZM23.2136 78C25.5716 78.8899 27.1507 79.2 30 79.2V78.6C27.9473 78.6 26.5843 78.4373 25.0812 78L23.2136 78ZM0 82.2C2.53215 82.2 4.1155 81.837 6.68172 80.8795C6.79039 80.839 7.16116 80.7 7.21197 80.681C10.0919 79.6043 11.8941 79.2 15 79.2C18.0813 79.2 19.6086 79.5665 22.3886 80.6785C25.2336 81.8165 26.8313 82.2 30 82.2V81.6C26.9187 81.6 25.3914 81.2335 22.6114 80.1215C19.7664 78.9835 18.1687 78.6 15 78.6C11.8122 78.6 9.94344 79.0192 7.00185 80.119C6.95066 80.1381 6.58016 80.277 6.47198 80.3174C3.96706 81.2519 2.44905 81.6 0 81.6L0 82.2Z" fill="#858AFA" stroke="#858AFA" stroke-width="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.35524 78C6.46234 77.9609 6.57112 77.9208 6.68172 77.8795C6.79039 77.839 7.16116 77.7 7.21197 77.681C10.0919 76.6043 11.8941 76.2 15 76.2C18.0813 76.2 19.6086 76.5665 22.3886 77.6785C22.6753 77.7932 22.9494 77.9003 23.2136 78H25.0812C24.3279 77.7808 23.5395 77.4927 22.6114 77.1215C19.7664 75.9835 18.1687 75.6 15 75.6C11.8122 75.6 9.94344 76.0192 7.00185 77.119C6.95066 77.1381 6.58016 77.277 6.47198 77.3174C5.72954 77.5944 5.0738 77.8198 4.45483 78H6.35524ZM6.35524 72C3.97726 72.8676 2.42302 73.2 0 73.2L0 72.6C1.72318 72.6 2.98542 72.4277 4.45483 72H6.35524ZM23.2136 72C25.5716 72.8899 27.1507 73.2 30 73.2V72.6C27.9473 72.6 26.5843 72.4373 25.0812 72L23.2136 72ZM0 76.2C2.53215 76.2 4.1155 75.837 6.68172 74.8795C6.79039 74.839 7.16116 74.7 7.21197 74.681C10.0919 73.6043 11.8941 73.2 15 73.2C18.0813 73.2 19.6086 73.5665 22.3886 74.6785C25.2336 75.8165 26.8313 76.2 30 76.2V75.6C26.9187 75.6 25.3914 75.2335 22.6114 74.1215C19.7664 72.9835 18.1687 72.6 15 72.6C11.8122 72.6 9.94344 73.0192 7.00185 74.119C6.95066 74.1381 6.58016 74.277 6.47198 74.3174C3.96706 75.2519 2.44905 75.6 0 75.6L0 76.2Z" fill="#858AFA" stroke="#858AFA" stroke-width="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.35524 72C6.46234 71.9609 6.57112 71.9208 6.68172 71.8795C6.79039 71.839 7.16116 71.7 7.21197 71.681C10.0919 70.6043 11.8941 70.2 15 70.2C18.0813 70.2 19.6086 70.5665 22.3886 71.6785C22.6753 71.7932 22.9494 71.9003 23.2136 72H25.0812C24.3279 71.7808 23.5395 71.4927 22.6114 71.1215C19.7664 69.9835 18.1687 69.6 15 69.6C11.8122 69.6 9.94344 70.0192 7.00185 71.119C6.95066 71.1381 6.58016 71.277 6.47198 71.3174C5.72954 71.5944 5.0738 71.8198 4.45483 72H6.35524ZM6.35524 66C3.97726 66.8676 2.42302 67.2 0 67.2L0 66.6C1.72318 66.6 2.98542 66.4277 4.45483 66H6.35524ZM23.2136 66C25.5716 66.8899 27.1507 67.2 30 67.2V66.6C27.9473 66.6 26.5843 66.4373 25.0812 66L23.2136 66ZM0 70.2C2.53215 70.2 4.1155 69.837 6.68172 68.8795C6.79039 68.839 7.16116 68.7 7.21197 68.681C10.0919 67.6043 11.8941 67.2 15 67.2C18.0813 67.2 19.6086 67.5665 22.3886 68.6785C25.2336 69.8165 26.8313 70.2 30 70.2V69.6C26.9187 69.6 25.3914 69.2335 22.6114 68.1215C19.7664 66.9835 18.1687 66.6 15 66.6C11.8122 66.6 9.94344 67.0192 7.00185 68.119C6.95066 68.1381 6.58016 68.277 6.47198 68.3174C3.96706 69.2519 2.44905 69.6 0 69.6L0 70.2Z" fill="#858AFA" stroke="#858AFA" stroke-width="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.35524 66C6.46234 65.9609 6.57112 65.9208 6.68172 65.8795C6.79039 65.839 7.16116 65.7 7.21197 65.681C10.0919 64.6043 11.8941 64.2 15 64.2C18.0813 64.2 19.6086 64.5665 22.3886 65.6785C22.6753 65.7932 22.9494 65.9003 23.2136 66H25.0812C24.3279 65.7808 23.5395 65.4927 22.6114 65.1215C19.7664 63.9835 18.1687 63.6 15 63.6C11.8122 63.6 9.94344 64.0192 7.00185 65.119C6.95066 65.1381 6.58016 65.277 6.47198 65.3174C5.72954 65.5944 5.0738 65.8198 4.45483 66H6.35524ZM6.35524 60C3.97726 60.8676 2.42302 61.2 0 61.2L0 60.6C1.72318 60.6 2.98542 60.4277 4.45483 60H6.35524ZM23.2136 60C25.5716 60.8899 27.1507 61.2 30 61.2V60.6C27.9473 60.6 26.5843 60.4373 25.0812 60L23.2136 60ZM0 64.2C2.53215 64.2 4.1155 63.837 6.68172 62.8795C6.79039 62.839 7.16116 62.7 7.21197 62.681C10.0919 61.6043 11.8941 61.2 15 61.2C18.0813 61.2 19.6086 61.5665 22.3886 62.6785C25.2336 63.8165 26.8313 64.2 30 64.2V63.6C26.9187 63.6 25.3914 63.2335 22.6114 62.1215C19.7664 60.9835 18.1687 60.6 15 60.6C11.8122 60.6 9.94344 61.0192 7.00185 62.119C6.95066 62.1381 6.58016 62.277 6.47198 62.3174C3.96706 63.2519 2.44905 63.6 0 63.6L0 64.2Z" fill="#858AFA" stroke="#858AFA" stroke-width="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.35524 60C6.46234 59.9609 6.57112 59.9208 6.68172 59.8795C6.79039 59.839 7.16116 59.7 7.21197 59.681C10.0919 58.6043 11.8941 58.2 15 58.2C18.0813 58.2 19.6086 58.5665 22.3886 59.6785C22.6753 59.7932 22.9494 59.9003 23.2136 60H25.0812C24.3279 59.7808 23.5395 59.4927 22.6114 59.1215C19.7664 57.9835 18.1687 57.6 15 57.6C11.8122 57.6 9.94344 58.0192 7.00185 59.119C6.95066 59.1381 6.58016 59.277 6.47198 59.3174C5.72954 59.5944 5.0738 59.8198 4.45483 60H6.35524ZM6.35524 54C3.97726 54.8676 2.42302 55.2 0 55.2L0 54.6C1.72318 54.6 2.98542 54.4277 4.45483 54H6.35524ZM23.2136 54C25.5716 54.8899 27.1507 55.2 30 55.2V54.6C27.9473 54.6 26.5843 54.4373 25.0812 54L23.2136 54ZM0 58.2C2.53215 58.2 4.1155 57.837 6.68172 56.8795C6.79039 56.839 7.16116 56.7 7.21197 56.681C10.0919 55.6043 11.8941 55.2 15 55.2C18.0813 55.2 19.6086 55.5665 22.3886 56.6785C25.2336 57.8165 26.8313 58.2 30 58.2V57.6C26.9187 57.6 25.3914 57.2335 22.6114 56.1215C19.7664 54.9835 18.1687 54.6 15 54.6C11.8122 54.6 9.94344 55.0192 7.00185 56.119C6.95066 56.1381 6.58016 56.277 6.47198 56.3174C3.96706 57.2519 2.44905 57.6 0 57.6L0 58.2Z" fill="#858AFA" stroke="#858AFA" stroke-width="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.35524 54C6.46234 53.9609 6.57112 53.9208 6.68172 53.8795C6.79039 53.839 7.16116 53.7 7.21197 53.681C10.0919 52.6043 11.8941 52.2 15 52.2C18.0813 52.2 19.6086 52.5665 22.3886 53.6785C22.6753 53.7932 22.9494 53.9003 23.2136 54H25.0812C24.3279 53.7808 23.5395 53.4927 22.6114 53.1215C19.7664 51.9835 18.1687 51.6 15 51.6C11.8122 51.6 9.94344 52.0192 7.00185 53.119C6.95066 53.1381 6.58016 53.277 6.47198 53.3174C5.72954 53.5944 5.0738 53.8198 4.45483 54H6.35524ZM6.35524 48C3.97726 48.8676 2.42302 49.2 0 49.2L0 48.6C1.72318 48.6 2.98542 48.4277 4.45483 48H6.35524ZM23.2136 48C25.5716 48.8899 27.1507 49.2 30 49.2V48.6C27.9473 48.6 26.5843 48.4373 25.0812 48L23.2136 48ZM0 52.2C2.53215 52.2 4.1155 51.837 6.68172 50.8795C6.79039 50.839 7.16116 50.7 7.21197 50.681C10.0919 49.6043 11.8941 49.2 15 49.2C18.0813 49.2 19.6086 49.5665 22.3886 50.6785C25.2336 51.8165 26.8313 52.2 30 52.2V51.6C26.9187 51.6 25.3914 51.2335 22.6114 50.1215C19.7664 48.9835 18.1687 48.6 15 48.6C11.8122 48.6 9.94344 49.0192 7.00185 50.119C6.95066 50.1381 6.58016 50.277 6.47198 50.3174C3.96706 51.2519 2.44905 51.6 0 51.6L0 52.2Z" fill="#858AFA" stroke="#858AFA" stroke-width="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.35524 48C6.46234 47.9609 6.57112 47.9208 6.68172 47.8795C6.79039 47.839 7.16116 47.7 7.21197 47.681C10.0919 46.6043 11.8941 46.2 15 46.2C18.0813 46.2 19.6086 46.5665 22.3886 47.6785C22.6753 47.7932 22.9494 47.9003 23.2136 48H25.0812C24.3279 47.7808 23.5395 47.4927 22.6114 47.1215C19.7664 45.9835 18.1687 45.6 15 45.6C11.8122 45.6 9.94344 46.0192 7.00185 47.119C6.95066 47.1381 6.58016 47.277 6.47198 47.3174C5.72954 47.5944 5.0738 47.8198 4.45483 48H6.35524ZM6.35524 42C3.97726 42.8676 2.42302 43.2 0 43.2L0 42.6C1.72318 42.6 2.98542 42.4277 4.45483 42H6.35524ZM23.2136 42C25.5716 42.8899 27.1507 43.2 30 43.2V42.6C27.9473 42.6 26.5843 42.4373 25.0812 42L23.2136 42ZM0 46.2C2.53215 46.2 4.1155 45.837 6.68172 44.8795C6.79039 44.839 7.16116 44.7 7.21197 44.681C10.0919 43.6043 11.8941 43.2 15 43.2C18.0813 43.2 19.6086 43.5665 22.3886 44.6785C25.2336 45.8165 26.8313 46.2 30 46.2V45.6C26.9187 45.6 25.3914 45.2335 22.6114 44.1215C19.7664 42.9835 18.1687 42.6 15 42.6C11.8122 42.6 9.94344 43.0192 7.00185 44.119C6.95066 44.1381 6.58016 44.277 6.47198 44.3174C3.96706 45.2519 2.44905 45.6 0 45.6L0 46.2Z" fill="#858AFA" stroke="#858AFA" stroke-width="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.35524 42C6.46234 41.9609 6.57112 41.9208 6.68172 41.8795C6.79039 41.839 7.16116 41.7 7.21197 41.681C10.0919 40.6043 11.8941 40.2 15 40.2C18.0813 40.2 19.6086 40.5665 22.3886 41.6785C22.6753 41.7932 22.9494 41.9003 23.2136 42H25.0812C24.3279 41.7808 23.5395 41.4927 22.6114 41.1215C19.7664 39.9835 18.1687 39.6 15 39.6C11.8122 39.6 9.94344 40.0192 7.00185 41.119C6.95066 41.1381 6.58016 41.277 6.47198 41.3174C5.72954 41.5944 5.0738 41.8198 4.45483 42H6.35524ZM6.35524 36C3.97726 36.8676 2.42302 37.2 0 37.2L0 36.6C1.72318 36.6 2.98542 36.4277 4.45483 36H6.35524ZM23.2136 36C25.5716 36.8899 27.1507 37.2 30 37.2V36.6C27.9473 36.6 26.5843 36.4373 25.0812 36L23.2136 36ZM0 40.2C2.53215 40.2 4.1155 39.837 6.68172 38.8795C6.79039 38.839 7.16116 38.7 7.21197 38.681C10.0919 37.6043 11.8941 37.2 15 37.2C18.0813 37.2 19.6086 37.5665 22.3886 38.6785C25.2336 39.8165 26.8313 40.2 30 40.2V39.6C26.9187 39.6 25.3914 39.2335 22.6114 38.1215C19.7664 36.9835 18.1687 36.6 15 36.6C11.8122 36.6 9.94344 37.0192 7.00185 38.119C6.95066 38.1381 6.58016 38.277 6.47198 38.3174C3.96706 39.2519 2.44905 39.6 0 39.6L0 40.2Z" fill="#858AFA" stroke="#858AFA" stroke-width="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.35524 36C6.46234 35.9609 6.57112 35.9208 6.68172 35.8795C6.79039 35.839 7.16116 35.7 7.21197 35.681C10.0919 34.6043 11.8941 34.2 15 34.2C18.0813 34.2 19.6086 34.5665 22.3886 35.6785C22.6753 35.7932 22.9494 35.9003 23.2136 36H25.0812C24.3279 35.7808 23.5395 35.4927 22.6114 35.1215C19.7664 33.9835 18.1687 33.6 15 33.6C11.8122 33.6 9.94344 34.0192 7.00185 35.119C6.95066 35.1381 6.58016 35.277 6.47198 35.3174C5.72954 35.5944 5.0738 35.8198 4.45483 36H6.35524ZM6.35524 30C3.97726 30.8676 2.42302 31.2 0 31.2L0 30.6C1.72318 30.6 2.98542 30.4277 4.45483 30H6.35524ZM23.2136 30C25.5716 30.8899 27.1507 31.2 30 31.2V30.6C27.9473 30.6 26.5843 30.4373 25.0812 30L23.2136 30ZM0 34.2C2.53215 34.2 4.1155 33.837 6.68172 32.8795C6.79039 32.839 7.16116 32.7 7.21197 32.681C10.0919 31.6043 11.8941 31.2 15 31.2C18.0813 31.2 19.6086 31.5665 22.3886 32.6785C25.2336 33.8165 26.8313 34.2 30 34.2V33.6C26.9187 33.6 25.3914 33.2335 22.6114 32.1215C19.7664 30.9835 18.1687 30.6 15 30.6C11.8122 30.6 9.94344 31.0192 7.00185 32.119C6.95066 32.1381 6.58016 32.277 6.47198 32.3174C3.96706 33.2519 2.44905 33.6 0 33.6L0 34.2Z" fill="#858AFA" stroke="#858AFA" stroke-width="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.35524 30C6.46234 29.9609 6.57112 29.9208 6.68172 29.8795C6.79039 29.839 7.16116 29.7 7.21197 29.681C10.0919 28.6043 11.8941 28.2 15 28.2C18.0813 28.2 19.6086 28.5665 22.3886 29.6785C22.6753 29.7932 22.9494 29.9003 23.2136 30H25.0812C24.3279 29.7808 23.5395 29.4927 22.6114 29.1215C19.7664 27.9835 18.1687 27.6 15 27.6C11.8122 27.6 9.94344 28.0192 7.00185 29.119C6.95066 29.1381 6.58016 29.277 6.47198 29.3174C5.72954 29.5944 5.0738 29.8198 4.45483 30H6.35524ZM6.35524 24C3.97726 24.8676 2.42302 25.2 0 25.2L0 24.6C1.72318 24.6 2.98542 24.4277 4.45483 24H6.35524ZM23.2136 24C25.5716 24.8899 27.1507 25.2 30 25.2V24.6C27.9473 24.6 26.5843 24.4373 25.0812 24L23.2136 24ZM0 28.2C2.53215 28.2 4.1155 27.837 6.68172 26.8795C6.79039 26.839 7.16116 26.7 7.21197 26.681C10.0919 25.6043 11.8941 25.2 15 25.2C18.0813 25.2 19.6086 25.5665 22.3886 26.6785C25.2336 27.8165 26.8313 28.2 30 28.2V27.6C26.9187 27.6 25.3914 27.2335 22.6114 26.1215C19.7664 24.9835 18.1687 24.6 15 24.6C11.8122 24.6 9.94344 25.0192 7.00185 26.119C6.95066 26.1381 6.58016 26.277 6.47198 26.3174C3.96706 27.2519 2.44905 27.6 0 27.6L0 28.2Z" fill="#858AFA" stroke="#858AFA" stroke-width="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.35524 24C6.46234 23.9609 6.57112 23.9208 6.68172 23.8795C6.79039 23.839 7.16116 23.7 7.21197 23.681C10.0919 22.6043 11.8941 22.2 15 22.2C18.0813 22.2 19.6086 22.5665 22.3886 23.6785C22.6753 23.7932 22.9494 23.9003 23.2136 24H25.0812C24.3279 23.7808 23.5395 23.4927 22.6114 23.1215C19.7664 21.9835 18.1687 21.6 15 21.6C11.8122 21.6 9.94344 22.0192 7.00185 23.119C6.95066 23.1381 6.58016 23.277 6.47198 23.3174C5.72954 23.5944 5.0738 23.8198 4.45483 24H6.35524ZM6.35524 18C3.97726 18.8676 2.42302 19.2 0 19.2L0 18.6C1.72318 18.6 2.98542 18.4277 4.45483 18H6.35524ZM23.2136 18C25.5716 18.8899 27.1507 19.2 30 19.2V18.6C27.9473 18.6 26.5843 18.4373 25.0812 18L23.2136 18ZM0 22.2C2.53215 22.2 4.1155 21.837 6.68172 20.8795C6.79039 20.839 7.16116 20.7 7.21197 20.681C10.0919 19.6043 11.8941 19.2 15 19.2C18.0813 19.2 19.6086 19.5665 22.3886 20.6785C25.2336 21.8165 26.8313 22.2 30 22.2V21.6C26.9187 21.6 25.3914 21.2335 22.6114 20.1215C19.7664 18.9835 18.1687 18.6 15 18.6C11.8122 18.6 9.94344 19.0192 7.00185 20.119C6.95066 20.1381 6.58016 20.277 6.47198 20.3174C3.96706 21.2519 2.44905 21.6 0 21.6L0 22.2Z" fill="#858AFA" stroke="#858AFA" stroke-width="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.35524 18C6.46234 17.9609 6.57112 17.9208 6.68172 17.8795C6.79039 17.839 7.16116 17.7 7.21197 17.681C10.0919 16.6043 11.8941 16.2 15 16.2C18.0813 16.2 19.6086 16.5665 22.3886 17.6785C22.6753 17.7932 22.9494 17.9003 23.2136 18H25.0812C24.3279 17.7808 23.5395 17.4927 22.6114 17.1215C19.7664 15.9835 18.1687 15.6 15 15.6C11.8122 15.6 9.94344 16.0192 7.00185 17.119C6.95066 17.1381 6.58016 17.277 6.47198 17.3174C5.72954 17.5944 5.0738 17.8198 4.45483 18H6.35524ZM6.35524 12C3.97726 12.8676 2.42302 13.2 0 13.2L0 12.6C1.72318 12.6 2.98542 12.4277 4.45483 12H6.35524ZM23.2136 12C25.5716 12.8899 27.1507 13.2 30 13.2V12.6C27.9473 12.6 26.5843 12.4373 25.0812 12L23.2136 12ZM0 16.2C2.53215 16.2 4.1155 15.837 6.68172 14.8795C6.79039 14.839 7.16116 14.7 7.21197 14.681C10.0919 13.6043 11.8941 13.2 15 13.2C18.0813 13.2 19.6086 13.5665 22.3886 14.6785C25.2336 15.8165 26.8313 16.2 30 16.2V15.6C26.9187 15.6 25.3914 15.2335 22.6114 14.1215C19.7664 12.9835 18.1687 12.6 15 12.6C11.8122 12.6 9.94344 13.0192 7.00185 14.119C6.95066 14.1381 6.58016 14.277 6.47198 14.3174C3.96706 15.2519 2.44905 15.6 0 15.6L0 16.2Z" fill="#858AFA" stroke="#858AFA" stroke-width="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.35524 12C6.46234 11.9609 6.57112 11.9208 6.68172 11.8795C6.79039 11.839 7.16116 11.7 7.21197 11.681C10.0919 10.6043 11.8941 10.2 15 10.2C18.0813 10.2 19.6086 10.5665 22.3886 11.6785C22.6753 11.7932 22.9494 11.9003 23.2136 12H25.0812C24.3279 11.7808 23.5395 11.4927 22.6114 11.1215C19.7664 9.98347 18.1687 9.6 15 9.6C11.8122 9.6 9.94344 10.0192 7.00185 11.119C6.95066 11.1381 6.58016 11.277 6.47198 11.3174C5.72954 11.5944 5.0738 11.8198 4.45483 12H6.35524ZM6.35524 6C3.97726 6.86758 2.42302 7.2 0 7.2L0 6.6C1.72318 6.6 2.98542 6.42769 4.45483 6H6.35524ZM23.2136 6C25.5716 6.88993 27.1507 7.2 30 7.2V6.6C27.9473 6.6 26.5843 6.43734 25.0812 6L23.2136 6ZM0 10.2C2.53215 10.2 4.1155 9.83697 6.68172 8.8795C6.79039 8.83895 7.16116 8.7 7.21197 8.681C10.0919 7.60427 11.8941 7.2 15 7.2C18.0813 7.2 19.6086 7.56653 22.3886 8.67854C25.2336 9.81653 26.8313 10.2 30 10.2V9.6C26.9187 9.6 25.3914 9.23347 22.6114 8.12146C19.7664 6.98347 18.1687 6.6 15 6.6C11.8122 6.6 9.94344 7.01922 7.00185 8.119C6.95066 8.13814 6.58016 8.27699 6.47198 8.31735C3.96706 9.25195 2.44905 9.6 0 9.6L0 10.2Z" fill="#858AFA" stroke="#858AFA" stroke-width="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.35524 6C6.46234 5.96092 6.57112 5.92076 6.68172 5.8795C6.79039 5.83895 7.16116 5.7 7.21197 5.681C10.0919 4.60427 11.8941 4.2 15 4.2C18.0813 4.2 19.6086 4.56653 22.3886 5.67854C22.6753 5.79323 22.9494 5.90026 23.2136 6H25.0812C24.3279 5.78083 23.5395 5.49269 22.6114 5.12146C19.7664 3.98347 18.1687 3.6 15 3.6C11.8122 3.6 9.94344 4.01922 7.00185 5.119C6.95066 5.13814 6.58016 5.27699 6.47198 5.31735C5.72954 5.59436 5.0738 5.81984 4.45483 6H6.35524ZM6.35524 0C3.97726 0.867585 2.42302 1.2 0 1.2L0 0.6C1.72318 0.6 2.98542 0.427692 4.45483 0L6.35524 0ZM23.2136 0C25.5716 0.88993 27.1507 1.2 30 1.2V0.6C27.9473 0.6 26.5843 0.437343 25.0812 0L23.2136 0ZM0 4.2C2.53215 4.2 4.1155 3.83697 6.68172 2.8795C6.79039 2.83895 7.16116 2.7 7.21197 2.681C10.0919 1.60427 11.8941 1.2 15 1.2C18.0813 1.2 19.6086 1.56653 22.3886 2.67854C25.2336 3.81653 26.8313 4.2 30 4.2V3.6C26.9187 3.6 25.3914 3.23347 22.6114 2.12146C19.7664 0.983469 18.1687 0.6 15 0.6C11.8122 0.6 9.94344 1.01922 7.00185 2.119C6.95066 2.13814 6.58016 2.27699 6.47198 2.31735C3.96706 3.25195 2.44905 3.6 0 3.6L0 4.2Z" fill="#858AFA" stroke="#858AFA" stroke-width="0.5"/>
+</g>
+<defs>
+<clipPath id="clip0_954_5239">
+<rect width="5" height="80" fill="white" transform="matrix(1 0 0 -1 0 80)"/>
+</clipPath>
+</defs>
+</svg>

app/javascript/mastodon/components/content_warning.tsx

@@ -0,0 +1,15 @@
+import { StatusBanner, BannerVariant } from './status_banner';
+
+export const ContentWarning: React.FC<{
+  text: string;
+  expanded?: boolean;
+  onClick?: () => void;
+}> = ({ text, expanded, onClick }) => (
+  <StatusBanner
+    expanded={expanded}
+    onClick={onClick}
+    variant={BannerVariant.Yellow}
+  >
+    <p dangerouslySetInnerHTML={{ __html: text }} />
+  </StatusBanner>
+);

app/javascript/mastodon/components/filter_warning.tsx

@@ -0,0 +1,23 @@
+import { FormattedMessage } from 'react-intl';
+
+import { StatusBanner, BannerVariant } from './status_banner';
+
+export const FilterWarning: React.FC<{
+  title: string;
+  expanded?: boolean;
+  onClick?: () => void;
+}> = ({ title, expanded, onClick }) => (
+  <StatusBanner
+    expanded={expanded}
+    onClick={onClick}
+    variant={BannerVariant.Blue}
+  >
+    <p>
+      <FormattedMessage
+        id='filter_warning.matches_filter'
+        defaultMessage='Matches filter “{title}”'
+        values={{ title }}
+      />
+    </p>
+  </StatusBanner>
+);

app/javascript/mastodon/components/status.jsx

@@ -13,6 +13,8 @@ import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?re
 import PushPinIcon from '@/material-icons/400-24px/push_pin.svg?react';
 import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
 import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
+import { ContentWarning } from 'mastodon/components/content_warning';
+import { FilterWarning } from 'mastodon/components/filter_warning';
 import { Icon }  from 'mastodon/components/icon';
 import PictureInPicturePlaceholder from 'mastodon/components/picture_in_picture_placeholder';
 import { withOptionalRouter, WithOptionalRouterPropTypes } from 'mastodon/utils/react_router';
@@ -140,7 +142,7 @@ class Status extends ImmutablePureComponent {
 
   state = {
     showMedia: defaultMediaVisibility(this.props.status) && !(this.context?.hideMediaByDefault),
-    forceFilter: undefined,
+    showDespiteFilter: undefined,
   };
 
   componentDidUpdate (prevProps) {
@@ -152,7 +154,7 @@ class Status extends ImmutablePureComponent {
     if (this.props.status?.get('id') !== prevProps.status?.get('id')) {
       this.setState({
         showMedia: defaultMediaVisibility(this.props.status) && !(this.context?.hideMediaByDefault),
-        forceFilter: undefined,
+        showDespiteFilter: undefined,
       });
     }
   }
@@ -325,20 +327,32 @@ class Status extends ImmutablePureComponent {
   };
 
   handleHotkeyToggleHidden = () => {
-    this.props.onToggleHidden(this._properStatus());
+    const { onToggleHidden } = this.props;
+    const status = this._properStatus();
+
+    if (status.get('matched_filters')) {
+      const expandedBecauseOfCW = !status.get('hidden') || status.get('spoiler_text').length === 0;
+      const expandedBecauseOfFilter = this.state.showDespiteFilter;
+
+      if (expandedBecauseOfFilter && !expandedBecauseOfCW) {
+        onToggleHidden(status);
+      } else if (expandedBecauseOfFilter && expandedBecauseOfCW) {
+        onToggleHidden(status);
+        this.handleFilterToggle();
+      } else  {
+        this.handleFilterToggle();
+      }
+    } else {
+      onToggleHidden(status);
+    }
   };
 
   handleHotkeyToggleSensitive = () => {
     this.handleToggleMediaVisibility();
   };
 
-  handleUnfilterClick = e => {
+  handleFilterToggle = () => {
-    this.setState({ forceFilter: false });
+    this.setState(state => ({ ...state, showDespiteFilter: !state.showDespiteFilter }));
-    e.preventDefault();
-  };
-
-  handleFilterClick = () => {
-    this.setState({ forceFilter: true });
   };
 
   _properStatus () {
@@ -396,25 +410,6 @@ class Status extends ImmutablePureComponent {
     const connectReply = nextInReplyToId && nextInReplyToId === status.get('id');
     const matchedFilters = status.get('matched_filters');
 
-    if (this.state.forceFilter === undefined ? matchedFilters : this.state.forceFilter) {
-      const minHandlers = this.props.muted ? {} : {
-        moveUp: this.handleHotkeyMoveUp,
-        moveDown: this.handleHotkeyMoveDown,
-      };
-
-      return (
-        <HotKeys handlers={minHandlers} tabIndex={unfocusable ? null : -1}>
-          <div className='status__wrapper status__wrapper--filtered focusable' tabIndex={unfocusable ? null : 0} ref={this.handleRef}>
-            <FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {matchedFilters.join(', ')}.
-            {' '}
-            <button className='status__wrapper--filtered__button' onClick={this.handleUnfilterClick}>
-              <FormattedMessage id='status.show_filter_reason' defaultMessage='Show anyway' />
-            </button>
-          </div>
-        </HotKeys>
-      );
-    }
-
     if (featured) {
       prepend = (
         <div className='status__prepend'>
@@ -548,7 +543,7 @@ class Status extends ImmutablePureComponent {
     }
 
     const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
-    const expanded = !status.get('hidden') || status.get('spoiler_text').length === 0;
+    const expanded = (!matchedFilters || this.state.showDespiteFilter) && (!status.get('hidden') || status.get('spoiler_text').length === 0);
 
     return (
       <HotKeys handlers={handlers} tabIndex={unfocusable ? null : -1}>
@@ -574,11 +569,15 @@ class Status extends ImmutablePureComponent {
               </a>
             </div>
 
+            {matchedFilters && <FilterWarning title={matchedFilters.join(', ')} expanded={this.state.showDespiteFilter} onClick={this.handleFilterToggle} />}
+
+            {(status.get('spoiler_text').length > 0 && (!matchedFilters || this.state.showDespiteFilter)) && <ContentWarning text={status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml')} expanded={expanded} onClick={this.handleExpandedToggle} />}
+
+            {expanded && (
+              <>
                 <StatusContent
                   status={status}
                   onClick={this.handleClick}
-              expanded={expanded}
-              onExpandedToggle={this.handleExpandedToggle}
                   onTranslate={this.handleTranslate}
                   collapsible
                   onCollapsedToggle={this.handleCollapsedToggle}
@@ -586,10 +585,11 @@ class Status extends ImmutablePureComponent {
                 />
 
                 {media}
+                {hashtagBar}
+              </>
+            )}
 
-            {expanded && hashtagBar}
+            <StatusActionBar scrollKey={scrollKey} status={status} account={account}  {...other} />
-
-            <StatusActionBar scrollKey={scrollKey} status={status} account={account} onFilter={matchedFilters ? this.handleFilterClick : null} {...other} />
           </div>
         </div>
       </HotKeys>

app/javascript/mastodon/components/status_action_bar.jsx

@@ -17,7 +17,6 @@ import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
 import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
 import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
 import StarBorderIcon from '@/material-icons/400-24px/star.svg?react';
-import VisibilityIcon from '@/material-icons/400-24px/visibility.svg?react';
 import RepeatActiveIcon from '@/svg-icons/repeat_active.svg?react';
 import RepeatDisabledIcon from '@/svg-icons/repeat_disabled.svg?react';
 import RepeatPrivateIcon from '@/svg-icons/repeat_private.svg?react';
@@ -61,7 +60,6 @@ const messages = defineMessages({
   admin_status: { id: 'status.admin_status', defaultMessage: 'Open this post in the moderation interface' },
   admin_domain: { id: 'status.admin_domain', defaultMessage: 'Open moderation interface for {domain}' },
   copy: { id: 'status.copy', defaultMessage: 'Copy link to post' },
-  hide: { id: 'status.hide', defaultMessage: 'Hide post' },
   blockDomain: { id: 'account.block_domain', defaultMessage: 'Block domain {domain}' },
   unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unblock domain {domain}' },
   unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
@@ -241,10 +239,6 @@ class StatusActionBar extends ImmutablePureComponent {
     navigator.clipboard.writeText(url);
   };
 
-  handleHideClick = () => {
-    this.props.onFilter();
-  };
-
   render () {
     const { status, relationship, intl, withDismiss, withCounters, scrollKey } = this.props;
     const { signedIn, permissions } = this.props.identity;
@@ -377,10 +371,6 @@ class StatusActionBar extends ImmutablePureComponent {
       reblogIconComponent = RepeatDisabledIcon;
     }
 
-    const filterButton = this.props.onFilter && (
-      <IconButton className='status__action-bar__button' title={intl.formatMessage(messages.hide)} icon='eye' iconComponent={VisibilityIcon} onClick={this.handleHideClick} />
-    );
-
     const isReply = status.get('in_reply_to_account_id') === status.getIn(['account', 'id']);
 
     return (
@@ -390,8 +380,6 @@ class StatusActionBar extends ImmutablePureComponent {
         <IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' iconComponent={status.get('favourited') ? StarIcon : StarBorderIcon} onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
         <IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' iconComponent={status.get('bookmarked') ? BookmarkIcon : BookmarkBorderIcon} onClick={this.handleBookmarkClick} />
 
-        {filterButton}
-
         <DropdownMenuContainer
           scrollKey={scrollKey}
           status={status}

app/javascript/mastodon/components/status_banner.tsx

@@ -0,0 +1,37 @@
+import { FormattedMessage } from 'react-intl';
+
+export enum BannerVariant {
+  Yellow = 'yellow',
+  Blue = 'blue',
+}
+
+export const StatusBanner: React.FC<{
+  children: React.ReactNode;
+  variant: BannerVariant;
+  expanded?: boolean;
+  onClick?: () => void;
+}> = ({ children, variant, expanded, onClick }) => (
+  <div
+    className={
+      variant === BannerVariant.Yellow
+        ? 'content-warning'
+        : 'content-warning content-warning--filter'
+    }
+  >
+    {children}
+
+    <button className='link-button' onClick={onClick}>
+      {expanded ? (
+        <FormattedMessage
+          id='content_warning.hide'
+          defaultMessage='Hide post'
+        />
+      ) : (
+        <FormattedMessage
+          id='content_warning.show'
+          defaultMessage='Show anyway'
+        />
+      )}
+    </button>
+  </div>
+);

app/javascript/mastodon/components/status_content.jsx

@@ -4,7 +4,7 @@ import { PureComponent } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 
 import classnames from 'classnames';
-import { Link, withRouter } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
@@ -15,7 +15,6 @@ import PollContainer from 'mastodon/containers/poll_container';
 import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
 import { autoPlayGif, languages as preloadedLanguages } from 'mastodon/initial_state';
 
-
 const MAX_HEIGHT = 706; // 22px * 32 (+ 2px padding at the top)
 
 /**
@@ -73,8 +72,6 @@ class StatusContent extends PureComponent {
     identity: identityContextPropShape,
     status: ImmutablePropTypes.map.isRequired,
     statusContent: PropTypes.string,
-    expanded: PropTypes.bool,
-    onExpandedToggle: PropTypes.func,
     onTranslate: PropTypes.func,
     onClick: PropTypes.func,
     collapsible: PropTypes.bool,
@@ -87,10 +84,6 @@ class StatusContent extends PureComponent {
     history: PropTypes.object.isRequired
   };
 
-  state = {
-    hidden: true,
-  };
-
   _updateStatusLinks () {
     const node = this.node;
 
@@ -218,17 +211,6 @@ class StatusContent extends PureComponent {
     this.startXY = null;
   };
 
-  handleSpoilerClick = (e) => {
-    e.preventDefault();
-
-    if (this.props.onExpandedToggle) {
-      // The parent manages the state
-      this.props.onExpandedToggle();
-    } else {
-      this.setState({ hidden: !this.state.hidden });
-    }
-  };
-
   handleTranslate = () => {
     this.props.onTranslate();
   };
@@ -240,18 +222,15 @@ class StatusContent extends PureComponent {
   render () {
     const { status, intl, statusContent } = this.props;
 
-    const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
     const renderReadMore = this.props.onClick && status.get('collapsed');
     const contentLocale = intl.locale.replace(/[_-].*/, '');
     const targetLanguages = this.props.languages?.get(status.get('language') || 'und');
     const renderTranslate = this.props.onTranslate && this.props.identity.signedIn && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('search_index').trim().length > 0 && targetLanguages?.includes(contentLocale);
 
     const content = { __html: statusContent ?? getStatusContent(status) };
-    const spoilerContent = { __html: status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml') };
     const language = status.getIn(['translation', 'language']) || status.get('language');
     const classNames = classnames('status__content', {
       'status__content--with-action': this.props.onClick && this.props.history,
-      'status__content--with-spoiler': status.get('spoiler_text').length > 0,
       'status__content--collapsed': renderReadMore,
     });
 
@@ -269,38 +248,7 @@ class StatusContent extends PureComponent {
       <PollContainer pollId={status.get('poll')} lang={language} />
     );
 
-    if (status.get('spoiler_text').length > 0) {
+    if (this.props.onClick) {
-      let mentionsPlaceholder = '';
-
-      const mentionLinks = status.get('mentions').map(item => (
-        <Link to={`/@${item.get('acct')}`} key={item.get('id')} className='status-link mention'>
-          @<span>{item.get('username')}</span>
-        </Link>
-      )).reduce((aggregate, item) => [...aggregate, item, ' '], []);
-
-      const toggleText = hidden ? <FormattedMessage id='status.show_more' defaultMessage='Show more' /> : <FormattedMessage id='status.show_less' defaultMessage='Show less' />;
-
-      if (hidden) {
-        mentionsPlaceholder = <div>{mentionLinks}</div>;
-      }
-
-      return (
-        <div className={classNames} ref={this.setRef} tabIndex={0} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
-          <p style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}>
-            <span dangerouslySetInnerHTML={spoilerContent} className='translate' lang={language} />
-            {' '}
-            <button type='button' className={`status__content__spoiler-link ${hidden ? 'status__content__spoiler-link--show-more' : 'status__content__spoiler-link--show-less'}`} onClick={this.handleSpoilerClick} aria-expanded={!hidden}>{toggleText}</button>
-          </p>
-
-          {mentionsPlaceholder}
-
-          <div tabIndex={!hidden ? 0 : null} className={`status__content__text ${!hidden ? 'status__content__text--visible' : ''} translate`} lang={language} dangerouslySetInnerHTML={content} />
-
-          {!hidden && poll}
-          {translateButton}
-        </div>
-      );
-    } else if (this.props.onClick) {
       return (
         <>
           <div className={classNames} ref={this.setRef} tabIndex={0} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} key='status-content' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>

app/javascript/mastodon/features/notifications_v2/components/embedded_status.tsx

@@ -8,11 +8,13 @@ import type { List as ImmutableList, RecordOf } from 'immutable';
 
 import BarChart4BarsIcon from '@/material-icons/400-24px/bar_chart_4_bars.svg?react';
 import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react';
+import { toggleStatusSpoilers } from 'mastodon/actions/statuses';
 import { Avatar } from 'mastodon/components/avatar';
+import { ContentWarning } from 'mastodon/components/content_warning';
 import { DisplayName } from 'mastodon/components/display_name';
 import { Icon } from 'mastodon/components/icon';
 import type { Status } from 'mastodon/models/status';
-import { useAppSelector } from 'mastodon/store';
+import { useAppSelector, useAppDispatch } from 'mastodon/store';
 
 import { EmbeddedStatusContent } from './embedded_status_content';
 
@@ -23,6 +25,7 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
 }) => {
   const history = useHistory();
   const clickCoordinatesRef = useRef<[number, number] | null>();
+  const dispatch = useAppDispatch();
 
   const status = useAppSelector(
     (state) => state.statuses.get(statusId) as Status | undefined,
@@ -96,15 +99,21 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
     [],
   );
 
+  const handleContentWarningClick = useCallback(() => {
+    dispatch(toggleStatusSpoilers(statusId));
+  }, [dispatch, statusId]);
+
   if (!status) {
     return null;
   }
 
   // Assign status attributes to variables with a forced type, as status is not yet properly typed
   const contentHtml = status.get('contentHtml') as string;
+  const contentWarning = status.get('spoilerHtml') as string;
   const poll = status.get('poll');
   const language = status.get('language') as string;
   const mentions = status.get('mentions') as ImmutableList<Mention>;
+  const expanded = !status.get('hidden') || !contentWarning;
   const mediaAttachmentsSize = (
     status.get('media_attachments') as ImmutableList<unknown>
   ).size;
@@ -124,14 +133,24 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
         <DisplayName account={account} />
       </div>
 
+      {contentWarning && (
+        <ContentWarning
+          text={contentWarning}
+          onClick={handleContentWarningClick}
+          expanded={expanded}
+        />
+      )}
+
+      {(!contentWarning || expanded) && (
         <EmbeddedStatusContent
           className='notification-group__embedded-status__content reply-indicator__content translate'
           content={contentHtml}
           language={language}
           mentions={mentions}
         />
+      )}
 
-      {(poll || mediaAttachmentsSize > 0) && (
+      {expanded && (poll || mediaAttachmentsSize > 0) && (
         <div className='notification-group__embedded-status__attachments reply-indicator__attachments'>
           {!!poll && (
             <>

app/javascript/mastodon/features/status/components/detailed_status.jsx

@@ -10,6 +10,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
 import { AnimatedNumber } from 'mastodon/components/animated_number';
+import { ContentWarning } from 'mastodon/components/content_warning';
 import EditedTimestamp from 'mastodon/components/edited_timestamp';
 import { getHashtagBarForStatus } from 'mastodon/components/hashtag_bar';
 import { Icon }  from 'mastodon/components/icon';
@@ -277,17 +278,20 @@ class DetailedStatus extends ImmutablePureComponent {
             <DisplayName account={status.get('account')} localDomain={this.props.domain} />
           </a>
 
+          {status.get('spoiler_text').length > 0 && <ContentWarning text={status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml')} expanded={expanded} onClick={this.handleExpandedToggle} />}
+
+          {expanded && (
+            <>
               <StatusContent
                 status={status}
-            expanded={!status.get('hidden')}
-            onExpandedToggle={this.handleExpandedToggle}
                 onTranslate={this.handleTranslate}
                 {...statusContentProps}
               />
 
               {media}
-
+              {hashtagBar}
-          {expanded && hashtagBar}
+            </>
+          )}
 
           <div className='detailed-status__meta'>
             <div className='detailed-status__meta__line'>

app/javascript/mastodon/locales/en.json

@@ -192,6 +192,8 @@
   "confirmations.unfollow.confirm": "Unfollow",
   "confirmations.unfollow.message": "Are you sure you want to unfollow {name}?",
   "confirmations.unfollow.title": "Unfollow user?",
+  "content_warning.hide": "Hide post",
+  "content_warning.show": "Show anyway",
   "conversation.delete": "Delete conversation",
   "conversation.mark_as_read": "Mark as read",
   "conversation.open": "View conversation",
@@ -299,6 +301,7 @@
   "filter_modal.select_filter.subtitle": "Use an existing category or create a new one",
   "filter_modal.select_filter.title": "Filter this post",
   "filter_modal.title.status": "Filter a post",
+  "filter_warning.matches_filter": "Matches filter “{title}”",
   "filtered_notifications_banner.pending_requests": "From {count, plural, =0 {no one} one {one person} other {# people}} you may know",
   "filtered_notifications_banner.title": "Filtered notifications",
   "firehose.all": "All",
@@ -785,8 +788,6 @@
   "status.favourite": "Favorite",
   "status.favourites": "{count, plural, one {favorite} other {favorites}}",
   "status.filter": "Filter this post",
-  "status.filtered": "Filtered",
-  "status.hide": "Hide post",
   "status.history.created": "{name} created {date}",
   "status.history.edited": "{name} edited {date}",
   "status.load_more": "Load more",
@@ -814,10 +815,7 @@
   "status.report": "Report @{name}",
   "status.sensitive_warning": "Sensitive content",
   "status.share": "Share",
-  "status.show_filter_reason": "Show anyway",
-  "status.show_less": "Show less",
   "status.show_less_all": "Show less for all",
-  "status.show_more": "Show more",
   "status.show_more_all": "Show more for all",
   "status.show_original": "Show original",
   "status.title.with_attachments": "{user} posted {attachmentCount, plural, one {an attachment} other {{attachmentCount} attachments}}",

app/javascript/styles/mastodon/components.scss

@@ -620,7 +620,7 @@ body > [data-popper-placement] {
 
   .spoiler-input__input {
     padding: 12px 12px - 5px;
-    background: mix($ui-base-color, $ui-highlight-color, 85%);
+    background: rgba($ui-highlight-color, 0.05);
     color: $highlight-text-color;
   }
 
@@ -1383,6 +1383,14 @@ body > [data-popper-placement] {
     }
   }
 
+  .content-warning {
+    margin-bottom: 10px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
   .media-gallery,
   .video-player,
   .audio-player,
@@ -1441,7 +1449,9 @@ body > [data-popper-placement] {
     .picture-in-picture-placeholder,
     .more-from-author,
     .status-card,
-    .hashtag-bar {
+    .hashtag-bar,
+    .content-warning,
+    .filter-warning {
       margin-inline-start: $thread-margin;
       width: calc(100% - $thread-margin);
     }
@@ -1690,6 +1700,14 @@ body > [data-popper-placement] {
     padding: 0;
     margin-bottom: 16px;
   }
+
+  .content-warning {
+    margin-bottom: 16px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
 
 .scrollable > div:first-child .detailed-status {
@@ -10518,39 +10536,53 @@ noscript {
   }
 
   &__embedded-status {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
     cursor: pointer;
 
     &__account {
       display: flex;
       align-items: center;
       gap: 4px;
-      margin-bottom: 8px;
       color: $dark-text-color;
+      font-size: 15px;
+      line-height: 22px;
 
       bdi {
-        color: inherit;
+        color: $darker-text-color;
       }
     }
 
-    .account__avatar {
-      opacity: 0.5;
-    }
-
     &__content {
       display: -webkit-box;
       font-size: 15px;
       line-height: 22px;
-      color: $dark-text-color;
+      color: $darker-text-color;
       -webkit-line-clamp: 4;
       -webkit-box-orient: vertical;
       max-height: 4 * 22px;
       overflow: hidden;
 
+      p {
+        display: none;
+
+        &:first-child {
+          display: initial;
+        }
+      }
+
       p,
       a {
         color: inherit;
       }
     }
+
+    .reply-indicator__attachments {
+      font-size: 15px;
+      line-height: 22px;
+      color: $dark-text-color;
+    }
   }
 }
 
@@ -10625,7 +10657,9 @@ noscript {
   .picture-in-picture-placeholder,
   .more-from-author,
   .status-card,
-  .hashtag-bar {
+  .hashtag-bar,
+  .content-warning,
+  .filter-warning {
     margin-inline-start: $icon-margin;
     width: calc(100% - $icon-margin);
   }
@@ -10833,3 +10867,53 @@ noscript {
     }
   }
 }
+
+.content-warning {
+  background: rgba($ui-highlight-color, 0.05);
+  color: $secondary-text-color;
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+  border-color: rgba($ui-highlight-color, 0.15);
+  padding: 8px (5px + 8px);
+  position: relative;
+  font-size: 15px;
+  line-height: 22px;
+
+  p {
+    margin-bottom: 8px;
+  }
+
+  .link-button {
+    font-size: inherit;
+    line-height: inherit;
+    font-weight: 500;
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    height: 100%;
+    background: url('../images/warning-stripes.svg') repeat-y;
+    width: 5px;
+    top: 0;
+  }
+
+  &::before {
+    border-start-start-radius: 4px;
+    border-end-start-radius: 4px;
+    inset-inline-start: 0;
+  }
+
+  &::after {
+    border-start-end-radius: 4px;
+    border-end-end-radius: 4px;
+    inset-inline-end: 0;
+  }
+
+  &--filter::before,
+  &--filter::after {
+    background-image: url('../images/filter-stripes.svg');
+  }
+}