Add web interface and tests

packages/web/src/index.scss

@@ -0,0 +1,113 @@
+@mixin scheme($property, $light-value, $dark-value) {
+  #{$property}: $light-value;
+  @media (prefers-color-scheme: dark) {
+    #{$property}: $dark-value;
+  }
+}
+
+body {
+  background: transparent;
+  margin: 0;
+  overflow: hidden;
+  font-size: 15px;
+  font-family: -apple-system, BlinkMacSystemFont, system-ui, "Roboto", "Oxygen", "Ubuntu",
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+
+  --color: #000;
+  --titlebar-height: 46px;
+  --titlebar-height: 0px;
+  --label-background: #ddd;
+  --selected-background: #c9c9c9;
+  --hover-background: #ddd;
+  --monospace: D2Coding, source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    color: #fff;
+    --color: #fff;
+    --label-background: #353535;
+    --selected-background: #353535;
+    --selected-background: #15539e;
+    --hover-background: #222;
+  }
+  #root {
+    background-color: #292929;
+  }
+}
+
+pre,
+code {
+  font-family: var(--monospace);
+}
+
+input {
+  font-family: inherit;
+  font-size: inherit;
+}
+input[type="search"],
+input[type="input"],
+input[type="password"] {
+  @include scheme(background-color, #fff, #2d2d2d);
+  border-radius: 6px;
+  border: 1px solid;
+  @include scheme(border-color, #cdc7c2, #1b1b1b);
+  color: inherit;
+  outline: none;
+  padding: 7px 8px;
+  transition: 0.1s;
+  &:focus {
+    @include scheme(border-color, #3584e480, #15539e);
+  }
+}
+
+button,
+select {
+  @include scheme(background-color, #f6f5f4, #333);
+  border-radius: 4px;
+  border: 1px solid;
+  @include scheme(border-color, #cdc7c2, #1b1b1b);
+  color: inherit;
+  font-family: inherit;
+  &:hover {
+    @include scheme(background-color, #f9f9f8, #363636);
+  }
+  &:active {
+    @include scheme(background-color, #d6d1cd, #292929);
+  }
+}
+button {
+  font-size: 16px;
+  padding: 8px 15px;
+  box-shadow: rgb(0 0 0 / 7%) 0px 1px 2px;
+  transition: 0.1s;
+}
+button[type="submit"] {
+  background-color: #15539e;
+  color: #fff;
+}
+select {
+  padding: 5px 10px;
+}
+
+::-webkit-scrollbar {
+  width: 7px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  @include scheme(background, #8883, #6663);
+  border-radius: 6px;
+}
+::-webkit-scrollbar-thumb:hover {
+  transition: 0.1s;
+  @include scheme(background, #ddd, #555);
+}