Upgrade to Rails 8.0.2

Before this change, the "Ornamental Lake with Goldies" item would fail
to preview on the item page: the iframe for the animation layer would
display an error page.

The error was:

```
Invalid Content Security Policy script-src: "https://images.neopets.com/cp/items/data/000/000/497/497366_deca9f2827/497366_HTML5 Canvas.js". Directive values must not contain whitespace or semicolons. Please use multiple arguments or other directive methods instead. (ActionDispatch::ContentSecurityPolicy::InvalidDirectiveError)
```

This is because the URL that Neopets sends us for this JS file contains
an unescaped space character. This isn't usually an issue for e.g.
loading a URL in the browser, but it's *not* valid syntax for inclusion
in a Content Security Policy.

In this change, we update our CSP code to parse URLs into
`Addressable::URI` objects, which enables us to call the `normalize!`
method, which fixes oddities like that.

The URL now correctly appears in the CSP as
`https://images.neopets.com/cp/items/data/000/000/497/497366_deca9f2827/497366_HTML5%20Canvas.js`.

.gitignore

@@ -4,6 +4,8 @@ log/*.log
 tmp/**/*
 .env
 .env.*
+/spec/examples.txt
+/.yardoc
 
 /app/assets/builds/*
 !/app/assets/builds/.keep

.husky/pre-commit

@@ -1,4 +1,5 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-yarn lint --max-warnings=0 --fix
+# Run the linter, and all our tests.
+yarn lint --max-warnings=0 --fix && bin/rake test spec

.rspec

@@ -0,0 +1 @@
+--require spec_helper

.ruby-version

@@ -1 +1 @@
-3.3.4
+3.3.7

Gemfile

@@ -1,11 +1,14 @@
 source 'https://rubygems.org'
-ruby '3.3.4'
+ruby '3.3.7'
 
-gem 'rails', '~> 7.1', '>= 7.1.3.4'
+gem 'rails', '~> 8.0', '>= 8.0.1'
 
 # The HTTP server running the Rails instance.
 gem 'falcon', '~> 0.48.0'
 
+# HACK: Workaround for https://github.com/socketry/protocol-rack/issues/20
+gem 'protocol-rack', '~> 0.10.0', '< 0.11.0'
+
 # Our database is MySQL, in both development and production.
 gem 'mysql2', '~> 0.5.5'
 
@@ -19,7 +22,7 @@ gem 'haml', '~> 6.1', '>= 6.1.1'
 gem 'sass-rails', '~> 6.0'
 gem 'terser', '~> 1.1', '>= 1.1.17'
 gem 'react-rails', '~> 2.7', '>= 2.7.1'
-gem 'jsbundling-rails', '~> 1.1'
+gem 'jsbundling-rails', '~> 1.3'
 gem 'turbo-rails', '~> 2.0'
 
 # For authentication.
@@ -33,7 +36,7 @@ gem "omniauth_openid_connect", "~> 0.7.1"
 gem 'will_paginate', '~> 4.0'
 
 # For translation, both for the site UI and for Neopets data.
-gem 'rails-i18n', '~> 7.0', '>= 7.0.7'
+gem 'rails-i18n', '~> 8.0', '>= 8.0.1'
 gem 'http_accept_language', '~> 2.1', '>= 2.1.1'
 
 # For reading and parsing HTML from Neopets.com, like importing Closet pages.
@@ -62,14 +65,14 @@ gem "addressable", "~> 2.8"
 
 # For advanced batching of many HTTP requests.
 gem "async", "~> 2.17", require: false
-gem "async-http", "~> 0.75.0", require: false
+gem "async-http", "~> 0.86.0", require: false
 gem "thread-local", "~> 1.1", require: false
 
 # For debugging.
-gem 'web-console', '~> 4.2', group: :development
-
-# TODO: Review our use of content_tag_for etc and uninstall this!
-gem 'record_tag_helper', '~> 1.0', '>= 1.0.1'
+group :development do
+	gem 'debug', '~> 1.9.2'
+	gem 'web-console', '~> 4.2'
+end
 
 # Reduces boot times through caching; required in config/boot.rb
 gem 'bootsnap', '~> 1.16', require: false
@@ -87,5 +90,15 @@ gem "sentry-rails", "~> 5.12"
 gem "shell", "~> 0.8.1"
 
 # For workspace autocomplete.
-gem "solargraph", "~> 0.50.0", group: :development
-gem "solargraph-rails", "~> 1.1", group: :development
+group :development do
+	gem "solargraph", "~> 0.50.0"
+	gem "solargraph-rails", "~> 1.1"
+end
+
+# For automated tests.
+group :development, :test do
+	gem "rspec-rails", "~> 7.0"
+end
+group :test do
+	gem "webmock", "~> 3.24"
+end

Gemfile.lock

@@ -7,67 +7,67 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (7.2.1)
-      actionpack (= 7.2.1)
-      activesupport (= 7.2.1)
+    actioncable (8.0.2)
+      actionpack (= 8.0.2)
+      activesupport (= 8.0.2)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
       zeitwerk (~> 2.6)
-    actionmailbox (7.2.1)
-      actionpack (= 7.2.1)
-      activejob (= 7.2.1)
-      activerecord (= 7.2.1)
-      activestorage (= 7.2.1)
-      activesupport (= 7.2.1)
+    actionmailbox (8.0.2)
+      actionpack (= 8.0.2)
+      activejob (= 8.0.2)
+      activerecord (= 8.0.2)
+      activestorage (= 8.0.2)
+      activesupport (= 8.0.2)
       mail (>= 2.8.0)
-    actionmailer (7.2.1)
-      actionpack (= 7.2.1)
-      actionview (= 7.2.1)
-      activejob (= 7.2.1)
-      activesupport (= 7.2.1)
+    actionmailer (8.0.2)
+      actionpack (= 8.0.2)
+      actionview (= 8.0.2)
+      activejob (= 8.0.2)
+      activesupport (= 8.0.2)
       mail (>= 2.8.0)
       rails-dom-testing (~> 2.2)
-    actionpack (7.2.1)
-      actionview (= 7.2.1)
-      activesupport (= 7.2.1)
+    actionpack (8.0.2)
+      actionview (= 8.0.2)
+      activesupport (= 8.0.2)
       nokogiri (>= 1.8.5)
-      racc
-      rack (>= 2.2.4, < 3.2)
+      rack (>= 2.2.4)
       rack-session (>= 1.0.1)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
       useragent (~> 0.16)
-    actiontext (7.2.1)
-      actionpack (= 7.2.1)
-      activerecord (= 7.2.1)
-      activestorage (= 7.2.1)
-      activesupport (= 7.2.1)
+    actiontext (8.0.2)
+      actionpack (= 8.0.2)
+      activerecord (= 8.0.2)
+      activestorage (= 8.0.2)
+      activesupport (= 8.0.2)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.2.1)
-      activesupport (= 7.2.1)
+    actionview (8.0.2)
+      activesupport (= 8.0.2)
       builder (~> 3.1)
       erubi (~> 1.11)
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
-    activejob (7.2.1)
-      activesupport (= 7.2.1)
+    activejob (8.0.2)
+      activesupport (= 8.0.2)
       globalid (>= 0.3.6)
-    activemodel (7.2.1)
-      activesupport (= 7.2.1)
-    activerecord (7.2.1)
-      activemodel (= 7.2.1)
-      activesupport (= 7.2.1)
+    activemodel (8.0.2)
+      activesupport (= 8.0.2)
+    activerecord (8.0.2)
+      activemodel (= 8.0.2)
+      activesupport (= 8.0.2)
       timeout (>= 0.4.0)
-    activestorage (7.2.1)
-      actionpack (= 7.2.1)
-      activejob (= 7.2.1)
-      activerecord (= 7.2.1)
-      activesupport (= 7.2.1)
+    activestorage (8.0.2)
+      actionpack (= 8.0.2)
+      activejob (= 8.0.2)
+      activerecord (= 8.0.2)
+      activesupport (= 8.0.2)
       marcel (~> 1.0)
-    activesupport (7.2.1)
+    activesupport (8.0.2)
       base64
+      benchmark (>= 0.3)
       bigdecimal
       concurrent-ruby (~> 1.0, >= 1.3.1)
       connection_pool (>= 2.2.5)
@@ -77,30 +77,31 @@ GEM
       minitest (>= 5.1)
       securerandom (>= 0.3)
       tzinfo (~> 2.0, >= 2.0.5)
+      uri (>= 0.13.1)
     addressable (2.8.7)
       public_suffix (>= 2.0.2, < 7.0)
     aes_key_wrap (1.1.0)
     ast (2.4.2)
-    async (2.17.0)
-      console (~> 1.26)
+    async (2.21.1)
+      console (~> 1.29)
       fiber-annotation
       io-event (~> 1.6, >= 1.6.5)
     async-container (0.18.3)
       async (~> 2.10)
-    async-http (0.75.0)
+    async-http (0.86.0)
       async (>= 2.10.2)
-      async-pool (~> 0.7)
-      io-endpoint (~> 0.11)
-      io-stream (~> 0.4)
-      protocol-http (~> 0.30)
-      protocol-http1 (~> 0.20)
-      protocol-http2 (~> 0.18)
-      traces (>= 0.10)
+      async-pool (~> 0.9)
+      io-endpoint (~> 0.14)
+      io-stream (~> 0.6)
+      metrics (~> 0.12)
+      protocol-http (~> 0.43)
+      protocol-http1 (>= 0.28.1)
+      protocol-http2 (~> 0.22)
+      traces (~> 0.10)
     async-http-cache (0.4.4)
       async-http (~> 0.56)
-    async-pool (0.8.1)
+    async-pool (0.10.2)
       async (>= 1.25)
-      metrics
       traces
     async-service (0.12.0)
       async
@@ -113,8 +114,8 @@ GEM
     backport (1.2.0)
     base64 (0.2.0)
     bcrypt (3.1.20)
-    benchmark (0.3.0)
-    bigdecimal (3.1.8)
+    benchmark (0.4.0)
+    bigdecimal (3.1.9)
     bindata (2.5.0)
     bindex (0.8.1)
     bootsnap (1.18.4)
@@ -122,15 +123,21 @@ GEM
     builder (3.3.0)
     childprocess (5.1.0)
       logger (~> 1.5)
-    concurrent-ruby (1.3.4)
-    connection_pool (2.4.1)
-    console (1.27.0)
+    concurrent-ruby (1.3.5)
+    connection_pool (2.5.0)
+    console (1.29.2)
       fiber-annotation
       fiber-local (~> 1.1)
       json
+    crack (1.0.0)
+      bigdecimal
+      rexml
     crass (1.0.6)
-    csv (3.3.0)
-    date (3.3.4)
+    csv (3.3.2)
+    date (3.4.1)
+    debug (1.9.2)
+      irb (~> 1.10)
+      reline (>= 0.3.8)
     devise (4.9.4)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
@@ -148,9 +155,9 @@ GEM
     e2mmap (0.1.0)
     email_validator (2.2.4)
       activemodel
-    erubi (1.13.0)
-    execjs (2.9.1)
-    falcon (0.48.0)
+    erubi (1.13.1)
+    execjs (2.10.0)
+    falcon (0.48.4)
       async
       async-container (~> 0.18)
       async-http (~> 0.75)
@@ -163,14 +170,15 @@ GEM
       protocol-http (~> 0.31)
       protocol-rack (~> 0.7)
       samovar (~> 2.3)
-    faraday (2.11.0)
-      faraday-net_http (>= 2.0, < 3.4)
+    faraday (2.12.2)
+      faraday-net_http (>= 2.0, < 3.5)
+      json
       logger
     faraday-follow_redirects (0.3.0)
       faraday (>= 1, < 3)
-    faraday-net_http (3.3.0)
-      net-http
-    ffi (1.17.0)
+    faraday-net_http (3.4.0)
+      net-http (>= 0.5.0)
+    ffi (1.17.1)
     fiber-annotation (0.2.0)
     fiber-local (1.1.0)
       fiber-storage
@@ -181,34 +189,36 @@ GEM
       temple (>= 0.8.2)
       thor
       tilt
+    hashdiff (1.1.2)
     hashie (5.0.0)
     http_accept_language (2.1.1)
     httparty (0.22.0)
       csv
       mini_mime (>= 1.0.0)
       multi_xml (>= 0.5.2)
-    i18n (1.14.5)
+    i18n (1.14.7)
       concurrent-ruby (~> 1.0)
-    io-console (0.7.2)
-    io-endpoint (0.13.1)
-    io-event (1.6.5)
-    io-stream (0.4.0)
-    irb (1.14.0)
+    io-console (0.8.0)
+    io-endpoint (0.14.0)
+    io-event (1.7.5)
+    io-stream (0.6.1)
+    irb (1.15.1)
+      pp (>= 0.6.0)
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
     jaro_winkler (1.6.0)
     jsbundling-rails (1.3.1)
       railties (>= 6.0.0)
-    json (2.7.2)
-    json-jwt (1.16.6)
+    json (2.9.1)
+    json-jwt (1.16.7)
       activesupport (>= 4.2)
       aes_key_wrap
       base64
       bindata
       faraday (~> 2.0)
       faraday-follow_redirects
-    kramdown (2.4.0)
-      rexml
+    kramdown (2.5.1)
+      rexml (>= 3.3.9)
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
     language_server-protocol (3.17.0.3)
@@ -218,8 +228,8 @@ GEM
     letter_opener (1.10.0)
       launchy (>= 2.2, < 4)
     localhost (1.3.1)
-    logger (1.6.0)
-    loofah (2.22.0)
+    logger (1.7.0)
+    loofah (2.24.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
     mail (2.8.1)
@@ -229,28 +239,28 @@ GEM
       net-smtp
     mapping (1.1.1)
     marcel (1.0.4)
-    memory_profiler (1.0.2)
-    metrics (0.10.2)
+    memory_profiler (1.1.0)
+    metrics (0.12.1)
     mini_mime (1.1.5)
-    mini_portile2 (2.8.7)
-    minitest (5.25.1)
-    msgpack (1.7.2)
+    mini_portile2 (2.8.8)
+    minitest (5.25.5)
+    msgpack (1.7.5)
     multi_xml (0.7.1)
       bigdecimal (~> 3.1)
     mysql2 (0.5.6)
-    net-http (0.4.1)
+    net-http (0.6.0)
       uri
-    net-imap (0.4.14)
+    net-imap (0.5.6)
       date
       net-protocol
     net-pop (0.1.2)
       net-protocol
     net-protocol (0.2.2)
       timeout
-    net-smtp (0.5.0)
+    net-smtp (0.5.1)
       net-protocol
-    nio4r (2.7.3)
-    nokogiri (1.16.7)
+    nio4r (2.7.4)
+    nokogiri (1.18.6)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
     omniauth (2.1.2)
@@ -263,7 +273,7 @@ GEM
     omniauth_openid_connect (0.7.1)
       omniauth (>= 1.9, < 3)
       openid_connect (~> 2.2)
-    openid_connect (2.3.0)
+    openid_connect (2.3.1)
       activemodel
       attr_required (>= 1.0.0)
       email_validator
@@ -276,31 +286,35 @@ GEM
       tzinfo
       validate_url
       webfinger (~> 2.0)
-    openssl (3.2.0)
+    openssl (3.3.0)
     orm_adapter (0.5.0)
     parallel (1.26.3)
-    parser (3.3.4.2)
+    parser (3.3.6.0)
       ast (~> 2.4.1)
       racc
+    pp (0.6.2)
+      prettyprint
+    prettyprint (0.2.0)
     process-metrics (0.3.0)
       console (~> 1.8)
       json (~> 2)
       samovar (~> 2.1)
-    protocol-hpack (1.5.0)
-    protocol-http (0.33.0)
-    protocol-http1 (0.22.0)
+    protocol-hpack (1.5.1)
+    protocol-http (0.47.1)
+    protocol-http1 (0.28.1)
       protocol-http (~> 0.22)
-    protocol-http2 (0.18.0)
+    protocol-http2 (0.22.0)
       protocol-hpack (~> 1.4)
       protocol-http (~> 0.18)
-    protocol-rack (0.7.0)
-      protocol-http (~> 0.27)
+    protocol-rack (0.10.1)
+      protocol-http (~> 0.37)
       rack (>= 1.0)
-    psych (5.1.2)
+    psych (5.2.3)
+      date
       stringio
     public_suffix (6.0.1)
     racc (1.8.1)
-    rack (3.1.7)
+    rack (3.1.12)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
     rack-mini-profiler (3.3.1)
@@ -312,43 +326,44 @@ GEM
       faraday-follow_redirects
       json-jwt (>= 1.11.0)
       rack (>= 2.1.0)
-    rack-protection (4.0.0)
+    rack-protection (4.1.1)
       base64 (>= 0.1.0)
+      logger (>= 1.6.0)
       rack (>= 3.0.0, < 4)
-    rack-session (2.0.0)
+    rack-session (2.1.0)
+      base64 (>= 0.1.0)
       rack (>= 3.0.0)
-    rack-test (2.1.0)
+    rack-test (2.2.0)
       rack (>= 1.3)
-    rackup (2.1.0)
+    rackup (2.2.1)
       rack (>= 3)
-      webrick (~> 1.8)
-    rails (7.2.1)
-      actioncable (= 7.2.1)
-      actionmailbox (= 7.2.1)
-      actionmailer (= 7.2.1)
-      actionpack (= 7.2.1)
-      actiontext (= 7.2.1)
-      actionview (= 7.2.1)
-      activejob (= 7.2.1)
-      activemodel (= 7.2.1)
-      activerecord (= 7.2.1)
-      activestorage (= 7.2.1)
-      activesupport (= 7.2.1)
+    rails (8.0.2)
+      actioncable (= 8.0.2)
+      actionmailbox (= 8.0.2)
+      actionmailer (= 8.0.2)
+      actionpack (= 8.0.2)
+      actiontext (= 8.0.2)
+      actionview (= 8.0.2)
+      activejob (= 8.0.2)
+      activemodel (= 8.0.2)
+      activerecord (= 8.0.2)
+      activestorage (= 8.0.2)
+      activesupport (= 8.0.2)
       bundler (>= 1.15.0)
-      railties (= 7.2.1)
+      railties (= 8.0.2)
     rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
       minitest
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.6.0)
+    rails-html-sanitizer (1.6.2)
       loofah (~> 2.21)
-      nokogiri (~> 1.14)
-    rails-i18n (7.0.9)
+      nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
+    rails-i18n (8.0.1)
       i18n (>= 0.7, < 2)
-      railties (>= 6.0.0, < 8)
-    railties (7.2.1)
-      actionpack (= 7.2.1)
-      activesupport (= 7.2.1)
+      railties (>= 8.0.0, < 9)
+    railties (8.0.2)
+      actionpack (= 8.0.2)
+      activesupport (= 8.0.2)
       irb (~> 1.13)
       rackup (>= 1.0.0)
       rake (>= 12.2)
@@ -358,7 +373,7 @@ GEM
     rake (13.2.1)
     rbs (2.8.4)
     rdiscount (2.2.7.3)
-    rdoc (6.7.0)
+    rdoc (6.13.1)
       psych (>= 4.0.0)
     react-rails (2.7.1)
       babel-transpiler (>= 0.7.0)
@@ -366,30 +381,43 @@ GEM
       execjs
       railties (>= 3.2)
       tilt
-    record_tag_helper (1.0.1)
-      actionview (>= 5)
-    regexp_parser (2.9.2)
-    reline (0.5.9)
+    regexp_parser (2.10.0)
+    reline (0.6.0)
       io-console (~> 0.5)
     responders (3.1.1)
       actionpack (>= 5.2)
       railties (>= 5.2)
     reverse_markdown (2.1.1)
       nokogiri
-    rexml (3.3.6)
-      strscan
-    rubocop (1.65.1)
+    rexml (3.4.0)
+    rspec-core (3.13.2)
+      rspec-support (~> 3.13.0)
+    rspec-expectations (3.13.3)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.13.0)
+    rspec-mocks (3.13.2)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.13.0)
+    rspec-rails (7.1.0)
+      actionpack (>= 7.0)
+      activesupport (>= 7.0)
+      railties (>= 7.0)
+      rspec-core (~> 3.13)
+      rspec-expectations (~> 3.13)
+      rspec-mocks (~> 3.13)
+      rspec-support (~> 3.13)
+    rspec-support (3.13.2)
+    rubocop (1.70.0)
       json (~> 2.3)
       language_server-protocol (>= 3.17.0)
       parallel (~> 1.10)
       parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
-      regexp_parser (>= 2.4, < 3.0)
-      rexml (>= 3.2.5, < 4.0)
-      rubocop-ast (>= 1.31.1, < 2.0)
+      regexp_parser (>= 2.9.3, < 3.0)
+      rubocop-ast (>= 1.36.2, < 2.0)
       ruby-progressbar (~> 1.7)
-      unicode-display_width (>= 2.4.0, < 3.0)
-    rubocop-ast (1.32.1)
+      unicode-display_width (>= 2.4.0, < 4.0)
+    rubocop-ast (1.37.0)
       parser (>= 3.3.1.0)
     ruby-progressbar (1.13.0)
     samovar (2.3.0)
@@ -408,11 +436,11 @@ GEM
       sprockets (> 3.0)
       sprockets-rails
       tilt
-    securerandom (0.3.1)
-    sentry-rails (5.19.0)
+    securerandom (0.4.1)
+    sentry-rails (5.22.1)
       railties (>= 5.0)
-      sentry-ruby (~> 5.19.0)
-    sentry-ruby (5.19.0)
+      sentry-ruby (~> 5.22.1)
+    sentry-ruby (5.22.1)
       bigdecimal
       concurrent-ruby (~> 1.0, >= 1.0.2)
     shell (0.8.1)
@@ -445,8 +473,7 @@ GEM
       activesupport (>= 6.1)
       sprockets (>= 3.0.0)
     stackprof (0.2.26)
-    stringio (3.1.1)
-    strscan (3.1.0)
+    stringio (3.1.6)
     swd (2.0.3)
       activesupport (>= 3)
       attr_required (>= 0.0.5)
@@ -454,22 +481,23 @@ GEM
       faraday-follow_redirects
     sync (0.5.0)
     temple (0.10.3)
-    terser (1.2.3)
+    terser (1.2.4)
       execjs (>= 0.3.0, < 3)
-    thor (1.3.1)
+    thor (1.3.2)
     thread-local (1.1.0)
-    tilt (2.4.0)
-    timeout (0.4.1)
-    traces (0.13.1)
-    turbo-rails (2.0.6)
+    tilt (2.5.0)
+    timeout (0.4.3)
+    traces (0.14.1)
+    turbo-rails (2.0.11)
       actionpack (>= 6.0.0)
-      activejob (>= 6.0.0)
       railties (>= 6.0.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    unicode-display_width (2.5.0)
-    uri (0.13.1)
-    useragent (0.16.10)
+    unicode-display_width (3.1.3)
+      unicode-emoji (~> 4.0, >= 4.0.4)
+    unicode-emoji (4.0.4)
+    uri (1.0.3)
+    useragent (0.16.11)
     validate_url (1.0.15)
       activemodel (>= 3.0.0)
       public_suffix
@@ -484,13 +512,17 @@ GEM
       activesupport
       faraday (~> 2.0)
       faraday-follow_redirects
-    webrick (1.8.1)
-    websocket-driver (0.7.6)
+    webmock (3.24.0)
+      addressable (>= 2.8.0)
+      crack (>= 0.3.2)
+      hashdiff (>= 0.4.0, < 2.0.0)
+    websocket-driver (0.7.7)
+      base64
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
     will_paginate (4.0.1)
-    yard (0.9.36)
-    zeitwerk (2.6.17)
+    yard (0.9.37)
+    zeitwerk (2.7.2)
 
 PLATFORMS
   ruby
@@ -499,8 +531,9 @@ DEPENDENCIES
   RocketAMF!
   addressable (~> 2.8)
   async (~> 2.17)
-  async-http (~> 0.75.0)
+  async-http (~> 0.86.0)
   bootsnap (~> 1.16)
+  debug (~> 1.9.2)
   devise (~> 4.9, >= 4.9.2)
   devise-encryptable (~> 0.2.0)
   dotenv-rails (~> 2.8, >= 2.8.1)
@@ -508,7 +541,7 @@ DEPENDENCIES
   haml (~> 6.1, >= 6.1.1)
   http_accept_language (~> 2.1, >= 2.1.1)
   httparty (~> 0.22.0)
-  jsbundling-rails (~> 1.1)
+  jsbundling-rails (~> 1.3)
   letter_opener (~> 1.8, >= 1.8.1)
   memory_profiler (~> 1.0)
   mysql2 (~> 0.5.5)
@@ -517,13 +550,14 @@ DEPENDENCIES
   omniauth-rails_csrf_protection (~> 1.0)
   omniauth_openid_connect (~> 0.7.1)
   parallel (~> 1.23)
+  protocol-rack (~> 0.10.0, < 0.11.0)
   rack-attack (~> 6.7)
   rack-mini-profiler (~> 3.1)
-  rails (~> 7.1, >= 7.1.3.4)
-  rails-i18n (~> 7.0, >= 7.0.7)
+  rails (~> 8.0, >= 8.0.1)
+  rails-i18n (~> 8.0, >= 8.0.1)
   rdiscount (~> 2.2, >= 2.2.7.1)
   react-rails (~> 2.7, >= 2.7.1)
-  record_tag_helper (~> 1.0, >= 1.0.1)
+  rspec-rails (~> 7.0)
   sanitize (~> 6.0, >= 6.0.2)
   sass-rails (~> 6.0)
   sentry-rails (~> 5.12)
@@ -537,10 +571,11 @@ DEPENDENCIES
   thread-local (~> 1.1)
   turbo-rails (~> 2.0)
   web-console (~> 4.2)
+  webmock (~> 3.24)
   will_paginate (~> 4.0)
 
 RUBY VERSION
-   ruby 3.3.4p94
+   ruby 3.3.7p123
 
 BUNDLED WITH
    2.5.18

app/assets/config/manifest.js

@@ -1,5 +1,6 @@
 //= link_tree ../images
 //= link_tree ../javascripts .js
+//= link_tree ../../../vendor/javascript .js
 //= link_tree ../stylesheets .css
 //= link_directory ../fonts .otf
 //= link_tree ../builds

app/assets/javascripts/ajax_auth.js

@@ -1,20 +0,0 @@
-(function () {
-  var CSRFProtection;
-  var token = $('meta[name="csrf-token"]').attr("content");
-  if (token) {
-    CSRFProtection = function (xhr, settings) {
-      var sendToken =
-        typeof settings.useCSRFProtection === "undefined" || // default to true
-        settings.useCSRFProtection;
-      if (sendToken) {
-        xhr.setRequestHeader("X-CSRF-Token", token);
-      }
-    };
-  } else {
-    CSRFProtection = $.noop;
-  }
-
-  $.ajaxSetup({
-    beforeSend: CSRFProtection,
-  });
-})();

app/assets/javascripts/closet_hangers/petpage.js

@@ -1,8 +0,0 @@
-(function () {
-  function setChecked() {
-    var el = $(this);
-    el.closest("li").toggleClass("checked", el.is(":checked"));
-  }
-
-  $("#petpage-closet-lists input").click(setChecked).each(setChecked);
-})();

app/assets/javascripts/closet_lists/form.js

@@ -1,7 +1,5 @@
 document.addEventListener("change", ({ target }) => {
 	if (target.matches('select[name="closet_list[visibility]"]')) {
-		target
-			.closest("form")
-			.setAttribute("data-list-visibility", target.value);
+		target.closest("form").setAttribute("data-list-visibility", target.value);
 	}
 });

app/assets/javascripts/fundraising/donations/show.js

@@ -1,6 +1,6 @@
-(function() {
-  $('span.choose-outfit select').change(function(e) {
-    var select = $(this);
-    select.closest('li').find('input[type=text]').val(select.val());
-  });
+(function () {
+	$("span.choose-outfit select").change(function (e) {
+		var select = $(this);
+		select.closest("li").find("input[type=text]").val(select.val());
+	});
 })();

app/assets/javascripts/items/show.js

@@ -1,86 +1,115 @@
 // When the species face picker changes, update and submit the main picker form.
 document.addEventListener("change", (e) => {
-    if (!e.target.matches("species-face-picker")) return;
+	if (!e.target.matches("species-face-picker")) return;
 
-    try {
-        const mainPickerForm = document.querySelector(
-            "#item-preview species-color-picker form",
-        );
-        const mainSpeciesField = mainPickerForm.querySelector(
-            "[name='preview[species_id]']",
-        );
-        mainSpeciesField.value = e.target.value;
-        mainPickerForm.requestSubmit(); // `submit` doesn't get captured by Turbo!
-    } catch (error) {
-        console.error("Couldn't update species picker: ", error);
-    }
+	try {
+		const mainPickerForm = document.querySelector(
+			"#item-preview species-color-picker form",
+		);
+		const mainSpeciesField = mainPickerForm.querySelector(
+			"[name='preview[species_id]']",
+		);
+		mainSpeciesField.value = e.target.value;
+		mainPickerForm.requestSubmit(); // `submit` doesn't get captured by Turbo!
+	} catch (error) {
+		console.error("Couldn't update species picker: ", error);
+	}
 });
 
 // If the preview frame fails to load, try a full pageload.
 document.addEventListener("turbo:frame-missing", (e) => {
-    if (!e.target.matches("#item-preview")) return;
+	if (!e.target.matches("#item-preview")) return;
 
-    e.detail.visit(e.detail.response.url);
-    e.preventDefault();
+	e.detail.visit(e.detail.response.url);
+	e.preventDefault();
 });
 
 class SpeciesColorPicker extends HTMLElement {
-    #internals;
+	#internals;
 
-    constructor() {
-        super();
-        this.#internals = this.attachInternals();
-    }
+	constructor() {
+		super();
+		this.#internals = this.attachInternals();
+	}
 
-    connectedCallback() {
-        // Listen for changes to auto-submit the form, then tell CSS about it!
-        this.addEventListener("change", this.#handleChange);
-        this.#internals.states.add("auto-loading");
-    }
+	connectedCallback() {
+		// Listen for changes to auto-submit the form, then tell CSS about it!
+		this.addEventListener("change", this.#handleChange);
+		this.#internals.states.add("auto-loading");
+	}
 
-    #handleChange(e) {
-        this.querySelector("form").requestSubmit();
-    }
+	#handleChange(e) {
+		this.querySelector("form").requestSubmit();
+	}
 }
 
 class SpeciesFacePicker extends HTMLElement {
-    connectedCallback() {
-        this.addEventListener("click", this.#handleClick);
-    }
+	connectedCallback() {
+		this.addEventListener("click", this.#handleClick);
+	}
 
-    get value() {
-        return this.querySelector("input[type=radio]:checked")?.value;
-    }
+	get value() {
+		return this.querySelector("input[type=radio]:checked")?.value;
+	}
 
-    #handleClick(e) {
-        if (e.target.matches("input[type=radio]")) {
-            this.dispatchEvent(new Event("change", { bubbles: true }));
-        }
-    }
+	#handleClick(e) {
+		if (e.target.matches("input[type=radio]")) {
+			this.dispatchEvent(new Event("change", { bubbles: true }));
+		}
+	}
 }
 
 class SpeciesFacePickerOptions extends HTMLElement {
-    static observedAttributes = ["inert", "aria-hidden"];
+	static observedAttributes = ["inert", "aria-hidden"];
 
-    connectedCallback() {
-        // Once this component is loaded, we stop being inert and aria-hidden. We're ready!
-        this.#activate();
-    }
+	connectedCallback() {
+		// Once this component is loaded, we stop being inert and aria-hidden. We're ready!
+		this.#activate();
+	}
 
-    attributeChangedCallback() {
-        // If a Turbo Frame tries to morph us into being inert again, activate again!
-        // (It's important that the server's HTML always return `inert`, for progressive
-        // enhancement; and it's important to morph this element, so radio focus state
-        // is preserved. To thread that needle, we have to monitor and remove!)
-        this.#activate();
-    }
+	attributeChangedCallback() {
+		// If a Turbo Frame tries to morph us into being inert again, activate again!
+		// (It's important that the server's HTML always return `inert`, for progressive
+		// enhancement; and it's important to morph this element, so radio focus state
+		// is preserved. To thread that needle, we have to monitor and remove!)
+		this.#activate();
+	}
 
-    #activate() {
-        this.removeAttribute("inert");
-        this.removeAttribute("aria-hidden");
-    }
+	#activate() {
+		this.removeAttribute("inert");
+		this.removeAttribute("aria-hidden");
+	}
+}
+
+// TODO: If it ever gets wide support, remove this in favor of the CSS rule
+//       `interpolate-size: allow-keywords`, to animate directly from `auto`.
+//       https://drafts.csswg.org/css-values-5/#valdef-interpolate-size-allow-keywords
+class MeasuredContainer extends HTMLElement {
+	static observedAttributes = ["style"];
+
+	connectedCallback() {
+		setTimeout(() => this.#measure(), 0);
+	}
+
+	attributeChangedCallback() {
+		// When `--natural-width` gets morphed away by Turbo, measure it again!
+		if (this.style.getPropertyValue("--natural-width") === "") {
+			this.#measure();
+		}
+	}
+
+	#measure() {
+		// Find our `<measured-content>` child, and set our natural width as
+		// `var(--natural-width)` in the context of our CSS styles.
+		const content = this.querySelector("measured-content");
+		if (content == null) {
+			throw new Error(`<measured-container> must contain a <measured-content>`);
+		}
+		this.style.setProperty("--natural-width", content.offsetWidth + "px");
+	}
 }
 
 customElements.define("species-color-picker", SpeciesColorPicker);
 customElements.define("species-face-picker", SpeciesFacePicker);
 customElements.define("species-face-picker-options", SpeciesFacePickerOptions);
+customElements.define("measured-container", MeasuredContainer);

app/assets/javascripts/magic-magnifier.js

@@ -0,0 +1,36 @@
+class MagicMagnifier extends HTMLElement {
+	#internals = this.attachInternals();
+
+	connectedCallback() {
+		setTimeout(() => this.#attachLens(), 0);
+		this.addEventListener("mousemove", this.#onMouseMove);
+	}
+
+	#attachLens() {
+		const lens = document.createElement("magic-magnifier-lens");
+		lens.inert = true;
+		lens.useContent(this.children);
+		this.appendChild(lens);
+	}
+
+	#onMouseMove(e) {
+		const lens = this.querySelector("magic-magnifier-lens");
+		const rect = this.getBoundingClientRect();
+		const x = e.clientX - rect.left;
+		const y = e.clientY - rect.top;
+		this.style.setProperty("--magic-magnifier-x", x + "px");
+		this.style.setProperty("--magic-magnifier-y", y + "px");
+		this.#internals.states.add("ready");
+	}
+}
+
+class MagicMagnifierLens extends HTMLElement {
+	useContent(contentNodes) {
+		for (const contentNode of contentNodes) {
+			this.appendChild(contentNode.cloneNode(true));
+		}
+	}
+}
+
+customElements.define("magic-magnifier", MagicMagnifier);
+customElements.define("magic-magnifier-lens", MagicMagnifierLens);

app/assets/javascripts/outfit-viewer.js

@@ -21,10 +21,6 @@ class OutfitViewer extends HTMLElement {
 			this.#setIsPlaying(playPauseToggle.checked);
 			this.#setIsPlayingCookie(playPauseToggle.checked);
 		});
-
-		// Tell the CSS our first frame has rendered, which we use for loading
-		// state transitions.
-		this.#internals.states.add("after-first-frame");
 	}
 
 	#setIsPlaying(isPlaying) {
@@ -108,9 +104,7 @@ class OutfitLayer extends HTMLElement {
 			this.#setStatus("loading");
 			this.#sendMessageToIframe({ type: "requestStatus" });
 			window.addEventListener("message", (m) => this.#onMessage(m));
-			this.iframe.addEventListener("error", () =>
-				this.#setStatus("error"),
-			);
+			this.iframe.addEventListener("error", () => this.#setStatus("error"));
 		} else {
 			console.warn(`<outfit-layer> contained no image or iframe: `, this);
 		}
@@ -137,8 +131,7 @@ class OutfitLayer extends HTMLElement {
 			}
 		} else {
 			throw new Error(
-				`<outfit-layer> got unexpected message: ` +
-					JSON.stringify(data),
+				`<outfit-layer> got unexpected message: ` + JSON.stringify(data),
 			);
 		}
 	}

app/assets/javascripts/outfits/new.js

@@ -1,272 +1,253 @@
 (function () {
-  function petImage(id, size) {
-    return "https://pets.neopets.com/" + id + "/1/" + size + ".png";
-  }
+	function petImage(id, size) {
+		return "https://pets.neopets.com/" + id + "/1/" + size + ".png";
+	}
 
-  var PetQuery = {},
-    query_string = document.location.hash || document.location.search;
+	var PetQuery = {},
+		query_string = document.location.hash || document.location.search;
 
-  $.each(query_string.substr(1).split("&"), function () {
-    var split_piece = this.split("=");
-    if (split_piece.length == 2) {
-      PetQuery[split_piece[0]] = split_piece[1];
-    }
-  });
+	for (const [key, value] of new URLSearchParams(query_string).entries()) {
+		PetQuery[key] = value;
+	}
 
-  if (PetQuery.name) {
-    if (PetQuery.species && PetQuery.color) {
-      $("#pet-query-notice-template")
-        .tmpl({
-          pet_name: PetQuery.name,
-          pet_image_url: petImage("cpn/" + PetQuery.name, 1),
-        })
-        .prependTo("#container");
-    }
-  }
+	if (PetQuery.name) {
+		if (PetQuery.species && PetQuery.color) {
+			var image_url = petImage("cpn/" + PetQuery.name, 1);
+			if (PetQuery.name.startsWith("@")) {
+				image_url = petImage("cp/" + PetQuery.name.substr(1), 1);
+			}
+			$("#pet-query-notice-template")
+				.tmpl({
+					pet_name: PetQuery.name,
+					pet_image_url: image_url,
+				})
+				.prependTo("#container");
+		}
+	}
 
-  var preview_el = $("#pet-preview"),
-    img_el = preview_el.find("img"),
-    response_el = preview_el.find("span");
+	var preview_el = $("#pet-preview"),
+		img_el = preview_el.find("img"),
+		response_el = preview_el.find("span");
 
-  var defaultPreviewUrl = img_el.attr("src");
+	var defaultPreviewUrl = img_el.attr("src");
 
-  preview_el.click(function () {
-    Preview.Job.current.visit();
-  });
+	preview_el.click(function () {
+		Preview.Job.current.visit();
+	});
 
-  var Preview = {
-    clear: function () {
-      if (typeof Preview.Job.fallback != "undefined")
-        Preview.Job.fallback.setAsCurrent();
-    },
-    displayLoading: function () {
-      preview_el.addClass("loading");
-      response_el.text("Loading...");
-    },
-    failed: function () {
-      preview_el.addClass("hidden");
-    },
-    notFound: function (key, options) {
-      Preview.failed();
-      response_el.empty();
-      $("#preview-" + key + "-template")
-        .tmpl(options)
-        .appendTo(response_el);
-    },
-    updateWithName: function (name_el) {
-      var name = name_el.val(),
-        job;
-      if (name) {
-        currentName = name;
-        if (!Preview.Job.current || name != Preview.Job.current.name) {
-          job = new Preview.Job.Name(name);
-          job.setAsCurrent();
-          Preview.displayLoading();
-        }
-      } else {
-        Preview.clear();
-      }
-    },
-  };
+	var Preview = {
+		clear: function () {
+			if (typeof Preview.Job.fallback != "undefined")
+				Preview.Job.fallback.setAsCurrent();
+		},
+		displayLoading: function () {
+			preview_el.addClass("loading");
+			response_el.text("Loading...");
+		},
+		failed: function () {
+			preview_el.addClass("hidden");
+		},
+		notFound: function (key, options) {
+			Preview.failed();
+			response_el.empty();
+			$("#preview-" + key + "-template")
+				.tmpl(options)
+				.appendTo(response_el);
+		},
+		updateWithName: function (name_el) {
+			var name = name_el.val(),
+				job;
+			if (name) {
+				currentName = name;
+				if (!Preview.Job.current || name != Preview.Job.current.name) {
+					job = new Preview.Job.Name(name);
+					job.setAsCurrent();
+					Preview.displayLoading();
+				}
+			} else {
+				Preview.clear();
+			}
+		},
+	};
 
-  function loadNotable() {
-    // TODO: add HTTPS to notables
-    // $.getJSON('https://notables.openneo.net/api/1/days/ago/1?callback=?', function (response) {
-    //   var notables = response.notables;
-    //   var i = Math.floor(Math.random() * notables.length);
-    //   Preview.Job.fallback = new Preview.Job.Name(notables[i].petName);
-    //   if(!Preview.Job.current) {
-    //     Preview.Job.fallback.setAsCurrent();
-    //   }
-    // });
-    if (!Preview.Job.current) {
-      Preview.Job.fallback.setAsCurrent();
-    }
-  }
+	function loadFeature() {
+		$.getJSON("/donations/features", function (features) {
+			if (features.length > 0) {
+				var feature = features[Math.floor(Math.random() * features.length)];
+				Preview.Job.fallback = new Preview.Job.Feature(feature);
+				if (!Preview.Job.current) {
+					Preview.Job.fallback.setAsCurrent();
+				}
+			}
+		});
+	}
 
-  function loadFeature() {
-    $.getJSON("/donations/features", function (features) {
-      if (features.length > 0) {
-        var feature = features[Math.floor(Math.random() * features.length)];
-        Preview.Job.fallback = new Preview.Job.Feature(feature);
-        if (!Preview.Job.current) {
-          Preview.Job.fallback.setAsCurrent();
-        }
-      } else {
-        loadNotable();
-      }
-    });
-  }
+	loadFeature();
 
-  loadFeature();
+	Preview.Job = function (key, base) {
+		var job = this,
+			quality = 2;
+		job.loading = false;
 
-  Preview.Job = function (key, base) {
-    var job = this,
-      quality = 2;
-    job.loading = false;
+		function getImageSrc() {
+			if (base === "cp" || base === "cpn") {
+				return petImage(base + "/" + key, quality);
+			} else if (base === "url") {
+				return key;
+			} else {
+				throw new Error("unrecognized image base " + base);
+			}
+		}
 
-    function getImageSrc() {
-      if (key.substr(0, 3) === "a:-") {
-        // lol lazy code for prank image :P
-        // TODO: HTTPS?
-        return (
-          "https://swfimages.impress.openneo.net" +
-          "/biology/000/000/0-2/" +
-          key.substr(2) +
-          "/300x300.png"
-        );
-      } else if (base === "cp" || base === "cpn") {
-        return petImage(base + "/" + key, quality);
-      } else if (base === "url") {
-        return key;
-      } else {
-        throw new Error("unrecognized image base " + base);
-      }
-    }
+		function load() {
+			job.loading = true;
+			img_el.attr("src", getImageSrc());
+		}
 
-    function load() {
-      job.loading = true;
-      img_el.attr("src", getImageSrc());
-    }
+		this.increaseQualityIfPossible = function () {
+			if (quality == 2) {
+				quality = 4;
+				load();
+			}
+		};
 
-    this.increaseQualityIfPossible = function () {
-      if (quality == 2) {
-        quality = 4;
-        load();
-      }
-    };
+		this.setAsCurrent = function () {
+			Preview.Job.current = job;
+			load();
+		};
 
-    this.setAsCurrent = function () {
-      Preview.Job.current = job;
-      load();
-    };
+		this.notFound = function () {
+			Preview.notFound("pet-not-found");
+		};
+	};
 
-    this.notFound = function () {
-      Preview.notFound("pet-not-found");
-    };
-  };
+	Preview.Job.Name = function (name) {
+		this.name = name;
+		if (name.startsWith("@")) {
+			// This is an image hash "pet name".
+			Preview.Job.apply(this, [name.substr(1), "cp"]);
+		} else {
+			// This is a normal pet name.
+			Preview.Job.apply(this, [name, "cpn"]);
+		}
 
-  Preview.Job.Name = function (name) {
-    this.name = name;
-    Preview.Job.apply(this, [name, "cpn"]);
+		this.visit = function () {
+			$(".main-pet-name").val(this.name).closest("form").submit();
+		};
+	};
 
-    this.visit = function () {
-      $(".main-pet-name").val(this.name).closest("form").submit();
-    };
-  };
+	Preview.Job.Hash = function (hash, form) {
+		Preview.Job.apply(this, [hash, "cp"]);
 
-  Preview.Job.Hash = function (hash, form) {
-    Preview.Job.apply(this, [hash, "cp"]);
+		this.visit = function () {
+			window.location =
+				"/wardrobe?color=" +
+				form.find(".color").val() +
+				"&species=" +
+				form.find(".species").val();
+		};
+	};
 
-    this.visit = function () {
-      window.location =
-        "/wardrobe?color=" +
-        form.find(".color").val() +
-        "&species=" +
-        form.find(".species").val();
-    };
-  };
+	Preview.Job.Feature = function (feature) {
+		Preview.Job.apply(this, [feature.outfit_image_url, "url"]);
+		this.name = "Thanks for donating, " + feature.donor_name + "!"; // TODO: i18n
 
-  Preview.Job.Feature = function (feature) {
-    Preview.Job.apply(this, [feature.outfit_image_url, "url"]);
-    this.name = "Thanks for donating, " + feature.donor_name + "!"; // TODO: i18n
+		this.visit = function () {
+			window.location = "/donate";
+		};
 
-    this.visit = function () {
-      window.location = "/donate";
-    };
+		this.notFound = function () {
+			// The outfit thumbnail hasn't generated or is missing or something.
+			// Let's fall back to a boring image for now.
+			var boring = new Preview.Job.Feature({
+				donor_name: feature.donor_name,
+				outfit_image_url: defaultPreviewUrl,
+			});
+			boring.setAsCurrent();
+		};
+	};
 
-    this.notFound = function () {
-      // The outfit thumbnail hasn't generated or is missing or something.
-      // Let's fall back to a boring image for now.
-      var boring = new Preview.Job.Feature({
-        donor_name: feature.donor_name,
-        outfit_image_url: defaultPreviewUrl,
-      });
-      boring.setAsCurrent();
-    };
-  };
+	$(function () {
+		var previewWithNameTimeout;
 
-  $(function () {
-    var previewWithNameTimeout;
+		var name_el = $(".main-pet-name");
+		name_el.val(PetQuery.name);
+		Preview.updateWithName(name_el);
 
-    var name_el = $(".main-pet-name");
-    name_el.val(PetQuery.name);
-    Preview.updateWithName(name_el);
+		name_el.keyup(function () {
+			if (previewWithNameTimeout && Preview.Job.current) {
+				clearTimeout(previewWithNameTimeout);
+				Preview.Job.current.loading = false;
+			}
+			var name_el = $(this);
+			previewWithNameTimeout = setTimeout(function () {
+				Preview.updateWithName(name_el);
+			}, 250);
+		});
 
-    name_el.keyup(function () {
-      if (previewWithNameTimeout && Preview.Job.current) {
-        clearTimeout(previewWithNameTimeout);
-        Preview.Job.current.loading = false;
-      }
-      var name_el = $(this);
-      previewWithNameTimeout = setTimeout(function () {
-        Preview.updateWithName(name_el);
-      }, 250);
-    });
+		img_el
+			.load(function () {
+				if (Preview.Job.current.loading) {
+					Preview.Job.loading = false;
+					Preview.Job.current.increaseQualityIfPossible();
+					preview_el
+						.removeClass("loading")
+						.removeClass("hidden")
+						.addClass("loaded");
+					response_el.text(Preview.Job.current.name);
+				}
+			})
+			.error(function () {
+				if (Preview.Job.current.loading) {
+					Preview.Job.loading = false;
+					Preview.Job.current.notFound();
+				}
+			});
 
-    img_el
-      .load(function () {
-        if (Preview.Job.current.loading) {
-          Preview.Job.loading = false;
-          Preview.Job.current.increaseQualityIfPossible();
-          preview_el
-            .removeClass("loading")
-            .removeClass("hidden")
-            .addClass("loaded");
-          response_el.text(Preview.Job.current.name);
-        }
-      })
-      .error(function () {
-        if (Preview.Job.current.loading) {
-          Preview.Job.loading = false;
-          Preview.Job.current.notFound();
-        }
-      });
+		$(".species, .color").change(function () {
+			var type = {},
+				nameComponents = {};
+			var form = $(this).closest("form");
+			form.find("select").each(function () {
+				var el = $(this),
+					selectedEl = el.children(":selected"),
+					key = el.attr("name");
+				type[key] = selectedEl.val();
+				nameComponents[key] = selectedEl.text();
+			});
+			name = nameComponents.color + " " + nameComponents.species;
+			Preview.displayLoading();
+			$.ajax({
+				url:
+					"/species/" +
+					type.species +
+					"/colors/" +
+					type.color +
+					"/pet_type.json",
+				dataType: "json",
+				success: function (data) {
+					var job;
+					if (data) {
+						job = new Preview.Job.Hash(data.image_hash, form);
+						job.name = name;
+						job.setAsCurrent();
+					} else {
+						Preview.notFound("pet-type-not-found", {
+							color_name: nameComponents.color,
+							species_name: nameComponents.species,
+						});
+					}
+				},
+			});
+		});
 
-    $(".species, .color").change(function () {
-      var type = {},
-        nameComponents = {};
-      var form = $(this).closest("form");
-      form.find("select").each(function () {
-        var el = $(this),
-          selectedEl = el.children(":selected"),
-          key = el.attr("name");
-        type[key] = selectedEl.val();
-        nameComponents[key] = selectedEl.text();
-      });
-      name = nameComponents.color + " " + nameComponents.species;
-      Preview.displayLoading();
-      $.ajax({
-        url:
-          "/species/" +
-          type.species +
-          "/colors/" +
-          type.color +
-          "/pet_type.json",
-        dataType: "json",
-        success: function (data) {
-          var job;
-          if (data) {
-            job = new Preview.Job.Hash(data.image_hash, form);
-            job.name = name;
-            job.setAsCurrent();
-          } else {
-            Preview.notFound("pet-type-not-found", {
-              color_name: nameComponents.color,
-              species_name: nameComponents.species,
-            });
-          }
-        },
-      });
-    });
+		$(".load-pet-to-wardrobe").submit(function (e) {
+			if ($(this).find(".main-pet-name").val() === "" && Preview.Job.current) {
+				e.preventDefault();
+				Preview.Job.current.visit();
+			}
+		});
+	});
 
-    $(".load-pet-to-wardrobe").submit(function (e) {
-      if ($(this).find(".main-pet-name").val() === "" && Preview.Job.current) {
-        e.preventDefault();
-        Preview.Job.current.visit();
-      }
-    });
-  });
-
-  $("#latest-contribution-created-at").timeago();
+	$("#latest-contribution-created-at").timeago();
 })();

app/assets/javascripts/pet_states/support-outfit-viewer.js

@@ -0,0 +1,46 @@
+class SupportOutfitViewer extends HTMLElement {
+	#internals = this.attachInternals();
+
+	connectedCallback() {
+		this.addEventListener("mouseenter", this.#onMouseEnter, { capture: true });
+		this.addEventListener("mouseleave", this.#onMouseLeave, { capture: true });
+		this.addEventListener("click", this.#onClick);
+		this.#internals.states.add("ready");
+	}
+
+	// When a row is hovered, highlight its corresponding outfit viewer layer.
+	#onMouseEnter(e) {
+		if (!e.target.matches("tr")) return;
+
+		const id = e.target.querySelector("[data-field=id]").innerText;
+		const layers = this.querySelectorAll(
+			`outfit-viewer [data-asset-id="${CSS.escape(id)}"]`,
+		);
+		for (const layer of layers) {
+			layer.setAttribute("highlighted", "");
+		}
+	}
+
+	// When a row is unhovered, unhighlight its corresponding outfit viewer layer.
+	#onMouseLeave(e) {
+		if (!e.target.matches("tr")) return;
+
+		const id = e.target.querySelector("[data-field=id]").innerText;
+		const layers = this.querySelectorAll(
+			`outfit-viewer [data-asset-id="${CSS.escape(id)}"]`,
+		);
+		for (const layer of layers) {
+			layer.removeAttribute("highlighted");
+		}
+	}
+
+	// When clicking a row, redirect the click to the first link.
+	#onClick(e) {
+		const row = e.target.closest("tr");
+		if (row == null) return;
+
+		row.querySelector("[data-field=links] a").click();
+	}
+}
+
+customElements.define("support-outfit-viewer", SupportOutfitViewer);

app/assets/javascripts/pets/bulk.js

@@ -1,208 +1,110 @@
-var DEBUG = document.location.search.substr(0, 6) == "?debug";
-
-function petThumbnailUrl(pet_name) {
-  // if first character is "@", use the hash url
-  if (pet_name[0] == "@") {
-    return "https://pets.neopets.com/cp/" + pet_name.substr(1) + "/1/1.png";
-  }
-
-  return "https://pets.neopets.com/cpn/" + pet_name + "/1/1.png";
-}
-
-/* Needed items form */
-(function () {
-  var UI = {};
-  UI.form = $("#needed-items-form");
-  UI.alert = $("#needed-items-alert");
-  UI.pet_name_field = $("#needed-items-pet-name-field");
-  UI.pet_thumbnail = $("#needed-items-pet-thumbnail");
-  UI.pet_header = $("#needed-items-pet-header");
-  UI.reload = $("#needed-items-reload");
-  UI.pet_items = $("#needed-items-pet-items");
-  UI.item_template = $("#item-template");
-
-  var current_request = { abort: function () {} };
-  function sendRequest(options) {
-    current_request = $.ajax(options);
-  }
-
-  function cancelRequest() {
-    if (DEBUG) console.log("Canceling request", current_request);
-    current_request.abort();
-  }
-
-  /* Pet */
-
-  var last_successful_pet_name = null;
-
-  function loadPet(pet_name) {
-    // If there is a request in progress, kill it. Our new pet request takes
-    // priority, and, if I submit a name while the previous name is loading, I
-    // don't want to process both responses.
-    cancelRequest();
-
-    sendRequest({
-      url: UI.form.attr("action") + ".json",
-      dataType: "json",
-      data: { name: pet_name },
-      error: petError,
-      success: function (data) {
-        petSuccess(data, pet_name);
-      },
-      complete: petComplete,
-    });
-
-    UI.form.removeClass("failed").addClass("loading-pet");
-  }
-
-  function petComplete() {
-    UI.form.removeClass("loading-pet");
-  }
-
-  function petError(xhr) {
-    UI.alert.text(xhr.responseText);
-    UI.form.addClass("failed");
-  }
-
-  function petSuccess(data, pet_name) {
-    last_successful_pet_name = pet_name;
-    UI.pet_thumbnail.attr("src", petThumbnailUrl(pet_name));
-    UI.pet_header.empty();
-    $("#needed-items-pet-header-template")
-      .tmpl({ pet_name: pet_name })
-      .appendTo(UI.pet_header);
-    loadItems(data.query);
-  }
-
-  /* Items */
-
-  function loadItems(query) {
-    UI.form.addClass("loading-items");
-    sendRequest({
-      url: "/items/needed.json",
-      dataType: "json",
-      data: query,
-      success: itemsSuccess,
-    });
-  }
-
-  function itemsSuccess(items) {
-    if (DEBUG) {
-      // The dev server is missing lots of data, so sends me 2000+ needed
-      // items. We don't need that many for styling, so limit it to 100 to make
-      // my browser happier.
-      items = items.slice(0, 100);
-    }
-
-    UI.pet_items.empty();
-    UI.item_template.tmpl(items).appendTo(UI.pet_items);
-
-    UI.form.removeClass("loading-items").addClass("loaded");
-  }
-
-  UI.form.submit(function (e) {
-    e.preventDefault();
-    loadPet(UI.pet_name_field.val());
-  });
-
-  UI.reload.click(function (e) {
-    e.preventDefault();
-    loadPet(last_successful_pet_name);
-  });
-})();
-
 /* Bulk pets form */
 (function () {
-  var form = $("#bulk-pets-form"),
-    queue_el = form.find("ul"),
-    names_el = form.find("textarea"),
-    add_el = $("#bulk-pets-form-add"),
-    clear_el = $("#bulk-pets-form-clear"),
-    bulk_load_queue;
+	var form = $("#bulk-pets-form"),
+		queue_el = form.find("ul"),
+		names_el = form.find("textarea"),
+		add_el = $("#bulk-pets-form-add"),
+		clear_el = $("#bulk-pets-form-clear"),
+		bulk_load_queue;
 
-  $(document.body).addClass("js");
+	$(document.body).addClass("js");
 
-  bulk_load_queue = new (function BulkLoadQueue() {
-    var RECENTLY_SENT_INTERVAL_IN_SECONDS = 30;
-    var RECENTLY_SENT_MAX = 3;
-    var pets = [],
-      url = form.attr("action") + ".json",
-      recently_sent_count = 0,
-      loading = false;
+	function petThumbnailUrl(pet_name) {
+		// if first character is "@", use the hash url
+		if (pet_name[0] == "@") {
+			return "https://pets.neopets.com/cp/" + pet_name.substr(1) + "/1/1.png";
+		}
 
-    function Pet(name) {
-      var el = $("#bulk-pets-submission-template")
-        .tmpl({ pet_name: name, pet_thumbnail: petThumbnailUrl(name) })
-        .appendTo(queue_el);
+		return "https://pets.neopets.com/cpn/" + pet_name + "/1/1.png";
+	}
 
-      this.load = function () {
-        el.removeClass("waiting").addClass("loading");
-        var response_el = el.find("span.response");
-        pets.shift();
-        loading = true;
-        $.ajax({
-          complete: function (data) {
-            loading = false;
-            loadNextIfReady();
-          },
-          data: { name: name },
-          dataType: "json",
-          error: function (xhr) {
-            el.removeClass("loading").addClass("failed");
-            response_el.text(xhr.responseText);
-          },
-          success: function (data) {
-            var points = data.points;
-            el.removeClass("loading").addClass("loaded");
-            $("#bulk-pets-submission-success-template")
-              .tmpl({ points: points })
-              .appendTo(response_el);
-          },
-          type: "post",
-          url: url,
-        });
+	bulk_load_queue = new (function BulkLoadQueue() {
+		var RECENTLY_SENT_INTERVAL_IN_SECONDS = 30;
+		var RECENTLY_SENT_MAX = 3;
+		var pets = [],
+			url = form.attr("action") + ".json",
+			recently_sent_count = 0,
+			loading = false;
 
-        recently_sent_count++;
-        setTimeout(function () {
-          recently_sent_count--;
-          loadNextIfReady();
-        }, RECENTLY_SENT_INTERVAL_IN_SECONDS * 1000);
-      };
-    }
+		function Pet(name) {
+			var el = $("#bulk-pets-submission-template")
+				.tmpl({ pet_name: name, pet_thumbnail: petThumbnailUrl(name) })
+				.appendTo(queue_el);
 
-    this.add = function (name) {
-      name = name.replace(/^\s+|\s+$/g, "");
-      if (name.length) {
-        var pet = new Pet(name);
-        pets.push(pet);
-        if (pets.length == 1) loadNextIfReady();
-      }
-    };
+			this.load = function () {
+				el.removeClass("waiting").addClass("loading");
+				var response_el = el.find("span.response");
+				pets.shift();
+				loading = true;
+				$.ajax({
+					beforeSend: (xhr) => {
+						const token = document
+							.querySelector('meta[name="csrf-token"]')
+							?.getAttribute("content");
+						xhr.setRequestHeader("X-CSRF-Token", token);
+					},
+					complete: function (data) {
+						loading = false;
+						loadNextIfReady();
+					},
+					data: { name: name },
+					dataType: "json",
+					error: function (xhr) {
+						el.removeClass("loading").addClass("failed");
+						response_el.text(xhr.responseText);
+					},
+					success: function (data) {
+						var points = data.points;
+						el.removeClass("loading").addClass("loaded");
+						$("#bulk-pets-submission-success-template")
+							.tmpl({ points: points })
+							.appendTo(response_el);
+					},
+					type: "post",
+					url: url,
+				});
 
-    function loadNextIfReady() {
-      if (!loading && recently_sent_count < RECENTLY_SENT_MAX && pets.length) {
-        pets[0].load();
-      }
-    }
-  })();
+				recently_sent_count++;
+				setTimeout(function () {
+					recently_sent_count--;
+					loadNextIfReady();
+				}, RECENTLY_SENT_INTERVAL_IN_SECONDS * 1000);
+			};
+		}
 
-  names_el.keyup(function () {
-    var names = this.value.split("\n"),
-      x = names.length - 1,
-      i,
-      name;
-    for (i = 0; i < x; i++) {
-      bulk_load_queue.add(names[i]);
-    }
-    this.value = x >= 0 ? names[x] : "";
-  });
+		this.add = function (name) {
+			name = name.replace(/^\s+|\s+$/g, "");
+			if (name.length) {
+				var pet = new Pet(name);
+				pets.push(pet);
+				if (pets.length == 1) loadNextIfReady();
+			}
+		};
 
-  add_el.click(function () {
-    bulk_load_queue.add(names_el.val());
-    names_el.val("");
-  });
+		function loadNextIfReady() {
+			if (!loading && recently_sent_count < RECENTLY_SENT_MAX && pets.length) {
+				pets[0].load();
+			}
+		}
+	})();
 
-  clear_el.click(function () {
-    queue_el.children("li.loaded, li.failed").remove();
-  });
+	names_el.keyup(function () {
+		var names = this.value.split("\n"),
+			x = names.length - 1,
+			i,
+			name;
+		for (i = 0; i < x; i++) {
+			bulk_load_queue.add(names[i]);
+		}
+		this.value = x >= 0 ? names[x] : "";
+	});
+
+	add_el.click(function () {
+		bulk_load_queue.add(names_el.val());
+		names_el.val("");
+	});
+
+	clear_el.click(function () {
+		queue_el.children("li.loaded, li.failed").remove();
+	});
 })();

app/assets/javascripts/swf_assets/show.js

@@ -25,6 +25,10 @@ let numFramesSinceLastLog = 0;
 // State for error reporting.
 let hasLoggedRenderError = false;
 
+////////////////////////////////////////////////////
+//////// Loading the library and its assets ////////
+////////////////////////////////////////////////////
+
 function loadImage(src) {
 	const image = new Image();
 	image.crossOrigin = "anonymous";
@@ -64,8 +68,8 @@ async function getLibrary() {
 	// One more loading step as part of loading this library is loading the
 	// images it uses for sprites.
 	//
-	// TODO: I guess the manifest has these too, so we could put them in preload
-	// meta tags to get them here faster?
+	// NOTE: We also read these from the manifest, and include them in the
+	//       document as preload meta tags, to get them moving faster.
 	const librarySrcDir = libraryUrl.split("/").slice(0, -1).join("/");
 	const manifestImages = new Map(
 		library.properties.manifest.map(({ id, src }) => [
@@ -96,6 +100,10 @@ async function getLibrary() {
 	return library;
 }
 
+/////////////////////////////////////
+//////// Rendering the movie ////////
+/////////////////////////////////////
+
 function buildMovieClip(library) {
 	let constructorName;
 	try {
@@ -151,6 +159,22 @@ function updateCanvasDimensions() {
 	movieClip.scaleY = internalHeight / library.properties.height;
 }
 
+window.addEventListener("resize", () => {
+	updateCanvasDimensions();
+
+	// Redraw the stage with the new dimensions - but with `tickOnUpdate` set
+	// to `false`, so that we don't advance by a frame. This keeps us
+	// really-paused if we're paused, and avoids skipping ahead by a frame if
+	// we're playing.
+	stage.tickOnUpdate = false;
+	updateStage();
+	stage.tickOnUpdate = true;
+});
+
+////////////////////////////////////////////////////
+//// Monitoring and controlling animation state ////
+////////////////////////////////////////////////////
+
 async function startMovie() {
 	// Load the movie's library (from the JS file already run), and use it to
 	// build a movie clip.
@@ -274,6 +298,10 @@ function getInitialPlayingStatus() {
 	}
 }
 
+//////////////////////////////////////////
+//// Syncing with the parent document ////
+//////////////////////////////////////////
+
 /**
  * Recursively scans the given MovieClip (or child createjs node), to see if
  * there are any animated areas.
@@ -312,18 +340,6 @@ function sendMessage(message) {
 	parent.postMessage(message, document.location.origin);
 }
 
-window.addEventListener("resize", () => {
-	updateCanvasDimensions();
-
-	// Redraw the stage with the new dimensions - but with `tickOnUpdate` set
-	// to `false`, so that we don't advance by a frame. This keeps us
-	// really-paused if we're paused, and avoids skipping ahead by a frame if
-	// we're playing.
-	stage.tickOnUpdate = false;
-	updateStage();
-	stage.tickOnUpdate = true;
-});
-
 window.addEventListener("message", ({ data }) => {
 	// NOTE: For more sensitive messages, it's important for security to also
 	// check the `origin` property of the incoming event. But in this case, I'm
@@ -339,6 +355,10 @@ window.addEventListener("message", ({ data }) => {
 	}
 });
 
+/////////////////////////////////
+//// The actual entry point! ////
+/////////////////////////////////
+
 startMovie()
 	.then(() => {
 		sendStatus();

app/assets/stylesheets/_items.sass

@@ -1,30 +0,0 @@
-@import "partials/campaign-progress"
-
-body.items-index, body.items-show, body.items-needed, body.item_trades
-  +campaign-progress
-
-  text-align: center
-
-  .item-search-form
-    display: flex
-    gap: .5em
-    justify-content: center
-
-    input[type=text]
-      font-size: 125%
-      width: 15em
-      flex: 0 1 auto
-
-  h1
-    margin-bottom: 1em
-    img
-      height: 80px
-      margin-bottom: -0.5em
-      width: 80px
-    a
-      text-decoration: none
-      span
-        text-decoration: underline
-      &:hover span
-        text-decoration: none
-

app/assets/stylesheets/_layout.sass

@@ -1,10 +1,6 @@
 @import "partials/icon"
 @import "partials/clean/constants"
 @import "partials/clean/mixins"
-@import fonts
-@import url("https://fonts.googleapis.com/css?family=Droid+Sans:400,700")
-@import url("https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic")
-@import url("https://fonts.googleapis.com/css?family=Calligraffitti")
 
 /* Reset
 
@@ -36,9 +32,6 @@ body
 a[href]
   color: $link-color
 
-p
-  font-family: $text-font
-
 input, button, select
   font:
     family: inherit
@@ -81,7 +74,7 @@ $container_width: 800px
 input, button, select, label
   cursor: pointer
 
-input[type=text], input[type=password], input[type=search], input[type=number], input[type=email], select, textarea
+input[type=text], input[type=password], input[type=search], input[type=number], input[type=email], input[type=url], select, textarea
   border-radius: 3px
   background: #fff
   border: 1px solid $input-border-color
@@ -90,6 +83,15 @@ input[type=text], input[type=password], input[type=search], input[type=number],
   &:focus, &:active
     color: inherit
 
+select:has(option[value='']:checked)
+  color: #666
+
+option[value='']
+  color: #666
+
+option:not([value=''])
+  color: $text-color
+
 textarea
   font: inherit
 
@@ -250,23 +252,3 @@ dd
     margin: 0 .5em
   .current
     font-weight: bold
-
-/* Fonts
-
-/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl
-@font-face
-  font-family: Delicious
-  src: local("Delicious"), font-url("Delicious-Roman.otf")
-
-
-@font-face
-  font-family: Delicious
-  font-weight: bold
-  src: local("Delicious"), font-url("Delicious-Bold.otf")
-
-
-@font-face
-  font-family: Delicious
-  font-style: italic
-  src: local("Delicious"), font-url("Delicious-Italic.otf")
-

app/assets/stylesheets/_responsive.sass

@@ -3,10 +3,20 @@ body.use-responsive-design
         max-width: 100%
         padding-inline: 1rem
         box-sizing: border-box
+        padding-top: 0
+
+    #main-nav
+        display: flex
+        flex-wrap: wrap
+
+    #home-link, #userbar
+        position: static
 
     #home-link
-        margin-left: 1rem
-        padding-inline: 0
+        padding-inline: .5rem
+        margin-inline: -.5rem
+        margin-right: auto
 
     #userbar
-        margin-right: 1rem
+        margin-left: auto
+        text-align: right

app/assets/stylesheets/alt_styles/_index.sass

@@ -1,18 +0,0 @@
-body.alt_styles-index
-	.alt-styles-header
-		margin-top: 1em
-		margin-bottom: .5em
-
-	.alt-styles-list
-		list-style: none
-		display: flex
-		flex-wrap: wrap
-		gap: 1.5em
-
-	.alt-style
-		text-align: center
-		width: 80px
-
-	.alt-style-thumbnail
-		width: 80px
-		height: 80px

app/assets/stylesheets/alt_styles/edit.sass

@@ -0,0 +1,4 @@
+.alt-style-preview
+	width: 300px
+	height: 300px
+	margin: 0 auto

app/assets/stylesheets/alt_styles/index.sass

@@ -0,0 +1,13 @@
+@import "../partials/clean/constants"
+
+// Prefer to break the name at visually appealing points.
+.rainbow-pool-list
+	.name
+		text-wrap: balance
+
+// De-emphasize Prismatic styles, in browsers that support it.
+.rainbow-pool-filters
+	select[name="series"]
+		option[value*=": "]
+			color: $soft-text-color
+			font-style: italic

app/assets/stylesheets/application.css.sass

@@ -8,16 +8,10 @@
 
 @import partials/jquery.jgrowl
 
-@import alt_styles/index
 @import closet_hangers/index
-@import closet_hangers/petpage
 @import closet_lists/form
 @import neopets_page_import_tasks/new
 @import contributions/index
-@import items
-@import items/index
-@import items/show
-@import item_trades/index
 @import outfits/index
 @import outfits/new
 @import pets/bulk

app/assets/stylesheets/application/breadcrumbs.sass

@@ -0,0 +1,23 @@
+#title:has(+ .breadcrumbs)
+	margin-bottom: .125em
+
+.breadcrumbs
+	list-style-type: none
+	display: flex
+	flex-direction: row
+	margin-block: .5em
+	font-size: .85em
+
+	li
+		display: flex
+
+	li:not(:first-child)
+		&::before
+			margin-inline: .35em
+			content: "→"
+
+		&[data-relation-to-prev=sibling]::before
+			content: "+"
+
+		&[data-relation-to-prev=menu]::before
+			content: "-"

app/assets/stylesheets/application/magic-magnifier.sass

@@ -0,0 +1,50 @@
+magic-magnifier
+	display: block
+	position: relative
+
+	// Only show the lens when we are hovering, and the magnifier's X and Y
+	// coordinates are set. (This ensures the component is running, and has
+	// received a mousemove event, instead of defaulting to (0, 0).)
+	magic-magnifier-lens
+		display: none
+
+	// TODO: Once container query support is broader, we can remove the CSS state
+	//       and read for the presence of the X and Y custom properties instead.
+	&:hover:state(ready)
+		magic-magnifier-lens
+			display: block
+
+magic-magnifier-lens
+	display: block
+	width: var(--magic-magnifier-lens-width, 100px)
+	height: var(--magic-magnifier-lens-height, 100px)
+	overflow: hidden
+	border-radius: 100%
+
+	background: white
+	border: 2px solid black
+	box-shadow: 3px 3px 3px rgba(0, 0, 0, .5)
+
+	position: absolute
+	left: var(--magic-magnifier-x, 0px)
+	top: var(--magic-magnifier-y, 0px)
+
+	> *
+		// Translations are applied in the opposite of the order they're specified.
+		// So, here's what we're doing:
+		//
+		// 1. Translate the content left by --magic-magnifier-x and up by
+		//    --magic-magnifier-y, to align the target location with the lens's
+		//    top-right corner.
+		// 2. Zoom in by --magic-magnifier-scale.
+		// 3. Translate the content right by half of --magic-magnifier-lens-width,
+		//    and down by half of --magic-magnifier-lens-height, to align the
+		//    target location with the lens's center.
+		//
+		// Note that it *is* possible to specify transforms relative to the center,
+		// rather than the top-left corner—this is in fact the default!—but that
+		// gets confusing fast with scale in play. I think this is easier to reason
+		// about with the top-left corner in terms of math, and center it after the
+		// fact.
+		transform: translateX(calc(var(--magic-magnifier-lens-width, 100px) / 2)) translateY(calc(var(--magic-magnifier-lens-height, 100px) / 2)) scale(var(--magic-magnifier-scale, 2)) translateX(calc(-1 * var(--magic-magnifier-x, 0px))) translateY(calc(-1 * var(--magic-magnifier-y, 0px)))
+		transform-origin: left top

app/assets/stylesheets/application/outfit-viewer.sass

@@ -0,0 +1,125 @@
+@import "../partials/clean/constants"
+
+// When loading, fade in the loading spinner after a brief delay. We only apply
+// the delay here, not on the base styles, because fading *out* on load should
+// be instant.
+//
+// This is implemented as a mixin, so that the item page can leverage the same
+// loading state when loading a new preview altogether. Once CSS container
+// style queries gain wider support, maybe use that instead.
+=outfit-viewer-loading
+	cursor: wait
+
+	.loading-indicator
+		opacity: 1
+		transition-delay: 2s
+
+		// If the outfit *starts* in loading state, still delay the fade-in.
+		@starting-style
+			opacity: 0
+
+outfit-viewer
+	display: block
+	position: relative
+	overflow: hidden
+
+	// These are default widths, expected to often be overridden.
+	width: 300px
+	height: 300px
+
+	// There's no useful text in here, but double-clicking the play/pause
+	// button can cause a weird selection state. Disable text selection.
+	user-select: none
+	-webkit-user-select: none
+
+	outfit-layer
+		display: block
+		position: absolute
+		inset: 0
+
+		// We disable pointer-events most importantly for the iframes, which
+		// will ignore our `cursor: wait` and show a plain cursor for the
+		// inside of its own document. But also, the context menus for these
+		// elements are kinda actively misleading, too!
+		pointer-events: none
+
+		img, iframe
+			width: 100%
+			height: 100%
+
+	.loading-indicator
+		position: absolute
+		z-index: 1000
+		bottom: 0px
+		right: 4px
+		padding: 8px
+		background: radial-gradient(circle closest-side, white 45%, #ffffff00)
+
+		opacity: 0
+
+	.play-pause-button
+		position: absolute
+		z-index: 1001
+		left: 8px
+		bottom: 8px
+		display: none
+		align-items: center
+		justify-content: center
+		color: white
+		background: rgba(0, 0, 0, 0.64)
+		width: 2.5em
+		height: 2.5em
+		border-radius: 100%
+		border: 2px solid transparent
+		transition: all .25s
+
+		.playing-label, .paused-label
+			display: none
+			width: 1em
+			height: 1em
+
+		.play-pause-toggle
+			// Visually hidden
+			clip: rect(0 0 0 0)
+			clip-path: inset(50%)
+			height: 1px
+			overflow: hidden
+			position: absolute
+			white-space: nowrap
+			width: 1px
+
+			&:checked ~ .playing-label
+				display: block
+
+			&:not(:checked) ~ .paused-label
+				display: block
+
+		&:hover, &:has(.play-pause-toggle:focus)
+			border: 2px solid $module-border-color
+			background: $module-bg-color
+			color: $text-color
+
+		&:has(.play-pause-toggle:active)
+			transform: translateY(2px)
+
+	&:has(outfit-layer:state(has-animations))
+		.play-pause-button
+			display: flex
+
+	&:has(outfit-layer:state(loading))
+		+outfit-viewer-loading
+
+	// If a layer has the `[highlighted]` attribute, it's brought to the front,
+	// and other layers are grayed out and blurred. We use this in the support
+	// outfit viewer, when you hover over a layer.
+	&:has(outfit-layer[highlighted])
+		outfit-layer[highlighted]
+			z-index: 999
+
+			// Filter everything behind the bottom-most highlighted layer, using a
+			// backdrop filter. This gives us the best visual consistency by applying
+			// effects to the entire backdrop, instead of each layer and then
+			// re-compositing them.
+			backdrop-filter: grayscale(1) brightness(2) blur(1px)
+			& ~ outfit-layer[highlighted]
+				backdrop-filter: none

app/assets/stylesheets/application/rainbow-pool.sass

@@ -0,0 +1,74 @@
+@import "../partials/clean/constants"
+
+.rainbow-pool-filters
+	margin-block: .5em
+
+	fieldset
+		display: flex
+		flex-direction: row
+		align-items: center
+		justify-content: center
+		gap: .5em
+
+	legend
+		display: contents
+		font-weight: bold
+
+	select
+		width: 16ch
+
+.rainbow-pool-list
+	list-style-type: none
+	display: flex
+	flex-wrap: wrap
+	justify-content: center
+	gap: .5em
+
+	--preview-base-width: 150px
+
+	> li
+		width: var(--preview-base-width)
+		max-width: calc(50% - .25em)
+		min-width: 150px
+		box-sizing: border-box
+		text-align: center
+
+	a
+		display: block
+		border-radius: 1em
+		padding: .5em
+		text-decoration: none
+		background: white
+		&:hover
+			outline: 1px solid $module-border-color
+			background: $module-bg-color
+
+	.preview
+		width: 100%
+		height: auto
+		aspect-ratio: 1 / 1
+		margin-bottom: -1em
+
+	.name
+		background: inherit
+		padding: .25em .5em
+		border-radius: .5em
+		margin: 0 auto
+		position: relative
+		z-index: 1
+
+	.info
+		font-size: .85em
+		p
+			margin-block: .25em
+
+.rainbow-pool-pagination
+	margin-block: .5em
+	display: flex
+	justify-content: center
+	gap: 1em
+
+.rainbow-pool-no-results
+	margin-block: 1em
+	text-align: center
+	font-style: italic

app/assets/stylesheets/application/support-form.sass

@@ -0,0 +1,102 @@
+@import "../partials/clean/constants"
+
+.support-form
+	display: flex
+	flex-direction: column
+	gap: 1em
+	align-items: flex-start
+
+	.fields
+		list-style-type: none
+		display: flex
+		flex-direction: column
+		gap: .75em
+		width: 100%
+
+		> li
+			display: flex
+			flex-direction: column
+			gap: .25em
+			max-width: 60ch
+
+			> label, > .field_with_errors label
+				display: block
+				font-weight: bold
+
+			.field_with_errors
+				> label
+					color: $error-color
+
+				input[type=text], input[type=url]
+					border-color: $error-border-color
+					color: $error-color
+
+			&[data-type=radio]
+				ul
+					list-style-type: none
+
+			&[data-type=radio-grid] // Set the `--num-columns` property to configure!
+				max-width: none
+
+				ul
+					list-style-type: none
+					display: grid
+					grid-template-columns: repeat(var(--num-columns, 1), 1fr)
+					gap: .25em
+
+				li
+					display: flex
+					align-items: stretch // Give the bubbles equal heights!
+
+				label
+					display: flex
+					align-items: center
+					gap: .5em
+					padding: .5em 1em
+					border: 1px solid $soft-border-color
+					border-radius: 1em
+					flex: 1 1 auto
+
+					input
+						margin: 0
+
+					&:has(:checked)
+						background: $module-bg-color
+						border-color: $module-border-color
+
+	input[type=text], input[type=url]
+		width: 100%
+		min-width: 10ch
+		box-sizing: border-box
+
+	.thumbnail-input
+		display: flex
+		align-items: center
+		gap: .25em
+
+		img
+			width: 40px
+			height: 40px
+
+	fieldset
+		display: flex
+		flex-direction: column
+		gap: .25em
+
+		legend
+			font-weight: bold
+
+	.field_with_errors
+		display: contents
+
+	.actions
+		display: flex
+		align-items: center
+		gap: 1em
+
+	.go-to-next
+		display: flex
+		align-items: center
+		gap: .25em
+		font-size: .85em
+		font-style: italic

app/assets/stylesheets/closet_hangers/_index.sass

@@ -31,11 +31,14 @@ body.closet_hangers-index
     color: $soft-text-color
     margin-bottom: 1em
     margin-left: 2em
-    min-height: image-height("neomail.png")
+    min-height: $icon-height
+
+    display: flex
+    gap: .5em
+    align-items: center
 
     a
       color: inherit
-      margin-right: .5em
       text-decoration: none
       &:hover
         text-decoration: underline
@@ -44,13 +47,14 @@ body.closet_hangers-index
       background:
         position: left center
         repeat: no-repeat
-      padding-left: image-width("neomail.png") + 4px
 
     a.neomail, > form
       background-image: image-url("neomail.png")
+      padding-left: $icon-width + 4px
 
     a.lookup
       background-image: image-url("lookup.png")
+      padding-left: $icon-width + 4px
 
     select
       width: 10em

app/assets/stylesheets/closet_hangers/_petpage.sass

@@ -1,58 +0,0 @@
-@import "../partials/clean/constants"
-@import "../partials/clean/mixins"
-@import "../partials/secondary_nav"
-
-body.closet_hangers-petpage
-  +secondary-nav
-
-  #intro
-    clear: both
-
-  #petpage-closet-lists
-    +clearfix
-    border-radius: 10px
-    border: 1px solid $soft-border-color
-    margin-bottom: 1.5em
-    padding: .5em 1.5em
-    
-    > div
-      margin: .25em 0
-    
-    h4
-      display: inline-block
-      vertical-align: middle
-      
-      &::after
-        content: ":"
-    
-    ul
-      list-style: none
-      margin: 0
-      padding: 0
-    
-      li
-        display: inline-block
-        font-size: 85%
-        margin: .25em .5em
-        padding: 1px
-        
-        label
-          padding: .25em .75em .25em .25em
-      
-        &.checked
-          background: $module-bg-color
-          border-radius: 3px
-          border: 1px solid $module-border-color
-          padding: 0
-        
-        &.unlisted
-          font-style: italic
-    
-    input[type=submit]
-      float: right
-
-  #petpage-output
-    display: block
-    height: 30em
-    margin: 0 auto
-    width: 50%

app/assets/stylesheets/closet_hangers/petpage.sass

@@ -0,0 +1,57 @@
+@import "../partials/clean/constants"
+@import "../partials/clean/mixins"
+@import "../partials/secondary_nav"
+
++secondary-nav
+
+#intro
+  clear: both
+
+#petpage-closet-lists
+  +clearfix
+  border-radius: 10px
+  border: 1px solid $soft-border-color
+  margin-bottom: 1.5em
+  padding: .5em 1.5em
+
+  > div
+    margin: .25em 0
+
+  h4
+    display: inline-block
+    vertical-align: middle
+
+    &::after
+      content: ":"
+
+  ul
+    list-style: none
+    margin: 0
+    padding: 0
+
+    li
+      display: inline-block
+      font-size: 85%
+      margin: .25em .5em
+      padding: 1px
+
+      label
+        padding: .25em .75em .25em .25em
+
+      &:has(:checked)
+        background: $module-bg-color
+        border-radius: 3px
+        border: 1px solid $module-border-color
+        padding: 0
+
+      &.unlisted
+        font-style: italic
+
+  input[type=submit]
+    float: right
+
+#petpage-output
+  display: block
+  height: 30em
+  margin: 0 auto
+  width: 50%

app/assets/stylesheets/fonts.css.erb

@@ -0,0 +1,17 @@
+/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */
+@font-face {
+  font-family: Delicious;
+  src: local("Delicious"), url("<%= font_path "Delicious-Roman.otf" %>");
+}
+
+@font-face {
+  font-family: Delicious;
+  font-weight: bold;
+  src: local("Delicious"), url("<%= font_path "Delicious-Bold.otf" %>");
+}
+
+@font-face {
+  font-family: Delicious;
+  font-style: italic;
+  src: local("Delicious"), url("<%= font_path "Delicious-Italic.otf" %>");
+}

app/assets/stylesheets/fonts.css.sass

@@ -1,14 +0,0 @@
-/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl
-@font-face
-  font-family: Delicious
-  src: local("Delicious"), font-url("Delicious-Roman.otf")
-
-@font-face
-  font-family: Delicious
-  font-weight: bold
-  src: local("Delicious"), font-url("Delicious-Bold.otf")
-
-@font-face
-  font-family: Delicious
-  font-style: italic
-  src: local("Delicious"), font-url("Delicious-Italic.otf")

app/assets/stylesheets/item_trades/_index.sass

@@ -1,29 +0,0 @@
-@import "../partials/item_header"
-
-body.item_trades-index
-	.item-header
-		+item-header
-
-	.item-subpage-title
-		text-align: left
-		margin-bottom: .5em
-
-	.trades-table
-		text-align: left
-		width: 100%
-		table-layout: fixed
-
-		th, td
-			&:nth-child(1), &:nth-child(2)
-				width: 15ch
-				overflow: hidden
-				text-overflow: ellipsis
-
-		.trade-list-names
-			list-style: none
-
-			li
-				display: inline
-
-				&:not(:last-child)::after
-					content: ", "

app/assets/stylesheets/item_trades/index.sass

@@ -0,0 +1,28 @@
+@import "../partials/item_header"
+
+.item-header
+	+item-header
+
+.item-subpage-title
+	text-align: left
+	margin-bottom: .5em
+
+.trades-table
+	text-align: left
+	width: 100%
+	table-layout: fixed
+
+	th, td
+		&:nth-child(1), &:nth-child(2)
+			width: 15ch
+			overflow: hidden
+			text-overflow: ellipsis
+
+	.trade-list-names
+		list-style: none
+
+		li
+			display: inline
+
+			&:not(:last-child)::after
+				content: ", "

app/assets/stylesheets/items/_index.sass

@@ -1,25 +0,0 @@
-=main_unit
-  float: left
-  width: 49%
-  h2
-    font-size: 125%
-
-body.items-index
-  form
-    margin-bottom: 2em
-
-  #search-info
-    +main_unit
-    padding-right: 1%
-    dl
-      text-align: left
-    dd
-      margin-bottom: 1em
-
-  #species-search-links
-    +main_unit
-    padding-left: 1%
-    img
-      height: 80px
-      width: 80px
-

app/assets/stylesheets/items/_show.sass

@@ -1,384 +0,0 @@
-@import "../partials/clean/constants"
-@import "../partials/clean/mixins"
-@import "../partials/item_header"
-
-body.items-show
-  #container
-    width: 900px // A bit more generous to the preview area!
-
-  .item-header
-    +item-header
-
-  #item-contributors
-    +subtle-banner
-    clear: both
-    margin:
-      bottom: 0
-      top: 2em
-    
-    header
-      display: inline
-      font-weight: bold
-      margin-right: .25em
-    
-    footer
-      display: inline
-    
-    ul
-      display: inline
-      list-style: none
-
-      li
-        display: inline
-      
-        &::after
-          content: ", "
-      
-        &:last-child::after
-          content: "."
-    
-  .nc-icon
-    height: 16px
-    width: 16px
-
-  .preview-area
-    margin: 0 auto
-    position: relative
-
-    .customize-more
-      position: absolute
-      top: 1em
-      right: 1em
-
-      display: flex
-      align-items: center
-      text-decoration: none
-
-      background: #EDF2F7
-      padding: .75em
-      border-radius: .375em
-      min-height: 2rem
-      min-width: 2rem
-      box-sizing: border-box
-
-  outfit-viewer
-    display: block
-    position: relative
-    width: 300px
-    height: 300px
-    border: 1px solid $module-border-color
-    border-radius: 1em
-    overflow: hidden
-
-    // There's no useful text in here, but double-clicking the play/pause
-    // button can cause a weird selection state. Disable text selection.
-    user-select: none
-    -webkit-user-select: none
-
-    outfit-layer
-      display: block
-      position: absolute
-      inset: 0
-
-      // We disable pointer-events most importantly for the iframes, which
-      // will ignore our `cursor: wait` and show a plain cursor for the
-      // inside of its own document. But also, the context menus for these
-      // elements are kinda actively misleading, too!
-      pointer-events: none
-
-      img, iframe
-        width: 100%
-        height: 100%
-
-    .loading-indicator
-      position: absolute
-      z-index: 1000
-      bottom: 0px
-      right: 4px
-      padding: 8px
-      background: radial-gradient(circle closest-side, white 45%, #ffffff00)
-
-      opacity: 0
-      transition: opacity .5s
-
-    .play-pause-button
-      position: absolute
-      z-index: 1001
-      left: 8px
-      bottom: 8px
-      display: none
-      align-items: center
-      justify-content: center
-      color: white
-      background: rgba(0, 0, 0, 0.64)
-      width: 2.5em
-      height: 2.5em
-      border-radius: 100%
-      border: 2px solid transparent
-      transition: all .25s
-
-      .playing-label, .paused-label
-        display: none
-        width: 1em
-        height: 1em
-
-      .play-pause-toggle
-        // Visually hidden
-        clip: rect(0 0 0 0)
-        clip-path: inset(50%)
-        height: 1px
-        overflow: hidden
-        position: absolute
-        white-space: nowrap
-        width: 1px
-
-        &:checked ~ .playing-label
-          display: block
-
-        &:not(:checked) ~ .paused-label
-          display: block
-
-      &:hover, &:has(.play-pause-toggle:focus)
-        border: 2px solid $module-border-color
-        background: $module-bg-color
-        color: $text-color
-
-      &:has(.play-pause-toggle:active)
-        transform: translateY(2px)
-
-    &:has(outfit-layer:state(has-animations))
-      .play-pause-button
-        display: flex
-
-  .error-indicator
-    font-size: 85%
-    color: $error-color
-    margin-top: .25em
-    margin-bottom: .5em
-    display: none
-
-  // When loading, fade in the loading spinner after a brief delay. We are
-  // loading when the <turbo-frame> is busy, or when at least one layer
-  // is loading.
-  //
-  // We only apply the delay here, not on the base styles, because fading
-  // *out* on load should be instant. We also wait for the outfit-viewer to
-  // execute a `setTimeout(0)`, to make sure we always *start* in the
-  // non-loading state. This is because it's sometimes possible for the page to
-  // start with the web component already in `state(loading)`, and we need to
-  // make sure we *start* in *non-loading* state for the transition delay to
-  // happen. (This can happen when you Turbo-navigate between multiple items.)
-  #item-preview[busy] outfit-viewer, outfit-viewer:has(outfit-layer:state(loading))
-    cursor: wait
-
-    &:state(after-first-frame)
-      .loading-indicator
-        opacity: 1
-        transition-delay: 2s
-
-  #item-preview:has(outfit-layer:state(error))
-    outfit-viewer
-      border: 2px solid red
-    .error-indicator
-      display: block
-
-  species-color-picker
-    .error-icon
-      cursor: help
-      margin-right: .25em
-
-    form[data-is-valid="false"]
-      select
-        border-color: $error-border-color
-        color: $error-color
-
-    // If JS is enabled, but auto-loading isn't ready yet (script loading or
-    // failed?), hide the submit button for .75sec, to give it time to load.
-    @media (scripting: enabled)
-      input[type=submit]
-        position: absolute
-        margin-left: .5em
-        opacity: 0
-        animation: fade-in .25s forwards
-        animation-delay: .75s
-
-    // Once the auto-loading behavior is ready, remove the submit button.
-    &:state(auto-loading)
-      input[type=submit]
-        display: none
-
-  species-face-picker
-    display: block
-    position: relative
-    margin-top: -10px
-
-    species-face-picker-options
-      display: flex
-      justify-content: center
-      flex-wrap: wrap
-      isolation: isolate // avoid z-index conflicts between pets and noscript
-      overflow: auto
-      max-height: 200px // 4 rows of 50px images, and padding will offer a hint of below
-      padding: 10px // leave enough room for the zoomed-in selected face
-
-    img
-      width: 54px
-      height: 54px
-      transition: all 0.2s
-
-      // Calm down the default color, just a smidge! There's a lot of color
-      // on this page already, y'know?
-      opacity: .9
-      filter: saturate(90%)
-
-    label
-      display: flex
-      overflow: hidden
-      transition: all 0.2s
-      position: relative
-      line-height: 1
-
-      // NOTE: The box-shadows here were copy-pasted from Impress 2020, which uses
-      //       Chakra UI's styling system to generate them! (The colors are from their
-      //       color palette, too.)
-      &:has(input:checked)
-        border-radius: 6px
-        z-index: 1
-        background: #9AE6B4
-        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04), #2F855A 0 0 2px 2px
-        transform: scale(1.1)
-
-      &:has(input:focus)
-        background: #BEE3F8
-        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04), #4299e1 0 0 0 3px
-        transform: scale(1.2)
-
-    input[type=radio]
-      position: absolute
-      left: -10000px
-      top: auto
-      width: 1px
-      height: 1px
-      overflow: hidden
-
-      &:checked + img
-        opacity: 1
-        filter: saturate(110%)
-
-      &:disabled + img
-        opacity: .6
-        filter: saturate(0%)
-
-    label:has(input[type=radio]:disabled)
-      cursor: not-allowed
-
-    noscript
-      position: absolute
-      inset: 0
-      padding: 1em
-      background: rgba(white, .8)
-      z-index: 1
-      cursor: auto
-
-      display: flex
-      align-items: center
-      justify-content: center
-      text-align: center
-
-    &:has(species-face-picker-options[inert])
-      cursor: wait
-
-  .item-preview-meta-info
-    display: grid
-    grid-template-columns: 1fr auto
-    gap: .5em
-    align-items: center
-
-  .item-zones-info
-    h3
-      display: inline
-      font: inherit
-      font-weight: bold
-      &:after
-        content: ": "
-
-    ul
-      list-style-type: none
-      display: inline
-
-      li
-        display: inline
-        &:not(:last-of-type):after
-          content: ", "
-
-    .no-zones
-      font-style: italic
-      opacity: .85
-
-    .zone-species-info
-      font-style: italic
-      text-decoration: underline dotted
-
-  // Many of these styles copied from Impress 2020 and its Chakra UI styles!
-  .item-html5-info
-    display: flex
-    align-items: center
-    border: 1px solid
-    border-radius: .375em
-    padding: 4px 8px
-    min-height: 30px
-    box-sizing: border-box
-    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px
-
-    &[data-status=converted]
-      background: $module-bg-color
-      color: $text-color
-
-      svg:nth-of-type(2)
-        margin-right: -4px // spacing hacks!
-
-    &[data-status=unconverted]
-      background: $warning-bg-color
-      color: #975A16
-      gap: .25em // spacing hacks!
-
-    svg:first-of-type
-      width: 12px
-      height: 12px
-
-    svg:nth-of-type(2)
-      width: 20px
-      height: 20px
-
-  #item-preview
-    display: flex
-    flex-direction: column
-    gap: .75em
-
-    @media (min-width: 700px)
-      display: grid
-      grid-template-areas: "viewer faces" "picker meta"
-      gap: .5em
-
-      .preview-area
-        grid-area: viewer
-        outfit-viewer
-          width: 380px
-          height: 380px
-
-      species-color-picker
-        grid-area: picker
-
-      species-face-picker
-        grid-area: faces
-        species-face-picker-options
-          max-height: 380px
-
-      .item-preview-meta-info
-        grid-area: meta
-
-@keyframes fade-in
-  from
-    opacity: 0
-  to
-    opacity: 1

app/assets/stylesheets/items/index.sass

@@ -0,0 +1,23 @@
+=main_unit
+  float: left
+  width: 49%
+  h2
+    font-size: 125%
+
+form
+  margin-bottom: 2em
+
+#search-info
+  +main_unit
+  padding-right: 1%
+  dl
+    text-align: left
+  dd
+    margin-bottom: 1em
+
+#species-search-links
+  +main_unit
+  padding-left: 1%
+  img
+    height: 80px
+    width: 80px

app/assets/stylesheets/items/show.sass

@@ -0,0 +1,309 @@
+@import "../partials/clean/constants"
+@import "../partials/clean/mixins"
+@import "../partials/item_header"
+
+@import "../application/outfit-viewer"
+
+#container
+  width: 900px // A bit more generous to the preview area!
+
+.item-header
+  +item-header
+
+#item-contributors
+  +subtle-banner
+  clear: both
+  margin:
+    bottom: 0
+    top: 2em
+
+  header
+    display: inline
+    font-weight: bold
+    margin-right: .25em
+
+  footer
+    display: inline
+
+  ul
+    display: inline
+    list-style: none
+
+    li
+      display: inline
+
+      &::after
+        content: ", "
+
+      &:last-child::after
+        content: "."
+
+.nc-icon
+  height: 16px
+  width: 16px
+
+.preview-area
+  margin: 0 auto
+  position: relative
+
+  .customize-more
+    position: absolute
+    top: 1em
+    right: 1em
+
+    display: flex
+    align-items: center
+    text-decoration: none
+
+    background: #EDF2F7
+    padding-inline: .75em
+    border-radius: .375em
+    min-height: 2rem
+    min-width: 2rem
+    box-sizing: border-box
+
+    .customize-more-label
+      width: 0
+      overflow: hidden
+      transition: width .25s
+      white-space: nowrap
+      --natural-width: auto
+
+      measured-content
+        padding-right: .5em
+
+    &:hover, &:focus
+      // Expand the label to its natural width. If the JS ran to tell us
+      // what it is in px, we can use that for a smooth transition. If not,
+      // okay, we just pop out to `auto`, which CSS can't make smooth.
+      .customize-more-label
+        width: var(--natural-width)
+
+outfit-viewer
+  width: 300px
+  height: 300px
+  border: 1px solid $module-border-color
+  border-radius: 1em
+
+.error-indicator
+  font-size: 85%
+  color: $error-color
+  margin-top: .25em
+  margin-bottom: .5em
+  display: none
+
+// When loading, fade in the loading spinner after a brief delay. We are
+// loading when the <turbo-frame> is busy, or when at least one layer
+// is loading.
+//
+// We only apply the delay here, not on the base styles, because fading
+// *out* on load should be instant.
+#item-preview[busy] outfit-viewer
+  +outfit-viewer-loading
+
+#item-preview:has(outfit-layer:state(error))
+  outfit-viewer
+    border: 2px solid red
+  .error-indicator
+    display: block
+
+species-color-picker
+  .error-icon
+    cursor: help
+    margin-right: .25em
+
+  form[data-is-valid="false"]
+    select
+      border-color: $error-border-color
+      color: $error-color
+
+  // If JS is enabled, but auto-loading isn't ready yet (script loading or
+  // failed?), hide the submit button for .75sec, to give it time to load.
+  @media (scripting: enabled)
+    input[type=submit]
+      position: absolute
+      margin-left: .5em
+      opacity: 0
+      animation: fade-in .25s forwards
+      animation-delay: .75s
+
+  // Once the auto-loading behavior is ready, remove the submit button.
+  &:state(auto-loading)
+    input[type=submit]
+      display: none
+
+species-face-picker
+  display: block
+  position: relative
+  margin-top: -10px
+
+  species-face-picker-options
+    display: flex
+    justify-content: center
+    flex-wrap: wrap
+    isolation: isolate // avoid z-index conflicts between pets and noscript
+    overflow: auto
+    max-height: 200px // 4 rows of 50px images, and padding will offer a hint of below
+    padding: 10px // leave enough room for the zoomed-in selected face
+
+  img
+    width: 54px
+    height: 54px
+    transition: all 0.2s
+
+    // Calm down the default color, just a smidge! There's a lot of color
+    // on this page already, y'know?
+    opacity: .9
+    filter: saturate(90%)
+
+  label
+    display: flex
+    overflow: hidden
+    transition: all 0.2s
+    position: relative
+    line-height: 1
+
+    // NOTE: The box-shadows here were copy-pasted from Impress 2020, which uses
+    //       Chakra UI's styling system to generate them! (The colors are from their
+    //       color palette, too.)
+    &:has(input:checked)
+      border-radius: 6px
+      z-index: 1
+      background: #9AE6B4
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04), #2F855A 0 0 2px 2px
+      transform: scale(1.1)
+
+    &:has(input:focus)
+      background: #BEE3F8
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04), #4299e1 0 0 0 3px
+      transform: scale(1.2)
+
+  input[type=radio]
+    position: absolute
+    left: -10000px
+    top: auto
+    width: 1px
+    height: 1px
+    overflow: hidden
+
+    &:checked + img
+      opacity: 1
+      filter: saturate(110%)
+
+    &:disabled + img
+      opacity: .6
+      filter: saturate(0%)
+
+  label:has(input[type=radio]:disabled)
+    cursor: not-allowed
+
+  noscript
+    position: absolute
+    inset: 0
+    padding: 1em
+    background: rgba(white, .8)
+    z-index: 1
+    cursor: auto
+
+    display: flex
+    align-items: center
+    justify-content: center
+    text-align: center
+
+  &:has(species-face-picker-options[inert])
+    cursor: wait
+
+.item-preview-meta-info
+  display: grid
+  grid-template-columns: 1fr auto
+  gap: .5em
+  align-items: center
+
+.item-zones-info
+  h3
+    display: inline
+    font: inherit
+    font-weight: bold
+    &:after
+      content: ": "
+
+  ul
+    list-style-type: none
+    display: inline
+
+    li
+      display: inline
+      &:not(:last-of-type):after
+        content: ", "
+
+  .no-zones
+    font-style: italic
+    opacity: .85
+
+  .zone-species-info
+    font-style: italic
+    text-decoration: underline dotted
+
+// Many of these styles copied from Impress 2020 and its Chakra UI styles!
+.item-html5-info
+  display: flex
+  align-items: center
+  border: 1px solid
+  border-radius: .375em
+  padding: 4px 8px
+  min-height: 30px
+  box-sizing: border-box
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px
+
+  &[data-status=converted]
+    background: $module-bg-color
+    color: $text-color
+
+    svg:nth-of-type(2)
+      margin-right: -4px // spacing hacks!
+
+  &[data-status=unconverted]
+    background: $warning-bg-color
+    color: #975A16
+    gap: .25em // spacing hacks!
+
+  svg:first-of-type
+    width: 12px
+    height: 12px
+
+  svg:nth-of-type(2)
+    width: 20px
+    height: 20px
+
+#item-preview
+  display: flex
+  flex-direction: column
+  gap: .75em
+
+  @media (min-width: 700px)
+    display: grid
+    grid-template-areas: "viewer faces" "picker meta"
+    gap: .5em
+
+    .preview-area
+      grid-area: viewer
+      outfit-viewer
+        width: 380px
+        height: 380px
+
+    species-color-picker
+      grid-area: picker
+
+    species-face-picker
+      grid-area: faces
+      species-face-picker-options
+        max-height: 380px
+
+    .item-preview-meta-info
+      grid-area: meta
+
+@keyframes fade-in
+  from
+    opacity: 0
+  to
+    opacity: 1

app/assets/stylesheets/layouts/items.sass

@@ -0,0 +1,28 @@
+@import "partials/campaign-progress"
+
+body
+  +campaign-progress
+  text-align: center
+
+.item-search-form
+  display: flex
+  gap: .5em
+  justify-content: center
+
+  input[type=text]
+    font-size: 125%
+    width: 15em
+    flex: 0 1 auto
+
+h1
+  margin-bottom: 1em
+  img
+    height: 80px
+    margin-bottom: -0.5em
+    width: 80px
+  a
+    text-decoration: none
+    span
+      text-decoration: underline
+    &:hover span
+      text-decoration: none

app/assets/stylesheets/outfits/_new.sass

@@ -78,85 +78,57 @@ body.outfits-new
         font-size: 175%
       select
         font-size: 120%
-  #description, #top-contributors
-    float: left
-  #description
-    margin-right: 2%
-    width: 64%
-  #top-contributors
-    border: 1px solid $input-border-color
-    margin-top: 1em
-    padding: 1%
-    width: 30%
-    ol
-      margin-left: 2em
-      padding-left: 1em
-    > a
-      font-size: 80%
-      display: block
-      text-align: right
-  #how-can-i-help, #i-found-something
-    +module
-    float: left
-    padding: 1%
-    width: 46%
-    h2
-      font-style: italic
-    input, button
-      font-size: 115%
-    input[type=text]
-      border-color: $module-border-color
-      width: 12em
-  #how-can-i-help
-    margin-right: 1%
-  #i-found-something
-    margin-left: 1%
-    a
-      float: right
-      font-size: 87.5%
-      margin-top: 1em
-  $section-count: 3
-  $section-border-width: 1px
-  $section-padding: 0.5em
-  $section-width: 100% / $section-count
-  // (A - (B-1)*C) / B
   #sections
-    +clearfix
-    display: table
+    display: grid
+    grid-template-columns: 1fr 1fr 1fr
     list-style: none
     margin-top: 1em
-    h3
-      margin-bottom: .25em
     li
-      border-left:
-        color: $module-border-color
-        style: solid
-        width: $section-border-width
-      display: table-cell
-      padding: $section-padding
-      position: relative
-      width: $section-width
-      &:first-child
-        border-left: 0
+      display: grid
+      grid-template-areas: "header image" "info image" "form form"
+      grid-template-rows: auto auto auto
+      row-gap: .5em
+      padding: 0.5em
+      &:not(:first-child)
+        border-left: 1px solid $module-border-color
+    h3
+      grid-area: header
+      margin-bottom: 0
     div
+      grid-area: info
       color: $soft-text-color
       font-size: 75%
       margin-left: 1em
       z-index: 2
-    h4, input
+    strong
       font-size: 116%
-    h4, input[type=text]
-      color: inherit
-    h4 a
-      background: #ffffc0
+    a:has(img)
+      grid-area: image
     img
-      +opacity(0.75)
+      opacity: 0.75
       float: right
       margin-left: .5em
       &:hover
-        +opacity(1)
+        opacity: 1
     p
+      line-height: 1.5
       min-height: 4.5em
+      margin-bottom: 0
+    form
+      grid-area: form
+      display: flex
+      align-items: center
+      gap: .5em
+      font-size: .85em
+      margin-left: 1em
+      margin-right: .5em
+
+      input[type=text], input[type=search]
+        // TODO: It doesn't make sense to me that this is the right style? I
+        // expected `flex: 1 0 0` to be right, but that grew *too* large, and
+        // forced the sections to grow wider too. I also tried `flex: 0 1 100%`,
+        // which I would have *thought* is the same as this, but isn't! Idk!
+        width: 100%
 
   #whats-new
     margin-bottom: 1em
@@ -325,4 +297,3 @@ body.outfits-new
     #latest-contribution-created-at
       color: $soft-text-color
       margin-left: .5em
-

app/assets/stylesheets/partials/_blue.sass

@@ -1,29 +0,0 @@
-// Used internally:
-
-$background_color: #0b61a4
-$module_border_color: #033e6b
-$module_background_color: #66a3d2
-
-$input_hover_border_color: #ff9200
-$input_focus_border_color: #fff
-
-$loud_button_background_color: #ff9200
-$loud_button_border_color: #ffad40
-$loud_button_color: #a65f00
-$loud_button_focus_border_color: #000
-
-// Used by Blueprint:
-
-$font_color: #fff
-
-$header_color: inherit
-
-$link_color: inherit
-$link_hover_color: inherit
-$link_focus_color: inherit
-$link_active_color: inherit
-$link_visited_color: inherit
-
-$error_color: inherit
-$error_bg_color: #e14f1c
-$error_border_color: #cd0a0a

app/assets/stylesheets/partials/_context_button.sass

@@ -1,6 +1,7 @@
+@import "clean/mixins"
+
 =context-button
   +awesome-button
   +awesome-button-color(#aaaaaa)
   +opacity(0.9)
   font-size: 80%
-

app/assets/stylesheets/partials/_item_header.sass

@@ -67,14 +67,21 @@
           background: #FEEBC8
           color: #7B341E
 
+    .support-form
+      grid-area: support
+      font-size: 85%
+      text-align: left
+
     .user-lists-info
       grid-area: lists
       font-size: 85%
       text-align: left
 
-      .user-lists-form-opener
-        &::after
-          content: " ›"
+      display: flex
+      gap: 1em
+
+      a::after
+        content: " ›"
 
   .user-lists-form
     background: $background-color

app/assets/stylesheets/partials/clean/_constants.sass

@@ -18,9 +18,8 @@ $error-color:           #8a1f11
 $error-bg-color:        #fbe3e4
 $error-border-color:    #fbc2c4
 
-$header-font:  Delicious, Helvetica, Arial, Verdana, sans-serif
-$main-font:    "Droid Sans", Helvetica, Arial, Verdana, sans-serif
-$text-font:    "Droid Serif", Georgia, "Times New Roman", Times, serif
+$header-font:  Delicious, system-ui, sans-serif
+$main-font:    system-ui, sans-serif
 
 $object-img-size:  80px
 $object-width:     100px

app/assets/stylesheets/pet_states/edit.sass

@@ -0,0 +1,15 @@
+support-outfit-viewer
+	margin-block: 1em
+
+.fields li[data-type=radio-grid]
+	--num-columns: 3
+
+.reference-link
+	display: flex
+	align-items: center
+	gap: .5em
+	padding-inline: .5em
+
+	img
+		height: 2em
+		width: auto

app/assets/stylesheets/pet_states/support-outfit-viewer.sass

@@ -0,0 +1,85 @@
+@import "../partials/clean/constants"
+
+support-outfit-viewer
+	display: flex
+	gap: 2em
+	flex-wrap: wrap
+	justify-content: center
+
+	outfit-viewer
+		flex: 0 0 auto
+		border: 1px solid $module-border-color
+		border-radius: 1em
+
+	.outfit-viewer-controls
+		margin-block: .5em
+		isolation: isolate // Avoid z-index weirdness with our buttons vs the lens
+
+		display: flex
+		align-items: center
+		justify-content: center
+		gap: .5em
+
+		font-size: .85em
+
+		fieldset
+			display: contents
+
+		legend
+			font-weight: bold
+			&::after
+				content: ":"
+
+		label
+			display: flex
+			align-items: center
+			gap: .25em
+
+			input[type=radio]
+				margin: 0
+
+	.outfit-viewer-area
+		> [data-format=png]
+			display: none
+
+	&:has(input[value=png]:checked)
+		.outfit-viewer-area
+			> [data-format=svg]
+				display: none
+			> [data-format=png]
+				display: block
+
+	> table
+		flex: 0 0 auto
+		border-collapse: collapse
+		table-layout: fixed
+		border-radius: .5em
+
+		th, td
+			border: 1px solid $module-border-color
+			font-size: .85em
+			padding: .25em .5em
+			text-align: left
+
+		> tbody
+			[data-field=links]
+				ul
+					list-style-type: none
+					display: flex
+					gap: .5em
+
+	// Once the component is ready, add some hints about potential interactions.
+	&:state(ready)
+		> table
+			> tbody > tr
+				cursor: zoom-in
+				&:hover
+					background: $module-bg-color
+
+	magic-magnifier
+		--magic-magnifier-lens-width: 100px
+		--magic-magnifier-lens-height: 100px
+		--magic-magnifier-scale: 2.5
+
+	magic-magnifier-lens
+		z-index: 2 // Be above things by default, but not by much!

app/assets/stylesheets/pet_types/show.sass

@@ -0,0 +1,8 @@
+@import "../partials/clean/constants"
+
+.rainbow-pool-list
+	--preview-base-width: 200px
+	margin-bottom: 2em
+
+	.glitched
+		cursor: help

app/assets/stylesheets/pets/_bulk.sass

@@ -2,70 +2,8 @@
 @import "../partials/clean/mixins"
 
 body.pets-bulk
-  #needed-items-form, #bulk-pets-form
-    text-align: center
-  
-  #needed-items-form
-    #needed-items-pet
-      border-top: 1px solid $soft-border-color
-      display: none
-      margin-top: 1em
-      padding-top: 1em
-      
-      h4
-        font-size: 150%
-        margin-bottom: .5em
-    
-      #needed-items-reload
-        +inline-block
-        font-size: 12px
-        margin-left: 1em
-        vertical-align: middle
-    
-    #needed-items-alert
-      display: none
-      margin-top: .5em
-    
-    #needed-items-pet-thumbnail
-      height: 50px
-      width: 50px
-    
-    #needed-items-pet-items
-      li.owned
-        background: $module-bg-color
-        border: 1px solid $module-border-color
-    
-    .object-owned
-      color: $soft-text-color
-      display: block
-      font-size: 75%
-      font-style: italic
-      padding-bottom: .25em
-    
-    &.loading-pet, &.loading-items
-      #needed-items-pet-name-field
-        background:
-          image: image-url("loading.gif")
-          position: center right
-          repeat: no-repeat
-      
-      #needed-items-pet-items
-        +opacity(.50)
-    
-    &.loading-pet
-      #needed-items-pet h4
-        +opacity(.50)
-    
-    &.loaded
-      #needed-items-pet
-        display: block
-    
-    &.failed
-      #needed-items-alert
-        display: block
-  
   #bulk-pets-form
-    border-top: 1px solid $module-border-color
+    text-align: center
     margin-top: 12px
     padding-top: 12px
     

app/assets/stylesheets/swf_assets/show.css

@@ -4,9 +4,6 @@
 	position: absolute;
 	left: 0;
 	top: 0;
-
-	/* HACK: `calc` isn't needed, but works around a bug in our asset pipeline,
-	 * where libsass is trying to preprocess it. (We're not SASS tho?) */
-	width: calc(min(100vw, 100vh));
-	height: calc(min(100vw, 100vh));
+	width: min(100vw, 100vh);
+	height: min(100vw, 100vh);
 }

app/controllers/alt_styles_controller.rb

@@ -1,23 +1,35 @@
 class AltStylesController < ApplicationController
+	before_action :support_staff_only, except: [:index]
+
 	def index
-		@alt_styles = AltStyle.includes(:species, :color, :swf_assets).
-			order(:species_id, :color_id)
+		@all_series_names = AltStyle.all_series_names
+		@all_color_names = AltStyle.all_supported_colors.map(&:human_name).sort
+		@all_species_names = AltStyle.all_supported_species.map(&:human_name).sort
 
-		if params[:species_id]
-			@species = Species.find(params[:species_id])
-			@alt_styles = @alt_styles.merge(@species.alt_styles)
-		end
+		@series_name = params[:series]
+		@color = find_color
+		@species = find_species
 
-		# We're going to link to the HTML5 image URL, so make sure we have all the
+		@alt_styles = AltStyle.includes(:color, :species, :swf_assets)
+		@alt_styles.where!(series_name: @series_name) if @series_name.present?
+		@alt_styles.merge!(@color.alt_styles) if @color
+		@alt_styles.merge!(@species.alt_styles) if @species
+
+		# We're using the HTML5 image for our preview, so make sure we have all the
 		# manifests ready!
 		SwfAsset.preload_manifests @alt_styles.map(&:swf_assets).flatten
 
 		respond_to do |format|
-			format.html { render }
+			format.html {
+				@alt_styles = @alt_styles.
+					by_creation_date.order(:color_id, :species_id, :series_name).
+					paginate(page: params[:page], per_page: 30)
+				render
+			}
 			format.json {
-				render json: @alt_styles.includes(swf_assets: [:zone]).as_json(
-					only: [:id, :species_id, :color_id, :body_id, :series_name,
-								 :adjective_name, :thumbnail_url],
+				@alt_styles = @alt_styles.includes(swf_assets: [:zone]).by_name_grouped
+				render json: @alt_styles.as_json(
+					only: [:id, :species_id, :color_id, :body_id, :thumbnail_url],
 					include: {
 						swf_assets: {
 							only: [:id, :body_id],
@@ -25,9 +37,62 @@ class AltStylesController < ApplicationController
 							methods: [:urls, :known_glitches],
 						}
 					},
-					methods: [:series_name, :adjective_name, :thumbnail_url],
+					methods: [:series_main_name, :adjective_name],
 				)
 			}
 		end
 	end
+
+	def edit
+		@alt_style = AltStyle.find params[:id]
+	end
+
+	def update
+		@alt_style = AltStyle.find params[:id]
+
+		if @alt_style.update(alt_style_params)
+			flash[:notice] = "\"#{@alt_style.full_name}\" successfully saved!"
+			redirect_to destination_after_save
+		else
+			render action: :edit, status: :bad_request
+		end
+	end
+
+	protected
+
+	def alt_style_params
+		params.require(:alt_style).
+			permit(:real_series_name, :real_full_name, :thumbnail_url)
+	end
+
+	def find_color
+		if params[:color]
+			Color.find_by(name: params[:color])
+		end
+	end
+
+	def find_species
+		if params[:species_id]
+			Species.find_by(id: params[:species_id])
+		elsif params[:species]
+			Species.find_by(name: params[:species])
+		end
+	end
+
+	def destination_after_save
+		if params[:next] == "unlabeled-style"
+			next_unlabeled_style_path
+		else
+			alt_styles_path
+		end
+	end
+
+	def next_unlabeled_style_path
+		unlabeled_style = AltStyle.unlabeled.newest.first
+		if unlabeled_style
+			edit_alt_style_path(unlabeled_style, next: "unlabeled-style")
+		else
+			alt_styles_path
+		end
+	end
 end

app/controllers/application_controller.rb

@@ -2,12 +2,10 @@ require 'async'
 require 'async/container'
 
 class ApplicationController < ActionController::Base
-  include FragmentLocalization
-  
   protect_from_forgery
 
-  helper_method :current_user, :user_signed_in?
-  
+  helper_method :current_user, :support_staff?, :user_signed_in?
+
   before_action :set_locale
 
   before_action :configure_permitted_parameters, if: :devise_controller?
@@ -23,9 +21,12 @@ class ApplicationController < ActionController::Base
 
   class AccessDenied < StandardError; end
   rescue_from AccessDenied, with: :on_access_denied
+
   rescue_from Async::Stop, Async::Container::Terminate,
     with: :on_request_stopped
 
+  rescue_from ActiveRecord::ConnectionTimeoutError, with: :on_db_timeout
+
   def authenticate_user!
     redirect_to(new_auth_user_session_path) unless user_signed_in?
   end
@@ -45,15 +46,15 @@ class ApplicationController < ActionController::Base
   def user_signed_in?
     auth_user_signed_in?
   end
-  
+
   def infer_locale
     return params[:locale] if valid_locale?(params[:locale])
     return cookies[:locale] if valid_locale?(cookies[:locale])
     Rails.logger.debug "Preferred languages: #{http_accept_language.user_preferred_languages}"
-    http_accept_language.language_region_compatible_from(I18n.public_locales.map(&:to_s)) ||
+    http_accept_language.language_region_compatible_from(I18n.available_locales.map(&:to_s)) ||
       I18n.default_locale
   end
-  
+
   def not_found(record_name='record')
     raise ActionController::RoutingError.new("#{record_name} not found")
   end
@@ -67,6 +68,11 @@ class ApplicationController < ActionController::Base
       status: :internal_server_error
   end
 
+  def on_db_timeout
+    render file: 'public/503.html', layout: false,
+      status: :service_unavailable
+  end
+
   def redirect_back!(default=:back)
     redirect_to(params[:return_to] || default)
   end
@@ -76,7 +82,7 @@ class ApplicationController < ActionController::Base
   end
   
   def valid_locale?(locale)
-    locale && I18n.usable_locales.include?(locale.to_sym)
+    locale && I18n.available_locales.include?(locale.to_sym)
   end
 
   def configure_permitted_parameters
@@ -104,5 +110,13 @@ class ApplicationController < ActionController::Base
     Rails.logger.debug "Using return_to path: #{return_to.inspect}"
     return_to || root_path
   end
+
+  def support_staff?
+    current_user&.support_staff?
+  end
+
+  def support_staff_only
+    raise AccessDenied, "Support staff only" unless support_staff?
+  end
 end
 

app/controllers/closet_hangers_controller.rb

@@ -218,8 +218,12 @@ class ClosetHangersController < ApplicationController
   def enforce_shadowban
     # If this user is shadowbanned, and this *doesn't* seem to be a request
     # from that user, render the 404 page.
-    if @user.shadowbanned? && !@user.likely_is?(current_user, request.remote_ip)
-      render file: "public/404.html", layout: false, status: :not_found
+    if @user.shadowbanned?
+      can_see = support_staff? ||
+        @user.likely_is?(current_user, request.remote_ip)
+      if !can_see
+        render file: "public/404.html", layout: false, status: :not_found
+      end
     end
   end
 

app/controllers/items_controller.rb

@@ -1,5 +1,6 @@
 class ItemsController < ApplicationController
   before_action :set_query
+  before_action :support_staff_only, except: [:index, :show, :sources]
   rescue_from Item::Search::Error, :with => :search_error
 
   def index
@@ -97,8 +98,8 @@ class ItemsController < ApplicationController
         @preview_error = validate_preview
 
         @all_appearances = @item.appearances
-        @appearances_by_occupied_zone = @item.appearances_by_occupied_zone.
-          sort_by { |z, a| z.label }
+        @appearances_by_occupied_zone_label =
+          @item.appearances_by_occupied_zone_label.sort_by { |l, a| l }
         @selected_item_appearance = @preview_outfit.item_appearances.first
 
         @preview_pet_type_options = PetType.where(color: @preview_outfit.color).
@@ -112,24 +113,18 @@ class ItemsController < ApplicationController
     end
   end
 
-  def needed
-    if params[:color] && params[:species]
-      @pet_type = PetType.find_by_color_id_and_species_id(
-        params[:color],
-        params[:species]
-      )
-    end
-    
-    unless @pet_type
-      raise ActiveRecord::RecordNotFound, 'Pet type not found'
-    end
-    
-    @items = @pet_type.needed_items.order(:name)
-    assign_closeted!(@items)
-    
-    respond_to do |format|
-      format.html { @pet_name = params[:name] ; render :layout => 'application' }
-      format.json { render :json => @items }
+  def edit
+    @item = Item.find params[:id]
+    render layout: "application"
+  end
+
+  def update
+    @item = Item.find params[:id]
+    if @item.update(item_params)
+      flash[:notice] = "\"#{@item.name}\" successfully saved!"
+      redirect_to @item
+    else
+      render action: "edit", layout: "application", status: :bad_request
     end
   end
 
@@ -185,6 +180,15 @@ class ItemsController < ApplicationController
 
   protected
 
+  def item_params
+    params.require(:item).permit(
+      :name, :thumbnail_url, :description, :modeling_status_hint,
+      :is_manually_nc, :explicitly_body_specific,
+    ).tap do |p|
+      p[:modeling_status_hint] = nil if p[:modeling_status_hint] == ""
+    end
+  end
+
   def assign_closeted!(items)
     current_user.assign_closeted_to_items!(items) if user_signed_in?
   end
@@ -236,7 +240,8 @@ class ItemsController < ApplicationController
     @item.compatible_pet_types.
       preferring_species(cookies["preferred-preview-species-id"] || "<ignore>").
       preferring_color(cookies["preferred-preview-color-id"] || "<ignore>").
-      preferring_simple.first
+      preferring_simple.first ||
+      PetType.matching_name("Blue", "Acara").first!
   end
 
   def validate_preview

app/controllers/outfits_controller.rb

@@ -47,29 +47,24 @@ class OutfitsController < ApplicationController
   end
 
   def new
-    @colors = Color.funny.alphabetical
+    @colors = Color.alphabetical
     @species = Species.alphabetical
 
-    # HACK: Skip this in development, because it's slow!
-    unless Rails.env.development?
-      newest_items = Item.newest.
-        select(:id, :name, :updated_at, :thumbnail_url, :rarity_index, :is_manually_nc)
-        .limit(18)
-      @newest_modeled_items, @newest_unmodeled_items =
-        newest_items.partition(&:predicted_fully_modeled?)
+    newest_items = Item.newest.limit(18)
+    @newest_modeled_items, @newest_unmodeled_items =
+      newest_items.partition(&:predicted_fully_modeled?)
 
-      @newest_unmodeled_items_predicted_missing_species_by_color = {}
-      @newest_unmodeled_items_predicted_modeled_ratio = {}
-      @newest_unmodeled_items.each do |item|
-        h = item.predicted_missing_nonstandard_body_ids_by_species_by_color
-        standard_body_ids_by_species = item.
-          predicted_missing_standard_body_ids_by_species
-        if standard_body_ids_by_species.present?
-          h[:standard] = standard_body_ids_by_species
-        end
-        @newest_unmodeled_items_predicted_missing_species_by_color[item] = h
-        @newest_unmodeled_items_predicted_modeled_ratio[item] = item.predicted_modeled_ratio
+    @newest_unmodeled_items_predicted_missing_species_by_color = {}
+    @newest_unmodeled_items_predicted_modeled_ratio = {}
+    @newest_unmodeled_items.each do |item|
+      h = item.predicted_missing_nonstandard_body_ids_by_species_by_color
+      standard_body_ids_by_species = item.
+        predicted_missing_standard_body_ids_by_species
+      if standard_body_ids_by_species.present?
+        h[:standard] = standard_body_ids_by_species
       end
+      @newest_unmodeled_items_predicted_missing_species_by_color[item] = h
+      @newest_unmodeled_items_predicted_modeled_ratio[item] = item.predicted_modeled_ratio
     end
 
     @species_count = Species.count

app/controllers/pet_states_controller.rb

@@ -0,0 +1,56 @@
+class PetStatesController < ApplicationController
+	before_action :support_staff_only
+	before_action :find_pet_state
+	before_action :preload_assets
+
+	def edit
+	end
+
+	def update
+		if @pet_state.update(pet_state_params)
+			flash[:notice] = "Pet appearance \##{@pet_state.id} successfully saved!"
+			redirect_to destination_after_save
+		else
+			render action: :edit, status: :bad_request
+		end
+	end
+
+	protected
+
+	def find_pet_state
+		@pet_type = PetType.find_by_param!(params[:pet_type_name])
+		@pet_state = @pet_type.pet_states.find(params[:id])
+		@reference_pet_type = @pet_type.reference
+	end
+
+	def preload_assets
+		SwfAsset.preload_manifests @pet_state.swf_assets
+	end
+
+	def pet_state_params
+		params.require(:pet_state).permit(:pose, :glitched)
+	end
+
+	def destination_after_save
+		if params[:next] == "unlabeled-appearance"
+			next_unlabeled_appearance_path
+		else
+			@pet_type
+		end
+	end
+
+	def next_unlabeled_appearance_path
+		unlabeled_appearance =
+			PetState.next_unlabeled_appearance(after_id: params[:after])
+
+		if unlabeled_appearance
+			edit_pet_type_pet_state_path(
+				unlabeled_appearance.pet_type,
+				unlabeled_appearance,
+				next: "unlabeled-appearance"
+			)
+		else
+			@pet_type
+		end
+	end
+end

app/controllers/pet_types_controller.rb

@@ -1,10 +1,111 @@
 class PetTypesController < ApplicationController
-	def show
-		@pet_type = PetType.
-			where(species_id: params[:species_id]).
-			where(color_id: params[:color_id]).
-			first
+	def index
+		respond_to do |format|
+			format.html {
+				@species_names = Species.order(:name).map(&:human_name)
+				@color_names = Color.order(:name).map(&:human_name)
 
-		render json: @pet_type
+				if params[:species].present?
+					@selected_species = Species.find_by!(name: params[:species])
+					@selected_species_name = @selected_species.human_name
+				end
+				if params[:color].present?
+					@selected_color = Color.find_by!(name: params[:color])
+					@selected_color_name = @selected_color.human_name
+				end
+				@selected_order =
+					if @selected_species.present? || @selected_color.present?
+						:alphabetical
+					else
+						:newest
+					end
+
+				@pet_types = PetType.
+					includes(:color, :species, :pet_states).
+					paginate(page: params[:page], per_page: 30)
+
+				@pet_types.where!(species_id: @selected_species) if @selected_species
+				@pet_types.where!(color_id: @selected_color) if @selected_color
+				if @selected_order == :newest
+					@pet_types.order!(created_at: :desc)
+				elsif @selected_order == :alphabetical
+					@pet_types.merge!(Color.alphabetical).merge!(Species.alphabetical)
+				end
+
+				if @selected_species && @selected_color && @pet_types.size == 1
+					redirect_to @pet_types.first
+				end
+
+				if support_staff?
+					@counts = {
+						total: PetState.count,
+						glitched: PetState.glitched.count,
+						needs_labeling: PetState.needs_labeling.count,
+						usable: PetState.usable.count,
+					}
+					@unlabeled_appearance = PetState.next_unlabeled_appearance
+				end
+			}
+
+			format.json {
+				if stale?(etag: PetState.last_updated_key)
+					render json: {
+						species: Species.order(:name).all,
+						colors: Color.order(:name).all,
+						supported_poses: PetState.all_supported_poses,
+					}
+				end
+			}
+		end
+	end
+
+	def show
+		@pet_type = find_pet_type
+
+		respond_to do |format|
+			format.html do
+				@pet_states = group_pet_states @pet_type.pet_states
+			end
+			format.json { render json: @pet_type }
+		end
+	end
+
+	protected
+
+	# The API-ish route uses IDs, but the human-facing route uses names.
+	def find_pet_type
+		if params[:species_id] && params[:color_id]
+			PetType.find_by!(
+				species_id: params[:species_id],
+				color_id: params[:color_id],
+			)
+		elsif params[:name]
+			PetType.find_by_param!(params[:name])
+		else
+			raise "expected params: species_id and color_id, or name"
+		end
+	end
+
+	# The `canonical` pet states are the main ones we want to show: the most
+	# canonical state for each pose. The `other` pet states are, the others!
+	#
+	# If no main poses are available, then we just make all the poses
+	# "canonical", and show the whole mish-mash!
+	def group_pet_states(pet_states)
+		pose_groups = pet_states.emotion_order.group_by(&:pose)
+		main_groups =
+			pose_groups.select { |k| PetState::MAIN_POSES.include?(k) }.values
+		other_groups =
+			pose_groups.reject { |k| PetState::MAIN_POSES.include?(k) }.values
+
+		if main_groups.empty?
+			return {canonical: other_groups.flatten(1).sort_by(&:pose), other: []}
+		end
+
+		canonical = main_groups.map(&:first).sort_by(&:pose)
+		main_others = main_groups.map { |l| l.drop(1) }.flatten(1)
+		other = (main_others + other_groups.flatten(1)).sort_by(&:pose)
+
+		{canonical:, other:}
 	end
 end

app/controllers/pets_controller.rb

@@ -1,20 +1,17 @@
 class PetsController < ApplicationController
-  rescue_from Pet::PetNotFound, with: :pet_not_found
-  rescue_from PetType::DownloadError, SwfAsset::DownloadError, with: :asset_download_error
-  rescue_from Pet::DownloadError, with: :pet_download_error
+  rescue_from Neopets::CustomPets::PetNotFound, with: :pet_not_found
+  rescue_from Neopets::CustomPets::DownloadError, with: :pet_download_error
+  rescue_from Pet::ModelingDisabled, with: :modeling_disabled
   rescue_from Pet::UnexpectedDataFormat, with: :unexpected_data_format
 
   def load
-    # Uncomment this to temporarily disable modeling for most users.
-    # return modeling_disabled unless user_signed_in? && current_user.admin?
-
-    raise Pet::PetNotFound unless params[:name]
+    raise Neopets::CustomPets::PetNotFound unless params[:name]
     @pet = Pet.load(params[:name])
     points = contribute(current_user, @pet)
     
     respond_to do |format|
       format.html do
-        path = destination + @pet.wardrobe_query
+        path = destination + "?" + @pet.wardrobe_query
         redirect_to path
       end
       
@@ -38,9 +35,8 @@ class PetsController < ApplicationController
   
   def destination
     case (params[:destination] || params[:origin])
-      when 'wardrobe'     then wardrobe_path     + '?'
-      when 'needed_items' then needed_items_path + '?'
-      else                     root_path         + '#'
+      when 'wardrobe'     then wardrobe_path
+      else                     root_path
     end
   end
   
@@ -49,12 +45,6 @@ class PetsController < ApplicationController
                    :status => :not_found
   end
   
-  def asset_download_error(e)
-    Rails.logger.warn e.message
-    pet_load_error :long_message => t('pets.load.asset_download_error'),
-                   :status => :gateway_timeout
-  end
-  
   def pet_download_error(e)
     Rails.logger.warn e.message
     Rails.logger.warn e.backtrace.join("\n")

app/controllers/swf_assets_controller.rb

@@ -12,13 +12,20 @@ class SwfAssetsController < ApplicationController
 				helpers.image_url("favicon.png"),
 				@swf_asset.image_url,
 				*@swf_asset.canvas_movie_sprite_urls,
+
+				# For images, `images.neopets.com` is a generally safe host to load
+				# from (shouldn't be a vulnerable site or exfiltration vector), and
+				# doing this can help make this header a *lot* shorter, which helps
+				# our nginx reverse proxy (and probably some clients) handle it. (For
+				# example, see asset `667993` for "Engulfed in Flames Effect".)
+				origins: ["https://images.neopets.com"],
 			)
 		}
 
 		policy.script_src -> {
 			src_list(
-				helpers.javascript_url("lib/easeljs.min"),
-				helpers.javascript_url("lib/tweenjs.min"),
+				helpers.javascript_url("easeljs.min"),
+				helpers.javascript_url("tweenjs.min"),
 				helpers.javascript_url("swf_assets/show"),
 				@swf_asset.canvas_movie_library_url,
 			)
@@ -38,7 +45,23 @@ class SwfAssetsController < ApplicationController
 
 	private
 
-	def src_list(*urls)
-		urls.filter(&:present?).map { |url| url.sub(/\?.*\z/, "") }.join(" ")
+	def src_list(*urls, origins: [])
+		clean_urls = urls.
+			# Ignore any `nil`s that might arise
+			filter(&:present?).
+			# Parse the URL.
+			map { |url| Addressable::URI.parse(url) }.
+			# Remove query strings from URLs (they're invalid in CSPs)
+			each { |url| url.query = nil }.
+			# For the given `origins`, remove all their specific URLs, because
+			# we'll just include the entire origin anyway.
+			reject { |url| origins.include?(url.origin) }.
+			# Normalize the URLs. (This fixes issues like when the canonical
+			# Neopets version of the URL contains plain unescaped spaces.)
+			each(&:normalize!).
+			# Convert the URLs back into strings.
+			map(&:to_s)
+
+		clean_urls + origins
 	end
 end

app/controllers/users_controller.rb

@@ -1,5 +1,6 @@
 class UsersController < ApplicationController
-  before_action :find_and_authorize_user!, :only => [:update]
+  before_action :find_and_authorize_user!, only: [:edit, :update]
+  before_action :support_staff_only, only: [:edit]
 
   def index # search, really
     name = params[:name]
@@ -16,6 +17,9 @@ class UsersController < ApplicationController
     @users = User.top_contributors.paginate :page => params[:page], :per_page => 20
   end
 
+  def edit
+  end
+
   def update
     @user.attributes = user_params
     success = @user.save
@@ -42,17 +46,24 @@ class UsersController < ApplicationController
 
   protected
 
+  ALLOWED_ATTRS = [
+    :owned_closet_hangers_visibility,
+    :wanted_closet_hangers_visibility,
+    :contact_neopets_connection_id,
+  ]
   def user_params
-    params.require(:user).permit(:owned_closet_hangers_visibility,
-      :wanted_closet_hangers_visibility, :contact_neopets_connection_id)
+    if support_staff?
+      params.require(:user).permit(
+        *ALLOWED_ATTRS, :name, :shadowbanned, :support_staff
+      )
+    else
+      params.require(:user).permit(*ALLOWED_ATTRS)
+    end
   end
 
   def find_and_authorize_user!
-    if current_user.id == params[:id].to_i
-      @user = current_user
-    else
-      raise AccessDenied
-    end
+    @user = User.find(params[:id])
+    raise AccessDenied unless current_user == @user || support_staff?
   end
 end
 

app/helpers/alt_styles_helper.rb

@@ -0,0 +1,13 @@
+module AltStylesHelper
+	def view_or_edit_alt_style_url(alt_style)
+		if support_staff?
+			edit_alt_style_path alt_style
+		else
+			wardrobe_path(
+				species: alt_style.species_id,
+				color: alt_style.color_id,
+				style: alt_style.id,
+			)
+		end
+	end
+end

app/helpers/application_helper.rb

@@ -1,6 +1,4 @@
 module ApplicationHelper
-  include FragmentLocalization
-
   def absolute_url(path_or_url)
     if path_or_url.include?('://') # already an absolute URL
       path_or_url
@@ -129,10 +127,6 @@ module ApplicationHelper
     !@hide_home_link
   end
 
-  def support_staff?
-    user_signed_in? && current_user.support_staff?
-  end
-
   def impress_2020_meta_tags
     origin = Rails.configuration.impress_2020_origin
     support_secret = Rails.application.credentials.dig(
@@ -148,20 +142,9 @@ module ApplicationHelper
     end
   end
 
-  JAVASCRIPT_LIBRARIES = {
-    :jquery => 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js',
-    :jquery_tmpl => 'https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js',
-  }
-
-  def include_javascript_libraries(*library_names)
-    raw(library_names.inject('') do |html, name|
-      html + javascript_include_tag(JAVASCRIPT_LIBRARIES[name], defer: true)
-    end)
-  end
-  
   def locale_options
     current_locale_is_public = false
-    options = I18n.public_locales.map do |available_locale|
+    options = I18n.available_locales.map do |available_locale|
       current_locale_is_public = true if I18n.locale == available_locale
       # Include fallbacks data on the tag. Right now it's used in blog
       # localization, but may conceivably be used for something else later.
@@ -176,13 +159,6 @@ module ApplicationHelper
     
     options
   end
-  
-  def localized_cache(key={}, &block)
-    localized_key = localize_fragment_key(key, locale)
-    # TODO: The digest feature is handy, but it's not compatible with how we
-    # check for fragments existence in the controller, so skip it for now.
-    cache(localized_key, skip_digest: true, &block)
-  end
 
   def auth_user_sign_in_path_with_return_to
     new_auth_user_session_path :return_to => request.fullpath
@@ -237,6 +213,10 @@ module ApplicationHelper
     @hide_title_header = true
   end
 
+  def hide_after(last_day, &block)
+    yield if Date.today <= last_day
+  end
+
   def use_responsive_design
     @use_responsive_design = true
     add_body_class "use-responsive-design"

app/helpers/items_helper.rb

@@ -14,19 +14,30 @@ module ItemsHelper
     }
 
     Sizes = {
-      face: 1,
-      thumb: 2,
-      zoom: 3,
-      full: 4,
-      face_2x: 6,
+      face:     1, # 50x50
+      face_3x:  6, # 150x150
+
+      thumb:    2, # 150x150
+      full:     4, # 300x300
+      large:    5, # 500x500
+      xlarge:   7, # 640x640
+
+      zoom:     3, # 80x80
+      autocrop: 9, # <varies>
+    }
+
+    SizeUpgrades = {
+      face: :face_3x,
+      thumb: :full,
+      full: :xlarge,
     }
   end
 
   def pet_type_image_url(pet_type, emotion: :happy, size: :face)
     PetTypeImage::Template.expand(
       hash: pet_type.basic_image_hash || pet_type.image_hash,
-      emotion: PetTypeImage::Emotions[emotion],
-      size: PetTypeImage::Sizes[size],
+      emotion: PetTypeImage::Emotions.fetch(emotion),
+      size: PetTypeImage::Sizes.fetch(size),
     ).to_s
   end
 
@@ -246,8 +257,10 @@ module ItemsHelper
 
   def pet_type_image(pet_type, emotion, size, **options)
     src = pet_type_image_url(pet_type, emotion:, size:)
-    srcset = if size == :face
-      [[pet_type_image_url(pet_type, emotion:, size: :face_2x), "2x"]]
+
+    size_2x = PetTypeImage::SizeUpgrades[size]
+    srcset = if size_2x
+      [[pet_type_image_url(pet_type, emotion:, size: size_2x), "2x"]]
     end
 
     image_tag(src, srcset:, **options)

app/helpers/outfits_helper.rb

@@ -1,9 +1,4 @@
 module OutfitsHelper
-  LAST_DAY_OF_ANNOUNCEMENT = Date.parse("2024-09-13")
-  def show_announcement?
-    Date.today <= LAST_DAY_OF_ANNOUNCEMENT
-  end
-
   def destination_tag(value)
     hidden_field_tag 'destination', value, :id => nil
   end
@@ -69,5 +64,28 @@ module OutfitsHelper
     options = {:spellcheck => false, :id => nil}.merge(options)
     text_field_tag 'name', nil, options
   end
-end
 
+  def outfit_viewer(...)
+    render partial: "outfit_viewer",
+      locals: parse_outfit_viewer_options(...)
+  end
+
+  def support_outfit_viewer(...)
+    render partial: "support_outfit_viewer",
+      locals: parse_outfit_viewer_options(...)
+  end
+
+  private
+
+  def parse_outfit_viewer_options(
+    outfit=nil, pet_state: nil, preferred_image_format: :png, **html_options
+  )
+    outfit = Outfit.new(pet_state:) if outfit.nil? && pet_state.present?
+
+    if outfit.nil?
+      raise ArgumentError, "outfit viewer must have outfit or pet state"
+    end
+
+    {outfit:, preferred_image_format:, html_options:}
+  end
+end

app/helpers/pet_states_helper.rb

@@ -0,0 +1,41 @@
+module PetStatesHelper
+	def pose_name(pose)
+		case pose
+		when "HAPPY_FEM"
+			"Happy (Feminine)"
+		when "HAPPY_MASC"
+			"Happy (Masculine)"
+		when "SAD_FEM"
+			"Sad (Feminine)"
+		when "SAD_MASC"
+			"Sad (Masculine)"
+		when "SICK_FEM"
+			"Sick (Feminine)"
+		when "SICK_MASC"
+			"Sick (Masculine)"
+		when "UNCONVERTED"
+			"Unconverted"
+		else
+			"Not labeled yet"
+		end
+	end
+
+	POSE_OPTIONS = %w(HAPPY_FEM SAD_FEM SICK_FEM HAPPY_MASC SAD_MASC SICK_MASC
+	                  UNCONVERTED UNKNOWN)
+	def pose_options
+		POSE_OPTIONS
+	end
+
+	def useful_pet_state_path(pet_type, pet_state)
+		if support_staff?
+			edit_pet_type_pet_state_path(pet_type, pet_state)
+		else
+			wardrobe_path(
+				color: pet_type.color_id,
+				species: pet_type.species_id,
+				pose: pet_state.pose,
+				state: pet_state.id,
+			)
+		end
+	end
+end

app/helpers/pet_types_helper.rb

@@ -0,0 +1,16 @@
+module PetTypesHelper
+	def moon_progress(num, total)
+		nearest_quarter = (4.0 * num / total).round / 4.0
+		if nearest_quarter >= 1
+			"🌕️"
+		elsif nearest_quarter >= 0.75
+			"🌔"
+		elsif nearest_quarter >= 0.5
+			"🌓"
+		elsif nearest_quarter >= 0.25
+			"🌒"
+		else
+			"🌑"
+		end
+	end
+end

app/helpers/support_form_helper.rb

@@ -0,0 +1,64 @@
+module SupportFormHelper
+	class SupportFormBuilder < ActionView::Helpers::FormBuilder
+		attr_reader :template
+		delegate :capture, :check_box_tag, :concat, :content_tag,
+			:hidden_field_tag, :params, :render,
+			to: :template, private: true
+
+		def errors
+			render partial: "application/support_form/errors", locals: {form: self}
+		end
+
+		def fields(&block)
+			content_tag(:ul, class: "fields", &block)
+		end
+
+		def field(**options, &block)
+			content_tag(:li, **options, &block)
+		end
+
+		def radio_fieldset(legend, **options, &block)
+			render partial: "application/support_form/radio_fieldset",
+				locals: {form: self, legend:, options:, content: capture(&block)}
+		end
+
+		def radio_field(**options, &block)
+			content_tag(:li) do
+				content_tag(:label, **options, &block)
+			end
+		end
+
+		def radio_grid_fieldset(*args, &block)
+			radio_fieldset(*args, "data-type": "radio-grid", &block)
+		end
+
+		def thumbnail_input(method)
+			render partial: "application/support_form/thumbnail_input",
+				locals: {form: self, method:}
+		end
+
+		def actions(&block)
+			content_tag(:section, class: "actions", &block)
+		end
+
+		def go_to_next_field(after: nil, **options, &block)
+			content_tag(:label, class: "go-to-next", **options) do
+				concat hidden_field_tag(:after, after) if after
+				yield
+			end
+		end
+
+		def go_to_next_check_box(value)
+			check_box_tag "next", value, checked: params[:next] == value
+		end
+	end
+
+	def support_form_with(**options, &block)
+		form_with(
+			builder: SupportFormBuilder,
+			**options,
+			class: ["support-form", options[:class]],
+			&block
+		)
+	end
+end

app/javascript/application.js

@@ -1,5 +1,6 @@
 import "@hotwired/turbo-rails";
 
-document.getElementById("locale").addEventListener("change", function () {
-  document.getElementById("locale-form").submit();
+document.addEventListener("change", (e) => {
+	if (!e.target.matches("#locale")) return;
+	document.getElementById("locale-form").submit();
 });

app/javascript/wardrobe-2020-page.js

@@ -7,8 +7,8 @@ const rootNode = document.querySelector("#wardrobe-2020-root");
 // TODO: Use the new React 18 APIs instead!
 // eslint-disable-next-line react/no-deprecated
 ReactDOM.render(
-  <AppProvider>
-    <WardrobePage />
-  </AppProvider>,
-  rootNode,
+	<AppProvider>
+		<WardrobePage />
+	</AppProvider>,
+	rootNode,
 );

app/javascript/wardrobe-2020/AppProvider.js

@@ -2,12 +2,12 @@ import React from "react";
 import * as Sentry from "@sentry/react";
 import { Integrations } from "@sentry/tracing";
 import {
-  ChakraProvider,
-  Box,
-  css as resolveCSS,
-  extendTheme,
-  useColorMode,
-  useTheme,
+	ChakraProvider,
+	Box,
+	css as resolveCSS,
+	extendTheme,
+	useColorMode,
+	useTheme,
 } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
 import { ApolloProvider } from "@apollo/client";
@@ -20,15 +20,15 @@ import apolloClient from "./apolloClient";
 const reactQueryClient = new QueryClient();
 
 let theme = extendTheme({
-  styles: {
-    global: (props) => ({
-      body: {
-        background: mode("gray.50", "gray.800")(props),
-        color: mode("green.800", "green.50")(props),
-        transition: "all 0.25s",
-      },
-    }),
-  },
+	styles: {
+		global: (props) => ({
+			body: {
+				background: mode("gray.50", "gray.800")(props),
+				color: mode("green.800", "green.50")(props),
+				transition: "all 0.25s",
+			},
+		}),
+	},
 });
 
 // Capture the global styles function from our theme, but remove it from the
@@ -43,60 +43,60 @@ const globalStyles = theme.styles.global;
 theme.styles.global = {};
 
 export default function AppProvider({ children }) {
-  React.useEffect(() => setupLogging(), []);
+	React.useEffect(() => setupLogging(), []);
 
-  return (
-    <BrowserRouter>
-      <QueryClientProvider client={reactQueryClient}>
-        <ApolloProvider client={apolloClient}>
-          <ChakraProvider resetCSS={false} theme={theme}>
-            <ScopedCSSReset>{children}</ScopedCSSReset>
-          </ChakraProvider>
-        </ApolloProvider>
-      </QueryClientProvider>
-    </BrowserRouter>
-  );
+	return (
+		<BrowserRouter>
+			<QueryClientProvider client={reactQueryClient}>
+				<ApolloProvider client={apolloClient}>
+					<ChakraProvider resetCSS={false} theme={theme}>
+						<ScopedCSSReset>{children}</ScopedCSSReset>
+					</ChakraProvider>
+				</ApolloProvider>
+			</QueryClientProvider>
+		</BrowserRouter>
+	);
 }
 
 function setupLogging() {
-  Sentry.init({
-    dsn: "https://c55875c3b0904264a1a99e5b741a221e@o506079.ingest.sentry.io/5595379",
-    autoSessionTracking: true,
-    integrations: [
-      new Integrations.BrowserTracing({
-        beforeNavigate: (context) => ({
-          ...context,
-          // Assume any path segment starting with a digit is an ID, and replace
-          // it with `:id`. This will help group related routes in Sentry stats.
-          // NOTE: I'm a bit uncertain about the timing on this for tracking
-          //       client-side navs... but we now only track first-time
-          //       pageloads, and it definitely works correctly for them!
-          name: window.location.pathname.replaceAll(/\/[0-9][^/]*/g, "/:id"),
-        }),
+	Sentry.init({
+		dsn: "https://c55875c3b0904264a1a99e5b741a221e@o506079.ingest.sentry.io/5595379",
+		autoSessionTracking: true,
+		integrations: [
+			new Integrations.BrowserTracing({
+				beforeNavigate: (context) => ({
+					...context,
+					// Assume any path segment starting with a digit is an ID, and replace
+					// it with `:id`. This will help group related routes in Sentry stats.
+					// NOTE: I'm a bit uncertain about the timing on this for tracking
+					//       client-side navs... but we now only track first-time
+					//       pageloads, and it definitely works correctly for them!
+					name: window.location.pathname.replaceAll(/\/[0-9][^/]*/g, "/:id"),
+				}),
 
-        // We have a _lot_ of location changes that don't actually signify useful
-        // navigations, like in the wardrobe page. It could be useful to trace
-        // them with better filtering someday, but frankly we don't use the perf
-        // features besides Web Vitals right now, and those only get tracked on
-        // first-time pageloads, anyway. So, don't track client-side navs!
-        startTransactionOnLocationChange: false,
-      }),
-    ],
-    denyUrls: [
-      // Don't log errors that were probably triggered by extensions and not by
-      // our own app. (Apparently Sentry's setting to ignore browser extension
-      // errors doesn't do this anywhere near as consistently as I'd expect?)
-      //
-      // Adapted from https://gist.github.com/impressiver/5092952, as linked in
-      // https://docs.sentry.io/platforms/javascript/configuration/filtering/.
-      /^chrome-extension:\/\//,
-      /^moz-extension:\/\//,
-    ],
+				// We have a _lot_ of location changes that don't actually signify useful
+				// navigations, like in the wardrobe page. It could be useful to trace
+				// them with better filtering someday, but frankly we don't use the perf
+				// features besides Web Vitals right now, and those only get tracked on
+				// first-time pageloads, anyway. So, don't track client-side navs!
+				startTransactionOnLocationChange: false,
+			}),
+		],
+		denyUrls: [
+			// Don't log errors that were probably triggered by extensions and not by
+			// our own app. (Apparently Sentry's setting to ignore browser extension
+			// errors doesn't do this anywhere near as consistently as I'd expect?)
+			//
+			// Adapted from https://gist.github.com/impressiver/5092952, as linked in
+			// https://docs.sentry.io/platforms/javascript/configuration/filtering/.
+			/^chrome-extension:\/\//,
+			/^moz-extension:\/\//,
+		],
 
-    // Since we're only tracking first-page loads and not navigations, 100%
-    // sampling isn't actually so much! Tune down if it becomes a problem, tho.
-    tracesSampleRate: 1.0,
-  });
+		// Since we're only tracking first-page loads and not navigations, 100%
+		// sampling isn't actually so much! Tune down if it becomes a problem, tho.
+		tracesSampleRate: 1.0,
+	});
 }
 
 /**
@@ -112,308 +112,308 @@ function setupLogging() {
  * the selector `:where(.chakra-css-reset) h1` is lower specificity.
  */
 function ScopedCSSReset({ children }) {
-  // Get the current theme and color mode.
-  //
-  // NOTE: The theme object returned by `useTheme` has some extensions that are
-  // necessary for the code below, but aren't present in the theme config
-  // returned by `extendTheme`! That's why we use this here instead of `theme`.
-  const liveTheme = useTheme();
-  const colorMode = useColorMode();
+	// Get the current theme and color mode.
+	//
+	// NOTE: The theme object returned by `useTheme` has some extensions that are
+	// necessary for the code below, but aren't present in the theme config
+	// returned by `extendTheme`! That's why we use this here instead of `theme`.
+	const liveTheme = useTheme();
+	const colorMode = useColorMode();
 
-  // Resolve the theme's global styles into CSS objects for Emotion.
-  const globalStylesCSS = resolveCSS(
-    globalStyles({ theme: liveTheme, colorMode }),
-  )(liveTheme);
+	// Resolve the theme's global styles into CSS objects for Emotion.
+	const globalStylesCSS = resolveCSS(
+		globalStyles({ theme: liveTheme, colorMode }),
+	)(liveTheme);
 
-  // Prepend our special scope selector to the global styles.
-  const scopedGlobalStylesCSS = {};
-  for (let [selector, rules] of Object.entries(globalStylesCSS)) {
-    // The `body` selector is where typography etc rules go, but `body` isn't
-    // actually *inside* our scoped element! Instead, ignore the `body` part,
-    // and just apply it to the scoping element itself.
-    if (selector.trim() === "body") {
-      selector = "";
-    }
+	// Prepend our special scope selector to the global styles.
+	const scopedGlobalStylesCSS = {};
+	for (let [selector, rules] of Object.entries(globalStylesCSS)) {
+		// The `body` selector is where typography etc rules go, but `body` isn't
+		// actually *inside* our scoped element! Instead, ignore the `body` part,
+		// and just apply it to the scoping element itself.
+		if (selector.trim() === "body") {
+			selector = "";
+		}
 
-    const scopedSelector =
-      ":where(.chakra-css-reset, .chakra-portal) " + selector;
-    scopedGlobalStylesCSS[scopedSelector] = rules;
-  }
+		const scopedSelector =
+			":where(.chakra-css-reset, .chakra-portal) " + selector;
+		scopedGlobalStylesCSS[scopedSelector] = rules;
+	}
 
-  return (
-    <>
-      <Box className="chakra-css-reset">{children}</Box>
-      <Global
-        styles={css`
-          /* Chakra's default global styles, placed here so we can override
+	return (
+		<>
+			<Box className="chakra-css-reset">{children}</Box>
+			<Global
+				styles={css`
+					/* Chakra's default global styles, placed here so we can override
            * the actual _global_ styles in the theme to be empty. That way,
            * it only affects Chakra stuff, not all elements! */
-          ${scopedGlobalStylesCSS}
+					${scopedGlobalStylesCSS}
 
-          /* Chakra's CSS reset, copy-pasted and rescoped! */
+					/* Chakra's CSS reset, copy-pasted and rescoped! */
           :where(.chakra-css-reset, .chakra-portal) {
-            *,
-            *::before,
-            *::after {
-              border-width: 0;
-              border-style: solid;
-              box-sizing: border-box;
-            }
+						*,
+						*::before,
+						*::after {
+							border-width: 0;
+							border-style: solid;
+							box-sizing: border-box;
+						}
 
-            main {
-              display: block;
-            }
+						main {
+							display: block;
+						}
 
-            hr {
-              border-top-width: 1px;
-              box-sizing: content-box;
-              height: 0;
-              overflow: visible;
-            }
+						hr {
+							border-top-width: 1px;
+							box-sizing: content-box;
+							height: 0;
+							overflow: visible;
+						}
 
-            pre,
-            code,
-            kbd,
-            samp {
-              font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-              font-size: 1em;
-            }
+						pre,
+						code,
+						kbd,
+						samp {
+							font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+							font-size: 1em;
+						}
 
-            a {
-              background-color: transparent;
-              color: inherit;
-              text-decoration: inherit;
-            }
+						a {
+							background-color: transparent;
+							color: inherit;
+							text-decoration: inherit;
+						}
 
-            abbr[title] {
-              border-bottom: none;
-              text-decoration: underline;
-              -webkit-text-decoration: underline dotted;
-              text-decoration: underline dotted;
-            }
+						abbr[title] {
+							border-bottom: none;
+							text-decoration: underline;
+							-webkit-text-decoration: underline dotted;
+							text-decoration: underline dotted;
+						}
 
-            b,
-            strong {
-              font-weight: bold;
-            }
+						b,
+						strong {
+							font-weight: bold;
+						}
 
-            small {
-              font-size: 80%;
-            }
+						small {
+							font-size: 80%;
+						}
 
-            sub,
-            sup {
-              font-size: 75%;
-              line-height: 0;
-              position: relative;
-              vertical-align: baseline;
-            }
+						sub,
+						sup {
+							font-size: 75%;
+							line-height: 0;
+							position: relative;
+							vertical-align: baseline;
+						}
 
-            sub {
-              bottom: -0.25em;
-            }
+						sub {
+							bottom: -0.25em;
+						}
 
-            sup {
-              top: -0.5em;
-            }
+						sup {
+							top: -0.5em;
+						}
 
-            img {
-              border-style: none;
-            }
+						img {
+							border-style: none;
+						}
 
-            button,
-            input,
-            optgroup,
-            select,
-            textarea {
-              font-family: inherit;
-              font-size: 100%;
-              line-height: 1.15;
-              margin: 0;
-            }
+						button,
+						input,
+						optgroup,
+						select,
+						textarea {
+							font-family: inherit;
+							font-size: 100%;
+							line-height: 1.15;
+							margin: 0;
+						}
 
-            button,
-            input {
-              overflow: visible;
-            }
+						button,
+						input {
+							overflow: visible;
+						}
 
-            button,
-            select {
-              text-transform: none;
-            }
+						button,
+						select {
+							text-transform: none;
+						}
 
-            button::-moz-focus-inner,
-            [type="button"]::-moz-focus-inner,
-            [type="reset"]::-moz-focus-inner,
-            [type="submit"]::-moz-focus-inner {
-              border-style: none;
-              padding: 0;
-            }
+						button::-moz-focus-inner,
+						[type="button"]::-moz-focus-inner,
+						[type="reset"]::-moz-focus-inner,
+						[type="submit"]::-moz-focus-inner {
+							border-style: none;
+							padding: 0;
+						}
 
-            fieldset {
-              padding: 0.35em 0.75em 0.625em;
-            }
+						fieldset {
+							padding: 0.35em 0.75em 0.625em;
+						}
 
-            legend {
-              box-sizing: border-box;
-              color: inherit;
-              display: table;
-              max-width: 100%;
-              padding: 0;
-              white-space: normal;
-            }
+						legend {
+							box-sizing: border-box;
+							color: inherit;
+							display: table;
+							max-width: 100%;
+							padding: 0;
+							white-space: normal;
+						}
 
-            progress {
-              vertical-align: baseline;
-            }
+						progress {
+							vertical-align: baseline;
+						}
 
-            textarea {
-              overflow: auto;
-            }
+						textarea {
+							overflow: auto;
+						}
 
-            [type="checkbox"],
-            [type="radio"] {
-              box-sizing: border-box;
-              padding: 0;
-            }
+						[type="checkbox"],
+						[type="radio"] {
+							box-sizing: border-box;
+							padding: 0;
+						}
 
-            [type="number"]::-webkit-inner-spin-button,
-            [type="number"]::-webkit-outer-spin-button {
-              -webkit-appearance: none !important;
-            }
+						[type="number"]::-webkit-inner-spin-button,
+						[type="number"]::-webkit-outer-spin-button {
+							-webkit-appearance: none !important;
+						}
 
-            input[type="number"] {
-              -moz-appearance: textfield;
-            }
+						input[type="number"] {
+							-moz-appearance: textfield;
+						}
 
-            [type="search"] {
-              -webkit-appearance: textfield;
-              outline-offset: -2px;
-            }
+						[type="search"] {
+							-webkit-appearance: textfield;
+							outline-offset: -2px;
+						}
 
-            [type="search"]::-webkit-search-decoration {
-              -webkit-appearance: none !important;
-            }
+						[type="search"]::-webkit-search-decoration {
+							-webkit-appearance: none !important;
+						}
 
-            ::-webkit-file-upload-button {
-              -webkit-appearance: button;
-              font: inherit;
-            }
+						::-webkit-file-upload-button {
+							-webkit-appearance: button;
+							font: inherit;
+						}
 
-            details {
-              display: block;
-            }
+						details {
+							display: block;
+						}
 
-            summary {
-              display: list-item;
-            }
+						summary {
+							display: list-item;
+						}
 
-            template {
-              display: none;
-            }
+						template {
+							display: none;
+						}
 
-            [hidden] {
-              display: none !important;
-            }
+						[hidden] {
+							display: none !important;
+						}
 
-            body,
-            blockquote,
-            dl,
-            dd,
-            h1,
-            h2,
-            h3,
-            h4,
-            h5,
-            h6,
-            hr,
-            figure,
-            p,
-            pre {
-              margin: 0;
-            }
+						body,
+						blockquote,
+						dl,
+						dd,
+						h1,
+						h2,
+						h3,
+						h4,
+						h5,
+						h6,
+						hr,
+						figure,
+						p,
+						pre {
+							margin: 0;
+						}
 
-            button {
-              background: transparent;
-              padding: 0;
-            }
+						button {
+							background: transparent;
+							padding: 0;
+						}
 
-            fieldset {
-              margin: 0;
-              padding: 0;
-            }
+						fieldset {
+							margin: 0;
+							padding: 0;
+						}
 
-            ol,
-            ul {
-              margin: 0;
-              padding: 0;
-            }
+						ol,
+						ul {
+							margin: 0;
+							padding: 0;
+						}
 
-            textarea {
-              resize: vertical;
-            }
+						textarea {
+							resize: vertical;
+						}
 
-            button,
-            [role="button"] {
-              cursor: pointer;
-            }
+						button,
+						[role="button"] {
+							cursor: pointer;
+						}
 
-            button::-moz-focus-inner {
-              border: 0 !important;
-            }
+						button::-moz-focus-inner {
+							border: 0 !important;
+						}
 
-            table {
-              border-collapse: collapse;
-            }
+						table {
+							border-collapse: collapse;
+						}
 
-            h1,
-            h2,
-            h3,
-            h4,
-            h5,
-            h6 {
-              font-size: inherit;
-              font-weight: inherit;
-            }
+						h1,
+						h2,
+						h3,
+						h4,
+						h5,
+						h6 {
+							font-size: inherit;
+							font-weight: inherit;
+						}
 
-            button,
-            input,
-            optgroup,
-            select,
-            textarea {
-              padding: 0;
-              line-height: inherit;
-              color: inherit;
-            }
+						button,
+						input,
+						optgroup,
+						select,
+						textarea {
+							padding: 0;
+							line-height: inherit;
+							color: inherit;
+						}
 
-            img,
-            svg,
-            video,
-            canvas,
-            audio,
-            iframe,
-            embed,
-            object {
-              display: block;
-            }
+						img,
+						svg,
+						video,
+						canvas,
+						audio,
+						iframe,
+						embed,
+						object {
+							display: block;
+						}
 
-            img,
-            video {
-              max-width: 100%;
-              height: auto;
-            }
+						img,
+						video {
+							max-width: 100%;
+							height: auto;
+						}
 
-            [data-js-focus-visible] :focus:not([data-focus-visible-added]) {
-              outline: none;
-              box-shadow: none;
-            }
+						[data-js-focus-visible] :focus:not([data-focus-visible-added]) {
+							outline: none;
+							box-shadow: none;
+						}
 
-            select::-ms-expand {
-              display: none;
-            }
-          }
-        `}
-      />
-    </>
-  );
+						select::-ms-expand {
+							display: none;
+						}
+					}
+				`}
+			/>
+		</>
+	);
 }

app/javascript/wardrobe-2020/WardrobePage/Item.js

@@ -1,31 +1,31 @@
 import React from "react";
 import { ClassNames } from "@emotion/react";
 import {
-  Box,
-  Flex,
-  IconButton,
-  Skeleton,
-  Tooltip,
-  useColorModeValue,
-  useTheme,
+	Box,
+	Flex,
+	IconButton,
+	Skeleton,
+	Tooltip,
+	useColorModeValue,
+	useTheme,
 } from "@chakra-ui/react";
 import { EditIcon, DeleteIcon, InfoIcon } from "@chakra-ui/icons";
 import { loadable } from "../util";
 
 import {
-  ItemCardContent,
-  ItemBadgeList,
-  ItemKindBadge,
-  MaybeAnimatedBadge,
-  YouOwnThisBadge,
-  YouWantThisBadge,
-  getZoneBadges,
+	ItemCardContent,
+	ItemBadgeList,
+	ItemKindBadge,
+	MaybeAnimatedBadge,
+	YouOwnThisBadge,
+	YouWantThisBadge,
+	getZoneBadges,
 } from "../components/ItemCard";
 import SupportOnly from "./support/SupportOnly";
 import useSupport from "./support/useSupport";
 
-const LoadableItemSupportDrawer = loadable(() =>
-  import("./support/ItemSupportDrawer"),
+const LoadableItemSupportDrawer = loadable(
+	() => import("./support/ItemSupportDrawer"),
 );
 
 /**
@@ -48,79 +48,79 @@ const LoadableItemSupportDrawer = loadable(() =>
  *       devices.
  */
 function Item({
-  item,
-  itemNameId,
-  isWorn,
-  isInOutfit,
-  onRemove,
-  isDisabled = false,
+	item,
+	itemNameId,
+	isWorn,
+	isInOutfit,
+	onRemove,
+	isDisabled = false,
 }) {
-  const [supportDrawerIsOpen, setSupportDrawerIsOpen] = React.useState(false);
+	const [supportDrawerIsOpen, setSupportDrawerIsOpen] = React.useState(false);
 
-  return (
-    <>
-      <ItemContainer isDisabled={isDisabled}>
-        <Box flex="1 1 0" minWidth="0">
-          <ItemCardContent
-            item={item}
-            badges={<ItemBadges item={item} />}
-            itemNameId={itemNameId}
-            isWorn={isWorn}
-            isDiabled={isDisabled}
-            focusSelector={containerHasFocus}
-          />
-        </Box>
-        <Box flex="0 0 auto" marginTop="5px">
-          {isInOutfit && (
-            <ItemActionButton
-              icon={<DeleteIcon />}
-              label="Remove"
-              onClick={(e) => {
-                onRemove(item.id);
-                e.preventDefault();
-              }}
-            />
-          )}
-          <SupportOnly>
-            <ItemActionButton
-              icon={<EditIcon />}
-              label="Support"
-              onClick={(e) => {
-                setSupportDrawerIsOpen(true);
-                e.preventDefault();
-              }}
-            />
-          </SupportOnly>
-          <ItemActionButton
-            icon={<InfoIcon />}
-            label="More info"
-            to={`/items/${item.id}`}
-            target="_blank"
-          />
-        </Box>
-      </ItemContainer>
-      <SupportOnly>
-        <LoadableItemSupportDrawer
-          item={item}
-          isOpen={supportDrawerIsOpen}
-          onClose={() => setSupportDrawerIsOpen(false)}
-        />
-      </SupportOnly>
-    </>
-  );
+	return (
+		<>
+			<ItemContainer isDisabled={isDisabled}>
+				<Box flex="1 1 0" minWidth="0">
+					<ItemCardContent
+						item={item}
+						badges={<ItemBadges item={item} />}
+						itemNameId={itemNameId}
+						isWorn={isWorn}
+						isDiabled={isDisabled}
+						focusSelector={containerHasFocus}
+					/>
+				</Box>
+				<Box flex="0 0 auto" marginTop="5px">
+					{isInOutfit && (
+						<ItemActionButton
+							icon={<DeleteIcon />}
+							label="Remove"
+							onClick={(e) => {
+								onRemove(item.id);
+								e.preventDefault();
+							}}
+						/>
+					)}
+					<SupportOnly>
+						<ItemActionButton
+							icon={<EditIcon />}
+							label="Support"
+							onClick={(e) => {
+								setSupportDrawerIsOpen(true);
+								e.preventDefault();
+							}}
+						/>
+					</SupportOnly>
+					<ItemActionButton
+						icon={<InfoIcon />}
+						label="More info"
+						to={`/items/${item.id}`}
+						target="_blank"
+					/>
+				</Box>
+			</ItemContainer>
+			<SupportOnly>
+				<LoadableItemSupportDrawer
+					item={item}
+					isOpen={supportDrawerIsOpen}
+					onClose={() => setSupportDrawerIsOpen(false)}
+				/>
+			</SupportOnly>
+		</>
+	);
 }
 
 /**
  * ItemSkeleton is a placeholder for when an Item is loading.
  */
 function ItemSkeleton() {
-  return (
-    <ItemContainer isDisabled>
-      <Skeleton width="50px" height="50px" />
-      <Box width="3" />
-      <Skeleton height="1.5rem" width="12rem" alignSelf="center" />
-    </ItemContainer>
-  );
+	return (
+		<ItemContainer isDisabled>
+			<Skeleton width="50px" height="50px" />
+			<Box width="3" />
+			<Skeleton height="1.5rem" width="12rem" alignSelf="center" />
+		</ItemContainer>
+	);
 }
 
 /**
@@ -131,152 +131,152 @@ function ItemSkeleton() {
  * .item-container parent!
  */
 function ItemContainer({ children, isDisabled = false }) {
-  const theme = useTheme();
+	const theme = useTheme();
 
-  const focusBackgroundColor = useColorModeValue(
-    theme.colors.gray["100"],
-    theme.colors.gray["700"],
-  );
+	const focusBackgroundColor = useColorModeValue(
+		theme.colors.gray["100"],
+		theme.colors.gray["700"],
+	);
 
-  const activeBorderColor = useColorModeValue(
-    theme.colors.green["400"],
-    theme.colors.green["500"],
-  );
+	const activeBorderColor = useColorModeValue(
+		theme.colors.green["400"],
+		theme.colors.green["500"],
+	);
 
-  const focusCheckedBorderColor = useColorModeValue(
-    theme.colors.green["800"],
-    theme.colors.green["300"],
-  );
+	const focusCheckedBorderColor = useColorModeValue(
+		theme.colors.green["800"],
+		theme.colors.green["300"],
+	);
 
-  return (
-    <ClassNames>
-      {({ css, cx }) => (
-        <Box
-          p="1"
-          my="1"
-          borderRadius="lg"
-          d="flex"
-          cursor={isDisabled ? undefined : "pointer"}
-          border="1px"
-          borderColor="transparent"
-          className={cx([
-            "item-container",
-            !isDisabled &&
-              css`
-                &:hover,
-                input:focus + & {
-                  background-color: ${focusBackgroundColor};
-                }
+	return (
+		<ClassNames>
+			{({ css, cx }) => (
+				<Box
+					p="1"
+					my="1"
+					borderRadius="lg"
+					d="flex"
+					cursor={isDisabled ? undefined : "pointer"}
+					border="1px"
+					borderColor="transparent"
+					className={cx([
+						"item-container",
+						!isDisabled &&
+							css`
+								&:hover,
+								input:focus + & {
+									background-color: ${focusBackgroundColor};
+								}
 
-                input:active + & {
-                  border-color: ${activeBorderColor};
-                }
+								input:active + & {
+									border-color: ${activeBorderColor};
+								}
 
-                input:checked:focus + & {
-                  border-color: ${focusCheckedBorderColor};
-                }
-              `,
-          ])}
-        >
-          {children}
-        </Box>
-      )}
-    </ClassNames>
-  );
+								input:checked:focus + & {
+									border-color: ${focusCheckedBorderColor};
+								}
+							`,
+					])}
+				>
+					{children}
+				</Box>
+			)}
+		</ClassNames>
+	);
 }
 
 function ItemBadges({ item }) {
-  const { isSupportUser } = useSupport();
-  const occupiedZones = item.appearanceOn.layers.map((l) => l.zone);
-  const restrictedZones = item.appearanceOn.restrictedZones.filter(
-    (z) => z.isCommonlyUsedByItems,
-  );
-  const isMaybeAnimated = item.appearanceOn.layers.some(
-    (l) => l.canvasMovieLibraryUrl,
-  );
+	const { isSupportUser } = useSupport();
+	const occupiedZones = item.appearanceOn.layers.map((l) => l.zone);
+	const restrictedZones = item.appearanceOn.restrictedZones.filter(
+		(z) => z.isCommonlyUsedByItems,
+	);
+	const isMaybeAnimated = item.appearanceOn.layers.some(
+		(l) => l.canvasMovieLibraryUrl,
+	);
 
-  return (
-    <ItemBadgeList>
-      <ItemKindBadge isNc={item.isNc} isPb={item.isPb} />
-      {
-        // This badge is unreliable, but it's helpful for looking for animated
-        // items to test, so we show it only to support. We use this form
-        // instead of <SupportOnly />, to avoid adding extra badge list spacing
-        // on the additional empty child.
-        isMaybeAnimated && isSupportUser && <MaybeAnimatedBadge />
-      }
-      {getZoneBadges(occupiedZones, { variant: "occupies" })}
-      {getZoneBadges(restrictedZones, { variant: "restricts" })}
-      {item.currentUserOwnsThis && <YouOwnThisBadge variant="medium" />}
-      {item.currentUserWantsThis && <YouWantThisBadge variant="medium" />}
-    </ItemBadgeList>
-  );
+	return (
+		<ItemBadgeList>
+			<ItemKindBadge isNc={item.isNc} isPb={item.isPb} />
+			{
+				// This badge is unreliable, but it's helpful for looking for animated
+				// items to test, so we show it only to support. We use this form
+				// instead of <SupportOnly />, to avoid adding extra badge list spacing
+				// on the additional empty child.
+				isMaybeAnimated && isSupportUser && <MaybeAnimatedBadge />
+			}
+			{getZoneBadges(occupiedZones, { variant: "occupies" })}
+			{getZoneBadges(restrictedZones, { variant: "restricts" })}
+			{item.currentUserOwnsThis && <YouOwnThisBadge variant="medium" />}
+			{item.currentUserWantsThis && <YouWantThisBadge variant="medium" />}
+		</ItemBadgeList>
+	);
 }
 
 /**
  * ItemActionButton is one of a list of actions a user can take for this item.
  */
 function ItemActionButton({ icon, label, to, onClick, ...props }) {
-  const theme = useTheme();
+	const theme = useTheme();
 
-  const focusBackgroundColor = useColorModeValue(
-    theme.colors.gray["300"],
-    theme.colors.gray["800"],
-  );
-  const focusColor = useColorModeValue(
-    theme.colors.gray["700"],
-    theme.colors.gray["200"],
-  );
+	const focusBackgroundColor = useColorModeValue(
+		theme.colors.gray["300"],
+		theme.colors.gray["800"],
+	);
+	const focusColor = useColorModeValue(
+		theme.colors.gray["700"],
+		theme.colors.gray["200"],
+	);
 
-  return (
-    <ClassNames>
-      {({ css }) => (
-        <Tooltip label={label} placement="top">
-          <LinkOrButton
-            {...props}
-            component={IconButton}
-            href={to}
-            icon={icon}
-            aria-label={label}
-            variant="ghost"
-            color="gray.400"
-            onClick={onClick}
-            className={css`
-              opacity: 0;
-              transition: all 0.2s;
+	return (
+		<ClassNames>
+			{({ css }) => (
+				<Tooltip label={label} placement="top">
+					<LinkOrButton
+						{...props}
+						component={IconButton}
+						href={to}
+						icon={icon}
+						aria-label={label}
+						variant="ghost"
+						color="gray.400"
+						onClick={onClick}
+						className={css`
+							opacity: 0;
+							transition: all 0.2s;
 
-              ${containerHasFocus} {
-                opacity: 1;
-              }
+							${containerHasFocus} {
+								opacity: 1;
+							}
 
-              &:focus,
-              &:hover {
-                opacity: 1;
-                background-color: ${focusBackgroundColor};
-                color: ${focusColor};
-              }
+							&:focus,
+							&:hover {
+								opacity: 1;
+								background-color: ${focusBackgroundColor};
+								color: ${focusColor};
+							}
 
-              /* On touch devices, always show the buttons! This avoids having to
+							/* On touch devices, always show the buttons! This avoids having to
            * tap to reveal them (which toggles the item), or worse,
            * accidentally tapping a hidden button without realizing! */
-              @media (hover: none) {
-                opacity: 1;
-              }
-            `}
-          />
-        </Tooltip>
-      )}
-    </ClassNames>
-  );
+							@media (hover: none) {
+								opacity: 1;
+							}
+						`}
+					/>
+				</Tooltip>
+			)}
+		</ClassNames>
+	);
 }
 
 function LinkOrButton({ href, component, ...props }) {
-  const ButtonComponent = component;
-  if (href != null) {
-    return <ButtonComponent as="a" href={href} {...props} />;
-  } else {
-    return <ButtonComponent {...props} />;
-  }
+	const ButtonComponent = component;
+	if (href != null) {
+		return <ButtonComponent as="a" href={href} {...props} />;
+	} else {
+		return <ButtonComponent {...props} />;
+	}
 }
 
 /**
@@ -284,11 +284,11 @@ function LinkOrButton({ href, component, ...props }) {
  * components in this to ensure a consistent list layout.
  */
 export function ItemListContainer({ children, ...props }) {
-  return (
-    <Flex direction="column" {...props}>
-      {children}
-    </Flex>
-  );
+	return (
+		<Flex direction="column" {...props}>
+			{children}
+		</Flex>
+	);
 }
 
 /**
@@ -296,13 +296,13 @@ export function ItemListContainer({ children, ...props }) {
  * Items are loading.
  */
 export function ItemListSkeleton({ count, ...props }) {
-  return (
-    <ItemListContainer {...props}>
-      {Array.from({ length: count }).map((_, i) => (
-        <ItemSkeleton key={i} />
-      ))}
-    </ItemListContainer>
-  );
+	return (
+		<ItemListContainer {...props}>
+			{Array.from({ length: count }).map((_, i) => (
+				<ItemSkeleton key={i} />
+			))}
+		</ItemListContainer>
+	);
 }
 
 /**
@@ -311,6 +311,6 @@ export function ItemListSkeleton({ count, ...props }) {
  * focused.
  */
 const containerHasFocus =
-  ".item-container:hover &, input:focus + .item-container &";
+	".item-container:hover &, input:focus + .item-container &";
 
 export default React.memo(Item);

app/javascript/wardrobe-2020/WardrobePage/ItemsAndSearchPanels.js

@@ -21,72 +21,72 @@ import { MajorErrorMessage, TestErrorSender, useLocalStorage } from "../util";
  * state and refs.
  */
 function ItemsAndSearchPanels({
-  loading,
-  searchQuery,
-  onChangeSearchQuery,
-  outfitState,
-  outfitSaving,
-  dispatchToOutfit,
+	loading,
+	searchQuery,
+	onChangeSearchQuery,
+	outfitState,
+	outfitSaving,
+	dispatchToOutfit,
 }) {
-  const scrollContainerRef = React.useRef();
-  const searchQueryRef = React.useRef();
-  const firstSearchResultRef = React.useRef();
+	const scrollContainerRef = React.useRef();
+	const searchQueryRef = React.useRef();
+	const firstSearchResultRef = React.useRef();
 
-  const hasRoomForSearchFooter = useBreakpointValue({ base: false, md: true });
-  const [canUseSearchFooter] = useLocalStorage(
-    "DTIFeatureFlagCanUseSearchFooter",
-    false,
-  );
-  const isShowingSearchFooter = canUseSearchFooter && hasRoomForSearchFooter;
+	const hasRoomForSearchFooter = useBreakpointValue({ base: false, md: true });
+	const [canUseSearchFooter] = useLocalStorage(
+		"DTIFeatureFlagCanUseSearchFooter",
+		false,
+	);
+	const isShowingSearchFooter = canUseSearchFooter && hasRoomForSearchFooter;
 
-  return (
-    <Sentry.ErrorBoundary fallback={MajorErrorMessage}>
-      <TestErrorSender />
-      <Flex direction="column" height="100%">
-        {isShowingSearchFooter && <Box height="2" />}
-        {!isShowingSearchFooter && (
-          <Box paddingX="5" paddingTop="3" paddingBottom="2" boxShadow="sm">
-            <SearchToolbar
-              query={searchQuery}
-              searchQueryRef={searchQueryRef}
-              firstSearchResultRef={firstSearchResultRef}
-              onChange={onChangeSearchQuery}
-            />
-          </Box>
-        )}
-        {!isShowingSearchFooter && !searchQueryIsEmpty(searchQuery) ? (
-          <Box
-            key="search-panel"
-            flex="1 0 0"
-            position="relative"
-            overflowY="scroll"
-            ref={scrollContainerRef}
-            data-test-id="search-panel-scroll-container"
-          >
-            <SearchPanel
-              query={searchQuery}
-              outfitState={outfitState}
-              dispatchToOutfit={dispatchToOutfit}
-              scrollContainerRef={scrollContainerRef}
-              searchQueryRef={searchQueryRef}
-              firstSearchResultRef={firstSearchResultRef}
-            />
-          </Box>
-        ) : (
-          <Box position="relative" overflow="auto" key="items-panel">
-            <Box px="4" py="2">
-              <ItemsPanel
-                loading={loading}
-                outfitState={outfitState}
-                outfitSaving={outfitSaving}
-                dispatchToOutfit={dispatchToOutfit}
-              />
-            </Box>
-          </Box>
-        )}
-      </Flex>
-    </Sentry.ErrorBoundary>
-  );
+	return (
+		<Sentry.ErrorBoundary fallback={MajorErrorMessage}>
+			<TestErrorSender />
+			<Flex direction="column" height="100%">
+				{isShowingSearchFooter && <Box height="2" />}
+				{!isShowingSearchFooter && (
+					<Box paddingX="5" paddingTop="3" paddingBottom="2" boxShadow="sm">
+						<SearchToolbar
+							query={searchQuery}
+							searchQueryRef={searchQueryRef}
+							firstSearchResultRef={firstSearchResultRef}
+							onChange={onChangeSearchQuery}
+						/>
+					</Box>
+				)}
+				{!isShowingSearchFooter && !searchQueryIsEmpty(searchQuery) ? (
+					<Box
+						key="search-panel"
+						flex="1 0 0"
+						position="relative"
+						overflowY="scroll"
+						ref={scrollContainerRef}
+						data-test-id="search-panel-scroll-container"
+					>
+						<SearchPanel
+							query={searchQuery}
+							outfitState={outfitState}
+							dispatchToOutfit={dispatchToOutfit}
+							scrollContainerRef={scrollContainerRef}
+							searchQueryRef={searchQueryRef}
+							firstSearchResultRef={firstSearchResultRef}
+						/>
+					</Box>
+				) : (
+					<Box position="relative" overflow="auto" key="items-panel">
+						<Box px="4" py="2">
+							<ItemsPanel
+								loading={loading}
+								outfitState={outfitState}
+								outfitSaving={outfitSaving}
+								dispatchToOutfit={dispatchToOutfit}
+							/>
+						</Box>
+					</Box>
+				)}
+			</Flex>
+		</Sentry.ErrorBoundary>
+	);
 }
 
 export default ItemsAndSearchPanels;

app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js

@@ -1,38 +1,38 @@
 import React from "react";
 import { ClassNames } from "@emotion/react";
 import {
-  Box,
-  Editable,
-  EditablePreview,
-  EditableInput,
-  Flex,
-  IconButton,
-  Skeleton,
-  Tooltip,
-  VisuallyHidden,
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuItem,
-  Portal,
-  Button,
-  Spinner,
-  useColorModeValue,
-  Modal,
-  ModalContent,
-  ModalOverlay,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-  useDisclosure,
-  ModalCloseButton,
+	Box,
+	Editable,
+	EditablePreview,
+	EditableInput,
+	Flex,
+	IconButton,
+	Skeleton,
+	Tooltip,
+	VisuallyHidden,
+	Menu,
+	MenuButton,
+	MenuList,
+	MenuItem,
+	Portal,
+	Button,
+	Spinner,
+	useColorModeValue,
+	Modal,
+	ModalContent,
+	ModalOverlay,
+	ModalHeader,
+	ModalBody,
+	ModalFooter,
+	useDisclosure,
+	ModalCloseButton,
 } from "@chakra-ui/react";
 import {
-  CheckIcon,
-  DeleteIcon,
-  EditIcon,
-  QuestionIcon,
-  WarningTwoIcon,
+	CheckIcon,
+	DeleteIcon,
+	EditIcon,
+	QuestionIcon,
+	WarningTwoIcon,
 } from "@chakra-ui/icons";
 import { IoBagCheck } from "react-icons/io5";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
@@ -59,70 +59,70 @@ import { useDeleteOutfitMutation } from "../loaders/outfits";
  * full width of the container, it doesn't look like it!
  */
 function ItemsPanel({ outfitState, outfitSaving, loading, dispatchToOutfit }) {
-  const { altStyleId, zonesAndItems, incompatibleItems } = outfitState;
+	const { altStyleId, zonesAndItems, incompatibleItems } = outfitState;
 
-  return (
-    <ClassNames>
-      {({ css }) => (
-        <Box>
-          <Box px="1">
-            <OutfitHeading
-              outfitState={outfitState}
-              outfitSaving={outfitSaving}
-              dispatchToOutfit={dispatchToOutfit}
-            />
-          </Box>
-          <Flex direction="column">
-            {loading ? (
-              <ItemZoneGroupsSkeleton
-                itemCount={outfitState.allItemIds.length}
-              />
-            ) : (
-              <>
-                <TransitionGroup component={null}>
-                  {zonesAndItems.map(({ zoneId, zoneLabel, items }) => (
-                    <CSSTransition
-                      key={zoneId}
-                      {...fadeOutAndRollUpTransition(css)}
-                    >
-                      <ItemZoneGroup
-                        zoneLabel={zoneLabel}
-                        items={items}
-                        outfitState={outfitState}
-                        dispatchToOutfit={dispatchToOutfit}
-                      />
-                    </CSSTransition>
-                  ))}
-                </TransitionGroup>
-                {incompatibleItems.length > 0 && (
-                  <ItemZoneGroup
-                    zoneLabel="Incompatible"
-                    afterHeader={
-                      <Tooltip
-                        label={
-                          altStyleId != null
-                            ? "Many items don't fit Alt Style pets"
-                            : "These items don't fit this pet"
-                        }
-                        placement="top"
-                        openDelay={100}
-                      >
-                        <QuestionIcon fontSize="sm" />
-                      </Tooltip>
-                    }
-                    items={incompatibleItems}
-                    outfitState={outfitState}
-                    dispatchToOutfit={dispatchToOutfit}
-                    isDisabled
-                  />
-                )}
-              </>
-            )}
-          </Flex>
-        </Box>
-      )}
-    </ClassNames>
-  );
+	return (
+		<ClassNames>
+			{({ css }) => (
+				<Box>
+					<Box px="1">
+						<OutfitHeading
+							outfitState={outfitState}
+							outfitSaving={outfitSaving}
+							dispatchToOutfit={dispatchToOutfit}
+						/>
+					</Box>
+					<Flex direction="column">
+						{loading ? (
+							<ItemZoneGroupsSkeleton
+								itemCount={outfitState.allItemIds.length}
+							/>
+						) : (
+							<>
+								<TransitionGroup component={null}>
+									{zonesAndItems.map(({ zoneId, zoneLabel, items }) => (
+										<CSSTransition
+											key={zoneId}
+											{...fadeOutAndRollUpTransition(css)}
+										>
+											<ItemZoneGroup
+												zoneLabel={zoneLabel}
+												items={items}
+												outfitState={outfitState}
+												dispatchToOutfit={dispatchToOutfit}
+											/>
+										</CSSTransition>
+									))}
+								</TransitionGroup>
+								{incompatibleItems.length > 0 && (
+									<ItemZoneGroup
+										zoneLabel="Incompatible"
+										afterHeader={
+											<Tooltip
+												label={
+													altStyleId != null
+														? "Many items don't fit Alt Style pets"
+														: "These items don't fit this pet"
+												}
+												placement="top"
+												openDelay={100}
+											>
+												<QuestionIcon fontSize="sm" />
+											</Tooltip>
+										}
+										items={incompatibleItems}
+										outfitState={outfitState}
+										dispatchToOutfit={dispatchToOutfit}
+										isDisabled
+									/>
+								)}
+							</>
+						)}
+					</Flex>
+				</Box>
+			)}
+		</ClassNames>
+	);
 }
 
 /**
@@ -134,102 +134,102 @@ function ItemsPanel({ outfitState, outfitSaving, loading, dispatchToOutfit }) {
  * makes the list screen-reader- and keyboard-accessible!
  */
 function ItemZoneGroup({
-  zoneLabel,
-  items,
-  outfitState,
-  dispatchToOutfit,
-  isDisabled = false,
-  afterHeader = null,
+	zoneLabel,
+	items,
+	outfitState,
+	dispatchToOutfit,
+	isDisabled = false,
+	afterHeader = null,
 }) {
-  // onChange is fired when the radio button becomes checked, not unchecked!
-  const onChange = (e) => {
-    const itemId = e.target.value;
-    dispatchToOutfit({ type: "wearItem", itemId });
-  };
+	// onChange is fired when the radio button becomes checked, not unchecked!
+	const onChange = (e) => {
+		const itemId = e.target.value;
+		dispatchToOutfit({ type: "wearItem", itemId });
+	};
 
-  // Clicking the radio button when already selected deselects it - this is how
-  // you can select none!
-  const onClick = (e) => {
-    const itemId = e.target.value;
-    if (outfitState.wornItemIds.includes(itemId)) {
-      // We need the event handler to finish before this, so that simulated
-      // events don't just come back around and undo it - but we can't just
-      // solve that with `preventDefault`, because it breaks the radio's
-      // intended visual updates when we unwear. So, we `setTimeout` to do it
-      // after all event handlers resolve!
-      setTimeout(() => dispatchToOutfit({ type: "unwearItem", itemId }), 0);
-    }
-  };
+	// Clicking the radio button when already selected deselects it - this is how
+	// you can select none!
+	const onClick = (e) => {
+		const itemId = e.target.value;
+		if (outfitState.wornItemIds.includes(itemId)) {
+			// We need the event handler to finish before this, so that simulated
+			// events don't just come back around and undo it - but we can't just
+			// solve that with `preventDefault`, because it breaks the radio's
+			// intended visual updates when we unwear. So, we `setTimeout` to do it
+			// after all event handlers resolve!
+			setTimeout(() => dispatchToOutfit({ type: "unwearItem", itemId }), 0);
+		}
+	};
 
-  const onRemove = React.useCallback(
-    (itemId) => {
-      dispatchToOutfit({ type: "removeItem", itemId });
-    },
-    [dispatchToOutfit],
-  );
+	const onRemove = React.useCallback(
+		(itemId) => {
+			dispatchToOutfit({ type: "removeItem", itemId });
+		},
+		[dispatchToOutfit],
+	);
 
-  return (
-    <ClassNames>
-      {({ css }) => (
-        <Box mb="10">
-          <Heading2 display="flex" alignItems="center" mx="1">
-            {zoneLabel}
-            {afterHeader && <Box marginLeft="2">{afterHeader}</Box>}
-          </Heading2>
-          <ItemListContainer>
-            <TransitionGroup component={null}>
-              {items.map((item) => {
-                const itemNameId =
-                  zoneLabel.replace(/ /g, "-") + `-item-${item.id}-name`;
-                const itemNode = (
-                  <Item
-                    item={item}
-                    itemNameId={itemNameId}
-                    isWorn={
-                      !isDisabled && outfitState.wornItemIds.includes(item.id)
-                    }
-                    isInOutfit={outfitState.allItemIds.includes(item.id)}
-                    onRemove={onRemove}
-                    isDisabled={isDisabled}
-                  />
-                );
+	return (
+		<ClassNames>
+			{({ css }) => (
+				<Box mb="10">
+					<Heading2 display="flex" alignItems="center" mx="1">
+						{zoneLabel}
+						{afterHeader && <Box marginLeft="2">{afterHeader}</Box>}
+					</Heading2>
+					<ItemListContainer>
+						<TransitionGroup component={null}>
+							{items.map((item) => {
+								const itemNameId =
+									zoneLabel.replace(/ /g, "-") + `-item-${item.id}-name`;
+								const itemNode = (
+									<Item
+										item={item}
+										itemNameId={itemNameId}
+										isWorn={
+											!isDisabled && outfitState.wornItemIds.includes(item.id)
+										}
+										isInOutfit={outfitState.allItemIds.includes(item.id)}
+										onRemove={onRemove}
+										isDisabled={isDisabled}
+									/>
+								);
 
-                return (
-                  <CSSTransition
-                    key={item.id}
-                    {...fadeOutAndRollUpTransition(css)}
-                  >
-                    {isDisabled ? (
-                      itemNode
-                    ) : (
-                      <label>
-                        <VisuallyHidden
-                          as="input"
-                          type="radio"
-                          aria-labelledby={itemNameId}
-                          name={zoneLabel}
-                          value={item.id}
-                          checked={outfitState.wornItemIds.includes(item.id)}
-                          onChange={onChange}
-                          onClick={onClick}
-                          onKeyUp={(e) => {
-                            if (e.key === " ") {
-                              onClick(e);
-                            }
-                          }}
-                        />
-                        {itemNode}
-                      </label>
-                    )}
-                  </CSSTransition>
-                );
-              })}
-            </TransitionGroup>
-          </ItemListContainer>
-        </Box>
-      )}
-    </ClassNames>
-  );
+								return (
+									<CSSTransition
+										key={item.id}
+										{...fadeOutAndRollUpTransition(css)}
+									>
+										{isDisabled ? (
+											itemNode
+										) : (
+											<label>
+												<VisuallyHidden
+													as="input"
+													type="radio"
+													aria-labelledby={itemNameId}
+													name={zoneLabel}
+													value={item.id}
+													checked={outfitState.wornItemIds.includes(item.id)}
+													onChange={onChange}
+													onClick={onClick}
+													onKeyUp={(e) => {
+														if (e.key === " ") {
+															onClick(e);
+														}
+													}}
+												/>
+												{itemNode}
+											</label>
+										)}
+									</CSSTransition>
+								);
+							})}
+						</TransitionGroup>
+					</ItemListContainer>
+				</Box>
+			)}
+		</ClassNames>
+	);
 }
 
 /**
@@ -240,35 +240,35 @@ function ItemZoneGroup({
  * we don't show skeleton items that just clear away!
  */
 function ItemZoneGroupsSkeleton({ itemCount }) {
-  const groups = [];
-  for (let i = 0; i < itemCount; i++) {
-    // NOTE: I initially wrote this to return groups of 3, which looks good for
-    //     outfit shares I think, but looks bad for pet loading... once shares
-    //     become a more common use case, it might be useful to figure out how
-    //     to differentiate these cases and show 1-per-group for pets, but
-    //     maybe more for built outfits?
-    groups.push(<ItemZoneGroupSkeleton key={i} itemCount={1} />);
-  }
-  return groups;
+	const groups = [];
+	for (let i = 0; i < itemCount; i++) {
+		// NOTE: I initially wrote this to return groups of 3, which looks good for
+		//     outfit shares I think, but looks bad for pet loading... once shares
+		//     become a more common use case, it might be useful to figure out how
+		//     to differentiate these cases and show 1-per-group for pets, but
+		//     maybe more for built outfits?
+		groups.push(<ItemZoneGroupSkeleton key={i} itemCount={1} />);
+	}
+	return groups;
 }
 
 /**
  * ItemZoneGroupSkeleton is a placeholder for when an ItemZoneGroup is loading.
  */
 function ItemZoneGroupSkeleton({ itemCount }) {
-  return (
-    <Box mb="10">
-      <Delay>
-        <Skeleton
-          mx="1"
-          // 2.25rem font size, 1.25rem line height
-          height={`${2.25 * 1.25}rem`}
-          width="12rem"
-        />
-        <ItemListSkeleton count={itemCount} />
-      </Delay>
-    </Box>
-  );
+	return (
+		<Box mb="10">
+			<Delay>
+				<Skeleton
+					mx="1"
+					// 2.25rem font size, 1.25rem line height
+					height={`${2.25 * 1.25}rem`}
+					width="12rem"
+				/>
+				<ItemListSkeleton count={itemCount} />
+			</Delay>
+		</Box>
+	);
 }
 
 /**
@@ -277,36 +277,36 @@ function ItemZoneGroupSkeleton({ itemCount }) {
  * this is disabled.
  */
 function ShoppingListButton({ outfitState }) {
-  const itemIds = [...outfitState.wornItemIds].sort();
-  const isDisabled = itemIds.length === 0;
+	const itemIds = [...outfitState.wornItemIds].sort();
+	const isDisabled = itemIds.length === 0;
 
-  let targetUrl = `/items/sources/${itemIds.join(",")}`;
-  if (outfitState.name != null && outfitState.name.trim().length > 0) {
-    const params = new URLSearchParams();
-    params.append("for", outfitState.name);
-    targetUrl += "?" + params.toString();
-  }
+	let targetUrl = `/items/sources/${itemIds.join(",")}`;
+	if (outfitState.name != null && outfitState.name.trim().length > 0) {
+		const params = new URLSearchParams();
+		params.append("for", outfitState.name);
+		targetUrl += "?" + params.toString();
+	}
 
-  return (
-    <Tooltip
-      label="Shopping list"
-      placement="top"
-      background="purple.500"
-      color="white"
-    >
-      <IconButton
-        aria-label="Shopping list"
-        as={isDisabled ? "button" : "a"}
-        href={isDisabled ? undefined : targetUrl}
-        target={isDisabled ? undefined : "_blank"}
-        icon={<IoBagCheck />}
-        colorScheme="purple"
-        size="sm"
-        isRound
-        isDisabled={isDisabled}
-      />
-    </Tooltip>
-  );
+	return (
+		<Tooltip
+			label="Shopping list"
+			placement="top"
+			background="purple.500"
+			color="white"
+		>
+			<IconButton
+				aria-label="Shopping list"
+				as={isDisabled ? "button" : "a"}
+				href={isDisabled ? undefined : targetUrl}
+				target={isDisabled ? undefined : "_blank"}
+				icon={<IoBagCheck />}
+				colorScheme="purple"
+				size="sm"
+				isRound
+				isDisabled={isDisabled}
+			/>
+		</Tooltip>
+	);
 }
 
 /**
@@ -314,100 +314,100 @@ function ShoppingListButton({ outfitState }) {
  * if the user can save this outfit. If not, this is empty!
  */
 function OutfitSavingIndicator({ outfitSaving }) {
-  const {
-    canSaveOutfit,
-    isNewOutfit,
-    isSaving,
-    latestVersionIsSaved,
-    saveError,
-    saveOutfit,
-  } = outfitSaving;
+	const {
+		canSaveOutfit,
+		isNewOutfit,
+		isSaving,
+		latestVersionIsSaved,
+		saveError,
+		saveOutfit,
+	} = outfitSaving;
 
-  const errorTextColor = useColorModeValue("red.600", "red.400");
+	const errorTextColor = useColorModeValue("red.600", "red.400");
 
-  if (!canSaveOutfit) {
-    return null;
-  }
+	if (!canSaveOutfit) {
+		return null;
+	}
 
-  if (isNewOutfit) {
-    return (
-      <Button
-        variant="outline"
-        size="sm"
-        isLoading={isSaving}
-        loadingText="Saving…"
-        leftIcon={
-          <Box
-            // Adjust the visual balance toward the cloud
-            marginBottom="-2px"
-          >
-            <IoCloudUploadOutline />
-          </Box>
-        }
-        onClick={saveOutfit}
-        data-test-id="wardrobe-save-outfit-button"
-      >
-        Save
-      </Button>
-    );
-  }
+	if (isNewOutfit) {
+		return (
+			<Button
+				variant="outline"
+				size="sm"
+				isLoading={isSaving}
+				loadingText="Saving…"
+				leftIcon={
+					<Box
+						// Adjust the visual balance toward the cloud
+						marginBottom="-2px"
+					>
+						<IoCloudUploadOutline />
+					</Box>
+				}
+				onClick={saveOutfit}
+				data-test-id="wardrobe-save-outfit-button"
+			>
+				Save
+			</Button>
+		);
+	}
 
-  if (isSaving) {
-    return (
-      <Flex
-        align="center"
-        fontSize="xs"
-        data-test-id="wardrobe-outfit-is-saving-indicator"
-      >
-        <Spinner
-          size="xs"
-          marginRight="1.5"
-          // HACK: Not sure why my various centering things always feel wrong...
-          marginBottom="-2px"
-        />
-        Saving…
-      </Flex>
-    );
-  }
+	if (isSaving) {
+		return (
+			<Flex
+				align="center"
+				fontSize="xs"
+				data-test-id="wardrobe-outfit-is-saving-indicator"
+			>
+				<Spinner
+					size="xs"
+					marginRight="1.5"
+					// HACK: Not sure why my various centering things always feel wrong...
+					marginBottom="-2px"
+				/>
+				Saving…
+			</Flex>
+		);
+	}
 
-  if (latestVersionIsSaved) {
-    return (
-      <Flex
-        align="center"
-        fontSize="xs"
-        data-test-id="wardrobe-outfit-is-saved-indicator"
-      >
-        <CheckIcon
-          marginRight="1"
-          // HACK: Not sure why my various centering things always feel wrong...
-          marginBottom="-2px"
-        />
-        Saved
-      </Flex>
-    );
-  }
+	if (latestVersionIsSaved) {
+		return (
+			<Flex
+				align="center"
+				fontSize="xs"
+				data-test-id="wardrobe-outfit-is-saved-indicator"
+			>
+				<CheckIcon
+					marginRight="1"
+					// HACK: Not sure why my various centering things always feel wrong...
+					marginBottom="-2px"
+				/>
+				Saved
+			</Flex>
+		);
+	}
 
-  if (saveError) {
-    return (
-      <Flex
-        align="center"
-        fontSize="xs"
-        data-test-id="wardrobe-outfit-save-error-indicator"
-        color={errorTextColor}
-      >
-        <WarningTwoIcon
-          marginRight="1"
-          // HACK: Not sure why my various centering things always feel wrong...
-          marginBottom="-2px"
-        />
-        Error saving
-      </Flex>
-    );
-  }
+	if (saveError) {
+		return (
+			<Flex
+				align="center"
+				fontSize="xs"
+				data-test-id="wardrobe-outfit-save-error-indicator"
+				color={errorTextColor}
+			>
+				<WarningTwoIcon
+					marginRight="1"
+					// HACK: Not sure why my various centering things always feel wrong...
+					marginBottom="-2px"
+				/>
+				Error saving
+			</Flex>
+		);
+	}
 
-  // The most common way we'll hit this null is when the outfit is changing,
-  // but the debouncing isn't done yet, so it's not saving yet.
-  return null;
+	// The most common way we'll hit this null is when the outfit is changing,
+	// but the debouncing isn't done yet, so it's not saving yet.
+	return null;
 }
 
 /**
@@ -415,133 +415,133 @@ function OutfitSavingIndicator({ outfitSaving }) {
  * It also contains the outfit menu, for saving etc.
  */
 function OutfitHeading({ outfitState, outfitSaving, dispatchToOutfit }) {
-  const { canDeleteOutfit } = outfitSaving;
-  const outfitCopyUrl = buildOutfitUrl(outfitState, { withoutOutfitId: true });
+	const { canDeleteOutfit } = outfitSaving;
+	const outfitCopyUrl = buildOutfitUrl(outfitState, { withoutOutfitId: true });
 
-  return (
-    // The Editable wraps everything, including the menu, because the menu has
-    // a Rename option.
-    <Editable
-      // Make sure not to ever pass `undefined` into here, or else the
-      // component enters uncontrolled mode, and changing the value
-      // later won't fix it!
-      value={outfitState.name || ""}
-      placeholder="Untitled outfit"
-      onChange={(value) =>
-        dispatchToOutfit({ type: "rename", outfitName: value })
-      }
-    >
-      {({ onEdit }) => (
-        <Flex align="center" marginBottom="6">
-          <Box>
-            <Box role="group" d="inline-block" position="relative" width="100%">
-              <Heading1>
-                <EditablePreview lineHeight="48px" data-test-id="outfit-name" />
-                <EditableInput lineHeight="48px" />
-              </Heading1>
-            </Box>
-          </Box>
-          <Box width="4" flex="1 0 auto" />
-          <OutfitSavingIndicator outfitSaving={outfitSaving} />
-          <Box width="3" flex="0 0 auto" />
-          <ShoppingListButton outfitState={outfitState} />
-          <Box width="2" flex="0 0 auto" />
-          <Menu placement="bottom-end">
-            <MenuButton
-              as={IconButton}
-              variant="ghost"
-              icon={<MdMoreVert />}
-              aria-label="Outfit menu"
-              isRound
-              size="sm"
-              fontSize="24px"
-              opacity="0.8"
-            />
-            <Portal>
-              <MenuList>
-                {outfitState.id && (
-                  <MenuItem
-                    icon={<EditIcon />}
-                    as="a"
-                    href={outfitCopyUrl}
-                    target="_blank"
-                  >
-                    Edit a copy
-                  </MenuItem>
-                )}
-                <MenuItem
-                  icon={<BiRename />}
-                  onClick={() => {
-                    // Start the rename after a tick, so finishing up the click
-                    // won't just immediately remove focus from the Editable.
-                    setTimeout(onEdit, 0);
-                  }}
-                >
-                  Rename
-                </MenuItem>
-                {canDeleteOutfit && (
-                  <DeleteOutfitMenuItem outfitState={outfitState} />
-                )}
-              </MenuList>
-            </Portal>
-          </Menu>
-        </Flex>
-      )}
-    </Editable>
-  );
+	return (
+		// The Editable wraps everything, including the menu, because the menu has
+		// a Rename option.
+		<Editable
+			// Make sure not to ever pass `undefined` into here, or else the
+			// component enters uncontrolled mode, and changing the value
+			// later won't fix it!
+			value={outfitState.name || ""}
+			placeholder="Untitled outfit"
+			onChange={(value) =>
+				dispatchToOutfit({ type: "rename", outfitName: value })
+			}
+		>
+			{({ onEdit }) => (
+				<Flex align="center" marginBottom="6">
+					<Box>
+						<Box role="group" d="inline-block" position="relative" width="100%">
+							<Heading1>
+								<EditablePreview lineHeight="48px" data-test-id="outfit-name" />
+								<EditableInput lineHeight="48px" />
+							</Heading1>
+						</Box>
+					</Box>
+					<Box width="4" flex="1 0 auto" />
+					<OutfitSavingIndicator outfitSaving={outfitSaving} />
+					<Box width="3" flex="0 0 auto" />
+					<ShoppingListButton outfitState={outfitState} />
+					<Box width="2" flex="0 0 auto" />
+					<Menu placement="bottom-end">
+						<MenuButton
+							as={IconButton}
+							variant="ghost"
+							icon={<MdMoreVert />}
+							aria-label="Outfit menu"
+							isRound
+							size="sm"
+							fontSize="24px"
+							opacity="0.8"
+						/>
+						<Portal>
+							<MenuList>
+								{outfitState.id && (
+									<MenuItem
+										icon={<EditIcon />}
+										as="a"
+										href={outfitCopyUrl}
+										target="_blank"
+									>
+										Edit a copy
+									</MenuItem>
+								)}
+								<MenuItem
+									icon={<BiRename />}
+									onClick={() => {
+										// Start the rename after a tick, so finishing up the click
+										// won't just immediately remove focus from the Editable.
+										setTimeout(onEdit, 0);
+									}}
+								>
+									Rename
+								</MenuItem>
+								{canDeleteOutfit && (
+									<DeleteOutfitMenuItem outfitState={outfitState} />
+								)}
+							</MenuList>
+						</Portal>
+					</Menu>
+				</Flex>
+			)}
+		</Editable>
+	);
 }
 
 function DeleteOutfitMenuItem({ outfitState }) {
-  const { id, name } = outfitState;
-  const { isOpen, onOpen, onClose } = useDisclosure();
+	const { id, name } = outfitState;
+	const { isOpen, onOpen, onClose } = useDisclosure();
 
-  const { status, error, mutateAsync } = useDeleteOutfitMutation();
+	const { status, error, mutateAsync } = useDeleteOutfitMutation();
 
-  return (
-    <>
-      <MenuItem icon={<DeleteIcon />} onClick={onOpen}>
-        Delete
-      </MenuItem>
-      <Modal isOpen={isOpen} onClose={onClose}>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>Delete outfit "{name}"?</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            We'll delete this data and remove it from your list of outfits.
-            Links and image embeds pointing to this outfit will break. Is that
-            okay?
-            {status === "error" && (
-              <ErrorMessage marginTop="1em">
-                Error deleting outfit: "{error.message}". Try again?
-              </ErrorMessage>
-            )}
-          </ModalBody>
-          <ModalFooter>
-            <Button onClick={onClose}>No, keep this outfit</Button>
-            <Box flex="1 0 auto" width="2" />
-            <Button
-              colorScheme="red"
-              onClick={() =>
-                mutateAsync(id)
-                  .then(() => {
-                    window.location = "/your-outfits";
-                  })
-                  .catch((e) => {
-                    /* handled in error UI */
-                  })
-              }
-              // We continue to show the loading spinner in the success case,
-              // while we redirect away!
-              isLoading={status === "pending" || status === "success"}
-            >
-              Delete
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
-  );
+	return (
+		<>
+			<MenuItem icon={<DeleteIcon />} onClick={onOpen}>
+				Delete
+			</MenuItem>
+			<Modal isOpen={isOpen} onClose={onClose}>
+				<ModalOverlay />
+				<ModalContent>
+					<ModalHeader>Delete outfit "{name}"?</ModalHeader>
+					<ModalCloseButton />
+					<ModalBody>
+						We'll delete this data and remove it from your list of outfits.
+						Links and image embeds pointing to this outfit will break. Is that
+						okay?
+						{status === "error" && (
+							<ErrorMessage marginTop="1em">
+								Error deleting outfit: "{error.message}". Try again?
+							</ErrorMessage>
+						)}
+					</ModalBody>
+					<ModalFooter>
+						<Button onClick={onClose}>No, keep this outfit</Button>
+						<Box flex="1 0 auto" width="2" />
+						<Button
+							colorScheme="red"
+							onClick={() =>
+								mutateAsync(id)
+									.then(() => {
+										window.location = "/your-outfits";
+									})
+									.catch((e) => {
+										/* handled in error UI */
+									})
+							}
+							// We continue to show the loading spinner in the success case,
+							// while we redirect away!
+							isLoading={status === "pending" || status === "success"}
+						>
+							Delete
+						</Button>
+					</ModalFooter>
+				</ModalContent>
+			</Modal>
+		</>
+	);
 }
 
 /**
@@ -555,24 +555,24 @@ function DeleteOutfitMenuItem({ outfitState }) {
  * See react-transition-group docs for more info!
  */
 const fadeOutAndRollUpTransition = (css) => ({
-  classNames: css`
-    &-exit {
-      opacity: 1;
-      height: auto;
-    }
+	classNames: css`
+		&-exit {
+			opacity: 1;
+			height: auto;
+		}
 
-    &-exit-active {
-      opacity: 0;
-      height: 0 !important;
-      margin-top: 0 !important;
-      margin-bottom: 0 !important;
-      transition: all 0.5s;
-    }
-  `,
-  timeout: 500,
-  onExit: (e) => {
-    e.style.height = e.offsetHeight + "px";
-  },
+		&-exit-active {
+			opacity: 0;
+			height: 0 !important;
+			margin-top: 0 !important;
+			margin-bottom: 0 !important;
+			transition: all 0.5s;
+		}
+	`,
+	timeout: 500,
+	onExit: (e) => {
+		e.style.height = e.offsetHeight + "px";
+	},
 });
 
 export default ItemsPanel;

app/javascript/wardrobe-2020/WardrobePage/LayersInfoModal.js

@@ -1,92 +1,92 @@
 import React from "react";
 import {
-  Box,
-  Button,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalHeader,
-  ModalOverlay,
-  Table,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
+	Box,
+	Button,
+	Modal,
+	ModalBody,
+	ModalCloseButton,
+	ModalContent,
+	ModalHeader,
+	ModalOverlay,
+	Table,
+	Tbody,
+	Td,
+	Th,
+	Thead,
+	Tr,
 } from "@chakra-ui/react";
 
 function LayersInfoModal({ isOpen, onClose, visibleLayers }) {
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} size="xl">
-      <ModalOverlay>
-        <ModalContent maxWidth="800px">
-          <ModalHeader>Outfit layers</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            <LayerTable layers={visibleLayers} />
-          </ModalBody>
-        </ModalContent>
-      </ModalOverlay>
-    </Modal>
-  );
+	return (
+		<Modal isOpen={isOpen} onClose={onClose} size="xl">
+			<ModalOverlay>
+				<ModalContent maxWidth="800px">
+					<ModalHeader>Outfit layers</ModalHeader>
+					<ModalCloseButton />
+					<ModalBody>
+						<LayerTable layers={visibleLayers} />
+					</ModalBody>
+				</ModalContent>
+			</ModalOverlay>
+		</Modal>
+	);
 }
 
 function LayerTable({ layers }) {
-  return (
-    <Table>
-      <Thead>
-        <Tr>
-          <Th>Preview</Th>
-          <Th>DTI ID</Th>
-          <Th>Zone</Th>
-          <Th>Links</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        {layers.map((layer) => (
-          <LayerTableRow key={layer.id} layer={layer} />
-        ))}
-      </Tbody>
-    </Table>
-  );
+	return (
+		<Table>
+			<Thead>
+				<Tr>
+					<Th>Preview</Th>
+					<Th>DTI ID</Th>
+					<Th>Zone</Th>
+					<Th>Links</Th>
+				</Tr>
+			</Thead>
+			<Tbody>
+				{layers.map((layer) => (
+					<LayerTableRow key={layer.id} layer={layer} />
+				))}
+			</Tbody>
+		</Table>
+	);
 }
 
 function LayerTableRow({ layer, ...props }) {
-  return (
-    <Tr {...props}>
-      <Td>
-        <Box
-          as="img"
-          src={layer.imageUrl}
-          width="60px"
-          height="60px"
-          boxShadow="md"
-        />
-      </Td>
-      <Td>{layer.id}</Td>
-      <Td>{layer.zone.label}</Td>
-      <Td>
-        <Box display="flex" gap=".5em">
-          {layer.imageUrl && (
-            <Button as="a" href={layer.imageUrl} target="_blank" size="sm">
-              PNG
-            </Button>
-          )}
-          {layer.swfUrl && (
-            <Button as="a" href={layer.swfUrl} size="sm" download>
-              SWF
-            </Button>
-          )}
-          {layer.svgUrl && (
-            <Button as="a" href={layer.svgUrl} target="_blank" size="sm">
-              SVG
-            </Button>
-          )}
-        </Box>
-      </Td>
-    </Tr>
-  );
+	return (
+		<Tr {...props}>
+			<Td>
+				<Box
+					as="img"
+					src={layer.imageUrl}
+					width="60px"
+					height="60px"
+					boxShadow="md"
+				/>
+			</Td>
+			<Td>{layer.id}</Td>
+			<Td>{layer.zone.label}</Td>
+			<Td>
+				<Box display="flex" gap=".5em">
+					{layer.imageUrl && (
+						<Button as="a" href={layer.imageUrl} target="_blank" size="sm">
+							PNG
+						</Button>
+					)}
+					{layer.swfUrl && (
+						<Button as="a" href={layer.swfUrl} size="sm" download>
+							SWF
+						</Button>
+					)}
+					{layer.svgUrl && (
+						<Button as="a" href={layer.svgUrl} target="_blank" size="sm">
+							SVG
+						</Button>
+					)}
+				</Box>
+			</Td>
+		</Tr>
+	);
 }
 
 export default LayersInfoModal;

app/javascript/wardrobe-2020/WardrobePage/OutfitKnownGlitchesBadge.js

@@ -7,310 +7,310 @@ import getVisibleLayers from "../components/getVisibleLayers";
 import { useLocalStorage } from "../util";
 
 function OutfitKnownGlitchesBadge({ appearance }) {
-  const [hiResMode] = useLocalStorage("DTIHiResMode", false);
-  const { petAppearance, items } = appearance;
+	const [hiResMode] = useLocalStorage("DTIHiResMode", false);
+	const { petAppearance, items } = appearance;
 
-  const glitchMessages = [];
+	const glitchMessages = [];
 
-  // Look for UC/Invisible/etc incompatibilities that we hid, that we should
-  // just mark Incompatible someday instead; or with correctly partially-hidden
-  // art.
-  //
-  // NOTE: This particular glitch is checking for the *absence* of layers, so
-  //       we skip it if we're still loading!
-  if (!appearance.loading) {
-    for (const item of items) {
-      // HACK: We use `getVisibleLayers` with just this pet appearance and item
-      //       appearance, to run the logic for which layers are compatible with
-      //       this pet. But `getVisibleLayers` does other things too, so it's
-      //       plausible that this could do not quite what we want in some cases!
-      const allItemLayers = item.appearance.layers;
-      const compatibleItemLayers = getVisibleLayers(petAppearance, [
-        item.appearance,
-      ]).filter((l) => l.source === "item");
+	// Look for UC/Invisible/etc incompatibilities that we hid, that we should
+	// just mark Incompatible someday instead; or with correctly partially-hidden
+	// art.
+	//
+	// NOTE: This particular glitch is checking for the *absence* of layers, so
+	//       we skip it if we're still loading!
+	if (!appearance.loading) {
+		for (const item of items) {
+			// HACK: We use `getVisibleLayers` with just this pet appearance and item
+			//       appearance, to run the logic for which layers are compatible with
+			//       this pet. But `getVisibleLayers` does other things too, so it's
+			//       plausible that this could do not quite what we want in some cases!
+			const allItemLayers = item.appearance.layers;
+			const compatibleItemLayers = getVisibleLayers(petAppearance, [
+				item.appearance,
+			]).filter((l) => l.source === "item");
 
-      if (compatibleItemLayers.length === 0 && allItemLayers.length > 0) {
-        glitchMessages.push(
-          <Box key={`total-uc-conflict-for-item-${item.id}`}>
-            <i>{item.name}</i> isn't actually compatible with this special pet.
-            We're hiding the item art, which is outdated behavior, and we should
-            instead be treating it as entirely incompatible. Fixing this is in
-            our todo list, sorry for the confusing UI!
-          </Box>,
-        );
-      } else if (compatibleItemLayers.length < allItemLayers.length) {
-        glitchMessages.push(
-          <Box key={`partial-uc-conflict-for-item-${item.id}`}>
-            <i>{item.name}</i>'s compatibility with this pet is complicated, but
-            we believe this is how it looks: some zones are visible, and some
-            zones are hidden. If this isn't quite right, please email me at
-            matchu@openneo.net and let me know!
-          </Box>,
-        );
-      }
-    }
-  }
+			if (compatibleItemLayers.length === 0 && allItemLayers.length > 0) {
+				glitchMessages.push(
+					<Box key={`total-uc-conflict-for-item-${item.id}`}>
+						<i>{item.name}</i> isn't actually compatible with this special pet.
+						We're hiding the item art, which is outdated behavior, and we should
+						instead be treating it as entirely incompatible. Fixing this is in
+						our todo list, sorry for the confusing UI!
+					</Box>,
+				);
+			} else if (compatibleItemLayers.length < allItemLayers.length) {
+				glitchMessages.push(
+					<Box key={`partial-uc-conflict-for-item-${item.id}`}>
+						<i>{item.name}</i>'s compatibility with this pet is complicated, but
+						we believe this is how it looks: some zones are visible, and some
+						zones are hidden. If this isn't quite right, please email me at
+						matchu@openneo.net and let me know!
+					</Box>,
+				);
+			}
+		}
+	}
 
-  // Look for items with the OFFICIAL_SWF_IS_INCORRECT glitch.
-  for (const item of items) {
-    const itemHasBrokenOnNeopetsDotCom = item.appearance.layers.some((l) =>
-      (l.knownGlitches || []).includes("OFFICIAL_SWF_IS_INCORRECT"),
-    );
-    const itemHasBrokenUnconvertedLayers = item.appearance.layers.some(
-      (l) =>
-        (l.knownGlitches || []).includes("OFFICIAL_SWF_IS_INCORRECT") &&
-        !layerUsesHTML5(l),
-    );
-    if (itemHasBrokenOnNeopetsDotCom) {
-      glitchMessages.push(
-        <Box key={`official-swf-is-incorrect-for-item-${item.id}`}>
-          {itemHasBrokenUnconvertedLayers ? (
-            <>
-              We're aware of a glitch affecting the art for <i>{item.name}</i>.
-              Last time we checked, this glitch affected its appearance on
-              Neopets.com, too. Hopefully this will be fixed once it's converted
-              to HTML5!
-            </>
-          ) : (
-            <>
-              We're aware of a previous glitch affecting the art for{" "}
-              <i>{item.name}</i>, but it might have been resolved during HTML5
-              conversion. Please use the feedback form on the homepage to let us
-              know if it looks right, or still looks wrong! Thank you!
-            </>
-          )}
-        </Box>,
-      );
-    }
-  }
+	// Look for items with the OFFICIAL_SWF_IS_INCORRECT glitch.
+	for (const item of items) {
+		const itemHasBrokenOnNeopetsDotCom = item.appearance.layers.some((l) =>
+			(l.knownGlitches || []).includes("OFFICIAL_SWF_IS_INCORRECT"),
+		);
+		const itemHasBrokenUnconvertedLayers = item.appearance.layers.some(
+			(l) =>
+				(l.knownGlitches || []).includes("OFFICIAL_SWF_IS_INCORRECT") &&
+				!layerUsesHTML5(l),
+		);
+		if (itemHasBrokenOnNeopetsDotCom) {
+			glitchMessages.push(
+				<Box key={`official-swf-is-incorrect-for-item-${item.id}`}>
+					{itemHasBrokenUnconvertedLayers ? (
+						<>
+							We're aware of a glitch affecting the art for <i>{item.name}</i>.
+							Last time we checked, this glitch affected its appearance on
+							Neopets.com, too. Hopefully this will be fixed once it's converted
+							to HTML5!
+						</>
+					) : (
+						<>
+							We're aware of a previous glitch affecting the art for{" "}
+							<i>{item.name}</i>, but it might have been resolved during HTML5
+							conversion. Please use the feedback form on the homepage to let us
+							know if it looks right, or still looks wrong! Thank you!
+						</>
+					)}
+				</Box>,
+			);
+		}
+	}
 
-  // Look for items with the OFFICIAL_MOVIE_IS_INCORRECT glitch.
-  for (const item of items) {
-    const itemHasGlitch = item.appearance.layers.some((l) =>
-      (l.knownGlitches || []).includes("OFFICIAL_MOVIE_IS_INCORRECT"),
-    );
-    if (itemHasGlitch) {
-      glitchMessages.push(
-        <Box key={`official-movie-is-incorrect-for-item-${item.id}`}>
-          There's a glitch in the art for <i>{item.name}</i>, and we believe it
-          looks this way on-site, too. But our version might be out of date! If
-          you've seen it look better on-site, please email me at
-          matchu@openneo.net so we can fix it!
-        </Box>,
-      );
-    }
-  }
+	// Look for items with the OFFICIAL_MOVIE_IS_INCORRECT glitch.
+	for (const item of items) {
+		const itemHasGlitch = item.appearance.layers.some((l) =>
+			(l.knownGlitches || []).includes("OFFICIAL_MOVIE_IS_INCORRECT"),
+		);
+		if (itemHasGlitch) {
+			glitchMessages.push(
+				<Box key={`official-movie-is-incorrect-for-item-${item.id}`}>
+					There's a glitch in the art for <i>{item.name}</i>, and we believe it
+					looks this way on-site, too. But our version might be out of date! If
+					you've seen it look better on-site, please email me at
+					matchu@openneo.net so we can fix it!
+				</Box>,
+			);
+		}
+	}
 
-  // Look for items with the OFFICIAL_SVG_IS_INCORRECT glitch. Only show this
-  // if hi-res mode is on, because otherwise it doesn't affect the user anyway!
-  if (hiResMode) {
-    for (const item of items) {
-      const itemHasOfficialSvgIsIncorrect = item.appearance.layers.some((l) =>
-        (l.knownGlitches || []).includes("OFFICIAL_SVG_IS_INCORRECT"),
-      );
-      if (itemHasOfficialSvgIsIncorrect) {
-        glitchMessages.push(
-          <Box key={`official-svg-is-incorrect-for-item-${item.id}`}>
-            There's a glitch in the art for <i>{item.name}</i> that prevents us
-            from showing the SVG image for Hi-Res Mode. Instead, we're showing a
-            PNG, which might look a bit blurry on larger screens.
-          </Box>,
-        );
-      }
-    }
-  }
+	// Look for items with the OFFICIAL_SVG_IS_INCORRECT glitch. Only show this
+	// if hi-res mode is on, because otherwise it doesn't affect the user anyway!
+	if (hiResMode) {
+		for (const item of items) {
+			const itemHasOfficialSvgIsIncorrect = item.appearance.layers.some((l) =>
+				(l.knownGlitches || []).includes("OFFICIAL_SVG_IS_INCORRECT"),
+			);
+			if (itemHasOfficialSvgIsIncorrect) {
+				glitchMessages.push(
+					<Box key={`official-svg-is-incorrect-for-item-${item.id}`}>
+						There's a glitch in the art for <i>{item.name}</i> that prevents us
+						from showing the SVG image for Hi-Res Mode. Instead, we're showing a
+						PNG, which might look a bit blurry on larger screens.
+					</Box>,
+				);
+			}
+		}
+	}
 
-  // Look for items with the DISPLAYS_INCORRECTLY_BUT_CAUSE_UNKNOWN glitch.
-  for (const item of items) {
-    const itemHasGlitch = item.appearance.layers.some((l) =>
-      (l.knownGlitches || []).includes(
-        "DISPLAYS_INCORRECTLY_BUT_CAUSE_UNKNOWN",
-      ),
-    );
-    if (itemHasGlitch) {
-      glitchMessages.push(
-        <Box key={`displays-incorrectly-but-cause-unknown-for-item-${item.id}`}>
-          There's a glitch in the art for <i>{item.name}</i> that causes it to
-          display incorrectly—but we're not sure if it's on our end, or TNT's.
-          If you own this item, please email me at matchu@openneo.net to let us
-          know how it looks in the on-site customizer!
-        </Box>,
-      );
-    }
-  }
+	// Look for items with the DISPLAYS_INCORRECTLY_BUT_CAUSE_UNKNOWN glitch.
+	for (const item of items) {
+		const itemHasGlitch = item.appearance.layers.some((l) =>
+			(l.knownGlitches || []).includes(
+				"DISPLAYS_INCORRECTLY_BUT_CAUSE_UNKNOWN",
+			),
+		);
+		if (itemHasGlitch) {
+			glitchMessages.push(
+				<Box key={`displays-incorrectly-but-cause-unknown-for-item-${item.id}`}>
+					There's a glitch in the art for <i>{item.name}</i> that causes it to
+					display incorrectly—but we're not sure if it's on our end, or TNT's.
+					If you own this item, please email me at matchu@openneo.net to let us
+					know how it looks in the on-site customizer!
+				</Box>,
+			);
+		}
+	}
 
-  // Look for items with the OFFICIAL_BODY_ID_IS_INCORRECT glitch.
-  for (const item of items) {
-    const itemHasOfficialBodyIdIsIncorrect = item.appearance.layers.some((l) =>
-      (l.knownGlitches || []).includes("OFFICIAL_BODY_ID_IS_INCORRECT"),
-    );
-    if (itemHasOfficialBodyIdIsIncorrect) {
-      glitchMessages.push(
-        <Box key={`official-body-id-is-incorrect-for-item-${item.id}`}>
-          Last we checked, <i>{item.name}</i> actually is compatible with this
-          pet, even though it seems like it shouldn't be. But TNT might change
-          this at any time, so be careful!
-        </Box>,
-      );
-    }
-  }
+	// Look for items with the OFFICIAL_BODY_ID_IS_INCORRECT glitch.
+	for (const item of items) {
+		const itemHasOfficialBodyIdIsIncorrect = item.appearance.layers.some((l) =>
+			(l.knownGlitches || []).includes("OFFICIAL_BODY_ID_IS_INCORRECT"),
+		);
+		if (itemHasOfficialBodyIdIsIncorrect) {
+			glitchMessages.push(
+				<Box key={`official-body-id-is-incorrect-for-item-${item.id}`}>
+					Last we checked, <i>{item.name}</i> actually is compatible with this
+					pet, even though it seems like it shouldn't be. But TNT might change
+					this at any time, so be careful!
+				</Box>,
+			);
+		}
+	}
 
-  // Look for Dyeworks items that aren't converted yet.
-  for (const item of items) {
-    const itemIsDyeworks = item.name.includes("Dyeworks");
-    const itemIsConverted = item.appearance.layers.every(layerUsesHTML5);
+	// Look for Dyeworks items that aren't converted yet.
+	for (const item of items) {
+		const itemIsDyeworks = item.name.includes("Dyeworks");
+		const itemIsConverted = item.appearance.layers.every(layerUsesHTML5);
 
-    if (itemIsDyeworks && !itemIsConverted) {
-      glitchMessages.push(
-        <Box key={`unconverted-dyeworks-warning-for-item-${item.id}`}>
-          <i>{item.name}</i> isn't converted to HTML5 yet, and our Classic DTI
-          code often shows old Dyeworks items in the wrong color. Once it's
-          converted, we'll display it correctly!
-        </Box>,
-      );
-    }
-  }
+		if (itemIsDyeworks && !itemIsConverted) {
+			glitchMessages.push(
+				<Box key={`unconverted-dyeworks-warning-for-item-${item.id}`}>
+					<i>{item.name}</i> isn't converted to HTML5 yet, and our Classic DTI
+					code often shows old Dyeworks items in the wrong color. Once it's
+					converted, we'll display it correctly!
+				</Box>,
+			);
+		}
+	}
 
-  // Look for Baby Body Paint items.
-  for (const item of items) {
-    const itemIsBabyBodyPaint = item.name.includes("Baby Body Paint");
-    if (itemIsBabyBodyPaint) {
-      glitchMessages.push(
-        <Box key={`baby-body-paint-warning-for-item-${item.id}`}>
-          <i>{item.name}</i> seems to have new zone restriction rules that our
-          system doesn't support yet, whuh oh! This might require major changes
-          to how we handle zones. Until then, this item will be very buggy,
-          sorry!
-        </Box>,
-      );
-    }
-  }
+	// Look for Baby Body Paint items.
+	for (const item of items) {
+		const itemIsBabyBodyPaint = item.name.includes("Baby Body Paint");
+		if (itemIsBabyBodyPaint) {
+			glitchMessages.push(
+				<Box key={`baby-body-paint-warning-for-item-${item.id}`}>
+					<i>{item.name}</i> seems to have new zone restriction rules that our
+					system doesn't support yet, whuh oh! This might require major changes
+					to how we handle zones. Until then, this item will be very buggy,
+					sorry!
+				</Box>,
+			);
+		}
+	}
 
-  // Check whether the pet is Invisible. If so, we'll show a blanket warning.
-  if (petAppearance?.color?.id === "38") {
-    glitchMessages.push(
-      <Box key={`invisible-pet-warning`}>
-        Invisible pets are affected by a number of glitches, including faces
-        sometimes being visible on-site, and errors in the HTML5 conversion. If
-        this pose looks incorrect, you can try another by clicking the emoji
-        face next to the species/color picker. But be aware that Neopets.com
-        might look different!
-      </Box>,
-    );
-  }
+	// Check whether the pet is Invisible. If so, we'll show a blanket warning.
+	if (petAppearance?.color?.id === "38") {
+		glitchMessages.push(
+			<Box key={`invisible-pet-warning`}>
+				Invisible pets are affected by a number of glitches, including faces
+				sometimes being visible on-site, and errors in the HTML5 conversion. If
+				this pose looks incorrect, you can try another by clicking the emoji
+				face next to the species/color picker. But be aware that Neopets.com
+				might look different!
+			</Box>,
+		);
+	}
 
-  // Check if this is a Faerie Uni. If so, we'll explain the dithering horns.
-  if (
-    petAppearance?.color?.id === "26" &&
-    petAppearance?.species?.id === "49"
-  ) {
-    glitchMessages.push(
-      <Box key={`faerie-uni-dithering-horn-warning`}>
-        The Faerie Uni is a "dithering" pet: its horn is sometimes blue, and
-        sometimes yellow. To help you design for both cases, we show the blue
-        horn with the feminine design, and the yellow horn with the masculine
-        design—but the pet's gender does not actually affect which horn you'll
-        get, and it will often change over time!
-      </Box>,
-    );
-  }
+	// Check if this is a Faerie Uni. If so, we'll explain the dithering horns.
+	if (
+		petAppearance?.color?.id === "26" &&
+		petAppearance?.species?.id === "49"
+	) {
+		glitchMessages.push(
+			<Box key={`faerie-uni-dithering-horn-warning`}>
+				The Faerie Uni is a "dithering" pet: its horn is sometimes blue, and
+				sometimes yellow. To help you design for both cases, we show the blue
+				horn with the feminine design, and the yellow horn with the masculine
+				design—but the pet's gender does not actually affect which horn you'll
+				get, and it will often change over time!
+			</Box>,
+		);
+	}
 
-  // Check whether the pet appearance is marked as Glitched.
-  if (petAppearance?.isGlitched) {
-    glitchMessages.push(
-      // NOTE: This message assumes that the current pet appearance is the
-      //       best canonical one, but it's _possible_ to view Glitched
-      //       appearances even if we _do_ have a better one saved... but
-      //       only the Support UI ever takes you there.
-      <Box key={`pet-appearance-is-glitched`}>
-        We know that the art for this pet is incorrect, but we still haven't
-        seen a <em>correct</em> model for this pose yet. Once someone models the
-        correct data, we'll use that instead. For now, you could also try
-        switching to another pose, by clicking the emoji face next to the
-        species/color picker!
-      </Box>,
-    );
-  }
+	// Check whether the pet appearance is marked as Glitched.
+	if (petAppearance?.isGlitched) {
+		glitchMessages.push(
+			// NOTE: This message assumes that the current pet appearance is the
+			//       best canonical one, but it's _possible_ to view Glitched
+			//       appearances even if we _do_ have a better one saved... but
+			//       only the Support UI ever takes you there.
+			<Box key={`pet-appearance-is-glitched`}>
+				We know that the art for this pet is incorrect, but we still haven't
+				seen a <em>correct</em> model for this pose yet. Once someone models the
+				correct data, we'll use that instead. For now, you could also try
+				switching to another pose, by clicking the emoji face next to the
+				species/color picker!
+			</Box>,
+		);
+	}
 
-  const petLayers = petAppearance?.layers || [];
+	const petLayers = petAppearance?.layers || [];
 
-  // Look for pet layers with the OFFICIAL_SWF_IS_INCORRECT glitch.
-  for (const layer of petLayers) {
-    const layerHasGlitch = (layer.knownGlitches || []).includes(
-      "OFFICIAL_SWF_IS_INCORRECT",
-    );
-    if (layerHasGlitch) {
-      glitchMessages.push(
-        <Box key={`official-swf-is-incorrect-for-pet-layer-${layer.id}`}>
-          We're aware of a glitch affecting the art for this pet's{" "}
-          <i>{layer.zone.label}</i> zone. Last time we checked, this glitch
-          affected its appearance on Neopets.com, too. But our version might be
-          out of date! If you've seen it look better on-site, please email me at
-          matchu@openneo.net so we can fix it!
-        </Box>,
-      );
-    }
-  }
+	// Look for pet layers with the OFFICIAL_SWF_IS_INCORRECT glitch.
+	for (const layer of petLayers) {
+		const layerHasGlitch = (layer.knownGlitches || []).includes(
+			"OFFICIAL_SWF_IS_INCORRECT",
+		);
+		if (layerHasGlitch) {
+			glitchMessages.push(
+				<Box key={`official-swf-is-incorrect-for-pet-layer-${layer.id}`}>
+					We're aware of a glitch affecting the art for this pet's{" "}
+					<i>{layer.zone.label}</i> zone. Last time we checked, this glitch
+					affected its appearance on Neopets.com, too. But our version might be
+					out of date! If you've seen it look better on-site, please email me at
+					matchu@openneo.net so we can fix it!
+				</Box>,
+			);
+		}
+	}
 
-  // Look for pet layers with the OFFICIAL_SVG_IS_INCORRECT glitch.
-  if (hiResMode) {
-    for (const layer of petLayers) {
-      const layerHasOfficialSvgIsIncorrect = (
-        layer.knownGlitches || []
-      ).includes("OFFICIAL_SVG_IS_INCORRECT");
-      if (layerHasOfficialSvgIsIncorrect) {
-        glitchMessages.push(
-          <Box key={`official-svg-is-incorrect-for-pet-layer-${layer.id}`}>
-            There's a glitch in the art for this pet's <i>{layer.zone.label}</i>{" "}
-            zone that prevents us from showing the SVG image for Hi-Res Mode.
-            Instead, we're showing a PNG, which might look a bit blurry on
-            larger screens.
-          </Box>,
-        );
-      }
-    }
-  }
+	// Look for pet layers with the OFFICIAL_SVG_IS_INCORRECT glitch.
+	if (hiResMode) {
+		for (const layer of petLayers) {
+			const layerHasOfficialSvgIsIncorrect = (
+				layer.knownGlitches || []
+			).includes("OFFICIAL_SVG_IS_INCORRECT");
+			if (layerHasOfficialSvgIsIncorrect) {
+				glitchMessages.push(
+					<Box key={`official-svg-is-incorrect-for-pet-layer-${layer.id}`}>
+						There's a glitch in the art for this pet's <i>{layer.zone.label}</i>{" "}
+						zone that prevents us from showing the SVG image for Hi-Res Mode.
+						Instead, we're showing a PNG, which might look a bit blurry on
+						larger screens.
+					</Box>,
+				);
+			}
+		}
+	}
 
-  // Look for pet layers with the DISPLAYS_INCORRECTLY_BUT_CAUSE_UNKNOWN glitch.
-  for (const layer of petLayers) {
-    const layerHasGlitch = (layer.knownGlitches || []).includes(
-      "DISPLAYS_INCORRECTLY_BUT_CAUSE_UNKNOWN",
-    );
-    if (layerHasGlitch) {
-      glitchMessages.push(
-        <Box
-          key={`displays-incorrectly-but-cause-unknown-for-pet-layer-${layer.id}`}
-        >
-          There's a glitch in the art for this pet's <i>{layer.zone.label}</i>{" "}
-          zone that causes it to display incorrectly—but we're not sure if it's
-          on our end, or TNT's. If you have this pet, please email me at
-          matchu@openneo.net to let us know how it looks in the on-site
-          customizer!
-        </Box>,
-      );
-    }
-  }
+	// Look for pet layers with the DISPLAYS_INCORRECTLY_BUT_CAUSE_UNKNOWN glitch.
+	for (const layer of petLayers) {
+		const layerHasGlitch = (layer.knownGlitches || []).includes(
+			"DISPLAYS_INCORRECTLY_BUT_CAUSE_UNKNOWN",
+		);
+		if (layerHasGlitch) {
+			glitchMessages.push(
+				<Box
+					key={`displays-incorrectly-but-cause-unknown-for-pet-layer-${layer.id}`}
+				>
+					There's a glitch in the art for this pet's <i>{layer.zone.label}</i>{" "}
+					zone that causes it to display incorrectly—but we're not sure if it's
+					on our end, or TNT's. If you have this pet, please email me at
+					matchu@openneo.net to let us know how it looks in the on-site
+					customizer!
+				</Box>,
+			);
+		}
+	}
 
-  if (glitchMessages.length === 0) {
-    return null;
-  }
+	if (glitchMessages.length === 0) {
+		return null;
+	}
 
-  return (
-    <GlitchBadgeLayout
-      aria-label="Has known glitches"
-      tooltipLabel={
-        <Box>
-          <Box as="header" fontWeight="bold" fontSize="sm" marginBottom="1">
-            Known glitches
-          </Box>
-          <VStack spacing="1em">{glitchMessages}</VStack>
-        </Box>
-      }
-    >
-      <WarningTwoIcon fontSize="xs" marginRight="1" />
-      <FaBug />
-    </GlitchBadgeLayout>
-  );
+	return (
+		<GlitchBadgeLayout
+			aria-label="Has known glitches"
+			tooltipLabel={
+				<Box>
+					<Box as="header" fontWeight="bold" fontSize="sm" marginBottom="1">
+						Known glitches
+					</Box>
+					<VStack spacing="1em">{glitchMessages}</VStack>
+				</Box>
+			}
+		>
+			<WarningTwoIcon fontSize="xs" marginRight="1" />
+			<FaBug />
+		</GlitchBadgeLayout>
+	);
 }
 
 export default OutfitKnownGlitchesBadge;

app/javascript/wardrobe-2020/WardrobePage/SearchFooter.js

@@ -11,70 +11,70 @@ import { useSearchResults } from "./useSearchResults";
  * while still keeping the rest of the item screen open!
  */
 function SearchFooter({ searchQuery, onChangeSearchQuery, outfitState }) {
-  const [canUseSearchFooter, setCanUseSearchFooter] = useLocalStorage(
-    "DTIFeatureFlagCanUseSearchFooter",
-    false,
-  );
+	const [canUseSearchFooter, setCanUseSearchFooter] = useLocalStorage(
+		"DTIFeatureFlagCanUseSearchFooter",
+		false,
+	);
 
-  const { items, numTotalPages } = useSearchResults(
-    searchQuery,
-    outfitState,
-    1,
-  );
+	const { items, numTotalPages } = useSearchResults(
+		searchQuery,
+		outfitState,
+		1,
+	);
 
-  React.useEffect(() => {
-    if (window.location.search.includes("feature-flag-can-use-search-footer")) {
-      setCanUseSearchFooter(true);
-    }
-  }, [setCanUseSearchFooter]);
+	React.useEffect(() => {
+		if (window.location.search.includes("feature-flag-can-use-search-footer")) {
+			setCanUseSearchFooter(true);
+		}
+	}, [setCanUseSearchFooter]);
 
-  // TODO: Show the new footer to other users, too!
-  if (!canUseSearchFooter) {
-    return null;
-  }
+	// TODO: Show the new footer to other users, too!
+	if (!canUseSearchFooter) {
+		return null;
+	}
 
-  return (
-    <Sentry.ErrorBoundary fallback={MajorErrorMessage}>
-      <TestErrorSender />
-      <Box>
-        <Box paddingX="4" paddingY="4">
-          <Flex as="label" align="center">
-            <Box fontWeight="600" flex="0 0 auto">
-              Add new items:
-            </Box>
-            <Box width="8" />
-            <SearchToolbar
-              query={searchQuery}
-              onChange={onChangeSearchQuery}
-              flex="0 1 100%"
-              suggestionsPlacement="top"
-            />
-            <Box width="8" />
-            {numTotalPages != null && (
-              <Box flex="0 0 auto">
-                <PaginationToolbar
-                  numTotalPages={numTotalPages}
-                  currentPageNumber={1}
-                  goToPageNumber={() => alert("TODO")}
-                  buildPageUrl={() => null}
-                  size="sm"
-                />
-              </Box>
-            )}
-          </Flex>
-        </Box>
-        <Box maxHeight="32" overflow="auto">
-          <Box as="ul" listStyleType="disc" paddingLeft="8">
-            {items.map((item) => (
-              <Box key={item.id} as="li">
-                {item.name}
-              </Box>
-            ))}
-          </Box>
-        </Box>
-      </Box>
-    </Sentry.ErrorBoundary>
-  );
+	return (
+		<Sentry.ErrorBoundary fallback={MajorErrorMessage}>
+			<TestErrorSender />
+			<Box>
+				<Box paddingX="4" paddingY="4">
+					<Flex as="label" align="center">
+						<Box fontWeight="600" flex="0 0 auto">
+							Add new items:
+						</Box>
+						<Box width="8" />
+						<SearchToolbar
+							query={searchQuery}
+							onChange={onChangeSearchQuery}
+							flex="0 1 100%"
+							suggestionsPlacement="top"
+						/>
+						<Box width="8" />
+						{numTotalPages != null && (
+							<Box flex="0 0 auto">
+								<PaginationToolbar
+									numTotalPages={numTotalPages}
+									currentPageNumber={1}
+									goToPageNumber={() => alert("TODO")}
+									buildPageUrl={() => null}
+									size="sm"
+								/>
+							</Box>
+						)}
+					</Flex>
+				</Box>
+				<Box maxHeight="32" overflow="auto">
+					<Box as="ul" listStyleType="disc" paddingLeft="8">
+						{items.map((item) => (
+							<Box key={item.id} as="li">
+								{item.name}
+							</Box>
+						))}
+					</Box>
+				</Box>
+			</Box>
+		</Sentry.ErrorBoundary>
+	);
 }
 
 export default SearchFooter;

app/javascript/wardrobe-2020/WardrobePage/SearchPanel.js

@@ -1,10 +1,18 @@
 import React from "react";
-import { Box, Text, useColorModeValue, VisuallyHidden } from "@chakra-ui/react";
+import {
+	Alert,
+	AlertIcon,
+	Box,
+	Text,
+	useColorModeValue,
+	VisuallyHidden,
+} from "@chakra-ui/react";
 
 import Item, { ItemListContainer, ItemListSkeleton } from "./Item";
 import PaginationToolbar from "../components/PaginationToolbar";
 import { useSearchResults } from "./useSearchResults";
 import { MajorErrorMessage } from "../util";
+import { useAltStylesForSpecies } from "../loaders/alt-styles";
 
 export const SEARCH_PER_PAGE = 30;
 
@@ -16,54 +24,54 @@ export const SEARCH_PER_PAGE = 30;
  * keyboard and focus interactions.
  */
 function SearchPanel({
-  query,
-  outfitState,
-  dispatchToOutfit,
-  scrollContainerRef,
-  searchQueryRef,
-  firstSearchResultRef,
+	query,
+	outfitState,
+	dispatchToOutfit,
+	scrollContainerRef,
+	searchQueryRef,
+	firstSearchResultRef,
 }) {
-  const scrollToTop = React.useCallback(() => {
-    if (scrollContainerRef.current) {
-      scrollContainerRef.current.scrollTop = 0;
-    }
-  }, [scrollContainerRef]);
+	const scrollToTop = React.useCallback(() => {
+		if (scrollContainerRef.current) {
+			scrollContainerRef.current.scrollTop = 0;
+		}
+	}, [scrollContainerRef]);
 
-  // Sometimes we want to give focus back to the search field!
-  const onMoveFocusUpToQuery = (e) => {
-    if (searchQueryRef.current) {
-      searchQueryRef.current.focus();
-      e.preventDefault();
-    }
-  };
+	// Sometimes we want to give focus back to the search field!
+	const onMoveFocusUpToQuery = (e) => {
+		if (searchQueryRef.current) {
+			searchQueryRef.current.focus();
+			e.preventDefault();
+		}
+	};
 
-  return (
-    <Box
-      onKeyDown={(e) => {
-        // This will catch any Escape presses when the user's focus is inside
-        // the SearchPanel.
-        if (e.key === "Escape") {
-          onMoveFocusUpToQuery(e);
-        }
-      }}
-    >
-      <SearchResults
-        // When the query changes, replace the SearchResults component with a
-        // new instance. This resets both `currentPageNumber`, to take us back
-        // to page 1; and also `itemIdsToReconsider`. That way, if you find an
-        // item you like in one search, then immediately do a second search and
-        // try a conflicting item, we'll restore the item you liked from your
-        // first search!
-        key={serializeQuery(query)}
-        query={query}
-        outfitState={outfitState}
-        dispatchToOutfit={dispatchToOutfit}
-        firstSearchResultRef={firstSearchResultRef}
-        scrollToTop={scrollToTop}
-        onMoveFocusUpToQuery={onMoveFocusUpToQuery}
-      />
-    </Box>
-  );
+	return (
+		<Box
+			onKeyDown={(e) => {
+				// This will catch any Escape presses when the user's focus is inside
+				// the SearchPanel.
+				if (e.key === "Escape") {
+					onMoveFocusUpToQuery(e);
+				}
+			}}
+		>
+			<SearchResults
+				// When the query changes, replace the SearchResults component with a
+				// new instance. This resets both `currentPageNumber`, to take us back
+				// to page 1; and also `itemIdsToReconsider`. That way, if you find an
+				// item you like in one search, then immediately do a second search and
+				// try a conflicting item, we'll restore the item you liked from your
+				// first search!
+				key={serializeQuery(query)}
+				query={query}
+				outfitState={outfitState}
+				dispatchToOutfit={dispatchToOutfit}
+				firstSearchResultRef={firstSearchResultRef}
+				scrollToTop={scrollToTop}
+				onMoveFocusUpToQuery={onMoveFocusUpToQuery}
+			/>
+		</Box>
+	);
 }
 
 /**
@@ -75,191 +83,241 @@ function SearchPanel({
  * the list screen-reader- and keyboard-accessible!
  */
 function SearchResults({
-  query,
-  outfitState,
-  dispatchToOutfit,
-  firstSearchResultRef,
-  scrollToTop,
-  onMoveFocusUpToQuery,
+	query,
+	outfitState,
+	dispatchToOutfit,
+	firstSearchResultRef,
+	scrollToTop,
+	onMoveFocusUpToQuery,
 }) {
-  const [currentPageNumber, setCurrentPageNumber] = React.useState(1);
-  const { loading, error, items, numTotalPages } = useSearchResults(
-    query,
-    outfitState,
-    currentPageNumber,
-  );
+	const [currentPageNumber, setCurrentPageNumber] = React.useState(1);
+	const { loading, error, items, numTotalPages } = useSearchResults(
+		query,
+		outfitState,
+		currentPageNumber,
+	);
 
-  // Preload the previous and next page of search results, with this quick
-  // ~hacky trick: just `useSearchResults` two more times, with some extra
-  // attention to skip the query when we don't know if it will exist!
-  useSearchResults(query, outfitState, currentPageNumber - 1, {
-    skip: currentPageNumber <= 1,
-  });
-  useSearchResults(query, outfitState, currentPageNumber + 1, {
-    skip: numTotalPages == null || currentPageNumber >= numTotalPages,
-  });
+	// Preload the previous and next page of search results, with this quick
+	// ~hacky trick: just `useSearchResults` two more times, with some extra
+	// attention to skip the query when we don't know if it will exist!
+	useSearchResults(query, outfitState, currentPageNumber - 1, {
+		skip: currentPageNumber <= 1,
+	});
+	useSearchResults(query, outfitState, currentPageNumber + 1, {
+		skip: numTotalPages == null || currentPageNumber >= numTotalPages,
+	});
 
-  // This will save the `wornItemIds` when the SearchResults first mounts, and
-  // keep it saved even after the outfit changes. We use this to try to restore
-  // these items after the user makes changes, e.g., after they try on another
-  // Background we want to restore the previous one!
-  const [itemIdsToReconsider] = React.useState(outfitState.wornItemIds);
+	// This will save the `wornItemIds` when the SearchResults first mounts, and
+	// keep it saved even after the outfit changes. We use this to try to restore
+	// these items after the user makes changes, e.g., after they try on another
+	// Background we want to restore the previous one!
+	const [itemIdsToReconsider] = React.useState(outfitState.wornItemIds);
 
-  // Whenever the page number changes, scroll back to the top!
-  React.useEffect(() => scrollToTop(), [currentPageNumber, scrollToTop]);
+	// Whenever the page number changes, scroll back to the top!
+	React.useEffect(() => scrollToTop(), [currentPageNumber, scrollToTop]);
 
-  // You can use UpArrow/DownArrow to navigate between items, and even back up
-  // to the search field!
-  const goToPrevItem = React.useCallback(
-    (e) => {
-      const prevLabel = e.target.closest("label").previousSibling;
-      if (prevLabel) {
-        prevLabel.querySelector("input[type=checkbox]").focus();
-        prevLabel.scrollIntoView({ block: "center" });
-        e.preventDefault();
-      } else {
-        // If we're at the top of the list, move back up to the search box!
-        onMoveFocusUpToQuery(e);
-      }
-    },
-    [onMoveFocusUpToQuery],
-  );
-  const goToNextItem = React.useCallback((e) => {
-    const nextLabel = e.target.closest("label").nextSibling;
-    if (nextLabel) {
-      nextLabel.querySelector("input[type=checkbox]").focus();
-      nextLabel.scrollIntoView({ block: "center" });
-      e.preventDefault();
-    }
-  }, []);
+	// You can use UpArrow/DownArrow to navigate between items, and even back up
+	// to the search field!
+	const goToPrevItem = React.useCallback(
+		(e) => {
+			const prevLabel = e.target.closest("label").previousSibling;
+			if (prevLabel) {
+				prevLabel.querySelector("input[type=checkbox]").focus();
+				prevLabel.scrollIntoView({ block: "center" });
+				e.preventDefault();
+			} else {
+				// If we're at the top of the list, move back up to the search box!
+				onMoveFocusUpToQuery(e);
+			}
+		},
+		[onMoveFocusUpToQuery],
+	);
+	const goToNextItem = React.useCallback((e) => {
+		const nextLabel = e.target.closest("label").nextSibling;
+		if (nextLabel) {
+			nextLabel.querySelector("input[type=checkbox]").focus();
+			nextLabel.scrollIntoView({ block: "center" });
+			e.preventDefault();
+		}
+	}, []);
 
-  const searchPanelBackground = useColorModeValue("white", "gray.900");
+	const searchPanelBackground = useColorModeValue("white", "gray.900");
 
-  if (error) {
-    return <MajorErrorMessage error={error} variant="network" />;
-  }
+	if (error) {
+		return <MajorErrorMessage error={error} variant="network" />;
+	}
 
-  // Finally, render the item list, with checkboxes and Item components!
-  // We also render some extra skeleton items at the bottom during infinite
-  // scroll loading.
-  return (
-    <Box>
-      <Box
-        position="sticky"
-        top="0"
-        background={searchPanelBackground}
-        zIndex="2"
-        paddingX="5"
-        paddingBottom="2"
-        paddingTop="1"
-      >
-        <PaginationToolbar
-          numTotalPages={numTotalPages}
-          currentPageNumber={currentPageNumber}
-          goToPageNumber={setCurrentPageNumber}
-          buildPageUrl={() => null}
-          size="sm"
-        />
-      </Box>
-      <ItemListContainer paddingX="4" paddingBottom="2">
-        {items.map((item, index) => (
-          <SearchResultItem
-            key={item.id}
-            item={item}
-            itemIdsToReconsider={itemIdsToReconsider}
-            isWorn={outfitState.wornItemIds.includes(item.id)}
-            isInOutfit={outfitState.allItemIds.includes(item.id)}
-            dispatchToOutfit={dispatchToOutfit}
-            checkboxRef={index === 0 ? firstSearchResultRef : null}
-            goToPrevItem={goToPrevItem}
-            goToNextItem={goToNextItem}
-          />
-        ))}
-      </ItemListContainer>
-      {loading && (
-        <ItemListSkeleton
-          count={SEARCH_PER_PAGE}
-          paddingX="4"
-          paddingBottom="2"
-        />
-      )}
-      {!loading && items.length === 0 && (
-        <Text paddingX="4">
-          We couldn't find any matching items{" "}
-          <span role="img" aria-label="(thinking emoji)">
-            🤔
-          </span>{" "}
-          Try again?
-        </Text>
-      )}
-    </Box>
-  );
+	// Finally, render the item list, with checkboxes and Item components!
+	// We also render some extra skeleton items at the bottom during infinite
+	// scroll loading.
+	return (
+		<Box>
+			<Box
+				position="sticky"
+				top="0"
+				background={searchPanelBackground}
+				zIndex="2"
+				paddingX="5"
+				paddingBottom="2"
+				paddingTop="1"
+			>
+				<PaginationToolbar
+					numTotalPages={numTotalPages}
+					currentPageNumber={currentPageNumber}
+					goToPageNumber={setCurrentPageNumber}
+					buildPageUrl={() => null}
+					size="sm"
+				/>
+			</Box>
+			<SearchNCStylesHint query={query} outfitState={outfitState} />
+			<ItemListContainer paddingX="4" paddingBottom="2">
+				{items.map((item, index) => (
+					<SearchResultItem
+						key={item.id}
+						item={item}
+						itemIdsToReconsider={itemIdsToReconsider}
+						isWorn={outfitState.wornItemIds.includes(item.id)}
+						isInOutfit={outfitState.allItemIds.includes(item.id)}
+						dispatchToOutfit={dispatchToOutfit}
+						checkboxRef={index === 0 ? firstSearchResultRef : null}
+						goToPrevItem={goToPrevItem}
+						goToNextItem={goToNextItem}
+					/>
+				))}
+			</ItemListContainer>
+			{loading && (
+				<ItemListSkeleton
+					count={SEARCH_PER_PAGE}
+					paddingX="4"
+					paddingBottom="2"
+				/>
+			)}
+			{!loading && items.length === 0 && (
+				<Text paddingX="4">
+					We couldn't find any matching items{" "}
+					<span role="img" aria-label="(thinking emoji)">
+						🤔
+					</span>{" "}
+					Try again?
+				</Text>
+			)}
+		</Box>
+	);
 }
 
 function SearchResultItem({
-  item,
-  itemIdsToReconsider,
-  isWorn,
-  isInOutfit,
-  dispatchToOutfit,
-  checkboxRef,
-  goToPrevItem,
-  goToNextItem,
+	item,
+	itemIdsToReconsider,
+	isWorn,
+	isInOutfit,
+	dispatchToOutfit,
+	checkboxRef,
+	goToPrevItem,
+	goToNextItem,
 }) {
-  // It's important to use `useCallback` for `onRemove`, to avoid re-rendering
-  // the whole list of <Item>s!
-  const onRemove = React.useCallback(
-    () =>
-      dispatchToOutfit({
-        type: "removeItem",
-        itemId: item.id,
-        itemIdsToReconsider,
-      }),
-    [item.id, itemIdsToReconsider, dispatchToOutfit],
-  );
+	// It's important to use `useCallback` for `onRemove`, to avoid re-rendering
+	// the whole list of <Item>s!
+	const onRemove = React.useCallback(
+		() =>
+			dispatchToOutfit({
+				type: "removeItem",
+				itemId: item.id,
+				itemIdsToReconsider,
+			}),
+		[item.id, itemIdsToReconsider, dispatchToOutfit],
+	);
 
-  return (
-    // We're wrapping the control inside the label, which works just fine!
-    // eslint-disable-next-line jsx-a11y/label-has-associated-control
-    <label>
-      <VisuallyHidden
-        as="input"
-        type="checkbox"
-        aria-label={`Wear "${item.name}"`}
-        value={item.id}
-        checked={isWorn}
-        ref={checkboxRef}
-        onChange={(e) => {
-          const itemId = e.target.value;
-          const willBeWorn = e.target.checked;
-          if (willBeWorn) {
-            dispatchToOutfit({ type: "wearItem", itemId, itemIdsToReconsider });
-          } else {
-            dispatchToOutfit({
-              type: "unwearItem",
-              itemId,
-              itemIdsToReconsider,
-            });
-          }
-        }}
-        onKeyDown={(e) => {
-          if (e.key === "Enter") {
-            e.target.click();
-          } else if (e.key === "ArrowUp") {
-            goToPrevItem(e);
-          } else if (e.key === "ArrowDown") {
-            goToNextItem(e);
-          }
-        }}
-      />
-      <Item
-        item={item}
-        isWorn={isWorn}
-        isInOutfit={isInOutfit}
-        onRemove={onRemove}
-      />
-    </label>
-  );
+	return (
+		// We're wrapping the control inside the label, which works just fine!
+		// eslint-disable-next-line jsx-a11y/label-has-associated-control
+		<label>
+			<VisuallyHidden
+				as="input"
+				type="checkbox"
+				aria-label={`Wear "${item.name}"`}
+				value={item.id}
+				checked={isWorn}
+				ref={checkboxRef}
+				onChange={(e) => {
+					const itemId = e.target.value;
+					const willBeWorn = e.target.checked;
+					if (willBeWorn) {
+						dispatchToOutfit({ type: "wearItem", itemId, itemIdsToReconsider });
+					} else {
+						dispatchToOutfit({
+							type: "unwearItem",
+							itemId,
+							itemIdsToReconsider,
+						});
+					}
+				}}
+				onKeyDown={(e) => {
+					if (e.key === "Enter") {
+						e.target.click();
+					} else if (e.key === "ArrowUp") {
+						goToPrevItem(e);
+					} else if (e.key === "ArrowDown") {
+						goToNextItem(e);
+					}
+				}}
+			/>
+			<Item
+				item={item}
+				isWorn={isWorn}
+				isInOutfit={isInOutfit}
+				onRemove={onRemove}
+			/>
+		</label>
+	);
+}
+
+function SearchNCStylesHint({ query, outfitState }) {
+	const { data: altStyles } = useAltStylesForSpecies(outfitState.speciesId);
+
+	const message = getSearchNCStylesMessage(query, altStyles);
+	if (!message) {
+		return null;
+	}
+
+	return (
+		<Box paddingX="4" paddingY="2">
+			<Alert status="info" variant="left-accent" fontSize="sm" color="blue.900">
+				<AlertIcon />
+				{message}
+			</Alert>
+		</Box>
+	);
+}
+
+function getSearchNCStylesMessage(query, altStyles) {
+	const seriesMainNames = [
+		...new Set((altStyles ?? []).map((as) => as.seriesMainName)),
+	];
+	const queryWords = query.value.toLowerCase().split(/\s+/);
+
+	if (queryWords.includes("token")) {
+		return (
+			<>
+				If you're looking for NC Styles, check the emotion picker below the pet
+				preview!
+			</>
+		);
+	}
+
+	// NOTE: This won't work on multi-word series main names, of which there
+	//       are currently none. (Some *series names* like Prismatics are
+	//       multi-word, but their *main* name is not.)
+	const seriesWord = seriesMainNames.find((n) =>
+		queryWords.includes(n.toLowerCase()),
+	);
+	if (seriesWord != null) {
+		return (
+			<>
+				If you're looking for {seriesWord} NC Styles, check the emotion picker
+				below the pet preview!
+			</>
+		);
+	}
 }
 
 /**
@@ -267,12 +325,12 @@ function SearchResultItem({
  * JS comparison.
  */
 function serializeQuery(query) {
-  return `${JSON.stringify([
-    query.value,
-    query.filterToItemKind,
-    query.filterToZoneLabel,
-    query.filterToCurrentUserOwnsOrWants,
-  ])}`;
+	return `${JSON.stringify([
+		query.value,
+		query.filterToItemKind,
+		query.filterToZoneLabel,
+		query.filterToCurrentUserOwnsOrWants,
+	])}`;
 }
 
 export default SearchPanel;

app/javascript/wardrobe-2020/WardrobePage/SearchToolbar.js

@@ -2,21 +2,21 @@ import React from "react";
 import gql from "graphql-tag";
 import { useQuery } from "@apollo/client";
 import {
-  Box,
-  IconButton,
-  Input,
-  InputGroup,
-  InputLeftAddon,
-  InputLeftElement,
-  InputRightElement,
-  Tooltip,
-  useColorModeValue,
+	Box,
+	IconButton,
+	Input,
+	InputGroup,
+	InputLeftAddon,
+	InputLeftElement,
+	InputRightElement,
+	Tooltip,
+	useColorModeValue,
 } from "@chakra-ui/react";
 import {
-  ChevronDownIcon,
-  ChevronUpIcon,
-  CloseIcon,
-  SearchIcon,
+	ChevronDownIcon,
+	ChevronUpIcon,
+	CloseIcon,
+	SearchIcon,
 } from "@chakra-ui/icons";
 import { ClassNames } from "@emotion/react";
 import Autosuggest from "react-autosuggest";
@@ -25,25 +25,25 @@ import useCurrentUser from "../components/useCurrentUser";
 import { logAndCapture } from "../util";
 
 export const emptySearchQuery = {
-  value: "",
-  filterToZoneLabel: null,
-  filterToItemKind: null,
-  filterToCurrentUserOwnsOrWants: null,
+	value: "",
+	filterToZoneLabel: null,
+	filterToItemKind: null,
+	filterToCurrentUserOwnsOrWants: null,
 };
 
 export function searchQueryIsEmpty(query) {
-  return Object.values(query).every((value) => !value);
+	return Object.values(query).every((value) => !value);
 }
 
 const SUGGESTIONS_PLACEMENT_PROPS = {
-  inline: {
-    borderBottomRadius: "md",
-  },
-  top: {
-    position: "absolute",
-    bottom: "100%",
-    borderTopRadius: "md",
-  },
+	inline: {
+		borderBottomRadius: "md",
+	},
+	top: {
+		position: "absolute",
+		bottom: "100%",
+		borderTopRadius: "md",
+	},
 };
 
 /**
@@ -56,387 +56,387 @@ const SUGGESTIONS_PLACEMENT_PROPS = {
  * from anywhere, or UpArrow from the first result!)
  */
 function SearchToolbar({
-  query,
-  searchQueryRef,
-  firstSearchResultRef = null,
-  onChange,
-  autoFocus,
-  showItemsLabel = false,
-  background = null,
-  boxShadow = null,
-  suggestionsPlacement = "inline",
-  ...props
+	query,
+	searchQueryRef,
+	firstSearchResultRef = null,
+	onChange,
+	autoFocus,
+	showItemsLabel = false,
+	background = null,
+	boxShadow = null,
+	suggestionsPlacement = "inline",
+	...props
 }) {
-  const [suggestions, setSuggestions] = React.useState([]);
-  const [advancedSearchIsOpen, setAdvancedSearchIsOpen] = React.useState(false);
-  const { isLoggedIn } = useCurrentUser();
+	const [suggestions, setSuggestions] = React.useState([]);
+	const [advancedSearchIsOpen, setAdvancedSearchIsOpen] = React.useState(false);
+	const { isLoggedIn } = useCurrentUser();
 
-  // NOTE: This query should always load ~instantly, from the client cache.
-  const { data } = useQuery(gql`
-    query SearchToolbarZones {
-      allZones {
-        id
-        label
-        depth
-        isCommonlyUsedByItems
-      }
-    }
-  `);
-  const zones = data?.allZones || [];
-  const itemZones = zones.filter((z) => z.isCommonlyUsedByItems);
+	// NOTE: This query should always load ~instantly, from the client cache.
+	const { data } = useQuery(gql`
+		query SearchToolbarZones {
+			allZones {
+				id
+				label
+				depth
+				isCommonlyUsedByItems
+			}
+		}
+	`);
+	const zones = data?.allZones || [];
+	const itemZones = zones.filter((z) => z.isCommonlyUsedByItems);
 
-  let zoneLabels = itemZones.map((z) => z.label);
-  zoneLabels = [...new Set(zoneLabels)];
-  zoneLabels.sort();
+	let zoneLabels = itemZones.map((z) => z.label);
+	zoneLabels = [...new Set(zoneLabels)];
+	zoneLabels.sort();
 
-  const onMoveFocusDownToResults = (e) => {
-    if (firstSearchResultRef && firstSearchResultRef.current) {
-      firstSearchResultRef.current.focus();
-      e.preventDefault();
-    }
-  };
+	const onMoveFocusDownToResults = (e) => {
+		if (firstSearchResultRef && firstSearchResultRef.current) {
+			firstSearchResultRef.current.focus();
+			e.preventDefault();
+		}
+	};
 
-  const suggestionBgColor = useColorModeValue("white", "whiteAlpha.100");
-  const highlightedBgColor = useColorModeValue("gray.100", "whiteAlpha.300");
+	const suggestionBgColor = useColorModeValue("white", "whiteAlpha.100");
+	const highlightedBgColor = useColorModeValue("gray.100", "whiteAlpha.300");
 
-  const renderSuggestion = React.useCallback(
-    ({ text }, { isHighlighted }) => (
-      <Box
-        fontWeight={isHighlighted ? "bold" : "normal"}
-        background={isHighlighted ? highlightedBgColor : suggestionBgColor}
-        padding="2"
-        paddingLeft="2.5rem"
-        fontSize="sm"
-      >
-        {text}
-      </Box>
-    ),
-    [suggestionBgColor, highlightedBgColor],
-  );
+	const renderSuggestion = React.useCallback(
+		({ text }, { isHighlighted }) => (
+			<Box
+				fontWeight={isHighlighted ? "bold" : "normal"}
+				background={isHighlighted ? highlightedBgColor : suggestionBgColor}
+				padding="2"
+				paddingLeft="2.5rem"
+				fontSize="sm"
+			>
+				{text}
+			</Box>
+		),
+		[suggestionBgColor, highlightedBgColor],
+	);
 
-  const renderSuggestionsContainer = React.useCallback(
-    ({ containerProps, children }) => {
-      const { className, ...otherContainerProps } = containerProps;
-      return (
-        <ClassNames>
-          {({ css, cx }) => (
-            <Box
-              {...otherContainerProps}
-              boxShadow="md"
-              overflow="auto"
-              transition="all 0.4s"
-              maxHeight="48"
-              width="100%"
-              className={cx(
-                className,
-                css`
-                  li {
-                    list-style: none;
-                  }
-                `,
-              )}
-              {...SUGGESTIONS_PLACEMENT_PROPS[suggestionsPlacement]}
-            >
-              {children}
-              {!children && advancedSearchIsOpen && (
-                <Box
-                  padding="4"
-                  fontSize="sm"
-                  fontStyle="italic"
-                  textAlign="center"
-                >
-                  No more filters available!
-                </Box>
-              )}
-            </Box>
-          )}
-        </ClassNames>
-      );
-    },
-    [advancedSearchIsOpen, suggestionsPlacement],
-  );
+	const renderSuggestionsContainer = React.useCallback(
+		({ containerProps, children }) => {
+			const { className, ...otherContainerProps } = containerProps;
+			return (
+				<ClassNames>
+					{({ css, cx }) => (
+						<Box
+							{...otherContainerProps}
+							boxShadow="md"
+							overflow="auto"
+							transition="all 0.4s"
+							maxHeight="48"
+							width="100%"
+							className={cx(
+								className,
+								css`
+									li {
+										list-style: none;
+									}
+								`,
+							)}
+							{...SUGGESTIONS_PLACEMENT_PROPS[suggestionsPlacement]}
+						>
+							{children}
+							{!children && advancedSearchIsOpen && (
+								<Box
+									padding="4"
+									fontSize="sm"
+									fontStyle="italic"
+									textAlign="center"
+								>
+									No more filters available!
+								</Box>
+							)}
+						</Box>
+					)}
+				</ClassNames>
+			);
+		},
+		[advancedSearchIsOpen, suggestionsPlacement],
+	);
 
-  // When we change the query filters, clear out the suggestions.
-  React.useEffect(() => {
-    setSuggestions([]);
-  }, [
-    query.filterToItemKind,
-    query.filterToZoneLabel,
-    query.filterToCurrentUserOwnsOrWants,
-  ]);
+	// When we change the query filters, clear out the suggestions.
+	React.useEffect(() => {
+		setSuggestions([]);
+	}, [
+		query.filterToItemKind,
+		query.filterToZoneLabel,
+		query.filterToCurrentUserOwnsOrWants,
+	]);
 
-  let queryFilterText = getQueryFilterText(query);
-  if (showItemsLabel) {
-    queryFilterText = queryFilterText ? (
-      <>
-        <Box as="span" fontWeight="600">
-          Items:
-        </Box>{" "}
-        {queryFilterText}
-      </>
-    ) : (
-      <Box as="span" fontWeight="600">
-        Items
-      </Box>
-    );
-  }
+	let queryFilterText = getQueryFilterText(query);
+	if (showItemsLabel) {
+		queryFilterText = queryFilterText ? (
+			<>
+				<Box as="span" fontWeight="600">
+					Items:
+				</Box>{" "}
+				{queryFilterText}
+			</>
+		) : (
+			<Box as="span" fontWeight="600">
+				Items
+			</Box>
+		);
+	}
 
-  const allSuggestions = getSuggestions(null, query, zoneLabels, isLoggedIn, {
-    showAll: true,
-  });
+	const allSuggestions = getSuggestions(null, query, zoneLabels, isLoggedIn, {
+		showAll: true,
+	});
 
-  // Once you remove the final suggestion available, close Advanced Search. We
-  // have placeholder text available, sure, but this feels more natural!
-  React.useEffect(() => {
-    if (allSuggestions.length === 0) {
-      setAdvancedSearchIsOpen(false);
-    }
-  }, [allSuggestions.length]);
+	// Once you remove the final suggestion available, close Advanced Search. We
+	// have placeholder text available, sure, but this feels more natural!
+	React.useEffect(() => {
+		if (allSuggestions.length === 0) {
+			setAdvancedSearchIsOpen(false);
+		}
+	}, [allSuggestions.length]);
 
-  const focusBorderColor = useColorModeValue("green.600", "green.400");
+	const focusBorderColor = useColorModeValue("green.600", "green.400");
 
-  return (
-    <Box position="relative" {...props}>
-      <Autosuggest
-        suggestions={advancedSearchIsOpen ? allSuggestions : suggestions}
-        onSuggestionsFetchRequested={({ value }) => {
-          // HACK: I'm not sure why, but apparently this gets called with value
-          //       set to the _chosen suggestion_ after choosing it? Has that
-          //       always happened? Idk? Let's just, gate around it, I guess?
-          if (typeof value === "string") {
-            setSuggestions(
-              getSuggestions(value, query, zoneLabels, isLoggedIn),
-            );
-          }
-        }}
-        onSuggestionSelected={(e, { suggestion }) => {
-          onChange({
-            ...query,
-            // If the suggestion was from typing, remove the last word of the
-            // query value. Or, if it was from Advanced Search, leave it alone!
-            value: advancedSearchIsOpen
-              ? query.value
-              : removeLastWord(query.value),
-            filterToZoneLabel: suggestion.zoneLabel || query.filterToZoneLabel,
-            filterToItemKind: suggestion.itemKind || query.filterToItemKind,
-            filterToCurrentUserOwnsOrWants:
-              suggestion.userOwnsOrWants ||
-              query.filterToCurrentUserOwnsOrWants,
-          });
-        }}
-        getSuggestionValue={(zl) => zl}
-        alwaysRenderSuggestions={true}
-        renderSuggestion={renderSuggestion}
-        renderSuggestionsContainer={renderSuggestionsContainer}
-        renderInputComponent={(inputProps) => (
-          <InputGroup boxShadow={boxShadow} borderRadius="md">
-            {queryFilterText ? (
-              <InputLeftAddon>
-                <SearchIcon color="gray.400" marginRight="3" />
-                <Box fontSize="sm">{queryFilterText}</Box>
-              </InputLeftAddon>
-            ) : (
-              <InputLeftElement>
-                <SearchIcon color="gray.400" />
-              </InputLeftElement>
-            )}
-            <Input
-              background={background}
-              // TODO: How to improve a11y here?
-              // eslint-disable-next-line jsx-a11y/no-autofocus
-              autoFocus={autoFocus}
-              {...inputProps}
-            />
-            <InputRightElement
-              width="auto"
-              justifyContent="flex-end"
-              paddingRight="2px"
-              paddingY="2px"
-            >
-              {!searchQueryIsEmpty(query) && (
-                <Tooltip label="Clear">
-                  <IconButton
-                    icon={<CloseIcon fontSize="0.6em" />}
-                    color="gray.400"
-                    variant="ghost"
-                    height="100%"
-                    marginLeft="1"
-                    aria-label="Clear search"
-                    onClick={() => {
-                      setSuggestions([]);
-                      onChange(emptySearchQuery);
-                    }}
-                  />
-                </Tooltip>
-              )}
-              <Tooltip label="Advanced search">
-                <IconButton
-                  icon={
-                    advancedSearchIsOpen ? (
-                      <ChevronUpIcon fontSize="1.5em" />
-                    ) : (
-                      <ChevronDownIcon fontSize="1.5em" />
-                    )
-                  }
-                  color="gray.400"
-                  variant="ghost"
-                  height="100%"
-                  aria-label="Open advanced search"
-                  onClick={() => setAdvancedSearchIsOpen((isOpen) => !isOpen)}
-                />
-              </Tooltip>
-            </InputRightElement>
-          </InputGroup>
-        )}
-        inputProps={{
-          placeholder: "Search all items…",
-          focusBorderColor: focusBorderColor,
-          value: query.value || "",
-          ref: searchQueryRef,
-          minWidth: 0,
-          "data-test-id": "item-search-input",
-          onChange: (e, { newValue, method }) => {
-            // The Autosuggest tries to change the _entire_ value of the element
-            // when navigating suggestions, which isn't actually what we want.
-            // Only accept value changes that are typed by the user!
-            if (method === "type") {
-              onChange({ ...query, value: newValue });
-            }
-          },
-          onKeyDown: (e) => {
-            if (e.key === "Escape") {
-              if (suggestions.length > 0) {
-                setSuggestions([]);
-                return;
-              }
-              onChange(emptySearchQuery);
-              e.target.blur();
-            } else if (e.key === "Enter") {
-              // Pressing Enter doesn't actually submit because it's all on
-              // debounce, but it can be a declaration that the query is done, so
-              // filter suggestions should go away!
-              if (suggestions.length > 0) {
-                setSuggestions([]);
-                return;
-              }
-            } else if (e.key === "ArrowDown") {
-              if (suggestions.length > 0) {
-                return;
-              }
-              onMoveFocusDownToResults(e);
-            } else if (e.key === "Backspace" && e.target.selectionStart === 0) {
-              onChange({
-                ...query,
-                filterToItemKind: null,
-                filterToZoneLabel: null,
-                filterToCurrentUserOwnsOrWants: null,
-              });
-            }
-          },
-        }}
-      />
-    </Box>
-  );
+	return (
+		<Box position="relative" {...props}>
+			<Autosuggest
+				suggestions={advancedSearchIsOpen ? allSuggestions : suggestions}
+				onSuggestionsFetchRequested={({ value }) => {
+					// HACK: I'm not sure why, but apparently this gets called with value
+					//       set to the _chosen suggestion_ after choosing it? Has that
+					//       always happened? Idk? Let's just, gate around it, I guess?
+					if (typeof value === "string") {
+						setSuggestions(
+							getSuggestions(value, query, zoneLabels, isLoggedIn),
+						);
+					}
+				}}
+				onSuggestionSelected={(e, { suggestion }) => {
+					onChange({
+						...query,
+						// If the suggestion was from typing, remove the last word of the
+						// query value. Or, if it was from Advanced Search, leave it alone!
+						value: advancedSearchIsOpen
+							? query.value
+							: removeLastWord(query.value),
+						filterToZoneLabel: suggestion.zoneLabel || query.filterToZoneLabel,
+						filterToItemKind: suggestion.itemKind || query.filterToItemKind,
+						filterToCurrentUserOwnsOrWants:
+							suggestion.userOwnsOrWants ||
+							query.filterToCurrentUserOwnsOrWants,
+					});
+				}}
+				getSuggestionValue={(zl) => zl}
+				alwaysRenderSuggestions={true}
+				renderSuggestion={renderSuggestion}
+				renderSuggestionsContainer={renderSuggestionsContainer}
+				renderInputComponent={(inputProps) => (
+					<InputGroup boxShadow={boxShadow} borderRadius="md">
+						{queryFilterText ? (
+							<InputLeftAddon>
+								<SearchIcon color="gray.400" marginRight="3" />
+								<Box fontSize="sm">{queryFilterText}</Box>
+							</InputLeftAddon>
+						) : (
+							<InputLeftElement>
+								<SearchIcon color="gray.400" />
+							</InputLeftElement>
+						)}
+						<Input
+							background={background}
+							// TODO: How to improve a11y here?
+							// eslint-disable-next-line jsx-a11y/no-autofocus
+							autoFocus={autoFocus}
+							{...inputProps}
+						/>
+						<InputRightElement
+							width="auto"
+							justifyContent="flex-end"
+							paddingRight="2px"
+							paddingY="2px"
+						>
+							{!searchQueryIsEmpty(query) && (
+								<Tooltip label="Clear">
+									<IconButton
+										icon={<CloseIcon fontSize="0.6em" />}
+										color="gray.400"
+										variant="ghost"
+										height="100%"
+										marginLeft="1"
+										aria-label="Clear search"
+										onClick={() => {
+											setSuggestions([]);
+											onChange(emptySearchQuery);
+										}}
+									/>
+								</Tooltip>
+							)}
+							<Tooltip label="Advanced search">
+								<IconButton
+									icon={
+										advancedSearchIsOpen ? (
+											<ChevronUpIcon fontSize="1.5em" />
+										) : (
+											<ChevronDownIcon fontSize="1.5em" />
+										)
+									}
+									color="gray.400"
+									variant="ghost"
+									height="100%"
+									aria-label="Open advanced search"
+									onClick={() => setAdvancedSearchIsOpen((isOpen) => !isOpen)}
+								/>
+							</Tooltip>
+						</InputRightElement>
+					</InputGroup>
+				)}
+				inputProps={{
+					placeholder: "Search all items…",
+					focusBorderColor: focusBorderColor,
+					value: query.value || "",
+					ref: searchQueryRef,
+					minWidth: 0,
+					"data-test-id": "item-search-input",
+					onChange: (e, { newValue, method }) => {
+						// The Autosuggest tries to change the _entire_ value of the element
+						// when navigating suggestions, which isn't actually what we want.
+						// Only accept value changes that are typed by the user!
+						if (method === "type") {
+							onChange({ ...query, value: newValue });
+						}
+					},
+					onKeyDown: (e) => {
+						if (e.key === "Escape") {
+							if (suggestions.length > 0) {
+								setSuggestions([]);
+								return;
+							}
+							onChange(emptySearchQuery);
+							e.target.blur();
+						} else if (e.key === "Enter") {
+							// Pressing Enter doesn't actually submit because it's all on
+							// debounce, but it can be a declaration that the query is done, so
+							// filter suggestions should go away!
+							if (suggestions.length > 0) {
+								setSuggestions([]);
+								return;
+							}
+						} else if (e.key === "ArrowDown") {
+							if (suggestions.length > 0) {
+								return;
+							}
+							onMoveFocusDownToResults(e);
+						} else if (e.key === "Backspace" && e.target.selectionStart === 0) {
+							onChange({
+								...query,
+								filterToItemKind: null,
+								filterToZoneLabel: null,
+								filterToCurrentUserOwnsOrWants: null,
+							});
+						}
+					},
+				}}
+			/>
+		</Box>
+	);
 }
 
 function getSuggestions(
-  value,
-  query,
-  zoneLabels,
-  isLoggedIn,
-  { showAll = false } = {},
+	value,
+	query,
+	zoneLabels,
+	isLoggedIn,
+	{ showAll = false } = {},
 ) {
-  if (!value && !showAll) {
-    return [];
-  }
+	if (!value && !showAll) {
+		return [];
+	}
 
-  const words = (value || "").split(/\s+/);
-  const lastWord = words[words.length - 1];
-  if (lastWord.length < 2 && !showAll) {
-    return [];
-  }
+	const words = (value || "").split(/\s+/);
+	const lastWord = words[words.length - 1];
+	if (lastWord.length < 2 && !showAll) {
+		return [];
+	}
 
-  const suggestions = [];
+	const suggestions = [];
 
-  if (query.filterToItemKind == null) {
-    if (
-      wordMatches("NC", lastWord) ||
-      wordMatches("Neocash", lastWord) ||
-      showAll
-    ) {
-      suggestions.push({ itemKind: "NC", text: "Neocash items" });
-    }
+	if (query.filterToItemKind == null) {
+		if (
+			wordMatches("NC", lastWord) ||
+			wordMatches("Neocash", lastWord) ||
+			showAll
+		) {
+			suggestions.push({ itemKind: "NC", text: "Neocash items" });
+		}
 
-    if (
-      wordMatches("NP", lastWord) ||
-      wordMatches("Neopoints", lastWord) ||
-      showAll
-    ) {
-      suggestions.push({ itemKind: "NP", text: "Neopoint items" });
-    }
+		if (
+			wordMatches("NP", lastWord) ||
+			wordMatches("Neopoints", lastWord) ||
+			showAll
+		) {
+			suggestions.push({ itemKind: "NP", text: "Neopoint items" });
+		}
 
-    if (
-      wordMatches("PB", lastWord) ||
-      wordMatches("Paintbrush", lastWord) ||
-      showAll
-    ) {
-      suggestions.push({ itemKind: "PB", text: "Paintbrush items" });
-    }
-  }
+		if (
+			wordMatches("PB", lastWord) ||
+			wordMatches("Paintbrush", lastWord) ||
+			showAll
+		) {
+			suggestions.push({ itemKind: "PB", text: "Paintbrush items" });
+		}
+	}
 
-  if (isLoggedIn && query.filterToCurrentUserOwnsOrWants == null) {
-    if (wordMatches("Items you own", lastWord) || showAll) {
-      suggestions.push({ userOwnsOrWants: "OWNS", text: "Items you own" });
-    }
+	if (isLoggedIn && query.filterToCurrentUserOwnsOrWants == null) {
+		if (wordMatches("Items you own", lastWord) || showAll) {
+			suggestions.push({ userOwnsOrWants: "OWNS", text: "Items you own" });
+		}
 
-    if (wordMatches("Items you want", lastWord) || showAll) {
-      suggestions.push({ userOwnsOrWants: "WANTS", text: "Items you want" });
-    }
-  }
+		if (wordMatches("Items you want", lastWord) || showAll) {
+			suggestions.push({ userOwnsOrWants: "WANTS", text: "Items you want" });
+		}
+	}
 
-  if (query.filterToZoneLabel == null) {
-    for (const zoneLabel of zoneLabels) {
-      if (wordMatches(zoneLabel, lastWord) || showAll) {
-        suggestions.push({ zoneLabel, text: `Zone: ${zoneLabel}` });
-      }
-    }
-  }
+	if (query.filterToZoneLabel == null) {
+		for (const zoneLabel of zoneLabels) {
+			if (wordMatches(zoneLabel, lastWord) || showAll) {
+				suggestions.push({ zoneLabel, text: `Zone: ${zoneLabel}` });
+			}
+		}
+	}
 
-  return suggestions;
+	return suggestions;
 }
 
 function wordMatches(target, word) {
-  return target.toLowerCase().includes(word.toLowerCase());
+	return target.toLowerCase().includes(word.toLowerCase());
 }
 
 function getQueryFilterText(query) {
-  const textWords = [];
+	const textWords = [];
 
-  if (query.filterToItemKind) {
-    textWords.push(query.filterToItemKind);
-  }
+	if (query.filterToItemKind) {
+		textWords.push(query.filterToItemKind);
+	}
 
-  if (query.filterToZoneLabel) {
-    textWords.push(pluralizeZoneLabel(query.filterToZoneLabel));
-  }
+	if (query.filterToZoneLabel) {
+		textWords.push(pluralizeZoneLabel(query.filterToZoneLabel));
+	}
 
-  if (query.filterToCurrentUserOwnsOrWants === "OWNS") {
-    if (!query.filterToItemKind && !query.filterToZoneLabel) {
-      textWords.push("Items");
-    } else if (query.filterToItemKind && !query.filterToZoneLabel) {
-      textWords.push("items");
-    }
-    textWords.push("you own");
-  } else if (query.filterToCurrentUserOwnsOrWants === "WANTS") {
-    if (!query.filterToItemKind && !query.filterToZoneLabel) {
-      textWords.push("Items");
-    } else if (query.filterToItemKind && !query.filterToZoneLabel) {
-      textWords.push("items");
-    }
-    textWords.push("you want");
-  }
+	if (query.filterToCurrentUserOwnsOrWants === "OWNS") {
+		if (!query.filterToItemKind && !query.filterToZoneLabel) {
+			textWords.push("Items");
+		} else if (query.filterToItemKind && !query.filterToZoneLabel) {
+			textWords.push("items");
+		}
+		textWords.push("you own");
+	} else if (query.filterToCurrentUserOwnsOrWants === "WANTS") {
+		if (!query.filterToItemKind && !query.filterToZoneLabel) {
+			textWords.push("Items");
+		} else if (query.filterToItemKind && !query.filterToZoneLabel) {
+			textWords.push("items");
+		}
+		textWords.push("you want");
+	}
 
-  return textWords.join(" ");
+	return textWords.join(" ");
 }
 
 /**
@@ -446,13 +446,13 @@ function getQueryFilterText(query) {
  *       manually creating the plural for each zone. But, ehh! ¯\_ (ツ)_/¯
  */
 function pluralizeZoneLabel(zoneLabel) {
-  if (zoneLabel.endsWith("ss")) {
-    return zoneLabel + "es";
-  } else if (zoneLabel.endsWith("s")) {
-    return zoneLabel;
-  } else {
-    return zoneLabel + "s";
-  }
+	if (zoneLabel.endsWith("ss")) {
+		return zoneLabel + "es";
+	} else if (zoneLabel.endsWith("s")) {
+		return zoneLabel;
+	} else {
+		return zoneLabel + "s";
+	}
 }
 
 /**
@@ -460,22 +460,22 @@ function pluralizeZoneLabel(zoneLabel) {
  * preceding space removed.
  */
 function removeLastWord(text) {
-  // This regex matches the full text, and assigns the last word and any
-  // preceding text to subgroup 2, and all preceding text to subgroup 1. If
-  // there's no last word, we'll still match, and the full string will be in
-  // subgroup 1, including any space - no changes made!
-  const match = text.match(/^(.*?)(\s*\S+)?$/);
-  if (!match) {
-    logAndCapture(
-      new Error(
-        `Assertion failure: pattern should match any input text, ` +
-          `but failed to match ${JSON.stringify(text)}`,
-      ),
-    );
-    return text;
-  }
+	// This regex matches the full text, and assigns the last word and any
+	// preceding text to subgroup 2, and all preceding text to subgroup 1. If
+	// there's no last word, we'll still match, and the full string will be in
+	// subgroup 1, including any space - no changes made!
+	const match = text.match(/^(.*?)(\s*\S+)?$/);
+	if (!match) {
+		logAndCapture(
+			new Error(
+				`Assertion failure: pattern should match any input text, ` +
+					`but failed to match ${JSON.stringify(text)}`,
+			),
+		);
+		return text;
+	}
 
-  return match[1];
+	return match[1];
 }
 
 export default SearchToolbar;

app/javascript/wardrobe-2020/WardrobePage/WardrobePageLayout.js

@@ -3,65 +3,65 @@ import { Box, Grid, useColorModeValue, useToken } from "@chakra-ui/react";
 import { useCommonStyles } from "../util";
 
 function WardrobePageLayout({
-  previewAndControls = null,
-  itemsAndMaybeSearchPanel = null,
-  searchFooter = null,
+	previewAndControls = null,
+	itemsAndMaybeSearchPanel = null,
+	searchFooter = null,
 }) {
-  const itemsAndSearchBackground = useColorModeValue("white", "gray.900");
-  const searchBackground = useCommonStyles().bodyBackground;
-  const searchShadowColorValue = useToken("colors", "gray.400");
+	const itemsAndSearchBackground = useColorModeValue("white", "gray.900");
+	const searchBackground = useCommonStyles().bodyBackground;
+	const searchShadowColorValue = useToken("colors", "gray.400");
 
-  return (
-    <Box
-      position="absolute"
-      top="0"
-      bottom="0"
-      left="0"
-      right="0"
-      // Create a stacking context, so that our drawers and modals don't fight
-      // with the z-indexes in here!
-      zIndex="0"
-    >
-      <Grid
-        templateAreas={{
-          base: `"previewAndControls"
+	return (
+		<Box
+			position="absolute"
+			top="0"
+			bottom="0"
+			left="0"
+			right="0"
+			// Create a stacking context, so that our drawers and modals don't fight
+			// with the z-indexes in here!
+			zIndex="0"
+		>
+			<Grid
+				templateAreas={{
+					base: `"previewAndControls"
                  "itemsAndMaybeSearchPanel"`,
-          md: `"previewAndControls itemsAndMaybeSearchPanel"
+					md: `"previewAndControls itemsAndMaybeSearchPanel"
                "searchFooter searchFooter"`,
-        }}
-        templateRows={{
-          base: "minmax(100px, 45%) minmax(300px, 55%)",
-          md: "minmax(300px, 1fr) auto",
-        }}
-        templateColumns={{
-          base: "100%",
-          md: "50% 50%",
-        }}
-        height="100%"
-        width="100%"
-      >
-        <Box
-          gridArea="previewAndControls"
-          bg="gray.900"
-          color="gray.50"
-          position="relative"
-        >
-          {previewAndControls}
-        </Box>
-        <Box gridArea="itemsAndMaybeSearchPanel" bg={itemsAndSearchBackground}>
-          {itemsAndMaybeSearchPanel}
-        </Box>
-        <Box
-          gridArea="searchFooter"
-          bg={searchBackground}
-          boxShadow={`0 0 8px ${searchShadowColorValue}`}
-          display={{ base: "none", md: "block" }}
-        >
-          {searchFooter}
-        </Box>
-      </Grid>
-    </Box>
-  );
+				}}
+				templateRows={{
+					base: "minmax(100px, 45%) minmax(300px, 55%)",
+					md: "minmax(300px, 1fr) auto",
+				}}
+				templateColumns={{
+					base: "100%",
+					md: "50% 50%",
+				}}
+				height="100%"
+				width="100%"
+			>
+				<Box
+					gridArea="previewAndControls"
+					bg="gray.900"
+					color="gray.50"
+					position="relative"
+				>
+					{previewAndControls}
+				</Box>
+				<Box gridArea="itemsAndMaybeSearchPanel" bg={itemsAndSearchBackground}>
+					{itemsAndMaybeSearchPanel}
+				</Box>
+				<Box
+					gridArea="searchFooter"
+					bg={searchBackground}
+					boxShadow={`0 0 8px ${searchShadowColorValue}`}
+					display={{ base: "none", md: "block" }}
+				>
+					{searchFooter}
+				</Box>
+			</Grid>
+		</Box>
+	);
 }
 
 export default WardrobePageLayout;

app/javascript/wardrobe-2020/WardrobePage/WardrobePreviewAndControls.js

@@ -11,43 +11,43 @@ import { loadable, MajorErrorMessage, TestErrorSender } from "../util";
 const OutfitControls = loadable(() => import("./OutfitControls"));
 
 function WardrobePreviewAndControls({
-  isLoading,
-  outfitState,
-  dispatchToOutfit,
+	isLoading,
+	outfitState,
+	dispatchToOutfit,
 }) {
-  // Whether the current outfit preview has animations. Determines whether we
-  // show the play/pause button.
-  const [hasAnimations, setHasAnimations] = React.useState(false);
+	// Whether the current outfit preview has animations. Determines whether we
+	// show the play/pause button.
+	const [hasAnimations, setHasAnimations] = React.useState(false);
 
-  const { appearance, preview } = useOutfitPreview({
-    isLoading: isLoading,
-    speciesId: outfitState.speciesId,
-    colorId: outfitState.colorId,
-    pose: outfitState.pose,
-    altStyleId: outfitState.altStyleId,
-    appearanceId: outfitState.appearanceId,
-    wornItemIds: outfitState.wornItemIds,
-    onChangeHasAnimations: setHasAnimations,
-    placeholder: <OutfitThumbnailIfCached outfitId={outfitState.id} />,
-    "data-test-id": "wardrobe-outfit-preview",
-  });
+	const { appearance, preview } = useOutfitPreview({
+		isLoading: isLoading,
+		speciesId: outfitState.speciesId,
+		colorId: outfitState.colorId,
+		pose: outfitState.pose,
+		altStyleId: outfitState.altStyleId,
+		appearanceId: outfitState.appearanceId,
+		wornItemIds: outfitState.wornItemIds,
+		onChangeHasAnimations: setHasAnimations,
+		placeholder: <OutfitThumbnailIfCached outfitId={outfitState.id} />,
+		"data-test-id": "wardrobe-outfit-preview",
+	});
 
-  return (
-    <Sentry.ErrorBoundary fallback={MajorErrorMessage}>
-      <TestErrorSender />
-      <Center position="absolute" top="0" bottom="0" left="0" right="0">
-        <DarkMode>{preview}</DarkMode>
-      </Center>
-      <Box position="absolute" top="0" bottom="0" left="0" right="0">
-        <OutfitControls
-          outfitState={outfitState}
-          dispatchToOutfit={dispatchToOutfit}
-          showAnimationControls={hasAnimations}
-          appearance={appearance}
-        />
-      </Box>
-    </Sentry.ErrorBoundary>
-  );
+	return (
+		<Sentry.ErrorBoundary fallback={MajorErrorMessage}>
+			<TestErrorSender />
+			<Center position="absolute" top="0" bottom="0" left="0" right="0">
+				<DarkMode>{preview}</DarkMode>
+			</Center>
+			<Box position="absolute" top="0" bottom="0" left="0" right="0">
+				<OutfitControls
+					outfitState={outfitState}
+					dispatchToOutfit={dispatchToOutfit}
+					showAnimationControls={hasAnimations}
+					appearance={appearance}
+				/>
+			</Box>
+		</Sentry.ErrorBoundary>
+	);
 }
 
 /**
@@ -61,40 +61,40 @@ function WardrobePreviewAndControls({
  * like usual!
  */
 function OutfitThumbnailIfCached({ outfitId }) {
-  const { data } = useQuery(
-    gql`
-      query OutfitThumbnailIfCached($outfitId: ID!) {
-        outfit(id: $outfitId) {
-          id
-          updatedAt
-        }
-      }
-    `,
-    {
-      variables: {
-        outfitId,
-      },
-      skip: outfitId == null,
-      fetchPolicy: "cache-only",
-      onError: (e) => console.error(e),
-    },
-  );
+	const { data } = useQuery(
+		gql`
+			query OutfitThumbnailIfCached($outfitId: ID!) {
+				outfit(id: $outfitId) {
+					id
+					updatedAt
+				}
+			}
+		`,
+		{
+			variables: {
+				outfitId,
+			},
+			skip: outfitId == null,
+			fetchPolicy: "cache-only",
+			onError: (e) => console.error(e),
+		},
+	);
 
-  if (!data?.outfit) {
-    return null;
-  }
+	if (!data?.outfit) {
+		return null;
+	}
 
-  return (
-    <OutfitThumbnail
-      outfitId={data.outfit.id}
-      updatedAt={data.outfit.updatedAt}
-      alt=""
-      objectFit="contain"
-      width="100%"
-      height="100%"
-      filter="blur(2px)"
-    />
-  );
+	return (
+		<OutfitThumbnail
+			outfitId={data.outfit.id}
+			updatedAt={data.outfit.updatedAt}
+			alt=""
+			objectFit="contain"
+			width="100%"
+			height="100%"
+			filter="blur(2px)"
+		/>
+	);
 }
 
 export default WardrobePreviewAndControls;