Options UI (#135)

* Move gzipped size calculations into a worker and wrap it up in a `<GzipSize />` component that will also handle showing % of original size once that info is plumbed

* A couple tweaks for the app welcome (drop files) screen. We don't have mocks for this one, but this is at least a minor improvement.

* Prettier "pop" effect and styling for the drop zone/indicator.

* Styling for the quantization toggle to make it look like a disclosure triangle/button.

* Add controls bar (zoom in/out/to, background toggle). @todo: extract into its own component.

* When clicking/tapping the image area, give it focus.

* Utilities used by this PR

* Add a `two-up-handle` attribute to the handle for easier styling (classname gets mangled so it doesn't make for a good public API)

* Add a dummy comment to test netlify deploy

* Remove commented-out code.

* Fix styling of vertical split (which as it turns out is slightly different in the mocks anyway)

* Use a composited overlay for the dark background instead of animating background-color

* Move grayscale styling into `<two-up>` by default, then set colors via custom properties

* Remove commented-out svg fill

* Remove dummy comment

* Change `<GzipSize>` to be `<FileSize>`, add `compress` option that lets us show gzipped sizes later if we need. Defaults to `false`, and the gzip worker is only lazily instantiated the first time a compressed size calculation is requested.

* Dependency updates

* Remove color animations from dnd overlay

* Don't use a cyclical import for EncodedImage, instead just specify the types of the properties we Options actually uses.

* Pass source image through to FileSize component so it can compute delta

* Stylize size display with colors based on delta amount/direction

* Remove box-shadow animation.

* Simplify font stack

* Remove commented out code

* Remove gzip compression from size component

* Remove memoization bits

* Use specific flattend props instead of passing large context objects around.

* Remove unused packages.

* Remove unreachable String case in FileSize, and omit redundant File type

* Simplify calculateSize()

* Fix types for FileSize!

* Remove FileSize title

* Make delta variable consistent.

* Skip passing compareTo value for original image

* Remove manual focus

* Fix whitespace

* remove unused keyframes

* remove pointless flex-wrap property

* Remove unused resetZoom() method

* Remove pointless flex properties

* Use `on` prefix for event handling

* Remove pointless justify-self property

* Use an inline SVG for TwoUp's handle icon so it can be colored from outside the component..

* Move orientation state up from `<Output>` into `<App>` and share it with `<Options>`.

* Make the options panels responsive :)

* Show a plus sign for size increases `(+8%)`

* Use inline SVG for the zoom +/- icons, collect SVG icons into one file now that I've verified they get tree-shaken properly.

* Fix top/bottom options panels being reversed

* remove commented out code

* lockfile

* Revert quanitzation toggle styles so it's just a checkbox.

* Remove minimum delta for compare size

* Rename data prop to file.

* scale int -> float

* remove tabIndex

* Remove old icon files

* Add width to options panels

* Add vertical scrolling when options are taller than 80% of the screen height.

src/components/Output/custom-els/TwoUp/index.ts

@@ -56,6 +56,10 @@ export default class TwoUp extends HTMLElement {
   }
 
   connectedCallback() {
+    this._handle.innerHTML = `<div class="${styles.scrubber}">${
+      `<svg viewBox="0 0 20 10" fill="currentColor"><path d="M8 0v10L0 5zM12 0v10l8-5z"/></svg>`
+    }</div>`;
+
     this._childrenChange();
     if (!this._everConnected) {
       this._resetPosition();

src/components/Output/custom-els/TwoUp/styles.css

@@ -2,6 +2,10 @@ two-up {
   display: grid;
   position: relative;
   --split-point: 0;
+  --accent-color: #777;
+  --track-color: var(--accent-color);
+  --thumb-background: #fff;
+  --thumb-color: var(--accent-color);
 }
 
 two-up > * {
@@ -18,33 +22,47 @@ two-up[legacy-clip-compat] > :not(.twoUpHandle) {
   touch-action: none;
   position: relative;
   width: 10px;
-  background: red;
+  background: var(--track-color);
   transform: translateX(var(--split-point)) translateX(-50%);
+  box-shadow: inset 4px 0 0 rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.4);
   will-change: transform;
+  cursor: ew-resize;
 }
 
-.twoUpHandle::after {
-  content: '';
-  display: block;
+.scrubber {
+  display: flex;
   position: absolute;
   top: 50%;
   left: 50%;
+  transform-origin: 50% 50%;
   transform: translate(-50%, -50%);
-  width: 80px;
-  height: 40px;
-  background: red;
-  border-radius: 20px;
+  width: 62px;
+  height: 56px;
+  background: var(--thumb-background);
+  border: 1px solid rgba(0,0,0,0.2);
+  border-radius: 5px;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
+  color: var(--thumb-color);
+}
+.scrubber svg {
+  flex: 1;
+  margin: 0 10px;
 }
 
 two-up[orientation='vertical'] .twoUpHandle {
   width: auto;
-  height: 10px;
+  height: 7px;
   transform: translateY(var(--split-point)) translateY(-50%);
+  box-shadow: inset 0 3px 0 rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.4);
+  cursor: ns-resize;
 }
 
-two-up[orientation='vertical'] .twoUpHandle::after {
-  width: 40px;
-  height: 80px;
+two-up[orientation='vertical'] .scrubber {
+  width: 46px;
+  height: 40px;
+  font-size: 18px;
+  box-shadow: 1px 0 4px rgba(0,0,0,0.1);
+  transform: translate(-50%, -50%) rotate(-90deg);
 }
 
 two-up > :nth-child(1):not(.twoUpHandle) {