Merge remote-tracking branch 'soapbox/develop' into events-

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

README.md

@@ -28,6 +28,8 @@ busybox unzip soapbox.zip -o -d /opt/pleroma/instance
 The change will take effect immediately, just refresh your browser tab.
 It's not necessary to restart the Pleroma service.
 
+***For OTP releases,*** *unpack to /var/lib/pleroma instead.*
+
 To remove Soapbox and revert to the default pleroma-fe, simply `rm /opt/pleroma/instance/static/index.html` (you can delete other stuff in there too, but be careful not to delete your own HTML files).
 
 ## :elephant: Deploy on Mastodon

app/application.ts

@@ -1,10 +1,10 @@
-import loadPolyfills from './soapbox/load_polyfills';
+import loadPolyfills from './soapbox/load-polyfills';
 
 // Load iframe event listener
 require('./soapbox/iframe');
 
 // @ts-ignore
-require.context('./images/', true);
+require.context('./assets/images/', true);
 
 // Load stylesheet
 require('react-datepicker/dist/react-datepicker.css');

app/assets/icons/COPYING.md

@@ -1,6 +1,5 @@
 # Custom icons
 
-- fediverse.svg - Modified from Wikipedia, CC0  
 - verified.svg - Created by Alex Gleason. CC0
 
 Fediverse logo: https://en.wikipedia.org/wiki/Fediverse#/media/File:Fediverse_logo_proposal.svg  

app/fonts/soapbox/soapbox.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Generated by IcoMoon</metadata>
-<defs>
-<font id="icomoon" horiz-adv-x="1024">
-<font-face units-per-em="1024" ascent="960" descent="-64" />
-<missing-glyph horiz-adv-x="1024" />
-<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
-<glyph unicode="&#xe900;" glyph-name="spinster" d="M512 857.6c-226.216 0-409.6-183.384-409.6-409.6v0c0-226.216 183.384-409.6 409.6-409.6v0c226.216 0 409.6 183.384 409.6 409.6v0c0 226.216-183.384 409.6-409.6 409.6v0zM525.84 706.224c32.633 0 64.793-3.777 96.48-11.344 31.687-7.095 59.576-17.748 83.696-31.936l-43.264-104.272c-47.294 25.539-93.176 38.304-137.632 38.304-27.903 0-48.239-4.255-61.008-12.768-12.769-8.040-19.152-18.677-19.152-31.92s7.57-23.171 22.704-29.792c15.134-6.621 39.493-13.482 73.072-20.576 37.835-8.040 69.039-16.797 93.632-26.256 25.066-8.986 46.588-23.648 64.56-43.984 18.445-19.863 27.664-47.059 27.664-81.584 0-29.795-8.279-56.744-24.832-80.864s-41.374-43.515-74.48-58.176c-33.106-14.188-73.314-21.28-120.608-21.28-40.2 0-79.205 4.964-117.040 14.896s-68.577 23.175-92.224 39.728l46.112 103.568c22.228-14.661 48.006-26.486 77.328-35.472s58.168-13.472 86.544-13.472c53.915 0 80.864 13.475 80.864 40.432 0 14.188-7.801 24.595-23.408 31.216-15.134 7.094-39.724 14.432-73.776 22-37.362 8.040-68.582 16.551-93.648 25.536-25.066 9.459-46.572 24.352-64.544 44.688s-26.96 47.763-26.96 82.288c0 30.268 8.279 57.464 24.832 81.584 16.553 24.592 41.143 43.988 73.776 58.176 33.106 14.188 73.545 21.28 121.312 21.28z" />
-<glyph unicode="&#xe901;" glyph-name="fediverse" d="M553.99 908.789c-46.369-0.785-83.969-37.261-86.545-83.096l-0.010-0.231c-0.083-1.432-0.13-3.108-0.13-4.794 0-46.987 36.77-85.385 83.105-87.99l0.231-0.010c1.432-0.083 3.107-0.13 4.794-0.13 46.988 0 85.387 36.772 87.99 83.108l0.010 0.231c0.083 1.431 0.13 3.106 0.13 4.791 0 46.988-36.771 85.387-83.108 87.99l-0.231 0.010c-1.441 0.084-3.127 0.132-4.823 0.132-0.497 0-0.993-0.004-1.487-0.012l0.075 0.001zM459.882 805.031l-251.29-127.347c13.547-13.809 23-31.679 26.366-51.617l0.080-0.57 251.287 127.353c-13.545 13.808-22.997 31.675-26.363 51.611l-0.080 0.57zM641.318 775.903c-9.415-17.78-23.636-31.938-40.939-41.021l-0.532-0.254 198.787-199.554c9.415 17.78 23.634 31.938 40.936 41.021l0.532 0.254zM487.306 751.83l-147.023-287.024 43.408-43.576 155.667 303.891c-20.483 3.55-38.302 13.087-52.060 26.716l0.007-0.007zM599.388 734.397c-12.846-6.718-28.060-10.66-44.195-10.66-1.77 0-3.529 0.047-5.276 0.141l0.244-0.010c-3.232 0.199-6.15 0.516-9.026 0.959l0.542-0.069 22.259-142.535 60.737-9.746zM138.038 697.983c-46.37-0.783-83.972-37.26-86.548-83.095l-0.010-0.231c-0.083-1.432-0.13-3.107-0.13-4.794 0-46.988 36.772-85.387 83.108-87.99l0.231-0.010c1.432-0.083 3.107-0.13 4.794-0.13 46.988 0 85.387 36.772 87.99 83.108l0.010 0.231c0.083 1.432 0.13 3.107 0.13 4.794 0 46.988-36.772 85.387-83.108 87.99l-0.231 0.010c-1.43 0.083-3.103 0.13-4.787 0.13-0.51 0-1.018-0.004-1.526-0.013l0.076 0.001zM235.216 624.428c0.752-4.537 1.182-9.766 1.182-15.095 0-1.667-0.042-3.325-0.125-4.972l0.009 0.231c-0.796-13.969-4.43-26.918-10.33-38.52l0.254 0.551 142.645-22.911 28.036 54.751zM479.695 585.167l-28.039-54.757 337.040-54.13c-0.697 4.368-1.096 9.405-1.096 14.535 0 1.678 0.043 3.346 0.127 5.002l-0.009-0.232c0.815 14.158 4.546 27.272 10.597 38.992l-0.254-0.542zM883.076 578.43c-46.37-0.783-83.972-37.26-86.548-83.095l-0.010-0.231c-0.083-1.432-0.13-3.107-0.13-4.794 0-46.988 36.772-85.387 83.108-87.99l0.231-0.010c1.432-0.083 3.107-0.13 4.794-0.13 46.988 0 85.387 36.772 87.99 83.108l0.010 0.231c0.083 1.432 0.13 3.107 0.13 4.794 0 46.988-36.772 85.387-83.108 87.99l-0.231 0.010c-1.438 0.084-3.119 0.131-4.812 0.131-0.501 0-1-0.004-1.499-0.012l0.075 0.001zM225.366 565.098c-9.414-17.777-23.632-31.933-40.931-41.016l-0.532-0.254 227.623-228.511 54.877 27.811zM182.639 523.19c-12.642-6.466-27.577-10.256-43.397-10.256-1.77 0-3.529 0.047-5.276 0.141l0.244-0.010c-3.521 0.199-6.741 0.548-9.909 1.050l0.551-0.072 43.485-278.147c12.642 6.466 27.577 10.256 43.397 10.256 1.77 0 3.529-0.047 5.276-0.141l-0.244 0.010c3.519-0.2 6.737-0.548 9.903-1.050l-0.55 0.072zM576.873 499.359l52.629-336.996c12.457 6.245 27.143 9.902 42.682 9.902 1.773 0 3.535-0.048 5.285-0.142l-0.244 0.010c3.8-0.219 7.286-0.616 10.711-1.192l-0.569 0.079-49.754 318.595zM788.965 474.681l-128.865-65.308 9.501-60.776 145.806 73.896c-13.546 13.809-22.998 31.679-26.363 51.617l-0.080 0.57zM816.386 421.477l-128.362-250.594c20.486-3.55 38.307-13.087 52.065-26.719l-0.007 0.007 128.359 250.591c-20.485 3.551-38.305 13.090-52.062 26.722l0.007-0.007zM302.044 390.153l-74.471-145.382c20.481-3.55 38.298-13.086 52.054-26.714l-0.007 0.007 65.83 128.515zM585.292 371.462l-304.691-154.416c13.549-13.81 23.003-31.682 26.368-51.622l0.080-0.57 287.744 145.83zM525.607 263.696l-54.877-27.811 115.337-115.788c9.415 17.78 23.636 31.938 40.939 41.021l0.532 0.254zM210.049 237.339c-46.369-0.785-83.969-37.261-86.545-83.096l-0.010-0.231c-0.083-1.432-0.13-3.107-0.13-4.794 0-46.988 36.772-85.387 83.108-87.99l0.231-0.010c1.432-0.083 3.107-0.13 4.794-0.13 46.988 0 85.387 36.772 87.99 83.108l0.010 0.231c0.083 1.432 0.13 3.107 0.13 4.794 0 46.988-36.772 85.387-83.108 87.99l-0.231 0.010c-1.438 0.084-3.12 0.132-4.813 0.132-0.501 0-1.002-0.004-1.501-0.013l0.075 0.001zM307.279 163.476c0.72-4.438 1.131-9.554 1.131-14.766 0-1.675-0.042-3.34-0.126-4.993l0.009 0.232c-0.806-14.078-4.495-27.122-10.481-38.793l0.254 0.546 278.1-44.626c-0.721 4.442-1.133 9.563-1.133 14.779 0 1.671 0.042 3.332 0.126 4.983l-0.009-0.232c0.807 14.078 4.497 27.12 10.484 38.79l-0.254-0.546zM670.509 163.451c-46.37-0.783-83.972-37.26-86.548-83.095l-0.010-0.231c-0.083-1.432-0.13-3.107-0.13-4.794 0-46.988 36.772-85.387 83.108-87.99l0.231-0.010c1.432-0.083 3.107-0.13 4.794-0.13 46.988 0 85.387 36.772 87.99 83.108l0.010 0.231c0.083 1.432 0.13 3.107 0.13 4.794 0 46.988-36.772 85.387-83.108 87.99l-0.231 0.010c-1.438 0.084-3.119 0.131-4.812 0.131-0.501 0-1-0.004-1.499-0.012l0.075 0.001z" />
-</font></defs></svg>

app/icons/fediverse.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1792" height="1792" viewBox="0 0 1792 1792" fill="currentColor">
-    <path d="M 343.16176,591.34767 A 171.09965,171.09965 0 0 1 163.0094,752.88799 171.09965,171.09965 0 0 1 1.4690156,572.73567 171.09965,171.09965 0 0 1 181.62138,411.19523 171.09965,171.09965 0 0 1 343.16176,591.34767 Z M 482.96755,1485.6494 A 171.09965,171.09965 0 0 1 302.81519,1647.1895 171.09965,171.09965 0 0 1 141.2748,1467.0372 171.09965,171.09965 0 0 1 321.42717,1305.4967 171.09965,171.09965 0 0 1 482.96755,1485.6494 Z m 893.94285,143.4473 a 171.09965,171.09965 0 0 1 -180.1523,161.5405 171.09965,171.09965 0 0 1 -161.5404,-180.1524 171.09965,171.09965 0 0 1 180.1524,-161.5405 171.09965,171.09965 0 0 1 161.5403,180.1524 z M 1789.5918,823.45087 A 171.09965,171.09965 0 0 1 1609.4395,984.99118 171.09965,171.09965 0 0 1 1447.899,804.83886 171.09965,171.09965 0 0 1 1628.0513,643.29854 171.09965,171.09965 0 0 1 1789.5918,823.45087 Z M 1150.7,182.08661 A 171.09965,171.09965 0 0 1 970.54747,343.627 171.09965,171.09965 0 0 1 809.00715,163.47462 171.09965,171.09965 0 0 1 989.15948,1.9342312 171.09965,171.09965 0 0 1 1150.7,182.08661 Z m -792.52346,371.6819 a 188.20963,188.20963 0 0 1 2.07029,38.5086 188.20963,188.20963 0 0 1 -19.56107,73.71432 l 276.93395,44.47923 54.4306,-106.2947 z m 474.63645,76.2221 -54.43595,106.30538 654.33596,105.0888 a 188.20963,188.20963 0 0 1 -1.8996,-37.47876 188.20963,188.20963 0 0 1 20.0788,-74.64799 z M 1065.1875,340.27205 a 188.20963,188.20963 0 0 1 -95.56964,20.44149 188.20963,188.20963 0 0 1 -16.47175,-1.72883 l 43.21482,276.72059 117.91607,18.92069 z m -43.7109,456.30786 102.1755,654.25059 a 188.20963,188.20963 0 0 1 92.651,-18.9688 188.20963,188.20963 0 0 1 19.6891,2.1609 L 1139.398,815.49535 Z M 794.34712,203.1417 306.48853,450.37661 a 188.20963,188.20963 0 0 1 51.34118,101.31626 L 845.683,304.44741 A 188.20963,188.20963 0 0 1 794.34712,203.1417 Z m 352.24368,56.54894 a 188.20963,188.20963 0 0 1 -80.5121,80.13321 l 385.9286,387.41724 a 188.20963,188.20963 0 0 1 80.5069,-80.13321 z m 339.8804,688.09027 -249.2037,486.50849 a 188.20963,188.20963 0 0 1 101.0656,51.8588 L 1587.5315,999.64494 A 188.20963,188.20963 0 0 1 1486.4712,947.78091 Z M 498.08153,1448.6696 a 188.20963,188.20963 0 0 1 1.9689,37.9111 188.20963,188.20963 0 0 1 -19.85455,74.2528 l 539.90952,86.6376 a 188.20963,188.20963 0 0 1 -1.9742,-37.9162 188.20963,188.20963 0 0 1 19.8598,-74.2477 z M 256.10246,750.31321 a 188.20963,188.20963 0 0 1 -94.02233,19.65712 188.20963,188.20963 0 0 1 -18.16843,-1.89976 l 84.42322,540.00023 a 188.20963,188.20963 0 0 1 94.02233,-19.6571 188.20963,188.20963 0 0 1 18.15773,1.9001 z M 847.58784,306.427 562.15394,863.6618 646.42776,948.26106 948.64274,358.28043 A 188.20963,188.20963 0 0 1 847.58784,306.427 Z m -359.67106,702.1662 -144.57913,282.2484 a 188.20963,188.20963 0 0 1 101.04426,51.8481 l 127.80337,-249.5025 z m 945.31912,-164.10293 -250.1803,126.78949 18.446,117.99084 283.07,-143.4639 A 188.20963,188.20963 0 0 1 1433.2359,844.49027 Z M 1037.8202,1044.882 446.28679,1344.6691 a 188.20963,188.20963 0 0 1 51.34651,101.3273 l 558.6328,-283.1181 z M 339.05298,668.95274 a 188.20963,188.20963 0 0 1 -80.49604,80.12252 l 441.91192,443.63544 106.54017,-53.9931 z m 582.89469,585.14656 -106.54012,53.993 223.91735,224.7922 a 188.20963,188.20963 0 0 1 80.5121,-80.1332 z" fill-opacity=".996"/>
-</svg>

app/images/halloween/spider.svg

@@ -1,69 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="63.161953mm"
-   height="181.12712mm"
-   viewBox="0 0 63.161953 181.12712"
-   version="1.1"
-   id="svg1199"
-   inkscape:version="0.92.4 (unknown)"
-   sodipodi:docname="spider.svg">
-  <defs
-     id="defs1193" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="0.35355339"
-     inkscape:cx="188.63933"
-     inkscape:cy="154.00309"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     inkscape:window-width="1366"
-     inkscape:window-height="705"
-     inkscape:window-x="0"
-     inkscape:window-y="30"
-     inkscape:window-maximized="1"
-     inkscape:snap-global="false"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0" />
-  <metadata
-     id="metadata1196">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-54.223528,-39.965002)">
-    <path
-       style="stroke-width:0.99999994"
-       d="m 329.96094,151.04883 -7.95132,372.20898 c -30.02705,2.9243 -45.57271,12.92382 -64.25977,32.67188 -25.16762,33.38088 -18.43249,69.4298 -0.4707,100.66992 12.24879,17.03193 32.3984,27.97627 53.07033,34.15036 0,0 -5.52814,0.0857 -11.58984,9.46094 -18.91001,-5.43999 -38.07073,-9.95039 -57.14063,-14.82032 -10.49976,0.9523 -28.58163,18.8274 -36.67969,24.9004 0.27746,13.19067 1.67361,27.14135 3.33008,39.15039 1.1699,-1.57002 0.83916,-3.5804 1.03906,-5.40039 0.9,-10.79003 0.60034,-21.66016 1.99024,-32.41016 9.28,-6.03999 17.7906,-13.20072 26.7207,-19.7207 18.99884,1.97067 39.37112,9.36858 55.91016,13.35156 -0.49,2.41999 -1.38047,5.27974 -4.23047,5.67969 -18.4,4.60002 -36.81969,9.10007 -55.17969,13.83007 -4.86555,6.81697 -23.47884,41.76065 -22.16992,48 3.32807,9.25919 3.76668,29.35751 8.58984,35.70899 -0.65616,-11.27353 -1.26587,-23.12102 -2.88086,-33.41016 4.366,-15.53732 14.77165,-31.85507 21.21094,-44.72851 16.36837,-5.03014 33.6873,-8.93673 49.58008,-11.32032 -0.0299,3.31998 -0.081,6.66013 -0.20117,9.99024 -10.89612,8.5036 -30.45632,23.65603 -40.40821,30.44922 -2.57681,15.80044 -3.38605,33.75066 -4.2207,48.55078 2.50279,8.85582 13.19431,23.74406 18.17156,23.90823 -2.93816,-7.30216 -8.51629,-14.68425 -10.88086,-21.31836 -0.17087,-16.87764 2.99403,-32.98356 3.70114,-48.41015 11.61344,-9.80937 25.4679,-15.10577 35.89062,-24.25 2.26541,6.18864 7.32913,9.97253 10.32813,15.05859 -2.15,3.10001 -5.51922,5.79 -5.94922,9.75 2.88,4.37998 6.60955,8.25101 10.68945,11.54102 -0.85,-3.43 -2.26023,-6.68056 -3.24023,-10.06055 l 6.20117,-7.18945 c 10.18753,5.69922 19.39911,4.81707 28.78906,0.75976 2.12,2.45 4.30149,5.11952 5.27149,8.26953 -0.85,3.26 -2.7418,6.14966 -3.5918,9.42969 4.21,-3.40003 8.09071,-7.32883 11.4707,-11.54883 -0.72,-4.08 -4.4693,-6.80104 -5.27929,-10.79101 3.66,-4.43003 7.97023,-8.42941 10.24023,-13.85938 5.68622,5.4072 34.43902,22.24881 34.94922,26.88086 0.36518,16.19209 3.11897,31.74502 2,46.75 -4.46916,8.68536 -7.12999,16.57554 -14.39063,22.67969 9.90723,0.50906 17.4253,-14.74937 21.52152,-22.69328 -0.18697,-17.91233 -0.74645,-33.39521 -1.16992,-49.66992 -13.47001,-10.57002 -27.16094,-20.89017 -40.46094,-31.66016 0.59,-3.81003 0.49976,-7.6583 0.50977,-11.48828 15.73,4.66001 31.80992,8.14868 47.66992,12.38867 7.58475,10.99663 15.5151,31.43552 20.24023,42.75977 0.43698,13.66208 -3.68079,27.5449 -4.08008,40.14062 1.49998,-1.33999 1.6498,-3.42013 2.17969,-5.24023 1.88197,-11.16719 9.61842,-29.63645 8.13086,-37.92969 -6.21997,-14.23003 -11.95978,-28.75009 -18.42969,-42.83008 -19.30273,-6.68031 -40.27482,-12.85569 -58.39062,-17.73047 -0.65,-1.72002 -1.1801,-3.47951 -1.5,-5.26953 17.78,-3.66999 35.60009,-7.40034 53.33008,-11.32031 5.35892,-0.14205 29.14876,22.09172 28.98047,23.98047 1.30016,6.78634 -2.08415,29.71011 1.61914,33.13086 2.05988,-11.02999 3.41097,-22.17002 5.12109,-33.25 -0.32862,-6.33401 -29.16337,-28.29439 -33.91016,-30.79102 -20.42635,4.13166 -40.67884,9.74123 -59.80078,12.63086 -5.16629,-4.96887 -11.64306,-7.41991 -17.4707,-10.33984 26.33,-1.87998 52.09,-16.02008 66.25,-38.58008 9.5235,-13.96814 12.87637,-29.769 13.1992,-45.79102 0.33714,-20.46694 -8.12112,-40.39069 -21.6211,-55.4707 -18.78284,-17.43524 -31.48782,-23.12017 -55.43945,-26.73828 l 6.93151,-372.80078 z"
-       id="path1768"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc"
-       transform="scale(0.26458333)" />
-  </g>
-</svg>

app/images/halloween/twinkle.svg

@@ -1,34 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="svg46269" viewBox="0 0 340.00001 394.2857" height="111.27618mm" width="95.955559mm">
-  <defs id="defs46271">
-    <linearGradient id="linearGradient46839">
-      <stop id="stop46841" offset="0" style="stop-color:#904700;stop-opacity:1;"/>
-      <stop id="stop46843" offset="1" style="stop-color:#904700;stop-opacity:0;"/>
-    </linearGradient>
-    <linearGradient id="linearGradient46831">
-      <stop id="stop46833" offset="0" style="stop-color:#904700;stop-opacity:1;"/>
-      <stop id="stop46835" offset="1" style="stop-color:#904700;stop-opacity:0;"/>
-    </linearGradient>
-    <linearGradient id="linearGradient46823">
-      <stop id="stop46825" offset="0" style="stop-color:#904700;stop-opacity:1;"/>
-      <stop id="stop46827" offset="1" style="stop-color:#904700;stop-opacity:0;"/>
-    </linearGradient>
-    <radialGradient gradientTransform="matrix(4.9019612,0,0,4.9019612,-600.72836,-1264.1473)" gradientUnits="userSpaceOnUse" r="72.85714" fy="330.93362" fx="152.85715" cy="330.93362" cx="152.85715" id="radialGradient46829" xlink:href="#linearGradient46823"/>
-    <radialGradient gradientTransform="matrix(3.3636365,0,0,3.3636365,-602.85717,-938.05096)" gradientUnits="userSpaceOnUse" r="62.857143" fy="429.50507" fx="251.42857" cy="429.50507" cx="251.42857" id="radialGradient46837" xlink:href="#linearGradient46831"/>
-    <radialGradient gradientTransform="matrix(1.7317072,0,0,1.7317072,-145.78397,-287.44272)" gradientUnits="userSpaceOnUse" r="58.57143" fy="470.93369" fx="132.85715" cy="470.93369" cx="132.85715" id="radialGradient46845" xlink:href="#linearGradient46839"/>
-  </defs>
-  <metadata id="metadata46274">
-    <rdf:RDF>
-      <cc:Work rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-        <dc:title/>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g transform="translate(-8.5714264,-218.07648)" id="layer1">
-    <circle r="140" cy="358.07648" cx="148.57143" id="path46817" style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:url(#radialGradient46829);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:20, 5;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"/>
-    <circle r="105.71429" cy="506.64789" cx="242.85715" id="path46819" style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:url(#radialGradient46837);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:20, 5;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"/>
-    <circle r="58.57143" cy="528.07654" cx="84.285713" id="path46821" style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:url(#radialGradient46845);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:20, 5;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"/>
-  </g>
-</svg>

app/soapbox/__fixtures__/intlMessages.json

@@ -87,7 +87,7 @@
     "compose_form.poll.add_option": "Add a choice",
     "compose_form.poll.duration": "Poll duration",
     "compose_form.poll.option_placeholder": "Choice {number}",
-    "compose_form.poll.remove_option": "Remove this choice",
+    "compose_form.poll.remove_option": "Delete",
     "compose_form.poll.type.hint": "Click to toggle poll type. Radio button (default) is single. Checkbox is multiple.",
     "compose_form.publish": "Publish",
     "compose_form.publish_loud": "{publish}!",
@@ -319,6 +319,7 @@
     "poll_button.add_poll": "Add a poll",
     "poll_button.remove_poll": "Remove poll",
     "preferences.fields.auto_play_gif_label": "Auto-play animated GIFs",
+    "preferences.fields.auto_play_video_label": "Auto-play videos",
     "preferences.fields.boost_modal_label": "Show confirmation dialog before reposting",
     "preferences.fields.delete_modal_label": "Show confirmation dialog before deleting a post",
     "preferences.fields.demetricator_label": "Use Demetricator",
@@ -565,7 +566,7 @@
   "compose_form.poll.add_option": "Add a choice",
   "compose_form.poll.duration": "Poll duration",
   "compose_form.poll.option_placeholder": "Choice {number}",
-  "compose_form.poll.remove_option": "Remove this choice",
+  "compose_form.poll.remove_option": "Delete",
   "compose_form.poll.type.hint": "Click to toggle poll type. Radio button (default) is single. Checkbox is multiple.",
   "compose_form.publish": "Publish",
   "compose_form.publish_loud": "{publish}!",

app/soapbox/actions/__tests__/account-notes.test.ts

@@ -2,7 +2,7 @@ import { Map as ImmutableMap } from 'immutable';
 
 import { __stub } from 'soapbox/api';
 import { mockStore, rootState } from 'soapbox/jest/test-helpers';
-import { ReducerRecord, EditRecord } from 'soapbox/reducers/account_notes';
+import { ReducerRecord, EditRecord } from 'soapbox/reducers/account-notes';
 
 import { normalizeAccount, normalizeRelationship } from '../../normalizers';
 import { changeAccountNoteComment, initAccountNoteModal, submitAccountNote } from '../account-notes';

app/soapbox/actions/__tests__/accounts.test.ts

@@ -2,7 +2,7 @@ import { Map as ImmutableMap } from 'immutable';
 
 import { __stub } from 'soapbox/api';
 import { mockStore, rootState } from 'soapbox/jest/test-helpers';
-import { ListRecord, ReducerRecord } from 'soapbox/reducers/user_lists';
+import { ListRecord, ReducerRecord } from 'soapbox/reducers/user-lists';
 
 import { normalizeAccount, normalizeInstance, normalizeRelationship } from '../../normalizers';
 import {

app/soapbox/actions/__tests__/blocks.test.ts

@@ -1,6 +1,6 @@
 import { __stub } from 'soapbox/api';
 import { mockStore, rootState } from 'soapbox/jest/test-helpers';
-import { ListRecord, ReducerRecord as UserListsRecord } from 'soapbox/reducers/user_lists';
+import { ListRecord, ReducerRecord as UserListsRecord } from 'soapbox/reducers/user-lists';
 
 import { expandBlocks, fetchBlocks } from '../blocks';
 

app/soapbox/actions/__tests__/me.test.ts

@@ -7,7 +7,7 @@ import {
   fetchMe, patchMe,
 } from '../me';
 
-jest.mock('../../storage/kv_store', () => ({
+jest.mock('../../storage/kv-store', () => ({
   __esModule: true,
   default: {
     getItemOrError: jest.fn().mockReturnValue(Promise.resolve({})),

app/soapbox/actions/auth.ts

@@ -16,7 +16,8 @@ import { obtainOAuthToken, revokeOAuthToken } from 'soapbox/actions/oauth';
 import { startOnboarding } from 'soapbox/actions/onboarding';
 import snackbar from 'soapbox/actions/snackbar';
 import { custom } from 'soapbox/custom';
-import KVStore from 'soapbox/storage/kv_store';
+import { queryClient } from 'soapbox/queries/client';
+import KVStore from 'soapbox/storage/kv-store';
 import { getLoggedInAccount, parseBaseURL } from 'soapbox/utils/auth';
 import sourceCode from 'soapbox/utils/code';
 import { getFeatures } from 'soapbox/utils/features';
@@ -239,15 +240,25 @@ export const logOut = () =>
       token: state.auth.getIn(['users', account.url, 'access_token']),
     };
 
-    return dispatch(revokeOAuthToken(params)).finally(() => {
-      dispatch({ type: AUTH_LOGGED_OUT, account, standalone });
-      return dispatch(snackbar.success(messages.loggedOut));
-    });
+    return dispatch(revokeOAuthToken(params))
+      .finally(() => {
+        // Clear all stored cache from React Query
+        queryClient.invalidateQueries();
+        queryClient.clear();
+
+        dispatch({ type: AUTH_LOGGED_OUT, account, standalone });
+
+        return dispatch(snackbar.success(messages.loggedOut));
+      });
   };
 
 export const switchAccount = (accountId: string, background = false) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     const account = getState().accounts.get(accountId);
+    // Clear all stored cache from React Query
+    queryClient.invalidateQueries();
+    queryClient.clear();
+
     return dispatch({ type: SWITCH_ACCOUNT, account, background });
   };
 

app/soapbox/actions/compose.ts

@@ -5,12 +5,12 @@ import { defineMessages, IntlShape } from 'react-intl';
 
 import snackbar from 'soapbox/actions/snackbar';
 import api from 'soapbox/api';
-import { search as emojiSearch } from 'soapbox/features/emoji/emoji_mart_search_light';
+import { search as emojiSearch } from 'soapbox/features/emoji/emoji-mart-search-light';
 import { tagHistory } from 'soapbox/settings';
 import { isLoggedIn } from 'soapbox/utils/auth';
 import { getFeatures, parseVersion } from 'soapbox/utils/features';
 import { formatBytes, getVideoDuration } from 'soapbox/utils/media';
-import resizeImage from 'soapbox/utils/resize_image';
+import resizeImage from 'soapbox/utils/resize-image';
 
 import { showAlert, showAlertForError } from './alerts';
 import { useEmoji } from './emojis';
@@ -21,8 +21,8 @@ import { getSettings } from './settings';
 import { createStatus } from './statuses';
 
 import type { History } from 'history';
-import type { Emoji } from 'soapbox/components/autosuggest_emoji';
-import type { AutoSuggestion } from 'soapbox/components/autosuggest_input';
+import type { Emoji } from 'soapbox/components/autosuggest-emoji';
+import type { AutoSuggestion } from 'soapbox/components/autosuggest-input';
 import type { AppDispatch, RootState } from 'soapbox/store';
 import type { Account, APIEntity, Status, Tag } from 'soapbox/types/entities';
 

app/soapbox/actions/consumer-auth.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-import * as BuildConfig from 'soapbox/build_config';
+import * as BuildConfig from 'soapbox/build-config';
 import { isURL } from 'soapbox/utils/auth';
 import sourceCode from 'soapbox/utils/code';
 import { getFeatures } from 'soapbox/utils/features';

app/soapbox/actions/dropdown-menu.ts

@@ -1,4 +1,4 @@
-import type { DropdownPlacement } from 'soapbox/components/dropdown_menu';
+import type { DropdownPlacement } from 'soapbox/components/dropdown-menu';
 
 const DROPDOWN_MENU_OPEN = 'DROPDOWN_MENU_OPEN';
 const DROPDOWN_MENU_CLOSE = 'DROPDOWN_MENU_CLOSE';

app/soapbox/actions/emojis.ts

@@ -1,6 +1,6 @@
 import { saveSettings } from './settings';
 
-import type { Emoji } from 'soapbox/components/autosuggest_emoji';
+import type { Emoji } from 'soapbox/components/autosuggest-emoji';
 import type { AppDispatch } from 'soapbox/store';
 
 const EMOJI_USE = 'EMOJI_USE';

app/soapbox/actions/events.ts

@@ -2,7 +2,7 @@ import { defineMessages, IntlShape } from 'react-intl';
 
 import api, { getLinks } from 'soapbox/api';
 import { formatBytes } from 'soapbox/utils/media';
-import resizeImage from 'soapbox/utils/resize_image';
+import resizeImage from 'soapbox/utils/resize-image';
 
 import { importFetchedAccounts, importFetchedStatus } from './importer';
 import { fetchMedia, uploadMedia } from './media';

app/soapbox/actions/instance.ts

@@ -1,7 +1,7 @@
 import { createAsyncThunk } from '@reduxjs/toolkit';
 import get from 'lodash/get';
 
-import KVStore from 'soapbox/storage/kv_store';
+import KVStore from 'soapbox/storage/kv-store';
 import { RootState } from 'soapbox/store';
 import { getAuthUserUrl } from 'soapbox/utils/auth';
 import { parseVersion } from 'soapbox/utils/features';

app/soapbox/actions/me.ts

@@ -1,4 +1,4 @@
-import KVStore from 'soapbox/storage/kv_store';
+import KVStore from 'soapbox/storage/kv-store';
 import { getAuthUserId, getAuthUserUrl } from 'soapbox/utils/auth';
 
 import api from '../api';

app/soapbox/actions/modals.ts

@@ -1,8 +1,10 @@
+import type { ModalType } from 'soapbox/features/ui/components/modal-root';
+
 export const MODAL_OPEN  = 'MODAL_OPEN';
 export const MODAL_CLOSE = 'MODAL_CLOSE';
 
 /** Open a modal of the given type */
-export function openModal(type: string, props?: any) {
+export function openModal(type: ModalType, props?: any) {
   return {
     type: MODAL_OPEN,
     modalType: type,
@@ -11,7 +13,7 @@ export function openModal(type: string, props?: any) {
 }
 
 /** Close the modal */
-export function closeModal(type?: string) {
+export function closeModal(type?: ModalType) {
   return {
     type: MODAL_CLOSE,
     modalType: type,

app/soapbox/actions/moderation.tsx

@@ -7,7 +7,7 @@ import { openModal } from 'soapbox/actions/modals';
 import snackbar from 'soapbox/actions/snackbar';
 import OutlineBox from 'soapbox/components/outline-box';
 import { Stack, Text } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account_container';
+import AccountContainer from 'soapbox/containers/account-container';
 import { isLocal } from 'soapbox/utils/accounts';
 
 import type { AppDispatch, RootState } from 'soapbox/store';

app/soapbox/actions/mrf.ts

@@ -1,11 +1,11 @@
 import { Map as ImmutableMap, Set as ImmutableSet } from 'immutable';
 
-import ConfigDB from 'soapbox/utils/config_db';
+import ConfigDB from 'soapbox/utils/config-db';
 
 import { fetchConfig, updateConfig } from './admin';
 
 import type { AppDispatch, RootState } from 'soapbox/store';
-import type { Policy } from 'soapbox/utils/config_db';
+import type { Policy } from 'soapbox/utils/config-db';
 
 const simplePolicyMerge = (simplePolicy: Policy, host: string, restrictions: ImmutableMap<string, any>) => {
   return simplePolicy.map((hosts, key) => {

app/soapbox/actions/notifications.ts

@@ -1,14 +1,11 @@
-import {
-  Map as ImmutableMap,
-} from 'immutable';
 import IntlMessageFormat from 'intl-messageformat';
 import 'intl-pluralrules';
 import { defineMessages } from 'react-intl';
 
 import api, { getLinks } from 'soapbox/api';
-import compareId from 'soapbox/compare_id';
 import { getFilters, regexFromFilters } from 'soapbox/selectors';
 import { isLoggedIn } from 'soapbox/utils/auth';
+import { compareId } from 'soapbox/utils/comparators';
 import { getFeatures, parseVersion, PLEROMA } from 'soapbox/utils/features';
 import { unescapeHTML } from 'soapbox/utils/html';
 import { EXCLUDE_TYPES, NOTIFICATION_TYPES } from 'soapbox/utils/notification';
@@ -149,13 +146,13 @@ const updateNotificationsQueue = (notification: APIEntity, intlMessages: Record<
 
 const dequeueNotifications = () =>
   (dispatch: AppDispatch, getState: () => RootState) => {
-    const queuedNotifications = getState().notifications.get('queuedNotifications');
-    const totalQueuedNotificationsCount = getState().notifications.get('totalQueuedNotificationsCount');
+    const queuedNotifications = getState().notifications.queuedNotifications;
+    const totalQueuedNotificationsCount = getState().notifications.totalQueuedNotificationsCount;
 
     if (totalQueuedNotificationsCount === 0) {
       return;
     } else if (totalQueuedNotificationsCount > 0 && totalQueuedNotificationsCount <= MAX_QUEUED_NOTIFICATIONS) {
-      queuedNotifications.forEach((block: APIEntity) => {
+      queuedNotifications.forEach((block) => {
         dispatch(updateNotifications(block.notification));
       });
     } else {
@@ -184,7 +181,7 @@ const expandNotifications = ({ maxId }: Record<string, any> = {}, done: () => an
     const notifications = state.notifications;
     const isLoadingMore = !!maxId;
 
-    if (notifications.get('isLoading')) {
+    if (notifications.isLoading) {
       done();
       return dispatch(noOp);
     }
@@ -207,7 +204,7 @@ const expandNotifications = ({ maxId }: Record<string, any> = {}, done: () => an
       }
     }
 
-    if (!maxId && notifications.get('items').size > 0) {
+    if (!maxId && notifications.items.size > 0) {
       params.since_id = notifications.getIn(['items', 0, 'id']);
     }
 
@@ -306,8 +303,8 @@ const markReadNotifications = () =>
     if (!isLoggedIn(getState)) return;
 
     const state = getState();
-    const topNotificationId: string | undefined = state.notifications.get('items').first(ImmutableMap()).get('id');
-    const lastReadId: string | -1 = state.notifications.get('lastRead');
+    const topNotificationId = state.notifications.items.first()?.id;
+    const lastReadId = state.notifications.lastRead;
     const v = parseVersion(state.instance.version);
 
     if (topNotificationId && (lastReadId === -1 || compareId(topNotificationId, lastReadId) > 0)) {

app/soapbox/actions/push-notifications/registerer.ts

@@ -1,4 +1,4 @@
-import { createPushSubscription, updatePushSubscription } from 'soapbox/actions/push_subscriptions';
+import { createPushSubscription, updatePushSubscription } from 'soapbox/actions/push-subscriptions';
 import { pushNotificationsSetting } from 'soapbox/settings';
 import { getVapidKey } from 'soapbox/utils/auth';
 import { decode as decodeBase64 } from 'soapbox/utils/base64';

app/soapbox/actions/soapbox.ts

@@ -2,7 +2,7 @@ import { createSelector } from 'reselect';
 
 import { getHost } from 'soapbox/actions/instance';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers';
-import KVStore from 'soapbox/storage/kv_store';
+import KVStore from 'soapbox/storage/kv-store';
 import { removeVS16s } from 'soapbox/utils/emoji';
 import { getFeatures } from 'soapbox/utils/features';
 

app/soapbox/api/__mocks__/index.ts

@@ -4,7 +4,7 @@ import LinkHeader from 'http-link-header';
 
 import type { AxiosInstance, AxiosResponse } from 'axios';
 
-const api = jest.requireActual('../api') as Record<string, Function>;
+const api = jest.requireActual('../index') as Record<string, Function>;
 let mocks: Array<Function> = [];
 
 export const __stub = (func: (mock: MockAdapter) => void) => mocks.push(func);

app/soapbox/api/index.ts

@@ -9,18 +9,18 @@ import axios, { AxiosInstance, AxiosResponse } from 'axios';
 import LinkHeader from 'http-link-header';
 import { createSelector } from 'reselect';
 
-import * as BuildConfig from 'soapbox/build_config';
+import * as BuildConfig from 'soapbox/build-config';
 import { RootState } from 'soapbox/store';
 import { getAccessToken, getAppToken, isURL, parseBaseURL } from 'soapbox/utils/auth';
 
 import type MockAdapter from 'axios-mock-adapter';
 
 /**
- Parse Link headers, mostly for pagination.
- @see {@link https://www.npmjs.com/package/http-link-header}
- @param {object} response - Axios response object
- @returns {object} Link object
- */
+  Parse Link headers, mostly for pagination.
+  @see {@link https://www.npmjs.com/package/http-link-header}
+  @param {object} response - Axios response object
+  @returns {object} Link object
+  */
 export const getLinks = (response: AxiosResponse): LinkHeader => {
   return new LinkHeader(response.headers?.link);
 };
@@ -50,11 +50,11 @@ const getAuthBaseURL = createSelector([
 });
 
 /**
- * Base client for HTTP requests.
- * @param {string} accessToken
- * @param {string} baseURL
- * @returns {object} Axios instance
- */
+  * Base client for HTTP requests.
+  * @param {string} accessToken
+  * @param {string} baseURL
+  * @returns {object} Axios instance
+  */
 export const baseClient = (accessToken?: string | null, baseURL: string = ''): AxiosInstance => {
   return axios.create({
     // When BACKEND_URL is set, always use it.
@@ -68,22 +68,22 @@ export const baseClient = (accessToken?: string | null, baseURL: string = ''): A
 };
 
 /**
- * Dumb client for grabbing static files.
- * It uses FE_SUBDIRECTORY and parses JSON if possible.
- * No authorization is needed.
- */
+  * Dumb client for grabbing static files.
+  * It uses FE_SUBDIRECTORY and parses JSON if possible.
+  * No authorization is needed.
+  */
 export const staticClient = axios.create({
   baseURL: BuildConfig.FE_SUBDIRECTORY,
   transformResponse: [maybeParseJSON],
 });
 
 /**
- * Stateful API client.
- * Uses credentials from the Redux store if available.
- * @param {function} getState - Must return the Redux state
- * @param {string} authType - Either 'user' or 'app'
- * @returns {object} Axios instance
- */
+  * Stateful API client.
+  * Uses credentials from the Redux store if available.
+  * @param {function} getState - Must return the Redux state
+  * @param {string} authType - Either 'user' or 'app'
+  * @returns {object} Axios instance
+  */
 export default (getState: () => RootState, authType: string = 'user'): AxiosInstance => {
   const state = getState();
   const accessToken = getToken(state, authType);

app/soapbox/build-config.js

@@ -1,7 +1,7 @@
 // @preval
 /**
  * Build config: configuration set at build time.
- * @module soapbox/build_config
+ * @module soapbox/build-config
  */
 
 const trim = require('lodash/trim');

app/soapbox/components/__mocks__/react-inlinesvg.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 interface IInlineSVG {
   loader?: JSX.Element,

app/soapbox/components/__tests__/autosuggest-emoji.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { render, screen } from '../../jest/test-helpers';
-import AutosuggestEmoji from '../autosuggest_emoji';
+import AutosuggestEmoji from '../autosuggest-emoji';
 
 describe('<AutosuggestEmoji />', () => {
   it('renders native emoji', () => {

app/soapbox/components/__tests__/avatar-overlay.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { normalizeAccount } from 'soapbox/normalizers';
 
 import { render, screen } from '../../jest/test-helpers';
-import AvatarOverlay from '../avatar_overlay';
+import AvatarOverlay from '../avatar-overlay';
 
 import type { ReducerAccount } from 'soapbox/reducers/accounts';
 

app/soapbox/components/__tests__/emoji-selector.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { render, screen } from '../../jest/test-helpers';
-import EmojiSelector from '../emoji_selector';
+import EmojiSelector from '../emoji-selector';
 
 describe('<EmojiSelector />', () => {
   it('renders correctly', () => {

app/soapbox/components/account-search.tsx

@@ -2,7 +2,7 @@ import classNames from 'clsx';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import AutosuggestAccountInput from 'soapbox/components/autosuggest_account_input';
+import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input';
 import Icon from 'soapbox/components/icon';
 
 const messages = defineMessages({

app/soapbox/components/account.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import React from 'react';
 import { Link, useHistory } from 'react-router-dom';
 
-import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
-import VerificationBadge from 'soapbox/components/verification_badge';
+import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
+import VerificationBadge from 'soapbox/components/verification-badge';
 import ActionButton from 'soapbox/features/ui/components/action-button';
 import { useAppSelector, useOnScreen } from 'soapbox/hooks';
 import { getAcct } from 'soapbox/utils/accounts';
@@ -201,7 +201,7 @@ const Account = ({
                 title={account.acct}
                 onClick={(event: React.MouseEvent) => event.stopPropagation()}
               >
-                <div className='flex items-center space-x-1 flex-grow' style={style}>
+                <HStack space={1} alignItems='center' grow style={style}>
                   <Text
                     size='sm'
                     weight='semibold'
@@ -210,7 +210,7 @@ const Account = ({
                   />
 
                   {account.verified && <VerificationBadge />}
-                </div>
+                </HStack>
               </LinkEl>
             </ProfilePopper>
 
@@ -264,7 +264,7 @@ const Account = ({
                 <Text
                   size='sm'
                   dangerouslySetInnerHTML={{ __html: account.note_emojified }}
-                  className='mr-2'
+                  className='mr-2 rtl:ml-2 rtl:mr-0'
                 />
               )}
             </Stack>

app/soapbox/components/announcements/emoji.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import unicodeMapping from 'soapbox/features/emoji/emoji_unicode_mapping_light';
+import unicodeMapping from 'soapbox/features/emoji/emoji-unicode-mapping-light';
 import { useSettings } from 'soapbox/hooks';
 import { joinPublicPath } from 'soapbox/utils/static';
 

app/soapbox/components/announcements/reaction.tsx

@@ -2,7 +2,7 @@ import classNames from 'clsx';
 import React, { useState } from 'react';
 
 import AnimatedNumber from 'soapbox/components/animated-number';
-import unicodeMapping from 'soapbox/features/emoji/emoji_unicode_mapping_light';
+import unicodeMapping from 'soapbox/features/emoji/emoji-unicode-mapping-light';
 
 import Emoji from './emoji';
 

app/soapbox/components/announcements/reactions-bar.tsx

@@ -9,7 +9,7 @@ import { useSettings } from 'soapbox/hooks';
 import Reaction from './reaction';
 
 import type { List as ImmutableList, Map as ImmutableMap } from 'immutable';
-import type { Emoji } from 'soapbox/components/autosuggest_emoji';
+import type { Emoji } from 'soapbox/components/autosuggest-emoji';
 import type { AnnouncementReaction } from 'soapbox/types/entities';
 
 interface IReactionsBar {

app/soapbox/components/attachment_list.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-
-import Icon from 'soapbox/components/icon';
-
-import type { Attachment as AttachmentEntity } from 'soapbox/types/entities';
-
-const filename = (url: string) => url.split('/').pop()!.split('#')[0].split('?')[0];
-
-interface IAttachmentList {
-  media: AttachmentEntity[],
-  compact?: boolean,
-}
-
-const AttachmentList: React.FC<IAttachmentList> = ({ media, compact }) => {
-  if (compact) {
-    return (
-      <div className='attachment-list compact'>
-        <ul className='attachment-list__list'>
-          {media.map(attachment => {
-            const displayUrl = attachment.get('remote_url') || attachment.get('url');
-
-            return (
-              <li key={attachment.get('id')}>
-                <a href={displayUrl} target='_blank' rel='noopener'><Icon id='link' /> {filename(displayUrl)}</a>
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-    );
-  }
-
-  return (
-    <div className='attachment-list'>
-      <div className='attachment-list__icon'>
-        <Icon id='link' />
-      </div>
-
-      <ul className='attachment-list__list'>
-        {media.map(attachment => {
-          const displayUrl = attachment.get('remote_url') || attachment.get('url');
-
-          return (
-            <li key={attachment.get('id')}>
-              <a href={displayUrl} target='_blank' rel='noopener'>{filename(displayUrl)}</a>
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-};
-
-export default AttachmentList;

app/soapbox/components/autosuggest-account-input.tsx

@@ -3,13 +3,13 @@ import throttle from 'lodash/throttle';
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 
 import { accountSearch } from 'soapbox/actions/accounts';
-import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest_input';
+import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input';
 import { useAppDispatch } from 'soapbox/hooks';
 
-import type { Menu } from 'soapbox/components/dropdown_menu';
+import type { Menu } from 'soapbox/components/dropdown-menu';
 import type { InputThemes } from 'soapbox/components/ui/input/input';
 
-const noOp = () => {};
+const noOp = () => { };
 
 interface IAutosuggestAccountInput {
   onChange: React.ChangeEventHandler<HTMLInputElement>,

app/soapbox/components/autosuggest-emoji.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import unicodeMapping from 'soapbox/features/emoji/emoji_unicode_mapping_light';
+import unicodeMapping from 'soapbox/features/emoji/emoji-unicode-mapping-light';
 import { joinPublicPath } from 'soapbox/utils/static';
 
 export type Emoji = {

app/soapbox/components/autosuggest-input.tsx

@@ -4,13 +4,13 @@ import { List as ImmutableList } from 'immutable';
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import AutosuggestEmoji, { Emoji } from 'soapbox/components/autosuggest_emoji';
+import AutosuggestEmoji, { Emoji } from 'soapbox/components/autosuggest-emoji';
 import Icon from 'soapbox/components/icon';
 import { Input } from 'soapbox/components/ui';
-import AutosuggestAccount from 'soapbox/features/compose/components/autosuggest_account';
+import AutosuggestAccount from 'soapbox/features/compose/components/autosuggest-account';
 import { isRtl } from 'soapbox/rtl';
 
-import type { Menu, MenuItem } from 'soapbox/components/dropdown_menu';
+import type { Menu, MenuItem } from 'soapbox/components/dropdown-menu';
 import type { InputThemes } from 'soapbox/components/ui/input/input';
 
 type CursorMatch = [

app/soapbox/components/autosuggest-textarea.tsx

@@ -4,10 +4,10 @@ import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Textarea from 'react-textarea-autosize';
 
-import AutosuggestAccount from '../features/compose/components/autosuggest_account';
+import AutosuggestAccount from '../features/compose/components/autosuggest-account';
 import { isRtl } from '../rtl';
 
-import AutosuggestEmoji, { Emoji } from './autosuggest_emoji';
+import AutosuggestEmoji, { Emoji } from './autosuggest-emoji';
 
 import type { List as ImmutableList } from 'immutable';
 

app/soapbox/components/avatar-overlay.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import StillImage from 'soapbox/components/still_image';
+import StillImage from 'soapbox/components/still-image';
 
 import type { Account as AccountEntity } from 'soapbox/types/entities';
 

app/soapbox/components/avatar.tsx

@@ -1,7 +1,7 @@
 import classNames from 'clsx';
 import React from 'react';
 
-import StillImage from 'soapbox/components/still_image';
+import StillImage from 'soapbox/components/still-image';
 
 import type { Account } from 'soapbox/types/entities';
 

app/soapbox/components/birthday-input.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import IconButton from 'soapbox/components/icon_button';
-import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
+import IconButton from 'soapbox/components/icon-button';
+import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
 import { DatePicker } from 'soapbox/features/ui/util/async-components';
 import { useAppSelector, useFeatures } from 'soapbox/hooks';
 

app/soapbox/components/birthday-panel.tsx

@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 
 import { fetchBirthdayReminders } from 'soapbox/actions/accounts';
 import { Widget } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account_container';
+import AccountContainer from 'soapbox/containers/account-container';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
 const timeToMidnight = () => {

app/soapbox/components/column-header.js

@@ -7,7 +7,7 @@ import { withRouter } from 'react-router-dom';
 // import classNames from 'clsx';
 // import { injectIntl, defineMessages } from 'react-intl';
 // import Icon from 'soapbox/components/icon';
-import SubNavigation from 'soapbox/components/sub_navigation';
+import SubNavigation from 'soapbox/components/sub-navigation';
 
 // const messages = defineMessages({
 //   show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },

app/soapbox/components/copyable-input.tsx

@@ -28,7 +28,7 @@ const CopyableInput: React.FC<ICopyableInput> = ({ value }) => {
         ref={input}
         type='text'
         value={value}
-        className='rounded-r-none'
+        className='rounded-r-none rtl:rounded-l-none rtl:rounded-r-lg'
         outerClassName='flex-grow'
         onClick={selectInput}
         readOnly
@@ -36,7 +36,7 @@ const CopyableInput: React.FC<ICopyableInput> = ({ value }) => {
 
       <Button
         theme='primary'
-        className='mt-1 h-full rounded-l-none rounded-r-lg'
+        className='mt-1 h-full rounded-l-none rounded-r-lg rtl:rounded-l-lg rtl:rounded-r-none'
         onClick={selectInput}
       >
         <FormattedMessage id='input.copy' defaultMessage='Copy' />

app/soapbox/components/display-name.tsx

@@ -1,22 +1,24 @@
-import * as React from 'react';
+import React from 'react';
 
-import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
+import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
 import { useSoapboxConfig } from 'soapbox/hooks';
 
 import { getAcct } from '../utils/accounts';
 
 import Icon from './icon';
 import RelativeTimestamp from './relative-timestamp';
-import VerificationBadge from './verification_badge';
+import { HStack, Text } from './ui';
+import VerificationBadge from './verification-badge';
 
 import type { Account } from 'soapbox/types/entities';
 
 interface IDisplayName {
   account: Account
+  withSuffix?: boolean
   withDate?: boolean
 }
 
-const DisplayName: React.FC<IDisplayName> = ({ account, children, withDate = false }) => {
+const DisplayName: React.FC<IDisplayName> = ({ account, children, withSuffix = true, withDate = false }) => {
   const { displayFqn = false } = useSoapboxConfig();
   const { created_at: createdAt, verified } = account;
 
@@ -28,11 +30,17 @@ const DisplayName: React.FC<IDisplayName> = ({ account, children, withDate = fal
   ) : null;
 
   const displayName = (
-    <span className='display-name__name'>
-      <bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi>
+    <HStack space={1} alignItems='center' grow>
+      <Text
+        size='sm'
+        weight='semibold'
+        truncate
+        dangerouslySetInnerHTML={{ __html: account.display_name_html }}
+      />
+
       {verified && <VerificationBadge />}
       {withDate && joinedAt}
-    </span>
+    </HStack>
   );
 
   const suffix = (<span className='display-name__account'>@{getAcct(account, displayFqn)}</span>);
@@ -42,7 +50,7 @@ const DisplayName: React.FC<IDisplayName> = ({ account, children, withDate = fal
       <HoverRefWrapper accountId={account.get('id')} inline>
         {displayName}
       </HoverRefWrapper>
-      {suffix}
+      {withSuffix && suffix}
       {children}
     </span>
   );

app/soapbox/components/domain.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
-import { unblockDomain } from 'soapbox/actions/domain_blocks';
+import { unblockDomain } from 'soapbox/actions/domain-blocks';
 
-import IconButton from './icon_button';
+import { HStack, IconButton, Text } from './ui';
 
 const messages = defineMessages({
   blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' },
@@ -34,17 +34,12 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
   };
 
   return (
-    <div className='domain'>
-      <div className='domain__wrapper'>
-        <span className='domain__domain-name'>
-          <strong>{domain}</strong>
-        </span>
-
-        <div className='domain__buttons'>
-          <IconButton active src={require('@tabler/icons/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
-        </div>
-      </div>
-    </div>
+    <HStack alignItems='center' justifyContent='between' space={1} className='p-2'>
+      <Text tag='span'>
+        {domain}
+      </Text>
+      <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
+    </HStack>
   );
 };
 

app/soapbox/components/dropdown-menu.tsx

@@ -6,9 +6,9 @@ import { spring } from 'react-motion';
 import Overlay from 'react-overlays/lib/Overlay';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
-import { IconButton, Counter } from 'soapbox/components/ui';
+import { Counter, IconButton } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import Motion from 'soapbox/features/ui/util/optional_motion';
+import Motion from 'soapbox/features/ui/util/optional-motion';
 
 import type { Status } from 'soapbox/types/entities';
 
@@ -196,7 +196,7 @@ class DropdownMenu extends React.PureComponent<IDropdownMenu, IDropdownMenuState
           data-method={isLogout ? 'delete' : undefined}
           title={text}
         >
-          {icon && <SvgIcon src={icon} className='mr-3 h-5 w-5 flex-none' />}
+          {icon && <SvgIcon src={icon} className='mr-3 rtl:ml-3 rtl:mr-0 h-5 w-5 flex-none' />}
 
           <span className='truncate'>{text}</span>
 
@@ -259,6 +259,7 @@ export interface IDropdown extends RouteComponentProps {
   text?: string,
   onShiftClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>,
   children?: JSX.Element,
+  dropdownMenuStyle?: React.CSSProperties,
 }
 
 interface IDropdownState {
@@ -369,7 +370,7 @@ class Dropdown extends React.PureComponent<IDropdown, IDropdownState> {
   }
 
   render() {
-    const { src = require('@tabler/icons/dots.svg'), items, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard = false, pressed, text, children } = this.props;
+    const { src = require('@tabler/icons/dots.svg'), items, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard = false, pressed, text, children, dropdownMenuStyle } = this.props;
     const open = this.state.id === openDropdownId;
 
     return (
@@ -403,7 +404,7 @@ class Dropdown extends React.PureComponent<IDropdown, IDropdownState> {
         )}
 
         <Overlay show={open} placement={dropdownPlacement} target={this.findTarget}>
-          <RouterDropdownMenu items={items} onClose={this.handleClose} openedViaKeyboard={openedViaKeyboard} />
+          <RouterDropdownMenu items={items} onClose={this.handleClose} openedViaKeyboard={openedViaKeyboard} style={dropdownMenuStyle} />
         </Overlay>
       </>
     );

app/soapbox/components/emoji-button-wrapper.tsx

@@ -3,12 +3,12 @@ import React, { useState, useEffect, useRef } from 'react';
 import { usePopper } from 'react-popper';
 import { useDispatch } from 'react-redux';
 
-import { simpleEmojiReact } from 'soapbox/actions/emoji_reacts';
+import { simpleEmojiReact } from 'soapbox/actions/emoji-reacts';
 import { openModal } from 'soapbox/actions/modals';
-import EmojiSelector from 'soapbox/components/ui/emoji-selector/emoji-selector';
+import { EmojiSelector } from 'soapbox/components/ui';
 import { useAppSelector, useOwnAccount, useSoapboxConfig } from 'soapbox/hooks';
-import { isUserTouching } from 'soapbox/is_mobile';
-import { getReactForStatus } from 'soapbox/utils/emoji_reacts';
+import { isUserTouching } from 'soapbox/is-mobile';
+import { getReactForStatus } from 'soapbox/utils/emoji-reacts';
 
 interface IEmojiButtonWrapper {
   statusId: string,