feat: Standardize browser profile and proxy display

frontend/src/components/ui/link.ts

@@ -25,7 +25,7 @@ export class Link extends BtrixElement {
     return html`
       <a
         class=${clsx(
-          "group inline-flex items-center gap-1 transition-colors",
+          "group inline-flex items-center gap-1 transition-colors duration-fast",
           {
             primary: "text-primary-500 hover:text-primary-600",
             neutral: "text-blue-500 hover:text-blue-600",
@@ -42,7 +42,7 @@ export class Link extends BtrixElement {
         <sl-icon
           slot="suffix"
           name="arrow-right"
-          class="size-4 transition-transform group-hover:translate-x-1"
+          class="size-4 transition-transform duration-fast group-hover:translate-x-1"
         ></sl-icon
       ></a>
     `;

frontend/src/components/ui/select-crawler-proxy.ts

@@ -1,6 +1,6 @@
 import { localized, msg } from "@lit/localize";
 import type { SlSelect } from "@shoelace-style/shoelace";
-import { html } from "lit";
+import { html, type PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
@@ -49,6 +49,12 @@ export class SelectCrawlerProxy extends BtrixElement {
   @property({ type: String })
   size?: SlSelect["size"];
 
+  @property({ type: String })
+  helpText?: string;
+
+  @property({ type: Boolean })
+  disabled?: boolean;
+
   @state()
   private selectedProxy?: Proxy;
 
@@ -59,6 +65,18 @@ export class SelectCrawlerProxy extends BtrixElement {
     return this.selectedProxy?.id || "";
   }
 
+  protected willUpdate(changedProperties: PropertyValues): void {
+    if (changedProperties.has("proxyId")) {
+      if (this.proxyId) {
+        this.selectedProxy = this.proxyServers.find(
+          ({ id }) => id === this.proxyId,
+        );
+      } else if (changedProperties.get("proxyId")) {
+        this.selectedProxy = undefined;
+      }
+    }
+  }
+
   protected firstUpdated() {
     void this.initProxies();
   }
@@ -82,6 +100,7 @@ export class SelectCrawlerProxy extends BtrixElement {
           : msg("No Proxy")}
         hoist
         clearable
+        ?disabled=${this.disabled}
         size=${ifDefined(this.size)}
         @sl-change=${this.onChange}
         @sl-hide=${this.stopProp}

frontend/src/controllers/localize.ts

@@ -55,7 +55,11 @@ export class LocalizeController extends SlLocalizeController {
               })
             : seconds > 60
               ? html`<sl-relative-time
-                  class=${ifDefined(capitalize ? tw`capitalize` : undefined)}
+                  class=${ifDefined(
+                    capitalize
+                      ? tw`inline-block first-letter:capitalize`
+                      : undefined,
+                  )}
                   sync
                   date=${dateStr}
                 ></sl-relative-time>`