Add readme with light setup instructions; minor UI tweaks (#5814)

* Add readme with light setup instructions; tweak ui

These are very minor changes that cover a few issues:

- WebUI Peer list too narrow #4209

On very small screens (for-phone-only), we modify width on some fields for less overlap. But we also truncate using `text-overflow: ellipsis` and `overflow-x: hidden`.

- properly style up/down speed icons

Moved SVG contents into index.html so we can make these style changes based on the `prefers-color-scheme` media query.

I also set a min-width, text-align: right on the download/upload label so they aren't shifting when going from 1 kB/s to 800 Mb/s.

- Add README for `web` directory

It made sense to add some super simple getting-started instructions for the directory.

- Limit input width in Add dialog of Web #5639

Add a width to the open-torrent file input, but also increase the modal dialog container size.

* Add bookmarklet for anonymizing screenshots

I see a lot of blurring going on in screenshots for issues and PRs, so this is a quick little bookmarklet trick to add lorem ipsum text to torrent-names.

web/README

@@ -0,0 +1,19 @@
+# Transmission Web Client
+
+A web interface is built into all Transmission flavors, enabling them to be controlled remotely.
+
+## Developing locally
+
+First, in this web directory, run `npm i` to install all dependencies. (You’ll need to have node and npm installed, of course.)
+
+Run `npm run dev` to compile the source javascript files into a bundle, then navigate to [localhost:9000](http://localhost:9000/).
+
+Webpack will automatically compile on save, so you should see any changes reflected immediately.
+
+## Anonymizing your data for screenshots
+
+Use this bookmarklet to anonymize your torrent names before submitting a screenshot:
+
+`javascript:void%20function(){const%20a=document.getElementsByClassName(%22torrent-name%22);for(const%20b%20of%20a)console.log(b),b.textContent=%22Lorem%20ipsum%20dolor%20sit%20amet.iso%22}();`
+
+You’ll typically have about 3 seconds before the next batch of RPC updates overwrite the text content of any currently-downloading files.

web/assets/css/transmission-app.scss

@@ -390,23 +390,31 @@ $toolbar-height: $toolbar-height-number * 1px;
   }
 }
 
-$speed-icon-size: 12px;
+$speed-icon-size: 20px;
 
 .speed-up-icon {
-  background-image: url($image-chevron-up);
+  fill: var(--color-fg-primary);
-  background-repeat: no-repeat;
+  margin: 0 auto;
-  background-size: $speed-icon-size $speed-icon-size;
+
-  height: $speed-icon-size;
+  svg {
     width: $speed-icon-size;
   }
+}
 
 .speed-dn-icon {
-  background-image: url($image-chevron-dn);
+  fill: var(--color-fg-primary);
-  background-repeat: no-repeat;
+  margin: 0 auto;
-  background-size: $speed-icon-size $speed-icon-size;
+
-  height: $speed-icon-size;
+  svg {
     width: $speed-icon-size;
   }
+}
+
+#speed-dn-label,
+#speed-up-label {
+  width: 70px;
+  text-align: right;
+}
 
 /// TORRENT CONTAINER
 
@@ -1238,6 +1246,10 @@ $video-image: '../img/film.svg';
 
   .percent-done {
     width: 10%;
+
+    @include for-phone-only {
+      width: 12%;
+    }
   }
 
   .speed-down,
@@ -1247,17 +1259,21 @@ $video-image: '../img/film.svg';
 
   .peer-address {
     width: 25%;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+
+    @include for-phone-only {
+      text-align: left;
+      width: 20%;
+    }
   }
 
   .peer-app-name {
     overflow-x: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    @include for-phone-only {
-      display: none;
-    }
     @include for-tablet-portrait-up {
-      width: 25%;
+      width: 20%;
     }
   }
 
@@ -1539,7 +1555,7 @@ $logo-size: 64px;
 }
 @include for-tablet-portrait-up {
   .dialog-container {
-    min-width: 400px;
+    min-width: 500px;
     position: absolute;
     top: $popup-top * 2;
   }
@@ -1682,6 +1698,11 @@ dialog {
   #auto-start-label {
     margin-left: 5px;
   }
+
+  input[type='file'] {
+    width: 100%;
+    box-sizing: border-box;
+  }
 }
 
 /// HOTKEYS DIALOG

web/public_html/index.html

@@ -200,9 +200,39 @@
         <input type="search" id="torrent-search" placeholder="Filter" />
         <span id="filter-count">&nbsp;</span>
         <span class="flex"></span>
-        <div class="speed-dn-icon"></div>
+        <div class="speed-dn-icon">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="feather feather-chevron-down"
+          >
+            <polyline points="6 9 12 15 18 9"></polyline>
+          </svg>
+        </div>
         <div id="speed-dn-label"></div>
-        <div class="speed-up-icon"></div>
+        <div class="speed-up-icon">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="feather feather-chevron-up"
+          >
+            <polyline points="18 15 12 9 6 15"></polyline>
+          </svg>
+        </div>
         <div id="speed-up-label"></div>
       </header>