ui: Update badges

.vscode/snippets.code-snippets

@@ -1,7 +1,10 @@
 {
   "Btrix Component": {
     "scope": "javascript,typescript",
-    "prefix": ["component", "@customElement"],
+    "prefix": [
+      "component",
+      "@customElement"
+    ],
     "isFileTemplate": true,
     "body": [
       "import { localized } from \"@lit/localize\";",
@@ -22,7 +25,10 @@
   },
   "Btrix Component Test": {
     "scope": "javascript,typescript",
-    "prefix": ["test","describe"],
+    "prefix": [
+      "test",
+      "describe"
+    ],
     "isFileTemplate": true,
     "body": [
       "import { expect, fixture } from \"@open-wc/testing\";",
@@ -54,5 +60,60 @@
       ""
     ],
     "description": "Unit test for custom component that extends `BtrixComponent`"
+  },
+  "Btrix Storybook Component Render": {
+    "scope": "javascript,typescript",
+    "prefix": [
+      "renderComponent",
+      "component"
+    ],
+    "isFileTemplate": true,
+    "body": [
+      "import { html } from \"lit\";",
+      "import { ifDefined } from \"lit/directives/if-defined.js\";",
+      "",
+      "import type { ${1:Component} } from \"@/${2:directory}/${3:component}\";",
+      "",
+      "import \"@/${2:directory}/${3:component}\";",
+      "",
+      "export type RenderProps = ${1:Component};",
+      "",
+      "export const renderComponent = (props: Partial<RenderProps>) => {",
+      "  return html`<btrix-${3:component} ${4:property}=${ifDefined(props.${4:property})}></btrix-${3:component}>`;",
+      "};"
+    ],
+    "description": "Component render for Storybook stories"
+  },
+  "Btrix Storybook Component Story": {
+    "scope": "javascript,typescript",
+    "prefix": [
+      "story",
+      "stories",
+      "doc"
+    ],
+    "isFileTemplate": true,
+    "body": [
+      "import type { Meta, StoryObj } from \"@storybook/web-components\";",
+      "",
+      "import { renderComponent, type RenderProps } from \"./${TM_FILENAME_BASE/\\.stories(.*)/$1/}\";",
+      "",
+      "const meta = {",
+      "  title: \"Components/${TM_FILENAME_BASE/\\.stories(.*)/$1/}\",",
+      "  component: \"btrix-${2:component}\",",
+      "  tags: [\"autodocs\"],",
+      "  decorators: [],",
+      "  render: renderComponent,",
+      "  argTypes: {},",
+      "  args: {},",
+      "} satisfies Meta<RenderProps>;",
+      "",
+      "export default meta;",
+      "type Story = StoryObj<RenderProps>;",
+      "",
+      "export const Basic: Story = {",
+      "  args: {},",
+      "};"
+    ],
+    "description": "Stories for component in Storybook"
   }
-}
+}

frontend/src/components/ui/badge.ts

@@ -13,17 +13,15 @@ export type BadgeVariant =
   | "primary"
   | "cyan"
   | "blue"
+  | "violet"
+  | "orange"
   | "high-contrast"
   | "text"
   | "text-neutral";
 
 /**
- * Show numeric value in a label
- *
- * Usage example:
- * ```ts
- * <btrix-badge aria-describedby="text">10</btrix-badge>
- * ```
+ * Badges are compact, non-interactive displays of contextual information.
+ * They are an unobtrusive way of drawing attention to dynamic data like statuses or counts.
  */
 @customElement("btrix-badge")
 export class Badge extends TailwindElement {
@@ -42,6 +40,12 @@ export class Badge extends TailwindElement {
   @property({ type: String, reflect: true })
   role: string | null = "status";
 
+  /**
+   * Style as normal text and not data
+   */
+  @property({ type: Boolean })
+  asLabel = false;
+
   static styles = css`
     :host {
       display: inline-flex;
@@ -52,21 +56,28 @@ export class Badge extends TailwindElement {
     return html`
       <span
         class=${clsx(
-          tw`inline-flex min-h-4 items-center justify-center align-[1px] leading-none`,
-          this.size === "medium" && tw`text-xs`,
+          tw`inline-flex min-h-4 items-center justify-center whitespace-nowrap leading-none`,
+          this.asLabel
+            ? [this.size === "medium" && tw`text-xs`]
+            : [
+                tw`font-mono [font-variation-settings:var(--font-monostyle-variation)]`,
+                this.size === "medium" && tw`text-xs`,
+              ],
           this.outline
             ? [
                 tw`mx-px ring-1`,
                 {
                   success: tw`bg-success-50 text-success-700 ring-success-400`,
-                  warning: tw`bg-warning-600 text-warning-600 ring-warning-600`,
-                  danger: tw`bg-danger-500 text-danger-500 ring-danger-500`,
+                  warning: tw`bg-warning-50 text-warning-600 ring-warning-600`,
+                  danger: tw`bg-danger-50 text-danger-500 ring-danger-500`,
                   neutral: tw`bg-neutral-100 text-neutral-600 ring-neutral-300`,
-                  "high-contrast": tw`bg-neutral-600 text-neutral-0 ring-neutral-0`,
+                  "high-contrast": tw`bg-neutral-0 text-neutral-700 ring-neutral-600`,
                   primary: tw`bg-white text-primary ring-primary`,
                   cyan: tw`bg-cyan-50 text-cyan-600 ring-cyan-600`,
                   blue: tw`bg-blue-50 text-blue-600 ring-blue-600`,
                   text: tw`text-blue-500 ring-blue-600`,
+                  violet: tw`bg-violet-50 text-violet-600 ring-violet-600`,
+                  orange: tw`bg-orange-50 text-orange-600 ring-orange-600`,
                   "text-neutral": tw`text-neutral-500 ring-neutral-600`,
                 }[this.variant],
               ]
@@ -79,13 +90,15 @@ export class Badge extends TailwindElement {
                 primary: tw`bg-primary text-neutral-0`,
                 cyan: tw`bg-cyan-50 text-cyan-600`,
                 blue: tw`bg-blue-50 text-blue-600`,
+                violet: tw`bg-violet-50 text-violet-600`,
+                orange: tw`bg-orange-50 text-orange-600`,
                 text: tw`text-blue-500`,
                 "text-neutral": tw`text-neutral-500`,
               }[this.variant],
           this.pill
             ? [
-                tw`min-w-[1.125rem] rounded-full`,
-                this.size === "large" ? tw`px-1.5 py-0.5` : tw`px-1`,
+                tw`min-w-[1.125rem] rounded-full px-2`,
+                this.size === "large" && tw`py-0.5`,
               ]
             : [tw`rounded`, this.size === "large" ? tw`px-2.5 py-1` : tw`px-2`],
         )}

frontend/src/features/crawls/crawler-channel-badge.ts

@@ -21,9 +21,9 @@ export class CrawlerChannelBadge extends TailwindElement {
   channelId?: CrawlerChannelImage | AnyString;
 
   render() {
-    if (!this.channelId || !this.crawlerChannels) return;
+    if (!this.channelId) return;
 
-    const crawlerChannel = this.crawlerChannels.find(
+    const crawlerChannel = this.crawlerChannels?.find(
       ({ id }) => id === this.channelId,
     );
 
@@ -36,7 +36,6 @@ export class CrawlerChannelBadge extends TailwindElement {
         variant=${this.channelId === CrawlerChannelImage.Default
           ? "neutral"
           : "blue"}
-        class="font-monostyle whitespace-nowrap"
       >
         <sl-icon name="boxes" class="mr-1.5"></sl-icon>
         <span class="capitalize">${this.channelId}</span>

frontend/src/features/crawls/proxy-badge.ts

@@ -20,16 +20,18 @@ export class ProxyBadge extends TailwindElement {
   proxyId?: string;
 
   render() {
-    if (!this.proxyId || !this.orgProxies) return;
+    if (!this.proxyId) return;
 
-    const proxy = this.orgProxies.servers.find(({ id }) => id === this.proxyId);
+    const proxy = this.orgProxies?.servers.find(
+      ({ id }) => id === this.proxyId,
+    );
 
     return html`<btrix-popover
       content=${ifDefined(proxy?.description || undefined)}
       ?disabled=${!proxy?.description}
       hoist
     >
-      <btrix-badge variant="blue" class="font-monostyle whitespace-nowrap">
+      <btrix-badge variant="violet" class="font-monostyle">
         <sl-icon name="globe2" class="mr-1.5"></sl-icon>
         ${proxy?.label || this.proxyId}
       </btrix-badge>

frontend/src/pages/org/archived-item-detail/archived-item-detail.ts

@@ -732,9 +732,7 @@ export class ArchivedItemDetail extends BtrixElement {
                 <sl-icon name="cloud-download" slot="prefix"></sl-icon>
                 ${msg("Download Item")}
                 ${this.item?.fileSize
-                  ? html` <btrix-badge
-                      slot="suffix"
-                      class="font-monostyle text-xs text-neutral-500"
+                  ? html` <btrix-badge slot="suffix"
                       >${this.localize.bytes(this.item.fileSize)}</btrix-badge
                     >`
                   : nothing}

frontend/src/pages/org/archived-items.ts

@@ -792,9 +792,7 @@ export class CrawlsList extends BtrixElement {
             <sl-icon name="cloud-download" slot="prefix"></sl-icon>
             ${msg("Download Item")}
             ${item.fileSize
-              ? html` <btrix-badge
-                  slot="suffix"
-                  class="font-monostyle text-xs text-neutral-500"
+              ? html` <btrix-badge slot="suffix"
                   >${this.localize.bytes(item.fileSize)}</btrix-badge
                 >`
               : nothing}

frontend/src/pages/org/collection-detail.ts

@@ -562,9 +562,7 @@ export class CollectionDetail extends BtrixElement {
             ${when(
               this.collection,
               (collection) => html`
-                <btrix-badge
-                  slot="suffix"
-                  class="font-monostyle text-xs text-neutral-500"
+                <btrix-badge slot="suffix"
                   >${this.localize.bytes(
                     collection.totalSize || 0,
                   )}</btrix-badge

frontend/src/pages/org/collections-list.ts

@@ -689,9 +689,7 @@ export class CollectionsList extends WithSearchOrgContext(BtrixElement) {
           >
             <sl-icon name="cloud-download" slot="prefix"></sl-icon>
             ${msg("Download Collection")}
-            <btrix-badge
-              slot="suffix"
-              class="font-monostyle text-xs text-neutral-500"
+            <btrix-badge slot="suffix"
               >${this.localize.bytes(col.totalSize)}</btrix-badge
             >
           </btrix-menu-item-link>

frontend/src/pages/org/crawls.ts

@@ -658,9 +658,7 @@ export class OrgCrawls extends BtrixElement {
             <sl-icon name="cloud-download" slot="prefix"></sl-icon>
             ${msg("Download Item")}
             ${crawl.fileSize
-              ? html` <btrix-badge
-                  slot="suffix"
-                  class="font-monostyle text-xs text-neutral-500"
+              ? html` <btrix-badge slot="suffix"
                   >${this.localize.bytes(crawl.fileSize)}</btrix-badge
                 >`
               : nothing}

frontend/src/pages/org/workflow-detail.ts

@@ -764,9 +764,7 @@ export class WorkflowDetail extends BtrixElement {
                   <sl-icon name="cloud-download" slot="prefix"></sl-icon>
                   ${msg("Item")}
                   ${latestCrawl.fileSize
-                    ? html` <btrix-badge
-                        slot="suffix"
-                        class="font-monostyle text-xs text-neutral-500"
+                    ? html` <btrix-badge slot="suffix"
                         >${this.localize.bytes(
                           latestCrawl.fileSize,
                         )}</btrix-badge