improve typescript and linting usage across codebase

add ts-lit-plugin and eslint-typescript

disable no-invalid-css rule

fix a bunch of errors raised by eslint and typescript

run prettier & eslint on the remaining files

remove unused imports

split coll-index into index and info components...
and rename "coll" -> "item" for these.
also includes some fixes for previously-undocumented properties used on
non-ts elements.

extract labeled fields into separate component...
and make a few type improvements too

swap custom copy button for shoelace one

rename a few more missed things

webpack.config.js

@@ -1,4 +1,5 @@
-/*eslint-env node */
+/* eslint-env node */
+/* eslint @typescript-eslint/no-var-requires: "off" */
 
 const path = require("path");
 const webpack = require("webpack");
@@ -7,12 +8,12 @@ const CopyPlugin = require("copy-webpack-plugin");
 const TerserPlugin = require("terser-webpack-plugin");
 const package_json = require("./package.json");
 
-
 // helper proxy URL, run locally for app
 const HELPER_PROXY = "https://helper-proxy.webrecorder.workers.dev";
 
 // GDrive client-id
-const GDRIVE_CLIENT_ID = "160798412227-tko4c82uopud11q105b2lvbogsj77hlg.apps.googleusercontent.com";
+const GDRIVE_CLIENT_ID =
+  "160798412227-tko4c82uopud11q105b2lvbogsj77hlg.apps.googleusercontent.com";
 
 // Copyright banner text
 const BANNER_TEXT = `'[name].js is part of ReplayWeb.page (https://replayweb.page) Copyright (C) 2020-${new Date().getFullYear()}, Webrecorder Software. Licensed under the Affero General Public License v3.'`;
@@ -26,13 +27,12 @@ const optimization = {
   ],
 };
 
-
 const electronMainConfig = (/*env, argv*/) => {
   return {
     target: "electron-main",
     mode: "production",
     entry: {
-      "electron": "./src/electron-main.js", 
+      electron: "./src/electron-main.js",
     },
     optimization,
     output: {
@@ -45,57 +45,50 @@ const electronMainConfig = (/*env, argv*/) => {
     },
     plugins: [
       new webpack.DefinePlugin({
-        __HELPER_PROXY__ : JSON.stringify(HELPER_PROXY),
+        __HELPER_PROXY__: JSON.stringify(HELPER_PROXY),
       }),
       new webpack.BannerPlugin(BANNER_TEXT),
       new CopyPlugin({
         patterns: [
           // { from: "node_modules/classic-level/prebuilds/", to: "prebuilds" },
-          { from: "build/extra_prebuilds/", to: "prebuilds" }
+          { from: "build/extra_prebuilds/", to: "prebuilds" },
         ],
       }),
     ],
   };
 };
 
-
 const electronPreloadConfig = (/*env, argv*/) => {
   return {
     target: "electron-preload",
     mode: "production",
     entry: {
-      "preload": "./src/electron-preload.js", 
+      preload: "./src/electron-preload.js",
     },
 
     optimization,
-    plugins: [
-      new webpack.BannerPlugin(BANNER_TEXT),
-    ]
+    plugins: [new webpack.BannerPlugin(BANNER_TEXT)],
   };
 };
- 
- 
 
 const browserConfig = (/*env, argv*/) => {
   const isDevServer = process.env.WEBPACK_SERVE;
 
   const entry = {
-    "ui": "./src/ui.ts"
+    ui: "./src/ui.ts",
   };
 
-  const patterns = [
-    { from: "package.json", to: "_data/package.json" }
-  ];
+  const patterns = [{ from: "package.json", to: "_data/package.json" }];
 
   if (isDevServer) {
     entry["sw"] = "@webrecorder/wabac/src/sw.js";
   } else {
-    patterns.push(
-      { from: "node_modules/@webrecorder/wabac/dist/sw.js", to: "sw.js"}
-    );
+    patterns.push({
+      from: "node_modules/@webrecorder/wabac/dist/sw.js",
+      to: "sw.js",
+    });
   }
 
-
   return {
     target: "web",
     mode: "production",
@@ -103,7 +96,7 @@ const browserConfig = (/*env, argv*/) => {
       type: isDevServer ? "memory" : "filesystem",
     },
     resolve: {
-      fallback: { "crypto": false },
+      fallback: { crypto: false },
       extensions: [".ts", ".js"],
     },
     entry,
@@ -114,28 +107,25 @@ const browserConfig = (/*env, argv*/) => {
       filename: "[name].js",
       libraryTarget: "self",
       globalObject: "self",
-      publicPath: "/"
+      publicPath: "/",
     },
 
     devServer: {
       compress: true,
       port: 9990,
       open: false,
-      static:  path.join(__dirname),
+      static: path.join(__dirname),
       //publicPath: "/"
     },
 
     plugins: [
-      new webpack.NormalModuleReplacementPlugin(
-        /^node:*/,
-        (resource) => {
-          switch (resource.request) {
+      new webpack.NormalModuleReplacementPlugin(/^node:*/, (resource) => {
+        switch (resource.request) {
           case "node:stream":
             resource.request = "stream-browserify";
             break;
-          }
-        },
-      ),
+        }
+      }),
 
       new webpack.optimize.LimitChunkCountPlugin({
         maxChunks: 1,
@@ -146,12 +136,12 @@ const browserConfig = (/*env, argv*/) => {
       new MiniCssExtractPlugin(),
       new webpack.DefinePlugin({
         __SW_NAME__: JSON.stringify("sw.js"),
-        __HELPER_PROXY__ : JSON.stringify(HELPER_PROXY),
-        __GDRIVE_CLIENT_ID__ : JSON.stringify(GDRIVE_CLIENT_ID),
+        __HELPER_PROXY__: JSON.stringify(HELPER_PROXY),
+        __GDRIVE_CLIENT_ID__: JSON.stringify(GDRIVE_CLIENT_ID),
         __VERSION__: JSON.stringify(package_json.version),
       }),
       new webpack.BannerPlugin(BANNER_TEXT),
-      new CopyPlugin({ patterns })
+      new CopyPlugin({ patterns }),
     ],
 
     module: {
@@ -165,22 +155,20 @@ const browserConfig = (/*env, argv*/) => {
           },
         },
         {
-          test:  /\.svg$/,
+          test: /\.svg$/,
           use: ["svg-inline-loader"],
         },
         {
           test: /main.scss$/,
-          use: ["css-loader", "sass-loader"]
+          use: ["css-loader", "sass-loader"],
         },
         {
           test: /wombat.js|wombatWorkers.js|index.html$/i,
           use: ["raw-loader"],
-        }
-      ]
+        },
+      ],
     },
   };
 };
 
-module.exports = [ browserConfig, electronMainConfig, electronPreloadConfig ];
-
-
+module.exports = [browserConfig, electronMainConfig, electronPreloadConfig];