Refresh web interface across desktop and mobile (#3985)

* Add macOS section to Web-Interface docs - Add minimal steps to enable web interface on macOS - Clean up README.md with some markdown linting. * Updating and modernizing web interface, colors, icons In general: - increase spacing and decrease font sizes in most inspectors (so far) - replace icons with emoji. may not be the way to go in the end * update toolbar icon sizes to adjust for differences * Switch from icons to buttons, other minor color changes 1. Add 'warn' class to dangerous actions 2. Add 'table-row' helper to overflow menu 3. Use text instead of icons for this new tab style * Update icons using feathericons.com * Rename files, replace some SVG and optimize PNG * Remove more unused variables * Update index.html to reflect new icons * More minor svg changes; delete old images * Updated build output * Remove icons, add new feather svg icons Build is now sub-200 KB
2022-10-21 10:22:59 -07:00 · 2022-10-21 10:22:59 -07:00 · 6187cfd67b
parent da27c3d18d
commit 6187cfd67b
58 changed files with 1837 additions and 1645 deletions
--- a/docs/Editing-Configuration-Files.md
+++ b/docs/Editing-Configuration-Files.md
@ -33,10 +33,12 @@ Here is a sample of the three basic types: respectively Boolean, Number and Stri

 ### Options
 #### IP Announce
+
 * **announce-ip:** String (default = "") Alternative IP address to announce to tracker.
 * **announce-ip-enabled:** Boolean (default = false) When enabled **announce-ip** value is used instead of client's address visible to tracker for announcement requests.

 #### Bandwidth
+
 * **alt-speed-enabled:** Boolean (default = false, aka 'Turtle Mode')
   _Note: Clicking the "Turtle" in the GUI when the [scheduler](#Scheduling) is enabled, will only temporarily remove the scheduled limit until the next cycle._
 * **alt-speed-up:** Number (KB/s, default = 50)
@ -48,10 +50,12 @@ Here is a sample of the three basic types: respectively Boolean, Number and Stri
 * **upload-slots-per-torrent:** Number (default = 14)

 #### [Blocklists](./Blocklists.md)
+
 * **blocklist-url:** String (default = https://www.example.com/blocklist)
 * **blocklist-enabled:** Boolean (default = false)

 #### [Files and Locations](./ConfigFiles.md)
+
 * **download-dir:** String (default = [default locations](Configuration-Files.md#Locations))
 * **incomplete-dir:** String (default = [default locations](Configuration-Files.md#Locations)) Directory to keep files in until torrent is complete.
 * **incomplete-dir-enabled:** Boolean (default = false) When enabled, new torrents will download the files to **incomplete-dir**. When complete, the files will be moved to **download-dir**.
--- a/docs/Web-Interface.md
+++ b/docs/Web-Interface.md
@ -1,8 +1,12 @@
+# Web Interface
+
 A web interface is built into all Transmission flavors, enabling them to be controlled remotely.

-## Enabling the web interface ##
-### 1. For Windows ###
-Open Transmission Qt. Go to Edit menu   
+## Enabling the web interface
+
+### 1. For Windows
+
+Open Transmission Qt. Go to Edit menu

 ![image](resources/QT-Enable-Web-Win-1.png)

@ -16,13 +20,13 @@ Click on "Allow remote access" checkbox. If password protection is required, cli

 Click "Close" button. Done!

+### 2. For Linux

-### 2. For Linux ###
 Open Transmission. Go to Edit menu and click "Preferences".

 ![Screenshot_2022-07-20_23-47-00](resources/QT-Enable-Web-Lnx-1.png)

-Then go to tab "Remote"
+Then go to tab "Remote".

 ![Screenshot_2022-07-20_23-49-18](resources/QT-Enable-Web-Lnx-2.png)

@ -32,13 +36,26 @@ Click on "Allow remote access" checkbox. If password protection is required, cli

 Click "Close" button. Done!

-## Accessing the web interface ##
+### 3. For macOS
+
+Open Transmission. Go to Transmission in the menu bar and click "Settings".
+
+![Selecting Settings in Transmission menu bar item](resources/mac-enable-web-1.png)
+
+Click on "Remote" tab.
+
+![Selecting the Remote tab in Transmission Settings window](resources/mac-enable-web-2.png)
+
+## Accessing the web interface
+
 Once enabled, open a web browser and direct it to http://ip_address_of_machine_running_transmission:9091/
 If the web browser and the Transmission daemon are on the machine you can use http://127.0.0.1:9091/
 9091 is the default remote control port specified in [Transmission configuration](Editing-Configuration-Files.md) or in preferences of [Windows](https://github.com/transmission/transmission/blob/main/docs/Web-Interface.md#1-for-windows) or [Linux](https://github.com/transmission/transmission/blob/main/docs/Web-Interface.md#2-for-linux) client.

-## Web Interface Overview ##
-### 1. Main Screen ###
+## Web Interface Overview
+
+### 1. Main Screen
+
 ![image](resources/WI-main-screen.png)

 | Number On Picture | Description                 |
@ -48,7 +65,8 @@ If the web browser and the Transmission daemon are on the machine you can use ht
 | 3                 | Info about selected torrent |
 | 4                 | Transmission control panel  |

-### 2. Torrent management panel ###
+### 2. Torrent management panel
+
 ![image](resources/WI-torrent-management-panel.png)

 | Number On Picture | Description                       |
@ -61,19 +79,21 @@ If the web browser and the Transmission daemon are on the machine you can use ht
 | 6                 | Pause all torrents                |
 | 7                 | View info about selected torrents |

-#### 2.1 Adding torrent ####
+#### 2.1 Adding torrent
+
 ![image](resources/WI-adding-torrent.png)

-| Number On Picture | Description                                       |
-| ----------------- | ------------------------------------------------- |
-| 1                 | Button to select a torrent file to upload         |
-| 2                 | Or enter an URL to torrent                        |
-| 3                 | Enter the path where the file will be downloaded  |
-| 4                 | Autostart torrent download after adding           |
-| 5                 | Cancel adding                                     |
-| 6                 | Add selected torrent to Transmission              |
+| Number On Picture | Description                                      |
+| ----------------- | ------------------------------------------------ |
+| 1                 | Button to select a torrent file to upload        |
+| 2                 | Or enter an URL to torrent                       |
+| 3                 | Enter the path where the file will be downloaded |
+| 4                 | Autostart torrent download after adding          |
+| 5                 | Cancel adding                                    |
+| 6                 | Add selected torrent to Transmission             |
+
+### 3. Display filters panel

-### 3. Display filters panel ###
 ![image](resources/WI-display-filters-panel.png)

 | Number On Picture | Description                                           |
@ -85,12 +105,13 @@ If the web browser and the Transmission daemon are on the machine you can use ht
 | 5                 | Downloading speed                                     |
 | 6                 | Uploading speed                                       |

-### 4. List of added torrents ###
+### 4. List of added torrents
+
 ![image](resources/WI-list-of-added-torrents.png)

 | Number On Picture | Description                                                                     |
 | ----------------- | ------------------------------------------------------------------------------- |
-| 1                 | Name of torrent file                                                            | 
+| 1                 | Name of torrent file                                                            |
 | 2                 | In current case: the torrent is downloading from 0 peers of 0 possible          |
 | 3                 | Download and upload speeds of current torrent                                   |
 | 4                 | In current case: the torrent is downloaded on 0 bytes of 3.65GB. This is 0.00 % |
@ -98,34 +119,36 @@ If the web browser and the Transmission daemon are on the machine you can use ht
 | 6                 | Progress bar showing the current progress in downloading the torrent            |
 | 7                 | Pause selected torrent                                                          |

-### 5. Torrent inspector ###
+### 5. Torrent inspector
+
 ![image](resources/WI-torrent-inspector.png)

-| Number On Picture | Description                                                                                                                                |
-| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| 1                 | Name of torrent                                                                                                                            | 
-| 2                 | In current case: Transmission has 3.65 GB of file data from the total volume of downloaded files, which is 100%                           |
-| 3                 | In current case: the file is available (written to disk) at 100%                                                                           |
-| 4                 | In current case: other peers have downloaded 111.2MB from you                                                                              |
-| 5                 | In current case: in total, Transmission downloaded 3.68 GB (in this case 2.35MB were corrupted, so Transmission had to re-download another 2.35MB)                                                                                                                                                          |
-| 6                 | The current state of the torrent                                                                                                           |
-| 7                 | In current case: 4 days have passed since the torrent download was started                                                                 |
-| 8                 | The remaining time until the torrent is fully downloaded                                                                                   |
-| 9                 | In current case: The last torrent activity (download or upload) was 1 hour 53 minutes ago                                                  |
-| 10                | If an error occurs, its details will be displayed in this field                                                                            |
-| 11                | In current case: The total size of the torrent is 3.65 GB, which is 13,943 pieces of 256KB                                                 |
-| 12                | The path to the folder where the torrent is being downloaded                                                                               |
-| 13                | Torrent hash                                                                                                                               |
-| 14                | Private or public torrent                                                                                                                  |
-| 15                | A field indicating which program created the torrent and at what time                                                                      |
-| 16                | Comment on the torrent, usually a link to the site from where it was downloaded   
+| Number On Picture | Description                                                                                                                                        |
+| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 1                 | Name of torrent                                                                                                                                    |
+| 2                 | In current case: Transmission has 3.65 GB of file data from the total volume of downloaded files, which is 100%                                    |
+| 3                 | In current case: the file is available (written to disk) at 100%                                                                                   |
+| 4                 | In current case: other peers have downloaded 111.2MB from you                                                                                      |
+| 5                 | In current case: in total, Transmission downloaded 3.68 GB (in this case 2.35MB were corrupted, so Transmission had to re-download another 2.35MB) |
+| 6                 | The current state of the torrent                                                                                                                   |
+| 7                 | In current case: 4 days have passed since the torrent download was started                                                                         |
+| 8                 | The remaining time until the torrent is fully downloaded                                                                                           |
+| 9                 | In current case: The last torrent activity (download or upload) was 1 hour 53 minutes ago                                                          |
+| 10                | If an error occurs, its details will be displayed in this field                                                                                    |
+| 11                | In current case: The total size of the torrent is 3.65 GB, which is 13,943 pieces of 256KB                                                         |
+| 12                | The path to the folder where the torrent is being downloaded                                                                                       |
+| 13                | Torrent hash                                                                                                                                       |
+| 14                | Private or public torrent                                                                                                                          |
+| 15                | A field indicating which program created the torrent and at what time                                                                              |
+| 16                | Comment on the torrent, usually a link to the site from where it was downloaded                                                                    |
+
+#### 5.1 Torrent inspector peers tab

-#### 5.1 Torrent inspector peers tab ####
 ![image](resources/WI-torrent-inspector-peers-tab.png)

 | Number On Picture | Description                                                     |
 | ----------------- | --------------------------------------------------------------- |
-| 1                 | Name of torrent                                                 | 
+| 1                 | Name of torrent                                                 |
 | 2                 | Upload speed column                                             |
 | 3                 | Download speed column                                           |
 | 4                 | A column showing how many percent of the file data the peer has |
@ -133,12 +156,13 @@ If the web browser and the Transmission daemon are on the machine you can use ht
 | 6                 | Сolumn showing the IP address of the peer                       |
 | 7                 | Column showing the Bittorrent client of the feast               |

-#### 5.1 Torrent inspector trackers tab ####
+#### 5.1 Torrent inspector trackers tab
+
 ![image](resources/WI-torrent-inspector-trackers-tab.png)

 | Number On Picture | Description                                                                       |
 | ----------------- | --------------------------------------------------------------------------------- |
-| 1                 | URL of tracker                                                                    | 
+| 1                 | URL of tracker                                                                    |
 | 2                 | Date and time of the last Transmission announcement about yourself on the tracker |
 | 3                 | Time until the next announcement about yourself                                   |
 | 4                 | The time of the last receive of the list of tracker members                       |
@ -146,15 +170,15 @@ If the web browser and the Transmission daemon are on the machine you can use ht
 | 6                 | Number of leechers - those who want to download file                              |
 | 7                 | Number of current downloads                                                       |

-#### 5.1 Torrent inspector files tab ####
+#### 5.1 Torrent inspector files tab
+
 ![image](resources/WI-torrent-inspector-files-tab.png)

 | Number On Picture | Description                                                                                           |
 | ----------------- | ----------------------------------------------------------------------------------------------------- |
-| 1                 | The name of the file marked for download                                                              | 
+| 1                 | The name of the file marked for download                                                              |
 | 2                 | This checkbox controls the file upload. If you uncheck it, the file will not load                     |
 | 3                 | In current case: the torrent is downloaded on 2.58GB of 3.65GB. This is 70.6%                         |
 | 4                 | With this button you can change downloading priority of this file to low                              |
 | 5                 | With this button you can change downloading priority of this file to medium. This priority is default |
 | 6                 | With this button you can change downloading priority of this file to high                             |
-  
--- a/docs/resources/QT-Enable-Web-Win-1.png
+++ b/docs/resources/QT-Enable-Web-Win-1.png
--- a/docs/resources/mac-enable-web-1.png
+++ b/docs/resources/mac-enable-web-1.png
--- a/docs/resources/mac-enable-web-2.png
+++ b/docs/resources/mac-enable-web-2.png
--- a/libtransmission/transmission.h
+++ b/libtransmission/transmission.h
@ -334,7 +334,7 @@ uint16_t tr_sessionGetRPCPort(tr_session const* session);
 * The whitelist is a comma-separated list of dotted-quad IP addresses
 * to be allowed. Wildmat notation is supported, meaning that
 * '?' is interpreted as a single-character wildcard and
- * '*' is interprted as a multi-character wildcard.
+ * '*' is interpreted as a multi-character wildcard.
 */
 void tr_sessionSetRPCWhitelist(tr_session* session, char const* whitelist);

--- a/web/.eslintrc.js
+++ b/web/.eslintrc.js
@ -126,5 +126,6 @@ module.exports = {
    "unicorn/no-reduce": "off",
    "unicorn/no-unused-properties": "off",
    "unicorn/prevent-abbreviations": "off",
+    "unicorn/switch-case-braces": "off"
  }
 };
--- a/web/CMakeLists.txt
+++ b/web/CMakeLists.txt
@ -29,39 +29,22 @@ set(TRWEB_SRCS

 set(TRWEB_IMGS
  assets/img/analytics.svg
-  assets/img/application-x-executable.png
-  assets/img/audio-x-generic.png
-  assets/img/blue-turtle.png
-  assets/img/checkered-flag.svg
+  assets/img/modern-tortoise-blue.png
+  assets/img/modern-tortoise.png
  assets/img/chevron-down.svg
  assets/img/chevron-up.svg
  assets/img/diagram-3-fill.svg
-  assets/img/files.svg
-  assets/img/folder.png
-  assets/img/font-x-generic.png
-  assets/img/gear-fill.svg
  assets/img/horizontal-rule.svg
-  assets/img/image-x-generic.png
  assets/img/lock-fill.svg
  assets/img/logo.png
-  assets/img/package-x-generic.png
  assets/img/pause-circle-active.svg
  assets/img/pause-circle-idle.svg
  assets/img/play-circle-active.svg
  assets/img/play-circle-idle.svg
  assets/img/router.svg
-  assets/img/search.svg
  assets/img/team.svg
-  assets/img/text-x-generic.png
  assets/img/three-dots-vertical.svg
-  assets/img/toolbar-close.png
-  assets/img/toolbar-folder.png
-  assets/img/toolbar-info.png
-  assets/img/toolbar-pause.png
-  assets/img/toolbar-start.png
-  assets/img/turtle.png
  assets/img/up-and-down-arrows.svg
-  assets/img/video-x-generic.png
 )

 add_custom_target(
--- a/web/assets/css/transmission-app.scss
+++ b/web/assets/css/transmission-app.scss
--- a/web/assets/img/README.md
+++ b/web/assets/img/README.md
@ -1,70 +1,55 @@
-
 # GOT BETTER ICONS? PULL REQUESTS WELCOMED

-## Material Icons
+## [Material Icons](https://github.com/google/material-design-icons/)

-https://github.com/google/material-design-icons/
-https://material.io/resources/icons/
+[Material icons overview @ material.io](https://m3.material.io/styles/icons/overview)

-* analytics.svg
-* horizontal-rule.svg
-* pause-circle-active.svg (pause-circle-filled.svg)
-* pause-circle-idle.svg (pause-circle-filled.svg)
-* play-circle-active.svg (play-circle-filled.svg)
-* play-circle-idle.svg (play-circle-filled.svg)
-* router.svg
+license: Apache-2.0 license
+
+- horizontal-rule.svg
+- pause-circle-active.svg
+- pause-circle-idle.svg
+- play-circle-active.svg
+- play-circle-idle.svg
+- router.svg
+
+## [Feather Icons](https://github.com/feathericons/feather)
+
+license: MIT
+
+- index.html nav button svg
+- chevron-down.svg
+- chevron-up.svg
+
+## Inspector 'i' icon
+
+- Created in OmniGraffle by [https://github.com/dareiff]

 ## Bootstrap Icons

-https://github.com/twbs/icons
-https://icons.getbootstrap.com/icons/
+[https://github.com/twbs/icons]
+[https://icons.getbootstrap.com/icons/]
 license: MIT

-* chevron-down.svg
-* chevron-up.svg
-* files.svg
-* gear-fill.svg
-* lock-fill.svg
-* magnet.svg
-* search.svg
-* three-dots-vertical.svg
-
-## Adwaita Icons
-
-https://gitlab.gnome.org/GNOME/adwaita-icon-theme
-license: CC-BY-SA 3.0
-
-* audio-x-generic.png
-* folder.png
-* font-x-generic.png
-* image-x-generic.png
-* package-x-generic.png
-* text-x-generic.png
-* video-x-generic.png
-
+- lock-fill.svg
+- magnet.svg

 ## SVG Repo

 https://www.svgrepo.com/
 license: CC0

-* checkered-flag.svg
-* cloud-networking.svg
-* globa-server.svg
-* team.svg
-* top-speed.svg (license: MIT)
-* up-and-down-arrows.svg
-
+- up-and-down-arrows.svg

 ## Custom Icons

 license: MIT

-* blue-turtle.png
-* logo.png
-* toolbar-close.png
-* toolbar-folder.png
-* toolbar-info.png
-* toolbar-pause.png
-* toolbar-start.png
-* turtle.png
+- logo.png
+- toolbar-close.png
+- toolbar-folder.png
+- toolbar-info.png
+- toolbar-pause.png
+- toolbar-start.png
+- modern-tortoise.png
+- modern-tortoise-blue.png
--- a/web/assets/img/analytics.svg
+++ b/web/assets/img/analytics.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-5h2v5zm4 0h-2v-3h2v3zm0-5h-2v-2h2v2zm4 5h-2V7h2v10z"/></svg>
--- a/web/assets/img/application-x-executable.png
+++ b/web/assets/img/application-x-executable.png
--- a/web/assets/img/audio-x-generic.png
+++ b/web/assets/img/audio-x-generic.png
--- a/web/assets/img/blue-turtle.png
+++ b/web/assets/img/blue-turtle.png
--- a/web/assets/img/box.svg
+++ b/web/assets/img/box.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-box">
+    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
+    <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
+    <line x1="12" y1="22.08" x2="12" y2="12"></line>
+</svg>
--- a/web/assets/img/checkered-flag.svg
+++ b/web/assets/img/checkered-flag.svg
@ -1,62 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="453.405px" height="453.405px" viewBox="0 0 453.405 453.405" style="enable-background:new 0 0 453.405 453.405;"
-	 xml:space="preserve">
-<g>
-	<g>
-		<path d="M382.08,60.394c-26.324-4.534-53.444-0.845-79.764,1.751c-26.223,2.587-53.604,5.753-79.585-0.397
-			c-30.592-7.241-49.945-27.294-64.216-54.464c-3.935,10.646-7.869,21.291-11.803,31.938
-			c-25.74,69.646-51.479,139.292-77.218,208.938L0,436.203l26.838,9.919l62.541-169.227c11.607,12.383,25.937,21.375,44.333,25.729
-			c25.979,6.146,53.363,2.986,79.584,0.398c26.318-2.601,53.441-6.287,79.765-1.752c33.826,5.826,55.682,26.086,71.323,55.871
-			c29.677-80.291,59.348-160.583,89.021-240.876C437.761,86.479,415.911,66.222,382.08,60.394z M385.379,203.349
-			c-13.234-11.169-27.441-18.638-44.57-21.931c-5.715,15.458-11.428,30.916-17.141,46.374c17.131,3.295,31.335,10.764,44.572,21.932
-			c-5.239,14.176-10.479,28.353-15.717,42.526c-13.234-11.168-27.443-18.642-44.573-21.93c5.239-14.177,10.479-28.353,15.718-42.528
-			c-17.442-2.813-34.473-2.797-52.072-1.72c-5.238,14.176-10.479,28.353-15.717,42.528c-18.21,1.471-36.358,3.56-54.567,5.028
-			c5.238-14.178,10.478-28.353,15.716-42.526c-17.599,1.078-34.631,1.096-52.073-1.719c-5.239,14.176-10.478,28.352-15.717,42.526
-			c-17.128-3.29-31.341-10.763-44.572-21.933c5.238-14.174,10.478-28.351,15.716-42.525c13.236,11.17,27.442,18.64,44.573,21.932
-			c5.712-15.458,11.427-30.918,17.139-46.376c-17.13-3.285-31.338-10.766-44.573-21.93c5.714-15.46,11.427-30.92,17.14-46.378
-			c13.236,11.173,27.442,18.635,44.572,21.933c5.239-14.176,10.478-28.351,15.717-42.525c17.442,2.813,34.476,2.797,52.073,1.717
-			c-5.238,14.175-10.478,28.351-15.717,42.526c18.209-1.471,36.357-3.558,54.567-5.028c5.238-14.175,10.479-28.351,15.717-42.527
-			c17.601-1.078,34.629-1.095,52.072,1.719c-5.239,14.176-10.478,28.351-15.717,42.528c17.131,3.294,31.335,10.761,44.573,21.93
-			C396.806,172.431,391.095,187.891,385.379,203.349z"/>
-		<path d="M234.167,184.726c-5.713,15.459-11.426,30.917-17.14,46.376c18.21-1.472,36.359-3.56,54.568-5.03
-			c5.713-15.457,11.426-30.916,17.139-46.374C270.523,181.169,252.376,183.257,234.167,184.726z"/>
-		<path d="M234.167,184.726c5.714-15.458,11.427-30.918,17.14-46.375c-17.604,1.075-34.629,1.093-52.075-1.718
-			c-5.713,15.458-11.426,30.917-17.139,46.375C199.536,185.824,216.566,185.807,234.167,184.726z"/>
-		<path d="M305.873,133.323c-5.713,15.458-11.426,30.916-17.139,46.375c17.601-1.075,34.629-1.093,52.073,1.72
-			c5.712-15.458,11.426-30.917,17.138-46.375C340.503,132.229,323.474,132.243,305.873,133.323z"/>
-	</g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>
--- a/web/assets/img/chevron-down.svg
+++ b/web/assets/img/chevron-down.svg
@ -1,3 +1,3 @@
-<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
+<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>
--- a/web/assets/img/chevron-up.svg
+++ b/web/assets/img/chevron-up.svg
@ -1,3 +1,3 @@
-<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
+<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>
--- a/web/assets/img/diagram-3-fill.svg
+++ b/web/assets/img/diagram-3-fill.svg
@ -1,3 +1,4 @@
-<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-diagram-3-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-diagram-3-fill" fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5v-1zm-6 8A1.5 1.5 0 0 1 1.5 10h1A1.5 1.5 0 0 1 4 11.5v1A1.5 1.5 0 0 1 2.5 14h-1A1.5 1.5 0 0 1 0 12.5v-1zm6 0A1.5 1.5 0 0 1 7.5 10h1a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5v-1zm6 0a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5v-1z"/>
 </svg>
--- a/web/assets/img/file-text.svg
+++ b/web/assets/img/file-text.svg
@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+    <polyline points="14 2 14 8 20 8"></polyline>
+    <line x1="16" y1="13" x2="8" y2="13"></line>
+    <line x1="16" y1="17" x2="8" y2="17"></line>
+    <polyline points="10 9 9 9 8 9"></polyline>
+</svg>
--- a/web/assets/img/files.svg
+++ b/web/assets/img/files.svg
@ -1,4 +0,0 @@
-<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-files" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" d="M4 2h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4z"/>
-  <path d="M6 0h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2v-1a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1H4a2 2 0 0 1 2-2z"/>
-</svg>
--- a/web/assets/img/film.svg
+++ b/web/assets/img/film.svg
@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-film">
+    <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect>
+    <line x1="7" y1="2" x2="7" y2="22"></line>
+    <line x1="17" y1="2" x2="17" y2="22"></line>
+    <line x1="2" y1="12" x2="22" y2="12"></line>
+    <line x1="2" y1="7" x2="7" y2="7"></line>
+    <line x1="2" y1="17" x2="7" y2="17"></line>
+    <line x1="17" y1="17" x2="22" y2="17"></line>
+    <line x1="17" y1="7" x2="22" y2="7"></line>
+</svg>
--- a/web/assets/img/folder.png
+++ b/web/assets/img/folder.png
--- a/web/assets/img/folder.svg
+++ b/web/assets/img/folder.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder">
+    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+</svg>
--- a/web/assets/img/font-x-generic.png
+++ b/web/assets/img/font-x-generic.png
--- a/web/assets/img/gear-fill.svg
+++ b/web/assets/img/gear-fill.svg
@ -1,3 +1,4 @@
-<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-gear-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-gear-fill" fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 0 0-5.86 2.929 2.929 0 0 0 0 5.858z"/>
 </svg>
--- a/web/assets/img/horizontal-rule.svg
+++ b/web/assets/img/horizontal-rule.svg
@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" fill-rule="evenodd" height="24" width="24"/><rect fill-rule="evenodd" height="2" width="16" x="4" y="11"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24">
+    <g>
+        <rect fill="none" fill-rule="evenodd" height="24" width="24"/>
+        <rect fill-rule="evenodd" height="2" width="16" x="4" y="11"/>
+    </g>
+</svg>
--- a/web/assets/img/image-x-generic.png
+++ b/web/assets/img/image-x-generic.png
--- a/web/assets/img/image.svg
+++ b/web/assets/img/image.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image">
+    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+    <circle cx="8.5" cy="8.5" r="1.5"></circle>
+    <polyline points="21 15 16 10 5 21"></polyline>
+</svg>
--- a/web/assets/img/lock-fill.svg
+++ b/web/assets/img/lock-fill.svg
@ -1,4 +1,5 @@
-<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-lock-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-lock-fill" fill="#fff"
+  xmlns="http://www.w3.org/2000/svg">
  <path d="M2.5 9a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2V9z"/>
  <path fill-rule="evenodd" d="M4.5 4a3.5 3.5 0 1 1 7 0v3h-1V4a2.5 2.5 0 0 0-5 0v3h-1V4z"/>
 </svg>
--- a/web/assets/img/logo.png
+++ b/web/assets/img/logo.png
--- a/web/assets/img/modern-tortoise-blue.png
+++ b/web/assets/img/modern-tortoise-blue.png
--- a/web/assets/img/modern-tortoise.png
+++ b/web/assets/img/modern-tortoise.png
--- a/web/assets/img/music.svg
+++ b/web/assets/img/music.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-music"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
--- a/web/assets/img/package-x-generic.png
+++ b/web/assets/img/package-x-generic.png
--- a/web/assets/img/package.svg
+++ b/web/assets/img/package.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-package"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
--- a/web/assets/img/team.svg
+++ b/web/assets/img/team.svg
@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="122.699px" height="122.699px" viewBox="0 0 122.699 122.699" style="enable-background:new 0 0 122.699 122.699;"
-	 xml:space="preserve">
-<g>
-	<circle cx="19.5" cy="12.2" r="12.1"/>
-	<path d="M6,66.699h1.2v24c0,3.301,2.7,6,6,6h12.6c3.3,0,6-2.699,6-6V89.3c-1.1-2.101-1.8-4.5-1.8-7v-31.4c0-6.1,3.7-11.4,9-13.7
-		v-2.4c0-3.3-2.7-6-6-6H6c-3.3,0-6,2.7-6,6v25.9C0,64,2.6,66.699,6,66.699z"/>
-	<circle cx="103.3" cy="12.2" r="12.1"/>
-	<path d="M83.699,34.7v2.4c5.301,2.3,9,7.6,9,13.7v31.3c0,2.5-0.6,4.9-1.799,7v1.4c0,3.3,2.699,6,6,6h12.6c3.3,0,6-2.7,6-6v-24
-		h1.199c3.301,0,6-2.7,6-6V34.7c0-3.3-2.699-6-6-6h-27C86.4,28.7,83.699,31.399,83.699,34.7z"/>
-	<path d="M39.1,50.899L39.1,50.899v9.8v21.6c0,3.3,2.7,6,6,6h2.3v28.3c0,3.3,2.7,6,6,6h16.1c3.3,0,6-2.7,6-6v-28.4h2.3
-		c3.3,0,6-2.699,6-6V60.7v-9.8l0,0c0-3.3-2.7-6-6-6H45.1C41.7,44.899,39.1,47.6,39.1,50.899z"/>
-	<circle cx="61.4" cy="26" r="13.9"/>
-</g>
-</svg>
--- a/web/assets/img/text-x-generic.png
+++ b/web/assets/img/text-x-generic.png
--- a/web/assets/img/three-dots-vertical.svg
+++ b/web/assets/img/three-dots-vertical.svg
@ -1,3 +0,0 @@
-<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-three-dots-vertical" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
-</svg>
--- a/web/assets/img/toolbar-close.png
+++ b/web/assets/img/toolbar-close.png
--- a/web/assets/img/toolbar-folder.png
+++ b/web/assets/img/toolbar-folder.png
--- a/web/assets/img/toolbar-info.png
+++ b/web/assets/img/toolbar-info.png
--- a/web/assets/img/toolbar-pause.png
+++ b/web/assets/img/toolbar-pause.png
--- a/web/assets/img/toolbar-start.png
+++ b/web/assets/img/toolbar-start.png
--- a/web/assets/img/turtle.png
+++ b/web/assets/img/turtle.png
--- a/web/assets/img/type.svg
+++ b/web/assets/img/type.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-type"><polyline points="4 7 4 4 20 4 20 7"></polyline><line x1="9" y1="20" x2="15" y2="20"></line><line x1="12" y1="4" x2="12" y2="20"></line></svg>
--- a/web/assets/img/up-and-down-arrows.svg
+++ b/web/assets/img/up-and-down-arrows.svg
@ -1,41 +1,5 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="71.753px" height="71.753px" viewBox="0 0 71.753 71.753" style="enable-background:new 0 0 71.753 71.753;"
-	 xml:space="preserve">
-<g>
+<svg version="1.1" id="Capa_1"
+	xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="71.753px" height="71.753px" viewBox="0 0 71.753 71.753" style="enable-background:new 0 0 71.753 71.753;" xml:space="preserve">
 	<path d="M39.798,20.736H28.172v20.738L11.625,41.47V20.736H0L19.899,0.839L39.798,20.736z M51.855,70.914l19.897-19.896H60.129
 		V30.282l-16.547-0.004v20.74H31.957L51.855,70.914z"/>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
 </svg>
--- a/web/assets/img/video-x-generic.png
+++ b/web/assets/img/video-x-generic.png
--- a/web/package.json
+++ b/web/package.json
@ -18,31 +18,31 @@
    "lint:stylelint:fix": "stylelint --fix assets/css/*scss"
  },
  "devDependencies": {
-    "@babel/core": "^7.18.9",
-    "@babel/eslint-parser": "^7.18.9",
+    "@babel/core": "^7.19.3",
+    "@babel/eslint-parser": "^7.19.1",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@primer/stylelint-config": "^12.6.1",
+    "@primer/stylelint-config": "^12.7.0",
    "css-loader": "^6.7.1",
-    "css-minimizer-webpack-plugin": "^4.0.0",
-    "eslint": "^8.15.0",
-    "eslint-plugin-sonarjs": "^0.14.0",
-    "eslint-plugin-unicorn": "^43.0.2",
+    "css-minimizer-webpack-plugin": "^4.2.1",
+    "eslint": "^8.25.0",
+    "eslint-plugin-sonarjs": "^0.15.0",
+    "eslint-plugin-unicorn": "^44.0.2",
    "file-loader": "^6.2.0",
-    "mini-css-extract-plugin": "^2.6.0",
+    "mini-css-extract-plugin": "^2.6.1",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.7.1",
-    "sass": "^1.54.0",
-    "sass-loader": "^13.0.2",
+    "sass": "^1.55.0",
+    "sass-loader": "^13.1.0",
    "style-loader": "^3.3.1",
-    "stylelint": "^14.9.1",
+    "stylelint": "^14.13.0",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-sass-guidelines": "^9.0.1",
-    "stylelint-config-standard": "^26.0.0",
-    "terser-webpack-plugin": "^5.3.1",
+    "stylelint-config-standard": "^28.0.0",
+    "terser-webpack-plugin": "^5.3.6",
    "webpack": "^5.74.0",
-    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-bundle-analyzer": "^4.6.1",
    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.9.3"
+    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "lodash.isequal": "^4.5.0"
--- a/web/public_html/index.html
+++ b/web/public_html/index.html
@ -16,6 +16,7 @@
    <title>Transmission Web Interface</title>
  </head>
  <body>
+    <div id="app"></div>
    <div class="mainwin">
      <header class="mainwin-toolbar" id="mainwin-toolbar">
        <button
@ -25,7 +26,26 @@
          data-action="open-torrent"
          id="toolbar-open"
          tabindex="0"
-        ></button>
+        >
+          <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-folder-plus toolbar-icon"
+          >
+            <path
+              d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
+            ></path>
+            <line x1="12" y1="11" x2="12" y2="17"></line>
+            <line x1="9" y1="14" x2="15" y2="14"></line>
+          </svg>
+        </button>
        <button
          aria-keyshortcuts="Alt+Delete"
          aria-label="Remove selected torrents"
@ -33,7 +53,27 @@
          data-action="remove-selected-torrents"
          id="toolbar-remove"
          tabindex="0"
-        ></button>
+        >
+          <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-trash-2 toolbar-icon"
+          >
+            <polyline points="3 6 5 6 21 6"></polyline>
+            <path
+              d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+            ></path>
+            <line x1="10" y1="11" x2="10" y2="17"></line>
+            <line x1="14" y1="11" x2="14" y2="17"></line>
+          </svg>
+        </button>
        <div class="toolbar-separator"></div>
        <button
          aria-keyshortcuts="Alt+R"
@ -42,7 +82,22 @@
          data-action="resume-selected-torrents"
          id="toolbar-start"
          tabindex="0"
-        ></button>
+        >
+          <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-play"
+          >
+            <polygon points="5 3 19 12 5 21 5 3"></polygon>
+          </svg>
+        </button>
        <button
          aria-keyshortcuts="Alt+P"
          aria-label="Pause selected torrents"
@ -50,7 +105,23 @@
          data-action="pause-selected-torrents"
          id="toolbar-pause"
          tabindex="0"
-        ></button>
+        >
+          <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-pause"
+          >
+            <rect x="6" y="4" width="4" height="16"></rect>
+            <rect x="14" y="4" width="4" height="16"></rect>
+          </svg>
+        </button>
        <div class="toolbar-separator"></div>
        <button
          aria-keyshortcuts="Alt+I"
@ -59,7 +130,34 @@
          data-action="show-inspector"
          id="toolbar-inspector"
          tabindex="0"
-        ></button>
+        >
+          <svg
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xl="http://www.w3.org/1999/xlink"
+            xmlns:dc="http://purl.org/dc/elements/1.1/"
+            viewBox="-1 -1 26 26"
+            width="26"
+            height="26"
+          >
+            <g fill-opacity="1" stroke="currentColor" fill="none">
+              <circle
+                cx="12"
+                cy="12"
+                r="12.0000191748228"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+              />
+              <path
+                class="inspector-icon"
+                d="M 11.88208 4.883789 C 12.326418 4.883789 12.702391 5.039305 13.01001 5.350342 C 13.317628 5.6613785 13.471436 6.035642 13.471436 6.4731445 C 13.471436 6.910647 13.31592 7.283202 13.004883 7.59082 C 12.693846 7.898439 12.319582 8.052246 11.88208 8.052246 C 11.444578 8.052246 11.072023 7.898439 10.764404 7.59082 C 10.456786 7.283202 10.302979 6.910647 10.302979 6.4731445 C 10.302979 6.035642 10.456786 5.6613785 10.764404 5.350342 C 11.072023 5.039305 11.444578 4.883789 11.88208 4.883789 Z M 13.317627 9.528809 L 13.317627 17.126953 C 13.317627 17.803714 13.39624 18.236083 13.553467 18.424072 C 13.710694 18.612061 14.018308 18.719726 14.476318 18.74707 L 14.476318 19.11621 L 9.298096 19.11621 L 9.298096 18.74707 C 9.721926 18.733398 10.036376 18.610353 10.241455 18.37793 C 10.378175 18.220702 10.446533 17.803714 10.446533 17.126953 L 10.446533 11.52832 C 10.446533 10.851559 10.367921 10.41919 10.210693 10.231201 C 10.053466 10.043212 9.74927 9.935547 9.298096 9.908203 L 9.298096 9.528809 Z"
+                fill="currentColor"
+              />
+            </g>
+          </svg>
+        </button>
        <div class="toolbar-separator"></div>
        <button
          aria-keyshortcuts="Alt+M"
@ -68,7 +166,24 @@
          data-action="show-overflow-menu"
          id="toolbar-overflow"
          tabindex="0"
-        ></button>
+        >
+          <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-menu"
+          >
+            <line x1="3" y1="12" x2="21" y2="12"></line>
+            <line x1="3" y1="6" x2="21" y2="6"></line>
+            <line x1="3" y1="18" x2="21" y2="18"></line>
+          </svg>
+        </button>
      </header>

      <header class="mainwin-filterbar" id="statusbar">
--- a/web/public_html/transmission-app.js
+++ b/web/public_html/transmission-app.js
--- a/web/src/context-menu.js
+++ b/web/src/context-menu.js
@ -49,11 +49,15 @@ export class ContextMenu extends EventTarget {
    root.classList.add('context-menu', 'popup');

    const actions = {};
-    const add_item = (action) => {
+    const add_item = (action, warn = false) => {
      const item = document.createElement('div');
      const text = this.action_manager.text(action);
      item.role = 'menuitem';
-      item.classList.add('context-menuitem');
+      if (warn) {
+        item.classList.add('context-menuitem', 'warning');
+      } else {
+        item.classList.add('context-menuitem');
+      }
      item.dataset.action = action;
      item.textContent = text;
      const keyshortcuts = this.action_manager.keyshortcuts(action);
@ -83,8 +87,8 @@ export class ContextMenu extends EventTarget {
    add_item('move-down');
    add_item('move-bottom');
    add_separator();
-    add_item('remove-selected-torrents');
-    add_item('trash-selected-torrents');
+    add_item('remove-selected-torrents', true);
+    add_item('trash-selected-torrents', true);
    add_separator();
    add_item('verify-selected-torrents');
    add_item('show-move-dialog');
--- a/web/src/inspector.js
+++ b/web/src/inspector.js
@ -9,7 +9,7 @@ import { Torrent } from './torrent.js';
 import {
  OutsideClickListener,
  Utils,
-  createTabsContainer,
+  createTextualTabsContainer,
  setTextContent,
 } from './utils.js';

@ -87,7 +87,7 @@ export class Inspector extends EventTarget {
      setTextContent(lhs, text);
      root.append(lhs);

-      const rhs = document.createElement('label');
+      const rhs = document.createElement('span');
      root.append(rhs);
      return rhs;
    };
@ -181,13 +181,13 @@ export class Inspector extends EventTarget {
      this._updateCurrentPage();
    };

-    const elements = createTabsContainer(
+    const elements = createTextualTabsContainer(
      'inspector',
      [
-        ['inspector-tab-info', pages.info.root],
-        ['inspector-tab-peers', pages.peers.root],
-        ['inspector-tab-tiers', pages.tiers.root],
-        ['inspector-tab-files', pages.files.root],
+        ['inspector-tab-info', pages.info.root, 'Info'],
+        ['inspector-tab-peers', pages.peers.root, 'Peers'],
+        ['inspector-tab-tiers', pages.tiers.root, 'Tiers'],
+        ['inspector-tab-files', pages.files.root, 'Files'],
      ],
      on_activated.bind(this)
    );
--- a/web/src/overflow-menu.js
+++ b/web/src/overflow-menu.js
@ -156,6 +156,7 @@ export class OverflowMenu extends EventTarget {
    // sort mode

    let div = document.createElement('div');
+    div.classList.add('table-row');
    options.append(div);

    let label = document.createElement('label');
@ -194,6 +195,7 @@ export class OverflowMenu extends EventTarget {
    // sort direction

    div = document.createElement('div');
+    div.classList.add('table-row');
    options.append(div);

    let check = document.createElement('input');
@ -218,6 +220,7 @@ export class OverflowMenu extends EventTarget {
    // compact

    div = document.createElement('div');
+    div.classList.add('table-row');
    options.append(div);

    const action = 'toggle-compact-rows';
@ -245,6 +248,7 @@ export class OverflowMenu extends EventTarget {
    // fullscreen

    div = document.createElement('div');
+    div.classList.add('table-row');
    options.append(div);

    check = document.createElement('input');
@ -446,26 +450,32 @@ export class OverflowMenu extends EventTarget {
    section = make_section('links', 'Links');
    root.append(section);

-    options = document.createElement('div');
+    options = document.createElement('ul');
    section.append(options);

    let e = document.createElement('a');
    e.href = 'https://transmissionbt.com/';
    e.tabindex = '0';
    e.textContent = 'Homepage';
-    options.append(e);
+    let li = document.createElement('li');
+    li.append(e);
+    options.append(li);

    e = document.createElement('a');
    e.href = 'https://transmissionbt.com/donate/';
    e.tabindex = '0';
    e.textContent = 'Tip Jar';
-    options.append(e);
+    li = document.createElement('li');
+    li.append(e);
+    options.append(li);

    e = document.createElement('a');
    e.href = 'https://github.com/transmission/transmission/';
    e.tabindex = '0';
    e.textContent = 'Source Code';
-    options.append(e);
+    li = document.createElement('li');
+    li.append(e);
+    options.append(li);

    this._updateElement = this._updateElement.bind(this);

--- a/web/src/prefs-dialog.js
+++ b/web/src/prefs-dialog.js
@ -6,7 +6,7 @@
 import { Formatter } from './formatter.js';
 import {
  OutsideClickListener,
-  createTabsContainer,
+  createTextualTabsContainer,
  makeUUID,
  setEnabled,
  setTextContent,
@ -754,11 +754,11 @@ export class PrefsDialog extends EventTarget {
      torrents: PrefsDialog._createTorrentsPage(),
    };

-    const elements = createTabsContainer('prefs-dialog', [
-      ['prefs-tab-torrent', pages.torrents.root],
-      ['prefs-tab-speed', pages.speed.root],
-      ['prefs-tab-peers', pages.peers.root],
-      ['prefs-tab-network', pages.network.root],
+    const elements = createTextualTabsContainer('prefs-dialog', [
+      ['prefs-tab-torrent', pages.torrents.root, 'Torrents'],
+      ['prefs-tab-speed', pages.speed.root, 'Speed'],
+      ['prefs-tab-peers', pages.peers.root, 'Peers'],
+      ['prefs-tab-network', pages.network.root, 'Network'],
    ]);

    return { ...elements, ...pages };
--- a/web/src/utils.js
+++ b/web/src/utils.js
@ -41,6 +41,54 @@ export const Utils = {
  },
 };

+export function createTextualTabsContainer(id, tabs, callback) {
+  const root = document.createElement('div');
+  root.id = id;
+  root.classList.add('tabs-container');
+
+  const buttons = document.createElement('div');
+  buttons.classList.add('tabs-buttons');
+  root.append(buttons);
+
+  const pages = document.createElement('div');
+  pages.classList.add('tabs-pages');
+  root.append(pages);
+
+  const button_array = [];
+  for (const [button_id, page, tabname] of tabs) {
+    const button = document.createElement('button');
+    button.id = button_id;
+    button.classList.add('tabs-button');
+    button.setAttribute('type', 'button');
+    button.textContent = tabname;
+    buttons.append(button);
+    button_array.push(button);
+
+    page.classList.add('hidden', 'tabs-page');
+    pages.append(page);
+
+    button.addEventListener('click', () => {
+      for (const element of buttons.children) {
+        element.classList.toggle('selected', element === button);
+      }
+      for (const element of pages.children) {
+        element.classList.toggle('hidden', element !== page);
+      }
+      if (callback) {
+        callback(page);
+      }
+    });
+  }
+
+  button_array[0].classList.add('selected');
+  pages.children[0].classList.remove('hidden');
+
+  return {
+    buttons: button_array,
+    root,
+  };
+}
+
 export function createTabsContainer(id, tabs, callback) {
  const root = document.createElement('div');
  root.id = id;
--- a/web/webpack.config.js
+++ b/web/webpack.config.js
@ -25,11 +25,9 @@ const config = {
      },
      {
        test: /\.css$/i,
-        use: [ 'style-loader', 'css-loader' ],
+        use: ['style-loader', 'css-loader'],
      },
-
      {
-        exclude: /(node_modules)/,
        include: /(assets)\/(img)/,
        test: /\.(jpe?g|png|gif|svg|webp)$/,
        type: 'asset/inline',
@ -37,20 +35,17 @@ const config = {
    ],
  },
  optimization: {
-    minimizer: [
-      new TerserPlugin(),
-      new CssMinimizerPlugin(),
-    ],
+    minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
  },
  output: {
-    filename: 'transmission-app.js' ,
+    filename: 'transmission-app.js',
    path: path.resolve(__dirname, 'public_html'),
    sourceMapFilename: 'transmission-app.js.map'
  },
  plugins: [
    new MiniCssExtractPlugin({
      chunkFilename: '[id].css',
-      filename: '[name].css'
+      filename: '[name].css',
    }),
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1,
--- a/web/yarn.lock
+++ b/web/yarn.lock
				`@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-5h2v5zm4 0h-2v-3h2v3zm0-5h-2v-2h2v2zm4 5h-2V7h2v10z"/></svg>`
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-music"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>`
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-package"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>