Fix language selector using locale instead of lang (#2294)

Also fixes a shoelace menu-item bug where checkbox menu items would have
their checked state flipped on click, regardless of `checked` value.

~~Deploying to dev to test if this fixes language switching...~~ Yep!
Seems to fix the issues.

frontend/src/components/beta-badges.ts

@@ -9,8 +9,8 @@ import { TailwindElement } from "@/classes/TailwindElement";
 
 const styles = unsafeCSS(stylesheet);
 
-@localized()
 @customElement("btrix-beta-icon")
+@localized()
 export class BetaIcon extends TailwindElement {
   static styles = styles;
   render() {
@@ -26,8 +26,8 @@ export class BetaIcon extends TailwindElement {
   }
 }
 
-@localized()
 @customElement("btrix-beta-badge")
+@localized()
 export class BetaBadge extends TailwindElement {
   @property({ type: String })
   placement: SlTooltip["placement"] = "top";

frontend/src/components/detail-page-title.ts

@@ -24,8 +24,8 @@ type Item = {
   state?: CrawlState;
 };
 
-@localized()
 @customElement("btrix-detail-page-title")
+@localized()
 export class DetailPageTitle extends TailwindElement {
   @property({ type: Object })
   item: Item | undefined;

frontend/src/components/orgs-list.ts

@@ -21,8 +21,8 @@ import type { OrgData } from "@/utils/orgs";
  * @fires update-quotas
  * @fires update-proxies
  */
-@localized()
 @customElement("btrix-orgs-list")
+@localized()
 export class OrgsList extends BtrixElement {
   static styles = css`
     btrix-table {

frontend/src/components/ui/config-details.ts

@@ -27,8 +27,8 @@ import { pluralOf } from "@/utils/pluralize";
  * ></btrix-config-details>
  * ```
  */
-@localized()
 @customElement("btrix-config-details")
+@localized()
 export class ConfigDetails extends BtrixElement {
   @property({ type: Object })
   crawlConfig?: CrawlConfig;

frontend/src/components/ui/copy-button.ts

@@ -18,8 +18,8 @@ import { TailwindElement } from "@/classes/TailwindElement";
  *
  * @event on-copied
  */
-@localized()
 @customElement("btrix-copy-button")
+@localized()
 export class CopyButton extends TailwindElement {
   @property({ type: String })
   value?: string;

frontend/src/components/ui/copy-field.ts

@@ -14,8 +14,8 @@ import { tw } from "@/utils/tailwind";
  * <btrix-copy-field label="my field" value=${value}></btrix-copy-field>
  * ```
  */
-@localized()
 @customElement("btrix-copy-field")
+@localized()
 export class CopyField extends TailwindElement {
   @property({ type: String })
   value?: string;

frontend/src/components/ui/field-error.ts

@@ -4,8 +4,8 @@ import { customElement, property } from "lit/decorators.js";
 
 import { TailwindElement } from "@/classes/TailwindElement";
 
-@localized()
 @customElement("btrix-field-error")
+@localized()
 export class FieldError extends TailwindElement {
   @property({ type: Boolean })
   hidden = true;

frontend/src/components/ui/file-list.ts

@@ -18,8 +18,8 @@ export type FileRemoveEvent = CustomEvent<FileRemoveDetail>;
 /**
  * @event on-remove FileRemoveEvent
  */
-@localized()
 @customElement("btrix-file-list-item")
+@localized()
 export class FileListItem extends BtrixElement {
   static styles = [
     truncate,

frontend/src/components/ui/menu-item-link.ts

@@ -15,8 +15,8 @@ import { NavigateController } from "@/controllers/navigate";
  *
  * Based on https://github.com/shoelace-style/shoelace/blob/d0b71adb81e21687a5ef036565dad44bc609bcce/src/components/menu-item/menu-item.component.ts
  */
-@localized()
 @customElement("btrix-menu-item-link")
+@localized()
 export class MenuItemLink extends TailwindElement {
   static styles = [menuItemStyles];
 

frontend/src/components/ui/overflow-dropdown.ts

@@ -23,8 +23,8 @@ import { TailwindElement } from "@/classes/TailwindElement";
  *< /btrix-overflow-dropdown>
  * ```
  */
-@localized()
 @customElement("btrix-overflow-dropdown")
+@localized()
 export class OverflowDropdown extends TailwindElement {
   @state()
   private hasMenuItems?: boolean;

frontend/src/components/ui/relative-duration.ts

@@ -18,8 +18,8 @@ export type HumanizeOptions = {
  * <btrix-relative-duration value=${value}></btrix-relative-duration>
  * ```
  */
-@localized()
 @customElement("btrix-relative-duration")
+@localized()
 export class RelativeDuration extends LitElement {
   readonly localize = new LocalizeController(this);
 

frontend/src/components/ui/search-combobox.ts

@@ -23,8 +23,8 @@ const MAX_SEARCH_RESULTS = 10;
  * @event btrix-select
  * @event btrix-clear
  */
-@localized()
 @customElement("btrix-search-combobox")
+@localized()
 export class SearchCombobox<T> extends LitElement {
   @property({ type: Array })
   searchOptions: T[] = [];

frontend/src/components/ui/time-input.ts

@@ -24,8 +24,8 @@ export type TimeInputChangeEvent = CustomEvent<TimeInputChangeDetail>;
  * @events
  * time-change TimeInputChangeEvent
  */
-@localized()
 @customElement("btrix-time-input")
+@localized()
 export class TimeInput extends LitElement {
   // postcss-lit-disable-next-line
   static styles = css`

frontend/src/components/ui/user-language-select.ts

@@ -36,8 +36,6 @@ export class LocalePicker extends BtrixElement {
   }
 
   render() {
-    const selectedLocale = new Intl.Locale(this.localize.lang()).language;
-
     return html`
       <sl-dropdown
         @sl-select=${this.localeChanged}
@@ -53,7 +51,9 @@ export class LocalePicker extends BtrixElement {
         >
           <sl-icon slot="prefix" name="translate"></sl-icon>
           <span class="capitalize"
-            >${this.localeNames[selectedLocale as TranslatedLocaleEnum]}</span
+            >${this.localeNames[
+              localize.activeLanguage as TranslatedLocaleEnum
+            ]}</span
           >
         </sl-button>
         <sl-menu>
@@ -65,7 +65,7 @@ export class LocalePicker extends BtrixElement {
                   class="capitalize"
                   type="checkbox"
                   value=${locale}
-                  ?checked=${locale === selectedLocale}
+                  ?checked=${locale === localize.activeLanguage}
                 >
                   ${this.localeNames[locale]}
                 </sl-menu-item>`,
@@ -78,6 +78,19 @@ export class LocalePicker extends BtrixElement {
   async localeChanged(event: SlSelectEvent) {
     const newLocale = event.detail.item.value as TranslatedLocaleEnum;
 
+    // Workaround for the fact that Shoelace menu items that are checkboxes have
+    // their `checked` internal state inverted on click, regardless of the value
+    // of their `checked` attribute.
+    // https://github.com/shoelace-style/shoelace/blob/v2.15.1/src/components/menu/menu.component.ts#L43-L45
+    const items = this.shadowRoot!.querySelectorAll("sl-menu-item");
+    items.forEach((item) => {
+      item.checked = item.value === localize.activeLanguage;
+    });
+
+    if (newLocale === localize.activeLanguage) {
+      event.preventDefault();
+      return;
+    }
     await localize.setLanguage(newLocale);
   }
 }

frontend/src/features/accounts/invite-form.ts

@@ -24,8 +24,8 @@ type Org = UserOrg & Partial<OrgData>;
 /**
  * @event btrix-invite-success
  */
-@localized()
 @customElement("btrix-invite-form")
+@localized()
 export class InviteForm extends BtrixElement {
   @property({ type: Array, attribute: false })
   orgs?: Org[] = [];

frontend/src/features/accounts/sign-up-form.ts

@@ -26,8 +26,8 @@ const { PASSWORD_MINLENGTH, PASSWORD_MAXLENGTH, PASSWORD_MIN_SCORE } =
  * @event authenticated
  * @event unauthenticated
  */
-@localized()
 @customElement("btrix-sign-up-form")
+@localized()
 export class SignUpForm extends LiteElement {
   /** Optional read-only email, e.g. for invitations */
   @property({ type: String })

frontend/src/features/archived-items/archived-item-list.ts

@@ -26,8 +26,8 @@ export type CheckboxChangeEventDetail = {
  * @slot actionCell - Action cell
  * @fires btrix-checkbox-change
  */
-@localized()
 @customElement("btrix-archived-item-list-item")
+@localized()
 export class ArchivedItemListItem extends BtrixElement {
   static styles = css`
     :host {
@@ -334,8 +334,8 @@ export class ArchivedItemListItem extends BtrixElement {
  * @slot checkboxCell
  * @slot actionCell
  */
-@localized()
 @customElement("btrix-archived-item-list")
+@localized()
 export class ArchivedItemList extends TailwindElement {
   static styles = css`
     btrix-table {

frontend/src/features/archived-items/crawl-list.ts

@@ -31,8 +31,8 @@ import { pluralOf } from "@/utils/pluralize";
 /**
  * @slot menu
  */
-@localized()
 @customElement("btrix-crawl-list-item")
+@localized()
 export class CrawlListItem extends BtrixElement {
   static styles = css`
     :host {
@@ -239,8 +239,8 @@ export class CrawlListItem extends BtrixElement {
 /**
  * @slot
  */
-@localized()
 @customElement("btrix-crawl-list")
+@localized()
 export class CrawlList extends TailwindElement {
   static styles = css`
     btrix-table {

frontend/src/features/archived-items/crawl-logs.ts

@@ -13,8 +13,8 @@ export type CrawlLog = {
   message: string;
 };
 
-@localized()
 @customElement("btrix-crawl-logs")
+@localized()
 export class CrawlLogs extends LitElement {
   static styles = [
     truncate,

frontend/src/features/archived-items/crawl-pending-exclusions.ts

@@ -17,8 +17,8 @@ type URLs = string[];
  * ></btrix-crawl-pending-exclusions>
  * ```
  */
-@localized()
 @customElement("btrix-crawl-pending-exclusions")
+@localized()
 export class CrawlPendingExclusions extends BtrixElement {
   @property({ type: Array })
   matchedURLs: URLs | null = null;

frontend/src/features/archived-items/crawl-queue.ts

@@ -31,8 +31,8 @@ const POLL_INTERVAL_SECONDS = 5;
  * ></btrix-crawl-queue>
  * ```
  */
-@localized()
 @customElement("btrix-crawl-queue")
+@localized()
 export class CrawlQueue extends BtrixElement {
   @property({ type: String })
   crawlId?: string;

frontend/src/features/archived-items/crawl-status.ts

@@ -10,8 +10,8 @@ import { animatePulse } from "@/utils/css";
 
 type CrawlType = "crawl" | "upload" | "qa";
 
-@localized()
 @customElement("btrix-crawl-status")
+@localized()
 export class CrawlStatus extends TailwindElement {
   @property({ type: String })
   state?: CrawlState | AnyString;

frontend/src/features/archived-items/file-uploader.ts

@@ -48,8 +48,8 @@ enum AbortReason {
  * @event upload-start
  * @event uploaded
  */
-@localized()
 @customElement("btrix-file-uploader")
+@localized()
 export class FileUploader extends BtrixElement {
   @property({ type: Boolean })
   open = false;

frontend/src/features/archived-items/item-list-controls.ts

@@ -30,8 +30,8 @@ export type SortChangeEventDetail = Partial<SortBy>;
  * @fires btrix-filter-change
  * @fires btrix-sort-change
  */
-@localized()
 @customElement("btrix-item-list-controls")
+@localized()
 export class ItemListControls extends TailwindElement {
   static styles = css``;
 

frontend/src/features/archived-items/item-metadata-editor.ts

@@ -27,8 +27,8 @@ import LiteElement, { html } from "@/utils/LiteElement";
  * @event request-close
  * @event updated
  */
-@localized()
 @customElement("btrix-item-metadata-editor")
+@localized()
 export class CrawlMetadataEditor extends LiteElement {
   @property({ type: Object })
   crawl?: ArchivedItem;

frontend/src/features/browser-profiles/new-browser-profile-dialog.ts

@@ -18,8 +18,8 @@ import { type SelectCrawlerProxyChangeEvent } from "@/components/ui/select-crawl
 import { proxiesContext, type ProxiesContext } from "@/context/org";
 import LiteElement, { html } from "@/utils/LiteElement";
 
-@localized()
 @customElement("btrix-new-browser-profile-dialog")
+@localized()
 export class NewBrowserProfileDialog extends LiteElement {
   @consume({ context: proxiesContext, subscribe: true })
   private readonly proxies?: ProxiesContext;

frontend/src/features/browser-profiles/profile-browser.ts

@@ -38,8 +38,8 @@ export type BrowserConnectionChange = {
  * @fires btrix-browser-reload
  * @fires btrix-browser-connection-change
  */
-@localized()
 @customElement("btrix-profile-browser")
+@localized()
 export class ProfileBrowser extends BtrixElement {
   @property({ type: String })
   browserId?: string;

frontend/src/features/collections/collection-items-dialog.ts

@@ -39,7 +39,7 @@ import { pluralOf } from "@/utils/pluralize";
 
 const TABS = ["crawl", "upload"] as const;
 type Tab = (typeof TABS)[number];
-const searchKeys = ["name", "firstSeed"];
+const searchKeys = ["name", "firstSeed"] as const;
 const crawlSortOptions: SortOptions = [
   {
     // NOTE "finished" field doesn't exist in crawlconfigs,
@@ -69,8 +69,8 @@ const uploadSortOptions: SortOptions = [
 const COLLECTION_ITEMS_MAX = 1000;
 const DEFAULT_PAGE_SIZE = 10;
 
-@localized()
 @customElement("btrix-collection-items-dialog")
+@localized()
 export class CollectionItemsDialog extends BtrixElement {
   static styles = css`
     btrix-dialog {

frontend/src/features/collections/collection-metadata-dialog.ts

@@ -25,8 +25,8 @@ export type CollectionSavedEvent = CustomEvent<{
 /**
  * @fires btrix-collection-saved CollectionSavedEvent Fires
  */
-@localized()
 @customElement("btrix-collection-metadata-dialog")
+@localized()
 export class CollectionMetadataDialog extends BtrixElement {
   @property({ type: Object })
   collection?: Collection;

frontend/src/features/collections/collection-workflow-list.ts

@@ -31,8 +31,8 @@ const CRAWLS_PAGE_SIZE = 50;
  * @fires btrix-selection-change
  * @fires btrix-auto-add-change
  */
-@localized()
 @customElement("btrix-collection-workflow-list")
+@localized()
 export class CollectionWorkflowList extends BtrixElement {
   static styles = css`
     :host {

frontend/src/features/collections/collections-add.ts

@@ -35,8 +35,8 @@ export type CollectionsChangeEvent = CustomEvent<{
  * ```
  * @events collections-change
  */
-@localized()
 @customElement("btrix-collections-add")
+@localized()
 export class CollectionsAdd extends BtrixElement {
   @property({ type: Array })
   initialCollections?: string[];

frontend/src/features/crawl-workflows/exclusion-editor.ts

@@ -33,8 +33,8 @@ type ResponseData = {
  *
  * @event on-success On successful edit
  */
-@localized()
 @customElement("btrix-exclusion-editor")
+@localized()
 export class ExclusionEditor extends LiteElement {
   @property({ type: String })
   crawlId?: string;